:root{
  --bg:#05060c; --bg2:#0a0e1a;
  --green:#00ffa3; --cyan:#00e0ff; --pink:#ff4d6d; --red:#ff2d55;
  --gold:#ffd54a; --purple:#a06bff;
  --ink:#dff7ee; --dim:#7f8aa3;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; background:#000; color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif; overflow:hidden;
  user-select:none; -webkit-user-select:none; touch-action:manipulation; }

#app{
  position:relative; width:100%; max-width:480px; height:100%;
  margin:0 auto; overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%, #0d1322, var(--bg));
}

/* ---------------- Playfield ---------------- */
#game{ position:absolute; inset:0; }
#chart{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---------------- Top HUD ---------------- */
#hud-top{ position:absolute; top:0; left:0; right:0; padding:10px 12px 6px;
  z-index:5; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,6,12,.85), rgba(5,6,12,0)); }
.hud-row1{ display:flex; justify-content:space-between; align-items:flex-start; }
.hud-score .label{ font-size:10px; letter-spacing:2px; color:var(--dim); }
#score{ font-size:26px; font-weight:900; color:#fff;
  text-shadow:0 0 14px var(--green), 0 0 4px var(--green); font-variant-numeric:tabular-nums; }
.hud-right{ display:flex; gap:6px; align-items:center; pointer-events:auto; }
.pill{ font-size:11px; font-weight:800; padding:4px 9px; border-radius:20px;
  background:#121a2b; border:1px solid #233; color:var(--cyan); letter-spacing:1px; }
.pill.mult{ color:var(--gold); border-color:#5a4a18; box-shadow:0 0 10px #ffd54a30; }
.mute{ background:#121a2b; border:1px solid #233; color:#fff; border-radius:50%;
  width:30px; height:30px; font-size:14px; cursor:pointer; }
.hud-row2{ margin-top:8px; }
#hpwrap{ position:relative; height:16px; border-radius:9px; overflow:hidden;
  background:#15202f; border:1px solid #243247; box-shadow:inset 0 0 8px #000; }
#hpfill{ height:100%; width:100%; border-radius:9px;
  background:linear-gradient(90deg,#00ffa3,#00e0ff);
  box-shadow:0 0 14px var(--green); transition:width .12s linear; }
#hplabel{ position:absolute; top:0; right:8px; line-height:16px; font-size:11px;
  font-weight:800; color:#02160f; mix-blend-mode:screen; }
#fever-banner{ margin-top:7px; text-align:center; font-weight:900; letter-spacing:3px;
  color:#fff; font-size:15px; text-shadow:0 0 16px var(--gold), 0 0 6px var(--pink);
  animation:feverpulse .5s infinite alternate; }
@keyframes feverpulse{ from{ transform:scale(1); filter:hue-rotate(0) } to{ transform:scale(1.06); filter:hue-rotate(40deg) } }

/* objective (stage quota) */
.hud-row3{ margin-top:8px; }
#obj-label{ display:flex; justify-content:space-between; font-size:11px; margin-bottom:3px; }
#obj-stage{ color:var(--gold); letter-spacing:1px; }
#obj-text{ color:var(--dim); }
#obj-wrap{ height:9px; border-radius:6px; background:#15202f; border:1px solid #243247; overflow:hidden; }
#obj-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--gold),#ff8a00);
  box-shadow:0 0 10px var(--gold); transition:width .15s linear; }
#rush-banner{ margin-top:7px; text-align:center; font-weight:900; letter-spacing:3px; font-size:17px;
  color:#fff; text-shadow:0 0 18px #fff,0 0 8px var(--gold);
  animation:rushpulse .35s infinite alternate; }
@keyframes rushpulse{ from{ transform:scale(1); filter:hue-rotate(0) } to{ transform:scale(1.1); filter:hue-rotate(120deg) } }

/* ---------------- Positions ---------------- */
#positions{ position:absolute; left:8px; top:150px; z-index:4; display:flex;
  flex-direction:column; gap:4px; max-width:46%; }
.pos{ pointer-events:auto; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; padding:4px 8px; border-radius:8px;
  background:rgba(8,12,22,.78); border:1px solid #2a3a52; backdrop-filter:blur(2px); }
.pos .dir{ font-size:13px; }
.pos.long{ border-color:#0c6; } .pos.short{ border-color:#c36; }
.pos .pnl.up{ color:var(--green); } .pos .pnl.down{ color:var(--pink); }
.pos .x{ color:var(--dim); margin-left:2px; }

/* ---------------- Toast ---------------- */
#toast{ position:absolute; left:0; right:0; top:46%; z-index:8; text-align:center;
  pointer-events:none; }
.toast-item{ display:inline-block; font-weight:900; font-size:22px; padding:8px 18px;
  border-radius:14px; background:rgba(8,12,22,.8); color:#fff;
  border:1px solid var(--gold); box-shadow:0 0 24px var(--gold);
  animation:toastpop 1.2s ease forwards; }
@keyframes toastpop{ 0%{ transform:translateY(10px) scale(.7); opacity:0 }
  18%{ transform:translateY(0) scale(1.1); opacity:1 }
  70%{ transform:translateY(0) scale(1); opacity:1 }
  100%{ transform:translateY(-26px) scale(.9); opacity:0 } }

/* ---------------- Controls ---------------- */
#controls{ position:absolute; left:0; right:0; bottom:0; z-index:6;
  padding:8px 12px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, rgba(5,6,12,.92), rgba(5,6,12,0)); }
#lots{ display:flex; gap:8px; justify-content:center; margin-bottom:8px; }
.lot{ flex:0 0 auto; min-width:54px; padding:6px 0; border-radius:10px; font-weight:900;
  font-size:14px; background:#101725; border:1px solid #243247; color:var(--dim);
  cursor:pointer; }
.lot.active{ color:#04121d; background:linear-gradient(180deg,var(--cyan),#0b8bd6);
  border-color:var(--cyan); box-shadow:0 0 14px var(--cyan); }
#trade-btns{ display:flex; gap:8px; }
.trade{ flex:1; padding:13px 0; border-radius:14px; font-weight:900; font-size:17px;
  border:none; cursor:pointer; color:#04130d; }
.trade.long{ background:linear-gradient(180deg,#00ffa3,#00b876);
  box-shadow:0 0 20px #00ffa3a0; }
.trade.short{ background:linear-gradient(180deg,#ff5d7a,#d11e45); color:#fff;
  box-shadow:0 0 20px #ff4d6da0; }
.trade.closeall{ flex:0 0 92px; background:#1a2435; color:#cfe; font-size:14px;
  border:1px solid #2f405a; box-shadow:none; }
.trade:active{ transform:translateY(2px) scale(.98); }

/* ---------------- Overlays ---------------- */
.overlay{ position:absolute; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  background:radial-gradient(120% 80% at 50% 30%, rgba(10,16,30,.86), rgba(3,4,9,.96));
  backdrop-filter:blur(3px); }
.overlay.hidden,.hidden{ display:none !important; }

.title-glow{ font-size:54px; font-weight:900; line-height:.95; letter-spacing:2px;
  color:#fff; text-shadow:0 0 30px var(--green),0 0 10px var(--cyan); }
.subtitle-jp{ margin-top:8px; font-size:16px; letter-spacing:6px; color:var(--cyan); }
.howto{ margin:22px 10px; font-size:13px; line-height:1.9; color:#bcd; }
.howto b{ color:#fff; }
.hs-line{ font-size:14px; color:var(--gold); margin-bottom:18px; }
.big-btn{ padding:15px 34px; border-radius:40px; font-size:18px; font-weight:900;
  border:none; cursor:pointer; color:#04130d;
  background:linear-gradient(180deg,var(--green),#00b876);
  box-shadow:0 0 26px #00ffa3a0; }
.big-btn:active{ transform:scale(.97); }
.big-btn.ghost{ background:#16203200; color:#cfe; border:1px solid #2f405a; box-shadow:none; }
.credit{ position:absolute; bottom:14px; font-size:10px; color:#456; letter-spacing:1px; }

/* Gacha */
.gacha-title{ font-size:24px; font-weight:900; color:var(--gold);
  text-shadow:0 0 18px var(--gold); margin-bottom:20px; letter-spacing:2px; }
#gacha-reel{ width:160px; height:160px; border-radius:24px; background:#0c1322;
  border:2px solid var(--gold); box-shadow:0 0 30px var(--gold);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
#gacha-item{ font-size:74px; }
#gacha-result{ margin-top:18px; font-size:18px; font-weight:800; color:#fff; }

/* Game over */
.over-title{ font-size:30px; font-weight:900; color:var(--pink);
  text-shadow:0 0 20px var(--pink); letter-spacing:4px; }
.over-rank{ margin-top:6px; font-size:40px; font-weight:900; color:var(--gold);
  text-shadow:0 0 24px var(--gold); }
.over-score-label{ margin-top:14px; font-size:12px; letter-spacing:3px; color:var(--dim); }
.over-score{ font-size:46px; font-weight:900; color:#fff;
  text-shadow:0 0 22px var(--green); font-variant-numeric:tabular-nums; }
.over-high{ margin-top:6px; font-size:14px; color:var(--cyan); }
#new-high{ color:var(--gold); font-weight:900; }
.over-stats{ margin:14px 0; font-size:12px; color:#9ab; line-height:1.8; }
.big-btn.continue{ background:linear-gradient(180deg,#ff8bd0,#ff4d9e); color:#2a0016;
  box-shadow:0 0 24px #ff4d9ea0; margin-bottom:14px; font-size:16px; padding:13px 24px; }
.over-btns{ display:flex; gap:10px; }
.over-btns .big-btn{ font-size:15px; padding:12px 20px; }

/* big center toast (jackpot / fever / rush) */
#bigtoast{ position:absolute; left:0; right:0; top:38%; z-index:9; text-align:center; pointer-events:none; }
.bigtoast-item{ display:inline-block; font-weight:900; font-size:30px; padding:10px 22px; border-radius:16px;
  background:rgba(8,12,22,.72); color:#fff; border:2px solid var(--gold);
  box-shadow:0 0 34px var(--gold); text-shadow:0 0 16px #fff;
  animation:bigpop 1.5s ease forwards; }
@keyframes bigpop{ 0%{ transform:scale(.5) rotate(-6deg); opacity:0 }
  16%{ transform:scale(1.18) rotate(2deg); opacity:1 }
  72%{ transform:scale(1) rotate(0); opacity:1 }
  100%{ transform:scale(.95) translateY(-20px); opacity:0 } }

.pill.mult.hot{ color:#fff; border-color:var(--pink);
  background:linear-gradient(90deg,#ff4d6d,#ffd54a); box-shadow:0 0 16px var(--pink);
  animation:hotpulse .4s infinite alternate; }
@keyframes hotpulse{ from{ transform:scale(1) } to{ transform:scale(1.12) } }

/* jackpot cash-out button */
#cashout{ display:block; width:100%; margin-bottom:8px; padding:13px 0; border:none; cursor:pointer;
  border-radius:14px; font-size:17px; font-weight:900; color:#2a1600;
  background:linear-gradient(180deg,#ffe680,#ffb300);
  box-shadow:0 0 24px var(--gold); animation:cashpulse .5s infinite alternate; }
#cashout b{ font-size:19px; }
#cashout:active{ transform:scale(.98); }
@keyframes cashpulse{ from{ box-shadow:0 0 14px var(--gold); transform:scale(1) }
  to{ box-shadow:0 0 30px var(--gold),0 0 50px #ff8a00; transform:scale(1.02) } }

/* toolbar (drawing tools) */
#toolbar{ display:flex; gap:5px; justify-content:center; margin-bottom:6px; flex-wrap:nowrap; }
.tool{ flex:1 1 auto; min-width:0; padding:6px 2px; border-radius:9px; font-weight:800; font-size:11px;
  background:#0e1626; border:1px solid #243247; color:#9fb4d0; cursor:pointer; white-space:nowrap; }
.tool.active{ color:#04121d; background:linear-gradient(180deg,#ffd54a,#ff8a00); border-color:var(--gold);
  box-shadow:0 0 12px var(--gold); }
.tool.erase.active{ background:linear-gradient(180deg,#ff7a90,#d11e45); color:#fff; box-shadow:0 0 12px var(--pink); }
#btn-undo, #btn-cleardraw{ flex:0 0 36px; }

/* inventory slots */
#inventory{ display:flex; gap:8px; justify-content:center; margin-bottom:8px; }
.slot{ flex:0 0 52px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:26px; cursor:pointer; border:1px dashed #2c3a52; background:#0c1322; }
.slot.empty{ color:#1f2a3d; }
.slot.empty::after{ content:"＋"; color:#28384f; font-size:20px; }
.slot.filled{ border-style:solid; background:#10182a; }
.slot.filled:active{ transform:scale(.92); }

/* RUSH background frenzy */
#app.rush{ animation:rushbg .8s linear infinite; }
@keyframes rushbg{ 0%{ filter:saturate(1.5) hue-rotate(0) } 100%{ filter:saturate(1.6) hue-rotate(360deg) } }
#app.rush::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 40%, rgba(255,213,74,.05) 0deg, rgba(255,77,109,.05) 20deg, rgba(0,224,255,.05) 40deg);
  animation:rushspin 3s linear infinite; }
@keyframes rushspin{ to{ transform:rotate(360deg) } }

/* low-hp red vignette */
#app.danger::after{ content:""; position:absolute; inset:0; z-index:9; pointer-events:none;
  box-shadow:inset 0 0 90px 30px rgba(255,45,85,.55);
  animation:dangerpulse .7s infinite alternate; }
@keyframes dangerpulse{ from{ opacity:.4 } to{ opacity:.95 } }

/* combo -> item progress line */
#combo-info{ margin-top:6px; text-align:center; font-size:12px; font-weight:800;
  color:#cfe3ff; letter-spacing:.5px; }
#combo-info.hot{ color:#ffd54a; text-shadow:0 0 10px var(--gold);
  animation:hotpulse .4s infinite alternate; }
/* cash-out sits in the action zone (above LONG/SHORT) — never center */
#cashout{ margin:0 0 8px; }