/* Scoped to the new 3D layer. Classic continues to use its original DOM/CSS. */
#hud3d { display:none; }
body:not(.classic-mode) #player-hud,
body:not(.classic-mode) .top-actions,
body:not(.classic-mode) #settings-toggle { display:none !important; }
body:not(.classic-mode) #hud3d { display:block; }
.hud3d { position:fixed; z-index:12; top:66px; left:24px; right:24px; pointer-events:none; color:#eff8ff; }
.hud3d * { box-sizing:border-box; }
.hud3d [hidden] { display:none !important; }
.hud3d-upper { display:grid; grid-template-columns:minmax(0,1fr) 248px minmax(0,1fr); align-items:center; gap:24px; }
.hud3d-player { position:relative; width:100%; max-width:360px; aspect-ratio:4.5; container-type:inline-size; color:var(--hud3d-color,#ff9900); filter:drop-shadow(0 4px 6px #0009); }
.hud3d-player--right { justify-self:end; }
.hud3d-art { display:block; width:100%; height:100%; overflow:visible; }
.hud3d-name { position:absolute; left:27.78%; right:8.33%; top:28%; height:35%; display:flex; align-items:center; justify-content:center; gap:.3em; min-width:0; font:750 clamp(11px,7cqw,25px)/1.1 Inter,system-ui,sans-serif; letter-spacing:.015em; color:#f3f8fb; text-shadow:0 1px 2px #000; }
.hud3d-player--right .hud3d-name { left:8.33%; right:27.78%; }
.hud3d-name-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hud3d-ai-prefix { color:var(--hud3d-color); flex:none; }
.hud3d-ring-neutral { opacity:.5; }
.hud3d-ring-turn, .hud3d-ring-progress { fill:none; stroke:currentColor; stroke-width:7.5; opacity:0; filter:drop-shadow(0 0 2px currentColor); }
.hud3d-player.is-turn .hud3d-ring-turn { opacity:.95; }
.hud3d-player.is-turn.is-ai:not(.is-thinking) .hud3d-ring-turn { animation:hud3d-breathe 3.6s ease-in-out infinite; }
.hud3d-player.is-thinking .hud3d-ring-turn { opacity:0; animation:none; }
.hud3d-player.is-thinking .hud3d-ring-neutral { opacity:.2; }
.hud3d-player.is-thinking .hud3d-ring-progress { opacity:1; }
@keyframes hud3d-breathe { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.hud3d.is-low-power .hud3d-ring-turn { animation:none !important; }
@media (prefers-reduced-motion:reduce) { .hud3d-ring-turn { animation:none !important; } }
.hud3d-actions { display:flex; gap:12px; align-items:center; justify-content:center; pointer-events:auto; }
.hud3d-swap { grid-column:2; display:flex; justify-content:center; pointer-events:auto; }
.hud3d-swap:not(:has(> :not([hidden]))) { display:none; }
.hud3d-swap .swap-action { position:static; transform:none; }
.hud3d-actions button { position:relative; display:grid; place-items:center; width:40px; height:40px; min-width:40px; padding:8px; border:1px solid #547d94; border-radius:8px; color:#f0f8fc; background:linear-gradient(150deg,#284b61 0%,#0a1c28 8%,#020d15 65%,#173e53); box-shadow:inset 0 0 0 2px #03101c,inset 0 1px 0 #c2ebff,0 3px 8px #0008; cursor:pointer; }
.hud3d-actions button:hover:not(:disabled), .hud3d-actions button:focus-visible { border-color:#8fe3fc; background:linear-gradient(150deg,#39708b,#061824 50%,#144761); outline:2px solid #71d5ef; outline-offset:2px; }
.hud3d-actions button:disabled { opacity:.35; cursor:default; }
.hud3d-actions svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hud3d-advantage { position:relative; width:min(640px,100%); aspect-ratio:640/72; margin:18px auto 0; container-type:inline-size; filter:drop-shadow(0 3px 6px #0009); }
.hud3d-adv-art { display:block; width:100%; height:100%; }
.hud3d-adv-title { position:absolute; top:4%; left:35%; right:35%; color:#dceaf3; text-align:center; font:600 clamp(7px,1.65cqw,11px)/1 Inter,system-ui,sans-serif; letter-spacing:.24em; }
.hud3d-adv-name { position:absolute; top:42%; height:34%; width:15.625%; display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; color:#f1f8fb; font:650 clamp(10px,2.5cqw,16px)/1 Inter,system-ui,sans-serif; }
.hud3d-adv-name--left { left:0; }
.hud3d-adv-name--right { right:0; }
.hud3d-adv-name-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud3d-turn { color:var(--hud3d-color); flex:none; font-size:.8em; filter:drop-shadow(0 0 2px var(--hud3d-color)); }
.hud3d-fill-left { fill:var(--hud3d-left); }
.hud3d-fill-right { fill:var(--hud3d-right); }
.hud3d-gain { fill:color-mix(in srgb,var(--hud3d-gain-color) 78%,white); stroke:#fff9; stroke-width:1; }
.hud3d-chevrons { fill:none; stroke:var(--hud3d-gain-color); stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 1px 1px #000); }
.hud3d-marker-previous { fill:none; stroke:#d6e1e9; stroke-width:1; opacity:.5; }
.hud3d-marker-current { fill:none; stroke:#effaff; stroke-width:2; filter:drop-shadow(0 0 1px #fff); }
.hud3d-marker-preview { fill:none; stroke:#fff; stroke-width:3.2; filter:drop-shadow(0 0 3px var(--hud3d-gain-color)); }
@media (max-width:760px) {
  .hud3d { top:max(8px,env(safe-area-inset-top)); left:12px; right:12px; }
  .hud3d-upper { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
  .hud3d-actions { grid-column:1/-1; grid-row:1; }
  .hud3d-swap { grid-column:1/-1; grid-row:3; }
  .hud3d-player { grid-row:2; }
  .hud3d-player--right { grid-column:2; }
  .hud3d-advantage { margin-top:12px; }
  .hud3d-adv-name { gap:3px; padding:0 3px; }
}

/* One viewport anchor; every bottom overlay participates in normal layout. */
.hud3d-bottom { position:fixed; left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:max(8px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,640px) minmax(0,1fr); align-items:end; gap:8px 12px; }
.hud3d-bottom-main, .hud3d-context { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.hud3d-context:empty, .hud3d-context:not(:has(> :not([hidden]):not(.toast:not(.show)):not(.material-lab-labels:not(.show)))) { display:none; }
.hud3d-bottom .hud3d-advantage { margin:0; flex:none; }
.hud3d-bottom-extra, .hud3d-bottom-map { min-width:0; }
.hud3d-bottom-map { display:flex; justify-content:flex-end; }
.hud3d-bottom-help { grid-column:1/-1; text-align:center; }
.hud3d-bottom .ui { position:static !important; inset:auto !important; transform:none !important; max-width:100%; margin:0; overflow-wrap:anywhere; }
.hud3d-bottom .toast:not(.show) { display:none; }
.hud3d-bottom .toast, .hud3d-bottom .evaluation-preview { text-align:center; width:fit-content; }
.hud3d-bottom .material-lab-labels { width:100%; gap:8px; }
.hud3d-bottom #minimap, .hud3d-bottom #compact-debug-overlay { height:auto !important; aspect-ratio:1; max-width:100%; }
.hud3d-bottom #minimap { pointer-events:auto; }
.hud3d-bottom .keys { line-height:1.4; }
@media (max-width:1000px) {
  .hud3d-bottom { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hud3d-bottom-main { grid-column:1/-1; grid-row:2; }
  .hud3d-bottom-extra, .hud3d-bottom-map { grid-row:1; }
  .hud3d-bottom-extra:not(:has(> :not([hidden]))), .hud3d-bottom-map:not(:has(> [style*="display: block"])) { display:none; }
  .hud3d-bottom #minimap, .hud3d-bottom #compact-debug-overlay { max-height:20dvh; width:auto !important; }
  .hud3d-bottom-help { grid-row:3; }
}

/* Exact Hint trial progress, clockwise around the frame; never over the icon. */
.hud3d-actions .hud3d-hint-progress { position:absolute; inset:-1px; width:40px; height:40px; pointer-events:none; stroke:#b8f2ff; stroke-width:2; stroke-linecap:butt; opacity:0; }
.hud3d-actions button.is-hint-running { opacity:1; }
.hud3d-actions .is-hint-running .hud3d-hint-progress { opacity:1; }
.hud3d-actions .is-hint-complete .hud3d-hint-progress { animation:hud3d-hint-done .7s ease-out forwards; }
@keyframes hud3d-hint-done { from { opacity:1; } to { opacity:0; } }
.hud3d.is-low-power .is-hint-complete .hud3d-hint-progress { animation:none; opacity:1; }
@media (prefers-reduced-motion:reduce) { .hud3d-actions .is-hint-complete .hud3d-hint-progress { animation:none; opacity:1; } }
@media (max-width:760px) { .hud3d-actions { gap:8px; } }