:root{
    --bg:#0d0a0f;
    --gold:#e8c266;
    --gold-light:#f7e3b0;
    --pink:#ef4f9d;
    --text:#f8fafc;
    --text-soft:#d7b6c8;
    --font-heading:'Cinzel',Georgia,serif;
    --font-body:'Outfit',system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    min-height:100vh; min-height:100dvh;
    font-family:var(--font-body); color:var(--text);
    background-color:var(--bg);
    background-image:
      radial-gradient(ellipse at 78% 22%,rgba(239,79,157,.22) 0%,transparent 55%),
      radial-gradient(ellipse at 18% 80%,rgba(232,194,102,.12) 0%,transparent 52%),
      radial-gradient(ellipse at 50% 50%,rgba(40,20,34,.55) 0%,transparent 70%);
    background-attachment:fixed;
    overflow-x:hidden;
  }

  /* One stage keeps the mockup's proportions: content column on the left,
     the figure anchored to the right edge behind it. */
  .stage{
    position:relative; width:100%; max-width:1086px; margin:0 auto;
    min-height:100vh; min-height:100dvh;
    display:flex; align-items:center;
  }
  .app{
    /* Single source of truth for the wheel size: the pointer overhang above
       the disc is derived from it, so the two can never drift apart. */
    /* Bigger floor on short viewports: this is what was making the wheel
       (and therefore its numerals) render tiny on a real phone. */
    --wheel:min(90vw,46vh,460px);
    --pointer-overhang:calc(var(--wheel) * 0.135);
    position:relative; z-index:1;
    width:min(94vw,520px); min-width:0; margin:auto;
    padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));
    display:flex; flex-direction:column; align-items:center; gap:14px;
    text-align:center;
  }

  /* Wheel and figure share one row, so she is sized as a PERCENTAGE OF THE
     WHEEL rather than of the viewport. That keeps the pairing identical at
     every screen size instead of needing a breakpoint per device. */
  .wheel-row{
    position:relative; width:100%;
    display:flex; justify-content:center; align-items:flex-end;
    /* The pointer is absolutely positioned and escapes the wheel box, so the
       row reserves its overhang. Without this it lands on the tagline. */
    padding-top:var(--pointer-overhang);
  }
  .wheel-wrap{z-index:1}
  /* A halo, not a rim band: on a near-black page the dark segments sit at
     ~1:1 against the backdrop, so without this the wheel reads as loose
     wedges rather than a disc. The engine sets --halo-rgb from the palette;
     the fallback is gold, so this still holds up with no JS. */
  .wheel-wrap::after{
    content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
    box-shadow:
      0 0 0 1px rgba(var(--halo-rgb,232,194,102),.30),
      0 0 34px rgba(var(--halo-rgb,232,194,102),.16),
      inset 0 0 26px rgba(0,0,0,.55);
  }
  .brand{
    font-size:clamp(9px,1.7vw,12px); letter-spacing:.42em; text-transform:uppercase;
    color:var(--pink); font-weight:600;
  }
  h1{
    margin:0; font-family:var(--font-heading); font-weight:700;
    font-size:clamp(20px,4.6vw,44px); line-height:1.1;
    background:linear-gradient(180deg,#fbeec4 10%,var(--gold) 55%,#b8892f);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  /* Gold rule broken by a crown, as in the reference. */
  .rule{
    display:flex; align-items:center; gap:10px; width:100%; max-width:330px;
    color:var(--gold);
  }
  .rule::before,.rule::after{
    content:''; flex:1; height:1px;
    background:linear-gradient(90deg,transparent,rgba(232,194,102,.65));
  }
  .rule::after{background:linear-gradient(270deg,transparent,rgba(232,194,102,.65))}
  .rule span{font-size:clamp(13px,2.4vw,19px);line-height:1}
  .tagline{
    font-size:clamp(11px,2.1vw,17px); color:var(--pink); font-weight:400;
    letter-spacing:.2px;
  }

  .wheel-wrap{position:relative;width:var(--wheel);aspect-ratio:1;flex:none}
  canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 16px 36px rgba(0,0,0,.55))}
  /* clip-path, not border tricks: border-width rejects percentages, so a
     %-sized CSS triangle collapses to nothing. This scales with the wheel. */
  .pointer{
    position:absolute;left:50%;top:-12.5%;transform:translateX(-50%);
    width:10.5%;height:14%;z-index:3;
    background:linear-gradient(180deg,#fffdf6,#f7e3b0 55%,#dcb45c);
    clip-path:polygon(50% 100%,0 0,100% 0);
    filter:drop-shadow(0 4px 7px rgba(0,0,0,.75));
  }
  .hub{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:35%;height:35%;border-radius:50%;z-index:2;
    background:radial-gradient(circle at 50% 32%,#2e1122,#1a0812 72%,#12060d);
    border:4px solid var(--gold);
    box-shadow:0 0 20px rgba(0,0,0,.8),inset 0 0 22px rgba(0,0,0,.7);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .hub span{
    font-family:var(--font-heading);font-weight:700;
    font-size:clamp(9px,1.85vw,17px);letter-spacing:.06em;
    color:var(--gold-light);line-height:1.28;text-transform:uppercase;
  }

  button{
    border:0;border-radius:999px;cursor:pointer;flex:none;
    padding:clamp(11px,1.7vw,15px) clamp(38px,7vw,74px);
    font-family:var(--font-body);font-size:clamp(13px,2vw,18px);font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;color:#38240a;
    background:linear-gradient(180deg,#fdf1cd,#eccc7c 52%,#d3a94f);
    box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.65);
    transition:transform .15s,opacity .15s,box-shadow .3s;
  }
  button:hover:not(:disabled){box-shadow:0 10px 28px rgba(232,194,102,.32),inset 0 1px 0 rgba(255,255,255,.65)}
  button:active{transform:scale(.96)}
  button:disabled{opacity:.5;cursor:not-allowed}

  /* The result is the payoff of the page, so it still gets its own gold
     frame and light, but sized to sit comfortably under a full-size wheel
     rather than competing with it for the screen. */
  .result{
    position:relative;width:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;border-radius:16px;overflow:hidden;
    padding:clamp(9px,1.8vw,14px) clamp(12px,2.2vw,18px);
    border:2px solid rgba(232,194,102,.55);
    background:linear-gradient(180deg,#2a1a24 0%,#170f15 55%,#0f0b10 100%);
    box-shadow:0 8px 26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.10);
    transition:border-color .35s,box-shadow .35s,transform .35s;
  }
  /* A 3px accent bar buys visibility without costing any height. */
  .result::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--pink) 50%,var(--gold) 78%,transparent);
    opacity:.75;transition:opacity .35s;
  }
  .result.landed::before{opacity:1}
  .result .label{
    font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
    color:rgba(232,194,102,.75);font-weight:700;
  }
  .result .amount{
    font-family:var(--font-heading);font-weight:800;line-height:1;
    font-size:clamp(26px,7.5vw,42px);letter-spacing:-.005em;
    background:linear-gradient(180deg,#fffdf5 5%,#ffe9b4 40%,var(--gold) 72%,#c8993a);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 0 16px rgba(232,194,102,.45));
  }
  .result .msg{
    font-size:clamp(12px,2.1vw,14px);font-weight:400;color:var(--text-soft);
    line-height:1.45;max-width:30ch;margin:0 auto;text-wrap:balance;
  }

  /* Landed: the frame lights up and keeps a slow pulse, so the number stays
     the loudest thing on screen well after the animation ends. */
  .result.landed{
    border-color:#ffdf94;
    box-shadow:
      0 0 0 1px rgba(255,223,148,.5),
      0 0 52px rgba(232,194,102,.45),
      0 14px 40px rgba(0,0,0,.6),
      inset 0 0 44px rgba(232,194,102,.16);
    animation:pop .5s cubic-bezier(.2,1.5,.4,1), breathe 3.2s ease-in-out .5s infinite;
  }
  .result.landed .label{color:#ffd7ea;text-shadow:0 0 14px rgba(239,79,157,.7)}
  .result.landed .msg{color:#f0dcc6}
  @keyframes pop{0%{transform:scale(.82);opacity:0}100%{transform:scale(1);opacity:1}}
  @keyframes breathe{
    0%,100%{box-shadow:0 0 0 1px rgba(232,194,102,.35),0 0 40px rgba(232,194,102,.26),0 14px 40px rgba(0,0,0,.55),inset 0 0 40px rgba(232,194,102,.08)}
    50%    {box-shadow:0 0 0 1px rgba(232,194,102,.5), 0 0 64px rgba(232,194,102,.46),0 14px 40px rgba(0,0,0,.55),inset 0 0 50px rgba(232,194,102,.16)}
  }
  @media (prefers-reduced-motion:reduce){
    .result.landed{animation:none}
  }

  /* Short or narrow screens: tighten everything EXCEPT the result, which is
     meant to be large. Trading header and wheel space keeps the payoff big. */
  @media (max-width:420px),(max-height:720px){
    .app{gap:9px;padding-top:12px;padding-bottom:12px}
    .rule{max-width:230px}
    .brand{letter-spacing:.3em}
    .app{--wheel:min(90vw,40vh,420px)}
    .result{padding:clamp(8px,2vw,13px) 10px;gap:3px}
    .result .msg{font-size:11.5px;line-height:1.35}
  }

  /* Language switcher: two flag buttons, fixed to the corner so it's in the
     same reachable spot regardless of scroll position or which game this is. */
  .lang-toggle{
    position:fixed;top:max(10px,env(safe-area-inset-top));
    right:max(10px,env(safe-area-inset-right));
    z-index:10;display:flex;gap:6px;
    background:rgba(15,10,14,.55);border:1px solid rgba(232,194,102,.3);
    border-radius:999px;padding:4px;backdrop-filter:blur(6px);
  }
  .lang-toggle button{
    all:unset;cursor:pointer;width:30px;height:30px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;line-height:1;opacity:.5;
    transition:opacity .2s,background-color .2s,transform .15s;
  }
  .lang-toggle button:hover{opacity:.8}
  .lang-toggle button:active{transform:scale(.9)}
  .lang-toggle button.active{
    opacity:1;background:rgba(232,194,102,.18);
    box-shadow:0 0 0 1px rgba(232,194,102,.45) inset;
  }