:root {
  --bg: #070b12;
  --glass: rgba(10, 16, 26, 0.62);
  --stroke: rgba(140, 180, 230, 0.16);
  --text: #dfe8f5;
  --muted: #8497af;
  --accent: #62aef0;
  --good: #63d894;
  --bad: #ff6b81;
  --gold: #f5cf5e;
  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, monospace;
  --ui: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  user-select: none;
}

#game { display: block; width: 100vw; height: 100vh; }

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  font-family: var(--mono);
  /* Above the scoreboard/pause tint so the HUD panels stay crisp behind it
     rather than being washed out by it. */
  z-index: 45;
}

.panel-glass {
  position: absolute;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------- crosshair -- */

.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}
.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: rgba(230, 245, 255, 0.85);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
.crosshair::before { left: 9px; top: 0; width: 2px; height: 20px; }
.crosshair::after { top: 9px; left: 0; height: 2px; width: 20px; }

/* ------------------------------------------------------------ top left -- */

#panel-left {
  left: 18px;
  top: 18px;
  width: 288px;
  padding: 14px 16px 12px;
}

.timer-row { display: flex; align-items: baseline; justify-content: space-between; }

.timer {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #f2f7ff;
  text-shadow: 0 0 22px rgba(98, 174, 240, 0.35);
}
.timer.running { color: #fff; }
.timer.finished { color: var(--gold); text-shadow: 0 0 26px rgba(245, 207, 94, 0.5); }

.timer-delta { font-size: 11px; color: var(--muted); }
.timer-delta.ahead { color: var(--good); }
.timer-delta.behind { color: var(--bad); }

.cp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.09em;
}
.cp-name { color: var(--accent); text-transform: uppercase; }
.cp-progress { color: var(--muted); }

.bar {
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-top: 5px;
}
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.14s linear;
}
.cp-bar .bar-fill { transition: width 0.35s ease; }

.speed-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 14px;
}
.speed-main { display: flex; align-items: baseline; gap: 5px; }
.speed-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 68px;
  display: inline-block;
}
.speed-unit { font-size: 11px; color: var(--muted); }
.speed-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-left: 4px;
}
.speed-side { text-align: right; line-height: 1.5; }
.speed-delta { display: block; font-size: 11px; height: 14px; }
.speed-delta.up { color: var(--good); }
.speed-delta.down { color: var(--bad); }
.speed-peak { font-size: 10px; color: var(--muted); }

#speed-graph {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: 8px;
  opacity: 0.9;
}

.stats-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.stats-row b { color: var(--text); font-weight: 600; }
.net-status { margin-left: auto; }
.net-status.online { color: var(--good); }
.net-status.offline { color: var(--bad); }

/* ----------------------------------------------------------- top right -- */

#panel-right {
  right: 18px;
  top: 18px;
  width: 300px;
  padding: 13px 15px 12px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  pointer-events: auto;
}

#panel-right h2,
.scoreboard h2 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}
#panel-right h2.spaced { margin-top: 16px; }

.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.lb-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 5px;
}
.lb-list .lb-pos { width: 16px; color: var(--muted); font-size: 11px; }
.lb-list .lb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-list .lb-time { font-variant-numeric: tabular-nums; color: var(--muted); }

/* ---- roster lists (online now / TAB): one grid so columns line up ------- */

.lb-roster {
  display: grid;
  /* The value columns are sized off their headings, not their values: "session
     best" is the widest thing in that column and must stay on one line. */
  grid-template-columns: 7px minmax(0, 1fr) 90px 58px 36px;
  align-items: center;
  gap: 3px 10px;
}
.lb-roster li { display: contents; }
.lb-roster .lb-empty { display: block; grid-column: 1 / -1; }
.lb-roster .lb-head span {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  opacity: 0.7;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--stroke);
}
.lb-roster .lb-time,
.lb-roster .lb-online,
.lb-roster .lb-ping { text-align: right; }
.lb-roster .lb-head span:nth-child(n + 3) { text-align: right; }
.lb-roster .lb-ping {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--muted);
}
.lb-roster .lb-ping.good { color: var(--good); }
.lb-roster .lb-ping.fair { color: var(--gold); }
.lb-roster .lb-ping.bad { color: var(--bad); }

.lb-roster.small {
  /* run + session best, both of which hold a full mm:ss.cc time. */
  grid-template-columns: 6px minmax(0, 1fr) 54px 54px 28px;
  gap: 2px 6px;
}
.lb-roster.small .lb-head span { font-size: 8px; }
.lb-list .lb-row.mine { background: rgba(98, 174, 240, 0.14); }
.lb-list .lb-row.mine .lb-time { color: var(--accent); }
.lb-row.rank-1 .lb-name { color: var(--gold); }
.lb-row.rank-2 .lb-name { color: #d6dfec; }
.lb-row.rank-3 .lb-name { color: #d09a6a; }
.lb-empty { color: var(--muted); font-size: 11px; font-style: italic; }
.lb-list.small { font-size: 11px; }
.lb-list .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.personal-best {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--stroke);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.pb-time { color: var(--gold); font-size: 15px; font-weight: 700; }
.pb-prev { margin-left: auto; }

/* -------------------------------------------------------- bottom left -- */

#left-bottom-stack {
  position: absolute;
  left: 18px;
  top: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  width: 288px;
  max-width: calc(100vw - 36px);
  min-height: 0;
}
#controls {
  position: relative;
  flex: 0 0 auto;
  width: 288px;
  max-width: 100%;
  padding: 11px 14px 13px;
  pointer-events: auto;
}
#help-toggle {
  all: unset;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}
#controls dl {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 3px 10px;
  margin: 11px 0 0;
  font-size: 11px;
}
#controls dt { color: var(--accent); }
#controls dd { margin: 0; color: var(--muted); }
#controls dd em { color: #b6c6dc; font-style: normal; }
#controls .tip {
  margin: 11px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--stroke);
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}
#controls .tip b { color: var(--good); }
#controls .setting {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--stroke);
  font-size: 11px;
  color: var(--muted);
}
#controls .setting + .setting { margin-top: 8px; padding-top: 8px; }
#controls .setting output {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
#controls .setting input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  margin: 2px 0 0;
  cursor: pointer;
  accent-color: var(--accent);
}
#controls.collapsed dl,
#controls.collapsed .setting,
#controls.collapsed .tip { display: none; }
#controls.collapsed #help-toggle span { transform: rotate(-90deg); display: inline-block; }

/* ------------------------------------------------------- bottom right -- */

#feed {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 320px;
  text-align: right;
}
.messages, .chat-log { list-style: none; margin: 0; padding: 0; }
.messages li {
  font-size: 11px;
  color: var(--muted);
  padding: 3px 0;
  transition: opacity 0.6s, transform 0.6s;
  text-shadow: 0 2px 8px #000;
}
.messages li.cp { color: var(--accent); }
.messages li.gold { color: var(--gold); }
.messages li.fade { opacity: 0; transform: translateX(14px); }

.chat-log {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(180px, 28vh);
  overflow: hidden;
  opacity: 1;
  font-size: 12px;
  text-align: left;
}
.chat-log li { padding: 2px 0; text-shadow: 0 2px 8px #000; }
.chat-name { color: var(--accent); }
.chat-text { color: var(--text); }

.chat-bar {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 9px;
  backdrop-filter: blur(14px);
  pointer-events: auto;
  font-size: 13px;
  color: var(--muted);
}
.chat-bar.open { display: flex; }
.chat-bar input {
  all: unset;
  flex: 1;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
}

/* ------------------------------------------------------------- center -- */

.center-message {
  position: absolute;
  left: 50%;
  top: 27%;
  transform: translate(-50%, -50%) scale(0.94);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.22s, transform 0.22s;
  white-space: nowrap;
}
.center-message.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.center-message.go { color: var(--good); }
.center-message.gold { color: var(--gold); }
.center-message.behind { color: var(--bad); }
.center-message.reset { color: var(--muted); font-size: 26px; }

.debug-panel {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  display: none;
  padding: 11px 15px;
  background: rgba(6, 10, 18, 0.82);
  border: 1px solid var(--stroke);
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--muted);
  min-width: 250px;
}
.debug-panel.visible { display: block; }
.debug-panel b {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 9px;
}
.debug-panel div:first-child b { margin-top: 0; }

/* Lives inside .scoreboard, stacked above the roster panel. */
.pause-hint {
  display: none;
  text-align: center;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pause-hint.visible { display: block; }
.pause-hint > div {
  padding: 22px 28px 18px;
  background: rgba(4, 7, 12, 0.72);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.pause-hint h2 { margin: 0; font-size: 30px; letter-spacing: 0.2em; text-transform: uppercase; }
.pause-hint p { color: var(--muted); font-size: 13px; }

/* -------------------------------------------------------- scoreboard -- */

.scoreboard {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* No backdrop-filter: this covers the whole viewport, so a blur here smears
     the chat log, the timer and every other HUD panel underneath it. */
  background: rgba(4, 7, 12, 0.62);
  z-index: 40;
  /* Transparent to clicks so the click-to-recapture still reaches the canvas;
     the panel itself takes them back for scrolling. */
  pointer-events: none;
}
.scoreboard.visible { display: flex; }
.scoreboard .sb-panel { pointer-events: auto; }
.scoreboard .panel { width: 520px; }
.scoreboard .sb-panel { width: 520px; }
.scoreboard .lb-list { max-height: 260px; overflow-y: auto; }
.lb-list .lb-online {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lb-list .lb-row.self .lb-name { color: var(--accent); }
.lb-list .lb-row.self .lb-name::after { content: " (you)"; color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------- overlay -- */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1100px 620px at 50% 12%, rgba(98, 174, 240, 0.16), transparent 70%),
    linear-gradient(180deg, #070b12, #0b1220);
  z-index: 50;
  transition: opacity 0.4s;
}
.overlay.hidden { opacity: 0; pointer-events: none; }

.panel {
  width: 480px;
  padding: 34px 36px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6);
}
.panel h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1.5px;
}
.panel h1 span { color: var(--accent); }
.panel .sub { margin: 6px 0 24px; color: var(--muted); font-size: 12px; font-family: var(--mono); }
.panel pre { color: var(--bad); font-size: 11px; white-space: pre-wrap; }

.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field input {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke);
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text);
}
.field input:focus { border-color: var(--accent); background: rgba(98, 174, 240, 0.1); }

.swatches { display: flex; gap: 8px; }
.swatch {
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c);
  opacity: 0.42;
  transition: opacity 0.15s, transform 0.15s;
}
.swatch:hover { opacity: 0.8; }
.swatch.active { opacity: 1; transform: scale(1.14); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }

.play {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  border-radius: 11px;
  background: linear-gradient(180deg, #62aef0, #3d84c9);
  color: #051020;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: transform 0.12s, filter 0.12s;
}
.play:hover { transform: translateY(-1px); filter: brightness(1.1); }
.play:active { transform: translateY(1px); }

.how {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--stroke);
}
.how h3 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--good);
}
.how p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--stroke);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
}
.how b { color: #b6c6dc; }

@media (max-height: 760px) {
  #controls dl { font-size: 10px; }
  #speed-graph { display: none; }
  .chat-log { max-height: 18vh; }
}

@media (max-width: 680px) {
  #left-bottom-stack {
    left: 10px;
    top: 10px;
    bottom: 10px;
    max-width: calc(100vw - 20px);
  }
  #feed { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
}