/* In-game HUD, controls, and the tutorial card. */
#topleft{position:absolute;left:calc(var(--sl) + 12px);top:calc(var(--st) + 28px);width:min(30vw,250px)}
.barrow{display:flex;align-items:center;gap:8px}
#hpbar{position:relative;flex:1;height:18px;background:#000;border:2px solid #000;overflow:hidden}
#hpfill{height:100%;width:100%;background:var(--accent);transition:width .15s}
#hptext{position:absolute;inset:0;font-size:11px;line-height:14px;text-align:center;color:#06210a;font-weight:700}
#lv{font:700 22px/1 Georgia,"Times New Roman",serif;color:#fff}
#xpbar{height:5px;background:#000;margin-top:3px;border:1px solid #000}
#xpfill{height:100%;width:0;background:#59c2ff}
#goldtxt{margin-top:4px;font:700 14px Georgia,serif;color:var(--gold)}
#arrowtxt{margin-top:1px;font:700 14px Georgia,serif;color:#f4efe2}
#arrowtxt.low{color:#ff5a4a}
#sp{margin-top:2px;font:700 13px Georgia,serif;color:#fff;display:none}
#scoutHud{margin-top:5px;font-size:11.5px;line-height:1.3;color:#fff;text-shadow:0 1px 2px #000}
#scoutHud u{display:block;font:700 10px Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
#scoutW{font-weight:700}
#scoutBoss{color:#ff8a8a;font-weight:700}
#scoutNew{color:var(--gold)}
.chip:disabled{opacity:.4}
.chip.ready{border-color:var(--gold);color:var(--gold)}

#top-c{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--st) + 28px);width:min(34vw,300px);text-align:center}
#cryrow{display:flex;align-items:center;gap:6px}
#cryrow .lab{font:700 12px Georgia,serif;color:var(--crystal)}
#crybar{position:relative;flex:1;height:16px;background:#000;border:2px solid #000;overflow:hidden}
#cryfill{height:100%;width:100%;background:var(--crystal);transition:width .15s,background .15s}
#crytext{position:absolute;inset:0;font-size:10.5px;line-height:12px;color:#032033;font-weight:700}
#wavecount{margin-top:3px;font:700 14px Georgia,serif;color:#fff}
#bossbar{margin-top:3px;display:none}
#bossname{font:700 12px Georgia,serif;color:#fff;text-shadow:0 1px 2px #000}
#bossbar .b{height:10px;background:#000;border:2px solid #000}
#bossfill{height:100%;width:100%;background:var(--danger)}

#topright{position:absolute;right:calc(var(--sr) + 12px);top:calc(var(--st) + 28px);display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:6}
#chips{display:flex;gap:8px;pointer-events:auto;position:relative;z-index:6}
.chip{position:relative;background:var(--panel);color:var(--accent);border:2px solid var(--panel-line);border-radius:10px;min-height:44px;padding:10px 14px;font:700 13px "Trebuchet MS",sans-serif;pointer-events:auto;touch-action:manipulation}
.chip .badge{position:absolute;top:-8px;right:-8px;background:var(--danger);color:#fff;border-radius:10px;min-width:20px;height:20px;font-size:12px;line-height:20px;text-align:center;display:none}
#radar{width:104px;height:104px;border-radius:50%;border:2px solid var(--panel-line);background:rgba(8,14,26,.55)}

#combo{position:absolute;right:calc(var(--sr) + 250px);top:40%;text-align:right;opacity:0;transition:opacity .2s}
body.lefty #combo{right:auto;left:calc(var(--sl) + 250px);text-align:left}
#combo .n{font:800 34px/1 "Trebuchet MS",sans-serif;color:var(--gold)}
#combo .l{font:700 12px Georgia,serif;color:#fff}
#combo .cb{height:4px;background:rgba(0,0,0,.5);width:84px;margin-top:3px;margin-left:auto}
body.lefty #combo .cb{margin-left:0}
#combofill{height:100%;background:var(--gold)}

#banner{position:absolute;left:50%;top:18%;transform:translateX(-50%);opacity:0;pointer-events:none}
.hex{width:min(40vw,290px);padding:12px 0 14px;text-align:center;background:#0e1424;border:3px solid rgba(140,255,90,.35);clip-path:polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%)}
.hex .w1{font:700 min(6vw,36px)/1 "Trebuchet MS",sans-serif;color:var(--accent);letter-spacing:1px}
.hex .w2{font:700 min(7vw,44px)/1.1 "Trebuchet MS",sans-serif;color:var(--accent)}
@keyframes bn{0%{opacity:0;transform:translateX(-50%) scale(.6) rotate(-5deg)}14%{opacity:1;transform:translateX(-50%) scale(1) rotate(-5deg)}78%{opacity:1;transform:translateX(-50%) scale(1) rotate(-5deg)}100%{opacity:0;transform:translateX(-50%) scale(1.12) rotate(-5deg)}}
#banner.show{animation:bn 2.4s ease both}
@media (prefers-reduced-motion: reduce){#banner.show{animation:none;opacity:1}}
#scope{position:absolute;inset:0;background:radial-gradient(circle closest-side at center,rgba(0,0,0,0) 86%,rgba(0,0,0,.88) 90%);opacity:0;transition:opacity .15s}
#scope.on{opacity:1}
#cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
#hitm{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid #fff;border-radius:50%;opacity:0}
#hitm.on{animation:hm .25s ease-out}
#hitm.head{border-color:#ffd24a}
@keyframes hm{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.4)}}
#msg{position:absolute;left:50%;top:calc(18% + 8.4rem);transform:translateX(-50%);width:max-content;max-width:min(88vw,520px);font:700 19px/1.25 Georgia,serif;color:#fff;text-shadow:-1px -1px 0 #000,1px 1px 0 #000,0 0 12px #000;opacity:0;transition:opacity .25s;text-align:center}
@media (max-height:480px){
  #banner{top:14%}
  .hex{width:min(34vw,220px);padding:6px 0 8px}
  .hex .w1{font-size:18px}
  .hex .w2{font-size:28px}
  #msg{top:calc(14% + 5.2rem);font-size:16px}
}
#hurt{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,rgba(255,0,0,0) 45%,rgba(220,0,0,.65) 100%);transition:opacity .35s}
#dnums{position:absolute;inset:0;overflow:hidden}
.dn{position:absolute;left:0;top:0;font:800 17px "Trebuchet MS",sans-serif;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;display:none;white-space:nowrap;will-change:transform}
.dn.head{color:#ffd24a;font-size:22px}.dn.burn{color:#ff9a3a;font-size:13px}.dn.blk{color:#c8d0d8;font-size:14px}.dn.tur{color:#cfe2ff;font-size:13px}.dn.boom{color:#ff7a3a;font-size:19px}

#joy{position:absolute;left:0;top:0;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;border:3px solid rgba(140,255,90,.6);background:rgba(14,20,36,.28);opacity:.45}
#joy.on{opacity:.95}
#knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(140,255,90,.55);border:2px solid var(--accent)}

#actions{position:absolute;right:calc(var(--sr) + 18px);bottom:calc(var(--sb) + 16px);width:230px;height:214px;pointer-events:none}
body.lefty #actions{right:auto;left:calc(var(--sl) + 18px);transform:scaleX(-1)}
body.lefty #actions .t{transform:scaleX(-1)}
.abtn{position:absolute;border-radius:50%;background:rgba(14,20,36,.45);border:3px solid var(--accent);color:var(--accent);font:800 15px "Trebuchet MS",sans-serif;pointer-events:auto;overflow:hidden;touch-action:none;padding:0}
.abtn .rl{position:absolute;left:0;right:0;bottom:0;height:100%;background:rgba(140,255,90,.4)}
.abtn .t{position:relative;display:inline-block}
#fireBtn{right:0;bottom:0;width:112px;height:112px;font-size:18px}
#fireBtn.dry{border-color:#ff5a4a;color:#ff5a4a}
#specBtn{right:22px;bottom:128px;width:74px;height:74px;display:none;font-size:14px}
#specBtn .rl{background:rgba(255,154,58,.45)}
#zoomBtn{right:126px;bottom:14px;width:64px;height:64px;font-size:13px}
#zoomBtn.on{background:rgba(140,255,90,.45);color:#06210a}
#swapBtn{right:104px;bottom:150px;width:40px;height:40px;font-size:15px;display:none;border-width:2px}

body.showtut #topleft,body.showtut #top-c,body.showtut #topright{top:calc(var(--st) + var(--tut-h, 58px))}
#tut{position:absolute;z-index:8;left:50%;top:calc(var(--st) + 6px);transform:translateX(-50%);width:min(90vw,720px);display:none;align-items:center;gap:12px;padding:6px 8px 6px 14px;background:rgba(12,18,32,.94);border:2px solid var(--panel-line);border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.45);pointer-events:auto;text-align:left}
#tut .tut-copy{flex:1;min-width:0}
#tut .st{font:700 10px Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
#tut p{margin:1px 0 0;font-size:13.5px;line-height:1.3}
#tut .btns{display:flex;gap:6px;flex:none}
#tut .sbtn{padding:6px 10px;white-space:nowrap}
@media (max-height:420px){
  #tut{padding:5px 6px 5px 10px;gap:8px}
  #tut p{font-size:12.5px}
}
.sbtn{padding:8px 14px;border-radius:10px;border:2px solid var(--panel-line);background:transparent;color:var(--accent);font:700 14px "Trebuchet MS",sans-serif;touch-action:manipulation}
.sbtn.pri{background:var(--accent);color:#06210a;border-color:var(--accent)}