:root{
    --bg:#060a14; --bg2:#0a1120;
    --panel:rgba(16,22,36,.72); --panel-solid:#0e1524;
    --line:#1b2740; --line2:#25324f;
    --blue:#2f6bff; --green:#37ff8b; --green-dim:#1f9d57;
    --lcd:#7dff4e; --lcd-bg:#0e3406; --lcd-glow:#57e23a;
    --text:#e8edf8; --muted:#8592ad; --danger:#ff3b46; --gold:#ffc94d;
    --mono:"Share Tech Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --disp:"Orbitron", system-ui, sans-serif;
    --ui:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    font-family:var(--ui); color:var(--text);
    background:
      radial-gradient(120% 90% at 50% 8%, #0d1830 0%, var(--bg2) 42%, var(--bg) 100%);
    min-height:100%;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{max-width:1000px; margin:0 auto; padding:18px 16px 44px; display:flex; flex-direction:column; gap:16px}

  /* ---- Header ---- */
  header{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
  .brand{display:flex; align-items:center; gap:12px}
  .brand .mark{
    width:38px;height:38px;border-radius:10px;flex:none;
    background:radial-gradient(circle at 50% 35%, #14351a, #071206);
    border:1px solid #1f6b2e; position:relative;
    box-shadow:0 0 18px rgba(55,255,139,.25), inset 0 0 12px rgba(55,255,139,.15);
  }
  .brand .mark::before{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;
    background:radial-gradient(circle,#8bffb0,#37ff8b 55%,#0a3);box-shadow:0 0 10px #37ff8b}
  .brand h1{
    font-family:var(--disp); font-weight:800; font-size:clamp(18px,3.4vw,26px);
    letter-spacing:.14em; margin:0; text-transform:uppercase;
    background:linear-gradient(180deg,#eafff2,#37ff8b);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 22px rgba(55,255,139,.18);
  }
  .brand .sub{font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--muted); text-transform:uppercase}
  .balance{
    display:flex; flex-direction:column; align-items:flex-end; gap:2px;
    padding:8px 16px; border-radius:12px;
    background:var(--panel); border:1px solid var(--line);
    backdrop-filter:blur(8px);
  }
  .balance .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase}
  .balance .val{font-family:var(--disp); font-weight:700; font-size:20px; color:#eafff2}

  /* ---- Layout ---- */
  .grid{display:grid; grid-template-columns:1fr; gap:14px; align-items:start}
  .screen{display:flex; flex-direction:column; gap:14px; animation:screenIn .3s ease}
  .screen[hidden]{display:none !important}
  @keyframes screenIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

  /* tela de aposta: cartão centralizado */
  #screenBet .card{max-width:480px; width:100%; margin:0 auto}
  /* tela do jogo: coluna no mobile, 2 colunas no desktop */
  .game-side{display:flex; flex-direction:column; gap:14px}
  #screenGame{align-items:stretch}
  @media (min-width:820px){
    #screenGame{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr); gap:18px; align-items:start}
    #screenBet .card{max-width:520px}
    .game-side{position:sticky; top:16px}
  }

  .card{
    background:var(--panel); border:1px solid var(--line);
    border-radius:18px; backdrop-filter:blur(10px);
    box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  }

  /* ---- Stats bar ---- */
  .stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; overflow:hidden; border-radius:18px}
  .stat{padding:12px 14px; background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
  .stat .k{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
  .stat .v{font-family:var(--disp); font-weight:700; font-size:clamp(15px,2.4vw,19px); margin-top:3px}
  .stat .v.good{color:var(--green)} .stat .v.warn{color:var(--gold)} .stat .v.bad{color:var(--danger)}
  @media (max-width:520px){ .stat .v{font-size:16px} }

  /* ---- Stage ---- */
  .stage-card{padding:8px; position:relative; overflow:hidden}
  .stage{position:relative; width:100%; aspect-ratio:1/1; max-height:74vh; margin:0 auto}
  .stage svg{width:100%; height:100%; display:block; overflow:visible}
  .stage.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
  @keyframes shake{
    10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(4px,-2px)}
    30%,50%,70%{transform:translate(-7px,3px)} 40%,60%{transform:translate(7px,-3px)}
  }
  .flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:5; border-radius:14px}
  .boom{
    position:absolute; inset:0; display:grid; place-items:center; z-index:6; pointer-events:none; opacity:0;
    text-align:center;
  }
  .boom .big{
    font-family:var(--disp); font-weight:800; font-size:clamp(40px,11vw,96px); letter-spacing:.06em;
    color:#fff; text-shadow:0 0 30px #ff6a2b, 0 0 60px #ff3b46; transform:scale(.4);
  }
  .boom .msg{font-family:var(--mono); letter-spacing:.16em; color:#ffd7b0; margin-top:6px; font-size:clamp(12px,2.6vw,16px)}
  .win-banner{
    position:absolute; inset:0; display:grid; place-items:center; z-index:6; pointer-events:none; opacity:0;
  }
  .win-banner .big{
    font-family:var(--disp); font-weight:800; font-size:clamp(30px,8vw,64px); letter-spacing:.04em;
    color:#eafff2; text-shadow:0 0 34px rgba(55,255,139,.7); transform:scale(.6);
  }

  /* wire interactions */
  .wire{cursor:default}
  .wire.live{cursor:crosshair}
  .wire.live:hover .cable{filter:drop-shadow(0 0 7px var(--wc)) drop-shadow(0 0 2px var(--wc))}
  .wire.live:hover .core{stroke-width:9}
  .cable{transition:filter .12s}
  .core{transition:stroke-width .12s}
  .wire.cut{cursor:default}
  .hit{pointer-events:stroke}              /* área de toque funciona mesmo transparente */
  .stage{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
  .stage svg *{ -webkit-tap-highlight-color:transparent }

  /* ---- Controls ---- */
  .panel{padding:16px; display:flex; flex-direction:column; gap:16px}
  .panel h2{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 -4px}

  .betrow{display:flex; align-items:center; gap:8px}
  .betfield{
    flex:1; display:flex; align-items:center; gap:8px; padding:10px 12px;
    background:#0a1020; border:1px solid var(--line2); border-radius:12px;
  }
  .betfield .cur{font-family:var(--disp); color:var(--muted); font-weight:700}
  .betfield input{
    width:100%; background:none; border:0; outline:none; color:#eafff2;
    font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:.02em;
  }
  .quick{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
  .chip{
    font-family:var(--mono); font-size:12px; letter-spacing:.05em;
    padding:9px 0; border-radius:10px; text-align:center; cursor:pointer; user-select:none;
    background:#0c1424; border:1px solid var(--line2); color:#cdd6ea; transition:.15s;
  }
  .chip:hover{border-color:var(--green-dim); color:#eafff2; box-shadow:0 0 12px rgba(55,255,139,.12)}
  .chip:active{transform:translateY(1px)}

  .wires-sel{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
  .wsel{
    font-family:var(--disp); font-weight:700; font-size:15px; padding:11px 0; text-align:center;
    border-radius:12px; cursor:pointer; user-select:none; transition:.15s;
    background:#0c1424; border:1px solid var(--line2); color:#aeb9d4;
  }
  .wsel small{display:block; font-family:var(--mono); font-weight:400; font-size:9px; letter-spacing:.12em; color:var(--muted); margin-top:2px}
  .wsel:hover{border-color:var(--line2); color:#eafff2}
  .wsel.on{
    border-color:var(--green); color:#eafff2;
    background:linear-gradient(180deg,rgba(55,255,139,.16),rgba(55,255,139,.04));
    box-shadow:0 0 16px rgba(55,255,139,.18), inset 0 0 12px rgba(55,255,139,.08);
  }

  .btn{
    width:100%; border:0; cursor:pointer; border-radius:14px; padding:16px;
    font-family:var(--disp); font-weight:800; letter-spacing:.06em; font-size:17px;
    transition:transform .12s, box-shadow .2s, filter .2s; text-transform:uppercase;
  }
  .btn:active{transform:translateY(1px)}
  .btn.arm{
    color:#04120a;
    background:linear-gradient(180deg,#5bff9d,#22c46a);
    box-shadow:0 8px 26px rgba(34,196,106,.35), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .btn.arm:hover{filter:brightness(1.06); box-shadow:0 10px 34px rgba(34,196,106,.5)}
  .btn.cash{
    color:#04120a; position:relative; overflow:hidden;
    background:linear-gradient(180deg,#7dff4e,#2fd06b);
    box-shadow:0 8px 30px rgba(55,255,139,.45), inset 0 1px 0 rgba(255,255,255,.5);
    animation:pulse 1.4s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{box-shadow:0 8px 30px rgba(55,255,139,.35)}50%{box-shadow:0 8px 42px rgba(55,255,139,.7)}}
  .btn:disabled{opacity:.4; cursor:not-allowed; filter:grayscale(.4); animation:none; box-shadow:none}

  .hint{font-family:var(--mono); font-size:11px; line-height:1.5; letter-spacing:.02em; color:var(--muted)}
  .hint b{color:var(--green-dim)}
  .fair{
    display:inline-flex; align-items:center; gap:6px; margin-top:2px;
    font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-dim);
  }
  .fair::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}

  .toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
    background:var(--panel-solid); border:1px solid var(--line2); color:var(--text);
    font-family:var(--mono); font-size:13px; padding:11px 18px; border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.25s; z-index:20; letter-spacing:.02em;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

  @media (prefers-reduced-motion:reduce){
    .stage.shake{animation:none} .btn.cash{animation:none}
  }

  /* =========================================================
     VISUAL REFRESH — camada de apresentação, sem alteração de lógica
     ========================================================= */
  :root{
    --bg:#050713;
    --bg2:#091326;
    --panel:rgba(11,17,31,.86);
    --panel-solid:#0d1424;
    --line:rgba(126,151,204,.20);
    --line2:rgba(126,151,204,.34);
    --green:#72ffb0;
    --green-dim:#36c77a;
    --blue:#4d83ff;
    --text:#f1f5ff;
    --muted:#8d9ab5;
  }
  html{background:var(--bg)}
  body{
    position:relative;
    isolation:isolate;
    background:
      radial-gradient(70% 52% at 50% 0%, rgba(31,73,140,.30) 0%, rgba(8,16,34,.06) 58%, transparent 100%),
      radial-gradient(42% 38% at 88% 18%, rgba(55,255,139,.08), transparent 70%),
      linear-gradient(180deg,#080e1c 0%,#050713 68%,#04050d 100%);
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.28;
    background-image:
      linear-gradient(rgba(127,157,211,.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(127,157,211,.06) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.75) 44%,transparent 100%);
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.45) 100%);
  }
  .wrap{
    position:relative;
    z-index:1;
    max-width:1120px;
    padding:30px 22px 58px;
    gap:20px;
  }
  header{padding:2px 2px 8px;align-items:center}
  .brand{gap:15px}
  .brand .mark{
    width:48px;height:48px;border-radius:15px;
    background:linear-gradient(145deg,rgba(22,56,57,.92),rgba(4,12,22,.98));
    border:1px solid rgba(100,255,180,.42);
    box-shadow:0 0 0 5px rgba(55,255,139,.035),0 12px 28px rgba(0,0,0,.38),0 0 26px rgba(55,255,139,.20),inset 0 1px 0 rgba(255,255,255,.12);
  }
  .brand .mark::before{width:16px;height:16px;box-shadow:0 0 12px #72ffb0,0 0 28px rgba(55,255,139,.45)}
  .brand .mark::after{content:"";position:absolute;inset:7px;border:1px solid rgba(114,255,176,.18);border-radius:10px}
  .brand h1{font-size:clamp(18px,3.4vw,28px);letter-spacing:.16em;text-shadow:0 0 28px rgba(55,255,139,.22)}
  .brand .sub{margin-top:4px;color:#91a1c0;letter-spacing:.24em}
  .balance{
    min-width:170px;padding:11px 16px 12px;border-radius:16px;
    background:linear-gradient(145deg,rgba(20,31,53,.78),rgba(8,13,27,.74));
    border:1px solid rgba(126,151,204,.25);
    box-shadow:0 14px 32px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07);
  }
  .balance::before{content:"";display:block;width:34px;height:2px;margin-bottom:8px;border-radius:2px;background:linear-gradient(90deg,var(--green),transparent);box-shadow:0 0 10px rgba(55,255,139,.5)}
  .balance .lbl{color:#90a0be}
  .balance .val{font-size:21px;color:#effff5;text-shadow:0 0 16px rgba(55,255,139,.16)}

  .screen{gap:18px}
  .card{
    position:relative;overflow:hidden;border-radius:22px;
    background:linear-gradient(145deg,rgba(17,26,46,.90),rgba(7,12,25,.92));
    border:1px solid rgba(126,151,204,.23);
    box-shadow:0 26px 65px rgba(0,0,0,.38),0 8px 22px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .card::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(172,198,255,.30),transparent);pointer-events:none}
  #screenBet{padding-top:clamp(8px,4vh,34px)}
  #screenBet .card{max-width:760px}
  #screenBet .panel{padding:28px;gap:22px}
  #screenBet .panel > div:first-child,#screenBet .panel > div:nth-child(2){padding:18px;border:1px solid rgba(126,151,204,.16);border-radius:17px;background:linear-gradient(145deg,rgba(17,28,50,.56),rgba(7,13,27,.30))}
  #screenBet .panel > div:last-child{padding:14px 16px;border-radius:15px;background:rgba(6,11,23,.48);border:1px solid rgba(126,151,204,.13)}
  .panel h2{color:#9ba9c4;font-size:10px;letter-spacing:.24em}
  .betfield{min-height:60px;padding:13px 16px;border-radius:15px;background:linear-gradient(180deg,rgba(4,10,22,.88),rgba(10,18,33,.72));border:1px solid rgba(126,151,204,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.16)}
  .betfield:focus-within{border-color:rgba(114,255,176,.72);box-shadow:0 0 0 3px rgba(55,255,139,.10),inset 0 1px 0 rgba(255,255,255,.05)}
  .betfield .cur{color:#9eabc2;font-size:15px}
  .betfield input{font-size:23px;color:#f2fff7}
  .quick{gap:9px}
  .chip{padding:11px 0;border-radius:11px;background:rgba(9,17,33,.88);border:1px solid rgba(126,151,204,.25);color:#c8d3e9;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .16s,background .16s,box-shadow .16s,color .16s}
  .chip:hover{transform:translateY(-2px);border-color:rgba(114,255,176,.60);background:rgba(19,46,50,.78);color:#edfff5;box-shadow:0 10px 22px rgba(0,0,0,.20),0 0 16px rgba(55,255,139,.12)}
  .chip:active{transform:scale(.97)}
  .wires-sel{gap:10px}
  .wsel{padding:14px 0 12px;border-radius:14px;background:rgba(9,17,33,.88);border:1px solid rgba(126,151,204,.25);color:#b5c1d9;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .16s,background .16s,box-shadow .16s,color .16s}
  .wsel:hover{transform:translateY(-2px);border-color:rgba(114,255,176,.50);color:#effff5}
  .wsel.on{border-color:rgba(114,255,176,.82);background:linear-gradient(145deg,rgba(46,114,88,.42),rgba(9,39,37,.65));box-shadow:0 0 0 1px rgba(114,255,176,.12),0 12px 26px rgba(24,160,102,.16),inset 0 1px 0 rgba(255,255,255,.12);transform:translateY(-1px)}
  .wsel small{color:#8294b5;margin-top:4px}
  .btn{min-height:58px;padding:16px 18px;border-radius:16px;letter-spacing:.085em;box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .2s,filter .2s}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:scale(.985)}
  .btn.arm{color:#04140c;background:linear-gradient(135deg,#b7ffd2 0%,#70f3ad 42%,#24bd6c 100%);box-shadow:0 15px 34px rgba(34,196,106,.28),inset 0 1px 0 rgba(255,255,255,.62)}
  .btn.arm:hover{filter:brightness(1.08);box-shadow:0 18px 40px rgba(34,196,106,.42),inset 0 1px 0 rgba(255,255,255,.62)}
  .btn.cash{color:#04140c;background:linear-gradient(135deg, #2bd578 0%, #2bd578 42%, #2bd578 100%);box-shadow:0 15px 36px rgba(55,255,139,.28),inset 0 1px 0 rgba(255,255,255,.62)}
  .btn.cash:hover{filter:brightness(1.07);box-shadow:0 18px 42px rgba(55,255,139,.42),inset 0 1px 0 rgba(255,255,255,.62)}
  .hint{padding:0;color:#94a2bc;line-height:1.62}
  .hint b{color:#72e6a4}
  .fair{margin-top:10px;color:#49c982;letter-spacing:.16em}

  #screenGame{gap:18px}
  .stage-card{padding:15px;background:linear-gradient(145deg,rgba(16,27,48,.92),rgba(6,11,24,.94))}
  .stage-card::after{content:"SYSTEM // ACTIVE";position:absolute;top:16px;left:28px;z-index:2;pointer-events:none;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:rgba(164,183,220,.64)}
  .stage{
    isolation:isolate;border-radius:17px;overflow:hidden;
    background:
      radial-gradient(circle at 50% 46%,rgba(35,214,154,.17),transparent 26%),
      radial-gradient(circle at 12% 18%,rgba(48,115,255,.18),transparent 24%),
      radial-gradient(circle at 88% 76%,rgba(45,91,255,.15),transparent 28%),
      linear-gradient(145deg,rgba(6,22,42,.72),rgba(2,7,18,.90));
    box-shadow:
      inset 0 0 0 1px rgba(126,151,204,.20),
      inset 0 0 38px rgba(36,112,255,.10),
      inset 0 0 110px rgba(0,0,0,.42),
      0 0 26px rgba(36,104,255,.07);
  }
  .stage::before{content:"SECURE // VISUAL CORE";position:absolute;right:22px;top:17px;z-index:2;pointer-events:none;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:rgba(114,255,176,.56)}
  .stage::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.26;mix-blend-mode:screen;
    background-image:
      linear-gradient(rgba(74,137,255,.13) 1px,transparent 1px),
      linear-gradient(90deg,rgba(74,137,255,.13) 1px,transparent 1px),
      linear-gradient(135deg,transparent 0 48%,rgba(55,255,139,.10) 49%,transparent 50% 100%);
    background-size:28px 28px,28px 28px,180px 180px;
    mask-image:radial-gradient(ellipse at 50% 48%,black 0%,rgba(0,0,0,.78) 48%,transparent 88%);
  }
  .stage svg{position:relative;z-index:1}
  .stats{gap:10px;overflow:visible;border-radius:0;background:none}
  .stat{position:relative;min-height:82px;padding:16px 17px;border:1px solid rgba(126,151,204,.20);border-radius:17px;background:linear-gradient(145deg,rgba(18,28,49,.86),rgba(8,14,28,.80));box-shadow:0 12px 26px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.045)}
  .stat::before{content:"";position:absolute;left:17px;top:0;width:24px;height:1px;background:rgba(114,255,176,.62);box-shadow:0 0 9px rgba(114,255,176,.35)}
  .stat .k{font-size:9px;letter-spacing:.20em;color:#8493b0}
  .stat .v{font-size:clamp(16px,2.4vw,20px);margin-top:7px;color:#eff3ff}
  .stat .v.good{color:#75f6ad;text-shadow:0 0 16px rgba(55,255,139,.14)}
  .stat .v.warn{color:#ffd56b;text-shadow:0 0 16px rgba(255,201,77,.13)}
  .game-side{gap:16px}
  .toast{bottom:28px;padding:13px 20px;border-radius:14px;background:rgba(10,17,31,.92);border:1px solid rgba(114,255,176,.30);box-shadow:0 18px 44px rgba(0,0,0,.48),0 0 22px rgba(55,255,139,.10);backdrop-filter:blur(18px)}
  button:focus-visible,.chip:focus-visible,.wsel:focus-visible,input:focus-visible{outline:2px solid rgba(114,255,176,.9);outline-offset:3px}

  @media (min-width:700px){
    #screenBet .panel{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
    #screenBet .panel > .btn,#screenBet .panel > div:last-child{grid-column:1 / -1}
  }
  @media (min-width:820px){
    #screenGame{grid-template-columns:minmax(0,1.28fr) minmax(330px,.82fr);gap:20px}
    #screenBet .card{max-width:760px}
  }
  @media (max-width:699px){
    #screenBet .panel{padding:18px}
    #screenBet .panel > div:first-child,#screenBet .panel > div:nth-child(2){padding:15px}
  }
  @media (max-width:520px){
    .wrap{padding:20px 14px 42px;gap:16px}
    header{align-items:flex-start}
    .brand{gap:11px}
    .brand .mark{width:42px;height:42px;border-radius:13px}
    .brand h1{font-size:17px;letter-spacing:.13em}
    .brand .sub{font-size:9px;letter-spacing:.14em}
    .balance{min-width:0;padding:9px 12px;border-radius:13px}
    .balance::before{margin-bottom:5px}
    .balance .lbl{font-size:8px}
    .balance .val{font-size:16px}
    .card{border-radius:18px}
    .stage-card{padding:9px}
    .stage{border-radius:14px}
    .stage-card::after{top:13px;left:18px;font-size:8px}
    .stage::before{right:14px;top:14px;font-size:8px}
    .stat{min-height:74px;padding:13px;border-radius:14px}
    .stat::before{left:13px}
    .stat .k{font-size:8px;letter-spacing:.14em}
    .stat .v{font-size:15px;margin-top:5px}
    .btn{min-height:54px;font-size:15px}
  }
  @media (prefers-reduced-motion:reduce){.chip,.wsel,.btn{transition:none}}

/* Fast 777 integration: the selection screen was moved to the user panel. */
#screenBet{display:none!important}
#screenGame{display:grid!important}
#screenGame[hidden]{display:none!important}
#screenGame .stage-card{min-height:320px}
#screenGame .game-side{min-width:0}
@media (max-width:819px){#screenGame{display:flex!important}.game-side{position:static}.stage{max-height:none}}

/* Result overlay used by demo and real modes */
.modal-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:18px;background:rgba(2,5,13,.72);backdrop-filter:blur(8px)}
.modal-overlay[hidden]{display:none!important}
.modal{width:min(100%,460px);border:1px solid rgba(126,151,204,.28);border-radius:22px;background:linear-gradient(145deg,rgba(17,26,46,.96),rgba(6,11,24,.98));box-shadow:0 26px 80px rgba(0,0,0,.60),0 0 36px rgba(55,255,139,.10)}
.result-card{align-items:center;text-align:center;gap:16px;padding:30px 24px}
.result-card h2{font-family:var(--disp);font-size:clamp(22px,5vw,32px);letter-spacing:.05em;text-transform:uppercase;margin:0}
.result-card .hint{max-width:34ch}
.result-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font:800 34px/1 var(--disp);color:#06120b;background:linear-gradient(145deg,#c8ff83,#2bd578);box-shadow:0 0 30px rgba(55,255,139,.38)}
.result-amount{font-family:var(--disp);font-weight:800;font-size:clamp(20px,5vw,30px);letter-spacing:.03em}
.result-amount.good{color:var(--green);text-shadow:0 0 18px rgba(55,255,139,.26)}
.result-amount.bad{color:#ff7b67;text-shadow:0 0 18px rgba(255,59,70,.24)}
.result-back{width:100%;border:1px solid var(--line2);color:var(--text);background:rgba(11,18,34,.75);border-radius:14px;padding:15px;font-family:var(--disp);font-weight:800;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.result-back:hover{border-color:rgba(114,255,176,.60)}

/* Meta de saque — componente visual da identidade Fast 777 */
.goal-card{
  padding:18px 18px 15px;
  background:linear-gradient(145deg,rgba(16,33,51,.94),rgba(7,15,29,.94));
  border-color:rgba(114,255,176,.25);
  box-shadow:0 18px 36px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06),0 0 24px rgba(55,255,139,.06);
}
.goal-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px}
.goal-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--green-dim);text-transform:uppercase}
.goal-title{font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:.04em;color:#eef5ff;margin-top:4px}
.goal-percent{font-family:var(--disp);font-size:22px;font-weight:900;color:var(--green);text-shadow:0 0 18px rgba(55,255,139,.28)}
.goal-values{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}
.goal-values>div{min-width:0;padding:9px 10px;border:1px solid rgba(126,151,204,.16);border-radius:11px;background:rgba(4,10,22,.42)}
.goal-label{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#8493b0;white-space:nowrap}
.goal-values strong{display:block;margin-top:4px;font-family:var(--disp);font-size:clamp(13px,2vw,17px);color:#dce6fb;white-space:nowrap}
.goal-target strong{color:#ffd56b}.goal-current strong{color:#75f6ad}
.goal-track{height:12px;padding:2px;border:1px solid rgba(126,151,204,.28);border-radius:999px;background:#050b18;box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.025);overflow:hidden}
.goal-track span{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#32c77c 0%,#72ffb0 55%,#d7ff8b 100%);box-shadow:0 0 12px rgba(114,255,176,.72),0 0 24px rgba(55,255,139,.26);transition:width .42s cubic-bezier(.23,1,.32,1);position:relative}
.goal-track span::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.40) 45%,transparent 62%);transform:translateX(-100%);animation:goalShine 2.6s linear infinite}
@keyframes goalShine{to{transform:translateX(160%)}}
.goal-status{margin-top:10px;font-family:var(--mono);font-size:10px;line-height:1.45;letter-spacing:.04em;color:#95a3bd;text-align:center}
.goal-status.is-ready{color:var(--green);text-shadow:0 0 12px rgba(55,255,139,.25)}
.cash-locked{padding:12px 14px;border:1px solid rgba(255,213,107,.20);border-radius:13px;background:linear-gradient(145deg,rgba(74,58,18,.28),rgba(23,24,24,.24));font-family:var(--mono);font-size:10px;line-height:1.45;letter-spacing:.04em;text-align:center;color:#d6bf82}
.cash-locked[hidden]{display:none}
@media (max-width:520px){
  .goal-card{padding:15px 13px 13px}
  .goal-title{font-size:14px}.goal-percent{font-size:20px}
  .goal-values{gap:5px}.goal-values>div{padding:8px 7px}.goal-label{font-size:7px}.goal-values strong{font-size:13px}
  .cash-locked{font-size:9px;padding:11px 10px}
}
@media (prefers-reduced-motion:reduce){.goal-track span{transition:none}.goal-track span::after{animation:none}}

/* Layout vertical obrigatório — desktop e mobile */
#screenGame{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  width:min(100%,760px);
  margin:0 auto;
  gap:18px;
}
#screenGame .stage-card{order:1;width:100%;max-width:760px;margin:0 auto}
#screenGame .game-side{order:2;width:100%;display:flex;flex-direction:column;gap:14px;position:static}
#screenGame .stage{width:100%;max-width:720px;max-height:none;margin:0 auto;aspect-ratio:1/1}
#screenGame .goal-card{order:1;width:100%}
#screenGame .cash-locked{order:2;width:100%}
#screenGame #cashBtn{order:3;width:100%}
#screenGame .stats{display:none!important}
@media (min-width:820px){
  #screenGame{width:min(100%,760px);gap:20px}
  #screenGame .stage-card{padding:18px}
  #screenGame .game-side{max-width:720px;margin:0 auto}
}
@media (max-width:819px){
  #screenGame{width:100%;gap:15px}
  #screenGame .stage-card{padding:9px}
}

/* Quadro superior unificado — saldo, meta e progresso */
.top-header{display:block;width:min(100%,760px);margin:0 auto;padding:0}
.top-goal-card{width:100%;max-width:none;margin:0;padding:18px 20px 16px}
.top-goal-card .goal-topline{align-items:center;margin-bottom:14px}
.top-goal-card .goal-eyebrow{color:#72ffb0}
.top-goal-card .goal-title{font-size:clamp(15px,2.4vw,19px)}
.top-balance{min-width:132px;padding:8px 11px;border:1px solid rgba(114,255,176,.22);border-radius:11px;background:rgba(4,12,24,.52);text-align:right;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.top-balance .goal-label{font-size:8px;color:#8f9db8}
.top-balance strong{display:block;margin-top:3px;font-family:var(--disp);font-size:clamp(14px,2.2vw,18px);color:#eafff2;text-shadow:0 0 14px rgba(55,255,139,.20);white-space:nowrap}
.top-goal-card .goal-percent{min-width:50px;text-align:right}
.top-goal-card .goal-values{margin-bottom:12px}
@media (max-width:520px){
  .top-goal-card{padding:14px 12px 13px}
  .top-goal-card .goal-topline{gap:8px;align-items:flex-start}
  .top-goal-card .goal-title{font-size:14px}
  .top-balance{min-width:112px;padding:7px 8px}
  .top-balance .goal-label{font-size:7px}
  .top-balance strong{font-size:13px}
  .top-goal-card .goal-percent{min-width:37px;font-size:18px}
}

/* Container minimalista da barra: somente valores e progresso */
.top-goal-card .goal-topline--minimal{justify-content:space-between;align-items:center;margin-bottom:12px}
.top-goal-card .goal-topline--minimal .top-balance{min-width:0;padding:0;border:0;background:transparent;box-shadow:none;text-align:left}
.top-goal-card .goal-topline--minimal .top-balance strong{font-size:clamp(19px,3vw,26px);letter-spacing:.02em}
.top-goal-card .goal-topline--minimal .goal-percent{display:none}
.top-goal-card .goal-values--minimal{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.top-goal-card .goal-values--minimal>div{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;background:rgba(4,10,22,.52);border-color:rgba(126,151,204,.20)}
.top-goal-card .goal-values--minimal strong{margin:0;font-size:clamp(16px,2.8vw,24px);letter-spacing:.02em}
.top-goal-card .goal-values--minimal>div:first-child strong{color:#ffe7a1}
.top-goal-card .goal-values--minimal .goal-target strong{color:#ffd56b}
.top-goal-card .goal-values--minimal .goal-current strong{color:#72ffb0}
.top-goal-card .goal-status[hidden]{display:none!important}
@media (max-width:520px){
  .top-goal-card .goal-topline--minimal{margin-bottom:9px}
  .top-goal-card .goal-topline--minimal .top-balance strong{font-size:20px}
  .top-goal-card .goal-values--minimal{gap:5px}
  .top-goal-card .goal-values--minimal>div{min-height:38px;padding:6px 5px}
  .top-goal-card .goal-values--minimal strong{font-size:14px}
}

/* Background temático da bomba — compartilhado pela demo e pelo modo real */
body{
  background:#020617;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-28px;
  z-index:-2;
  pointer-events:none;
  opacity:.60;
  filter:blur(20px) saturate(1.10);
  transform:scale(1.04);
  background:
    linear-gradient(180deg,rgba(2,9,31,.22),rgba(1,3,13,.66)),
    url("../../assets/bomb-background-desktop.webp") center/cover no-repeat;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,9,31,.08) 0%,rgba(2,5,20,.16) 54%,rgba(1,3,13,.38) 100%),
    url("../../assets/bomb-background-desktop.webp") center/cover no-repeat;
  box-shadow:inset 0 0 120px rgba(0,0,0,.20);
}
.card{
  background:linear-gradient(145deg,rgba(17,26,46,.78),rgba(7,12,25,.87));
  backdrop-filter:blur(7px);
}
.stage-card{background:linear-gradient(145deg,rgba(16,27,48,.78),rgba(6,11,24,.88))}
.goal-card{background:linear-gradient(145deg,rgba(16,33,51,.84),rgba(7,15,29,.90))}
@media (max-width:820px){
  body::before{background-image:linear-gradient(180deg,rgba(2,9,31,.22),rgba(1,3,13,.66)),url("../../assets/bomb-background-tablet.webp");}
  body::after{background-image:linear-gradient(180deg,rgba(2,9,31,.08) 0%,rgba(2,5,20,.16) 54%,rgba(1,3,13,.38) 100%),url("../../assets/bomb-background-tablet.webp");}
}
@media (max-width:520px){
  body::before{inset:-16px;filter:blur(14px) saturate(1.08);opacity:.52;background-image:linear-gradient(180deg,rgba(2,9,31,.22),rgba(1,3,13,.66)),url("../../assets/bomb-background-mobile.webp");}
  body::after{background-image:linear-gradient(180deg,rgba(2,9,31,.08) 0%,rgba(2,5,20,.16) 54%,rgba(1,3,13,.38) 100%),url("../../assets/bomb-background-mobile.webp");}
}


/* =========================================================
   MEGA WIN — celebration overlay
   Composição procedural: sem imagens externas, leve e responsiva.
   ========================================================= */
.mega-win-overlay{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  overflow:hidden; isolation:isolate; background:#11051f;
  color:#fff; font-family:var(--ui); opacity:1;
}
.mega-win-overlay[hidden]{display:none!important}
.mega-win-backdrop,.mega-win-vignette,.mega-win-rays,.mega-win-canvas,.mega-win-ring,.mega-win-copy,.mega-win-continue{position:absolute}
.mega-win-backdrop{
  inset:-12%; z-index:-6;
  background:
    radial-gradient(ellipse at 50% 47%,rgba(255,226,112,.40) 0%,rgba(255,152,36,.18) 16%,transparent 38%),
    radial-gradient(ellipse at 50% 92%,rgba(246,179,38,.34),transparent 46%),
    radial-gradient(ellipse at 50% 4%,rgba(120,45,208,.72),transparent 48%),
    linear-gradient(155deg,#16082b 0%,#351061 36%,#170729 100%);
  animation:megaWinBackdrop 5.8s cubic-bezier(.16,.8,.2,1) both;
}
.mega-win-backdrop::before{
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9) 0 1px,transparent 1.4px);
  background-size:17px 17px;mask-image:radial-gradient(ellipse at 50% 48%,black,transparent 66%);
}
.mega-win-vignette{
  inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 28%,rgba(5,1,17,.16) 58%,rgba(4,1,12,.87) 100%);
  animation:megaWinVignette 5.8s ease both;
}
.mega-win-rays{
  z-index:-4;width:150vmax;height:150vmax;left:50%;top:48%;transform:translate(-50%,-50%);
  opacity:.60;mix-blend-mode:screen;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,247,178,.00) 0deg 7deg,rgba(255,242,151,.23) 7.5deg 10deg,rgba(255,247,178,.00) 10.5deg 18deg);
  -webkit-mask-image:radial-gradient(circle,black 0 28%,transparent 69%);
  mask-image:radial-gradient(circle,black 0 28%,transparent 69%);
  animation:megaWinRays 13s linear infinite;
}
.mega-win-ring{left:50%;top:47%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen}
.mega-win-ring--outer{width:min(78vw,780px);height:min(78vw,780px);border:1px solid rgba(255,215,87,.32);box-shadow:0 0 24px rgba(255,184,40,.24),inset 0 0 24px rgba(255,184,40,.10);animation:megaWinRingOuter 4.8s ease-out both}
.mega-win-ring--inner{width:min(42vw,430px);height:min(42vw,430px);border:3px solid rgba(255,242,161,.50);box-shadow:0 0 36px rgba(255,202,56,.45),inset 0 0 28px rgba(255,202,56,.16);animation:megaWinRingInner 4.3s cubic-bezier(.2,.9,.2,1) both}
.mega-win-canvas{inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.mega-win-copy{z-index:4;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(90vw,760px);padding:10vh 20px 15vh;text-align:center;transform-origin:center;animation:megaWinCopyIn .85s cubic-bezier(.16,1.15,.3,1) .08s both}
.mega-win-kicker{font:700 clamp(11px,1.6vw,16px)/1 var(--mono);letter-spacing:.46em;text-transform:uppercase;color:#ffe89a;text-shadow:0 0 16px rgba(255,213,77,.88);margin:0 0 5px 0;animation:megaWinKicker .8s ease .22s both}
.mega-win-title{display:flex;flex-direction:column;align-items:center;line-height:.82;font-family:var(--disp);font-size:clamp(58px,13.6vw,156px);font-weight:950;letter-spacing:.045em;transform:skew(-5deg);filter:drop-shadow(0 8px 0 rgba(58,4,113,.75));animation:megaWinTitle 1.1s cubic-bezier(.12,1.25,.24,1) .28s both}
.mega-win-title span:first-child{position:relative;z-index:1;color:#fff9ff;background:linear-gradient(180deg,#ffffff 0%,#e9c9ff 24%,#a83cff 53%,#6813c4 81%,#3b057e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 2px #fff,0 0 14px #e87dff,0 10px 0 #6317a8}
.mega-win-title span:last-child{position:relative;z-index:2;margin-top:-.02em;color:#fff;background:linear-gradient(180deg,#ffffff 0%,#e2d4ff 24%,#9138f0 55%,#4f099d 84%,#2d035e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 2px #fff,0 0 22px #9b45ff,0 10px 0 #4b0b94}
.mega-win-title::after{content:"";position:absolute;width:72%;height:12%;bottom:24%;border-radius:50%;background:rgba(255,222,96,.90);filter:blur(26px);z-index:-1;animation:megaWinTitleGlow 1.7s ease-in-out .8s infinite alternate}
.mega-win-payout-shell{position:relative;margin-top:clamp(22px,4vw,42px);width:min(84vw,600px);padding:15px 24px 13px;border:3px solid #ffcf52;border-radius:28px;background:linear-gradient(180deg,rgba(67,16,128,.96),rgba(28,6,77,.98));box-shadow:0 0 0 2px rgba(255,246,172,.34),0 0 18px rgba(255,200,48,.85),0 12px 42px rgba(13,1,33,.80),inset 0 2px 0 rgba(255,255,255,.56),inset 0 -10px 20px rgba(0,0,0,.26);animation:megaWinPayoutIn .85s cubic-bezier(.16,1.1,.3,1) .65s both}
.mega-win-payout-shell::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.26);border-radius:20px;pointer-events:none}
.mega-win-payout-shell::after{content:"";position:absolute;left:13%;right:13%;top:0;height:3px;border-radius:50%;background:#fff7bf;filter:blur(2px);box-shadow:0 0 14px #fff1a1}
.mega-win-payout-label{font:800 clamp(9px,1.4vw,13px)/1 var(--mono);letter-spacing:.30em;color:#ffe58b;margin-bottom:5px;text-shadow:0 0 12px rgba(255,214,86,.84)}
.mega-win-payout{position:relative;font-family:var(--disp);font-size:clamp(30px,7.2vw,78px);font-weight:950;letter-spacing:.01em;line-height:1.05;white-space:nowrap;color:#fff8d2;text-shadow:0 2px 0 #b66d08,0 4px 0 #7a3e00,0 0 14px #fff4a1,0 0 34px rgba(255,179,24,.78);animation:megaWinNumber 1.2s cubic-bezier(.15,1.25,.2,1) .85s both}
.mega-win-multiplier{margin-top:5px;font:900 clamp(13px,2vw,22px)/1 var(--disp);letter-spacing:.18em;color:#fff;text-shadow:0 0 15px #d98cff;animation:megaWinMultiplier .8s ease 1.2s both}
.mega-win-subtitle{margin-top:16px;font:700 clamp(11px,1.55vw,15px)/1.3 var(--mono);letter-spacing:.12em;color:#ffeab0;text-shadow:0 0 12px rgba(255,210,100,.8);animation:megaWinSubtitle .8s ease 1.35s both}
.mega-win-continue{z-index:7;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);min-width:160px;border:1px solid rgba(255,230,135,.72);border-radius:999px;padding:12px 26px;background:linear-gradient(180deg,rgba(255,232,142,.96),rgba(212,126,21,.96));color:#2d1150;font:900 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.38),0 0 20px rgba(255,196,48,.56),inset 0 1px 0 #fff8c2;animation:megaWinButton .7s ease 1.8s both}
.mega-win-continue:hover{filter:brightness(1.12);box-shadow:0 8px 30px rgba(0,0,0,.42),0 0 28px rgba(255,218,96,.78),inset 0 1px 0 #fff8c2}
.mega-win-continue:active{transform:translateX(-50%) translateY(1px)}
.mega-win-overlay.is-closing{pointer-events:none;animation:megaWinOverlayOut .55s ease both}
.mega-win-overlay.is-closing .mega-win-copy{animation:megaWinCopyOut .45s ease both}
.mega-win-overlay.is-closing .mega-win-canvas,.mega-win-overlay.is-closing .mega-win-rays{opacity:0;transition:opacity .42s ease}
@keyframes megaWinBackdrop{0%{opacity:0;transform:scale(1.12)}12%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes megaWinVignette{0%{opacity:0}16%{opacity:.7}100%{opacity:1}}
@keyframes megaWinRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes megaWinRingOuter{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-18deg)}18%{opacity:.92}100%{opacity:.20;transform:translate(-50%,-50%) scale(1.25) rotate(24deg)}}
@keyframes megaWinRingInner{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}30%{opacity:.92}100%{opacity:.34;transform:translate(-50%,-50%) scale(1.16)}}
@keyframes megaWinCopyIn{0%{opacity:0;transform:scale(.62) translateY(28px)}68%{opacity:1;transform:scale(1.05) translateY(-3px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes megaWinKicker{0%{opacity:0;letter-spacing:.9em;transform:translateY(15px)}100%{opacity:1;letter-spacing:.46em;transform:none}}
@keyframes megaWinTitle{0%{opacity:0;transform:skew(-5deg) scale(.35) translateY(25px);filter:brightness(3) drop-shadow(0 0 40px #fff)}68%{opacity:1;transform:skew(-5deg) scale(1.08) translateY(-2px);filter:brightness(1.18) drop-shadow(0 8px 0 rgba(58,4,113,.75))}100%{opacity:1;transform:skew(-5deg) scale(1);filter:brightness(1) drop-shadow(0 8px 0 rgba(58,4,113,.75))}}
@keyframes megaWinTitleGlow{from{opacity:.45;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
@keyframes megaWinPayoutIn{0%{opacity:0;transform:perspective(500px) rotateX(68deg) translateY(26px) scale(.76)}75%{opacity:1;transform:perspective(500px) rotateX(-8deg) translateY(-3px) scale(1.04)}100%{opacity:1;transform:perspective(500px) rotateX(0) translateY(0) scale(1)}}
@keyframes megaWinNumber{0%{opacity:0;filter:blur(12px);transform:scale(.56)}55%{opacity:1;filter:blur(0);transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes megaWinMultiplier{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes megaWinSubtitle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes megaWinButton{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes megaWinOverlayOut{to{opacity:0;visibility:hidden}}
@keyframes megaWinCopyOut{to{opacity:0;transform:scale(.92) translateY(-12px)}}
@media (max-width:520px){
  .mega-win-title{font-size:clamp(52px,18vw,94px)}
  .mega-win-copy{padding-bottom:20vh}
  .mega-win-payout-shell{padding:13px 13px 11px;border-radius:22px}
  .mega-win-payout{font-size:clamp(27px,9.4vw,55px)}
  .mega-win-payout-label{letter-spacing:.19em}
  .mega-win-subtitle{max-width:30ch}
}
@media (prefers-reduced-motion:reduce){
  .mega-win-backdrop,.mega-win-vignette,.mega-win-rays,.mega-win-ring,.mega-win-copy,.mega-win-kicker,.mega-win-title,.mega-win-payout-shell,.mega-win-payout,.mega-win-multiplier,.mega-win-subtitle,.mega-win-continue{animation:none!important;transition:none!important}
  .mega-win-overlay{opacity:1}
  .mega-win-rays{opacity:.30}
}

body.mega-win-active{overflow:hidden}
body.mega-win-active .wrap{filter:blur(3px) saturate(.62);transform:scale(.985);transition:filter .45s ease,transform .65s cubic-bezier(.2,.8,.2,1);pointer-events:none}

/* Demo result modal — composição inspirada na referência de modo grátis */
.demo-result-overlay{
  background:rgba(1,4,12,.82);
  backdrop-filter:blur(10px) saturate(1.15);
  padding:16px;
}
.demo-result-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(75,255,211,.18),transparent 28%),
    radial-gradient(circle at 50% 88%,rgba(255,175,37,.13),transparent 32%);
}
.demo-result-card{
  position:relative;
  width:min(100%,520px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:36px 34px 28px;
  text-align:center;
  border:1px solid rgba(130,161,218,.42);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% -20%,rgba(44,255,202,.12),transparent 42%),
    linear-gradient(155deg,rgba(17,29,52,.98),rgba(7,14,29,.99));
  box-shadow:0 30px 100px rgba(0,0,0,.7),0 0 60px rgba(27,226,176,.11),inset 0 1px 0 rgba(255,255,255,.07);
  animation:demoResultIn .42s cubic-bezier(.2,.9,.2,1) both;
}
.demo-result-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.06) 48%,transparent 70%);
  transform:translateX(-100%);
  animation:demoResultSweep 1.8s .18s ease-out both;
}
.demo-result-badge{
  position:relative;
  padding:8px 22px;
  border:1px solid rgba(119,234,221,.52);
  border-radius:999px;
  color:#8cf6e3;
  font:800 12px/1 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  box-shadow:0 0 22px rgba(54,230,196,.12),inset 0 0 14px rgba(54,230,196,.08);
}
.demo-result-title{
  position:relative;
  margin:4px 0 0;
  color:#ffffff;
  font-family:var(--disp);
  font-size:clamp(25px,5vw,40px);
  font-weight:900;
  letter-spacing:.025em;
  line-height:1.05;
  text-transform:uppercase;
  text-shadow:0 3px 0 rgba(126,151,204,.20), 0 0 20px rgba(255, 224, 111, .42);
}
.demo-result-amount{
  position:relative;
  color:#2bd578;
  font-family:var(--disp);
  font-size:clamp(42px,9vw,76px);
  font-weight:950;
  letter-spacing:-.035em;
  line-height:1;
  text-shadow:0 4px 0 rgba(2, 5, 20, .16), 0 0 22px #2bd578, 0 0 48px rgba(255, 153, 35, .3);
  animation:demoAmountPop .56s .12s cubic-bezier(.2,1.45,.25,1) both;
}
.demo-result-amount.bad{color:#ff8b76;text-shadow:0 3px 0 #6e231d,0 0 22px rgba(255,78,68,.35)}
.demo-result-copy{
  position:relative;
  max-width:36ch;
  margin:5px auto 7px;
  color:#aebbd5;
  font-size:clamp(16px,2.7vw,21px);
  line-height:1.48;
}
.demo-result-primary{
  position:relative;
  width:100%;
  border:0;
  border-radius:17px;
  padding:17px 20px;
  color:#ffffff;
  background:linear-gradient(135deg, #2bd578 0%, #2bd578 42%, #2bd578 100%);
  box-shadow:0 8px 0 #ffffff,0 16px 28px rgba(255,169,29,.28),inset 0 1px 0 rgba(255,255,255,.65);
  font:900 clamp(15px,2.7vw,21px)/1.1 var(--ui);
  cursor:pointer;
  transition:transform .15s,filter .15s;
}
.demo-result-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.demo-result-primary:active{transform:translateY(3px);box-shadow:0 4px 0 #ffffff,0 10px 18px rgba(255,169,29,.23)}
.demo-result-replay{
  position:relative;
  border:0;
  padding:5px 10px;
  color:#8c9bb9;
  background:transparent;
  font:500 15px/1.2 var(--ui);
  text-decoration:underline;
  cursor:pointer;
}
.demo-result-replay:hover{color:#e7edff}
@keyframes demoResultIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes demoResultSweep{to{transform:translateX(100%)}}
@keyframes demoAmountPop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .demo-result-card{padding:28px 20px 23px;border-radius:22px}
  .demo-result-title{font-size:28px}
  .demo-result-copy{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .demo-result-card,.demo-result-card::before,.demo-result-amount{animation:none}
  .demo-result-primary{transition:none}
}