:root {
  color-scheme:dark;
  --bg:#0b1016;
  --text:#eaf0f5;
  --muted:#8b9aaa;
  --line:#27313c;
  --cyan:#66f7d0;
  --pink:#f28ce8;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

a {
  color:inherit;
  text-decoration:none;
}

button,select {
  font:inherit;
}

button,a,select {
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,a:focus-visible,select:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px;
}

button:disabled {
  opacity:.5;
  cursor:wait;
}

.shell {
  max-width:1320px;
  margin:auto;
  padding:0 52px;
}

header {
  height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.wordmark {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  font-weight:800;
  letter-spacing:2px;
}

.mark {
  color:var(--cyan);
  font-size:29px;
}

.version {
  font-size:11px;
  font-weight:500;
  letter-spacing:0;
  border:1px solid var(--line);
  padding:4px 6px;
  margin-left:3px;
}

.source {
  color:var(--muted);
  font-size:13px;
}

.source span {
  margin-left:12px;
  color:var(--cyan);
}

main {
  display:grid;
  grid-template-columns:1fr 540px;
  gap:66px;
  padding:65px 0 58px;
}

.intro {
  padding-top:24px;
}

.eyebrow {
  font-family:Consolas,monospace;
  font-size:11px;
  letter-spacing:2px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
}

.eyebrow>span {
  height:6px;
  width:6px;
  background:var(--cyan);
  border-radius:50%;
}

h1 {
  font-size:clamp(42px,4.3vw,62px);
  line-height:1.06;
  letter-spacing:-3px;
  font-weight:650;
  margin:25px 0;
}

h1 span {
  color:var(--cyan);
}

.lede {
  font-size:17px;
  line-height:1.85;
  color:#acb9c6;
  margin-bottom:34px;
}

.facts {
  display:flex;
  gap:32px;
  padding:25px 0 29px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.facts div {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.facts strong {
  font-size:22px;
  font-weight:500;
  letter-spacing:-.6px;
}

.facts span {
  font-family:Consolas,monospace;
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--muted);
}

.instructions {
  margin-top:31px;
}

.instructions>p:not(.eyebrow):not(.hint) {
  font-size:14px;
  line-height:1.8;
  color:#acb9c6;
}

.key-row {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  margin-top:11px;
}

.key-row>span:nth-child(2) {
  width:96px;
  color:#b2becc;
}

.player-dot {
  display:block;
  width:5px;
  height:5px;
  margin-right:5px;
  background:currentColor;
  border-radius:50%;
}

.cyan {
  color:var(--cyan);
}

.pink {
  color:var(--pink);
}

kbd {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #35404c;
  border-bottom-width:2px;
  border-radius:5px;
  background:#131b24;
  min-width:28px;
  height:27px;
  font-family:inherit;
}

.hint {
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
  margin-top:18px;
}

.engine-note {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  max-width:340px;
  margin-top:30px;
}

.cabinet {
  padding:0 23px;
  background:linear-gradient(145deg,#19232e,#111820);
  border:1px solid #35424f;
  border-radius:18px;
  box-shadow:0 30px 70px #0004;
}

.scoreboard {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0 14px;
}

.score {
  display:flex;
  flex-direction:column;
  gap:1px;
}

.score span {
  font-family:Consolas,monospace;
  letter-spacing:1.4px;
  font-size:9px;
}

.score strong {
  font-family:Consolas,monospace;
  font-size:39px;
  font-weight:500;
  letter-spacing:2px;
}

.left {
  color:var(--cyan);
}

.right {
  text-align:right;
  color:var(--pink);
}

.match {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  font:10px Consolas,monospace;
  letter-spacing:1.4px;
}

.match small {
  font-size:8px;
  color:var(--muted);
  letter-spacing:1.4px;
}

.live-dot {
  height:5px;
  width:5px;
  border-radius:50%;
  background:var(--cyan);
}

.display {
  position:relative;
  border:1px solid #26313d;
  border-radius:9px;
  overflow:hidden;
  background:#070b11;
  padding:9px;
  box-shadow:inset 0 0 25px #000;
  aspect-ratio:1;
}

canvas {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1;
}

.overlay {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#070b11c9;
  text-align:center;
  padding:20px;
  backdrop-filter:blur(2px);
}

.overlay[hidden] {
  display:none;
}

.overlay strong {
  font-size:25px;
  letter-spacing:-.7px;
}

.overlay span {
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.telemetry {
  display:flex;
  justify-content:space-between;
  font:9px Consolas,monospace;
  letter-spacing:1px;
  color:var(--muted);
  padding:18px 1px;
}

.telemetry b {
  color:#cbd5df;
  font-weight:400;
  margin-left:6px;
}

.toolbar {
  display:flex;
  gap:8px;
  margin-top:18px;
}

button,select {
  border:1px solid #35424f;
  border-radius:7px;
  background:#151e28;
  color:#cbd5df;
  padding:12px 13px;
  font-size:11px;
  cursor:pointer;
}

button:hover {
  border-color:#758694;
  background:#1d2a37;
}

.primary {
  flex:1;
  display:flex;
  justify-content:space-between;
  gap:14px;
  background:var(--cyan);
  color:#0c2724;
  font-weight:700;
  border-color:var(--cyan);
}

.primary:hover {
  background:#9cffe1;
  border-color:#9cffe1;
}

select {
  height:100%;
  font-size:10px;
  padding-left:9px;
  padding-right:5px;
}

.touch-controls {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin:14px 0;
}

.touch-controls>div {
  display:flex;
  align-items:center;
  gap:6px;
}

.touch-controls span {
  font:9px Consolas,monospace;
  letter-spacing:1px;
  margin-right:4px;
}

.touch-controls button {
  touch-action:none;
  user-select:none;
  font-size:18px;
  padding:4px 12px;
  min-height:36px;
}

#error {
  font-size:12px;
  color:#ffada7;
  line-height:1.7;
}

footer {
  border-top:1px solid var(--line);
  padding:23px 0 31px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:var(--muted);
  font-size:10px;
}

footer>span:first-child {
  letter-spacing:1.5px;
  font-family:Consolas,monospace;
}

footer i {
  font-style:normal;
  margin:0 7px;
}

footer a {
  color:#b3c3d0;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media(min-width:1400px) {
  main {
    gap:100px;
  }
  .shell {
    padding:0 60px;
  }
}

@media(max-width:1100px) {
  .shell {
    padding:0 30px;
  }
  main {
    grid-template-columns:1fr 470px;
    gap:36px;
  }
  .facts {
    gap:23px;
  }
  h1 {
    font-size:47px;
  }
  .toolbar {
    flex-wrap:wrap;
  }
  .mode-label {
    flex:1;
  }
  .mode-label select {
    width:100%;
  }
  .engine-note {
    margin-top:20px;
  }
}

@media(max-width:850px) {
  .shell {
    max-width:640px;
    padding:0 24px;
  }
  header {
    height:82px;
  }
  .wordmark {
    font-size:15px;
  }
  main {
    grid-template-columns:1fr;
    gap:32px;
    padding-top:22px;
  }
  .intro {
    padding-top:10px;
  }
  h1 {
    font-size:49px;
    margin:18px 0;
  }
  .lede {
    font-size:15px;
    margin-bottom:22px;
  }
  .facts {
    justify-content:space-between;
    padding:20px 0;
  }
  .instructions {
    display:none;
  }
  .engine-note {
    max-width:none;
    margin-bottom:0;
  }
  .arcade {
    min-width:0;
  }
  .cabinet {
    padding:0 16px;
  }
  .toolbar {
    flex-wrap:nowrap;
  }
  .mode-label {
    flex:initial;
  }
  .touch-controls span {
    font-size:8px;
  }
  footer {
    flex-wrap:wrap;
    line-height:1.8;
  }
  footer>span:nth-child(2) {
    display:none;
  }
}

@media(max-width:400px) {
  .shell {
    padding:0 16px;
  }
  .source {
    font-size:11px;
  }
  h1 {
    font-size:43px;
  }
  .facts strong {
    font-size:20px;
  }
  .cabinet {
    padding:0 12px;
  }
  .toolbar {
    flex-wrap:wrap;
  }
  .primary {
    min-width:120px;
  }
  .mode-label {
    flex:1;
  }
  .score strong {
    font-size:32px;
  }
  .telemetry {
    font-size:8px;
    letter-spacing:0;
  }
  .touch-controls>div {
    gap:4px;
  }
  .touch-controls button {
    padding:4px 10px;
  }
  .touch-controls span {
    letter-spacing:0;
  }
}