:root {
      --bg0:#020007; --bg1:#09001a; --panel:rgba(13,4,34,.84);
      --white:#fff; --muted:rgba(255,255,255,.68);
      --purple:#9d5eff; --pink:#ff36d3; --cyan:#36eaff; --gold:#ffd35d;
      --green:#62ff9b; --red:#ff315a; --orange:#ff972c; --ring:rgba(255,255,255,.17);
      --rows:5; --cols:6; --cell:clamp(47px,7.4vw,82px); --gap:clamp(6px,1vw,10px);
      --step:calc(var(--cell) + var(--gap)); --easeBack:cubic-bezier(.18,.89,.32,1.28);
    }

    *{box-sizing:border-box}
    button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
    button:disabled{cursor:not-allowed;opacity:.55}

    .demo{min-height:100vh;display:grid;place-items:center;padding:28px;position:relative;isolation:isolate}
    .demo::before{
      content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;
      background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
      background-size:48px 48px;mask-image:radial-gradient(circle at center,#000,transparent 72%);
    }
    .demo-card{
      width:min(1040px,100%);padding:clamp(28px,5vw,58px);text-align:center;border-radius:36px;
      position:relative;overflow:hidden;border:1px solid var(--ring);
      background:radial-gradient(circle at 50% -10%,rgba(255,211,93,.18),transparent 30%),linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.03)),rgba(10,2,30,.78);
      box-shadow:0 0 60px rgba(157,94,255,.28),0 24px 80px rgba(0,0,0,.46);
      backdrop-filter:blur(12px);
    }
    .demo-logo{
      width:98px;height:98px;margin:0 auto 20px;border-radius:30px;display:grid;place-items:center;
      font-size:56px;font-style:italic;font-weight:1000;letter-spacing:-.1em;color:var(--gold);
      background:radial-gradient(circle at 30% 20%,#fff9c8,transparent 13%),radial-gradient(circle at 45% 42%,rgba(255,54,211,.9),transparent 31%),linear-gradient(135deg,var(--cyan),var(--purple),var(--pink));
      box-shadow:0 0 34px rgba(255,54,211,.44),inset 0 0 18px rgba(255,255,255,.2);
      text-shadow:0 0 20px rgba(255,211,93,.78);animation:logoFloat 2.45s ease-in-out infinite;position:relative;z-index:1;
    }
    @keyframes logoFloat{50%{transform:translateY(-8px) rotate(-3deg);filter:brightness(1.1)}}
    .demo h1{margin:0;position:relative;z-index:1;font-size:clamp(40px,7vw,86px);line-height:.88;letter-spacing:-.08em;text-transform:uppercase;text-shadow:0 0 30px rgba(255,54,211,.38)}
    .demo p{max-width:840px;margin:22px auto 32px;position:relative;z-index:1;color:var(--muted);font-size:clamp(16px,2.2vw,21px);line-height:1.55}
    .demo-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
    .demo-btn{
      min-height:54px;padding:0 22px;border-radius:999px;font-weight:950;letter-spacing:.055em;text-transform:uppercase;
      background:linear-gradient(135deg,var(--pink),var(--purple),var(--cyan));
      box-shadow:0 0 28px rgba(255,54,211,.3),inset 0 0 16px rgba(255,255,255,.14);
      transition:transform .2s ease,filter .2s ease;
    }
    .demo-btn.secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:none}
    .demo-btn:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.08)}

    .jc{
      position:fixed;inset:0;z-index:9999;display:none;place-items:center;opacity:0;padding:10px;overflow:hidden;
      background:radial-gradient(circle at 14% 16%,rgba(54,234,255,.2),transparent 28%),radial-gradient(circle at 84% 12%,rgba(255,54,211,.21),transparent 30%),rgba(2,0,8,.92);
      /* F5 desktop-fix: backdrop-filter REMOVED entirely. Even a delayed 3px blur re-filtered EVERY frame
         while the modal content animates (Chromium re-evaluates backdrop-filter on content change even with
         a frozen backdrop) = the profiled continuous ~100ms/frame train on 1920x1080. The 92%-opaque black
         + radials already carry the look; lite/mobile never had the blur at all. */
      transition:opacity .3s ease;
    }
    .jc.open{display:grid}.jc.visible{opacity:1}
    .jc.lite{backdrop-filter:none}
    .jc.lite .jc-portal,.jc.lite .jc-gridfloor,.jc.lite .jc-scan{display:none}
    .jc-gridfloor{
      position:absolute;inset:auto -18% -28% -18%;height:74%;pointer-events:none;opacity:.24;
      background-image:linear-gradient(rgba(54,234,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,54,211,.1) 1px,transparent 1px);
      background-size:54px 54px;transform:perspective(900px) rotateX(62deg);transform-origin:bottom;animation:gridRun 1.1s linear infinite;
    }
    @keyframes gridRun{to{background-position:0 54px,54px 0}}
    /* PERF: the grid-floor scroll animates background-position = a per-frame PAINT (the dominant SUSTAINED
       cost -- disabling it alone reached a flat 60fps, 0 jank). F5 desktop-fix (2026-07-10): pause it for
       the WHOLE open modal, not just .jc-spinning — show("result") drops jc-spinning, which used to RESUME
       the scroll and produce a sustained ~7fps verdict phase on 1920x1080 (profiled: continuous 133ms/frame
       gaps through the entire verdict). The grid is ambient texture; a static grid is imperceptible. */
    .jc.open .jc-gridfloor{animation-play-state:paused}
    /* PERF history: the full-screen backdrop blur went 10px -> spin-only 3px -> delayed .jc-blur-on (F1)
       -> REMOVED ENTIRELY (F5): even delayed and with a frozen backdrop, Chromium re-filtered it on every
       animated frame = a continuous ~100ms/frame train on 1920x1080 (profiled). */
    /* F5: all backdrop-filter rules removed with the base blur (see .jc above) — the delayed .jc-blur-on
       approach still re-filtered every animated frame. These explicit `none`s stay as guards against a
       future re-introduction leaking into the hot paths. */
    .jc.jc-spinning{backdrop-filter:none}
    .jc.lite{backdrop-filter:none}
    .jc.jc-spinning .jc-shell{backdrop-filter:none}
    .jc-portal{
      position:absolute;width:min(92vmin,790px);height:min(92vmin,790px);border-radius:999px;pointer-events:none;opacity:.26;
      /* F5 desktop-fix (2026-07-10): the old filter:blur(34px) was the biggest raster on big viewports —
         its first paint AND re-rasters produced 100-150ms frames on 1920x1080 (profiled). The soft look is
         now baked into the gradient itself (translucent stops + a radial mask ring) = ZERO filter cost; the
         rotation stays a pure composite (will-change). Visually equivalent behind the shell. */
      background:conic-gradient(from 90deg,rgba(255,54,211,.55),rgba(54,234,255,.55),rgba(255,211,93,.55),rgba(157,94,255,.55),rgba(255,54,211,.55));
      -webkit-mask:radial-gradient(circle,transparent 26%,#000 46%,#000 62%,transparent 80%);
      mask:radial-gradient(circle,transparent 26%,#000 46%,#000 62%,transparent 80%);
      /* F5: the portal is now STATIC — rotating a masked 790px layer re-rasters it EVERY frame (the mask
         defeats the old raster-once layerization; profiled: a continuous 100ms/frame train on 1920x1080
         from the moment .jc-fx lands until close). A static color ring keeps the ambiance at zero cost. */
    }
    .jc-vignette{position:absolute;inset:0;box-shadow:inset 0 0 130px rgba(0,0,0,.86);pointer-events:none}
    .jc-scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 6px);opacity:.14;pointer-events:none}
    /* F1 stagger (2026-07-10): the heavy ambient layers join at the POST-SPIN calm beat — JS adds .jc-fx at
       ~2.6s and each layer fades to its own stylesheet opacity (GPU-composite fade). Their first rasters
       (portal blur(34px), gridfloor grid) each cost a 150-400ms frame on mobile-class CPUs, so during the
       spin they stay off entirely — visually free there: the .jc backdrop is 92%-opaque black and the game
       behind is frozen. Lite mode display:none's these layers, so this is a no-op there. The vignette stays
       instant on purpose (cheap inset shadow; gives the open depth). */
    .jc .jc-portal,.jc .jc-gridfloor,.jc .jc-scan{transition:opacity .5s ease}
    .jc:not(.jc-fx) .jc-portal,.jc:not(.jc-fx) .jc-gridfloor,.jc:not(.jc-fx) .jc-scan{opacity:0}

    .jc-shell{
      width:min(1140px,100%);max-height:min(96vh,950px);border-radius:34px;position:relative;z-index:2;overflow:hidden;
      background:radial-gradient(circle at 50% -15%,rgba(255,211,93,.18),transparent 32%),linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035)),var(--panel);
      border:1px solid rgba(255,255,255,.2);
      box-shadow:0 0 0 1px rgba(255,54,211,.16),0 0 70px rgba(157,94,255,.36),0 24px 90px rgba(0,0,0,.58);
      backdrop-filter:blur(14px);transform:translateY(22px) scale(.92);opacity:0;transition:transform .45s var(--easeBack),opacity .3s ease;
    }
    .jc.visible .jc-shell{transform:translateY(0) scale(1);opacity:1}
    .jc.lite .jc-shell{backdrop-filter:none;box-shadow:0 18px 70px rgba(0,0,0,.55)}

    .jc-top{height:62px;padding:12px 16px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:4}
    .status-pill{
      display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:999px;
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.84);
      font-size:12px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;
    }
    .status-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}
    .close-btn{width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:24px;line-height:1;opacity:.82}

    .stage{min-height:min(740px,calc(96vh - 76px));padding:10px 14px 18px;display:grid;place-items:center;position:relative;z-index:3}
    .screen{width:100%;display:none;text-align:center;animation:screenIn .34s ease both}
    .screen.active{display:block}
    @keyframes screenIn{from{opacity:0;transform:translateY(18px) scale(.98);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
    .headline{margin:0;color:#fff;font-size:clamp(38px,7.6vw,98px);line-height:.82;letter-spacing:-.085em;text-transform:uppercase;text-shadow:0 0 30px rgba(255,54,211,.46),0 0 62px rgba(54,234,255,.18)}
    .headline .hot{color:var(--gold);text-shadow:0 0 30px rgba(255,211,93,.68)}
    .sub{max-width:760px;margin:18px auto 22px;color:rgba(255,255,255,.76);line-height:1.55;font-size:clamp(15px,2vw,20px)}
    .cash-card{
      width:min(620px,100%);margin:24px auto;padding:24px;border-radius:30px;border:1px solid rgba(255,255,255,.18);
      background:radial-gradient(circle at 25% 0,rgba(98,255,155,.16),transparent 34%),radial-gradient(circle at 75% 0,rgba(255,211,93,.16),transparent 36%),linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
      box-shadow:0 0 44px rgba(255,211,93,.11);
    }
    .cash-label{color:rgba(255,255,255,.62);font-size:12px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
    .cash-value{margin-top:8px;color:var(--gold);font-size:clamp(36px,8vw,68px);line-height:.95;font-weight:1000;letter-spacing:-.065em;text-shadow:0 0 28px rgba(255,211,93,.52)}

    .decision-row,.multiplier-grid{width:min(800px,100%);margin:22px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .decision,.multi{
      border-radius:28px;padding:18px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);
      transition:transform .18s ease,filter .18s ease;position:relative;overflow:hidden;
    }
    .decision{min-height:122px}
    .decision.safe{background:radial-gradient(circle at 50% 0,rgba(98,255,155,.23),transparent 45%),linear-gradient(145deg,rgba(98,255,155,.16),rgba(54,234,255,.09))}
    .decision.risk{background:radial-gradient(circle at 50% 0,rgba(255,211,93,.26),transparent 45%),linear-gradient(145deg,rgba(255,54,211,.2),rgba(157,94,255,.11))}
    .decision:hover,.multi:hover{transform:translateY(-4px) scale(1.015);filter:brightness(1.08)}
    .decision strong{display:block;font-size:clamp(18px,2.6vw,28px);text-transform:uppercase}
    .decision span{display:block;margin-top:8px;font-size:13px;color:rgba(255,255,255,.72);text-transform:uppercase;font-weight:850;letter-spacing:.06em}
    .small-note{margin-top:18px;color:rgba(255,255,255,.5);font-size:12px;line-height:1.45}

    .multi{min-height:178px;background:radial-gradient(circle at 50% -15%,rgba(255,211,93,.24),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035));box-shadow:0 0 38px rgba(157,94,255,.14)}
    .multi .x{display:block;color:var(--gold);font-size:clamp(62px,9vw,100px);font-weight:1000;line-height:.82;letter-spacing:-.08em;text-shadow:0 0 28px rgba(255,211,93,.68)}
    .multi .meta{display:block;margin-top:14px;color:rgba(255,255,255,.74);font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
    /* (removed .locked / .locked span -- orphaned styles from the DROPPED #pick "locked-tier pills" screen.
       ".locked span" COLLIDED with the reel's own .reel-column.locked state (specificity 0,1,1 > .s-symbol
       0,1,0) and painted a faint-white background over the gold orbs the instant a column stopped -> "gold
       turns gray on stop". The reel lock state keeps its .reel-column.locked rule; only these are gone.) */

    .countdown{position:absolute;inset:0;display:none;place-items:center;z-index:30;background:rgba(2,0,8,.42);backdrop-filter:blur(3px);pointer-events:none}
    .countdown.active{display:grid}
    .count-number{color:var(--gold);font-size:clamp(104px,27vw,310px);font-weight:1000;line-height:.75;letter-spacing:-.1em;text-shadow:0 0 28px rgba(255,211,93,.76),0 0 76px rgba(255,54,211,.28);animation:countPop .68s var(--easeBack) both}
    @keyframes countPop{0%{transform:scale(.3) rotate(-10deg);opacity:0;filter:blur(8px)}58%{transform:scale(1.08) rotate(2deg);opacity:1;filter:blur(0)}100%{transform:scale(1);opacity:.96}}

    .slot-panel{
      width:min(930px,100%);margin:16px auto 0;padding:clamp(14px,2.8vw,26px);border-radius:38px;border:1px solid rgba(255,255,255,.18);
      background:radial-gradient(circle at 50% -10%,rgba(255,211,93,.18),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035));
      box-shadow:0 0 58px rgba(255,54,211,.16);position:relative;overflow:hidden;
    }
    .slot-panel.hot{animation:machineShake .1s linear infinite}
    .jc.lite .slot-panel.hot{animation:none}
    @keyframes machineShake{0%,100%{transform:translateX(0)}50%{transform:translateX(1px)}}
    .slot-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;color:rgba(255,255,255,.78);font-size:12px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
    .slot-meta{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
    .slot-pill{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.68);font-size:11px;font-weight:850;letter-spacing:.06em;white-space:nowrap}
    .slot-x,.s-counter{color:var(--gold);text-shadow:0 0 18px rgba(255,211,93,.45)}
    .slot-x{font-size:22px}
    .s-counter.hotcount{animation:countGlow .38s var(--easeBack) both}
    @keyframes countGlow{55%{transform:scale(1.14);filter:brightness(1.3)}}

    .machine{
      position:relative;width:fit-content;max-width:100%;margin:0 auto;padding:clamp(10px,2vw,16px);border-radius:30px;
      background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.032)),rgba(0,0,0,.24);
      border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 28px rgba(0,0,0,.42),0 0 28px rgba(255,54,211,.1);overflow:hidden;
    }
    .reel-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--cols),var(--cell));gap:var(--gap)}
    .reel-column{
      height:calc(var(--rows) * var(--cell) + (var(--rows) - 1) * var(--gap));
      border-radius:clamp(13px,2vw,18px);overflow:hidden;position:relative;
      background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035)),rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 16px rgba(0,0,0,.3);
      contain:layout paint;
    }
    .reel-column::before,.reel-column::after{content:"";position:absolute;left:0;right:0;height:25%;z-index:3;pointer-events:none}
    .reel-column::before{top:0;background:linear-gradient(180deg,rgba(3,0,12,.66),transparent)}
    .reel-column::after{bottom:0;background:linear-gradient(0deg,rgba(3,0,12,.66),transparent)}
    .reel-strip{display:flex;flex-direction:column;gap:var(--gap);will-change:transform;transform:translateY(0)}
    .reel-column.stopping{box-shadow:inset 0 0 16px rgba(0,0,0,.3),0 0 20px rgba(255,211,93,.15)}
    .reel-column.locked{animation:columnLock .4s var(--easeBack) both;box-shadow:inset 0 0 16px rgba(0,0,0,.3),0 0 30px rgba(255,211,93,.24)}
    /* satisfying "landing" when a column stops sliding: a downward settle-bounce + a bright gold flash. */
    @keyframes columnLock{0%{transform:translateY(-7px) scale(1.045);filter:brightness(1.32)}45%{transform:translateY(4px) scale(.985)}72%{transform:translateY(-2px) scale(1.008)}100%{transform:translateY(0) scale(1);filter:brightness(1)}}
    /* when ALL reels have landed: one unified gold impact-flash across the machine. */
    .machine.landed{animation:machineLand .55s ease-out}
    .jc.lite .machine.landed{animation:none}
    @keyframes machineLand{0%{box-shadow:inset 0 0 28px rgba(0,0,0,.42),0 0 48px rgba(255,205,40,.62),0 0 22px rgba(255,54,211,.22)}100%{box-shadow:inset 0 0 28px rgba(0,0,0,.42),0 0 28px rgba(255,54,211,.1)}}

    .symbol-cell{
      width:var(--cell);height:var(--cell);min-height:var(--cell);display:grid;place-items:center;
      border-radius:clamp(13px,2vw,18px);
      background:radial-gradient(circle at 50% 0,rgba(255,255,255,.1),transparent 48%),rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;box-shadow:inset 0 0 14px rgba(0,0,0,.24);
    }
    .visible-s-hit{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,211,93,.6),0 0 36px rgba(255,211,93,.6),0 0 16px rgba(255,54,211,.22),inset 0 0 18px rgba(255,211,93,.2);animation:sHitPulse .86s ease-in-out infinite;z-index:4;transition:box-shadow .4s ease,border-color .4s ease}
    .visible-s-hit .s-symbol{box-shadow:0 0 36px rgba(255,200,30,.98),0 0 14px rgba(255,236,128,1),inset 0 -3px 8px rgba(190,105,0,.42),inset 0 3px 10px rgba(255,255,255,.72)}
    .visible-near{border-color:rgba(255,54,211,.25);box-shadow:0 0 20px rgba(255,54,211,.24),inset 0 0 16px rgba(255,54,211,.1)}
    /* F5 SCATTER ANTICIPATION (founder 2026-07-10, Gates-of-Olympus beat): reels still spinning after the
       3rd gold locks get a pulsing golden tension frame while their flow drops to heavy slow-motion (JS
       sets .anticipation + the slow step factor). Paint region = just the 1-2 columns, cheap everywhere.
       (::before/::after are taken by the reel fade masks, so the pulse lives on the column box itself.) */
    .reel-column.anticipation{position:relative;z-index:4;box-shadow:0 0 0 2px rgba(255,211,93,.85),0 0 22px rgba(255,211,93,.55),inset 0 0 18px rgba(255,211,93,.14);animation:anticPulse .75s ease-in-out infinite}
    @keyframes anticPulse{50%{box-shadow:0 0 0 2px rgba(255,211,93,.35),0 0 10px rgba(255,211,93,.25),inset 0 0 10px rgba(255,211,93,.07)}}
    /* CHAMBER focus (R3 polish #1): when the orbs lock, recede the normal fruit so the "golden fruit" story reads instantly + the payoff pops. */
    .symbol-cell.dim-fruit{opacity:.32;filter:saturate(.4) brightness(.66);transition:opacity .5s ease,filter .5s ease}
    .jc.lite .visible-s-hit{animation:none}
    @keyframes sHitPulse{50%{transform:scale(1.07);filter:brightness(1.2)}}
    .symbol{font-size:clamp(29px,4.6vw,50px);line-height:1;filter:drop-shadow(0 0 10px rgba(255,255,255,.2));user-select:none;position:relative;z-index:1}
    /* Winning symbol = the in-game GOLDEN FRUIT gold-treasure orb (not a letter). Palette matches the
       procedural canvas orb in main_out.js: radial #fffbe0 -> #ffe64d -> #ffb400 -> #b8730a + gold glow. */
    .s-symbol{
      position:relative;width:clamp(38px,6.4vw,64px);height:clamp(38px,6.4vw,64px);border-radius:999px;overflow:visible;
      /* saturated, persistently-yellow gold (warm center, bright orange-gold rim -- NO brown/white that
         reads gray at rest) + a strong always-on glow so a stopped orb stays vividly gold. */
      background:radial-gradient(circle at 36% 30%,#fff7c8 0%,#ffe23e 30%,#ffc400 66%,#ff9800 100%);
      box-shadow:0 0 26px rgba(255,200,30,.8),0 0 10px rgba(255,236,128,.9),inset 0 -3px 8px rgba(190,105,0,.42),inset 0 3px 10px rgba(255,255,255,.6);
    }
    /* (dropped the goldBreath filter-animation: a per-orb brightness/saturate repaint that added long frames.
       The saturated palette above already keeps the orb vividly gold at rest -- so this is quality-neutral.) */
    .s-symbol::before{content:"";position:absolute;top:15%;left:22%;width:32%;height:28%;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.85),transparent 72%);pointer-events:none}
    /* Solanza identity (R3 polish #2): a subtle embossed "S" stamps the orb as a special Solanza symbol (not just a shiny ball). Hidden when a real icon asset is supplied. */
    .s-symbol::after{content:"S";position:absolute;inset:0;display:grid;place-items:center;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:1000;font-size:58%;color:rgba(150,86,0,.52);text-shadow:0 1px 0 rgba(255,255,255,.42);pointer-events:none}
    .s-symbol:has(img)::after{display:none}
    .s-symbol img{width:100%;height:100%;object-fit:contain;display:block;border-radius:999px}
    .scanline{position:absolute;left:10px;right:10px;top:0;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,211,93,.9),transparent);box-shadow:0 0 16px rgba(255,211,93,.68);opacity:0;z-index:6;pointer-events:none}
    .scanline.active{opacity:1;animation:scanSweep 1.15s ease-in-out infinite}
    @keyframes scanSweep{to{transform:translateY(calc(var(--rows) * (var(--cell) + var(--gap)) - 14px))}}

    .collector{
      position:absolute;left:50%;top:50%;width:min(360px,76%);min-height:92px;transform:translate(-50%,-50%) scale(.92);
      border-radius:28px;display:none;place-items:center;padding:18px;text-align:center;z-index:18;border:1px solid rgba(255,211,93,.42);
      background:radial-gradient(circle at 50% 0,rgba(255,211,93,.22),transparent 42%),linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.055)),rgba(10,2,28,.88);
      box-shadow:0 0 46px rgba(255,211,93,.18),0 0 34px rgba(255,54,211,.14);backdrop-filter:blur(8px);
    }
    .collector.active{display:grid;animation:collectorIn .45s var(--easeBack) both}
    .jc.lite .collector{backdrop-filter:none}
    @keyframes collectorIn{64%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
    .collector-kicker{color:rgba(255,255,255,.7);font-size:11px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
    .collector-title{margin-top:6px;color:var(--gold);font-size:clamp(30px,5vw,48px);line-height:.9;font-weight:1000;letter-spacing:-.07em;text-shadow:0 0 22px rgba(255,211,93,.6);text-transform:uppercase}

    .pressure-wrap{margin-top:16px}
    .pressure-label{display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.58);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
    .pressure{height:14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);overflow:hidden}
    .pressure-bar{width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gold),var(--orange));box-shadow:0 0 18px rgba(255,54,211,.48);transition:width .12s linear}
    .whisper{min-height:24px;margin:14px auto 0;color:rgba(255,255,255,.72);font-weight:850;letter-spacing:.02em}

    .result-card,.error-card{
      width:min(740px,100%);margin:0 auto;padding:clamp(24px,4vw,40px);border-radius:38px;border:1px solid rgba(255,255,255,.18);
      background:radial-gradient(circle at 50% -10%,rgba(255,211,93,.26),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
      box-shadow:0 0 70px rgba(255,211,93,.16);overflow:hidden;position:relative;
    }
    .error-card{background:radial-gradient(circle at 50% -10%,rgba(255,49,90,.24),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035))}
    .result-card.win{animation:winEnter .74s var(--easeBack) both,winGlow 1.1s ease-in-out infinite}
    .result-card.lose{background:radial-gradient(circle at 50% -10%,rgba(255,49,90,.24),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));animation:loseEnter .58s ease both}
    /* F2 FLAWLESS-LOSS verdict card (2026-07-10): the "no jackpot" beat must be BIG and unmistakable
       (founder live-test: the old small-text verdict never registered). The pot line is number-free by
       design (owner rule: no live pool value on screen); no share/actions on a loss — auto-close + × exit. */
    .result-card.lose .amount{color:#c9d4e8;font-size:clamp(17px,3vw,24px);letter-spacing:-.02em;text-shadow:none;margin-top:12px}
    .result-card.lose .result-actions{display:none}
    .loss-handoff{margin-top:18px;font-size:clamp(14px,2.4vw,17px);font-weight:800;color:#9fe8b8;letter-spacing:.02em}
    .loss-handoff[hidden]{display:none}   /* the hidden attribute must ALWAYS win (the .m-ladder lesson) */
    .loss-handoff .lh-arrow{display:inline-block;animation:lhNudge 1s ease-in-out infinite}
    @keyframes lhNudge{50%{transform:translateX(4px)}}
    .jc.lite .result-card.win{animation:winEnter .65s var(--easeBack) both}
    @keyframes winEnter{0%{transform:scale(.76);opacity:0;filter:blur(8px)}64%{transform:scale(1.06);opacity:1;filter:blur(0)}100%{transform:scale(1)}}
    @keyframes winGlow{50%{box-shadow:0 0 90px rgba(255,211,93,.28),0 0 54px rgba(255,54,211,.16)}}
    /* R3 polish #5: a one-shot gold radial-burst behind the content as the result card scales in (climax). */
    .result-card.win::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 32%,rgba(255,211,93,.5),rgba(255,54,211,.14) 42%,transparent 68%);opacity:0;pointer-events:none;z-index:0;animation:resultBurst .95s ease-out both}
    .result-card.win>*{position:relative;z-index:1}
    @keyframes resultBurst{0%{opacity:0;transform:scale(.5)}28%{opacity:.92}100%{opacity:0;transform:scale(1.35)}}
    .jc.lite .result-card.win::before{animation:none}
    /* F5: filter:blur removed from the loss entrance — animating a filter re-rasters the (large) card every
       frame for .58s (profiled 83ms frames on 1920x1080). The shake+fade carries the beat identically. */
    @keyframes loseEnter{0%{transform:translateX(-12px);opacity:0}35%{transform:translateX(10px)}70%{transform:translateX(-4px)}100%{transform:translateX(0);opacity:1}}
    .result-kicker,.error-kicker{color:rgba(255,255,255,.66);font-size:12px;font-weight:950;letter-spacing:.15em;text-transform:uppercase}
    .result-title,.error-title{margin:8px 0;font-size:clamp(48px,9vw,106px);line-height:.78;letter-spacing:-.09em;text-transform:uppercase;font-weight:1000}
    .error-title{color:var(--red);text-shadow:0 0 28px rgba(255,49,90,.46)}
    .result-title.winText{color:var(--gold);text-shadow:0 0 30px rgba(255,211,93,.74),0 0 60px rgba(255,54,211,.2)}
    .result-title.loseText{color:var(--red);text-shadow:0 0 28px rgba(255,49,90,.46)}
    .amount{margin-top:16px;color:#fff;font-size:clamp(28px,5.8vw,52px);font-weight:1000;letter-spacing:-.06em;text-shadow:0 0 22px rgba(255,255,255,.22)}
    .result-card.win .amount{color:var(--gold);text-shadow:0 0 26px rgba(255,211,93,.5)}
    .result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin-top:24px}
    .action{min-height:56px;padding:0 22px;border-radius:999px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,var(--pink),var(--purple),var(--cyan));box-shadow:0 0 28px rgba(255,54,211,.24)}
    .action.safe{background:linear-gradient(135deg,var(--green),var(--cyan));box-shadow:0 0 28px rgba(98,255,155,.2)}

    .verification{margin-top:16px;color:rgba(255,255,255,.58);font-size:12px;line-height:1.5}
    .verification a{color:var(--cyan);text-decoration:none;font-weight:800}

    .particles,.coins,.sparks,.trail-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:10}
    .confetti{position:absolute;width:8px;height:14px;border-radius:3px;opacity:0;animation:confettiFall var(--d,1.8s) linear forwards}
    @keyframes confettiFall{0%{transform:translateY(-40px) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(820deg);opacity:0}}
    .coin{position:absolute;width:22px;height:22px;border-radius:999px;left:50%;top:50%;opacity:0;background:radial-gradient(circle at 32% 26%,#fff7b6,var(--gold) 42%,#b77708 80%);box-shadow:0 0 16px rgba(255,211,93,.55);animation:coinFly var(--d,1.3s) var(--easeBack) forwards}
    .coin::after{content:"$";position:absolute;inset:0;display:grid;place-items:center;color:rgba(73,42,0,.72);font-size:12px;font-weight:1000}
    @keyframes coinFly{0%{transform:translate(0,0) scale(.15) rotateY(0);opacity:0}18%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1.08) rotateY(720deg);opacity:0}}
    .spark{position:absolute;width:4px;height:4px;left:50%;top:50%;border-radius:999px;background:var(--gold);box-shadow:0 0 12px var(--gold);opacity:0;animation:sparkFly var(--d,.85s) ease-out forwards}
    @keyframes sparkFly{0%{transform:translate(0,0) scale(.3);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1.1);opacity:0}}
    .trail-s{position:absolute;width:42px;height:42px;display:grid;place-items:center;border-radius:999px;color:var(--gold);font-size:32px;font-weight:1000;font-style:italic;background:radial-gradient(circle at 35% 30%,#fffbe0 0%,#ffe64d 34%,#ffb400 74%,#b8730a 100%);box-shadow:0 0 22px rgba(255,205,40,.55),inset 0 0 14px rgba(255,255,255,.35);opacity:0;animation:flyToCenter .58s ease forwards;z-index:20}
    @keyframes flyToCenter{0%{transform:translate(var(--sx),var(--sy)) scale(.78) rotate(-12deg);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(.42) rotate(8deg);opacity:0}}

    .glitch{animation:rootGlitch .16s linear 4}
    @keyframes rootGlitch{33%{filter:hue-rotate(36deg) contrast(1.25);transform:translateX(-3px)}66%{filter:hue-rotate(-24deg) contrast(1.12);transform:translateX(3px)}}
    .shakeHard .jc-shell{animation:hardShake .12s linear 5}
    .jc.lite .shakeHard .jc-shell{animation:none}
    @keyframes hardShake{25%{transform:translate(-4px,2px) scale(1.004)}50%{transform:translate(3px,-2px) scale(1.004)}75%{transform:translate(-2px,-2px) scale(1.004)}}

    .sr-live{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
    @media (max-width:720px){
      :root{--cell:clamp(38px,13vw,55px);--gap:5px}
      .jc{padding:7px}.jc-shell{border-radius:24px;overflow-y:auto}.jc-top{height:56px;padding:10px 10px 0}.status-pill{font-size:10px;padding:8px 10px}
      .decision-row,.multiplier-grid{grid-template-columns:1fr}.machine{padding:8px}.symbol{font-size:27px}.s-symbol{width:34px;height:34px;font-size:28px}
      .slot-head{justify-content:center}.result-actions{flex-direction:column}.action{width:100%}
      /* R3 polish #4: bigger, more prominent golden orbs on mobile so the important symbol dominates a small screen */
      .s-symbol{width:44px;height:44px;font-size:28px}.symbol-cell.dim-fruit{opacity:.28}
    }

    /* V10.1 click-safety patch */
    .demo-card, .demo-actions, .demo-btn {
      position: relative;
      z-index: 20;
      pointer-events: auto;
    }

    .jc {
      pointer-events: none;
    }

    .jc.open {
      pointer-events: auto;
    }

    .jc-portal,
    .jc-gridfloor,
    .jc-vignette,
    .jc-scan,
    .particles,
    .coins,
    .sparks,
    .trail-layer,
    .countdown {
      pointer-events: none !important;
    }

    .jc-shell {
      z-index: 50;
      pointer-events: auto;
    }

    .jc-shell button,
    .jc-shell a,
    .jc-shell .decision,
    .jc-shell .multi,
    .jc-shell .action,
    .close-btn {
      position: relative;
      z-index: 80;
      pointer-events: auto !important;
    }

    .screen.active {
      pointer-events: auto;
    }

    .screen:not(.active) {
      pointer-events: none;
    }

    /* MODEL-A "The Pot" discrete-M ladder reveal (R3). The 8 multiplier rungs; a sweep highlight (.active)
       decelerates through them and LOCKS on the won rung (.won). Reuses the gold palette + --easeBack. */
    .m-ladder{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:9px;margin:16px auto 8px;max-width:640px;animation:mLadderIn .42s var(--easeBack) both}
    .m-ladder[hidden],.machine[hidden]{display:none}   /* [hidden] must beat .m-ladder{display:flex} during the slot pre-phase */
    /* Slot->ladder cinematic (R3 polish #3): the ladder scales in + a gold flash glues the CHAMBER-UNLOCKED handoff. */
    @keyframes mLadderIn{0%{opacity:0;transform:translateY(8px) scale(.94);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
    .jc.lite .m-ladder{animation:none}
    .slot-panel.unlock-flash{animation:unlockFlash .52s ease}
    @keyframes unlockFlash{0%{box-shadow:none}22%{box-shadow:0 0 90px 22px rgba(255,211,93,.5),0 0 40px 10px rgba(255,54,211,.28)}100%{box-shadow:none}}
    .jc.lite .slot-panel.unlock-flash{animation:none}
    .m-rung{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;padding:12px 10px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.52);transition:transform .12s ease,color .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease}
    .m-rung.hi{min-width:74px}
    .m-rung .m-x{font-weight:1000;font-size:clamp(20px,3.4vw,30px);line-height:1;letter-spacing:-.05em}
    .m-rung .m-sub{margin-top:4px;font-size:9px;font-weight:850;letter-spacing:.16em;color:rgba(255,255,255,.3);text-transform:uppercase}
    .m-rung.active{color:#fff;background:linear-gradient(180deg,rgba(255,211,93,.26),rgba(255,54,211,.12));border-color:rgba(255,211,93,.5);box-shadow:0 0 22px rgba(255,211,93,.4);transform:translateY(-4px) scale(1.06)}
    .m-rung.won{color:var(--gold);background:radial-gradient(circle at 50% 0,rgba(255,211,93,.42),rgba(255,54,211,.12));border-color:var(--gold);box-shadow:0 0 34px rgba(255,211,93,.7),inset 0 0 18px rgba(255,211,93,.28);transform:translateY(-6px) scale(1.14);animation:mRungWon .5s var(--easeBack) both}
    .m-rung.won .m-sub{color:rgba(255,211,93,.85)}
    @keyframes mRungWon{0%{transform:translateY(-6px) scale(1.32);filter:brightness(1.5)}60%{transform:translateY(-6px) scale(1.05)}100%{transform:translateY(-6px) scale(1.14)}}
    .jc.lite .m-rung{transition:none}.jc.lite .m-rung.won{animation:none}
    .m-bigx{min-height:0;margin-top:2px}
    .m-bigx .x{display:inline-block;color:var(--gold);font-size:clamp(52px,11vw,116px);font-weight:1000;line-height:.85;letter-spacing:-.08em;text-shadow:0 0 30px rgba(255,211,93,.72),0 0 64px rgba(255,54,211,.24);animation:mBigxIn .5s var(--easeBack) both}
    @keyframes mBigxIn{0%{transform:scale(.4) rotate(-8deg);opacity:0;filter:blur(8px)}60%{transform:scale(1.12) rotate(2deg);opacity:1;filter:blur(0)}100%{transform:scale(1)}}
    .jc.lite .m-bigx .x{animation:none}
    @media (max-width:720px){ .m-ladder{gap:6px}.m-rung{min-width:52px;padding:10px 7px;border-radius:13px}.m-rung.hi{min-width:58px} }

    /* Provably-fair badge + collapsible detail (R3 V-DÜZEN, founder 2026-07-09): default-clean win; the raw
       seeds live behind this "Provably Fair" toggle. Reveal animation = transform/opacity only (no layout thrash). */
    .pf-badge{display:inline-flex;align-items:center;gap:7px;margin:4px auto 0;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.72);font:inherit;font-size:12px;font-weight:850;letter-spacing:.04em;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .12s}
    .pf-badge:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26)}
    .pf-badge:active{transform:scale(.97)}
    .pf-badge .pf-check{font-weight:1000;font-size:13px}
    .pf-badge .pf-hint{opacity:.62;font-weight:750}
    .pf-badge::after{content:"▾";font-size:10px;opacity:.55;transition:transform .18s ease}
    .pf-badge.open::after{transform:rotate(180deg)}
    .pf-badge.ok{color:var(--gold);border-color:rgba(255,211,93,.5);background:rgba(255,211,93,.1)}
    .pf-badge.ok .pf-check{color:var(--gold)}
    .pf-badge.bad{color:#ff6b8a;border-color:rgba(255,107,138,.5)}
    .pf-badge.bad .pf-check{color:#ff6b8a}
    .pf-details{margin-top:12px;color:rgba(255,255,255,.55);font-size:12px;line-height:1.6;animation:pfDetailsIn .22s ease both}
    .pf-details[hidden]{display:none}
    @keyframes pfDetailsIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
    .pf-detail-status{color:rgba(255,255,255,.72);font-weight:850;margin-bottom:5px}
    .pf-badge.ok ~ .pf-details .pf-detail-status{color:var(--gold)}
    .pf-badge.bad ~ .pf-details .pf-detail-status{color:#ff6b8a}
    .jc.lite .pf-details{animation:none}