:root {
  color-scheme: dark;
  --bg: #08111d;
  --panel: #101d2b;
  --panel-raised: #142435;
  --line: #243548;
  --muted: #8fa1b4;
  --text: #edf4fa;
  --cyan: #55e6d1;
  --amber: #f6c85f;
  --red: #ff6678;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --display: "Arial Narrow", Impact, "Roboto Condensed", sans-serif;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 51% -20%, rgba(29, 95, 117, .26), transparent 47%),
    linear-gradient(rgba(100, 140, 164, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 140, 164, .035) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 32px 32px, 32px 32px, auto;
}
button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.shell { width: min(1120px, calc(100% - 44px)); margin: 0 auto; padding: 24px 0 28px; }
.topbar { height: 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(127, 157, 181, .19); padding-bottom: 17px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); font: 800 17px var(--display); letter-spacing: .08em; text-decoration: none; }
.brand-light { color: var(--cyan); margin-left: 4px; }
.brand-mark { width: 24px; height: 24px; position: relative; display: block; }
.brand-mark i { position: absolute; width: 8px; height: 3px; background: var(--cyan); border-radius: 2px; }
.brand-mark i:nth-child(1) { left: 0; top: 10px; }
.brand-mark i:nth-child(2) { right: 0; top: 10px; }
.brand-mark i:nth-child(3) { left: 10px; top: 0; transform: rotate(90deg); }
.brand-mark i:nth-child(4) { left: 10px; bottom: 0; transform: rotate(90deg); }
.brand-mark b { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); left: 9px; top: 9px; box-shadow: 0 0 12px rgba(246, 200, 95, .65); }
.top-status, .eyebrow, .clock-label, .clock-note, .pill, .field > span, .room-label, .player-role, .score > span, .player-foot, .page-foot, .waiting-copy { font: 500 12px var(--mono); letter-spacing: .045em; }
.top-status { color: #b8c8d5; display: flex; align-items: center; gap: 9px; }
.status-led, .player-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #7890a4; }
.status-led.live { background: var(--cyan); box-shadow: 0 0 12px rgba(85, 230, 209, .7); }
.status-led.waiting { background: var(--amber); box-shadow: 0 0 11px rgba(246, 200, 95, .55); }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 33px 0 25px; }
.eyebrow { color: var(--cyan); margin: 0 0 10px; }
.slash { color: #516579; padding: 0 7px; }
h1, h2, p { margin-top: 0; }
h1 { font: 700 clamp(40px, 5.4vw, 66px)/.91 var(--display); letter-spacing: -.015em; margin: 0; text-transform: uppercase; }
h1 em { font-style: normal; color: var(--cyan); }
.lede { color: #afc0cf; margin: 12px 0 0; max-width: 570px; line-height: 1.5; font-size: 15px; }
.clock-card { min-width: 145px; text-align: right; padding: 4px 0 0 22px; border-left: 1px solid var(--line); }
.clock-label, .clock-note { display: block; color: var(--muted); }
.clock-card strong { display: block; color: var(--amber); font: 700 42px/.95 var(--display); margin: 6px 0 5px; font-variant-numeric: tabular-nums; }
.clock-card strong.running { color: var(--cyan); }
.connect-card { border: 1px solid #294255; background: linear-gradient(110deg, rgba(19, 39, 55, .97), rgba(15, 29, 43, .97)); border-radius: 12px; padding: 18px 20px 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.connect-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.connect-heading .eyebrow { margin-bottom: 3px; font-size: 11px; }
.connect-heading h2 { font: 700 22px/1 var(--display); text-transform: uppercase; letter-spacing: .035em; margin: 0; }
.pill { border: 1px solid #405569; color: #adbdca; border-radius: 999px; padding: 5px 10px; font-size: 10px; }
.pill.connected { border-color: rgba(85, 230, 209, .45); color: var(--cyan); }
.connect-controls { display: grid; grid-template-columns: minmax(145px, 1fr) auto 70px minmax(160px, 1.35fr) auto; gap: 10px; align-items: end; margin-top: 15px; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.field > span { color: #9fb1c0; font-size: 10px; text-transform: uppercase; }
.field input { min-width: 0; height: 40px; border: 1px solid #3b5064; border-radius: 7px; background: #0b1825; color: var(--text); padding: 0 11px; font-size: 14px; }
.field input::placeholder { color: #718496; }
.button { border-radius: 7px; min-height: 40px; padding: 0 15px; cursor: pointer; font: 600 13px Inter, sans-serif; border: 1px solid transparent; transition: transform .12s ease, filter .12s ease, background .12s ease; white-space: nowrap; }
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .54; }
.button-primary { background: var(--cyan); color: #06201f; }
.button-secondary { background: #1b2d3e; color: var(--text); border-color: #3b5165; }
.button-small { min-height: 35px; background: #20384a; border-color: #486176; color: var(--text); padding-inline: 12px; }
.divider { align-self: center; color: #8093a5; text-align: center; font: 10px var(--mono); padding-top: 17px; }
.room-row { border-top: 1px solid rgba(127, 157, 181, .17); margin-top: 14px; padding-top: 12px; display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.room-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.room-label { color: var(--muted); font-size: 10px; }
.room-copy strong { font: 12px var(--mono); color: var(--cyan); overflow-wrap: anywhere; }
.notice { min-height: 17px; color: #a6b8c6; margin: 11px 0 0; font-size: 13px; line-height: 1.4; }
.notice.error { color: #ff9aa5; }
.notice.success { color: var(--cyan); }
.lobby-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(127, 157, 181, .17); padding-top: 12px; margin-top: 10px; }
.waiting-copy { color: #b6c4d0; font-size: 11px; }
.race-area { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); align-items: stretch; gap: 12px; margin-top: 18px; }
.player-panel { min-width: 0; border: 1px solid #2d485b; border-radius: 11px; padding: 14px 14px 11px; background: linear-gradient(155deg, rgba(18, 35, 50, .96), rgba(11, 23, 35, .97)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.rival-panel { border-color: #57482e; background: linear-gradient(155deg, rgba(40, 34, 25, .58), rgba(20, 25, 31, .96)); }
.player-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.player-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.player-dot { flex: 0 0 auto; }
.player-dot.cyan { background: var(--cyan); box-shadow: 0 0 10px rgba(85, 230, 209, .55); }
.player-dot.amber { background: var(--amber); box-shadow: 0 0 10px rgba(246, 200, 95, .44); }
.player-role { display: block; color: #92a8ba; font-size: 9px; margin-bottom: 2px; }
.player-id h2 { color: var(--text); font: 700 18px/1 var(--display); letter-spacing: .04em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.score { text-align: right; }
.score > span { display: block; color: var(--muted); font-size: 9px; }
.score strong { color: var(--text); font: 700 23px/1 var(--display); font-variant-numeric: tabular-nums; }
.board-wrap { display: flex; justify-content: center; min-height: 206px; padding: 10px 4px; background: rgba(3, 10, 16, .42); border: 1px solid rgba(87, 118, 141, .2); border-radius: 8px; overflow: hidden; }
.board { display: grid; grid-template-columns: repeat(7, minmax(30px, 1fr)); grid-template-rows: repeat(5, minmax(30px, 1fr)); gap: clamp(3px, .65vw, 7px); width: min(100%, 372px); aspect-ratio: 7 / 5; align-self: center; }
.socket { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid rgba(89, 116, 136, .17); border-radius: 6px; background: rgba(50, 71, 87, .18); position: relative; }
.socket.active { cursor: pointer; border-color: rgba(82, 169, 174, .39); background: #122838; box-shadow: inset 0 0 12px rgba(28, 157, 170, .08); touch-action: manipulation; }
.socket.rival-active { border-color: rgba(192, 144, 60, .36); background: #302b22; box-shadow: inset 0 0 12px rgba(236, 178, 63, .05); }
.socket.active:hover:not(:disabled) { border-color: var(--cyan); background: #18394a; }
.socket.rival-active:hover:not(:disabled) { border-color: var(--amber); background: #3b3427; }
.socket:disabled { cursor: default; }
.socket svg { display: block; width: 79%; height: 79%; overflow: visible; transition: transform .14s ease; }
.socket svg path { fill: none; stroke: var(--cyan); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(85, 230, 209, .28)); }
.rival-panel .socket svg path { stroke: var(--amber); filter: drop-shadow(0 0 3px rgba(246, 200, 95, .24)); }
.socket svg circle { fill: #e8fffc; stroke: none; }
.rival-panel .socket svg circle { fill: #fff1ca; }
.socket .endpoint { position: absolute; font: 700 8px var(--mono); color: #8ca1b2; bottom: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; letter-spacing: .04em; }
.socket.endpoint-start, .socket.endpoint-end { background: rgba(38, 94, 97, .32); }
.rival-panel .socket.endpoint-start, .rival-panel .socket.endpoint-end { background: rgba(113, 83, 33, .24); }
.socket.solved { border-color: var(--cyan); background: rgba(31, 117, 110, .36); box-shadow: 0 0 15px rgba(85, 230, 209, .16); }
.rival-panel .socket.solved { border-color: var(--amber); background: rgba(148, 103, 24, .31); box-shadow: 0 0 15px rgba(246, 200, 95, .14); }
.socket.solved svg path { stroke: #c4fff6; }
.rival-panel .socket.solved svg path { stroke: #fff0c4; }
.versus { position: relative; display: flex; justify-content: center; align-items: center; color: #657a8d; font: 700 15px var(--display); }
.versus i { position: absolute; width: 1px; height: 58%; top: 21%; background: linear-gradient(transparent, #40576a, transparent); z-index: 0; }
.versus span { position: relative; z-index: 1; background: var(--bg); padding: 7px 0; }
.player-foot { min-height: 18px; display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; color: #94a8b8; font-size: 9px; }
.player-foot .good { color: var(--cyan); }
.rival-panel .player-foot .good { color: var(--amber); }
.moves { color: #74889a; white-space: nowrap; }
.page-foot { display: flex; justify-content: space-between; gap: 16px; margin: 17px 2px 0; color: #91a4b4; font-size: 10px; line-height: 1.5; }
.page-foot b { color: #d6e1e9; font-weight: 500; margin-right: 8px; }
[hidden] { display: none !important; }

@media (max-width: 780px) {
  .shell { width: min(620px, calc(100% - 28px)); padding-top: 17px; }
  .intro { padding: 26px 0 20px; }
  .connect-controls { grid-template-columns: 1fr 1fr; }
  .name-field { grid-column: 1; }
  #hostButton { grid-column: 2; }
  .divider { grid-column: 1 / -1; padding-top: 2px; }
  .join-field { grid-column: 1; }
  #joinButton { grid-column: 2; }
  .race-area { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .versus { height: 18px; }
  .versus i { display: none; }
  .versus span { background: transparent; }
  .player-panel { padding: 13px; }
  .board-wrap { min-height: unset; }
  .board { width: min(100%, 390px); gap: clamp(4px, 1vw, 8px); }
}
@media (max-width: 500px) {
  .shell { width: calc(100% - 24px); }
  .topbar { height: 41px; padding-bottom: 12px; }
  .top-status { font-size: 9px; }
  .intro { align-items: center; gap: 10px; }
  h1 { font-size: clamp(36px, 11vw, 49px); }
  .lede { font-size: 13px; max-width: 290px; }
  .clock-card { min-width: 86px; padding-left: 12px; }
  .clock-label, .clock-note { font-size: 9px; }
  .clock-card strong { font-size: 32px; }
  .connect-card { padding: 14px 13px 12px; }
  .connect-controls { gap: 8px; }
  .field input { font-size: 13px; padding-inline: 8px; }
  .button { padding: 0 9px; font-size: 12px; }
  .room-row { align-items: flex-end; }
  .room-copy strong { font-size: 10px; }
  .player-panel { padding: 11px 9px 9px; }
  .board { gap: 3px; }
  .socket { border-radius: 4px; }
  .socket .endpoint { font-size: 7px; bottom: -9px; }
  .page-foot { flex-direction: column; gap: 4px; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}