:root{
  --bg0:#04050c; --panel:#0d1124cc; --line:#2b3768; --text:#eef1ff; --mute:#8b93c0;
  --accent:#7c5cff; --accent2:#39e6ff; --gold:#ffd24a; --green:#28e58a; --red:#ff5470;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:#04050c;color:var(--text);font-family:-apple-system,Inter,system-ui,sans-serif;
  display:flex;flex-direction:column;min-height:100dvh;overflow-x:hidden}

/* animated nebula background canvas */
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
/* foreground FX (cluster bursts, orb glints) */
#fxfx{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.wrap{position:relative;z-index:2;display:flex;flex-direction:column;height:100dvh;overflow:hidden}

.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:3px;font-size:15px}
.brand .dot{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,var(--accent2) 40%,var(--accent) 100%);box-shadow:0 0 16px var(--accent)}
.brand span{background:linear-gradient(90deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.top-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.icon-btn{background:#0e1124aa;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:6px 10px;font-size:15px;cursor:pointer}
.balance{font-variant-numeric:tabular-nums;font-weight:800;background:#0e1124aa;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.balance small{color:var(--mute);font-weight:600;margin-left:3px}
.demo{background:var(--gold);color:#000;font-weight:800;padding:2px 7px;border-radius:6px;font-size:11px}

.jackbar{display:flex;gap:6px;padding:4px 12px 6px;justify-content:center;flex-wrap:wrap}
.jchip{font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);background:#0b0f22cc;backdrop-filter:blur(4px);display:flex;gap:6px}
.jchip b{color:var(--gold)} .jchip.mini b{color:#9fe} .jchip.minor b{color:#7df} .jchip.major b{color:#fb8} .jchip.mega b{color:var(--gold)}

.stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2px 10px 0;gap:4px}
/* board fills the leftover vertical space and stays square → never pushes
   the controls off-screen; shrinks on short phones instead of scrolling. */
.boardwrap{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.winbar{flex:none;min-height:26px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.winbar .x{color:var(--gold);font-family:var(--mono);text-shadow:0 0 16px var(--gold)}
.orbpill{font-family:var(--mono);font-size:13px;color:#241500;background:linear-gradient(90deg,var(--gold),#ffb01e);
  padding:3px 11px;border-radius:20px;font-weight:900;display:none;box-shadow:0 0 18px var(--gold)}
.orbpill.on{display:inline-block;animation:pulse .7s ease}

.board{position:relative;display:grid;gap:5px;background:#070a18cc;border:1px solid var(--line);
  border-radius:16px;padding:8px;aspect-ratio:1/1;
  height:100%;width:auto;max-width:min(94vw,440px);max-height:100%;
  box-shadow:0 0 50px #0009 inset,0 0 30px #7c5cff44,0 10px 40px #000a}
.cell{position:relative;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:clamp(15px,5.2vw,27px);font-weight:900;background:#11162e;
  transition:transform .13s cubic-bezier(.34,1.56,.64,1),opacity .12s;overflow:hidden}
.cell svg{width:62%;height:62%}
.cell .lbl{filter:drop-shadow(0 1px 2px #000a)}
.cell.drop{animation:drop .26s ease}
.cell.win{animation:winpop .34s ease}
.cell.clear{opacity:0;transform:scale(.25)}
/* low symbols — element gems */
.cell.l0{background:linear-gradient(160deg,#6f93c4,#3a5a8a)} /* H  */
.cell.l1{background:linear-gradient(160deg,#5fbf8b,#2f7a52)} /* He */
.cell.l2{background:linear-gradient(160deg,#c9a06a,#8a6334)} /* C  */
.cell.l3{background:linear-gradient(160deg,#c97aa6,#8a3f6b)} /* O  */
.cell.l4{background:linear-gradient(160deg,#9a7ad6,#5e3f9a)} /* Fe */
/* high symbols — luminous */
.cell.h{background:radial-gradient(circle at 38% 30%,#1b2348,#0c1030)}
.cell.wild{background:radial-gradient(circle at 35% 30%,#fff,var(--accent2) 45%,var(--accent) 100%);box-shadow:0 0 18px var(--accent)}
.cell.scatter{background:radial-gradient(circle at 40% 35%,#cfe9ff,#2f7bd6 60%,#123a78);box-shadow:0 0 16px #39a0ff}
.cell.core{background:radial-gradient(circle at 35% 30%,#fff,#ffe27a 50%,#b8860b);box-shadow:0 0 18px var(--gold)}
.cell.orb{background:radial-gradient(circle at 35% 28%,#fff7cf,var(--gold) 55%,#a9760a 100%);color:#241500;box-shadow:0 0 22px var(--gold)}
.cell.orb .ov{font-family:var(--mono);font-weight:900;font-size:clamp(13px,4.6vw,22px)}
.cell.glow{box-shadow:0 0 22px currentColor}
@keyframes winpop{0%{transform:scale(1)}45%{transform:scale(1.24)}100%{transform:scale(1)}}
@keyframes drop{0%{transform:translateY(-26px);opacity:.15}60%{transform:translateY(3px)}100%{transform:none;opacity:1}}
@keyframes pulse{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
/* idle shimmer on special tiles so the board feels alive at rest */
@keyframes idleGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}
.cell.orb,.cell.core,.cell.wild,.cell.scatter{animation:idleGlow 2.4s ease-in-out infinite}
.cell.h svg{animation:idleGlow 3.2s ease-in-out infinite}

/* controls */
.controls{flex:none;position:relative;z-index:2;width:min(94vw,440px);margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:4px 0 6px}
.dial{display:flex;gap:6px}
.dial button{flex:1;padding:9px 4px;border-radius:11px;border:1px solid var(--line);background:#0c1024cc;color:var(--mute);font-weight:800;font-size:12px;cursor:pointer;letter-spacing:.5px}
.dial button .sub{display:block;font-size:9px;color:#5a6196;font-weight:600;margin-top:2px}
.dial button.on{color:var(--text);background:linear-gradient(180deg,#1d2150,#11142a);box-shadow:0 0 16px var(--accent)66}
.dial button.on[data-mode=stabilize]{border-color:var(--green)} .dial button.on[data-mode=standard]{border-color:var(--accent2)} .dial button.on[data-mode=overdrive]{border-color:var(--red)}
.stake-row{display:flex;align-items:center;gap:8px}
.adj{width:48px;height:48px;border-radius:13px;border:1px solid var(--line);background:#0c1024cc;color:var(--text);font-size:23px;font-weight:800;cursor:pointer}
.stake{flex:1;text-align:center;background:#0c1024cc;border:1px solid var(--line);border-radius:13px;padding:7px}
.stake .lbl{font-size:10px;color:var(--mute);letter-spacing:2px}
.stake .val{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:6px}
.chips button{flex:1;padding:7px 0;border-radius:10px;border:1px solid var(--line);background:#0c1024cc;color:var(--text);font-weight:800;cursor:pointer}
.spin-row{display:flex;gap:8px}
.spin{flex:1;padding:16px;border:0;border-radius:15px;font-size:19px;font-weight:900;letter-spacing:2px;color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent2));cursor:pointer;box-shadow:0 8px 28px var(--accent)77}
.spin:active{transform:translateY(1px)}
.spin:disabled{opacity:.55;box-shadow:none}
.spin.stop{background:linear-gradient(90deg,#ff5470,#ff8a3c);box-shadow:0 8px 28px #ff547066}
.auto{flex:none;width:84px;border:1px solid var(--line);border-radius:15px;background:#0c1024cc;color:var(--text);font-weight:800;letter-spacing:1px;cursor:pointer;font-size:14px}
.auto.on{border-color:var(--accent2);color:var(--accent2)}
.auto-pop{background:#0c1024f2;border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:0 10px 30px #000a}
.auto-pop .ap-title{display:block;font-size:10px;letter-spacing:2px;color:var(--mute);text-align:center;margin-bottom:8px}
.auto-pop .ap-grid{display:flex;gap:6px}
.auto-pop .ap-grid button{flex:1;padding:11px 0;border-radius:10px;border:1px solid var(--line);background:#11162e;color:var(--text);font-weight:800;cursor:pointer}
.auto-pop .ap-grid button:active{background:var(--accent)}

.foot{flex:none;position:relative;z-index:2;display:flex;gap:8px;justify-content:center;color:var(--mute);font-size:11px;padding:6px}

/* Short phones: tighten the control stack + drop the footer so the board
   + SPIN always fit without scrolling. */
@media (max-height:740px){
  .jackbar{padding:3px 12px 4px}
  .jchip{font-size:10px;padding:3px 8px}
  .dial button{padding:7px 4px;font-size:11px}
  .adj{width:44px;height:44px;font-size:21px}
  .stake{padding:5px}.stake .val{font-size:20px}
  .chips button{padding:6px 0}
  .spin{padding:13px;font-size:18px}
  .foot{display:none}
}
@media (max-height:600px){
  .controls{gap:6px}
  .dial button .sub{display:none}
  .adj{width:40px;height:40px}
  .spin{padding:11px}
}

/* feature banner */
.banner{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#04060fcc;z-index:30}
.banner.on{display:flex;animation:fade .25s ease}
.banner .card{text-align:center;padding:30px 34px;border:1px solid var(--accent);border-radius:20px;
  background:linear-gradient(180deg,#16193a,#0a0d1c);box-shadow:0 0 70px var(--accent)77;max-width:84vw;animation:rise .35s ease}
.banner h2{margin:0 0 6px;font-size:28px;letter-spacing:1px;background:linear-gradient(90deg,var(--accent2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.banner p{margin:4px 0;color:var(--mute)}
.banner .big{font-size:36px;font-weight:900;color:var(--gold);font-family:var(--mono);text-shadow:0 0 24px var(--gold)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(16px) scale(.96);opacity:0}to{transform:none;opacity:1}}

/* ===== onboarding / how-to-play ===== */
.howto{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:#03040acc;backdrop-filter:blur(3px)}
.howto.on{display:flex}
.howto .sheet{width:min(92vw,440px);background:linear-gradient(180deg,#10142e,#080b18);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 20px 70px #000c}
.howto canvas{width:100%;height:230px;display:block;background:#070a18}
.howto .h-body{padding:16px 18px 18px}
.howto .h-title{font-size:20px;font-weight:900;letter-spacing:.5px;margin:0 0 4px;background:linear-gradient(90deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.howto .h-text{color:#c7cbe6;font-size:14px;line-height:1.5;min-height:42px;margin:0}
.howto .h-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 10px}
.howto .h-dots i{width:7px;height:7px;border-radius:50%;background:#2b3768;transition:.2s}
.howto .h-dots i.on{background:var(--accent2);width:18px;border-radius:4px}
.howto .h-nav{display:flex;gap:8px}
.howto .h-nav button{flex:1;padding:12px;border-radius:12px;border:1px solid var(--line);background:#0c1024;color:var(--text);font-weight:800;cursor:pointer}
.howto .h-nav button.primary{border:0;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 6px 22px var(--accent)66}

.drawer{position:fixed;right:0;top:0;bottom:0;width:min(92vw,360px);background:#11142a;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .25s;z-index:55;padding:16px;overflow:auto}
.drawer.on{transform:none}
.drawer h3{margin:0 0 10px}
.drawer dl{font-family:var(--mono);font-size:11px}
.drawer dt{color:var(--mute);margin-top:8px}.drawer dd{margin:2px 0;word-break:break-all}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#1a1d3aee;border:1px solid var(--line);padding:10px 16px;border-radius:11px;display:none;z-index:65}
.toast.on{display:block;animation:rise .2s ease}

/* large spin-error / claim-win overlay */
.errbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:#03040ad9;backdrop-filter:blur(4px);padding:22px}
.errbox.on{display:flex;animation:fade .2s ease}
.errcard{width:min(92vw,420px);text-align:center;padding:30px 26px;border-radius:20px;
  background:linear-gradient(180deg,#241019,#120a14);border:1px solid var(--red);
  box-shadow:0 0 60px #ff547066,0 20px 70px #000c;animation:rise .3s ease}
.erricon{font-size:54px;line-height:1;margin-bottom:8px}
.errtitle{margin:0 0 12px;font-size:26px;font-weight:900;letter-spacing:.4px;color:var(--red)}
.errmsg{margin:0 0 10px;font-size:17px;line-height:1.5;color:#f2e4e8;font-weight:600}
.errcode{margin:0 0 20px;font-family:var(--mono);font-size:11px;color:#8b93c0;word-break:break-all}
.errbtns{display:flex;gap:10px}
.errbtn{flex:1;padding:15px;border-radius:13px;border:1px solid var(--line);background:#16101c;color:var(--text);font-weight:800;font-size:16px;cursor:pointer}
.errbtn.primary{border:0;color:#fff;background:linear-gradient(90deg,#ff5470,#ff8a3c);box-shadow:0 6px 22px #ff547066}
.errbtn:disabled{opacity:.6}