/* Circular in-game controls. Original artwork, colors and game rules are retained. */
#hud{--power-size:76px;--fire-size:92px;--touch-size:62px;--dial-ink:#c9f7df;--dial-glow:#70f4c6}
#hud .game-bottom{left:3vw;right:3vw;bottom:24px;max-width:none;gap:24px;align-items:flex-end}
#hud .combat-actions{display:flex;align-items:flex-end;gap:24px;width:auto;max-width:none;padding:0 3px 29px 0}
#hud .power-statuses{display:flex;align-items:flex-end;gap:13px;width:auto;pointer-events:none}
#hud .power-status,#hud .round-control{
  position:relative;display:flex;align-items:center;justify-content:center;flex:none;padding:0;border:0;border-radius:50%;
  background:radial-gradient(circle at 38% 28%,#376b5747,transparent 68%),#011b136b;
  color:var(--dial-ink);box-shadow:inset 0 0 20px #001b1347,0 4px 15px #0003;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow:visible;
}
#hud .power-status{width:var(--power-size);height:var(--power-size);min-width:0;min-height:0}
#hud .control-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform:rotate(-68deg)}
#hud .dial-track,#hud .dial-progress{fill:none;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
#hud .dial-track{stroke:var(--dial-ink);stroke-opacity:.48;stroke-dasharray:90 10}
#hud .dial-progress{stroke:var(--dial-glow);stroke-dasharray:90 100;stroke-dashoffset:90;transition:stroke-dashoffset .07s linear;filter:drop-shadow(0 0 2px #7af7cb65)}
#hud .power-status img{width:58%;height:58%;object-fit:contain;flex:none;padding:2px;border-radius:50%;background:#a7cec2;box-shadow:0 0 14px #6fbea32a;opacity:.8}
#hud .control-badge{
  position:absolute;top:-1px;right:-2px;z-index:2;display:flex;align-items:center;justify-content:center;
  width:27px;height:27px;margin:0;border:1px solid #7cae9559;border-radius:50%;
  color:#d8f9e8;background:#05271fed;font:600 10px/1 var(--mono);font-variant-numeric:tabular-nums;
  box-shadow:0 2px 7px #00150e80;pointer-events:none;
}
#hud .control-label{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:110px;text-align:center;pointer-events:none;text-shadow:0 1px 4px #00150e}
#hud .control-label b{display:block;font:700 9px/1.25 var(--mono);letter-spacing:.8px;color:#c8e8d8}
#hud .power-hint{display:block;margin-top:3px;font:7px/1.2 var(--mono);letter-spacing:.35px;color:#9abdac}
#hud .power-status.collected .dial-track{stroke-opacity:.72}
#hud .power-status.active{background:radial-gradient(circle at 38% 28%,#58ad834d,transparent 68%),#062d226e;box-shadow:inset 0 0 20px #59efbd12,0 0 20px #55efb81a}
#hud .power-status.active img{opacity:1}
#hud .power-status.active .control-badge{border-color:#9cf9cf99;color:#eafff4;box-shadow:0 0 10px #4ef6b72b}
#hud .power-status.active .control-label b{color:#dcfff0}
#hud .power-status.locked img{opacity:.43}
#hud .power-status.locked .dial-track{stroke-opacity:.28;stroke-dasharray:2 4}
#hud .power-status.locked .control-badge{color:#afc8ba}
#hud #shoot-button{
  width:var(--fire-size);height:var(--fire-size);min-width:0;min-height:0;flex:none;padding:0;gap:0;text-align:center;
  border:0;border-radius:50%;background:radial-gradient(circle at 38% 28%,#387e7540,transparent 70%),#03262580;color:#d5ffff;opacity:1;
  touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .12s,background .16s,box-shadow .16s;
}
#hud #shoot-button .dial-track{stroke:#b9eff0;stroke-opacity:.6}
#hud #shoot-button .dial-progress{stroke:#95ffff}
#hud #shoot-button .laser-icon{font-size:43px;line-height:1;color:#b5f7ed;transform:translateY(-1px);pointer-events:none}
#hud #shoot-button .control-label b{font-size:10px;letter-spacing:1px}
#hud #shoot-button kbd{display:none}
#hud #shoot-button small{display:block;margin-top:3px;color:#abd2c6;font:7px/1.2 var(--mono);white-space:nowrap}
#hud #laser-progress{position:static;width:auto;height:auto;background:none}
#hud #shoot-button:disabled{background:radial-gradient(circle at 38% 28%,#376b5730,transparent 68%),#011b136b;color:#9bbbaa;opacity:1}
#hud #shoot-button:disabled .laser-icon{color:#8fb7a9}
#hud #shoot-button:disabled .dial-track{stroke:#9dbdae;stroke-opacity:.38}
#hud #shoot-button:disabled .control-badge{color:#91ae9f;border-color:#57796780}
#hud #shoot-button:not(:disabled):active,#hud #shoot-button.firing{transform:scale(.96);background:#14605080;box-shadow:0 0 24px #58f4dd33,inset 0 0 20px #73fff41f}
#hud .round-control:focus-visible,#hud .hud-actions .icon-button:focus-visible{outline:2px solid #dcfff0;outline-offset:4px}
#hud #touch-controls{gap:14px;pointer-events:none}
#hud #touch-controls button{
  position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:var(--touch-size);height:var(--touch-size);min-width:44px;min-height:44px;padding:0;
  border:0;border-radius:50%;background:radial-gradient(circle at 38% 28%,#376b5747,transparent 68%),#011b136b;color:var(--dial-ink);
  font:32px/1 var(--mono);touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto;
  transition:transform .12s,background .16s,box-shadow .16s;
}
#hud #touch-controls .dial-track{stroke-opacity:.62;stroke-dasharray:100 0;stroke-width:2}
#hud .direction-icon{pointer-events:none;transform:translateY(-1px)}
#hud .direction-label{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);font:7px/1 var(--mono);letter-spacing:.65px;color:#a2c6b3;text-shadow:0 1px 4px #00150e;pointer-events:none}
#hud #touch-controls button:active{transform:scale(.93);background:#2b836061;box-shadow:0 0 20px #63ffc934}
#hud #touch-controls button:active .dial-track{stroke:#dcfff0;stroke-opacity:1}
#hud .hud-actions .icon-button{border-radius:50%;width:44px;min-width:44px;height:44px;padding:0;border:1px solid #bbeed05e;background:#021f1766;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#hud .hud-actions .sound-state{display:none}
.instruction-power{width:38px;height:38px;object-fit:contain;flex:0 0 38px;padding:3px;background:#a7cec2;border-radius:50%;border:2px solid #386e57}
@media(hover:hover){
  #hud #shoot-button:not(:disabled):hover,#hud #touch-controls button:hover{background:#20624c80;box-shadow:0 0 20px #5aeabe26}
  #hud .hud-actions .icon-button:hover{background:#20624c80}
}
@media(min-width:1051px) and (hover:hover){#hud #shoot-button kbd{display:inline-block;margin:0 0 0 3px;padding:0;min-width:0;border:0;background:none;color:#9ec5b6;font:8px/1 var(--mono)}}
@media(max-width:1050px){#hud .game-bottom .keyboard-hint{display:none}#hud .game-bottom{justify-content:flex-end}}
@media(hover:none) and (min-width:651px){
  #hud .game-bottom{left:auto;right:max(22px,env(safe-area-inset-right,0px));bottom:24px}
  #hud #touch-controls{left:max(22px,env(safe-area-inset-left,0px));right:auto;bottom:calc(28px + env(safe-area-inset-bottom,0px))}
}
@media(hover:none) and (min-width:651px) and (max-width:900px){#hud{--power-size:60px;--fire-size:76px;--touch-size:54px}}
@media(max-width:650px){
  #hud{--power-size:clamp(54px,15.5vw,66px);--fire-size:clamp(70px,20vw,84px);--touch-size:clamp(54px,15vw,62px)}
  #hud .game-bottom{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(96px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;justify-content:center}
  #hud .combat-actions{display:flex;align-items:flex-end;gap:clamp(17px,5vw,23px);width:auto;max-width:none;padding:0 2px 27px 0}
  #hud .power-statuses{width:auto;gap:9px}
  #hud .control-badge{width:24px;height:24px;font-size:9px;right:-3px}
  #hud .control-label b{font-size:8px;letter-spacing:.4px}
  #hud .power-hint{font-size:6.5px;letter-spacing:.15px}
  #hud #shoot-button .laser-icon{font-size:36px}
  #hud #shoot-button .control-label b{font-size:9px}
  #hud #shoot-button small{font-size:6.5px}
  #hud #touch-controls{display:flex;left:max(18px,env(safe-area-inset-left,0px));right:max(18px,env(safe-area-inset-right,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));justify-content:space-between;gap:10px}
  #hud #notice{bottom:calc(218px + env(safe-area-inset-bottom,0px))}
}
@media(max-height:550px) and (orientation:landscape){
  #hud{--power-size:48px;--fire-size:64px;--touch-size:48px}
  #hud .game-bottom{left:auto;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;max-width:none}
  #hud .combat-actions{display:flex;gap:16px;width:auto;max-width:none;padding:0 2px 26px 0}
  #hud .power-statuses{gap:8px}
  #hud .control-badge{width:22px;height:22px;font-size:8px;right:-4px}
  #hud .control-label b{font-size:8px;letter-spacing:.3px}
  #hud .power-hint{font-size:6px;letter-spacing:0}
  #hud #shoot-button .laser-icon{font-size:33px}
  #hud #shoot-button .control-label b{font-size:9px}
  #hud #shoot-button small{font-size:6px}
  #hud #touch-controls{left:max(14px,env(safe-area-inset-left,0px));right:auto;bottom:calc(26px + env(safe-area-inset-bottom,0px));gap:10px}
  #hud #notice{top:22%;bottom:auto}
}
@media(max-width:560px) and (max-height:550px) and (orientation:landscape){
  #hud{--power-size:44px;--fire-size:56px;--touch-size:44px}
  #hud .combat-actions{gap:12px}
  #hud .power-statuses{gap:6px}
  #hud #touch-controls{gap:8px}
}
@media(prefers-reduced-motion:reduce){#hud .dial-progress,#hud #shoot-button,#hud #touch-controls button{transition:none}#hud #shoot-button:not(:disabled):active,#hud #shoot-button.firing,#hud #touch-controls button:active{transform:none}}