{% extends "base.html" %}
{% block title %}Fortune | BancaNet{% endblock %}
{% block head %}
<style>
  .ft-page {
    --ft-gold: #f0c35a;
    --ft-gold-deep: #c9922e;
    --ft-gold-light: #ffe9a8;
    --ft-purple: #6d28d9;
    --ft-purple-deep: #4c1d95;
    --ft-purple-soft: #a78bfa;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
    padding-bottom: 24px;
  }
  .ft-page__banner-wrap {
    width: calc(100% + 44px);
    margin: -30px -22px 0;
    overflow: hidden;
    background: #ede9fe;
  }
  .ft-page__banner {
    display: block;
    width: 100%;
    height: 148px;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
  }
  @media (max-width: 760px) {
    .ft-page__banner-wrap {
      width: calc(100% + 24px);
      margin: -20px -12px 0;
    }
    .ft-page__banner {
      height: 132px;
    }
  }
  .ft-page__meta {
    margin: 0;
    text-align: center;
    color: #4c1d95;
    font-size: .86rem;
    font-weight: 700;
  }
  .ft-page__meta strong { color: #ea580c; font-weight: 800; }
  .ft-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 310px;
    padding: 18px 10px 12px;
    border-radius: 18px;
    background:
      radial-gradient(circle at 50% 20%, rgba(240, 195, 90, .28), transparent 55%),
      linear-gradient(160deg, #efe7ff 0%, #ddd6fe 45%, #c4b5fd 100%);
    border: 1px solid rgba(109, 40, 217, .22);
    box-shadow: 0 12px 28px rgba(76, 29, 149, .14);
    overflow: hidden;
  }
  .ft-stage__hint {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: var(--ft-purple-deep);
    font-size: .74rem;
    font-weight: 700;
    opacity: .85;
    transition: opacity .3s ease;
  }
  .ft-envelope.is-busy ~ .ft-stage__hint,
  .ft-envelope.is-open ~ .ft-stage__hint { opacity: 0; }

  .ft-envelope {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    perspective: 800px;
    isolation: isolate;
    position: relative;
    width: min(52vw, 168px);
    height: 118px;
    margin-top: 100px;
    transform-origin: 50% 70%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: ftFloat 4s ease-in-out infinite;
  }
  .ft-envelope.is-busy,
  .ft-envelope.is-open { cursor: default; animation: none; }
  .ft-envelope.is-shake { animation: ftAnticipation .35s ease-out both; }
  .ft-envelope.is-disabled { cursor: default; animation: none; }
  .ft-envelope:focus-visible { outline: 3px solid var(--ft-purple); outline-offset: 12px; border-radius: 12px; }

  .ft-envelope__shadow {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -14px;
    height: 18px;
    border-radius: 50%;
    background: rgba(76, 29, 149, .28);
    filter: blur(6px);
    animation: ftShadow 2.8s ease-in-out infinite;
  }
  .ft-envelope.is-busy .ft-envelope__shadow,
  .ft-envelope.is-open .ft-envelope__shadow { animation: none; opacity: .35; }

  .ft-envelope__body {
    position: absolute;
    inset: 0;
    border-radius: 8px 8px 12px 12px;
    background: linear-gradient(145deg, #b64049 0%, #92252f 48%, #68171e 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      0 8px 16px rgba(79, 15, 23, .22);
    overflow: hidden;
  }
  .ft-envelope__body::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(115deg, transparent 42%, rgba(109, 40, 217, .18) 50%, transparent 58%),
      linear-gradient(0deg, rgba(76, 29, 149, .12), transparent 40%);
    pointer-events: none;
  }
  .ft-envelope__pocket {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100%;
    z-index: 3;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(145deg, #c24952, #982a34 55%, #6d1820);
    clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
  }

  .ft-letter {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 24px;
    height: 92px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fffef8, #f5f0ff);
    border: 1px solid rgba(109, 40, 217, .2);
    box-shadow: 0 6px 14px rgba(76, 29, 149, .16);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 8px;
    z-index: 2;
    transform: translateY(14px) scale(.92);
    opacity: 0;
    pointer-events: none;
  }
  .ft-envelope.is-open .ft-letter {
    animation: ftLetterOut .95s .72s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .ft-letter__label {
    margin: 0;
    color: #7c3aed;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .ft-letter__prize {
    margin: 2px 0 0;
    color: var(--ft-purple-deep);
    font: 800 .95rem Oxanium, sans-serif;
    line-height: 1.15;
  }
  .ft-envelope.is-open .ft-letter__prize {
    animation: ftLetterPrizeGlow 1.05s 1.05s ease-out both;
  }
  .ft-letter__sub {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: .68rem;
    font-weight: 600;
  }

  .ft-envelope__flap {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 64px;
    transform-origin: 50% 0%;
    z-index: 4;
  }
  .ft-envelope__flap-face {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #bd424b 0%, #92252f 55%, #68171e 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    box-shadow: 0 6px 14px rgba(76, 29, 149, .16);
  }
  .ft-envelope__flap-face::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(65,8,16,.24), transparent 58%);
  }
  .ft-envelope.is-open .ft-envelope__flap {
    animation: ftPaperOpen 1.18s cubic-bezier(.3,.02,.18,1) forwards;
    z-index: 1;
  }

  .ft-seal {
    position: absolute;
    left: 50%;
    top: 40px;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    border-radius: 50%;
    z-index: 5;
    background:
      radial-gradient(circle at 35% 30%, #c4b5fd, var(--ft-purple) 48%, var(--ft-purple-deep) 100%);
    box-shadow:
      0 0 0 2px rgba(240, 195, 90, .55),
      0 6px 12px rgba(76, 29, 149, .35);
    display: grid;
    place-items: center;
    color: #ffe9a8;
    font: 800 .58rem Oxanium, sans-serif;
    letter-spacing: .04em;
    transition: transform .45s ease, opacity .35s ease, filter .35s ease;
  }
  .ft-envelope.is-open .ft-seal {
    transform: translateY(4px) scale(.8);
    opacity: 0;
    filter: blur(2px);
  }

  .ft-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
  }
  .ft-envelope.is-open .ft-burst { animation: ftBurst 1s .8s ease-out forwards; z-index: 6; }
  .ft-envelope.is-open .ft-burst span { animation: ftSpark 1s .8s cubic-bezier(.16, 1, .3, 1) both; }
  .ft-burst span {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 8px;
    height: 8px;
    margin: -4px;
    border-radius: 50%;
    background: var(--p, #f0c35a);
    box-shadow: 0 0 10px var(--p, #f0c35a);
  }

  .ft-reveal {
    display: none;
    margin-top: 8px;
    padding: 16px;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(145deg, #ffffff, #f5f0ff);
    border: 1px solid rgba(109, 40, 217, .22);
    box-shadow: 0 12px 28px rgba(76, 29, 149, .14);
  }
  .ft-reveal.is-visible {
    display: grid;
    gap: 6px;
    animation: ftRevealIn .45s ease, ftPrizeHalo 1.35s ease-out;
  }
  .ft-reveal__kicker {
    margin: 0;
    color: #ea580c;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .ft-reveal__title {
    margin: 0;
    color: var(--ft-purple-deep);
    font: 800 1.35rem Oxanium, sans-serif;
  }
  .ft-reveal.is-visible .ft-reveal__title {
    animation: ftPrizeTitleGlow 1.2s ease-out;
  }
  .ft-reveal__msg {
    margin: 0;
    color: #52525b;
    font-size: .82rem;
    line-height: 1.4;
  }
  .ft-actions { display: grid; gap: 10px; }
  .ft-open-btn {
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(105deg, #7c3aed 0%, #6d28d9 55%, #ea580c 100%);
    color: #fff;
    font: 800 .95rem Oxanium, sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(109, 40, 217, .28);
  }
  .ft-open-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
  }
  .ft-again-btn {
    min-height: 42px;
    border-radius: 12px;
    border: 1.5px solid rgba(109, 40, 217, .35);
    background: #fff;
    color: var(--ft-purple-deep);
    font-weight: 800;
    cursor: pointer;
  }
  .ft-error {
    margin: 0;
    text-align: center;
    color: #b91c1c;
    font-size: .8rem;
    font-weight: 700;
    min-height: 1.2em;
  }
  .ft-wins {
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(109, 40, 217, .18);
    padding: 14px;
    box-shadow: 0 8px 20px rgba(76, 29, 149, .08);
  }
  .ft-wins h2 {
    margin: 0 0 10px;
    color: var(--ft-purple-deep);
    font: 800 .9rem Oxanium, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .ft-wins__row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #efeaf5;
    color: #3f3f46;
    font-size: .84rem;
  }
  .ft-wins__row:first-of-type { border-top: 0; }
  .ft-wins__row strong { color: #ea580c; font-weight: 800; }

  @keyframes ftFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  @keyframes ftShadow {
    0%, 100% { transform: scaleX(1); opacity: .55; }
    50% { transform: scaleX(.82); opacity: .32; }
  }
  @keyframes ftShake {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-7px) rotate(-3deg); }
    40% { transform: translateX(7px) rotate(3deg); }
    60% { transform: translateX(-5px) rotate(-2deg); }
    80% { transform: translateX(5px) rotate(2deg); }
  }
  @keyframes ftLetterOut {
    0% { opacity: 1; transform: translateY(14px) scale(.92); }
    100% { opacity: 1; transform: translateY(-100px) scale(1); }
  }
  @keyframes ftPaperOpen {
    0% { transform: rotateX(0deg) translateX(0); }
    14% { transform: rotateX(7deg) translateX(-2px) skewX(-1deg); }
    27% { transform: rotateX(18deg) translateX(2px) skewX(1deg); }
    43% { transform: rotateX(42deg) translateX(-1px); }
    68% { transform: rotateX(112deg) translateX(1px); }
    100% { transform: rotateX(180deg) translateX(0); }
  }
  @keyframes ftLetterPrizeGlow {
    0% { opacity: .25; filter: blur(2px); text-shadow: none; }
    55% { opacity: 1; filter: blur(0); text-shadow: 0 0 18px rgba(124,58,237,.72), 0 0 32px rgba(234,88,12,.36); }
    100% { opacity: 1; filter: blur(0); text-shadow: 0 0 7px rgba(124,58,237,.25); }
  }
  @keyframes ftAnticipation {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(3px) scale(.97); }
  }
  @keyframes ftSpark {
    from { transform: translate(0, 0) scale(.2); }
    to { transform: translate(var(--dx), var(--dy)) scale(.3); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ft-page *, .ft-page *::before, .ft-page *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .ft-burst { display: none; }
  }
  @keyframes ftBurst {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes ftRevealIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes ftPrizeHalo {
    0% { box-shadow: 0 12px 30px rgba(76,29,149,.12), inset 0 0 0 4px rgba(237,233,254,.5); }
    45% { box-shadow: 0 0 0 7px rgba(167,139,250,.2), 0 0 38px rgba(124,58,237,.42), 0 0 64px rgba(234,88,12,.2), inset 0 0 0 4px rgba(255,255,255,.8); }
    100% { box-shadow: 0 12px 30px rgba(76,29,149,.12), inset 0 0 0 4px rgba(237,233,254,.5); }
  }
  @keyframes ftPrizeTitleGlow {
    0% { opacity: 0; transform: scale(.9); text-shadow: none; }
    50% { opacity: 1; transform: scale(1.07); text-shadow: 0 0 20px rgba(124,58,237,.62), 0 0 38px rgba(234,88,12,.28); }
    100% { opacity: 1; transform: scale(1); text-shadow: 0 0 5px rgba(124,58,237,.18); }
  }
  /* Scoped surfaces keep the reveal legible over the platform theme. */
  #ft-page { gap: 16px; }
  #ft-page .ft-page__meta {
    justify-self: center;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 100px;
    background: rgba(255,255,255,.78);
    font-size: .9rem;
  }
  #ft-page .ft-page__meta strong {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    margin-left: 6px;
    color: #5b21b6;
  }
  #ft-page .ft-stage {
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.8);
    background: radial-gradient(ellipse at 50% 35%, #fffaf0 0%, #f3edff 46%, #dfd3fa 100%);
    box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(76,29,149,.10);
  }
  #ft-page .ft-stage::before {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    top: 34px;
    border-radius: 50%;
    border: 1px solid rgba(167,139,250,.16);
    box-shadow: 0 0 0 24px rgba(255,255,255,.2), 0 0 0 48px rgba(255,255,255,.12);
    pointer-events: none;
  }
  #ft-page .ft-stage__hint { top: 20px; font-size: .82rem; }
  #ft-page .ft-envelope { width: 184px; height: 122px; }
  #ft-page .ft-envelope__body { background: linear-gradient(145deg,#b64049,#92252f 54%,#68171e); }
  #ft-page .ft-envelope__pocket {
    clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
    background: linear-gradient(32deg, transparent 49.5%, rgba(74,10,18,.28) 50%, transparent 50.7%), linear-gradient(-32deg, transparent 49.5%, rgba(255,214,218,.18) 50%, transparent 50.7%), linear-gradient(155deg,#c24952,#982a34 60%,#6d1820);
    box-shadow: inset 0 -1px 0 rgba(64,8,15,.34);
  }
  #ft-page .ft-letter {
    left: 8%; right: 8%; height: 94px;
    border-radius: 12px;
    border: 1px solid #e3d7f4;
    background: linear-gradient(145deg,#fff,#faf6ff);
    box-shadow: 0 8px 24px rgba(76,29,149,.13), inset 0 0 0 4px #fff;
  }
  #ft-page .ft-letter__prize { font-size: 1.06rem; overflow-wrap: anywhere; }
  #ft-page .ft-letter__sub { font-size: .7rem; line-height: 1.2; }
  #ft-page .ft-reveal {
    position: relative;
    margin-top: 0;
    padding: 24px 22px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.95);
    background: linear-gradient(135deg,#ffffff,#faf5ff);
    box-shadow: 0 12px 30px rgba(76,29,149,.12), inset 0 0 0 4px rgba(237,233,254,.5);
    overflow: hidden;
  }
  #ft-page .ft-reveal.is-visible { gap: 10px; }
  .ft-reveal__emblem {
    display: grid; place-items: center; justify-self: center;
    width: 38px; height: 38px;
    border-radius: 50%; color: #855912;
    background: linear-gradient(145deg,#fff3ca,#edc262);
    box-shadow: 0 4px 10px rgba(201,146,46,.18);
    font-size: 1.2rem;
  }
  #ft-page .ft-reveal__kicker { color: #7c3aed; font-size: .7rem; }
  #ft-page .ft-reveal__title { font-size: clamp(1.55rem,6vw,2rem); line-height: 1.15; overflow-wrap: anywhere; }
  #ft-page .ft-reveal__msg { max-width: 300px; margin: 0 auto; font-size: .94rem; font-weight: 500; line-height: 1.45; }
  #ft-page .ft-actions:has([hidden]):not(:has(button:not([hidden]))) { display: none; }
  #ft-page .ft-error:empty { display: none; }
  #ft-page .ft-open-btn { background: linear-gradient(110deg,#8246e5,#6222bd); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 6px 16px rgba(76,29,149,.18); }
  #ft-page .ft-wins { padding: 20px 18px 8px; border-radius: 22px; border-color: rgba(255,255,255,.8); box-shadow: 0 8px 24px rgba(76,29,149,.08); }
  #ft-page .ft-wins h2 { font-size: .8rem; margin-bottom: 14px; }
  #ft-page .ft-wins__row { align-items: center; padding: 14px 0; font-size: .92rem; }
  #ft-page .ft-wins__row strong { flex-shrink: 0; padding: 5px 9px; border-radius: 8px; color: #6d28d9; background: #f3edff; font-size: .84rem; }
  #ft-page .ft-history { width: 100%; }
  #ft-page .ft-history > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1.5px solid rgba(109,40,217,.28);
    border-radius: 13px;
    background: #ffffff;
    color: #5b21b6;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  #ft-page .ft-history > summary::-webkit-details-marker { display: none; }
  #ft-page .ft-history > summary::after {
    content: "+";
    font: 800 1.05rem Oxanium, sans-serif;
    transition: transform .2s ease;
  }
  #ft-page .ft-history[open] > summary::after { transform: rotate(45deg); }
  #ft-page .ft-history__count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: .72rem;
  }
  #ft-page .ft-history .ft-wins { margin-top: 10px; }
  #ft-page .ft-history__empty {
    margin: 0;
    padding: 18px;
    text-align: center;
    color: #6b7280;
    font-size: .86rem;
  }
</style>
{% endblock %}
{% block content %}
<div class="ft-page" id="ft-page" data-envelopes="{{ envelopes }}">
  <section class="ft-page__banner-wrap" aria-label="Fortuna">
    <img class="ft-page__banner" src="{{ url_for('static', filename='images/54654665456.png') }}" alt="Fortuna" width="2508" height="1411" loading="eager" decoding="async">
  </section>
  <p class="ft-page__meta">Sobres disponibles: <strong id="ft-count">{{ envelopes }}</strong></p>

  <audio id="ft-paper-audio" preload="auto" src="{{ url_for('static', filename='audio/743734378.mp3') }}?v=2"></audio>

  <section class="ft-stage" aria-label="Abrir sobre de fortuna">
    <button type="button" class="ft-envelope{% if not envelopes %} is-disabled{% endif %}" id="ft-envelope" aria-label="Abrir sobre rojo">
      <span class="ft-envelope__shadow" aria-hidden="true"></span>
      <span class="ft-envelope__body" aria-hidden="true">
      </span>
      <span class="ft-letter" id="ft-letter" aria-hidden="true">
        <span>
          <p class="ft-letter__label">Premio</p>
          <p class="ft-letter__prize" id="ft-letter-prize">—</p>
          <p class="ft-letter__sub" id="ft-letter-sub"></p>
        </span>
      </span>
      <span class="ft-envelope__pocket" aria-hidden="true"></span>
      <span class="ft-envelope__flap" aria-hidden="true">
        <span class="ft-envelope__flap-face"></span>
      </span>
      <span class="ft-seal" aria-hidden="true">BancaNet</span>
      <span class="ft-burst" aria-hidden="true" id="ft-burst"></span>
    </button>
    <p class="ft-stage__hint">Toca el sobre rojo para abrirlo</p>
  </section>

  <div class="ft-actions">
    <button type="button" class="ft-open-btn" id="ft-open-btn" {% if not envelopes %}disabled{% endif %}>Abrir sobre</button>
    <button type="button" class="ft-again-btn" id="ft-again-btn" hidden>Abrir otro sobre</button>
  </div>
  <p class="ft-error" id="ft-error" role="status"></p>

  <details class="ft-history">
    <summary>Historial de premios <span class="ft-history__count">{{ wins|length }}</span></summary>
    <section class="ft-wins" aria-label="Historial de premios">
      {% if wins %}
        {% for win in wins %}
        <div class="ft-wins__row">
          <span>{{ win.prize_name_snapshot }}</span>
          <strong>{% if win.prize_type_snapshot == 'money' %}MX$ {{ "%.2f"|format(win.value_snapshot) }}{% else %}Código{% endif %}</strong>
        </div>
        {% endfor %}
      {% else %}
        <p class="ft-history__empty">Todavía no tienes premios.</p>
      {% endif %}
    </section>
  </details>

</div>
{% endblock %}
{% block scripts %}
<script>
(() => {
  const page = document.getElementById("ft-page");
  const envelope = document.getElementById("ft-envelope");
  const openBtn = document.getElementById("ft-open-btn");
  const againBtn = document.getElementById("ft-again-btn");
  const countEl = document.getElementById("ft-count");
  const errorEl = document.getElementById("ft-error");
  const letterPrize = document.getElementById("ft-letter-prize");
  const letterSub = document.getElementById("ft-letter-sub");
  const burst = document.getElementById("ft-burst");
  const paperAudio = document.getElementById("ft-paper-audio");
  const paperSrc = paperAudio ? paperAudio.getAttribute("src") : "";
  let paperUnlocked = false;
  const csrf = document.querySelector('meta[name="csrf-token"]')?.content || "";
  let busy = false;
  let envelopes = Number(page?.dataset.envelopes || 0);
  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  const unlockPaper = () => {
    if (paperUnlocked || !paperAudio) return;
    paperUnlocked = true;
    const vol = paperAudio.volume || 1;
    paperAudio.volume = 0.001;
    paperAudio.play().then(() => {
      paperAudio.pause();
      paperAudio.currentTime = 0;
      paperAudio.volume = vol;
    }).catch(() => {
      paperAudio.volume = vol;
    });
  };

  const playPaper = () => {
    unlockPaper();
    try {
      if (paperSrc) {
        const a = new Audio(paperSrc);
        a.volume = 0.85;
        a.play().catch(() => {
          if (paperAudio) {
            paperAudio.currentTime = 0;
            paperAudio.play().catch(() => {});
          }
        });
      } else if (paperAudio) {
        paperAudio.currentTime = 0;
        paperAudio.play().catch(() => {});
      }
    } catch (e) {}
  };

  document.addEventListener("pointerdown", unlockPaper, { once: true, capture: true });
  document.addEventListener("touchstart", unlockPaper, { once: true, capture: true });

  const setCount = (n) => {
    envelopes = Math.max(0, Number(n) || 0);
    if (countEl) countEl.textContent = String(envelopes);
    page.dataset.envelopes = String(envelopes);
    const empty = envelopes <= 0;
    envelope.classList.toggle("is-disabled", empty && !envelope.classList.contains("is-open"));
    openBtn.disabled = empty || busy;
  };

  const makeBurst = () => {
    burst.innerHTML = "";
    const colors = ["#f0c35a", "#a78bfa", "#ea580c", "#7c3aed", "#ffe9a8", "#c4b5fd"];
    for (let i = 0; i < 16; i += 1) {
      const spark = document.createElement("span");
      const angle = (i / 16) * Math.PI * 2;
      const dist = 48 + (i % 4) * 14;
      spark.style.setProperty("--p", colors[i % colors.length]);
      spark.style.setProperty('--dx', `${Math.cos(angle) * dist}px`);
      spark.style.setProperty('--dy', `${Math.sin(angle) * dist}px`);
      burst.appendChild(spark);
    }
  };

  const resetEnvelope = () => {
    envelope.classList.remove("is-shake", "is-busy", "is-open");
    againBtn.hidden = true;
    openBtn.hidden = false;
    openBtn.disabled = envelopes <= 0;
    envelope.classList.toggle("is-disabled", envelopes <= 0);
    errorEl.textContent = "";
    letterPrize.textContent = "—";
    letterSub.textContent = "";
    busy = false;
  };

  const showPrize = (prize) => {
    const isMoney = prize.type === "money";
    const title = isMoney
      ? `MX$ ${Number(prize.value || 0).toFixed(2)}`
      : (prize.name || "Código sorpresa");
    letterPrize.textContent = title;
    letterSub.textContent = isMoney ? "Abonado a tu saldo" : "Solicítalo a tu gerente";
    againBtn.hidden = envelopes <= 0;
    openBtn.hidden = true;
  };

  const openEnvelope = async () => {
    if (busy || envelopes <= 0 || envelope.classList.contains('is-open')) return;
    busy = true;
    errorEl.textContent = "";
    openBtn.disabled = true;
    openBtn.textContent = 'Abriendo…';
    envelope.setAttribute('aria-busy', 'true');
    envelope.classList.add("is-busy", "is-shake");
    envelope.classList.remove("is-open", "is-disabled");
    if (paperAudio || paperSrc) {
      playPaper();
    }

    try {
      const [response] = await Promise.all([
        fetch("{{ url_for('user.fortuna') }}", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "X-Requested-With": "XMLHttpRequest",
          },
          body: new URLSearchParams({ csrf_token: csrf }),
        }),
        wait(reducedMotion ? 0 : 350),
      ]);
      const data = await response.json();
      if (!response.ok || !data.ok) {
        throw new Error(data.message || "No se pudo abrir el sobre.");
      }
      setCount(data.envelopes);
      const prize = data.prize || {};
      letterPrize.textContent = prize.type === 'money' ? `MX$ ${Number(prize.value || 0).toFixed(2)}` : (prize.name || 'Código sorpresa');
      letterSub.textContent = prize.type === 'money' ? 'Abonado a tu saldo' : 'Solicítalo a tu gerente';
      makeBurst();
      envelope.classList.remove("is-shake");
      envelope.classList.add("is-open");
      await wait(reducedMotion ? 0 : 1650);
      showPrize(data.prize || {});
    } catch (err) {
      errorEl.textContent = err.message || "Error al abrir el sobre.";
      envelope.classList.remove("is-shake", "is-busy", "is-open");
      openBtn.disabled = envelopes <= 0;
      openBtn.hidden = false;
    } finally {
      busy = false;
      openBtn.textContent = 'Abrir sobre';
      envelope.setAttribute('aria-busy', 'false');
      envelope.classList.remove("is-busy");
    }
  };

  envelope.addEventListener("click", openEnvelope);
  openBtn.addEventListener("click", openEnvelope);
  againBtn.addEventListener("click", resetEnvelope);
})();
</script>
{% endblock %}