@import url('https://fonts.googleapis.com/css2?family=Bungee&family=JetBrains+Mono:wght@400;700;800&display=swap');

:root{
  --hot:#ff2e6a;
  --acid:#c6ff3d;
  --cyan:#26e8ff;
  --gold:#ffd23d;
  --violet:#a24bff;
  --ink:#0a0713;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --disp:'Bungee','JetBrains Mono',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{
  width:100%;height:100%;overflow:hidden;
  background:var(--ink);
  font-family:var(--mono);
  color:#fff;
  cursor:crosshair;
  -webkit-font-smoothing:antialiased;
}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block}

.hidden{display:none !important}

/* ============ SCREENS ============ */
.screen{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(162,75,255,.28),transparent 60%),
    radial-gradient(ellipse at 20% 80%,rgba(255,46,106,.20),transparent 55%),
    linear-gradient(170deg,#0a0713 0%,#160a26 55%,#06040d 100%);
  overflow-y:auto;
}

/* ============ TITLE ============ */
.title-inner{max-width:820px;padding:40px 28px;text-align:center}

.logo{
  font-family:var(--disp);
  line-height:.94;
  letter-spacing:-1px;
  margin-bottom:14px;
  filter:drop-shadow(0 8px 0 rgba(0,0,0,.55));
}
.logo-a{display:block;font-size:clamp(38px,8.2vw,88px);color:var(--acid);
  text-shadow:4px 4px 0 #000,0 0 34px rgba(198,255,61,.55)}
.logo-amp{display:block;font-size:clamp(20px,3.4vw,34px);color:var(--gold);margin:2px 0 -2px}
.logo-b{display:block;font-size:clamp(38px,8.2vw,88px);color:var(--hot);
  text-shadow:4px 4px 0 #000,0 0 34px rgba(255,46,106,.6)}

.tag{
  font-size:clamp(10px,1.5vw,14px);letter-spacing:5px;text-transform:uppercase;
  color:var(--cyan);margin-bottom:30px;font-weight:700;
}

.card-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:26px}
.card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.13);
  border-left:3px solid var(--acid);
  border-radius:8px;padding:9px 14px;min-width:112px;
}
.card-k{font-family:var(--disp);font-size:15px;color:var(--gold);letter-spacing:1px}
.card-v{font-size:10px;color:#a89ec4;margin-top:3px;letter-spacing:.5px}

.blurb{
  font-size:13px;line-height:1.75;color:#c3b9dd;
  max-width:640px;margin:0 auto 32px;text-align:left;
  border-left:2px solid rgba(255,255,255,.12);padding-left:16px;
}
.blurb em{color:var(--hot);font-style:normal;font-weight:700}
.blurb strong{color:var(--acid)}

.big-btn{
  font-family:var(--disp);font-size:clamp(20px,3.6vw,32px);
  letter-spacing:2px;padding:18px 56px;border:0;border-radius:14px;
  background:linear-gradient(160deg,var(--hot),#ff7a2e);
  color:#fff;cursor:pointer;
  box-shadow:0 8px 0 #8c0c33,0 16px 44px rgba(255,46,106,.5);
  transition:transform .09s,box-shadow .09s;
}
.big-btn:hover{transform:translateY(-3px);box-shadow:0 11px 0 #8c0c33,0 22px 54px rgba(255,46,106,.65)}
.big-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #8c0c33,0 8px 22px rgba(255,46,106,.4)}

.hint{margin-top:18px;font-size:10px;color:#6f6489;letter-spacing:1.5px;text-transform:uppercase}

/* ============ LOADING ============ */
.load-inner{text-align:center}
.load-fist{font-size:66px;animation:punch .7s ease-in-out infinite alternate}
@keyframes punch{from{transform:translateX(-16px) rotate(-12deg) scale(.94)}
                 to{transform:translateX(16px) rotate(10deg) scale(1.1)}}
.load-txt{margin-top:20px;font-family:var(--disp);font-size:15px;color:var(--acid);letter-spacing:3px}

/* ============ HUD SHELL ============ */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;user-select:none}

/* score */
#score-box{position:absolute;top:16px;left:18px}
.score-label{font-size:9px;letter-spacing:3px;color:#8d82ab}
#score-val{font-family:var(--disp);font-size:40px;line-height:1;color:var(--acid);
  text-shadow:3px 3px 0 rgba(0,0,0,.6),0 0 26px rgba(198,255,61,.45)}
#score-val .unit,#flight-dist .unit,#result-dist .unit{font-size:.46em;color:#fff;margin-left:2px}
#score-best{font-size:10px;color:var(--gold);margin-top:3px;letter-spacing:1px}

/* streak */
#streak-box{position:absolute;top:16px;right:18px;text-align:right}
#streak-flame{font-size:26px;animation:flick .35s steps(2) infinite}
@keyframes flick{from{opacity:.65;transform:scale(.94)}to{opacity:1;transform:scale(1.12)}}
#streak-val{font-family:var(--disp);font-size:19px;color:var(--hot);letter-spacing:1px;
  text-shadow:2px 2px 0 rgba(0,0,0,.6)}
#rank-val{font-size:10px;color:var(--cyan);letter-spacing:2px;margin-top:3px}

/* reticle */
#reticle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;opacity:.5;transition:opacity .18s,transform .18s}
#reticle.hot{opacity:1;transform:translate(-50%,-50%) scale(1.35)}
.ret-ring{position:absolute;inset:0;border:2px solid #fff;border-radius:50%;opacity:.55}
#reticle.hot .ret-ring{border-color:var(--acid);opacity:1}
.ret-dot{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;
  background:#fff;border-radius:50%}
#reticle.hot .ret-dot{background:var(--acid)}

/* grab prompt */
#grab-prompt{position:absolute;top:58%;left:50%;transform:translateX(-50%);
  background:rgba(10,7,19,.86);border:1px solid var(--acid);border-radius:9px;
  padding:9px 18px;font-size:13px;letter-spacing:2px;color:var(--acid);
  white-space:nowrap;animation:bob 1.1s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-5px)}}

.key{
  display:inline-block;background:#fff;color:#0a0713;border-radius:4px;
  padding:1px 7px;font-weight:800;font-size:.86em;margin:0 2px;
  box-shadow:0 2px 0 #9d93bb;
}

/* held */
#held-box{position:absolute;bottom:96px;left:18px;
  background:rgba(10,7,19,.8);border-left:3px solid var(--hot);
  border-radius:0 8px 8px 0;padding:9px 15px}
.held-label{font-size:8px;letter-spacing:3px;color:#8d82ab}
#held-name{font-family:var(--disp);font-size:19px;color:var(--hot);letter-spacing:1px}
#held-mass{font-size:10px;color:var(--gold);letter-spacing:1px}

/* ============ EQUATION PANEL ============ */
#eq-panel{
  position:absolute;bottom:118px;left:50%;transform:translateX(-50%);
  width:min(520px,92vw);
  background:rgba(8,5,16,.93);
  border:2px solid var(--violet);border-radius:16px;
  padding:16px 22px 14px;
  box-shadow:0 22px 64px rgba(0,0,0,.75),0 0 44px rgba(162,75,255,.28) inset;
  backdrop-filter:blur(7px);
}
#eq-tier{font-size:9px;letter-spacing:4px;color:var(--violet);text-align:center;margin-bottom:9px}

#eq-timer-track{height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;margin-bottom:13px}
#eq-timer-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--acid),var(--gold));
  border-radius:2px;transition:width .1s linear}
#eq-timer-fill.warn{background:linear-gradient(90deg,var(--gold),var(--hot));animation:pulse .35s infinite alternate}
@keyframes pulse{from{opacity:.55}to{opacity:1}}

#eq-question{
  font-family:var(--disp);font-size:clamp(24px,4.6vw,38px);
  text-align:center;color:#fff;letter-spacing:1px;line-height:1.2;
  text-shadow:0 0 22px rgba(38,232,255,.45),2px 2px 0 rgba(0,0,0,.5);
}

#eq-answer-row{display:flex;align-items:center;justify-content:center;gap:11px;margin:9px 0 13px}
#eq-eq{font-family:var(--disp);font-size:28px;color:#6f6489}
#eq-answer{
  font-family:var(--disp);font-size:32px;color:var(--acid);min-width:118px;
  border-bottom:3px solid var(--acid);text-align:center;padding:0 12px 2px;
  min-height:40px;letter-spacing:2px;
}
#eq-caret{animation:blink .55s steps(2) infinite;color:var(--acid)}
@keyframes blink{from{opacity:0}to{opacity:1}}
#eq-panel.good{border-color:var(--acid);box-shadow:0 0 54px rgba(198,255,61,.55)}
#eq-panel.bad{border-color:var(--hot);animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translateX(-50%)}
  25%{transform:translateX(-50%) translate(-13px)}
  75%{transform:translateX(-50%) translate(13px)}
}

#eq-power-row{display:flex;align-items:center;gap:11px}
.pw-label{font-size:8px;letter-spacing:2px;color:#8d82ab;white-space:nowrap}
#pw-track{flex:1;height:11px;background:rgba(255,255,255,.09);border-radius:6px;overflow:hidden}
#pw-fill{height:100%;width:4%;border-radius:6px;
  background:linear-gradient(90deg,var(--cyan),var(--acid),var(--gold),var(--hot));
  background-size:300% 100%;transition:width .25s cubic-bezier(.2,1.5,.4,1);
  animation:slide 2.2s linear infinite}
@keyframes slide{from{background-position:0 0}to{background-position:300% 0}}
#pw-mult{font-family:var(--disp);font-size:20px;color:var(--gold);min-width:66px;text-align:right}

#eq-chain{font-size:10px;color:#8d82ab;text-align:center;margin-top:9px;letter-spacing:1px}
#chain-count{color:var(--acid);font-weight:800}
.dim{color:#584f70}

/* ============ FEEDBACK ============ */
#feedback{
  position:absolute;top:31%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--disp);font-size:clamp(34px,8vw,80px);
  text-align:center;pointer-events:none;opacity:0;white-space:nowrap;
}
#feedback.pop{animation:fbpop .85s cubic-bezier(.15,1.7,.35,1) forwards}
@keyframes fbpop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-9deg)}
  35%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(2deg)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-72%) scale(1.05)}
}

/* ============ FLIGHT ============ */
#flight-box{position:absolute;top:20%;left:50%;transform:translateX(-50%);text-align:center}
#flight-dist{font-family:var(--disp);font-size:clamp(44px,11vw,104px);line-height:1;color:var(--gold);
  text-shadow:5px 5px 0 rgba(0,0,0,.62),0 0 46px rgba(255,210,61,.65)}
#flight-sub{font-size:12px;letter-spacing:5px;color:var(--cyan);margin-top:5px}

/* ============ RESULT ============ */
#result-card{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(8,5,16,.95);border:3px solid var(--gold);border-radius:20px;
  padding:30px 52px;text-align:center;
  box-shadow:0 26px 78px rgba(0,0,0,.8),0 0 66px rgba(255,210,61,.3);
  animation:cardin .42s cubic-bezier(.15,1.6,.4,1);
}
@keyframes cardin{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}
                  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#result-verdict{font-family:var(--disp);font-size:clamp(22px,4.4vw,38px);color:var(--hot);
  letter-spacing:2px;text-shadow:3px 3px 0 rgba(0,0,0,.55)}
#result-dist{font-family:var(--disp);font-size:clamp(46px,10vw,86px);line-height:1.05;color:var(--acid);
  margin:9px 0;text-shadow:4px 4px 0 rgba(0,0,0,.55),0 0 40px rgba(198,255,61,.5)}
#result-detail{font-size:12px;color:var(--cyan);letter-spacing:1.5px}
#result-hint{font-size:11px;color:#8d82ab;margin-top:19px;letter-spacing:1px}

/* ============ TOASTS ============ */
#toasts{position:absolute;bottom:128px;right:18px;display:flex;flex-direction:column;
  align-items:flex-end;gap:5px}
.toast{
  background:rgba(8,5,16,.87);border-right:3px solid var(--cyan);
  border-radius:8px 0 0 8px;padding:6px 13px;font-size:11px;color:#d5cbef;
  letter-spacing:.5px;animation:tin .3s ease-out;white-space:nowrap;max-width:44vw;
  overflow:hidden;text-overflow:ellipsis;
}
@keyframes tin{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
.toast.fade{opacity:0;transition:opacity .55s,transform .55s;transform:translateX(24px)}
.toast.gold{border-right-color:var(--gold);color:var(--gold)}
.toast.hot{border-right-color:var(--hot);color:#ffb0c8}

/* ============ BOTTOM HINTS ============ */
#bottom-hints{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:17px;flex-wrap:wrap;justify-content:center;
  font-size:10px;color:#7a6f99;letter-spacing:1px;
}
#bottom-hints .key{background:rgba(255,255,255,.82);box-shadow:0 1px 0 #6f6489}

/* ============ HELP ============ */
.help-inner{max-width:640px;padding:36px 30px;font-size:13px;line-height:1.8;color:#c3b9dd}
.help-inner h2{font-family:var(--disp);font-size:30px;color:var(--acid);margin-bottom:18px;letter-spacing:2px}
.help-inner h3{font-family:var(--disp);font-size:16px;color:var(--gold);margin:22px 0 9px;letter-spacing:2px}
.help-inner ol{padding-left:22px}
.help-inner ol li{margin-bottom:11px}
.help-inner em{color:var(--hot);font-style:normal;font-weight:700}
.help-inner strong{color:var(--acid)}
.tierlist{list-style:none}
.tierlist li{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.tierlist b{display:inline-block;width:26px;color:var(--violet);font-family:var(--disp)}
.close-hint{margin-top:24px;font-size:11px;color:#6f6489;text-align:center}

@media (max-width:640px){
  #bottom-hints{gap:9px;font-size:9px}
  #score-val{font-size:28px}
  #eq-panel{bottom:76px;padding:13px 15px 11px}
  #result-card{padding:22px 26px}
}