:root {
  color-scheme: dark;
  --ink: #d3dee7;
  --muted: #91a2b2;
  --accent: #8eb8d1;
  --line: #2b3946;
  --panel: #121a22;
  --recess: #090f16;
  --metal: #1a2632;
  --success: #9bc8b5;
  --warning: #d7b575;
  --mono: "Courier New", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body {
  color: var(--ink);
  font: 14px/1.5 system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 0, #243b5050, transparent 70%), #080c12;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #00000016 3px 4px);
}
button, input, select { font: inherit; border-radius: 2px; }
button {
  padding: 9px 14px;
  border: 1px solid #3d5264;
  background: linear-gradient(#243240, #1a2530);
  color: var(--ink);
  box-shadow: 0 2px 0 #080808;
  transition: background .15s, border-color .15s;
}
button:hover:where(:not(:disabled):not([aria-disabled="true"])) { background: #304557; border-color: var(--accent); color: var(--ink); }
button:active:not(:disabled) { box-shadow: none; }
button:disabled, button[aria-disabled="true"] { color: #8595a5; background: #18212a; cursor: default; box-shadow: none; }
:focus-visible { outline: 2px solid #b6dceb; outline-offset: 4px; }
input, select { padding: 11px 12px; border: 1px solid #344756; background: var(--recess); color: var(--ink); }
input::placeholder { color: #8597a7; }
input:focus, select:focus { border-color: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
h2, h3 { color: var(--ink); text-transform: none; letter-spacing: 0; }
.count, .empty { color: var(--muted); }
.error { color: #e8a8b8; }
.badge { background: #354255; color: #e4ecf3; }
.error:empty { display: none; }
.quiet { background: transparent; border-color: var(--line); box-shadow: none; color: var(--muted); font-size: 12px; }
.eyebrow, .section-label { font: bold 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow { margin-bottom: 8px; }
.lamp { display: inline-block; width: 6px; height: 6px; background: var(--success); box-shadow: 0 0 9px #9bc8b560; margin-right: 8px; vertical-align: 2px; }
.site-header { max-width: 1280px; margin: auto; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font: bold 16px var(--mono); letter-spacing: -.04em; color: #b4c6d6; }
.logo-pixels { display: inline-grid; place-items: center; width: 25px; height: 27px; border: 2px solid #58758b; color: var(--accent); margin-right: 8px; box-shadow: 2px 2px 0 #293d4e; }
#ambience-toggle { border: 0; padding: 8px 0 8px 8px; }
#ambience-state { color: var(--accent); display: inline-block; min-width: 20px; }
.ambience-error { text-align: center; }
.entry { padding: 22px 24px 40px; position: relative; }
.entry::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #5a9abd10, transparent 58%); z-index: -1; }
.entry-cabinet { max-width: 466px; margin: auto; padding: 12px 18px 0; background: linear-gradient(90deg, #141c24, #24313f 4%, #1a2632 96%, #0d131b); border: 2px solid #344454; border-bottom: 8px solid #0a1018; box-shadow: 0 28px 80px #000a, inset 4px 0 #ffffff04, inset -4px 0 #0006; position: relative; }
.entry-cabinet::before, .entry-cabinet::after { content: "+"; position: absolute; top: 8px; color: #627b8e; font: 13px var(--mono); }
.entry-cabinet::before { left: 5px; }.entry-cabinet::after { right: 5px; }
.marquee { border: 3px solid var(--recess); background: linear-gradient(110deg, #172b3a, #101922); box-shadow: inset 0 0 20px #000a, 0 1px #384f62; padding: 23px 16px 16px; text-align: center; }
.marquee h1 { margin: 20px 0; line-height: 0; }
.marquee h1 img { max-width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(3px 3px #38576d) drop-shadow(0 0 12px #80bdd425); }
.marquee-rule { display: block; height: 3px; background: repeating-linear-gradient(90deg, #5e839c 0 12px, transparent 12px 16px); opacity: .5; }
.entry-bezel { padding: 18px 10px 12px; }
.entry-screen { padding: 24px; background: radial-gradient(ellipse at top, #142623, #0b1414); border: 2px solid #050c0a; border-radius: 15px 15px 22px 22px; box-shadow: 0 0 0 4px #0b1118, 0 0 0 5px #2e414b, inset 0 0 35px #0007; }
.entry label { display: block; font-size: 12px; color: #bbccc7; margin-bottom: 14px; }
.entry input { display: block; width: 100%; margin-top: 6px; background: #080f0f; border-color: #314d47; font-size: 13px; }
.primary { background: #80aac1; border-color: #aacbdd; color: #0a151d; font-weight: 700; }
.entry .primary { width: 100%; margin-top: 5px; display: flex; justify-content: space-between; }
.entry .primary:hover { background: #a5cbdd; color: #0a151d; }
.entry .error { font-size: 12px; margin: 12px 0 0; }
.cabinet-deck { display: flex; align-items: center; justify-content: flex-end; gap: 13px; padding: 17px 27px; margin: 8px -12px 0; background: linear-gradient(#2b3a49, #17212d); border-top: 2px solid #4e6274; border-bottom: 7px solid var(--recess); transform: perspective(400px) rotateX(8deg); }
.deck-lines { margin-right: auto; width: 100px; height: 22px; background: repeating-linear-gradient(0deg, #101010 0 3px, transparent 3px 7px); }
.arcade-button { width: 29px; height: 25px; border-radius: 50%; background: #587d93; border: 4px solid #0c121b; box-shadow: 0 4px #070b10, inset 0 2px #8fb1c4; }
.arcade-button.red { background: #644452; box-shadow: 0 4px #070b10, inset 0 2px #906674; }
.cabinet-base { display: flex; align-items: center; justify-content: center; height: 68px; }
.coin-slot { width: 40px; height: 31px; border: 3px solid #0e151d; background: #2e3f4e; box-shadow: 0 1px #41576a; position: relative; }
.coin-slot::before { content: ""; position: absolute; inset: 10px 4px; background: #080808; border-bottom: 1px solid #5c768b; }
.card { border: 1px solid var(--line); border-radius: 2px; background: var(--panel); }
#lounge { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 4px 28px 24px; max-width: 1280px; }
.panel { border: 1px solid var(--line); background: linear-gradient(120deg, #16212c, var(--panel)); box-shadow: 0 4px 18px #0003; border-radius: 3px; min-width: 0; }
.stage { padding: 20px 20px 0; }
.stage-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.stage-heading > div { min-width: 0; flex: 1; }
.stage-heading .eyebrow { margin-bottom: 5px; font-size: 10px; }
.stage-heading h1 { font-size: 18px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.system-tag { font: bold 10px var(--mono); letter-spacing: .04em; color: #b2c7d6; background: #1b2834; border: 1px solid #34495a; padding: 4px 7px; white-space: nowrap; }
.stage-heading .system-tag { max-width: 150px; white-space: normal; text-align: center; }
.screen-bezel { padding: 8px; background: #070b10; border: 1px solid #344655; box-shadow: 0 0 0 3px #0a1017; }
video { --display-height-limit: 56vh; width: min(100%, calc(var(--display-height-limit) * var(--display-aspect-ratio))); height: auto; object-fit: fill; margin-inline: auto; background: #050605; }
.viewer { position: relative; }
/* Full screen fits the picture inside the screen at its display ratio, with
   black around it. Browsers without element full screen (iPhone Safari) get
   the same layout pinned over the page with the fill class. */
.viewer:fullscreen, .viewer.fill { display: grid; place-items: center; width: 100%; height: 100%; background: #000; }
.viewer.fill { position: fixed; inset: 0; z-index: 10; height: 100dvh; }
.viewer:fullscreen .screen-bezel, .viewer.fill .screen-bezel { width: 100%; padding: 0; border: 0; box-shadow: none; background: #000; }
.viewer:fullscreen video { --display-height-limit: 100vh; width: min(100%, calc(var(--display-height-limit) * var(--display-aspect-ratio))); }
.viewer.fill video { --display-height-limit: 100dvh; width: min(100%, calc(var(--display-height-limit) * var(--display-aspect-ratio))); }
.viewer:fullscreen video:focus-visible, .viewer.fill video:focus-visible { outline: none; }
.viewer-exit { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1; background: #000a; border-color: #ffffff30; color: #e8f0f5; opacity: .4; transition: opacity .2s; }
.viewer-exit:hover, .viewer-exit:focus-visible { opacity: 1; }
/* On-screen controller. Below the picture in the page, over it in full
   screen, where it sits on the black bars of a wide phone screen. The
   controls are translucent with a light rim so they read on any picture. */
.touchpad { --tp-unit: 56px; --tp-fill: #9fb3c366; --tp-rim: #ffffff55; position: relative; height: 230px; container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.touchpad.n64 { height: 300px; }
.touchpad > * { position: absolute; }
.tp-dpad, .tp-stick, .tp-face, .tp-shoulder, .tp-menu { color: #0b1118; font: bold 15px var(--mono); }
.tp-arrow, .tp-button, .tp-shoulder, .tp-pill, .tp-knob, .tp-dpad::before { background: var(--tp-fill); box-shadow: inset 0 0 0 2px var(--tp-rim), 0 1px 3px #0006; }
.tp-dpad { left: 14px; bottom: 14px; width: calc(var(--tp-unit) * 2.8); height: calc(var(--tp-unit) * 2.8); }
.n64 .tp-dpad { width: calc(var(--tp-unit) * 2); height: calc(var(--tp-unit) * 2); bottom: calc(var(--tp-unit) * 2.7); }
.tp-arrow { position: absolute; width: 34%; height: 34%; border-radius: 6px; }
.tp-up { top: 0; left: 33%; border-radius: 12px 12px 6px 6px; }
.tp-down { bottom: 0; left: 33%; border-radius: 6px 6px 12px 12px; }
.tp-left { left: 0; top: 33%; border-radius: 12px 6px 6px 12px; }
.tp-right { right: 0; top: 33%; border-radius: 6px 12px 12px 6px; }
.tp-dpad::before { content: ""; position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; box-shadow: none; }
.tp-stick { left: 14px; bottom: 14px; width: calc(var(--tp-unit) * 2.4); height: calc(var(--tp-unit) * 2.4); border-radius: 50%; background: #9fb3c322; box-shadow: inset 0 0 0 2px var(--tp-rim); }
.tp-knob { position: absolute; inset: 25%; border-radius: 50%; }
.tp-face { right: 14px; bottom: 14px; display: grid; grid-auto-columns: calc(var(--tp-unit) * .78); grid-auto-rows: calc(var(--tp-unit) * .78); }
.genesis .tp-face { grid-auto-columns: calc(var(--tp-unit) * 1.1); grid-auto-rows: calc(var(--tp-unit) * 1.1); }
.tp-button { width: var(--tp-unit); height: var(--tp-unit); border-radius: 50%; display: grid; place-items: center; }
.tp-shoulder { top: 10px; width: calc(var(--tp-unit) * 1.6); height: calc(var(--tp-unit) * .7); border-radius: 10px; display: grid; place-items: center; }
.tp-shoulder-0 { left: 14px; }
.tp-shoulder-1 { right: 14px; }
.tp-shoulder-2 { left: calc(var(--tp-unit) * 1.9); }
.tp-menu { left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 14px; }
.tp-pill { padding: 6px 14px; border-radius: 14px; font-size: 11px; }
/* On a narrow screen the pills move above the pads instead of between them. */
@container (max-width: 520px) { .tp-menu { bottom: calc(var(--tp-unit) * 3.2); } }
.touchpad .pressed { background: #d6ecf8dd; }
.viewer:fullscreen .touchpad, .viewer.fill .touchpad { --tp-unit: 64px; position: absolute; inset: 0; height: auto; pointer-events: none; }
.viewer:fullscreen .touchpad.n64, .viewer.fill .touchpad.n64 { --tp-unit: 56px; }
.viewer:fullscreen .touchpad > *, .viewer.fill .touchpad > * { pointer-events: auto; }
.touch-mode { display: block; margin-top: 16px; font-size: 12px; }
.touch-mode select { margin-left: 8px; padding: 6px 8px; font-size: 12px; }
.bar { margin: 13px 0; gap: 8px; flex-wrap: wrap; }
.bar #status { color: var(--warning); font: 11px var(--mono); margin-left: auto; }
.pad-indicator { display: inline-flex; gap: 7px; align-items: center; }
.pad-indicator svg { width: 21px; height: 14px; image-rendering: pixelated; }
.pad-indicator[data-state="ready"] { color: var(--success); border-color: #38584e; }
.pad-indicator[data-state="unsupported"] { color: var(--warning); }
.drawer { color: var(--muted); border-top: 1px solid var(--line); margin: 0; }
.drawer summary { padding: 14px 0; cursor: pointer; font-size: 12px; color: #b1c2d0; }
.drawer summary::marker { color: #7298b3; font-size: 10px; }
.drawer[open] summary { color: var(--accent); }
.drawer-content { padding-bottom: 18px; }
.drawer-content .empty { font-size: 12px; }
.keys { color: #adbfcd; font-size: 12px; line-height: 2.1; }
kbd { background: var(--recess); border-color: #3d5264; border-radius: 2px; font: 11px var(--mono); padding: 2px 5px; }
.bindings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 16px 0; columns: auto; }
.bindings li { padding: 0; font-size: 12px; }
button.small { padding: 5px 9px; font-size: 11px; }
.key { min-width: 100px; font-family: var(--mono); }
.pads { font-size: 12px; color: var(--success); margin: 16px 0 0; }
.room { width: auto; padding: 20px; }
.your-turn { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.you { font: bold 17px/1.4 var(--mono); color: #c7d9e5; margin: 0 0 15px; }
.coin-button { display: flex; align-items: center; gap: 14px; position: relative; padding: 9px 14px 9px 9px; width: 100%; text-align: left; background: var(--metal); border-color: #536875; color: #f2cf89; }
.coin-button img { image-rendering: pixelated; flex-shrink: 0; filter: drop-shadow(0 3px 0 #0008); }
.coin-button small { display: block; color: #a6bac9; font-size: 10px; margin-top: 3px; }
.coin-button:hover img { transform: translateY(-2px); }
.coin-button[aria-disabled="true"] img { filter: grayscale(1); }
.room .actions { flex-direction: column; }
.section-label { margin: 22px 0 10px; display: flex; align-items: center; justify-content: space-between; }
.seats li { flex-wrap: wrap; padding: 11px 0; gap: 8px; border-bottom: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.seats .port { font: bold 11px var(--mono); color: #b2cbdc; background: var(--metal); border: 1px solid #3c5265; padding: 4px; width: 28px; text-align: center; }
.seats .turn-left { font: 11px var(--mono); }
.seats button { font-size: 10px; }
.free { color: var(--muted); font-style: normal; }
.me { color: #add2e5; font-weight: 600; }
.offline { color: #8799aa; }
.queue-section { padding-bottom: 20px; }
.queue-section .empty { margin: 0; font-size: 12px; }
#queue, #users { font-size: 13px; overflow-wrap: anywhere; }
#queue li, #users li { padding: 5px 0; }
.roster .count { float: right; font: 11px var(--mono); }
.roster #users { padding-bottom: 14px; }
.library { grid-column: 1 / -1; padding: 24px; }
.library-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.library-heading .eyebrow { font-size: 10px; margin-bottom: 5px; }
.library-heading h2 { font: bold 23px var(--mono); margin: 0; color: #b9d3e5; }
.library-heading .count { font: 11px var(--mono); }
.library > .empty { font-size: 12px; margin: 16px 0; }
#room-error:not(:empty) { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; border: 1px solid #8b566a; background: #251922; box-shadow: 0 6px 25px #000a; }
.library-tools { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.search-box { display: flex; align-items: center; flex: 1; min-width: 0; position: relative; }
.search-box svg { position: absolute; left: 13px; width: 16px; height: 16px; fill: none; stroke: #829fb6; stroke-width: 1.5; pointer-events: none; }
.library input[type=search] { width: 100%; padding: 12px 12px 12px 39px; margin: 0; background: var(--recess); border: 1px solid #3d5264; }
.system-filter select { padding: 12px; max-width: 220px; }
.result-heading { display: flex; justify-content: space-between; gap: 15px; padding: 15px 0 12px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.result-heading > span:last-child { color: var(--muted); }
.games { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.games li { display: flex; align-items: center; padding: 14px 0; gap: 12px; border-bottom: 1px solid #24313e; min-width: 0; }
.game-index { color: #9db5c8; border: 1px solid #354b5d; background: #17232e; width: 34px; height: 38px; display: grid; place-items: center; flex-shrink: 0; font: bold 10px var(--mono); border-top: 4px solid #4e718b; }
.game-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.game-title { font-size: 13px; overflow-wrap: anywhere; }
.game-meta { font: 10px/1.4 var(--mono); color: var(--muted); }
.game-action { min-width: 112px; font-size: 11px; }
.games button { padding: 7px 10px; }
.games .current { color: #add2e5; }
.game-action.playing { border-color: transparent; background: transparent; color: var(--accent); }
.game-action.selected { color: #b0d9c8; border-color: #38584e; background: #142924; }
.no-games { padding: 36px 12px 20px; text-align: center; color: var(--muted); }
.vote { margin: 20px 0; padding: 17px; border: 1px solid #38566c; border-left: 3px solid #7ea8c2; border-radius: 2px; background: #13232f; }
.vote-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vote-heading h3 { font: bold 13px var(--mono); color: #b1d6e8; margin: 0; }
.vote-heading .lamp { background: var(--accent); box-shadow: 0 0 8px #8eb8d160; }
.vote-timer { font-size: 11px; color: #a8c0d1; }
#vote-left { color: #c3e1ee; font: bold 16px var(--mono); margin-left: 4px; }
.vote-help { font-size: 11px; margin: 10px 0 14px; color: #9fb6c7; }
.candidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.candidates li { display: flex; padding: 12px; gap: 12px; border: 1px solid #304b60; background: #101c26; min-width: 0; }
.candidates li.mine { color: var(--success); border-color: #537e73; background: #162b28; }
.candidates .game-title { font-size: 12px; color: var(--ink); }
.candidates .game-meta { color: #a2bcce; }
.vote-count { font: bold 20px var(--mono); color: #a5cee4; text-align: center; min-width: 24px; }
.candidates button { padding: 7px 10px; min-width: 75px; font-size: 11px; }
#kick { padding: 12px; font-size: 12px; }
#kick h2 { margin: 0 0 8px; font-size: 12px; }
.diagnostics { grid-column: 1 / -1; border: 1px solid var(--line); padding: 0 20px; background: #0e151e; }
.diagnostics summary .count { font-size: 11px; margin-left: 14px; }
.mono { font: 11px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.lounge-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--mono); padding: 0 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1500px) { video { --display-height-limit: 580px; } }
@media (max-width: 900px) {
  #lounge { grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; padding: 4px 18px 24px; }
  .stage, .room { padding: 16px; }.stage { padding-bottom: 0; }
  .stage-heading { flex-wrap: wrap; }.stage-heading h1 { font-size: 16px; }
  .games { grid-template-columns: 1fr; }.candidates { grid-template-columns: 1fr; }
  .bindings { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .site-header { padding: 17px 16px; gap: 10px; }.wordmark { font-size: 13px; }.logo-pixels { margin-right: 3px; }
  #ambience-toggle { font-size: 10px; }
  #lounge { display: flex; flex-direction: column; padding: 0 12px 24px; gap: 14px; }
  #lounge > * { width: 100%; }
  .stage { padding: 16px 12px 0; }.stage-heading h1 { font-size: 16px; }
  .stage-heading .system-tag { max-width: 110px; font-size: 9px; }
  video { width: 100%; }
  .room { padding: 18px; }
  .your-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; align-items: center; }
  .your-turn > .eyebrow { margin: 0; align-self: end; }
  .your-turn > .you { margin: 0; font-size: 15px; align-self: start; }
  .your-turn .actions { grid-column: 2; grid-row: 1 / 3; }
  .coin-button { padding: 8px; gap: 8px; font-size: 12px; }.coin-button img { width: 36px; height: 36px; }
  .coin-button small { font-size: 9px; }
  .bindings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }.key { min-width: 76px; }
  .library { padding: 18px; }.library-heading h2 { font-size: 21px; }
  .library-tools { flex-wrap: wrap; gap: 8px; }.search-box { flex-basis: 100%; }
  .system-filter { flex: 1; }.system-filter select { width: 100%; max-width: none; }
  .result-heading > span:last-child { display: none; }
  .game-index { display: none; }.game-action { min-width: 102px; }
  .vote { padding: 12px; }.vote-heading { align-items: start; }.vote-heading h3 { font-size: 12px; }
  .vote-timer { white-space: nowrap; font-size: 10px; }#vote-left { font-size: 13px; }
  .candidates li { padding: 10px; gap: 9px; }
  .diagnostics summary .count { display: none; }
  .entry { padding: 14px 16px 32px; }.entry-cabinet { padding: 10px 12px 0; }
  .entry-bezel { padding: 18px 6px 12px; }.entry-screen { padding: 22px 18px; }
  .marquee h1 img { width: 210px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; }.coin-button:hover img { transform: none; } }