:root{
  --bg:#0a0e14;
  --panel:#121826;
  --panel2:#0f1420;
  --line:#1f2a3a;
  --txt:#cdd6e4;
  --dim:#7c8aa0;
  --green:#22d37b;
  --green-d:#0e9c57;
  --red:#ff5d6c;
  --gold:#f5c451;
  --blue:#4ea3ff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 600px at 70% -10%,#15243b 0,var(--bg) 60%);
  color:var(--txt);
  font:14px/1.45 "Segoe UI",system-ui,sans-serif;
  display:flex;flex-direction:column;min-height:100vh;
  touch-action:manipulation;                 /* kill iOS double-tap-to-zoom (keeps pinch-zoom) */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
b{font-variant-numeric:tabular-nums}

/* ---- top bar ---- */
#topbar{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);
  position:fixed;top:0;left:0;right:0;width:100%;z-index:30;
}
.brand{font-weight:800;letter-spacing:1px;color:var(--gold);font-size:18px}
.ticker{display:flex;gap:22px;flex:1;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;line-height:1.15}
.stat label{font-size:10px;letter-spacing:1px;color:var(--dim)}
.stat b{font-size:17px;color:#fff;font-variant-numeric:tabular-nums}
.stat small{color:var(--gold);font-size:11px}
.actions{display:flex;gap:8px}

button{
  font:inherit;cursor:pointer;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);padding:7px 12px;border-radius:7px;
  transition:.12s;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
button:hover:not(:disabled){border-color:var(--green-d);color:#fff}
button:disabled{opacity:.4;cursor:not-allowed}
button.danger:hover{border-color:var(--red);color:var(--red)}
#resetBtn{border-color:var(--red);color:var(--red);background:rgba(255,93,108,.08)}
#resetBtn:hover{background:var(--red);color:#fff;border-color:var(--red)}

main{display:flex;gap:18px;padding:18px;flex:1;align-items:flex-start;flex-wrap:wrap}
#floor{flex:1 1 520px;min-width:340px;display:flex;flex-direction:column;gap:16px}
#panels{flex:1 1 420px;min-width:320px;display:flex;flex-direction:column;gap:16px}

/* ---- market ---- */
.market-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.market-head{display:flex;align-items:baseline;gap:12px;font-size:12px;letter-spacing:1px;color:var(--dim)}
.market-head b{font-size:22px;color:#fff;margin-left:auto}
.mood{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
.mood.up{background:rgba(34,211,123,.15);color:var(--green)}
.mood.down{background:rgba(255,93,108,.15);color:var(--red)}
.mood.flat{background:#1b2433;color:var(--dim)}
#chart{width:100%;height:120px;margin-top:8px;display:block}
.quantum-bar{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
#quantumBtn{background:linear-gradient(180deg,#3a2660,#231640);border:1px solid #7a5cff;
  color:#fff;font-weight:700;letter-spacing:1px;padding:7px 14px;font-size:12px}
#quantumBtn:not(:disabled):hover{filter:brightness(1.25);border-color:#a98aff;color:#fff}
#quantumBtn small{font-weight:500;color:#c8b7ff;margin-left:6px;font-size:11px}
.quantum-bar + .quantum-bar{margin-top:4px}
#quantumCoreBtn{background:linear-gradient(180deg,#16404a,#0e2a32);border:1px solid #2fd6c4;
  color:#fff;font-weight:700;letter-spacing:1px;padding:7px 14px;font-size:12px}
#quantumCoreBtn:not(:disabled):hover{filter:brightness(1.25);border-color:#6ff0e2;color:#fff}
#quantumCoreBtn small{font-weight:500;color:#9bf0e6;margin-left:6px;font-size:11px}
.quantum-hint{font-size:11px;color:var(--dim)}
.market-note{font-size:11px;color:var(--dim);margin-top:6px}

/* ---- click ---- */
.click-area{position:relative;display:flex;justify-content:center}
.trade-btn{
  width:100%;padding:26px;border-radius:14px;border:1px solid var(--green-d);
  background:linear-gradient(180deg,#143d2b,#0d2a1e);color:#fff;
  display:flex;flex-direction:column;gap:4px;align-items:center;
  box-shadow:0 0 0 0 rgba(34,211,123,.5);
}
.trade-btn:hover{border-color:var(--green);background:linear-gradient(180deg,#1a5138,#103626)}
.trade-btn:active{transform:scale(.985)}
.trade-btn .big{font-size:22px;font-weight:800;letter-spacing:2px}
.trade-btn .sub{font-size:12px;color:var(--green)}
#floaters{position:absolute;inset:0;pointer-events:none;overflow:visible}
.floater{position:absolute;left:50%;top:30%;color:var(--green);font-weight:800;
  font-size:17px;animation:rise 1s ease-out forwards}
@keyframes rise{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-70px)}}

.run-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.run-stats div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
.run-stats label{display:block;font-size:10px;letter-spacing:1px;color:var(--dim)}
.run-stats b{font-size:15px;color:#fff}

.prestige-box{background:linear-gradient(180deg,#2a2238,#1a1626);
  border:1px solid #3a2f52;border-radius:12px;padding:14px;display:flex;
  gap:14px;align-items:center;flex-wrap:wrap}
.prestige-info{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.prestige-info .gain{color:var(--dim);font-size:12px}
.prestige-info .gain b{color:var(--gold)}
#prestigeBtn{background:linear-gradient(180deg,#7a5cff,#5a3fd6);border-color:#6b4fe0;
  color:#fff;font-weight:700;padding:12px 20px;letter-spacing:1px}
#prestigeBtn:hover:not(:disabled){filter:brightness(1.12);color:#fff}

/* ---- panels ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel-head h2{font-size:13px;letter-spacing:2px;color:var(--dim);font-weight:700}
.buyqty{display:flex;gap:4px}
.buyqty button{padding:4px 9px;font-size:12px;border-radius:6px}
.buyqty button.on{border-color:var(--green);color:var(--green)}
.list{display:flex;flex-direction:column;gap:8px}

.item{
  display:flex;align-items:center;gap:12px;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  cursor:pointer;transition:.12s;text-align:left;width:100%;
}
.item:hover:not(:disabled){border-color:var(--green-d)}
.item:disabled{cursor:not-allowed;opacity:.55}
.item.locked{opacity:.4;cursor:default;filter:grayscale(1)}
.item .ic{font-size:22px;width:30px;text-align:center}
.item .body{flex:1;min-width:0}
.item .name{font-weight:700;color:#fff;display:flex;justify-content:space-between;gap:8px}
.item .name .cnt{color:var(--gold);font-size:12px}
.item .desc{font-size:11px;color:var(--dim)}
.item .cost{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.item .cost.ok{color:var(--green)}
.item .cost.no{color:var(--red)}
.item.up .ic{color:var(--blue)}
.item .mile{margin-top:6px}
.item .mile .tiers{display:flex;gap:10px;font-size:10px;color:var(--dim);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.item .mile .tiers .t.done{color:var(--gold)}
.item .mile .tiers .t.next{color:var(--green)}
.item .mile .mbar{height:4px;background:#16202f;border-radius:3px;
  overflow:hidden;margin-top:3px}
.item .mile .mbar i{display:block;height:100%;
  background:linear-gradient(90deg,var(--green-d),var(--green))}
.item .mile.maxed .mbar i{background:linear-gradient(90deg,var(--gold),var(--green))}
.item .mile .mcap{font-size:10px;color:var(--dim);margin-top:2px}
.item .mile.maxed .mcap{color:var(--gold)}

.perks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.perk{font-size:11px;background:#102032;border:1px solid #1d3a52;color:var(--blue);
  padding:3px 8px;border-radius:6px}

footer{padding:10px 20px;color:var(--dim);font-size:11px;border-top:1px solid var(--line);text-align:center}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(3,6,12,.78);display:flex;
  align-items:center;justify-content:center;z-index:50}
.modal.hidden{display:none}
.panel.hidden{display:none}
.modal-card{background:var(--panel);border:1px solid var(--green-d);border-radius:14px;
  padding:26px;max-width:420px;text-align:center}
.modal-card h3{margin-bottom:10px;color:var(--green)}
.modal-card p{color:var(--txt);margin-bottom:18px}
.modal-card p b{color:var(--gold)}
.modal-card button{background:var(--green-d);border-color:var(--green);color:#fff;
  font-weight:700;padding:10px 22px}

/* ---- news bar ---- */
#newsbar{display:flex;align-items:center;gap:12px;padding:8px 20px;
  background:#0d1320;border-bottom:1px solid var(--line);font-size:13px;overflow:hidden}
.news-tag{background:var(--gold);color:#1a1300;font-weight:800;font-size:10px;
  letter-spacing:1px;padding:2px 7px;border-radius:5px}
#newsText{color:var(--txt);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buff-chips{display:flex;gap:6px;flex-shrink:0}
.bchip{font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;font-variant-numeric:tabular-nums}
.bchip.g{background:rgba(34,211,123,.16);color:var(--green)}
.bchip.b{background:rgba(255,93,108,.16);color:var(--red)}

/* ---- trading desk ---- */
.trade-desk{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.td-row{display:flex;align-items:center;gap:12px}
.td-lbl{font-size:11px;letter-spacing:1px;color:var(--dim);width:92px}
.td-trig{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;margin-left:auto}
.td-risk{font-size:11px}
.td-risk b{color:var(--red);font-variant-numeric:tabular-nums}
.streak-chip{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:1px;
  padding:4px 10px;border-radius:6px;
  background:linear-gradient(180deg,rgba(255,176,0,.18),rgba(255,120,0,.10));
  border:1px solid rgba(255,176,0,.45);color:#ffcf6b}
.seg{display:flex;gap:4px}
.seg button{padding:5px 10px;font-size:12px;border-radius:6px}
.seg button.on{border-color:var(--gold);color:var(--gold)}
.td-actions{display:flex;gap:8px}
.td-actions button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.td-actions button small{font-size:10px;font-weight:400;opacity:.85}
.td-open{background:linear-gradient(180deg,#143d2b,#0d2a1e);border-color:var(--green-d);
  color:#fff;font-weight:700;padding:11px;letter-spacing:.5px}
.td-open:hover:not(:disabled){border-color:var(--green);color:#fff}
.td-short{background:linear-gradient(180deg,#3a2330,#2a1620);border-color:var(--red);
  color:#fff;font-weight:700;padding:11px;letter-spacing:.5px}
.td-short:hover:not(:disabled){filter:brightness(1.15);color:#fff}
.pos-side{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:1px;
  padding:4px 12px;border-radius:6px}
.pos-side.long{background:rgba(34,211,123,.16);color:var(--green)}
.pos-side.short{background:rgba(255,93,108,.16);color:var(--red)}
.td-close{background:linear-gradient(180deg,#3a2330,#2a1620);border-color:var(--red);
  color:#fff;font-weight:700;padding:11px;letter-spacing:.5px}
.td-close:hover{filter:brightness(1.15);color:#fff}
.td-note{font-size:11px;color:var(--dim)}
.td-note b{color:var(--red)}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pos-grid div{background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:8px;text-align:center}
.pos-grid label{display:block;font-size:9px;letter-spacing:1px;color:var(--dim)}
.pos-grid b{font-size:14px;color:#fff;font-variant-numeric:tabular-nums}
.pos-grid b.pos{color:var(--green)} .pos-grid b.neg{color:var(--red)}
.margin-bar{height:8px;background:#1b2433;border-radius:4px;overflow:hidden}
.margin-bar i{display:block;height:100%;transition:width .25s,background .25s}

/* ---- combo meter ---- */
.combo{height:5px;background:#16202f;border-radius:3px;margin-top:8px;overflow:hidden}
.combo i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--green));transition:width .12s linear}

/* ---- golden claimable badge ---- */
#golden{position:fixed;inset:0;pointer-events:none;z-index:40}
.goldbadge{position:absolute;left:-160px;pointer-events:auto;display:flex;
  align-items:center;gap:8px;padding:10px 16px;border-radius:40px;
  background:linear-gradient(135deg,#f5c451,#e08a2a);color:#1a1300;
  border:2px solid #fff3cf;font-weight:800;box-shadow:0 6px 24px rgba(245,196,81,.45);
  animation:slide 9s linear forwards;cursor:pointer}
.goldbadge:hover{filter:brightness(1.08)}
.goldbadge .gic{font-size:26px}
.goldbadge .glabel{font-size:13px;line-height:1.1}
.goldbadge .glabel small{font-size:10px;opacity:.7}
@keyframes slide{
  0%{left:-160px;transform:translateY(0)}
  50%{transform:translateY(-14px)}
  100%{left:calc(100vw + 40px);transform:translateY(0)}
}

/* ---- confetti / flash / toast / shake ---- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confp{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;
  animation:fall 2.4s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
#flash{position:fixed;inset:0;pointer-events:none;z-index:55;opacity:0;transition:opacity .12s}
#flash.on{opacity:.5}
#flash.up{background:radial-gradient(circle,rgba(34,211,123,.55),transparent 70%)}
#flash.down{background:radial-gradient(circle,rgba(255,93,108,.6),transparent 70%)}
#toast{position:fixed;left:50%;bottom:42px;transform:translateX(-50%) translateY(20px);
  background:#101826;border:1px solid var(--gold);color:#fff;padding:10px 20px;
  border-radius:10px;font-weight:700;opacity:0;pointer-events:none;z-index:65;
  transition:.25s}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
main.shake{animation:shk .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shk{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)}
}

/* ---- achievements ---- */
.ach-sum{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:.5px}
.ach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ach-card{display:flex;align-items:center;gap:10px;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:9px 10px;
  opacity:.5;filter:grayscale(1);transition:.15s}
.ach-card.on{opacity:1;filter:none;border-color:var(--green-d);
  background:linear-gradient(180deg,#11261c,var(--panel2))}
.ach-card .ic{font-size:22px;width:28px;text-align:center;flex-shrink:0}
.ach-card .meta{min-width:0}
.ach-card .nm{font-weight:700;color:#fff;font-size:13px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ach-card.on .nm{color:var(--green)}
.ach-card .ds{font-size:10px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

#achToasts{position:fixed;top:74px;right:16px;z-index:66;display:flex;
  flex-direction:column;gap:8px;pointer-events:none}
.ach-toast{background:#101826;border:1px solid var(--gold);border-radius:10px;
  padding:10px 16px;box-shadow:0 6px 22px rgba(245,196,81,.35);
  animation:achin .3s ease-out, achout .4s ease-in 3.8s forwards}
.ach-toast .t{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:700}
.ach-toast .n{font-weight:700;font-size:14px;color:#fff;margin-top:3px}
@keyframes achin{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes achout{to{opacity:0;transform:translateX(40px)}}

/* ---- quests ---- */
.quest{display:flex;align-items:center;gap:12px;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.quest.done{border-color:var(--gold);background:linear-gradient(180deg,#2a2410,var(--panel2))}
.quest .ic{font-size:22px;width:28px;text-align:center;flex-shrink:0}
.quest .body{flex:1;min-width:0}
.quest .name{font-weight:700;color:#fff;font-size:13px}
.quest .desc{font-size:11px;color:var(--dim);margin:1px 0 5px}
.qbar{height:6px;background:#16202f;border-radius:3px;overflow:hidden}
.qbar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue),var(--green));transition:width .3s}
.quest.done .qbar i{background:linear-gradient(90deg,var(--gold),var(--green))}
.qclaim{font-size:12px;font-weight:700;padding:8px 12px;border-radius:7px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.quest.done .qclaim{border-color:var(--gold);color:var(--gold);
  background:rgba(245,196,81,.14);animation:qpulse 1.4s ease-in-out infinite}
@keyframes qpulse{50%{box-shadow:0 0 0 3px rgba(245,196,81,.18)}}

/* ---- skill tree ---- */
.skill-tree{margin-top:8px;background:rgba(10,12,22,.55);border:1px solid #3a2f52;
  border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}
.skill-tree.hidden{display:none}
.sk-head{font-size:12px;color:var(--dim);text-align:center;padding-bottom:4px}
.sk-head b{color:var(--gold)}
.sk{display:flex;align-items:center;gap:10px;background:var(--panel2);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.sk.maxed{border-color:#3a2f52;opacity:.75}
.sk-ic{font-size:20px;width:26px;text-align:center;flex-shrink:0}
.sk-meta{flex:1;min-width:0}
.sk-nm{font-weight:700;color:#fff;font-size:13px}
.sk-nm .sk-lv{color:var(--gold);font-size:11px;font-weight:600;margin-left:4px}
.sk-ds{font-size:11px;color:var(--dim)}
.sk-ds b{color:#c9b8ff}
.sk-buy{font-size:12px;font-weight:700;padding:7px 12px;border-radius:7px;
  border-color:#5a4a82;color:#c9b8ff;background:rgba(122,92,255,.14);white-space:nowrap}
.sk-buy:hover:not(:disabled){border-color:#7a5cff;color:#fff}

/* ---- prestige live calc ---- */
.prestige-calc{margin-top:8px;background:rgba(10,12,22,.5);border:1px solid #3a2f52;
  border-radius:10px;padding:8px 12px;font-size:12px;display:flex;flex-direction:column;gap:2px}
.pc-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.pc-row span{color:var(--dim)}
.pc-row b{color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-row.hl{border-top:1px solid #3a2f52;border-bottom:1px solid #3a2f52;
  margin:3px 0;padding:6px 0}
.pc-row.hl span{color:var(--txt)}
.pc-row.hl b{color:var(--gold);font-size:14px}
.pc-row.dim{opacity:.5}
.pc-row.dim b{color:var(--dim)}
#prestigeQuantumRow:not(.dim) b{color:#c8b7ff}

/* ---- prestige help ---- */
.help-toggle{font-size:11px;padding:2px 8px;margin-left:6px;border-radius:6px;
  border-color:#5a4a82;color:#c9b8ff;background:rgba(122,92,255,.12)}
.help-toggle:hover{border-color:#7a5cff;color:#fff}
.prestige-help{margin-top:8px;background:rgba(10,12,22,.55);border:1px solid #3a2f52;
  border-radius:10px;padding:12px 14px;font-size:12px;line-height:1.55;color:var(--txt)}
.prestige-help.hidden{display:none}
.prestige-help>b{display:block;color:var(--gold);margin-bottom:6px;font-size:12px;letter-spacing:.5px}
.prestige-help ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.prestige-help li b{color:#fff}

@media(max-width:560px){
  .run-stats{grid-template-columns:repeat(2,1fr)}
  .ticker{gap:14px}
  .pos-grid{grid-template-columns:repeat(2,1fr)}
  .ach-grid{grid-template-columns:1fr}
}

/* respect reduced-motion: keep gameplay, drop the cosmetic shaking/confetti */
@media (prefers-reduced-motion: reduce){
  main.shake{animation:none}
  .confp{display:none}
}