/* LABYRINTH: LEVELS OF SHADOW - interface styling.
   Deliberately spare: thin type, cyan signal colour, everything readable at a
   glance so it never competes with the labyrinth itself. */

:root {
  --bg: #070a10;
  --panel: rgba(10, 16, 24, 0.88);
  --line: rgba(120, 190, 220, 0.22);
  --ink: #d6e6f2;
  --dim: #7f97a8;
  --accent: #5fe3d0;
  --accent-dim: #2b8a80;
  --warn: #ff7a5c;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--font);
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}

canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ------------------------------------------------------------- overlays */
/* align-items:center on a scrolling flex container is a trap: content taller
   than the viewport overflows equally in both directions, and the top half
   cannot be scrolled to at all - it is simply unreachable. Auto margins centre
   the same way but push the overflow to the bottom, where the scrollbar can
   get at it. */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(18, 30, 44, 0.82), rgba(4, 6, 10, 0.96));
  backdrop-filter: blur(3px);
  overflow: auto;
}
.overlay > * { margin: auto; }

.loading-box { text-align: center; width: min(560px, 86vw); }

.title {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  letter-spacing: 0.42em;
  margin: 0 0 0.1em 0.42em;
  font-weight: 300;
  color: var(--ink);
  text-shadow: 0 0 26px rgba(95, 227, 208, 0.28);
}
.subtitle {
  font-size: clamp(0.75rem, 2vw, 1.05rem);
  letter-spacing: 0.55em;
  margin: 0 0 1.6em 0.55em;
  font-weight: 300;
  color: var(--accent);
}
/* Running text is capped for readability and then centred in whatever it sits
   in. Without the auto margins a capped block hugs the left edge of a centred
   screen, and the paragraph reads as if it had slipped out of alignment. */
.tagline {
  color: var(--dim); line-height: 1.75; font-size: 0.95rem;
  max-width: 56ch; margin: 0 auto 2rem;
}
.footnote {
  color: var(--dim); font-size: 0.76rem; opacity: 0.8;
  max-width: 62ch; margin: 1.6rem auto 0;
}
.hint {
  color: var(--dim); font-size: 0.85rem; line-height: 1.65;
  max-width: 68ch; margin: 0.2rem auto 0;
}
.hint.lead { font-size: 0.95rem; line-height: 1.8; max-width: 78ch; margin-bottom: 0.4rem; }

.bar {
  height: 3px; background: rgba(255, 255, 255, 0.09);
  border-radius: 2px; overflow: hidden; margin: 1.6rem 0 0.9rem;
}
.bar.small { height: 4px; width: 110px; margin: 4px 0 0; }
.bar > div { height: 100%; width: 0%; background: var(--accent); transition: width 0.18s linear; }
#load-text { color: var(--dim); font-size: 0.8rem; letter-spacing: 0.16em; }

/* --------------------------------------------------------------- menus */
.menu-shell { width: min(1080px, 92vw); padding: 4vh 0 6vh; }
.screen { text-align: center; }
/* A screen that needs more room than the shell gives it, without making every
   other screen equally wide. */
.screen.wide { width: min(1420px, 96vw); margin-left: 50%; transform: translateX(-50%); }
.screen h2 { font-weight: 300; letter-spacing: 0.32em; font-size: 1.5rem; margin: 0 0 0.4em; }
.screen h3 {
  font-weight: 400; letter-spacing: 0.22em; font-size: 0.78rem;
  color: var(--accent); margin: 0 0 1rem; text-align: left;
}


.buttons { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; margin: 2rem 0 1rem; }
.buttons.row { flex-direction: row; justify-content: center; flex-wrap: wrap; }

button {
  font-family: var(--font);
  font-size: 0.86rem; letter-spacing: 0.22em; font-weight: 400;
  color: var(--ink); background: rgba(20, 34, 46, 0.7);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 0.8rem 2.2rem; min-width: 15rem;
  cursor: pointer; transition: 0.14s;
}
button:hover:not(:disabled) { background: rgba(38, 72, 88, 0.85); border-color: var(--accent-dim); color: #fff; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.35; cursor: default; }
button.primary { border-color: var(--accent-dim); color: var(--accent); }
button.small { min-width: auto; padding: 0.5rem 0.9rem; font-size: 0.72rem; letter-spacing: 0.14em; }

.vr-button {
  margin-top: 1.2rem; border-color: rgba(120, 220, 255, 0.4);
  color: #9ce8ff; background: rgba(14, 40, 56, 0.7);
}
.vr-button.disabled { opacity: 0.32; }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; margin: 1.4rem 0; }
.card {
  text-align: left; padding: 1.1rem 1.2rem; border: 1px solid var(--line);
  border-radius: 4px; background: var(--panel); cursor: pointer; transition: 0.15s;
}
.card:hover { border-color: var(--accent-dim); background: rgba(20, 44, 56, 0.9); }
.card.locked { opacity: 0.4; cursor: not-allowed; }
.card h4 { margin: 0 0 0.3rem; font-weight: 400; letter-spacing: 0.14em; font-size: 0.95rem; }
.card p { margin: 0 0 0.6rem; color: var(--dim); font-size: 0.78rem; line-height: 1.5; }
.card .meta { font-family: var(--mono); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.06em; }

/* ----------------------------------------------------------------- form */
.form, .settings-cols > div { display: flex; flex-direction: column; gap: 0.85rem; text-align: left; }
.form { max-width: 520px; margin: 1.5rem auto; }
.settings-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin: 1.6rem auto; text-align: left; }

/* ------------------------------------------------------------ how to play */
/* Columns rather than a grid: the cards are all different lengths, and a grid
   would leave a ragged hole under every short one. Multi-column packs them. */
.help-cols {
  columns: 3 360px; column-gap: 1.1rem;
  margin: 1.8rem auto 0; text-align: left;
}
.help-card {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: inline-block; width: 100%; margin: 0 0 1.1rem;
  border: 1px solid var(--line); border-radius: 5px;
  background: rgba(10, 17, 25, 0.55);
  padding: 1.3rem 1.5rem 1.4rem;
}
.help-card h3 {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.86rem; letter-spacing: 0.2em; margin: 0 0 0.9rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--line);
}
.help-card .ico { width: 1.35rem; height: 1.35rem; flex: none; color: var(--accent); }
.help-card ul.keys { font-size: 0.9rem; line-height: 1.62; }
.help-card ul.keys li { margin-bottom: 0.62rem; padding-left: 0.95rem; position: relative; }
.help-card ul.keys li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 4px; height: 4px; border-radius: 1px; background: var(--accent-dim);
}
.help-card ul.keys li:last-child { margin-bottom: 0; }
.help-card .hint { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.06); max-width: none; }

/* a key cap, so a control reads as something you press */
kbd {
  display: inline-block; font-family: var(--mono); font-size: 0.76rem;
  line-height: 1.35; padding: 0.08rem 0.42rem; margin: 0 0.06rem;
  color: var(--ink); background: rgba(24, 40, 52, 0.9);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px;
  white-space: nowrap;
}
/* the little coloured squares that stand in for the key doors */
.chip {
  display: inline-block; width: 0.72rem; height: 0.72rem; border-radius: 2px;
  margin-right: 0.22rem; vertical-align: -1px; border: 1px solid rgba(255, 255, 255, 0.3);
}
.chip-red { background: #ff4433; }
.chip-blue { background: #4488ff; }
.chip-yellow { background: #ffd633; }
.chip-green { background: #46ee68; }
.chip-cyan { background: #46dcee; }
.chip-magenta { background: #ff4bd8; }
.chip-white { background: #f4f8ff; }
.chip-black { background: #0a0a10; border-color: #7a1830; }

label { display: flex; align-items: center; gap: 0.7rem; font-size: 0.82rem; color: var(--dim); }
label.check { justify-content: flex-start; }
label input[type="range"] { flex: 1; accent-color: var(--accent); }
label .val { font-family: var(--mono); color: var(--ink); min-width: 3.2rem; text-align: right; font-size: 0.76rem; }
label .val.wide { min-width: 10.5rem; }

select, input[type="text"] {
  flex: 1; font-family: var(--font); font-size: 0.82rem;
  background: rgba(10, 20, 28, 0.9); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.5rem 0.6rem;
}
.seed-row { display: flex; gap: 0.5rem; flex: 1; }
.seed-row input { flex: 1; font-family: var(--mono); letter-spacing: 0.08em; }

ul.keys { list-style: none; padding: 0; margin: 0; color: var(--dim); font-size: 0.82rem; line-height: 2; }
ul.keys b { color: var(--ink); font-weight: 500; }

table.records { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin: 1.2rem 0; }
table.records th, table.records td { padding: 0.55rem 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-align: left; }
table.records th { color: var(--accent); font-weight: 400; letter-spacing: 0.16em; font-size: 0.7rem; }
table.records td.time { font-family: var(--mono); color: var(--ink); text-align: right; }

/* ------------------------------------------------------------------ hud */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-size: 0.8rem; }
#hud > div { position: absolute; }

#crosshair {
  left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: rgba(220, 245, 255, 0.55);
  box-shadow: 0 0 6px rgba(120, 220, 255, 0.5);
}
#hud-top-left { left: 1.2rem; top: 1rem; }
#hud-top-right { right: 1.2rem; top: 1rem; text-align: right; }
#hud-bottom-left { left: 1.2rem; bottom: 1.1rem; }
#hud-bottom-right { right: 1.2rem; bottom: 1.1rem; text-align: right; }

#hud-level { letter-spacing: 0.24em; color: var(--ink); opacity: 0.9; }
#hud-objective { color: var(--accent); font-size: 0.76rem; margin-top: 0.25rem; letter-spacing: 0.08em; }
#hud-timer { font-family: var(--mono); font-size: 1.25rem; color: var(--ink); letter-spacing: 0.06em; }
#hud-timer.warn { color: var(--warn); }
#hud-best, #hud-fps { font-family: var(--mono); font-size: 0.7rem; color: var(--dim); }
#hud-top-right #hud-track {
  color: var(--accent); font-size: 0.72rem; margin-top: 0.3rem;
  max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0.85;
}
#hud-stats { color: var(--dim); font-family: var(--mono); font-size: 0.74rem; margin-top: 0.4rem; }
#hud-score {
  font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.06em;
  color: var(--accent); margin-top: 0.45rem;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}
#hud-score.negative { color: var(--warn); }
#hud-buffs {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: #ffd633; margin-top: 0.2rem; min-height: 0.9rem;
}

/* the number that flies off the crosshair when an orb is taken */
#score-pops { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.score-pop {
  position: absolute; top: 46%;
  font-family: var(--mono); font-size: 1.1rem; font-weight: 600;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  animation: pop-up 1.1s ease-out forwards;
}
.score-pop.bad { font-size: 1.25rem; }
.score-pop.note { font-size: 0.8rem; letter-spacing: 0.18em; }
@keyframes pop-up {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  18%  { opacity: 1; transform: translateY(-10px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-70px) scale(1); }
}
#hud-battery span { color: var(--dim); font-size: 0.62rem; letter-spacing: 0.16em; }

#hud-keys { display: flex; gap: 0.4rem; }
.keychip {
  width: 1.5rem; height: 1.5rem; border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

#hud-prompt {
  left: 50%; top: 58%; transform: translateX(-50%);
  background: rgba(6, 12, 18, 0.72); border: 1px solid var(--line);
  border-radius: 3px; padding: 0.4rem 0.9rem;
  letter-spacing: 0.14em; font-size: 0.76rem; color: var(--ink);
  opacity: 0; transition: opacity 0.14s;
}
#hud-prompt.show { opacity: 1; }

#hud-toast {
  left: 50%; top: 16%; transform: translateX(-50%);
  text-align: center; color: var(--accent);
  letter-spacing: 0.16em; font-size: 0.86rem;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
  opacity: 0; transition: opacity 0.35s;
}
#hud-toast.show { opacity: 1; }

/* the always-on corner view */
#minimap {
  margin-top: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(4, 7, 11, 0.55);
  padding: 3px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  line-height: 0;
}
#minimap canvas { display: block; border-radius: 2px; image-rendering: pixelated; }
/* square by construction, so it never stretches out of proportion */
#minimap.size-s canvas { width: 8.5rem; height: 8.5rem; }
#minimap.size-m canvas { width: 12rem; height: 12rem; }
#minimap.size-l canvas { width: 16rem; height: 16rem; }

@media (max-width: 760px) {
  #minimap.size-l canvas { width: 11rem; height: 11rem; }
  #minimap.size-m canvas { width: 9rem; height: 9rem; }
}

#map-panel {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0.6rem; background: rgba(6, 10, 16, 0.9);
  border: 1px solid var(--line); border-radius: 4px;
}
#map-panel canvas { width: min(70vh, 70vw); height: min(70vh, 70vw); display: block; image-rendering: pixelated; }
.map-hint { color: var(--dim); font-size: 0.68rem; letter-spacing: 0.12em; text-align: center; margin-top: 0.5rem; }

/* The bloom that covers a recall jump. Pointer events off, so it can never
   swallow a click even if a bug leaves it visible. */
#screen-flash {
  position: fixed; inset: 0; z-index: 14; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(210, 255, 255, 0.95), rgba(120, 220, 255, 0.75));
  opacity: 0;
}

/* ------------------------------------------------------- retro filters */
#retro-overlay { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
#retro-overlay.soft { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%); }
#retro-overlay.vhs {
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.16) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}
canvas#gl.pixel { image-rendering: pixelated; }

@media (max-width: 640px) {
  .menu-shell { width: 94vw; }
  button { min-width: 12rem; padding: 0.7rem 1.4rem; }
}


/* ------------------------------------------------------- control binding */
.preset-row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0; }
.preset-row button { min-width: auto; padding: 0.55rem 1.1rem; font-size: 0.72rem; }

#bindings { margin: 1.4rem 0; text-align: left; }

/* tab bar */
.tabs {
  display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center;
  margin: 0 0 1.4rem; border-bottom: 1px solid var(--line); padding-bottom: 0.7rem;
}
.tab {
  min-width: auto; padding: 0.5rem 1.1rem;
  font-size: 0.72rem; letter-spacing: 0.16em;
  background: transparent; border-color: transparent; color: var(--dim);
}
.tab:hover:not(.active) { background: rgba(30, 56, 70, 0.6); color: var(--ink); }
.tab.active {
  color: var(--accent); border-color: var(--accent-dim);
  background: rgba(20, 44, 54, 0.75);
}
.tab-panel { animation: fade-in 0.16s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.bind-form { max-width: none; margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.bind-group { margin-bottom: 1.4rem; }
.bind-group h3 { margin-bottom: 0.6rem; }
.bind-note { margin: 0 0 0.9rem; max-width: none; text-align: left; font-size: 0.78rem; }
.bind-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.42rem 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bind-row .name { flex: 1; font-size: 0.82rem; color: var(--dim); }
.bind-row .slots { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bind-slot {
  min-width: 7.5rem; padding: 0.34rem 0.7rem; font-size: 0.72rem; letter-spacing: 0.06em;
  font-family: var(--mono); text-align: center;
  background: rgba(12, 22, 30, 0.9); border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink); cursor: pointer;
}
.bind-slot.empty { color: var(--dim); opacity: 0.5; }
.bind-slot.picking { border-color: var(--accent); color: var(--accent); }
.bind-slot.listening { border-color: var(--accent); color: var(--accent); animation: pulse 1s infinite; }
.bind-slot.conflict { border-color: var(--warn); color: var(--warn); }
@keyframes pulse { 50% { opacity: 0.45; } }

/* The binding picker. A list rather than "now press the button you want",
   because the browser keeps the right button (context menu) and the middle
   button (autoscroll) for itself and fires them first. Clicking an entry is
   something no browser can intercept. */
.bind-picker {
  position: fixed; z-index: 40; min-width: 15rem;
  background: rgba(9, 15, 22, 0.98);
  border: 1px solid var(--accent-dim); border-radius: 5px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
  padding: 0.4rem; text-align: left;
}
.bind-pick-head {
  font-size: 0.68rem; letter-spacing: 0.18em; color: var(--accent);
  padding: 0.4rem 0.6rem 0.5rem; text-transform: uppercase;
}
.bind-pick-sep {
  font-size: 0.6rem; letter-spacing: 0.2em; color: var(--dim);
  padding: 0.55rem 0.6rem 0.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.25rem;
}
.bind-pick {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  width: 100%; min-width: 0; text-align: left;
  padding: 0.42rem 0.6rem; margin: 0; border: none; border-radius: 3px;
  background: transparent; color: var(--ink);
  font-size: 0.8rem; letter-spacing: 0.04em;
}
.bind-pick:hover:not(:disabled) { background: rgba(40, 78, 94, 0.9); color: #fff; }
.bind-pick .pick-hint { font-size: 0.66rem; color: var(--dim); letter-spacing: 0.1em; }
.bind-pick.current { color: var(--accent); }
.bind-pick.current::after { content: '•'; color: var(--accent); }
.bind-pick.clear { color: var(--warn); }
.bind-picker.listening .bind-pick:not(.listen) { opacity: 0.3; }
.bind-picker.listening .bind-pick.listen { color: var(--accent); animation: pulse 1s infinite; }

/* ------------------------------------------------------------------ music */
.music-bar {
  display: flex; align-items: center; gap: 0.6rem; justify-content: center;
  margin: 1.2rem auto; flex-wrap: wrap;
}
.music-bar button { min-width: 3.4rem; }
.music-bar #m-now { color: var(--accent); font-size: 0.82rem; margin-left: 0.6rem; }

.track-list {
  max-height: 34vh; overflow: auto; text-align: left;
  border: 1px solid var(--line); border-radius: 4px; margin: 1.2rem auto; max-width: 620px;
}
.track-row {
  padding: 0.5rem 0.9rem; font-size: 0.8rem; color: var(--dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer;
  display: flex; justify-content: space-between; gap: 1rem;
}
.track-row:hover { background: rgba(30, 60, 76, 0.6); color: var(--ink); }
.track-row.playing { color: var(--accent); }
.track-row .idx { font-family: var(--mono); opacity: 0.6; }

/* ------------------------------------------------------------ touch layer */
#touch-ui { position: fixed; inset: 0; z-index: 12; pointer-events: none; }

#touch-stick {
  position: absolute; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border: 2px solid rgba(140, 220, 240, 0.30); border-radius: 50%;
  background: rgba(10, 24, 34, 0.30);
  opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
#touch-stick.visible { opacity: 1; }
#touch-stick-knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(120, 220, 240, 0.42);
  border: 2px solid rgba(190, 240, 255, 0.6);
}

#touch-buttons {
  position: absolute; right: max(1rem, env(safe-area-inset-right)); bottom: max(1.2rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column-reverse; gap: 0.7rem; pointer-events: auto;
}
#touch-menu {
  position: absolute; right: max(1rem, env(safe-area-inset-right)); top: max(1rem, env(safe-area-inset-top));
  pointer-events: auto; width: 3.2rem; height: 3.2rem; min-width: 0;
}
.touch-btn {
  width: 4.4rem; height: 4.4rem; min-width: 0; padding: 0; border-radius: 50%;
  font-size: 0.66rem; letter-spacing: 0.08em;
  background: rgba(12, 28, 38, 0.62); border: 2px solid rgba(140, 220, 240, 0.32);
  color: #cfeaf5; -webkit-tap-highlight-color: transparent;
}
.touch-btn.primary { border-color: var(--accent); color: var(--accent); }
.touch-btn.down { background: rgba(60, 130, 150, 0.75); transform: scale(0.94); }
.touch-btn.latched { border-color: var(--accent); color: var(--accent); background: rgba(30, 80, 90, 0.75); }

/* the mouse crosshair is useless on a touch screen, and menus need room */
body.touch #crosshair { opacity: 0.35; }
body.touch #hud-top-right { right: 5.2rem; }
body.touch #hud-bottom-right { right: 6.2rem; }
body.touch #hud-stats, body.touch #hud-track { font-size: 0.68rem; }

@media (max-width: 900px) and (orientation: portrait) {
  #map-panel canvas { width: 86vw; height: 86vw; }
}
@media (max-height: 480px) {
  .menu-shell { padding: 2vh 0; }
  .title { font-size: 2rem; }
  .buttons { margin: 1rem 0 0.6rem; gap: 0.4rem; }
  button { padding: 0.6rem 1.4rem; }
}


/* -------------------------------------------------------- advanced screen */
#advanced-body { text-align: left; margin: 1.4rem auto 0; }
.adv-row {
  /* Five columns for five children: name, slider, number, unit, DEFAULT. Four
     of them left the button to wrap onto a grid line of its own, which is
     invisible until you notice every row is forty pixels too tall and the help
     text has drifted so far from its own row that it reads as the next one's. */
  display: grid; grid-template-columns: minmax(11rem, 1.4fr) 1fr 6.5rem 2.4rem 5.2rem;
  align-items: center; gap: 0.7rem; row-gap: 0.15rem;
  padding: 0.4rem 0.5rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.adv-row:hover { background: rgba(30, 56, 70, 0.35); }
.adv-row .adv-name { font-size: 0.8rem; color: var(--dim); }
.adv-row.changed .adv-name { color: var(--accent); }
.adv-row .adv-name .tagline-scope {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
  color: var(--warn); margin-left: 0.45rem; opacity: 0.85;
}
.adv-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.adv-row input[type="number"] {
  font-family: var(--mono); font-size: 0.76rem; text-align: right;
  background: rgba(10, 20, 28, 0.9); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.3rem 0.4rem; width: 100%;
}
.adv-row .adv-unit { font-size: 0.68rem; color: var(--dim); font-family: var(--mono); }
.adv-row .adv-reset {
  min-width: 0; padding: 0.25rem 0.4rem; font-size: 0.62rem; letter-spacing: 0.06em;
  opacity: 0; transition: opacity 0.12s;
}
.adv-row.changed .adv-reset { opacity: 1; }
.adv-help {
  grid-column: 1 / -1; font-size: 0.72rem; color: var(--dim);
  line-height: 1.45; opacity: 0.75; margin: 0;
}
.adv-io { margin: 1.6rem auto 0; max-width: 780px; text-align: left; }
.adv-io summary {
  cursor: pointer; color: var(--accent); font-size: 0.76rem; letter-spacing: 0.16em;
  padding: 0.5rem 0;
}
#adv-json {
  width: 100%; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5;
  background: rgba(8, 14, 20, 0.95); color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px; padding: 0.7rem; resize: vertical;
}

/* ------------------------------------------------------------ save slots */
.save-slots { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.4rem 0; text-align: left; }
.save-slot {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel);
}
.save-slot.auto { border-style: dashed; }
.save-slot.empty .slot-meta { opacity: 0.45; }
.save-slot .slot-id {
  font-family: var(--mono); font-size: 0.72rem; color: var(--accent);
  min-width: 3.4rem; letter-spacing: 0.1em;
}
.save-slot .slot-body { flex: 1; min-width: 0; }
.save-slot .slot-name {
  width: 100%; background: transparent; border: none; border-bottom: 1px dashed transparent;
  color: var(--ink); font-size: 0.86rem; font-family: var(--font); padding: 0.1rem 0;
}
.save-slot .slot-name:hover:not(:disabled),
.save-slot .slot-name:focus { border-bottom-color: var(--accent-dim); outline: none; }
.save-slot .slot-name:disabled { color: var(--dim); }
.save-slot .slot-meta {
  font-family: var(--mono); font-size: 0.68rem; color: var(--dim);
  margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.save-slot .slot-actions { display: flex; gap: 0.4rem; }
.save-slot .slot-actions button { min-width: auto; padding: 0.42rem 0.8rem; font-size: 0.68rem; letter-spacing: 0.1em; }

@media (max-width: 700px) {
  .save-slot { flex-wrap: wrap; }
  .save-slot .slot-body { flex-basis: 100%; }
}

/* ------------------------------------------------------------- alignment */
/* Last word on layout: every block of running text, controls or rows is capped
   and centred inside its screen. Left as-is, a capped block hugs the left edge
   of a centred screen and reads as a mistake - which is exactly how it looked.
   These rules sit at the end of the file on purpose, so they win. */
.settings-cols, .help-cols, .cards, .save-slots,
#bindings, #records-body, #complete-body, #level-list,
.preset-row, .music-bar, .track-list, .form {
  margin-left: auto; margin-right: auto;
}
#bindings, #records-body, #complete-body { max-width: 780px; }
.save-slots { max-width: 840px; }
.settings-cols { max-width: 1000px; }

/* headings and one line notices always sit on the screen's centre line */
.screen > h2, .screen > .hint, .screen > .tagline, .screen > .footnote { text-align: center; }
#records-body > .hint, #complete-body > .hint { text-align: center; }

/* a table on its own inside a centred screen */
table.records { margin-left: auto; margin-right: auto; }
table.records.tally { max-width: 420px; }
table.records .big td { color: var(--accent); font-size: 1.05rem; padding-top: 0.7rem; }
table.records .big td.time { font-size: 1.25rem; }
#complete-body .hint.best { color: var(--accent); margin-top: 1rem; letter-spacing: 0.2em; }

/* The build stamp, on the main menu, legible at a glance and selectable so it
   can be pasted into a message. After a deploy this is the first thing anybody
   looks for, and it used to be buried in the storage note. */
#build-badge {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--accent); opacity: 0.85; margin: 1.2rem 0 0;
  -webkit-user-select: text; user-select: text;
}
#build-badge.stale { color: var(--warn); opacity: 1; }