* {
  box-sizing: border-box;
}

.hud-btn:disabled { opacity:.4; cursor:default; }
#ally-link-status { max-width:240px; font-size:12px; line-height:1.5; }
#pause-indicator { position:fixed; top:45%; left:50%; transform:translate(-50%,-50%); padding:18px 28px; background:rgba(10,18,30,.9); border:1px solid #64748b; border-radius:12px; text-align:center; pointer-events:none; z-index:20; }
#pause-indicator span { display:block; margin-top:8px; color:#94a3b8; font-size:12px; }
#play-help { width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; border:1px solid #475569; border-radius:16px; padding:24px; background:#111b2b; color:#e2e8f0; font-size:13px; line-height:1.65; }
#play-help::backdrop { background:rgba(5,10,20,.8); }
.help-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.help-heading h2 { margin:0; font-size:21px; }
#play-help h3 { margin:22px 0 8px; color:#7dd3fc; font-size:14px; }
.help-controls { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; padding:12px; background:#172337; border-radius:8px; }
.help-controls dd { margin:0; color:#94a3b8; }
.help-skills { list-style:none; padding:0; }
.help-skills li { margin:8px 0; }
.help-skills i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; }
.help-footnote { color:#94a3b8; font-size:11px; }

/* R-CTRL-008: no double-tap page zoom on any element; explicit touch-action rules still win. */
:where(*) { touch-action: manipulation; }

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #11151c;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #f0f0f0;
  user-select: none;
}

#game-canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: crosshair;
  touch-action:none;
}

#load-error {
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(180, 20, 20, 0.9);
  padding: 20px 28px;
  border-radius: 8px;
  max-width: 500px;
  text-align: center;
  z-index: 100;
}

.hud-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #f0f0f0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.hud-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* v0.6: a custom in-page confirm for Full Reset instead of window.confirm() — the native
   dialog was found to be unreliable (some embedding/automation contexts auto-dismiss it as
   Cancel with no visible sign anything happened, which is exactly what made the button look
   broken). Same visual language as the Game Over overlay. */
#reset-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, 0.75);
  z-index: 45;
  align-items: center;
  justify-content: center;
}

.confirm-box {
  background: rgba(17, 21, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 24px 28px;
  text-align: center;
  max-width: 320px;
}

.confirm-box p {
  margin: 0 0 18px;
  line-height: 1.5;
}

.confirm-sub {
  font-size: 12px;
  opacity: 0.65;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* v0.6 spec §14-15: Game Over overlay with the local Top 10 scoreboard */
#gameover-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, 0.88);
  z-index: 40;
  align-items: center;
  justify-content: center;
}

.gameover-box {
  background: rgba(17, 21, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 32px 40px;
  text-align: center;
  min-width: 280px;
}

.gameover-box h1 {
  margin: 0 0 12px;
  font-size: 32px;
  letter-spacing: 0.08em;
  color: #f87171;
}

.gameover-box h2 {
  margin: 20px 0 8px;
  font-size: 14px;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

#gameover-score {
  font-size: 18px;
  font-weight: 700;
  color: #fde047;
}

#scoreboard-list {
  list-style: decimal;
  text-align: left;
  display: inline-block;
  margin: 0 auto;
  padding-left: 28px;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  line-height: 1.6;
}

.gameover-box .hud-btn {
  display: block;
  margin: 20px auto 0;
  font-size: 14px;
  padding: 8px 18px;
}

#unlock-banner {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fde047;
  text-shadow: 0 0 16px rgba(253, 224, 71, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 20;
}

#defeat-banner {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: 700;
  color: #f87171;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 20;
}

#controls-hint {
  pointer-events: none;
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 12px;
  border-radius: 12px;
  z-index: 10;
}

#debug-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: rgba(10, 12, 18, 0.92);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  padding: 16px;
  z-index: 30;
  font-size: 13px;
}

#debug-panel h2 {
  font-size: 16px;
  margin: 0 0 12px;
}

#debug-panel .hint {
  font-size: 11px;
  opacity: 0.5;
  font-weight: normal;
}

.debug-section {
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}

.debug-section h3 {
  font-size: 13px;
  margin: 0 0 8px;
  color: #60a5fa;
}

.debug-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.debug-row span {
  opacity: 0.8;
  flex: 1;
}

.debug-row input[type="number"] {
  width: 90px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
}

/* v0.6 follow-up: the Gameplay section's Ally Absorption toggle */
.debug-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #4ade80;
  cursor: pointer;
}

/* AI inspector (F2, debug only) */
#ai-inspector {
  display: none;
  position: fixed;
  right: 12px;
  bottom: 28px;
  width: 620px;
  max-width: calc(100vw - 24px);
  max-height:calc(100dvh - 48px);
  overflow:auto;
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(10, 12, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  z-index: 31;
  font: 11px/1.3 monospace;
  color: #e5e7eb;
}
#ai-inspector .ai-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
#ai-inspector .ai-head select { margin-left: auto; font: inherit; background: #111827; color: inherit; }
#ai-inspector .hint { opacity: 0.55; }
#ai-inspector table.ai-detail { width: 100%; margin-bottom: 8px; border-collapse: collapse; }
#ai-inspector table.ai-detail td { padding: 1px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
#ai-inspector table.ai-detail td:first-child { opacity: 0.6; width: 38%; }
#ai-inspector .ai-row {
  display: grid;
  grid-template-columns: 46px 22px 62px 78px 78px 86px 34px 40px 52px 28px;
  gap: 4px;
  padding: 2px 4px;
  cursor: pointer;
  white-space: nowrap;
}
#ai-inspector .ai-row:hover { background: rgba(255, 255, 255, 0.07); }
#ai-inspector .ai-row.sel { background: rgba(125, 211, 252, 0.2); }
#ai-inspector .ai-row.hot { color: #fca5a5; }
#ai-inspector .ai-th { opacity: 0.6; cursor: default; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
#ai-inspector .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
#ai-select-ring {
  display: none;
  position: fixed;
  border: 2px solid #7dd3fc;
  border-radius: 50%;
  pointer-events: none;
  z-index: 29;
}

/* NEXT build marker: distinguishes this site from the original /ball-game/ release */
#build-id {
  position: fixed;
  right: 8px;
  bottom: 6px;
  z-index: 5;
  font: 11px/1.2 monospace;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* Optional observation panels. They never block the centre of the playfield. */
[hidden] { display: none !important; }

.observer-panel {
  position: fixed; right: 14px; z-index: 12; width: 252px;
  background: rgba(12, 18, 28, .88); border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 10px; padding: 12px; font-size: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
#minimap-panel { width:180px; padding:8px; }
#minimap-canvas { display:block; width:100%; aspect-ratio:1; cursor:crosshair; border:1px solid #334155; border-radius:4px; }
.minimap-heading { display:flex; justify-content:space-between; color:#cbd5e1; font-size:11px; margin-bottom:6px; }
.minimap-heading span { color:#64748b; }
.minimap-key { color:#94a3b8; font-size:9px; margin-top:6px; }
@media(max-width:700px) { #minimap-panel { width:136px; } }
#live-ranking { top: 14px; }
#ecology-panel { bottom: 30px; max-height: min(400px, 48vh); overflow-y: auto; }
.observer-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.observer-heading strong { letter-spacing: .06em; font-size: 13px; }
.observer-heading > span { color: #94a3b8; margin-left: auto; font-size: 11px; }
.observer-heading button { color: #cbd5e1; background: transparent; border: 0; cursor: pointer; font-size: 20px; }
#live-ranking-list, #apex-current, #apex-events, #duel-events { list-style: none; padding: 0; margin: 0; }
.rank-row {
  display: grid; grid-template-columns: 18px 8px 1fr auto; gap: 7px; align-items: center;
  width: 100%; padding: 6px 3px; border: 0; border-radius: 4px;
  background: transparent; color: #e2e8f0; font: inherit; text-align: left; cursor: pointer;
}
.rank-row:disabled { opacity: 1; cursor: default; }
.rank-row:not(:disabled):hover, .rank-row:focus-visible { background: rgba(125,211,252,.14); outline: 1px solid #7dd3fc; }
.rank-row.is-player { color: #7dd3fc; background: rgba(125,211,252,.08); }
.rank-number { color: #94a3b8; font-variant-numeric: tabular-nums; }
.rank-dot { width: 7px; height: 7px; border-radius: 50%; }
.rank-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rank-score { font-variant-numeric: tabular-nums; }
#my-rank { border-top: 1px solid rgba(148,163,184,.2); padding-top: 8px; margin-top: 6px; color: #7dd3fc; }
#ecology-summary { color: #cbd5e1; margin: 0 0 10px; }
#ecology-roles { display:flex; gap:4px; margin-bottom:8px; }
.ecology-role { flex:1; min-width:0; padding:6px 3px; border-radius:5px; background:rgba(148,163,184,.08); text-align:center; }
.ecology-role span { display:block; color:#94a3b8; font-size:10px; }
.ecology-role strong { font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; }
#ecology-companions { color:#94a3b8; font-size:11px; line-height:1.5; margin:0 0 10px; }
#ecology-periods { display: flex; gap: 6px; }
.period { flex: 1; padding: 7px; background: rgba(148,163,184,.08); border-radius: 6px; }
.period span { display: block; color: #94a3b8; margin-bottom: 4px; font-size: 11px; }
.period strong { font-weight: 500; font-variant-numeric: tabular-nums; }
#ecology-longest { font-size: 11px; color: #94a3b8; }
.apex-holder { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
#ecology-panel h3 { font-size: 11px; color: #94a3b8; font-weight: 500; margin: 12px 0 6px; }
.apex-event { display: flex; align-items: baseline; gap: 7px; padding: 4px 0; font-size: 11px; }
.event-time { flex: 0 0 46px; color: #64748b; }
.empty-note { color: #94a3b8; padding: 6px 0; font-size: 11px; }
@media (max-height: 720px) and (min-width: 701px) {
  #ecology-panel { right: 282px; max-height: 55vh; }
}

@media (max-width: 700px) {
  .observer-panel { width: 210px; right: 8px; padding: 9px; font-size: 11px; }
  #live-ranking { top: 8px; max-height: 30vh; overflow-y: auto; }
  #ecology-panel { bottom: 42px; max-height: 40vh; }
  #ai-inspector { right: 8px !important; width: calc(100vw - 16px); }
}
@media (max-width: 700px) {
  #live-ranking { max-height: none; overflow: visible; }
  #live-ranking-list { max-height: 23vh; overflow-y: auto; }
  #ecology-panel { bottom: 78px; }
}

#player-setup {
  width: min(440px, calc(100vw - 32px)); padding: 30px; border-radius: 20px;
  border: 1px solid #334155; background: #111b2b; color: #e2e8f0;
  box-shadow: 0 24px 100px rgba(0,0,0,.6); max-height: calc(100dvh - 32px); overflow-y: auto;
}
#player-setup::backdrop { background: rgba(5,10,20,.8); backdrop-filter: blur(5px); }
.setup-eyebrow { color: #7dd3fc; letter-spacing: .15em; font-size: 11px; margin: 0 0 12px; }
#player-setup h1 { font-size: 24px; line-height: 1.3; margin: 0 0 22px; }
.player-identity-preview { display: flex; align-items: center; gap: 12px; padding: 12px; background: #172337; border-radius: 10px; margin-bottom: 20px; }
#player-preview { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); flex-shrink: 0; }
#player-name-preview { overflow-wrap: anywhere; }
.setup-name-label { display: block; font-size: 13px; margin-bottom: 8px; }
#player-name { width: 100%; background: #0b1321; border: 1px solid #475569; padding: 11px 12px; border-radius: 8px; color: #fff; font: inherit; user-select: text; }
#player-name:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
#player-name-hint, .setup-footnote { font-size: 11px; color: #94a3b8; line-height: 1.5; }
#player-setup fieldset { border: 0; padding: 0; margin: 22px 0; }
#player-setup legend { font-size: 13px; margin-bottom: 10px; }
#player-colors { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.player-color { cursor: pointer; display: grid; justify-items: center; gap: 7px; font-size: 11px; position: relative; padding: 10px 3px; border: 1px solid #334155; border-radius: 8px; }
.player-color input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.color-swatch { display: block; width: 24px; height: 24px; border-radius: 50%; pointer-events: none; }
.player-color:has(input:checked) { border-color: #7dd3fc; background: #22344a; }
.player-color:has(input:focus-visible) { outline: 2px solid #7dd3fc; outline-offset: 2px; }
#player-start { width: 100%; border: 0; border-radius: 9px; padding: 13px; background: #7dd3fc; color: #0b1628; font: 600 15px system-ui; cursor: pointer; }
#player-start:hover { background: #bae6fd; }
#player-start:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.setup-footnote { text-align: center; margin-bottom: 0; }
@media (max-width: 450px) { #player-setup { padding: 22px; } #player-setup h1 { font-size: 21px; } }
.ranking-modes { display: flex; margin-left: auto; gap: 4px; }
.ranking-modes button { margin: 0; border: 1px solid #334155; border-radius: 4px; padding: 4px 7px; font-size: 11px; }
.ranking-modes button[aria-pressed="true"] { color: #7dd3fc; border-color: #7dd3fc; background: #1a2b40; }
.rank-values { text-align: right; }
.rank-score, .rank-secondary { display: block; }
.rank-secondary { color: #94a3b8; font-size: 9px; line-height: 1.3; margin-top: 2px; }
#live-ranking { max-height: calc(100vh - 52px); overflow-y: auto; }
@media (max-width: 700px) { #live-ranking { max-height: 36vh; } }
@media (min-width: 701px) { #ecology-panel { right: 282px; } }

#ecology-era, #ecology-duels { color:#cbd5e1; font-size:11px; line-height:1.5; margin:0 0 8px; }

#relic-text { color:#fde68a; font-size:11px; line-height:1.5; max-width:220px; }

#run-metrics-chart { display:block; width:100%; height:90px; }
#run-metrics-summary { font-size:11px; line-height:1.5; color:#cbd5e1; }

#game-canvas { height:100dvh; }

#live-ranking[data-layout="bar"] ol,#live-ranking[data-layout="bar"] .ranking-modes{display:none}
#live-ranking[data-layout="bar"]{width:200px}
#live-ranking[data-layout="compact"]{width:200px}
#live-ranking[data-layout="compact"] .rank-name{display:none}
#live-ranking[data-layout="compact"] .rank-secondary{display:none}
#live-ranking[data-layout="compact"] .rank-row{padding:2px 4px;min-height:20px}

@media(pointer:coarse){#ecology-panel,#debug-panel,#ai-inspector{max-height:65dvh;overflow:auto}}

body.mobile-minimal #debug-panel{z-index:20}

/* Keep the ranking layout switch small, including coarse-pointer global button rules. */
#ranking-layout{font-size:10px;padding:2px 5px;min-width:26px!important;min-height:24px!important;line-height:1.1;margin:0;flex:0 0 auto}
.rank-apex{color:#facc15;font-size:12px;flex:0 0 12px;text-shadow:0 0 5px #facc1588}

html{height:100%}body{height:100dvh;width:100%;overscroll-behavior:none}#game-canvas{position:fixed;inset:0;width:100%;height:100%}

@media(pointer:coarse){.panel-moved{max-width:calc(100vw - 8px)}}

#ecology-panel .observer-heading,#live-ranking .observer-heading,#minimap-panel .minimap-heading,#debug-panel h2,#ai-inspector .ai-head,#play-help .help-heading{touch-action:none;cursor:grab}

.panel-moved .observer-heading,.panel-moved .ai-head{cursor:grabbing}

/* User: species color stays visible even in the minimal ranking. */
body.mobile-minimal #live-ranking:not(.minimal-open) .rank-dot{display:block!important;flex:none;width:8px;height:8px}

/* R-CTRL-003 portrait phone: the ranking comes first, the minimap is a tappable thumbnail, the ecology panel stacks under the ranking. */
#minimap-backdrop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45)}
#minimap-panel.expanded{left:50%!important;top:50%!important;right:auto!important;transform:translate(-50%,-50%);width:min(336px,calc(100vw - 48px));padding:10px;z-index:61}
#minimap-panel.expanded .minimap-key::after{content:' · 바깥을 탭하면 닫힘'}
@media(pointer:coarse) and (orientation:portrait){
  #minimap-panel.thumb{width:104px;padding:4px}
  #minimap-panel.thumb .minimap-heading{display:none}
  #minimap-panel.thumb .minimap-key{font-size:0;margin-top:2px;text-align:center}
  #minimap-panel.thumb .minimap-key::after{content:'탭하면 확대';font-size:8px}
  /* R-VIS-010: the ranking starts at 176px under the toggle tray; the dodge arc keeps the bottom ~230px */
  body.mobile-minimal #ecology-panel{top:238px;max-height:calc(100dvh - 468px)}
  body.mobile-minimal:has(#ecology-panel:not([hidden])) #live-ranking.minimal-open{max-height:30dvh}
  body.mobile-minimal:has(#live-ranking.minimal-open:not([hidden])) #ecology-panel{top:calc(184px + 30dvh);max-height:calc(100dvh - 414px - 30dvh)}
  body.mobile-minimal:has(#live-ranking[hidden]) #ecology-panel{top:176px;max-height:calc(100dvh - 406px)}
  body:not(.mobile-minimal) #ecology-panel{top:calc(184px + 30dvh);bottom:auto;max-height:calc(100dvh - 414px - 30dvh)}
}

/* R-CTRL-005: tutorial cards in the help dialog, first-run mode and the first-visit terrain hint. */
#tutorial-cards { display:grid; gap:10px; margin-top:14px; }
.tc-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.tc-tab { border:1px solid #334155; border-radius:999px; padding:5px 12px; background:#172337; color:#cbd5e1; font:inherit; font-size:13px; cursor:pointer; }
.tc-tab.active { border-color:#7dd3fc; background:#0c4a6e; color:#f0f9ff; font-weight:700; }
#play-help.tutorial-mode .tc-tabs, #play-help.tutorial-mode #help-guide { display:none; }
.tc-card { --tc-accent:#7dd3fc; min-height:190px; padding:14px 16px 12px; border:1px solid #334155; border-left:4px solid var(--tc-accent); border-radius:12px; background:#172337; }
.tc-head { display:flex; align-items:center; gap:10px; }
.tc-head h3 { margin:0 !important; color:#f8fafc !important; font-size:19px !important; }
.tc-dot { width:18px; height:18px; flex:none; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.tc-deck { margin-left:auto; color:#94a3b8; font-size:11px; letter-spacing:.04em; }
.tc-keys { margin:10px 0 4px; padding:6px 10px; border-radius:8px; background:#0b1322; color:var(--tc-accent); font-weight:700; font-size:13px; }
.tc-lines { margin:8px 0 0; padding-left:18px; display:grid; gap:4px; line-height:1.45; }
.tc-skill { display:grid; grid-template-columns:auto auto 1fr; align-items:baseline; gap:2px 8px; margin-top:10px; padding:8px 10px; border-radius:8px; background:#0b1322; }
.tc-skill b { color:var(--tc-accent); font-size:15px; }
.tc-skill span { color:#94a3b8; font-size:11px; }
.tc-skill p { grid-column:1 / -1; margin:0; color:#cbd5e1; font-size:13px; }
.tc-ai { margin:10px 0 0; color:#94a3b8; font-size:12px; }
.tc-card h4 { margin:12px 0 4px; color:#94a3b8; font-size:12px; letter-spacing:.04em; }
.tc-objects { margin:0; padding:0; list-style:none; display:grid; gap:4px; font-size:13px; }
.tc-objects strong { color:#bae6fd; }
.tc-objects li.danger strong { color:#fca5a5; }
.tc-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#tc-count { color:#94a3b8; font-size:12px; font-variant-numeric:tabular-nums; }
.tc-nav button:disabled { opacity:.4; cursor:default; }
#play-help.tutorial-mode #tc-next { border-color:#7dd3fc; color:#f0f9ff; }
#terrain-hint { --tc-accent:#7dd3fc; position:fixed; left:50%; top:96px; transform:translateX(-50%); z-index:13; display:flex; align-items:center; gap:10px; max-width:min(460px,calc(100vw - 32px)); padding:8px 8px 8px 14px; border:1px solid var(--tc-accent); border-radius:12px; background:rgba(2,6,23,.82); color:#e2e8f0; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,.35); }
#terrain-hint[hidden] { display:none; }
#terrain-hint-open { flex:none; border:1px solid #475569; border-radius:8px; padding:5px 9px; background:#172337; color:#e2e8f0; font:inherit; font-size:12px; cursor:pointer; }
@media (pointer:coarse) {
  #terrain-hint { top:30%; max-width:min(320px,calc(100vw - 32px)); font-size:12px; }
  #play-help.tutorial-mode { padding:16px; }
  .tc-card { min-height:0; }
}
/* ==========================================================================
   R-VIS-010 · B quiet HUD
   No panels during play: thin lines and shadowed text on the screen edges.
   Desktop: vitals top-left, era top-centre, rank + pause/help/menu top-right,
   ability rings bottom-centre, toggle tray bottom-right.
   Phones: the top band holds vitals, era, buttons and the toggle tray (touches
   starting there never move or aim); left-half drag moves, right-half drag aims
   and release attacks; dodge is the big button at the right-thumb rest with
   E and R on its arc; holding dodge sprints (the gauge sits under HP).
   ========================================================================== */
:root {
  --b-fg:#f8fafc; --b-dim:#cbd5e1; --b-mute:#94a3b8;
  --b-shadow:0 1px 2px rgba(0,0,0,.75),0 0 8px rgba(0,0,0,.4);
  --b-scrim:rgba(9,13,22,.42); --b-chip:rgba(9,13,22,.7); --b-edge:rgba(255,255,255,.45);
  --b-hp:#f87171; --b-shield:#cbd5e1; --b-sprint:#7dd3fc; --b-absorb:#86efac; --b-companion:#c4b5fd;
  --b-font:'IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --b-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --safe-t:env(safe-area-inset-top,0px); --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px);
}
html, body { font-family:var(--b-font); }
.sr-only { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- vitals (top-left) ---- */
#hud { position:fixed; z-index:10; top:calc(20px + var(--safe-t)); left:calc(24px + var(--safe-l)); width:272px; display:flex; flex-direction:column; gap:8px; pointer-events:none; color:var(--b-fg); text-shadow:var(--b-shadow); }
.hud-vitals { display:flex; flex-direction:column; gap:6px; }
.vitals-id { display:flex; align-items:center; gap:8px; font-size:14px; }
#hud-color { width:10px; height:10px; border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.35); }
#hud-name { font-weight:700; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#hud-sub { font-size:12px; color:var(--b-dim); white-space:nowrap; }
.vitals-hp { display:flex; align-items:baseline; gap:8px; }
#hp-text { font-family:var(--b-mono); font-variant-numeric:tabular-nums; font-size:26px; font-weight:600; line-height:1; }
#hp-max { font-size:13px; font-weight:500; color:var(--b-dim); }
#hud-lives { margin-left:auto; display:flex; gap:4px; align-self:center; }
#hud-lives i { width:8px; height:8px; border-radius:50%; background:var(--b-hp); }
#hud-lives i.lost { background:none; box-shadow:inset 0 0 0 1.5px rgba(248,113,113,.55); }
.hp-bar-outer { width:100%; height:5px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden; display:flex; }
.hp-bar-fill { height:100%; width:100%; flex:none; background:var(--b-hp); transition:width .1s linear; }
.hp-bar-shield { height:100%; width:0; flex:none; background:var(--b-shield); transition:width .1s linear; }
#hp-shield-text { color:var(--b-shield); }
.sprint-bar-outer { width:100%; height:5px; margin-top:-1px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden; }
#sprint-gauge[data-state="locked"] { background:rgba(255,255,255,.08); outline:1px dashed rgba(255,255,255,.18); outline-offset:-1px; }
.sprint-bar-fill { height:100%; width:100%; background:var(--b-sprint); transition:width .1s linear; }
#sprint-gauge[data-state="active"] .sprint-bar-fill { background:#e0f2fe; box-shadow:0 0 6px var(--b-sprint); }
#sprint-gauge[data-state="exhausted"] .sprint-bar-fill { background:#64748b; }
#charge-pips { display:none; }
.pips { display:inline-flex; gap:3px; }
.pips.locked { font-size:10px; color:var(--b-mute); }
.pip { font-size:0; width:7px; height:7px; border-radius:50%; box-shadow:inset 0 0 0 1.5px #fecaca; }
.pip.filled { background:#fecaca; }
#growth-goal-text { font-size:11px; line-height:1.4; color:var(--b-dim); }
.growth-goal-track { height:2px; border-radius:1px; overflow:hidden; background:rgba(255,255,255,.18); }
#growth-goal-fill { height:100%; width:0; background:var(--b-sprint); transition:width .15s linear; }
#relic-text { font-size:11px; line-height:1.4; color:#fde68a; }
.hud-detail { display:none !important; }
body:not(.mobile-minimal) .hud-detail { display:flex !important; }
.stats { gap:12px; font-size:12px; color:var(--b-dim); }
.stats span { font-family:var(--b-mono); color:var(--b-fg); }
body:not(.mobile-minimal) #ally-link-status { display:block !important; font-size:12px; line-height:1.5; color:var(--b-companion); }

/* ---- era banner (top-centre) ---- */
#era-status { --era-color:#86efac; position:fixed; z-index:12; top:calc(18px + var(--safe-t)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; max-width:min(440px,calc(100vw - 680px)); min-width:220px; pointer-events:none; color:var(--b-fg); text-shadow:var(--b-shadow); text-align:center; }
#era-status[data-phase="competition"] { --era-color:#fcd34d; }
#era-status[data-phase="war"] { --era-color:#fda4af; }
#era-status[data-phase="decline"] { --era-color:#e9d5ff; }
#era-status[data-phase="off"] { --era-color:#94a3b8; }
.era-line { display:flex; align-items:baseline; gap:14px; }
#era-phase-name { font-size:24px; font-weight:500; letter-spacing:.32em; margin-right:-.32em; color:var(--era-color); }
#era-countdown { font:500 16px var(--b-mono); font-variant-numeric:tabular-nums; color:#e2e8f0; }
.era-progress { width:220px; max-width:100%; height:2px; border-radius:1px; overflow:hidden; background:rgba(255,255,255,.22); }
#era-progress-fill { height:100%; background:var(--era-color); }
#era-status[data-transition="true"] #era-phase-name { text-shadow:var(--b-shadow),0 0 14px var(--era-color); }
#era-event { display:flex; align-items:center; justify-content:center; gap:8px; max-width:100%; font-size:14px; font-weight:500; color:var(--era-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#era-event[hidden] { display:none; }
#era-event::before { content:''; flex:none; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 25%,transparent); }
#era-status[data-event="doom-warning"] #era-event { color:#fcd34d; }
#era-status[data-event="doom"] #era-event { color:#fca5a5; }
#era-status[data-event="war"] #era-event, #era-status[data-event="war-phase"] #era-event { color:#fda4af; }
@media (max-width:1040px) and (not (pointer:coarse)) { #era-status { max-width:calc(100vw - 600px); min-width:160px; } #era-phase-name { font-size:19px; } #era-event { font-size:12px; } }

/* ---- top-right: rank, pause, help, menu ---- */
#hud-top { position:fixed; z-index:25; top:calc(12px + var(--safe-t)); right:calc(16px + var(--safe-r)); display:flex; align-items:center; gap:2px; }
.icon-btn { width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:10px; background:none; color:var(--b-fg); cursor:pointer; filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)); }
.icon-btn:hover { background:rgba(255,255,255,.1); }
.icon-btn:focus-visible, .tray-btn:focus-visible, #quick-ranking:focus-visible, .menu-grid button:focus-visible { outline:2px solid #e0f2fe; outline-offset:2px; }
.icon-btn:disabled { opacity:.4; cursor:default; }
#pause-btn .i-play, #pause-btn[aria-pressed="true"] .i-pause { display:none; }
#pause-btn[aria-pressed="true"] .i-play { display:block; }
#quick-ranking { height:44px; display:flex; align-items:baseline; gap:3px; padding:0 8px; border:0; border-radius:10px; background:none; color:var(--b-fg); text-shadow:var(--b-shadow); font-family:var(--b-mono); font-variant-numeric:tabular-nums; cursor:pointer; }
#quick-ranking:hover { background:rgba(255,255,255,.1); }
#rank-now { font-size:28px; font-weight:600; line-height:1; }
#rank-total { font-size:13px; color:var(--b-dim); }

/* ---- ranking: quiet rows under the rank number; the panel in detail mode or when opened ---- */
#live-ranking { font-family:var(--b-font); }
.observer-panel { background:rgba(9,13,22,.8); border:0; box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.25); }
body:not(.mobile-minimal) #live-ranking, body.mobile-minimal #live-ranking.minimal-open { top:calc(64px + var(--safe-t)); right:calc(16px + var(--safe-r)); max-height:calc(100dvh - 180px); overflow:auto; }
body.mobile-minimal #live-ranking:not(.minimal-open) { display:block; position:fixed; top:calc(64px + var(--safe-t)); right:calc(24px + var(--safe-r)); width:200px; max-height:none; overflow:visible; background:none; border:0; box-shadow:none; padding:0; pointer-events:none; font-size:12px; text-shadow:var(--b-shadow); }
body.mobile-minimal #live-ranking[hidden] { display:none !important; }
body.mobile-minimal #live-ranking:not(.minimal-open) .observer-heading, body.mobile-minimal #live-ranking:not(.minimal-open) #my-rank, body.mobile-minimal #live-ranking:not(.minimal-open) .rank-secondary { display:none; }
body.mobile-minimal #live-ranking:not(.minimal-open) ol { display:block; margin:0; padding:0; list-style:none; }
body.mobile-minimal #live-ranking:not(.minimal-open) .rank-row { display:grid; grid-template-columns:18px 8px 12px minmax(0,1fr) 44px; gap:4px; height:18px; padding:0; background:none; border:0; color:#e2e8f0; font-size:12px; line-height:18px; }
body.mobile-minimal #live-ranking:not(.minimal-open) .rank-row.is-player { color:#bae6fd; }
body.mobile-minimal #live-ranking:not(.minimal-open) .rank-name { display:block; }
body.mobile-minimal #live-ranking:not(.minimal-open) .rank-score { font-family:var(--b-mono); text-align:right; }
body.mobile-minimal #live-ranking:not(.minimal-open) li:nth-child(n+11) { display:none; }

/* ---- desktop ability rings (bottom-centre) ---- */
#ability-bar { position:fixed; z-index:10; left:50%; bottom:calc(20px + var(--safe-b)); transform:translateX(-50%); display:flex; gap:18px; padding:10px 18px 8px; border-radius:16px; background:radial-gradient(ellipse at center,rgba(9,13,22,.38),rgba(9,13,22,0) 72%); pointer-events:none; color:var(--b-fg); text-shadow:var(--b-shadow); }
.ab { display:flex; flex-direction:column; align-items:center; gap:3px; width:64px; }
.ab-ring { --p:100; --ab-color:#e0f2fe; position:relative; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:rgba(9,13,22,.55); }
.ab-ring::before { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--ab-color) calc(var(--p) * 1%),rgba(255,255,255,.18) 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px)); }
.ab-label { position:relative; font-size:18px; font-weight:700; font-family:var(--b-mono); }
.ab-dots { display:flex; gap:3px; min-height:6px; }
.ab-dots i { width:6px; height:6px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--b-dim); }
.ab-dots i.on { background:var(--b-fg); box-shadow:none; }
.ab-name { max-width:76px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#e2e8f0; }
.ab-key { font:500 10px var(--b-mono); color:var(--b-mute); }
.ab[data-state="locked"] { opacity:.45; }
.ab[data-state="cooldown"] .ab-label, .ab[data-state="busy"] .ab-label, .ab[data-state="frozen"] .ab-label { opacity:.6; }
.ab[data-state="casting"] .ab-ring { box-shadow:0 0 12px var(--ab-color); }

/* ---- toggle tray: absorb first, three inline, the rest behind ⋯ ---- */
#toggle-tray { position:fixed; z-index:14; right:calc(24px + var(--safe-r)); bottom:calc(24px + var(--safe-b)); display:flex; align-items:center; gap:6px; }
.tray-btn { height:44px; padding:0 14px; border:0; border-radius:22px; background:var(--b-scrim); box-shadow:inset 0 0 0 2px var(--b-edge); color:var(--b-fg); font:700 13px var(--b-font); text-shadow:var(--b-shadow); white-space:nowrap; cursor:pointer; touch-action:manipulation; }
.tray-btn:hover:not(:disabled) { background:rgba(9,13,22,.6); }
.tray-btn:disabled { opacity:.45; cursor:default; }
#quick-absorb[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--b-absorb); color:#bbf7d0; }
#companion-invite, #companion-leave { box-shadow:inset 0 0 0 2px rgba(196,181,253,.8); color:#ddd6fe; }
#auto-companion[aria-pressed="true"] { box-shadow:inset 0 0 0 2px var(--b-absorb); color:#bbf7d0; }
#tray-more { width:44px; padding:0; font-size:18px; line-height:1; }
#tray-more[aria-expanded="true"] { background:rgba(9,13,22,.7); }
#tray-overflow { position:absolute; right:0; bottom:calc(100% + 8px); display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
#tray-overflow[hidden] { display:none; }

/* ---- menu (pauses like help) ---- */
#hud-menu { width:min(380px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:18px; border:0; border-radius:16px; background:rgba(9,13,22,.94); color:var(--b-fg); font-family:var(--b-font); box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.5); }
#hud-menu::backdrop { background:rgba(2,6,15,.55); }
.menu-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.menu-head h2 { margin:0; font-size:18px; font-weight:700; }
#play-time { margin-left:auto; font:500 12px var(--b-mono); color:var(--b-mute); }
#menu-close { font-size:22px; filter:none; }
.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.menu-grid + .menu-grid { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); }
.menu-grid button { min-height:44px; padding:0 12px; border:0; border-radius:10px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); color:var(--b-fg); font:500 13px var(--b-font); text-align:left; cursor:pointer; }
.menu-grid button:hover { background:rgba(255,255,255,.12); }
.menu-label { grid-column:1/-1; margin:0; font-size:12px; color:rgba(224,242,254,.72); }
.menu-grid button[aria-pressed="true"] { box-shadow:inset 0 0 0 1.5px #7dd3fc; color:#e0f2fe; }
#reset-btn { color:#fca5a5; }

/* ---- other overlays in the B voice ---- */
#controls-hint { display:none; }
#build-id { color:rgba(255,255,255,.4); }
body.mobile-minimal #player-info, body.mobile-minimal #build-id { display:none !important; }
#pause-indicator { background:rgba(9,13,22,.88); border:0; box-shadow:0 0 0 1px rgba(255,255,255,.14); font-family:var(--b-font); }
#unlock-banner, #defeat-banner { font-family:var(--b-font); letter-spacing:.12em; }
#starter-guide { position:fixed; z-index:9; left:50%; bottom:calc(142px + var(--safe-b)); transform:translateX(-50%); max-width:460px; color:#e2e8f0; font:12px/1.5 var(--b-font); text-align:center; text-shadow:var(--b-shadow); pointer-events:none; }
/* R-CTRL-007 situational tips: same slot as the start guide (which they wait for), never pausing. */
#situational-tip { position:fixed; z-index:12; left:50%; bottom:calc(142px + var(--safe-b)); transform:translateX(-50%); display:flex; align-items:center; gap:12px; max-width:min(460px,calc(100vw - 32px)); padding:9px 10px 9px 14px; border:1px solid rgba(250,204,21,.55); border-left:3px solid #facc15; border-radius:12px; background:rgba(9,13,22,.86); color:#e2e8f0; font:12.5px/1.45 var(--b-font); cursor:pointer; animation:tip-in .18s ease-out; }
#situational-tip > div { display:grid; gap:2px; min-width:0; }
#situational-tip strong { color:#fde68a; font-size:13px; }
#situational-tip-off { flex:none; border:1px solid #475569; border-radius:8px; padding:4px 8px; background:#172337; color:#cbd5e1; font:inherit; font-size:11px; cursor:pointer; }
@keyframes tip-in { from { opacity:0; transform:translate(-50%,6px); } to { opacity:1; transform:translate(-50%,0); } }
@media (pointer:coarse) and (orientation:portrait) { #situational-tip { top:calc(250px + var(--safe-t)); bottom:auto; font-size:12px; } }
@media (pointer:coarse) and (orientation:landscape) { #situational-tip { bottom:calc(12px + var(--safe-b)); max-width:44vw; font-size:11.5px; } }
/* TS-005: a visible × on both hints; on phones they are lighter, narrower and sit high instead of mid-screen. */
.hint-x { flex:none; width:32px; height:32px; margin:-4px -4px -4px 0; border:0; border-radius:50%; background:transparent; color:#94a3b8; font:400 20px/1 var(--b-font); cursor:pointer; }
@media (pointer:coarse) {
  body #situational-tip, body #terrain-hint { background:rgba(9,13,22,.62); gap:8px; padding:6px 6px 6px 10px; font-size:11px; line-height:1.35; }
  body #situational-tip strong { font-size:11.5px; }
  body #situational-tip-off, body #terrain-hint-open { padding:3px 6px; font-size:10.5px; }
}
@media (pointer:coarse) and (orientation:portrait) {
  /* width:max-content stops the centred box from shrinking to the space right of left:50% */
  body #situational-tip, body #terrain-hint { top:calc(250px + var(--safe-t)); bottom:auto; width:max-content; max-width:min(300px,calc(100vw - 32px)); box-sizing:border-box; }
}
#starter-guide-close { pointer-events:auto; border:0; background:transparent; color:var(--b-dim); font-size:16px; margin-left:6px; cursor:pointer; }
#terrain-hint { font-family:var(--b-font); background:rgba(9,13,22,.84); }
#minimap-panel { background:rgba(9,13,22,.8); }

/* ---- touch: no attack button; dodge at the right-thumb rest ---- */
#touch-controls { display:none; }
@media (pointer:coarse) {
  #touch-controls { display:block; position:fixed; inset:0; z-index:18; pointer-events:none; }
  #touch-stick { position:absolute; display:none; width:144px; height:144px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.3); pointer-events:none; touch-action:none; }
  #touch-stick.floating-active { display:block; }
  #touch-knob { position:absolute; left:40px; top:40px; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.45); pointer-events:none; }
  .touch-label { display:none; }
  #touch-actions button { position:fixed; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--b-scrim); box-shadow:inset 0 0 0 2px var(--b-edge); color:var(--b-fg); font:700 12px/1.15 var(--b-font); text-shadow:var(--b-shadow); white-space:pre-line; text-align:center; pointer-events:auto; touch-action:none; user-select:none; }
  #touch-actions button[hidden] { display:none; }
  #touch-actions button::before { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--ring,#e0f2fe) var(--recharge,0%),transparent 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px)); pointer-events:none; }
  #touch-actions button[data-charges]:not([data-charges=""])::after { content:attr(data-charges); position:absolute; left:0; right:0; bottom:16%; font:500 11px var(--b-mono); color:#e0f2fe; }
  #touch-actions button[data-state="locked"] { opacity:.45; }
  #touch-actions button[data-state="cooldown"], #touch-actions button[data-state="busy"], #touch-actions button[data-state="frozen"] { opacity:.75; }
  #touch-actions button.aiming { box-shadow:inset 0 0 0 3px #fff; }
  #touch-dodge { --ring:#e0f2fe; width:104px; height:104px; font-size:20px; background:rgba(37,99,235,.34); box-shadow:inset 0 0 0 3px #93c5fd,0 4px 14px rgba(0,0,0,.35); }
  #touch-dodge[data-state="locked"] { font-size:12px; }
  #touch-special { width:60px; height:60px; font-size:15px; }
  #touch-ultimate { --ring:#facc15; width:54px; height:54px; font-size:15px; }
  #touch-dodge.sprinting { box-shadow:inset 0 0 0 3px var(--b-sprint),0 0 16px var(--b-sprint); }
  #touch-special[data-state="locked"], #touch-ultimate[data-state="locked"] { font-size:10px; }

  #ability-bar, #help-btn { display:none; }
  #hud { top:calc(14px + var(--safe-t)); left:calc(16px + var(--safe-l)); width:168px; gap:5px; }
  .hud-vitals { gap:5px; }
  .vitals-id { display:none; }
  #hp-text { font-size:22px; }
  #hp-max { font-size:11px; }
  #hud-lives i { width:7px; height:7px; }
  /* attack charges: a status chip under E, not a button */
  #charge-pips { display:flex; position:fixed; z-index:18; width:64px; justify-content:center; align-items:center; gap:5px; font-size:11px; color:#fecaca; }
  body.mobile-minimal #growth-goal-text, body.mobile-minimal .growth-goal-track { display:none; }
  #hud-top { top:calc(6px + var(--safe-t)); right:calc(8px + var(--safe-r)); }
  #rank-now { font-size:24px; }
  #rank-total { font-size:12px; }
  #toggle-tray { bottom:auto; right:calc(12px + var(--safe-r)); }
  #tray-overflow { top:calc(100% + 8px); bottom:auto; }
  .tray-btn { padding:0 12px; }
  #starter-guide { max-width:min(320px,calc(100vw - 32px)); font-size:11px; }
  body.mobile-minimal #live-ranking:not(.minimal-open) { width:150px; right:calc(12px + var(--safe-r)); font-size:11px; }
  body.mobile-minimal #live-ranking:not(.minimal-open) .rank-row { grid-template-columns:14px 8px 10px minmax(0,1fr) 34px; gap:3px; height:16px; font-size:11px; line-height:16px; }
  body.mobile-minimal #live-ranking:not(.minimal-open) li:nth-child(n+4) { display:none; }
}
@media (pointer:coarse) and (orientation:portrait) {
  #era-status { top:calc(66px + var(--safe-t)); max-width:calc(100vw - 32px); min-width:0; gap:4px; }
  #era-phase-name { font-size:18px; letter-spacing:.3em; margin-right:-.3em; }
  #era-countdown { font-size:13px; }
  .era-progress { display:none; }
  #era-event { font-size:13px; }
  #toggle-tray { top:calc(124px + var(--safe-t)); }
  /* detail mode: the taller vitals column takes the left side, so the era moves right under the rank */
  body:not(.mobile-minimal) #era-status { left:auto; right:calc(14px + var(--safe-r)); transform:none; align-items:flex-end; max-width:calc(100vw - 210px); text-align:right; }
  body.mobile-minimal #live-ranking:not(.minimal-open) { top:calc(176px + var(--safe-t)); }
  /* pt1-08: ten rows (176-336px); back to three while the start guide, a tip (both at 250px) or the ecology panel (238px) is up */
  body.mobile-minimal #live-ranking:not(.minimal-open) li:nth-child(n+4) { display:grid; }
  body.mobile-minimal #live-ranking:not(.minimal-open) li:nth-child(n+11) { display:none; }
  body.mobile-minimal:is(:has(#starter-guide:not([hidden])), :has(#situational-tip:not([hidden])), :has(#terrain-hint:not([hidden])), :has(#ecology-panel:not([hidden]))) #live-ranking:not(.minimal-open) li:nth-child(n+4) { display:none; }
  body:not(.mobile-minimal) #live-ranking, body.mobile-minimal #live-ranking.minimal-open { top:calc(176px + var(--safe-t)); max-height:30dvh; }
  #starter-guide { top:calc(250px + var(--safe-t)); bottom:auto; }
  #touch-dodge { right:calc(20px + var(--safe-r)); bottom:calc(38px + var(--safe-b)); }
  #touch-special { right:calc(146px + var(--safe-r)); bottom:calc(76px + var(--safe-b)); }
  #touch-ultimate { right:calc(53px + var(--safe-r)); bottom:calc(161px + var(--safe-b)); }
  #charge-pips { right:calc(144px + var(--safe-r)); bottom:calc(48px + var(--safe-b)); }
}
@media (pointer:coarse) and (orientation:landscape) {
  #hud { top:calc(10px + var(--safe-t)); }
  #hud-top { top:calc(4px + var(--safe-t)); }
  #era-status { top:calc(10px + var(--safe-t)); max-width:calc(100vw - 460px); min-width:0; gap:3px; }
  #era-phase-name { font-size:16px; letter-spacing:.3em; margin-right:-.3em; }
  #era-countdown { font-size:13px; }
  .era-progress { display:none; }
  #era-event { font-size:12px; }
  #toggle-tray { top:calc(52px + var(--safe-t)); }
  body.mobile-minimal #live-ranking:not(.minimal-open) { top:calc(104px + var(--safe-t)); }
  body:not(.mobile-minimal) #live-ranking, body.mobile-minimal #live-ranking.minimal-open { top:calc(104px + var(--safe-t)); max-height:calc(100dvh - 250px); }
  #starter-guide { bottom:calc(12px + var(--safe-b)); max-width:40vw; }
  #touch-dodge { right:calc(26px + var(--safe-r)); bottom:calc(26px + var(--safe-b)); width:100px; height:100px; }
  #touch-special { right:calc(145px + var(--safe-r)); bottom:calc(35px + var(--safe-b)); width:58px; height:58px; }
  #touch-ultimate { right:calc(75px + var(--safe-r)); bottom:calc(146px + var(--safe-b)); width:52px; height:52px; }
  #charge-pips { right:calc(142px + var(--safe-r)); bottom:calc(14px + var(--safe-b)); }
}
/* pt1-08: on a landscape phone at least 400px tall, five rows (104-184px) stay clear of the R button (top = height - 198px); shorter screens keep three */
@media (pointer:coarse) and (orientation:landscape) and (min-height:400px) {
  body.mobile-minimal #live-ranking:not(.minimal-open) li:nth-child(n+4) { display:grid; }
  body.mobile-minimal #live-ranking:not(.minimal-open) li:nth-child(n+6) { display:none; }
}
/* narrow desktop windows borrow the phone-portrait stacking: era on a second row, ranking and tray clear of it */
@media (max-width:700px) and (not (pointer:coarse)) {
  #hud { left:calc(16px + var(--safe-l)); width:168px; }
  #era-status { top:calc(66px + var(--safe-t)); max-width:calc(100vw - 32px); min-width:0; }
  body:not(.mobile-minimal) #era-status { left:auto; right:calc(14px + var(--safe-r)); transform:none; align-items:flex-end; max-width:calc(100vw - 210px); text-align:right; }
  #era-phase-name { font-size:18px; }
  .era-progress { display:none; }
  body.mobile-minimal #live-ranking:not(.minimal-open) { top:calc(124px + var(--safe-t)); right:calc(12px + var(--safe-r)); width:150px; }
  body:not(.mobile-minimal) #live-ranking, body.mobile-minimal #live-ranking.minimal-open { top:calc(124px + var(--safe-t)); max-height:30dvh; }
  #toggle-tray { right:calc(12px + var(--safe-r)); bottom:calc(150px + var(--safe-b)); }
}

/* Blizzard sight fog (snow): blur and darken outside the player's sight, composited by the browser. */
#blizzard-fog { position:fixed; inset:0; pointer-events:none; --fx:50%; --fy:50%; --r40:120px; --r96:290px; --r160:480px; --r200:600px;
  background:radial-gradient(circle at var(--fx) var(--fy), rgba(224,235,247,0) var(--r40), rgba(224,235,247,.18) var(--r96), rgba(148,169,190,.48) var(--r160), rgba(39,55,71,.88) var(--r200));
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  -webkit-mask-image:radial-gradient(circle at var(--fx) var(--fy), transparent var(--r40), #000 var(--r96)); mask-image:radial-gradient(circle at var(--fx) var(--fy), transparent var(--r40), #000 var(--r96)); }
/* No GPU (software renderer) or slow frames: keep the fog colors, drop the blur. */
#blizzard-fog.lite { -webkit-backdrop-filter:none; backdrop-filter:none; -webkit-mask-image:none; mask-image:none; }