/* Kept deliberately cheap to render: no blur, shadows or animations, so the page itself never costs the game frames.
   Also used by admin.html (with admin.css on top). */

:root {
  --bg: #0d1014;
  --panel: #161a20;
  --raised: #1d222a;
  --border: #2b323c;
  --text: #e8edf3;
  --muted: #94a2b2;
  --accent: #3b82f6;
  --accent-text: #ffffff;
  --red: #ef4444;
  --radius: 10px;
  /* alliance fills with white text on them, and alliance colored text on the dark panels */
  --blue-fill: #1d4ed8;
  --red-fill: #b91c1c;
  --blue-text: #60a5fa;
  --red-text: #f87171;
  --amber: #fbbf24;
  /* behind things drawn over the game */
  --scrim: rgba(13, 16, 20, 0.78);
  --season-rebuilt: #eab308;
  --season-reefscape: #2dd4bf;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

#unity-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  outline: none;
  touch-action: none;
}

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* notched phones held sideways put the notch over the left or right edge */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(8, 10, 13, 0.82);
}

.panel {
  width: min(1000px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.screen-small { width: min(520px, 100%); }
.screen-medium { width: min(720px, 100%); }
#screen-pause, #screen-results { width: min(820px, 100%); }
/* the robot screen takes all the room it gets, its columns scroll on their own */
.screen-wide { width: min(1240px, 100%); height: 100%; }

header { padding: 20px 24px 0; }

h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h2 {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

h2 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

#status { margin: 6px 0 8px; color: var(--muted); font-size: 14px; }

.progress {
  height: 4px;
  background: var(--raised);
  border-radius: 2px;
  overflow: hidden;
}

#progress-bar {
  width: 0;
  height: 100%;
  background: var(--accent);
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

button, select {
  font: inherit;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
}

button:hover, select:hover { border-color: #445064; }

button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:disabled, select:disabled { opacity: 0.5; cursor: default; }

.segmented button[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* admin.html's robot list */
.robot-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px;
}

.robot-list button {
  text-align: left;
  padding: 8px 12px;
  min-height: 52px;
}

.robot-list button[aria-checked="true"] {
  border-color: var(--accent);
  background: #1c2a40;
}

.robot-list .name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.robot-list .by { display: block; color: var(--muted); font-size: 13px; }

.empty, .muted, .hint { color: var(--muted); }
.empty { margin: 4px 0; }
.hint { font-size: 13px; margin: 8px 0 0; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1 1 140px;
}

.row select { text-transform: none; letter-spacing: 0; font-weight: 400; width: 100%; }

label.inline { margin-left: 8px; white-space: nowrap; cursor: pointer; }
label.inline input { vertical-align: -2px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  padding: 4px 8px 6px 0;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid #20262e;
  vertical-align: top;
}

td:first-child { overflow-wrap: anywhere; }
td:not(:first-child) { white-space: nowrap; }
tr.section td { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 14px; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  white-space: nowrap;
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}

footer .spacer { flex: 1; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  min-width: 120px;
}

button.big { min-height: 52px; font-size: 18px; }

.error { color: #fca5a5; }

/* ---------- menu screens ---------- */

header.bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

header.bar h1 { font-size: 20px; }

/* a drawn chevron, arrow characters are missing from some phone and Chromebook fonts */
.back::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 1px 2px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.chip {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.chip:empty { display: none; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 28px 24px;
}

.home h1 { font-size: 30px; }

/* the SebSim wordmark: heavy, tight, with "Sim" in the accent colour */
.home h1.wordmark {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.wordmark span { color: var(--accent); }

.tagline {
  margin: -10px 0 0;
  color: var(--muted);
  font-size: 15px;
}

#loading p { margin-top: 0; }

/* the game and mode screens: a few big buttons side by side */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 20px;
  overflow-y: auto;
}

.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  min-height: 160px;
  padding: 18px 20px;
  text-align: left;
  border-radius: 12px;
  border-top: 4px solid var(--season, var(--border));
}

.choice:hover { border-top-color: var(--season, #445064); }
.choice[data-season="Rebuilt"] { --season: var(--season-rebuilt); }
.choice[data-season="Reefscape"] { --season: var(--season-reefscape); }
.choice-title { font-size: 26px; font-weight: 700; line-height: 1.15; }
.choice-year { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--season, var(--muted)); }
.choice-year:empty { display: none; }
.choice-text { color: var(--muted); }

#menu input[type="text"] {
  min-height: 40px;
  padding: 0 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.field-label input, .field-label select { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ---------- multiplayer ---------- */

.mp {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  overflow-y: auto;
}

.mp-name input { max-width: 280px; }

.mp-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.card h2 { margin: 0; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--text); }
.card p { margin: 0; font-size: 14px; }
.card button { margin-top: auto; }

#menu .code-input {
  font: 600 22px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
}

.mp-status { display: flex; align-items: center; gap: 10px; }
#mp-status { flex: 1; margin: 0; color: var(--muted); }
#mp-status.error { color: #fca5a5; }

.lobby {
  padding: 18px 20px;
  text-align: center;
  overflow-y: auto;
}

.lobby p { margin: 4px 0; }

.room-code {
  font: 700 44px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.2em;
  /* the letter spacing also follows the last letter, this keeps the code centered */
  padding-left: 0.2em;
}

.row-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px 0;
}

.player-list { margin: 8px 0 0; padding: 0; list-style: none; text-align: left; }

.player {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 5px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--raised);
}

.player-red { border-left-color: var(--red); }
.player-name { font-weight: 600; overflow-wrap: anywhere; }

/* ---------- robot screen ---------- */

.robots-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 20px;
  padding: 16px 20px;
}

.robots-body > * { min-height: 0; overflow-y: auto; }

.robot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  /* rows as tall as their cards; plain auto rows shrink to fit the scrolling column and the cards overlap */
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  padding: 2px;
}

.robot-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 6px 6px 8px;
  text-align: left;
}

.robot-card[aria-checked="true"] { border-color: var(--accent); background: #1c2a40; }
.robot-card .name { padding: 0 4px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.robot-card .by { padding: 0 4px; color: var(--muted); font-size: 12px; }

.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #0f1317;
}

.robot-card .thumb { flex: none; height: 84px; aspect-ratio: auto; }
/* robot pictures are squares drawn on the card color, letterboxed into the same color they blend in */
.thumb:not(.placeholder) { background: #1d222a; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.thumb-text { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: #4a5565; }
.robot-card[aria-checked="true"] .thumb-text { color: #7d9cc9; }

.robot-detail { display: flex; flex-direction: column; gap: 12px; }

.preview { display: flex; align-items: flex-start; gap: 12px; }
.preview-thumb { flex: 0 0 40%; max-width: 160px; }
.preview-thumb .thumb { aspect-ratio: 1; }
.preview-thumb .thumb-text { font-size: 34px; }
.preview-text { min-width: 0; }
.preview-text p { margin: 2px 0 0; font-size: 14px; }
.preview-text p:empty { display: none; }

h2.preview-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  overflow-wrap: anywhere;
}

.start-column { display: flex; flex-direction: column; gap: 8px; }

.spawn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.spawn-head h2 { flex: 1 0 auto; margin: 0; }
.alliance button { min-height: 32px; padding: 0 12px; }
.alliance button[data-alliance="Blue"][aria-checked="true"] { background: var(--blue-fill); border-color: var(--blue-fill); }
.alliance button[data-alliance="Red"][aria-checked="true"] { background: var(--red-fill); border-color: var(--red-fill); }

.inline-select { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.inline-select select { min-height: 32px; padding: 0 8px; }

#spawn-hint, #spawn-none { margin: 0; }

.options summary {
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.options summary .muted { font-weight: 400; }
.options .row { margin-top: 4px; }

.status-line {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-line.error { color: #fca5a5; }

/* ---------- settings, pause, results ---------- */

.settings { padding: 0 20px 16px; overflow-y: auto; }

label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  cursor: pointer;
}

label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

.pause-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 16px 20px 20px;
}

.pause-controls { min-height: 0; overflow-y: auto; }
.pause-controls h2 { margin-top: 0; }

.results-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding: 20px 24px;
  overflow-y: auto;
}

.banner {
  display: inline-block;
  margin: 0;
  padding: 3px 12px;
  border-radius: 6px;
  background: var(--raised);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.banner-blue { background: var(--blue-fill); }
.banner-red { background: var(--red-fill); }
.results-title { margin: 10px 0 2px; font-size: 30px; }

.final {
  display: flex;
  align-items: center;
  gap: 14px;
  font-variant-numeric: tabular-nums;
}

.final-score { font-size: 64px; font-weight: 800; line-height: 1.05; }
.final-blue, .col-blue { color: var(--blue-text); }
.final-red, .col-red { color: var(--red-text); }
.final-dash { font-size: 40px; color: var(--muted); }
#results-sub, #results-next { margin: 6px 0 0; font-size: 14px; }

.breakdown { font-size: 15px; font-variant-numeric: tabular-nums; }
.breakdown th { padding-right: 12px; }
.breakdown td, .breakdown thead th:not(:first-child) { width: 30%; padding-right: 4px; text-align: right; }
.breakdown tbody th { color: var(--text); font-weight: 400; border-bottom: 1px solid #20262e; }
.breakdown tr.total th, .breakdown tr.total td { font-weight: 700; border-bottom: none; }
#results-players h2 { margin-top: 16px; }

/* ---------- during a match ---------- */

#hud {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#hud button {
  background: rgba(13, 16, 20, 0.75);
  min-height: 34px;
}

#hud kbd { margin-left: 4px; }

#fps {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(13, 16, 20, 0.75);
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  pointer-events: none;
}

/* Score bar: top middle, clear of the Menu button (top left) and the touch controls (bottom corners). It never takes
   touches, the drive area under it keeps working. */
#scorebar {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

body:not(.in-match) #scorebar { display: none; }

/* the wordmark in the clock box, above the time */
.sb-brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.sb-row {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 8px;
}

.sb-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 66px;
  padding: 0 10px;
  color: #fff;
}

.sb-score.sb-blue { background: var(--blue-fill); }
.sb-score.sb-red { background: var(--red-fill); }
.sb-points { font-size: 26px; font-weight: 800; line-height: 1; }

/* the player's own alliance: outlined, with a "You" tag */
#scorebar[data-you="Blue"] .sb-score.sb-blue, #scorebar[data-you="Red"] .sb-score.sb-red { box-shadow: inset 0 0 0 2px #fff; }

.sb-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 3px 10px;
  background: var(--scrim);
}

.sb-time { font-size: 22px; font-weight: 700; line-height: 1.1; }
.sb-phase { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#scorebar[data-phase="endgame"] .sb-phase { color: var(--amber); }

/* Rebuilt: which hub counts right now and how long the shift lasts */
.sb-shift {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 5px;
  border-radius: 8px;
  background: var(--scrim);
  font-size: 12px;
}

.sb-shift-text { padding: 0 2px; font-weight: 600; white-space: nowrap; }

.sb-hub {
  min-width: 54px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.sb-hub.sb-blue.active { background: var(--blue-fill); border-color: var(--blue-fill); color: #fff; }
.sb-hub.sb-red.active { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
#scorebar[data-you="Blue"] .sb-hub.sb-blue, #scorebar[data-you="Red"] .sb-hub.sb-red { border-color: #fff; }

.loading-box { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
#match-loading p { margin: 0; font-size: 18px; }

/* ---------- on-screen controls ---------- */

#touch {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#drive-zone {
  position: absolute;
  left: 0;
  top: 56px;
  bottom: 0;
  width: 50%;
}

/* rests bottom left like the sketch, and jumps under the thumb wherever it lands on the left half */
.stick {
  position: absolute;
  left: calc(92px + env(safe-area-inset-left));
  top: calc(100% - 92px - env(safe-area-inset-bottom));
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(13, 16, 20, 0.25);
}

#drive-zone.active .stick { border-color: rgba(255, 255, 255, 0.55); }

.knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

#action-pad {
  position: absolute;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

#action-pad button {
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(13, 16, 20, 0.55);
  font-weight: 600;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

#shoot-button {
  width: 168px;
  height: 76px;
  border-radius: 18px;
  font-size: 22px;
}

#shoot-button.pressed {
  background: var(--accent);
  border-color: var(--accent);
}

/* a latched Shoot keeps a light outline so it reads as "on" without a finger on it */
#shoot-button.latched { border-color: #ffffff; }

#turn-strip {
  position: relative;
  width: 168px;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 26px;
  background: rgba(13, 16, 20, 0.4);
  color: rgba(255, 255, 255, 0.75);
  font-size: 24px;
  touch-action: none;
}

#turn-strip.active { border-color: rgba(255, 255, 255, 0.55); }

.strip-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

#turn-strip.active .strip-knob { background: rgba(255, 255, 255, 0.7); }

#more-toggle {
  min-width: 52px;
  height: 36px;
  border-radius: 18px;
  font-size: 18px;
  letter-spacing: 1px;
}

#touch-more {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px;
}

#touch-more[hidden] { display: none; }

#touch-more button {
  min-width: 80px;
  max-width: 132px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#touch-more button.pressed,
#touch-more button.switch[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-height: 380px) {
  .sb-brand { font-size: 10px; }
  #shoot-button { height: 64px; }
  #turn-strip { height: 46px; }
}

#touch-tip {
  position: absolute;
  left: 50%;
  bottom: 24%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(13, 16, 20, 0.75);
  white-space: nowrap;
  pointer-events: none;
}

/* playing sideways leaves room for the controls */
#rotate-hint { display: none; text-align: center; }
#rotate-hint p { font-size: 18px; }

@media (orientation: portrait) {
  body.touch-play #rotate-hint { display: flex; }
}

/* ---------- small screens ---------- */

/* landscape phones have little height, keep the menu compact */
@media (max-height: 500px) {
  .overlay {
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  header { padding: 12px 16px 0; }
  h1 { font-size: 18px; }
  h2 { margin: 10px 0 6px; }
  .robot-list { max-height: 112px; }
  .row { margin-top: 10px; }
  footer { padding: 6px 12px; }
  button, select { min-height: 34px; }
  button.big { min-height: 44px; font-size: 17px; }

  header.bar { padding: 6px 12px; gap: 6px 10px; }
  header.bar h1 { font-size: 17px; }
  .home { gap: 12px; padding: 18px 20px 16px; }
  .home h1 { font-size: 22px; }
  .home h1.wordmark { font-size: 30px; }
  .tagline { margin-top: -6px; font-size: 13px; }
  .stack { gap: 6px; }
  .choices { gap: 10px; padding: 12px; }
  .choice { min-height: 104px; padding: 12px 16px; }
  .choice-title { font-size: 22px; }
  .mp { gap: 10px; padding: 10px 16px 12px; }
  .card { gap: 8px; padding: 12px; }
  /* the code on the left, who is in the room on the right */
  #screen-lobby { width: min(760px, 100%); }
  .lobby {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 10px 16px;
  }
  .lobby-room { text-align: left; }
  .lobby-room #lobby-players { margin-top: 0; }
  .room-code { font-size: 34px; }
  .row-buttons { margin: 8px 0; }

  .robots-body { gap: 12px; padding: 8px 12px; }
  .robot-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
  .robot-card { gap: 4px; padding: 4px 4px 6px; font-size: 14px; }
  .robot-card .thumb { height: 50px; }
  .thumb-text { font-size: 16px; }
  .preview-thumb { flex-basis: 88px; }
  .preview-thumb .thumb-text { font-size: 22px; }
  h2.preview-name { font-size: 17px; }
  .robot-detail { gap: 8px; }
  .controls-table { font-size: 13px; }
  .start-column { gap: 6px; }
  /* the map and the "You" robot say what this is, the alliance and field fit on one line without the title */
  .spawn-head h2, #spawn-hint { display: none; }
  .alliance button, .inline-select select { min-height: 30px; }

  .settings { padding: 0 16px 10px; }
  label.check { min-height: 34px; }
  .pause-body { gap: 16px; padding: 10px 16px 12px; grid-template-columns: 190px minmax(0, 1fr); }
  .results-body { gap: 16px; padding: 12px 16px; }
  .results-title { margin: 6px 0 0; font-size: 22px; }
  .final-score { font-size: 46px; }
  .final-dash { font-size: 30px; }
  .breakdown { font-size: 14px; }
  .breakdown td, .breakdown th { padding-top: 4px; padding-bottom: 4px; }
}

@media (max-width: 760px) {
  header { padding: 16px 16px 0; }
  footer { padding: 12px 16px; }
  .robot-list { max-height: 200px; }
}

/* phones held upright and narrow windows: one column, the whole screen scrolls */
@media (max-width: 700px) {
  .robots-body { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; }
  .robots-body > * { overflow: visible; }
  .robot-grid { max-height: 280px; overflow-y: auto; }
  .mp-cards, .lobby { grid-template-columns: minmax(0, 1fr); }
  .pause-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .pause-controls { overflow: visible; }
  .results-body { grid-template-columns: minmax(0, 1fr); }
}

/* the score bar moves right so it never covers the Menu button */
@media (max-width: 520px) {
  #scorebar { left: auto; right: calc(8px + env(safe-area-inset-right)); transform: none; align-items: flex-end; }
}