/* Ion Drift. Flat graphic blocks, hard slants, signal yellow on black.
   Everything is sized in --u (1% of a 16:9 frame) so it scales from a laptop
   to a 4K monitor. */

@font-face { font-family: Tomorrow; font-weight: 500; font-style: normal; src: url(/fonts/tomorrow-latin-500-normal.woff2) format('woff2'); font-display: block; }
@font-face { font-family: Tomorrow; font-weight: 700; font-style: italic; src: url(/fonts/tomorrow-latin-700-italic.woff2) format('woff2'); font-display: block; }
@font-face { font-family: Tomorrow; font-weight: 900; font-style: italic; src: url(/fonts/tomorrow-latin-900-italic.woff2) format('woff2'); font-display: block; }
@font-face { font-family: Saira; font-weight: 500; src: url(/fonts/saira-extra-condensed-latin-500-normal.woff2) format('woff2'); font-display: block; }
@font-face { font-family: Saira; font-weight: 700; src: url(/fonts/saira-extra-condensed-latin-700-normal.woff2) format('woff2'); font-display: block; }

:root {
  --u: min(1vw, 1.7778vh);
  --y: #ffd400;
  --w: #f3f6f9;
  --k: #04060a;
  --c: #2ee6ff;
  --r: #ff2d55;
  --g: #29ffa0;
  --dim: rgba(243, 246, 249, 0.55);
  --display: Tomorrow, Bahnschrift, 'Arial Narrow', sans-serif;
  --cap: Saira, Bahnschrift, 'Arial Narrow', sans-serif;
  --jp: 'Yu Gothic UI', 'Meiryo', 'Hiragino Sans', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: var(--w); cursor: default; user-select: none; }
body { font-family: var(--cap); }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }

.cap { font: 700 calc(var(--u) * 1.15) / 1 var(--cap); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.cap i { font: 500 calc(var(--u) * 0.85) var(--jp); letter-spacing: 0.1em; font-style: normal; margin-left: 0.6em; opacity: 0.7; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--display); text-shadow: 0 calc(var(--u) * 0.1) calc(var(--u) * 0.5) rgba(0, 0, 0, 0.6);
  /* Shade the corners so the readouts hold up against bright scenery. */
  background:
    radial-gradient(ellipse 34% 46% at 0% 0%, rgba(4, 6, 10, 0.62), transparent 100%),
    radial-gradient(ellipse 30% 40% at 100% 0%, rgba(4, 6, 10, 0.62), transparent 100%),
    radial-gradient(ellipse 30% 30% at 0% 100%, rgba(4, 6, 10, 0.55), transparent 100%),
    radial-gradient(ellipse 30% 30% at 100% 100%, rgba(4, 6, 10, 0.55), transparent 100%); }
#hud b { font-weight: 900; font-style: italic; line-height: 0.85; }
#hud .blk { position: absolute; }

.h-pos { left: calc(var(--u) * 3); top: calc(var(--u) * 2.4); display: flex; align-items: flex-end; gap: calc(var(--u) * 0.5); }
.h-pos b { font-size: calc(var(--u) * 8.5); color: var(--y); }
.h-pos small { font: 700 italic calc(var(--u) * 2.6) var(--display); color: var(--w); padding-bottom: calc(var(--u) * 0.5); }
.h-pos .cap { position: absolute; left: 0; top: calc(var(--u) * -1.3); white-space: nowrap; }

.h-lap { left: calc(var(--u) * 3); top: calc(var(--u) * 12.6); display: flex; align-items: baseline; gap: calc(var(--u) * 0.6); }
.h-lap b { font-size: calc(var(--u) * 3.4); }
.h-lap small { font: 700 italic calc(var(--u) * 1.8) var(--display); color: var(--dim); }

#h-tower { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 17.5); margin: 0; padding: 0; list-style: none; width: calc(var(--u) * 17); }
#h-tower li { display: grid; grid-template-columns: calc(var(--u) * 1.6) calc(var(--u) * 0.5) 1fr auto; gap: calc(var(--u) * 0.6); align-items: center;
  font: 700 calc(var(--u) * 1.25) / 1 var(--cap); letter-spacing: 0.08em; text-transform: uppercase; padding: calc(var(--u) * 0.28) calc(var(--u) * 0.5); color: var(--dim);
  background: linear-gradient(90deg, rgba(4, 6, 10, 0.55), rgba(4, 6, 10, 0)); margin-bottom: calc(var(--u) * 0.18); }
#h-tower li i { width: calc(var(--u) * 0.5); height: calc(var(--u) * 1.2); display: block; transform: skewX(-14deg); }
#h-tower li span:first-child { color: var(--w); text-align: right; }
#h-tower li em { font-style: normal; font-variant-numeric: tabular-nums; }
#h-tower li.me { color: var(--k); background: var(--y); text-shadow: none; }
#h-tower li.me span:first-child { color: var(--k); }
#h-tower li.out { opacity: 0.35; text-decoration: line-through; }

.h-time { right: calc(var(--u) * 3); top: calc(var(--u) * 2.4); text-align: right; min-width: calc(var(--u) * 20); }
.h-time b { display: block; font-size: calc(var(--u) * 4.6); font-variant-numeric: tabular-nums; margin: calc(var(--u) * 0.5) 0 calc(var(--u) * 0.7); }
.h-time .row { display: flex; justify-content: flex-end; gap: calc(var(--u) * 1); align-items: baseline; font: 700 italic calc(var(--u) * 1.7) / 1.25 var(--display); font-variant-numeric: tabular-nums; }
.h-time .row .cap { font-size: calc(var(--u) * 1.05); }
.h-time .row.rec span:last-child { color: var(--y); }
#h-delta { font: 700 italic calc(var(--u) * 2) var(--display); margin-top: calc(var(--u) * 0.4); height: calc(var(--u) * 2.4); font-variant-numeric: tabular-nums; }
#h-delta.up { color: var(--g); } #h-delta.down { color: var(--r); }

#h-map { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 19); width: calc(var(--u) * 15); height: calc(var(--u) * 15); opacity: 0.92; }

.h-weapon { left: calc(var(--u) * 3); bottom: calc(var(--u) * 8.2); }
.h-weapon .slot { margin-top: calc(var(--u) * 0.6); min-width: calc(var(--u) * 15); height: calc(var(--u) * 4.2); display: flex; align-items: center; padding: 0 calc(var(--u) * 1.4);
  background: rgba(4, 6, 10, 0.6); border-left: calc(var(--u) * 0.45) solid var(--dim); transform: skewX(-12deg); }
.h-weapon .slot b { transform: skewX(12deg); font-size: calc(var(--u) * 2.3); color: var(--dim); letter-spacing: 0.02em; }
.h-weapon.armed .slot { background: var(--wc, var(--y)); border-left-color: var(--w); animation: arm 0.35s steps(2) 3; }
.h-weapon.armed .slot b { color: var(--k); text-shadow: none; }
@keyframes arm { 50% { filter: brightness(2.2); } }

.h-energy { left: calc(var(--u) * 3); bottom: calc(var(--u) * 3); width: calc(var(--u) * 24); }
.bar { position: relative; height: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 0.6); background: rgba(4, 6, 10, 0.6); transform: skewX(-12deg); overflow: hidden; }
.bar i { position: absolute; inset: 0; transform-origin: left; background: var(--c);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(var(--u) * 0.75), transparent calc(var(--u) * 0.75) calc(var(--u) * 0.95)); mask: repeating-linear-gradient(90deg, #000 0 calc(var(--u) * 0.75), transparent calc(var(--u) * 0.75) calc(var(--u) * 0.95)); }
.h-energy.low .bar i { background: var(--r); animation: blink 0.4s steps(2) infinite; }
.h-energy.charge .bar i { background: var(--g); }
@keyframes blink { 50% { opacity: 0.35; } }

.h-speed { right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); text-align: right; width: calc(var(--u) * 24); }
.h-speed b { font-size: calc(var(--u) * 8); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.h-speed .cap { margin-left: calc(var(--u) * 0.8); }
.h-speed .bar i { background: linear-gradient(90deg, var(--w) 0 60%, var(--y) 60% 88%, var(--r) 88%); }
.h-speed.boost b { color: var(--c); }

#h-big { position: absolute; left: 0; right: 0; top: 26%; text-align: center; font: 900 italic calc(var(--u) * 17) / 1 var(--display); color: var(--y); opacity: 0; letter-spacing: -0.02em; }
#h-big.show { animation: big 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#h-big.go { color: var(--g); }
@keyframes big { 0% { opacity: 0; transform: scale(2.2) skewX(-8deg); } 15% { opacity: 1; transform: scale(1) skewX(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(0.92); } }

#h-msg { position: absolute; left: 0; right: 0; top: 17%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.5); }
#h-msg div { font: 900 italic calc(var(--u) * 3.2) / 1 var(--display); padding: calc(var(--u) * 0.7) calc(var(--u) * 2.4); background: var(--y); color: var(--k); text-shadow: none;
  clip-path: polygon(calc(var(--u) * 1.2) 0, 100% 0, calc(100% - var(--u) * 1.2) 100%, 0 100%); animation: msg 2.2s ease-out forwards; }
#h-msg div.alt { background: var(--k); color: var(--w); outline: calc(var(--u) * 0.15) solid var(--w); outline-offset: calc(var(--u) * -0.15); }
#h-msg div.bad { background: var(--r); color: var(--w); }
#h-msg div small { font: 700 calc(var(--u) * 1.5) var(--cap); letter-spacing: 0.16em; margin-left: 1em; vertical-align: middle; }
@keyframes msg { 0% { opacity: 0; transform: translateX(calc(var(--u) * -6)); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--u) * 4)); } }

#h-warn { position: absolute; left: 0; right: 0; top: 58%; text-align: center; font: 900 italic calc(var(--u) * 3) var(--display); color: var(--r); animation: blink 0.5s steps(2) infinite; }
#h-warn.ok { color: var(--g); animation: none; }
#h-pad { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 3); text-align: center; }

/* ---------- Menus ---------- */
#menu { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); padding: calc(var(--u) * 4) calc(var(--u) * 6);
  background: linear-gradient(100deg, rgba(4, 6, 10, 0.94) 0%, rgba(4, 6, 10, 0.82) 38%, rgba(4, 6, 10, 0.15) 70%, rgba(4, 6, 10, 0) 100%); }
#menu.center { grid-template-columns: 1fr; background: radial-gradient(ellipse at 50% 60%, rgba(4, 6, 10, 0.25), rgba(4, 6, 10, 0.8)); }
#menu.dim { background: rgba(4, 6, 10, 0.86); }
.m-main { display: flex; flex-direction: column; min-height: 0; }
.m-brand { display: flex; align-items: center; gap: calc(var(--u) * 1.2); margin-bottom: calc(var(--u) * 2); }
.m-brand .mark { font: 900 italic calc(var(--u) * 2.2) / 1 var(--display); background: var(--y); color: var(--k); padding: calc(var(--u) * 0.45) calc(var(--u) * 1.1) calc(var(--u) * 0.35);
  clip-path: polygon(calc(var(--u) * 0.7) 0, 100% 0, calc(100% - var(--u) * 0.7) 100%, 0 100%); }
.m-title { font: 900 italic calc(var(--u) * 5.4) / 0.9 var(--display); margin: 0 0 calc(var(--u) * 0.8); letter-spacing: -0.02em; text-transform: uppercase; }
.m-sub { margin: 0 0 calc(var(--u) * 2); }
.m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.35); }
.m-list li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); height: calc(var(--u) * 3.7); flex: none; padding: 0 calc(var(--u) * 1.8);
  font: 700 italic calc(var(--u) * 2.1) / 1 var(--display); color: var(--dim); max-width: calc(var(--u) * 44); cursor: pointer; text-transform: uppercase; }
.m-list li::before { content: ''; position: absolute; inset: 0; background: var(--y); transform: skewX(-14deg) scaleX(0); transform-origin: left; transition: transform 0.13s cubic-bezier(0.2, 0.9, 0.3, 1); z-index: -1; }
.m-list li.sel { color: var(--k); }
.m-list li.sel::before { transform: skewX(-14deg) scaleX(1); }
.m-list li .val { font-weight: 900; display: flex; align-items: center; gap: calc(var(--u) * 0.9); white-space: nowrap; }
.m-list li .val .ar { font: 700 calc(var(--u) * 1.5) var(--cap); opacity: 0.55; padding: calc(var(--u) * 0.4); }
.m-list li.sel .val .ar { opacity: 1; }
.m-list li.gap { margin-top: calc(var(--u) * 1.4); }
.m-list.dense li { height: calc(var(--u) * 2.95); font-size: calc(var(--u) * 1.75); }
.m-list li.go { color: var(--w); }
.m-list li.go.sel { color: var(--k); }
.m-list li.off { opacity: 0.35; }
.m-foot { margin-top: auto; padding-top: calc(var(--u) * 1.2); display: flex; gap: calc(var(--u) * 2.4); flex-wrap: wrap; }
.m-foot span { display: flex; align-items: center; gap: calc(var(--u) * 0.6); font: 700 calc(var(--u) * 1.15) var(--cap); letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; }
.m-foot kbd { font: 700 calc(var(--u) * 1.05) var(--cap); min-width: calc(var(--u) * 2); text-align: center; padding: calc(var(--u) * 0.2) calc(var(--u) * 0.5); background: var(--w); color: var(--k); border-radius: calc(var(--u) * 0.2); }
.m-note { margin-top: calc(var(--u) * 1.2); max-width: calc(var(--u) * 44); font: 500 calc(var(--u) * 1.5) / 1.3 var(--cap); letter-spacing: 0.06em; color: var(--dim); min-height: calc(var(--u) * 3.9); }

.m-side { align-self: end; justify-self: end; width: min(100%, calc(var(--u) * 40)); display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.panel { background: rgba(4, 6, 10, 0.78); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); border-top: calc(var(--u) * 0.3) solid var(--y); }
.panel h3 { margin: 0 0 calc(var(--u) * 0.2); font: 900 italic calc(var(--u) * 2.6) / 1 var(--display); text-transform: uppercase; }
.panel p { margin: calc(var(--u) * 0.5) 0 0; font: 500 calc(var(--u) * 1.45) / 1.3 var(--cap); letter-spacing: 0.05em; color: var(--dim); }
.panel .two { display: grid; grid-template-columns: calc(var(--u) * 13) 1fr; gap: calc(var(--u) * 1.6); align-items: center; }
.panel canvas { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.stat { display: grid; grid-template-columns: calc(var(--u) * 7) 1fr; align-items: center; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 0.55); }
.stat .track { height: calc(var(--u) * 0.9); background: rgba(243, 246, 249, 0.14); transform: skewX(-14deg); }
.stat .track i { display: block; height: 100%; background: var(--w); }
.kv { display: flex; justify-content: space-between; align-items: baseline; margin-top: calc(var(--u) * 0.5); font: 700 italic calc(var(--u) * 1.7) var(--display); font-variant-numeric: tabular-nums; }
.kv.hot span:last-child { color: var(--y); }
.board { margin: calc(var(--u) * 0.6) 0 0; padding: 0; list-style: none; font: 700 calc(var(--u) * 1.35) / 1 var(--cap); letter-spacing: 0.08em; text-transform: uppercase; }
.board li { display: grid; grid-template-columns: calc(var(--u) * 2) 1fr auto; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.32) 0; border-bottom: 1px solid rgba(243, 246, 249, 0.1); color: var(--dim); }
.board li b { font: 700 italic calc(var(--u) * 1.35) var(--display); color: var(--w); font-variant-numeric: tabular-nums; }
.board li.me { color: var(--y); } .board li.me b { color: var(--y); }
.board li.head { color: var(--w); border-bottom-color: var(--y); }

/* Title */
.title { align-self: center; justify-self: center; text-align: center; }
.logo { font: 900 italic calc(var(--u) * 15) / 0.82 var(--display); letter-spacing: -0.04em; margin: 0; position: relative; display: inline-block; text-shadow: 0 0 calc(var(--u) * 3) rgba(46, 230, 255, 0.35); }
.logo span { color: var(--y); }
.logo::after { content: ''; position: absolute; left: -4%; right: -4%; bottom: 46%; height: calc(var(--u) * 0.5); background: var(--k); transform: skewX(-14deg); }
.title .tag { display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.8); }
.title .tag b { font: 900 italic calc(var(--u) * 2.4) var(--display); background: var(--y); color: var(--k); padding: calc(var(--u) * 0.3) calc(var(--u) * 1.4);
  clip-path: polygon(calc(var(--u) * 0.7) 0, 100% 0, calc(100% - var(--u) * 0.7) 100%, 0 100%); }
.title .jp { font: 500 calc(var(--u) * 1.6) var(--jp); letter-spacing: 0.5em; color: var(--dim); }
.press { margin-top: calc(var(--u) * 7); font: 700 italic calc(var(--u) * 2.2) var(--display); animation: blink 1.1s steps(2) infinite; }
.title .cap { display: block; margin-top: calc(var(--u) * 1.4); }

/* Results */
.results { align-self: center; justify-self: center; width: min(100%, calc(var(--u) * 70)); }
.results table { width: 100%; border-collapse: collapse; margin: calc(var(--u) * 1) 0 calc(var(--u) * 1.6); font: 700 calc(var(--u) * 1.7) var(--cap); letter-spacing: 0.08em; text-transform: uppercase; }
.results td, .results th { padding: calc(var(--u) * 0.36) calc(var(--u) * 1); text-align: left; border-bottom: 1px solid rgba(243, 246, 249, 0.12); }
.results th { font-size: calc(var(--u) * 1.1); letter-spacing: 0.2em; color: var(--dim); }
.results td.n { font: 700 italic calc(var(--u) * 1.7) var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.results td:first-child { font: 900 italic calc(var(--u) * 2.2) var(--display); width: calc(var(--u) * 4); }
.results tr.me td { background: var(--y); color: var(--k); }
.results tr.out td { opacity: 0.4; }
.results td i { display: inline-block; width: calc(var(--u) * 0.6); height: calc(var(--u) * 1.4); transform: skewX(-14deg); margin-right: calc(var(--u) * 0.8); vertical-align: middle; }
.results .m-list { flex-direction: row; gap: calc(var(--u) * 1); }
.results .m-foot { margin-top: calc(var(--u) * 1); }
.results .m-brand { margin-bottom: calc(var(--u) * 1.2); }
.results .m-list li { min-width: calc(var(--u) * 18); justify-content: center; }

.keys { display: grid; grid-template-columns: auto auto auto; gap: calc(var(--u) * 0.5) calc(var(--u) * 2.4); font: 500 calc(var(--u) * 1.5) var(--cap); letter-spacing: 0.08em; color: var(--dim); margin-top: calc(var(--u) * 0.8); }
.keys b { color: var(--w); font-weight: 700; text-transform: uppercase; }
.keys .hd { color: var(--y); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; font-size: calc(var(--u) * 1.1); }

#toast { position: fixed; left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%); font: 700 calc(var(--u) * 1.5) var(--cap); letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--k); color: var(--w); padding: calc(var(--u) * 0.8) calc(var(--u) * 2); border-left: calc(var(--u) * 0.4) solid var(--y); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
#toast.show { opacity: 1; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.35s; }
#fade.on { opacity: 1; }
#name-input { font: 900 italic calc(var(--u) * 2.2) var(--display); background: var(--k); color: var(--y); border: 0; outline: calc(var(--u) * 0.15) solid var(--y); padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8); width: calc(var(--u) * 16); text-transform: uppercase; }

/* ---------- Spectator window ---------- */
.spec #hud { text-shadow: 0 calc(var(--u) * 0.1) calc(var(--u) * 0.6) rgba(0, 0, 0, 0.8); }
.s-head { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 2.4); }
.s-head b { display: block; font-size: calc(var(--u) * 3.6); }
.s-live { display: inline-block; font: 700 calc(var(--u) * 1.1) var(--cap); letter-spacing: 0.22em; background: var(--r); color: var(--w); padding: calc(var(--u) * 0.25) calc(var(--u) * 0.8); margin-bottom: calc(var(--u) * 0.7); }
.spec #h-tower { top: calc(var(--u) * 11); width: calc(var(--u) * 21); }
.spec #h-tower li { font-size: calc(var(--u) * 1.5); padding: calc(var(--u) * 0.4) calc(var(--u) * 0.6); }
.spec #h-map { top: auto; bottom: calc(var(--u) * 3); right: calc(var(--u) * 3); width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.s-tele { position: absolute; left: calc(var(--u) * 3); bottom: calc(var(--u) * 3); width: calc(var(--u) * 30); }
.s-tele b { font-size: calc(var(--u) * 5.5); font-variant-numeric: tabular-nums; }
.s-tele canvas { width: 100%; height: calc(var(--u) * 7); display: block; margin-top: calc(var(--u) * 0.8); background: rgba(4, 6, 10, 0.55); }
.s-wait { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; background: var(--k); }
.s-wait p { margin-top: calc(var(--u) * 2); }

/* Shown while another window has the keyboard and controller. */
#nofocus { position: fixed; left: 50%; top: calc(var(--u) * 1.6); transform: translateX(-50%); z-index: 5; cursor: pointer;
  font: 900 italic calc(var(--u) * 1.9) var(--display); text-transform: uppercase; background: var(--y); color: var(--k);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 2.2); clip-path: polygon(calc(var(--u) * 0.9) 0, 100% 0, calc(100% - var(--u) * 0.9) 100%, 0 100%); }