:root {
  --bg: #101418;
  --panel: #1c232b;
  --line: #2e3945;
  --ink: #f3f5f7;
  --muted: #9aa7b4;
  --accent: #ffcc00;
  --p1: #ff4d4d;
  --p2: #3d8bff;
  --p3: #ffcc00;
  --p4: #33cc66;
  --good: #33cc66;
  --ok: #ffb020;
  --bad: #ff4d4d;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}
button { font: inherit; }
[hidden] { display: none !important; }

/* ---------- lobby */
#lobby {
  max-width: 420px; margin: 0 auto; padding: 32px 16px; display: flex; flex-direction: column; gap: 14px;
}
#lobby[hidden] { display: none; }
#lobby h1 { margin: 0 0 8px; font-size: 30px; font-style: italic; color: var(--accent); letter-spacing: .02em; }
#lobby h1 small { display: block; font-size: 15px; font-style: normal; color: var(--muted); letter-spacing: 0; }
#form { display: flex; flex-direction: column; gap: 14px; }
#me-row { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
#me-row b { color: var(--ink); }
#people-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
#people-box h2 { margin: 0 0 4px; font-size: 16px; }
.person { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 6px; }
.person span { color: var(--muted); font-size: 13px; }
#notify-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
#notify-box .row { margin-top: 0; }
#lobby label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; }
#lobby label.check input { width: 20px; height: 20px; }
#me-row button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: 4px 10px; }
#invite-out { display: block; background: #000; padding: 8px; border-radius: 8px; overflow-wrap: anywhere; font-size: 13px; user-select: text; -webkit-user-select: text; }
#lobby label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; }
#lobby input {
  font: inherit; font-size: 18px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
}
#lobby h2 { margin: 10px 0 0; font-size: 18px; }
#rooms { display: flex; flex-direction: column; gap: 10px; }
.room-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.room-title { font-weight: 800; } .room-title span { font-weight: 400; color: var(--muted); font-size: 14px; }
.room-pads { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.room-pads .slot { max-width: none; }
.room-card .row { margin-top: 8px; } .room-card button { padding: 8px 16px; }
button:disabled { opacity: .5; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
#laps-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
#laps-box h2 { margin: 0; font-size: 16px; }
#lap-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lap-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.lap-row:first-child { border-top: 0; padding-top: 2px; }
.lap-pos { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: #2a3440; color: var(--muted); }
.lap-row:nth-child(1) .lap-pos { background: #ffcc00; color: #1a1a1a; }
.lap-row:nth-child(2) .lap-pos { background: #c4ccd4; color: #1a1a1a; }
.lap-row:nth-child(3) .lap-pos { background: #cd7f32; color: #1a1a1a; }
.lap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lap-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lap-time { font-size: 20px; font-variant-numeric: tabular-nums; }
.lap-who { font-size: 17px; font-weight: 700; }
.lap-top .lap-pos { font-size: 19px; }
.lap-top .lap-time { font-size: 30px; color: var(--accent); }
.lap-top .lap-who { font-size: 20px; }
.lap-me .lap-who { color: var(--accent); }
.lap-about { color: var(--muted); font-size: 13px; }
#laps-box .row { margin-top: 6px; gap: 8px; }
#laps-box .row button { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; background: #26313c; color: #fff; }
.lap-top .row button { background: #33404d; }
#online { display: flex; flex-wrap: wrap; gap: 6px; }
#online span { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
#online span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3fbf6f; margin-right: 6px; vertical-align: 1px; }
#online small { color: var(--muted); }
#online span.away::before { background: #e0a83a; }
#online span.recent { opacity: 0.7; }
#online span.recent::before { background: transparent; border: 1px solid var(--muted); box-sizing: border-box; }
#code { text-transform: uppercase; letter-spacing: .3em; font-weight: 800; width: 100%; }
.join-row { display: flex; gap: 8px; }
.or { text-align: center; color: var(--muted); font-size: 14px; }
button.primary, .room-card button, dialog button {
  border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 700; background: #33404d; color: #fff;
}
button.primary { background: var(--p2); }
button.secondary { border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; font-weight: 700; background: var(--panel); color: var(--ink); }
button.danger { background: #7a2a2a; }
.err { color: var(--bad); min-height: 1.4em; margin: 0; }

/* ---------- game page */
#app {
  height: 100dvh; width: 100vw; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#app[hidden] { display: none; }
#bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; }
#slots { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; align-items: center; }
.slot {
  border: 1px solid var(--line); border-left: 4px solid; border-radius: 6px; background: var(--panel);
  color: var(--ink); padding: 3px 7px; font-size: 12px; max-width: 48%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot.p1 { border-left-color: var(--p1); } .slot.p2 { border-left-color: var(--p2); }
.slot.p3 { border-left-color: var(--p3); } .slot.p4 { border-left-color: var(--p4); }
.slot.free { color: var(--muted); border-style: dashed; border-left-style: solid; cursor: pointer; }
.slot.mine { outline: 2px solid var(--ink); }
.slot.bad span { color: var(--bad); } .slot.ok span { color: var(--ok); }
.watchers { font-size: 12px; color: var(--muted); }
#me { display: flex; gap: 8px; align-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }
#room-code { font-weight: 800; color: var(--accent); cursor: pointer; }
#ping.good { color: var(--good); } #ping.ok { color: var(--ok); } #ping.bad { color: var(--bad); }
#lag { color: var(--muted); }

#screen-wrap { position: relative; width: 100%; aspect-ratio: 320 / 224; max-height: 58dvh; margin: 0 auto; background: #000; }
#screen { width: 100%; height: 100%; display: block; image-rendering: pixelated; object-fit: contain; }
#notice {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); background: rgba(0,0,0,.75);
  padding: 4px 10px; border-radius: 8px; font-size: 13px; pointer-events: none;
}
#snd-tip {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 800; color: #111; background: var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.5); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.06); } }
.overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 12px; background: rgba(10, 14, 18, .88);
}
.overlay[hidden], #notice[hidden] { display: none; }
.overlay h1 { margin: 0; font-size: clamp(22px, 7vw, 40px); color: var(--accent); font-style: italic; }
.overlay p { margin: 0; max-width: 30em; }
.overlay button { border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; background: var(--p2); color: #fff; }

dialog {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  width: min(92vw, 440px); padding: 16px;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 12px; color: var(--accent); font-size: 20px; }
.menu-list { display: flex; flex-direction: column; gap: 8px; }
dialog button { width: 100%; }
#close-menu { margin-top: 12px; }
#key-prompt { min-height: 1.4em; margin: 0 0 8px; font-size: 17px; } #key-prompt b { color: var(--accent); }
#key-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; font-size: 14px; }
#key-list div { display: flex; justify-content: space-between; padding: 4px 8px; border-radius: 6px; }
#key-list div.now { background: #33404d; } #key-list b { color: var(--accent); }
#pad-prompt { min-height: 1.4em; margin: 8px 0; font-size: 17px; }
#pad-prompt b { color: var(--accent); }
#pad-test { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
#pad-test span { min-width: 40px; text-align: center; padding: 6px 8px; border-radius: 8px; background: #33404d; font-weight: 800; }
#pad-test span.on { background: var(--accent); color: #111; }
.hint { color: var(--muted); font-size: 13px; margin: 8px 0 4px; }
.row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- replays */
#recs { display: flex; flex-direction: column; gap: 8px; }
.rec-card { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.rec-card div { flex: 1; min-width: 0; } .rec-card b { display: block; }
.rec-card span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.rec-card button { border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 700; background: #33404d; color: #fff; }
.rec-card button.danger { background: #7a2a2a; }
.rec-social { margin: -4px 0 6px 12px; }
.rec-social, .social { display: flex; flex-direction: column; gap: 8px; }
.rec-social .err:empty, .social .err:empty { display: none; }
.soc-reacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
button.soc-link { background: transparent; border: 0; color: #6fa8ff; font-size: 14px; font-weight: 600; padding: 4px 6px; }
button.react { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 15px; }
button.react.on { border-color: #4a8ad8; background: #1d3350; }
.soc-comments { display: flex; flex-direction: column; gap: 6px; }
.comment { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.comment small { color: var(--muted); }
.comment p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
button.at { background: transparent; border: 0; color: #6fa8ff; font-size: 13px; padding: 0 0 0 8px; }
button.at.del { color: #e07a7a; }
.soc-form { display: flex; gap: 6px; }
.soc-form input { flex: 1; min-width: 0; background: #0b0f13; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px; font-size: 16px; }
.soc-form button { border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 700; background: #2b5fb0; color: #fff; }
#replay-bar { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.rp-row { display: flex; align-items: center; gap: 10px; }
#rp-seek { flex: 1; accent-color: var(--accent); height: 28px; }
#rp-time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); white-space: nowrap; }
.rp-btn { border: 0; border-radius: 999px; width: 44px; height: 44px; font-size: 18px; background: var(--accent); color: #111; }
.rp-speed { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; background: transparent; color: var(--ink); font-weight: 700; }
.rp-speed.on { background: var(--accent); color: #111; border-color: var(--accent); }
#rp-back { margin-left: auto; font-weight: 400; color: var(--muted); }

/* ---------- controller (portrait: under the picture) */
#pad {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "mid mid" "dpad face";
  align-items: center; justify-items: center; padding: 6px 12px 14px; min-height: 0; gap: 6px;
}
#pad.spectating .dpad, #pad.spectating #face, #pad.spectating .start { opacity: .3; }
.dpad {
  grid-area: dpad;
  --s: min(42vw, 28dvh, 200px);
  position: relative; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #232c36 0 60%, #171d24 61%);
  touch-action: none;
}
.dpad .arm { position: absolute; background: #3a4654; border-radius: 8px; }
.dpad .up, .dpad .down { left: 34%; width: 32%; height: 36%; }
.dpad .left, .dpad .right { top: 34%; height: 32%; width: 36%; }
.dpad .up { top: 4%; } .dpad .down { bottom: 4%; } .dpad .left { left: 4%; } .dpad .right { right: 4%; }
.dpad .hub { position: absolute; left: 34%; top: 34%; width: 32%; height: 32%; background: #3a4654; }
.dpad .arm.on { background: var(--accent); }

#mid { grid-area: mid; display: flex; align-items: center; gap: 14px; }
.btn {
  font-weight: 800; color: #fff; border: 0; touch-action: none;
  box-shadow: 0 4px 0 rgba(0,0,0,.45); transition: transform .03s;
}
.btn.on { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); filter: brightness(1.35); }
.start { background: #3a4654; border-radius: 999px; padding: 10px 22px; font-size: 13px; letter-spacing: .06em; }
.small { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }

/* A, B, C on a rising diagonal, like the Mega Drive pad */
#face {
  grid-area: face;
  --b: min(14vw, 10dvh, 74px);
  position: relative; width: calc(var(--b) * 2.9); height: calc(var(--b) * 2.05);
}
.face { position: absolute; width: var(--b); height: var(--b); border-radius: 50%; font-size: calc(var(--b) * .4); background: #3a4654; }
.face.a { left: 0; bottom: 0; }
.face.b { left: calc(var(--b) * .95); bottom: calc(var(--b) * .52); }
.face.c { left: calc(var(--b) * 1.9); bottom: calc(var(--b) * 1.04); }

/* ---------- landscape phones: picture in the middle, D-pad left, buttons right */
@media (orientation: landscape) and (max-height: 600px) {
  #app { --side: clamp(150px, 20vw, 240px); flex-direction: row; align-items: center; justify-content: center; }
  #bar { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 3; padding: 4px 8px; background: rgba(16,20,24,.8); }
  #screen-wrap {
    order: 2; flex: 0 0 auto; margin: 0;
    height: min(calc(100dvh - 34px), calc((100vw - 2 * var(--side)) * 0.7)); width: auto; max-height: none; margin-top: 30px;
  }
  #pad { display: contents; }
  .dpad { order: 1; flex: 0 0 auto; --s: min(calc(var(--side) - 20px), 52dvh); margin: 30px auto 0; }
  #face { order: 3; flex: 0 0 auto; --b: min(calc((var(--side) - 20px) / 2.9), 22dvh); margin: 30px auto 0; }
  #mid { position: fixed; bottom: calc(8px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 3; gap: 8px; }
  #mid .start { padding: 8px 14px; font-size: 12px; }
}

/* ---------- computers: no touch pad needed, bigger picture */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  #screen-wrap { max-height: 78dvh; }
  #pad { flex: 0 0 auto; }
  .dpad, #face { display: none; }
}