/* ═══════════════════════════════════════════════════
   ROYAL WHEEL — wheel.css
   royalgame.fun · Wheel game styles
   Dark amber/gold theme — unique to Wheel
   ═══════════════════════════════════════════════════ */

*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html, body { width: 100%; min-height: 100%; overflow-x: hidden; touch-action: pan-y; }

/* ── TOKENS ── */
:root {
  --bg:    #080400;
  --gold:  #d97706; --gold2: #f59e0b; --gold3: #fcd34d; --gold4: #fef3c7;
  --amber: #b45309; --amber2: #92400e;
  --red:   #ef4444; --red2:   #f87171;
  --grn:   #22c55e; --grn2:   #4ade80;
  --sky:   #0ea5e9; --sky2:   #7dd3fc;
  --pur:   #7c3aed; --pur2:   #a78bfa;
  --near:  #f97316; --near2:  #fed7aa;

  /* segment colors by multiplier tier */
  --c-zero:  #dc2626;
  --c-small: #f97316;
  --c-mid:   #eab308;
  --c-good:  #22c55e;
  --c-big:   #0ea5e9;
  --c-huge:  #7c3aed;
  --c-mega:  #d97706;

  --r-xl: 22px; --r-lg: 14px; --r-md: 10px; --r-sm: 6px;
  --ease: cubic-bezier(.22,1,.36,1);
  --nav-h: 0px;
}

/* ── BODY & BACKGROUND ── */
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(217,119,6,.18) 0%, transparent 62%),
    radial-gradient(ellipse 55% 40% at 5%  92%,  rgba(217,119,6,.07) 0%, transparent 58%),
    radial-gradient(ellipse 50% 38% at 95% 88%,  rgba(124,58,237,.06) 0%, transparent 52%);
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  font-family: 'Rajdhani', sans-serif;
  color: #fff;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Felt texture */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient( 45deg, rgba(255,255,255,.01) 0, rgba(255,255,255,.01) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.01) 0, rgba(255,255,255,.01) 1px, transparent 1px, transparent 9px);
}

/* ── FLASH / FX LAYERS ── */
#flashEl {
  position: fixed; inset: 0; pointer-events: none; z-index: 600; opacity: 0;
}
#flashEl.on { animation: flashPop .55s ease-out forwards; }
@keyframes flashPop { 0%{opacity:0} 12%{opacity:1} 100%{opacity:0} }

#rain { position: fixed; inset: 0; pointer-events: none; z-index: 598; overflow: hidden; }
.rc  { position: absolute; top: -60px; animation: rcFall var(--d) ease-in forwards; }
@keyframes rcFall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(115vh) rotate(540deg) scale(.3); opacity: 0; }
}

#sparkC { position: fixed; inset: 0; pointer-events: none; z-index: 599; overflow: hidden; }
.sp     { position: fixed; pointer-events: none; animation: spFly var(--d,.4s) ease-out forwards; }
@keyframes spFly {
  0%   { transform: translate(0,0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--dx),var(--dy)) scale(0); opacity: 0; }
}

#edgeGlow { position: fixed; inset: 0; pointer-events: none; z-index: 595; opacity: 0; }
#edgeGlow.on   { animation: edgePop .9s ease-out forwards; }
#edgeGlow.gold { box-shadow: inset 0 0 100px rgba(217,119,6,.5); }
#edgeGlow.grn  { box-shadow: inset 0 0 80px  rgba(34,197,94,.4);  }
@keyframes edgePop { 0%{opacity:0} 20%{opacity:1} 80%{opacity:.8} 100%{opacity:0} }

@keyframes bodyShake {
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-7px)}
  35%{transform:translateX(7px)}   55%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}
body.shake { animation: bodyShake .38s ease-out; }

/* ── TOAST ── */
#toast {
  position: fixed; bottom: 13%; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: linear-gradient(145deg, #160a00, #1e1000);
  border: 1.5px solid rgba(217,119,6,.45);
  border-radius: 14px;
  padding: clamp(8px,2vw,12px) clamp(16px,4vw,24px);
  z-index: 620; pointer-events: none; opacity: 0;
  transition: opacity .22s, transform .22s;
  white-space: nowrap; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-t {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.5em, 1.4vw, .72em);
  color: var(--gold2); font-weight: 900; letter-spacing: 2px;
}

/* ── WIN OVERLAY ── */
#winOL {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  z-index: 630; pointer-events: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
#winOL.pop  { animation: wPop  .45s cubic-bezier(.175,.885,.32,1.275) forwards; }
#winOL.gone { animation: wGone .3s ease-in forwards; }
@keyframes wPop  { from{transform:translate(-50%,-50%) scale(0) rotate(-4deg)} to{transform:translate(-50%,-50%) scale(1)} }
@keyframes wGone { from{transform:translate(-50%,-50%) scale(1); opacity:1} to{transform:translate(-50%,-50%) scale(1.1); opacity:0} }

.wo-e { font-size: clamp(2em,8vw,3.2em); animation: bob .7s ease-in-out infinite alternate; }
@keyframes bob { from{transform:translateY(0)} to{transform:translateY(-7px)} }
.wo-t {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.2em,4.5vw,2.4em); font-weight: 900; letter-spacing: 3px;
  text-shadow: 0 0 22px currentColor, 0 0 45px currentColor;
}
.wo-a { font-family: 'Orbitron', sans-serif; font-size: clamp(.75em,2.3vw,1.2em); font-weight: 900; color: #fff; }
.wo-s { font-family: 'Rajdhani', sans-serif; font-size: clamp(.5em,1.4vw,.75em); color: rgba(255,255,255,.45); letter-spacing: 3px; }
.c-gold { color: var(--gold2); }
.c-grn  { color: var(--grn2);  }
.c-sky  { color: var(--sky2);  }
.c-near { color: var(--near2); }

/* ── RANK UP OVERLAY ── */
#rankUpOL {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  z-index: 631; pointer-events: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
#rankUpOL.pop  { animation: wPop  .5s cubic-bezier(.175,.885,.32,1.275) forwards; }
#rankUpOL.gone { animation: wGone .3s ease-in forwards; }
.ru-label {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.44em,1.3vw,.65em); font-weight: 900;
  color: var(--gold2); letter-spacing: 4px;
}
.ru-emj  { font-size: clamp(2.5em,9vw,4em); animation: bob .7s ease-in-out infinite alternate; }
.ru-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.2em,4.5vw,2.2em); font-weight: 900;
  color: var(--gold2); text-shadow: 0 0 30px var(--gold);
}

/* ── NEAR-MISS OVERLAY ── */
#nearOL {
  position: fixed; top: 42%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  z-index: 629; pointer-events: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(0,0,0,.8);
  padding: 18px 28px; border-radius: 18px;
  border: 2px solid rgba(249,115,22,.55);
  box-shadow: 0 0 40px rgba(249,115,22,.25);
}
#nearOL.pop  { animation: wPop  .35s cubic-bezier(.175,.885,.32,1.275) forwards; }
#nearOL.gone { animation: wGone .25s ease-in forwards; }
.nm-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.1em,4vw,2em); font-weight: 900;
  color: var(--near2); text-shadow: 0 0 20px var(--near); letter-spacing: 3px;
}
.nm-sub   { font-family: 'Orbitron', sans-serif; font-size: clamp(.55em,1.6vw,.85em); color: rgba(255,255,255,.6); letter-spacing: 2px; }
.nm-bonus { font-family: 'Orbitron', sans-serif; font-size: clamp(.65em,2vw,.9em); font-weight: 900; color: var(--near2); }

/* ── LAYOUT ── */
#app {
  position: relative; z-index: 1;
  width: 100%; max-width: 540px;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px,1.5vw,10px);
  padding: clamp(8px,2vw,12px) clamp(10px,2.5vw,14px) clamp(16px,4vw,24px);
}

/* ── HEADER ── */
.hdr { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; }

.logo {
  font-family: 'Cinzel', serif;
  font-size: clamp(.82em,3.8vw,1.3em); font-weight: 900;
  background: linear-gradient(135deg, var(--gold4), var(--gold2) 40%, var(--gold) 70%, var(--amber) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: clamp(1px,.4vw,2px); white-space: nowrap;
  animation: logoS 3.5s ease-in-out infinite; flex-shrink: 0;
}
@keyframes logoS { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.3)} }
.logo .wl {
  background: linear-gradient(135deg, #fff8d0, var(--gold3));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.hdr-r { display: flex; gap: 5px; align-items: center; }

.jp-box {
  display: flex; align-items: center; gap: 4px;
  background: rgba(249,115,22,.08); border: 1.5px solid rgba(249,115,22,.32);
  border-radius: 16px; padding: clamp(3px,.7vw,4px) clamp(6px,1.5vw,10px);
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  color: var(--near); font-size: clamp(.52em,1.5vw,.72em); white-space: nowrap;
  animation: jpGlow 2.5s ease-in-out infinite;
}
@keyframes jpGlow { 0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0)} 50%{box-shadow:0 0 10px 2px rgba(249,115,22,.25)} }

.coins-box {
  display: flex; align-items: center; gap: 5px;
  background: rgba(217,119,6,.1); border: 1.5px solid var(--gold);
  border-radius: 20px; padding: clamp(3px,.7vw,5px) clamp(7px,1.8vw,12px);
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  color: var(--gold2); font-size: clamp(.62em,1.8vw,.82em);
  transition: all .25s; white-space: nowrap;
}
.coins-box.fl { border-color: var(--red) !important; color: var(--red2) !important; }

.icon-btn {
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 8px; color: rgba(255,255,255,.5); font-size: .9em;
  width: clamp(28px,7vw,34px); height: clamp(28px,7vw,34px);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── TICKER ── */
.ticker-wrap { width: 100%; height: clamp(18px,3.5vw,24px); overflow: hidden; text-align: center; }
#ticker {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.4em,1.2vw,.58em); color: var(--gold2); letter-spacing: 2px;
  text-shadow: 0 0 8px var(--gold); line-height: clamp(18px,3.5vw,24px); transition: opacity .2s;
}

/* ── WHEEL ARENA ── */
.wheel-arena {
  width: 100%;
  background: radial-gradient(ellipse 130% 100% at 50% 0%, #1f1000 0%, #0d0800 40%, #060300 75%, #020100 100%);
  border-radius: clamp(16px,4vw,24px);
  border: 2px solid rgba(217,119,6,.28);
  padding: clamp(12px,3vw,18px);
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0,0,0,.6), 0 8px 40px rgba(0,0,0,.85);
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px,2vw,12px);
}
.wheel-arena::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 30%);
}
.arena-wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: 'Cinzel', serif; font-size: clamp(2em,7vw,3.5em); font-weight: 900;
  color: rgba(217,119,6,.025); letter-spacing: 8px; pointer-events: none; user-select: none; white-space: nowrap;
}

/* Result badge */
.result-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.3em,.75vw,.44em); font-weight: 900; letter-spacing: 3px;
  padding: 4px 14px; border-radius: 20px;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.35); min-width: 90px; text-align: center;
  transition: all .2s; align-self: center; position: relative; z-index: 1;
}
.result-badge.win  { background: rgba(22,163,74,.2);  border-color: var(--grn2);  color: var(--grn2);  box-shadow: 0 0 14px rgba(74,222,128,.4); }
.result-badge.lose { background: rgba(220,38,38,.18); border-color: var(--red2);  color: var(--red2); }
.result-badge.nm   { background: rgba(249,115,22,.2); border-color: var(--near); color: var(--near2); }

/* ── WHEEL CANVAS STAGE ── */
.wheel-stage {
  position: relative; z-index: 1;
  width: min(72vw, 300px); height: min(72vw, 300px); flex-shrink: 0;
}
/* 3-D perspective tilt — the visual differentiator */
.wheel-perspective {
  width: 100%; height: 100%;
  perspective: 700px;
  display: flex; align-items: center; justify-content: center;
}
.wheel-3d {
  width: 100%; height: 100%;
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  position: relative;
}
#wheelCanvas {
  width: 100%; height: 100%; border-radius: 50%;
  box-shadow:
    0 0 40px rgba(217,119,6,.3),
    0 0 80px rgba(217,119,6,.12),
    0 8px 24px rgba(0,0,0,.7);
  transition: box-shadow .3s, filter .3s;
  display: block;
}
#wheelCanvas.spinning {
  box-shadow:
    0 0 60px rgba(217,119,6,.55),
    0 0 120px rgba(217,119,6,.25),
    0 12px 32px rgba(0,0,0,.8);
  filter: brightness(1.08);
}

/* Pointer / needle */
.wheel-pointer {
  position: absolute; top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 42px solid var(--gold2);
  filter: drop-shadow(0 2px 8px rgba(217,119,6,.9));
  z-index: 20;
  transition: transform .06s ease-out;
}
.wheel-pointer::after {
  content: '';
  position: absolute; top: -42px; left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold4), var(--gold2));
  box-shadow: 0 0 8px rgba(217,119,6,.9);
}

/* Center hub cap */
.wheel-cap {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: clamp(30px,7.5vw,44px); height: clamp(30px,7.5vw,44px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a1800, #0a0500);
  border: 3px solid var(--gold);
  box-shadow: 0 0 16px rgba(217,119,6,.6), inset 0 2px 4px rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(.75em,2.2vw,1.1em); z-index: 21;
}

/* Arena info row */
.arena-info-row {
  display: flex; gap: clamp(14px,4vw,28px); justify-content: center;
  width: 100%; position: relative; z-index: 1;
}
.ai-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ai-label { font-family: 'Orbitron', sans-serif; font-size: clamp(.22em,.55vw,.32em); color: rgba(255,255,255,.26); letter-spacing: 2px; text-transform: uppercase; }
.ai-val   { font-family: 'Orbitron', sans-serif; font-size: clamp(.58em,1.8vw,.84em); font-weight: 900; color: var(--gold2); transition: color .2s; }
.ai-val.win-clr { color: var(--grn2); }

/* ── MULTIPLIER LEGEND ── */
.mult-legend {
  width: 100%; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  padding: 2px 0;
}
.ml-item {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  font-family: 'Orbitron', sans-serif; font-size: clamp(.28em,.7vw,.4em); font-weight: 900;
  white-space: nowrap; cursor: help; transition: background .15s;
}
.ml-item:hover { background: rgba(255,255,255,.09); }
.ml-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── CHIPS ── */
.chips-row {
  display: flex; align-items: center; gap: clamp(3px,.9vw,7px);
  flex-wrap: wrap; justify-content: center; width: 100%;
}
.chip {
  width: clamp(36px,7vw,42px); height: clamp(36px,7vw,42px);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-size: clamp(.32em,.82vw,.5em); font-weight: 900;
  transition: all .15s; position: relative; flex-shrink: 0;
  box-shadow: 0 3px 7px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.35);
}
.chip::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.22);
}
.chip:hover { transform: translateY(-3px) scale(1.1); }
.chip-1   { background: radial-gradient(circle at 35% 35%, #ff6666, #cc0000); color: #fff; }
.chip-5   { background: radial-gradient(circle at 35% 35%, #3399ff, #1155cc); color: #fff; }
.chip-10  { background: radial-gradient(circle at 35% 35%, #66cc66, #228822); color: #fff; }
.chip-25  { background: radial-gradient(circle at 35% 35%, #ff9933, #cc6600); color: #fff; }
.chip-100 { background: radial-gradient(circle at 35% 35%, #ffdd44, #cc9900); color: #333; }

/* ── CONTROLS PANEL ── */
.ctrl-panel {
  width: 100%;
  background: rgba(0,0,0,.2); border: 1px solid rgba(217,119,6,.14);
  border-radius: clamp(12px,3vw,18px);
  padding: clamp(10px,2.5vw,14px) clamp(12px,3vw,16px);
  display: flex; flex-direction: column; gap: clamp(10px,2.5vw,14px);
}
.ctrl-section { display: flex; flex-direction: column; gap: 6px; }

/* Risk buttons */
.seg-group  { display: flex; gap: 5px; width: 100%; }
.seg-btn {
  flex: 1; padding: clamp(6px,1.5vw,9px) 4px;
  border: 1.5px solid rgba(255,255,255,.1); border-radius: 9px;
  background: rgba(255,255,255,.03); color: rgba(255,255,255,.45);
  font-family: 'Rajdhani', sans-serif; font-size: clamp(.62em,1.8vw,.82em); font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.seg-btn:hover:not(.active) { border-color: rgba(255,255,255,.22); color: #ccc; }
.seg-btn.active.low  { border-color: var(--grn2); color: var(--grn2); background: rgba(34,197,94,.1);  }
.seg-btn.active.med  { border-color: var(--sky2); color: var(--sky2); background: rgba(14,165,233,.1); }
.seg-btn.active.high { border-color: var(--red2); color: var(--red2); background: rgba(239,68,68,.1);  }

/* Segment count buttons */
.segs-group { display: flex; gap: 4px; width: 100%; }
.segs-btn {
  flex: 1; padding: clamp(5px,1.2vw,7px) 3px;
  border: 1.5px solid rgba(255,255,255,.1); border-radius: 8px;
  background: rgba(255,255,255,.03); color: rgba(255,255,255,.4);
  font-family: 'Rajdhani', sans-serif; font-size: clamp(.58em,1.6vw,.76em); font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.segs-btn:hover:not(.active) { border-color: rgba(217,119,6,.3); color: rgba(255,255,255,.7); }
.segs-btn.active { border-color: var(--gold); color: var(--gold2); background: rgba(217,119,6,.1); }

.ctrl-row   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ctrl-label { font-family: 'Orbitron', sans-serif; font-size: clamp(.26em,.65vw,.38em); color: rgba(217,119,6,.55); letter-spacing: 2px; text-transform: uppercase; flex-shrink: 0; }
.ctrl-val   { font-family: 'Orbitron', sans-serif; font-size: clamp(.78em,2.5vw,1.1em); font-weight: 900; color: var(--gold2); text-shadow: 0 0 6px var(--gold); }
.ctrl-clear {
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.09);
  border-radius: 7px; color: rgba(255,255,255,.35);
  font-family: 'Orbitron', sans-serif; font-size: clamp(.32em,.8vw,.46em); font-weight: 900;
  cursor: pointer; padding: 4px 10px; letter-spacing: 1px; transition: all .15s;
}
.ctrl-clear:hover { border-color: var(--red); color: var(--red2); }

.potential-badge {
  font-family: 'Orbitron', sans-serif; font-size: clamp(.52em,1.5vw,.7em); font-weight: 900;
  padding: 6px 12px; border-radius: 10px;
  background: rgba(217,119,6,.08); border: 1.5px solid rgba(217,119,6,.25);
  color: var(--gold2); white-space: nowrap; flex-shrink: 0;
}

/* Spin button */
#spinBtn {
  width: 100%; padding: clamp(14px,3.8vw,18px); border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--gold3) 0%, var(--gold2) 55%, var(--amber) 100%);
  color: #0a0500;
  font-family: 'Orbitron', sans-serif; font-size: clamp(.7em,2.2vw,.92em);
  font-weight: 900; text-transform: uppercase; letter-spacing: 3px;
  cursor: pointer; transition: all .15s; position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(217,119,6,.35);
}
#spinBtn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, transparent 58%);
  pointer-events: none;
}
#spinBtn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 34px rgba(217,119,6,.6); }
#spinBtn:disabled { opacity: .36; cursor: not-allowed; transform: none; box-shadow: none; }
#spinBtn.pulse { animation: btnPulse 1.4s ease-in-out infinite; }
@keyframes btnPulse { 0%,100%{box-shadow:0 4px 24px rgba(217,119,6,.35)} 50%{box-shadow:0 4px 36px rgba(217,119,6,.7)} }

/* Side buttons row */
.side-row { display: flex; gap: 6px; width: 100%; }
.side-btn {
  flex: 1; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.09);
  border-radius: 10px; color: rgba(255,255,255,.38);
  font-family: 'Orbitron', sans-serif; font-size: clamp(.28em,.72vw,.42em); font-weight: 900;
  cursor: pointer; padding: clamp(8px,2vw,11px) 4px; letter-spacing: 1px;
  transition: all .15s; white-space: nowrap;
}
.side-btn:hover { border-color: var(--gold2); color: var(--gold2); }
.side-btn.auto-on {
  border-color: rgba(217,119,6,.6); color: var(--gold2); background: rgba(217,119,6,.1);
  animation: btnPulse 1.8s ease-in-out infinite;
}

/* ── STREAK BAND ── */
.streak-band {
  width: 100%; display: none;
  padding: clamp(6px,1.5vw,8px) clamp(10px,2.5vw,14px);
  background: rgba(255,148,18,.07); border: 1px solid rgba(249,115,22,.3);
  border-radius: 10px; animation: lzAppear .4s ease-out;
}
@keyframes lzAppear { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
.streak-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.streak-label { font-family: 'Orbitron', sans-serif; font-size: clamp(.28em,.7vw,.42em); color: rgba(249,115,22,.9); letter-spacing: 1.5px; }
.streak-val   { font-family: 'Orbitron', sans-serif; font-size: clamp(.6em,1.8vw,.85em); font-weight: 900; color: var(--near2); }
.streak-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.streak-bar-fill { height: 100%; background: linear-gradient(90deg, var(--near), var(--gold2)); border-radius: 2px; transition: width .4s ease; }

/* ── HISTORY PILLS ── */
.hist-section { width: 100%; background: rgba(0,0,0,.2); border: 1px solid rgba(217,119,6,.12); border-radius: 11px; overflow: hidden; }
.hist-head    { display: flex; align-items: center; justify-content: space-between; padding: clamp(6px,1.4vw,9px) clamp(9px,2.2vw,13px); }
.hist-title   { font-family: 'Orbitron', sans-serif; font-size: clamp(.28em,.72vw,.42em); color: rgba(217,119,6,.55); letter-spacing: 2px; }
.hist-body    { padding: 6px clamp(9px,2.2vw,13px) 10px; display: flex; flex-wrap: wrap; gap: clamp(3px,.7vw,5px); }
.hp           { font-family: 'Orbitron', sans-serif; font-size: clamp(.28em,.7vw,.42em); font-weight: 900; padding: 3px 8px; border-radius: 6px; border: 1px solid; animation: hpIn .2s ease-out; white-space: nowrap; }
@keyframes hpIn { from{transform:scale(0); opacity:0} to{transform:scale(1); opacity:1} }
.hp.hp-win  { background: rgba(22,163,74,.15);  border-color: rgba(74,222,128,.4);  color: var(--grn2);  }
.hp.hp-lose { background: rgba(220,38,38,.12);  border-color: rgba(248,113,113,.3); color: var(--red2);  }
.hp.hp-nm   { background: rgba(249,115,22,.15); border-color: rgba(249,115,22,.45); color: var(--near2); }
.hp.hp-big  { background: rgba(217,119,6,.18);  border-color: rgba(217,119,6,.55);  color: var(--gold2); box-shadow: 0 0 8px rgba(217,119,6,.3); }

/* ── STATS ── */
#statsBar { width: 100%; display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(4px,1vw,6px); }
.stat-box { background: rgba(255,255,255,.03); border: 1px solid rgba(217,119,6,.1); border-radius: clamp(7px,1.8vw,10px); padding: clamp(5px,1.2vw,8px) 4px; text-align: center; }
.sv { font-family: 'Orbitron', sans-serif; font-size: clamp(.6em,1.8vw,.88em); font-weight: 900; color: var(--gold2); }
.sk { font-family: 'Rajdhani', sans-serif; font-size: clamp(.38em,.95vw,.54em); color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .5px; margin-top: 1px; }

/* ── RANK BAR ── */
#rankBar {
  width: 100%; display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.024); border: 1px solid rgba(217,119,6,.1);
  border-radius: clamp(7px,1.8vw,10px);
  padding: clamp(5px,1.2vw,8px) clamp(9px,2.2vw,13px);
}
#rkEmoji { font-size: clamp(1em,3vw,1.35em); flex-shrink: 0; }
.rk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#rkName  { font-family: 'Cinzel', serif; font-size: clamp(.54em,1.5vw,.78em); font-weight: 700; color: var(--gold); }
#rkNext  { font-family: 'Rajdhani', sans-serif; font-size: clamp(.36em,.9vw,.52em); color: rgba(255,255,255,.3); white-space: nowrap; }
#rkProg  { height: 4px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
#rkFill  { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold3)); border-radius: 2px; transition: width .6s ease; width: 0%; }

/* ── DAILY GOALS ── */
#goalsBar { width: 100%; background: rgba(0,0,0,.22); border: 1px solid rgba(217,119,6,.1); border-radius: 11px; padding: clamp(6px,1.4vw,9px) clamp(9px,2.2vw,13px); }
.goals-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(4px,1vw,6px); }
.goal-item { background: rgba(255,255,255,.03); border: 1px solid rgba(217,119,6,.1); border-radius: 8px; padding: clamp(5px,1.2vw,7px) clamp(4px,1vw,6px); text-align: center; transition: all .3s; }
.goal-item.done { border-color: var(--gold2); background: rgba(217,119,6,.1); }
.gi-icon { font-size: clamp(.8em,2.2vw,1.2em); }
.gi-txt  { font-family: 'Rajdhani', sans-serif; font-size: clamp(.35em,.88vw,.52em); color: rgba(255,255,255,.5); margin: 2px 0; line-height: 1.2; }
.goal-item.done .gi-txt { color: var(--gold2); }
.gi-bar  { height: 3px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.gi-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold3)); border-radius: 2px; transition: width .5s ease; }
@keyframes goalPop { 0%{transform:scale(1)} 30%{transform:scale(1.08)} 100%{transform:scale(1)} }
.goal-pop { animation: goalPop .4s ease; }

/* ── PR BAR ── */
.pr-bar { width: 100%; display: flex; gap: clamp(5px,1.2vw,8px); flex-wrap: wrap; }
.pr-box {
  flex: 1; min-width: clamp(72px,16vw,100px);
  background: rgba(0,0,0,.2); border: 1px solid rgba(217,119,6,.12);
  border-radius: 9px; padding: clamp(5px,1.2vw,7px); text-align: center;
  transition: border-color .3s, background .3s;
}
.pr-box.new-pr { border-color: var(--gold2); background: rgba(217,119,6,.1); animation: prFlash .4s ease-out 3; }
@keyframes prFlash { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 16px rgba(217,119,6,.5)} }
.pr-val { font-family: 'Orbitron', sans-serif; font-size: clamp(.6em,1.8vw,.9em); font-weight: 900; color: var(--gold2); }
.pr-lbl { font-family: 'Rajdhani', sans-serif; font-size: clamp(.34em,.85vw,.5em); color: rgba(255,255,255,.28); text-transform: uppercase; letter-spacing: .5px; margin-top: 1px; }

/* ── WEEKLY PANEL ── */
.weekly-panel {
  width: 100%;
  background: linear-gradient(135deg, rgba(217,119,6,.07), rgba(124,58,237,.04));
  border: 1.5px solid rgba(217,119,6,.22); border-radius: 11px;
  padding: clamp(8px,2vw,12px) clamp(10px,2.5vw,14px);
  position: relative; overflow: hidden;
}
.weekly-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.01) 0, rgba(255,255,255,.01) 1px, transparent 1px, transparent 14px);
}
.wk-head   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wk-title  { font-family: 'Orbitron', sans-serif; font-size: clamp(.3em,.75vw,.44em); color: var(--gold2); letter-spacing: 2px; font-weight: 900; }
.wk-timer  { font-family: 'Orbitron', sans-serif; font-size: clamp(.26em,.65vw,.38em); color: rgba(217,119,6,.5); letter-spacing: 1px; }
.wk-goals  { display: flex; flex-direction: column; gap: clamp(5px,1.2vw,7px); }
.wk-goal   { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.18); border: 1px solid rgba(217,119,6,.1); border-radius: 8px; padding: clamp(5px,1.2vw,7px) clamp(8px,2vw,11px); transition: all .3s; }
.wk-goal.done { border-color: var(--gold2); background: rgba(217,119,6,.08); }
.wk-goal.done .wk-g-txt { color: var(--gold2); }
.wk-g-icon   { font-size: clamp(.9em,2.5vw,1.15em); flex-shrink: 0; }
.wk-g-right  { flex: 1; min-width: 0; }
.wk-g-txt    { font-family: 'Rajdhani', sans-serif; font-size: clamp(.38em,.95vw,.55em); color: rgba(255,255,255,.55); line-height: 1.2; margin-bottom: 3px; }
.wk-g-bar    { height: 3px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.wk-g-fill   { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold3)); border-radius: 2px; transition: width .5s ease; }
.wk-g-reward { font-family: 'Orbitron', sans-serif; font-size: clamp(.24em,.6vw,.36em); color: var(--gold); flex-shrink: 0; white-space: nowrap; }

/* ── REFILL ── */
#refillBnr  { width: 100%; display: none; }
#refillBtn  {
  width: 100%; padding: clamp(8px,2vw,11px);
  border: 1.5px solid var(--gold); border-radius: 9px;
  background: rgba(217,119,6,.07); color: var(--gold);
  font-family: 'Orbitron', sans-serif; font-size: clamp(.55em,1.5vw,.72em); font-weight: 900;
  cursor: pointer; letter-spacing: 1px; transition: all .15s;
}
#refillBtn:hover { background: rgba(217,119,6,.15); }

/* ── ACCESSIBILITY ── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rc, .sp { display: none !important; }
  #flashEl, #edgeGlow { display: none !important; }
  body.shake { animation: none !important; }
}

/* ── LANDSCAPE COMPACT ── */
@media (orientation: landscape) and (max-height: 520px) {
  #app { flex-direction: row; flex-wrap: wrap; max-width: 100%; gap: 5px; padding: 4px 8px 8px; }
  .wheel-arena { width: min(44vw, 270px); flex-shrink: 0; }
  .ctrl-panel, .chips-row, .side-row, .hist-section, #statsBar,
  #rankBar, #refillBnr, .streak-band, #goalsBar, .pr-bar, .weekly-panel,
  .ticker-wrap, .hdr, .mult-legend { width: calc(100% - min(44vw, 270px) - 12px); }
}

/* ── NARROW SCREENS ── */
@media (max-width: 360px) {
  .logo { font-size: .7em; }
  .jp-box { display: none; }
}
@media (max-height: 640px) {
  #app { gap: 3px; padding-top: 4px; }
  .stat-box { padding: 3px; }
  .sv { font-size: .58em; }
  .sk { font-size: .36em; }
}