/* Co-op Tetris — self-contained styles (must not depend on the site CSS). */

:root {
  --orange: #F2963C;
  --orange-deep: #DE7A22;
  --frame: #C9631A;
  --ink: #3B2413;
  --cream: #FFF7E6;
  --p1: #E5533A;
  --p2: #3E7ED6;
  /* Height reserved at the bottom of the game screen for the touch pad. */
  --pad-min-h: 96px;   /* floor for the touch pad; it grows to fit its buttons */
  /* Strip the canvas gives up at the top (narrow screens) and the bottom
     (touch pad) so the DOM chrome never sits on top of the playfield. */
  --top-h: 0px;
  --pad-reserve: 0px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--orange);
  color: var(--ink);
  font-family: "Trebuchet MS", Verdana, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* No 300ms tap delay, no double-tap zoom — this is a game. Pinch-zoom is
     still available for anyone who needs it. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.screen { position: absolute; inset: 0; }
.screen[hidden] { display: none; }

/* ------------------------------------------------------------------ menu */
.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 0%, #F7A94F 0%, var(--orange) 45%, var(--orange-deep) 100%);
  overflow: auto;
}

.menu-card {
  width: min(620px, 100%);
  background: var(--cream);
  border: 6px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.18);
  padding: 28px 30px 22px;
  text-align: center;
}

.title {
  margin: 0;
  font-size: clamp(34px, 8vw, 56px);
  letter-spacing: 2px;
  line-height: 0.95;
  color: var(--ink);
}
.title span {
  display: block;
  color: var(--frame);
  -webkit-text-stroke: 2px var(--ink);
}

.tagline {
  margin: 10px 0 6px;
  font-size: 15px;
  line-height: 1.5;
  color: #6B4A2C;
}
.tagline em { color: var(--frame); font-style: normal; font-weight: 700; }

.cats { margin: 6px 0 14px; }
.cats canvas { image-rendering: pixelated; max-width: 100%; height: auto; }

.actions { display: grid; gap: 10px; margin: 4px 0 18px; }

.big-btn {
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 4px solid var(--ink);
  background: var(--orange);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .06s ease, box-shadow .06s ease;
}
.big-btn:hover { background: #F7A94F; }
.big-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.big-btn.ghost {
  background: #EDE1C8;
  color: #8A7A66;
  border-color: #B7A78F;
  box-shadow: 0 5px 0 #B7A78F;
  cursor: not-allowed;
}

.keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
  font-size: 13px;
}
@media (max-width: 560px) {
  .keys { grid-template-columns: 1fr; }
  /* keep the card clear of the floating back-link */
  .menu { align-items: flex-start; padding-top: 56px; }
}

.keys-col {
  background: #F6EAD0;
  border: 3px solid #E0CEA9;
  border-radius: 12px;
  padding: 10px 12px;
}
.keys-col p { margin: 6px 0 0; line-height: 1.9; color: #6B4A2C; }

.dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  margin-right: 7px;
  vertical-align: -1px;
}
.dot.p1 { background: var(--p1); }
.dot.p2 { background: var(--p2); }

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-right: 3px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-bottom-width: 3px;
  border-radius: 5px;
  font: 700 12px/1.5 inherit;
}

.devrow { margin: 16px 0 0; font-size: 12px; color: #997A55; }
.devrow a {
  color: var(--frame);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(201, 99, 26, .35);
  margin: 0 3px;
}
.devrow a:hover { border-bottom-color: var(--frame); }

/* --------------------------------------------------------- local setup */
.setup-card { text-align: center; }
.setup-title { margin: 0 0 2px; font-size: clamp(24px, 6vw, 34px); color: var(--ink); }

.setup-block { margin: 16px 0; text-align: left; }
.setup-block > .lbl { display: block; margin-bottom: 7px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-btn {
  font: 700 16px inherit;
  padding: 13px 10px;
  min-height: 50px;
  color: var(--ink);
  background: #F6EAD0;
  border: 4px solid #E0CEA9;
  border-radius: 12px;
  box-shadow: 0 4px 0 #E0CEA9;
  cursor: pointer;
}
.seg-btn:hover { background: #FBEFD6; }
.seg-btn[aria-pressed="true"] {
  background: var(--orange);
  border-color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}

.stepper { display: flex; align-items: center; gap: 10px; }
.step-btn {
  font: 700 22px/1 inherit;
  width: 54px;
  min-height: 50px;
  color: var(--ink);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
}
.step-btn:hover { background: #FBEFD6; }
.step-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.step-btn[disabled] {
  color: #B7A78F;
  border-color: #B7A78F;
  box-shadow: 0 4px 0 #B7A78F;
  cursor: not-allowed;
}
.step-count {
  flex: 1;
  font: 700 26px/1 inherit;
  text-align: center;
  padding: 12px 6px;
  color: var(--ink);
  background: #F6EAD0;
  border: 4px solid #E0CEA9;
  border-radius: 12px;
}
.setup-hint { margin: 7px 0 0; font-size: 12.5px; color: #997A55; }

/* The settings rows (label + stepper + typed field) are styled by
   js/setup-ui.js, which injects them for BOTH lobbies — keeping them there is
   what stops the local screen and the online waiting room drifting apart. */

/* one row per seat: who they are, and which team they play for */
.team-rows { display: grid; gap: 6px; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bots-difficulty { margin-top: 8px; }
@media (max-width: 430px) {
  /* Name on its own line, then team + difficulty together underneath, so a
     bot row still fits a 390px phone with both controls on it. */
  .team-row { flex-wrap: wrap; gap: 4px 8px; }
  .team-who { flex: 1 1 100%; }
  .row-controls { flex: 1 1 100%; justify-content: space-between; }
}
.team-who { font-size: 14px; font-weight: 700; color: #6B4A2C; }
.team-who.bot { color: #997A55; }
.team-pick { display: flex; gap: 4px; }
.team-btn {
  font: 700 13px inherit;
  width: 34px;
  min-height: 34px;
  color: var(--ink);
  background: #F6EAD0;
  border: 3px solid #E0CEA9;
  border-radius: 9px;
  cursor: pointer;
}
.team-btn:hover { background: #FBEFD6; }
.team-btn[aria-pressed="true"] { border-color: var(--ink); }
.setup-summary {
  margin: 4px 0 14px;
  padding: 11px 12px;
  background: #F6EAD0;
  border: 3px solid #E0CEA9;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #6B4A2C;
}
.setup-summary b { color: var(--frame); }
.setup-summary .warn-note { display: block; margin-top: 4px; color: #A9331F; }
.setup-back { margin-top: 2px; }

.back {
  position: absolute;
  z-index: 5;
  left: 16px; top: 14px;
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  background: rgba(59, 36, 19, .35);
  padding: 6px 12px;
  border-radius: 999px;
}
.back:hover { background: rgba(59, 36, 19, .55); }

/* ------------------------------------------------------------------ game */
/* Camera: the board is drag-pannable on big boards, so the canvas must not
   also scroll the page under the finger. */
#game-canvas { touch-action: none; }

.recenter {
  position: absolute;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--top-h) + 8px);
  font: 700 13px inherit;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.recenter:hover { background: #FBEFD6; }
.recenter:active { transform: translateX(-50%) translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.recenter[hidden] { display: none; }
@media (max-width: 560px) {
  .recenter { font-size: 14px; padding: 10px 16px; min-height: 44px; }
}
.game { display: block; }

#game-canvas {
  display: block;
  width: 100%;
  margin-top: var(--top-h);
  height: calc(100% - var(--top-h) - var(--pad-reserve));
}

.hud {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  pointer-events: none;
}

.controls {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.controls li { margin: 3px 0; }
.controls b { background: rgba(0, 0, 0, .22); padding: 0 4px; border-radius: 4px; }

.hud-btns { display: flex; gap: 8px; pointer-events: auto; }
.hud-btns button {
  font: 700 13px inherit;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.hud-btns button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/*
 * Narrow screens: the on-canvas cat strip needs the room, so drop the text
 * control legend (the menu screen still lists every key). The canvas draws its
 * own score plaque and cat strip, which the DOM chrome used to sit on top of.
 * Give up a strip at the top of the canvas instead and
 * put the game buttons (left) and the audio bar (right) in it — nothing
 * overlaps the playfield, at any width.
 */
@media (max-width: 640px), (max-height: 560px) {
  body { --top-h: calc(46px + env(safe-area-inset-top, 0px)); }
  .controls { display: none; }
  .hud {
    top: calc(7px + env(safe-area-inset-top, 0px));
    bottom: auto;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 10px;
  }
  .hud-btns button { padding: 8px 11px; font-size: 13px; }
  body[data-screen="game"] .music-select { max-width: 38vw; }
  body[data-screen="game"] .net-status { top: calc(53px + env(safe-area-inset-top, 0px)); }
}

/* ------------------------------------------------------- touch controls */
/*
 * Bottom-left: move. Bottom-right: rotate / soft drop, with hard drop sitting
 * above them. Hidden unless main.js decides this is a touch device, in which
 * case the canvas gives up --pad-h of height so the board is never covered.
 */
.touchpad { display: none; }

body.touch-ui[data-screen="game"] #touch-controls {
  display: flex;
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  /*
   * Content-height, not a fixed guess. --pad-h was a hand-picked number that
   * had to be bigger than the tallest button stack, so every phone paid for
   * the slack whether it needed it or not — and the 704px-tall viewport that
   * modern iPhone Safari actually uses missed the `max-height: 700px` rule
   * entirely and got the largest pad of all. main.js measures what this ends
   * up being and reserves exactly that from the canvas (--pad-reserve).
   */
  min-height: calc(var(--pad-min-h, 96px) + env(safe-area-inset-bottom, 0px));
  padding: 8px calc(12px + env(safe-area-inset-left, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(12px + env(safe-area-inset-right, 0px));
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  z-index: 15;
  background: linear-gradient(to bottom, rgba(59, 36, 19, 0) 0%, rgba(59, 36, 19, .18) 100%);
  /* Multi-touch: no scrolling, panning or zooming started from the pad. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

body.touch-ui[data-screen="game"] {
  /* Fallback until main.js measures the real pad (see reserveChrome()). */
  --pad-reserve: calc(var(--pad-min-h, 96px) + env(safe-area-inset-bottom, 0px));
  /* Wide touch screens (tablets) get the top strip too, so Restart/Menu never
     end up underneath the pad. */
  --top-h: calc(46px + env(safe-area-inset-top, 0px));
}
body.touch-ui[data-screen="game"] .controls { display: none; }
body.touch-ui[data-screen="game"] .hud {
  top: calc(7px + env(safe-area-inset-top, 0px));
  bottom: auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 10px;
}
body.touch-ui[data-screen="game"] .audio-bar {
  top: calc(7px + env(safe-area-inset-top, 0px));
  right: 10px;
}

.tp-group { display: flex; gap: 10px; align-items: flex-end; touch-action: none; }
.tp-right { flex-direction: column; align-items: stretch; gap: 8px; }
.tp-row { display: flex; gap: 10px; }

.tp-btn {
  font: 700 30px/1 "Trebuchet MS", Verdana, sans-serif;
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  padding: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.tp-btn.tp-wide {
  width: auto;
  height: 46px;
  font-size: 15px;
  letter-spacing: 1.5px;
  background: var(--orange);
}
.tp-btn .tp-glyph { font-size: 20px; }
/* Pressed state — the same "push the chunky button down" the menu uses. */
.tp-btn.on, .tp-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
  background: #F7A94F;
}
.tp-btn.tp-wide.on, .tp-btn.tp-wide:active { background: #E5533A; color: var(--cream); }

/* Short phones / landscape: shrink so the board keeps the room. */
@media (max-height: 760px) {
  body.touch-ui { --pad-min-h: 84px; }
  .tp-btn { width: 66px; height: 66px; font-size: 26px; }
  .tp-btn.tp-wide { height: 42px; font-size: 14px; }
}
@media (max-height: 520px) {
  body.touch-ui { --pad-min-h: 72px; }
  .tp-btn { width: 54px; height: 54px; font-size: 22px; }
  .tp-btn.tp-wide { height: 34px; font-size: 12px; }
}
@media (max-width: 340px) {
  .tp-btn { width: 58px; height: 58px; font-size: 24px; }
}

/* ============================ ONLINE LOBBY ============================ */
/* Same orange frame + cream card as the menu; screens are swapped by main.js. */
.lobby {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 0%, #F7A94F 0%, var(--orange) 45%, var(--orange-deep) 100%);
  overflow: auto;
}
.lobby-card { width: min(520px, 100%); text-align: left; position: relative; }

.lobby-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.lobby-title { margin: 0; font-size: 28px; letter-spacing: 1px; }

.conn-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #EDE1C8;
  color: #6B4A2C;
  white-space: nowrap;
}
.conn-pill[data-state="on"] { background: #CFEBD2; }

.panel {
  display: grid;
  /* minmax(0, 1fr), not the implicit `auto`: an auto track is sized by its
     items' MIN-CONTENT width, so one long label (or a wide roster row) pushed
     the whole waiting-room panel — title, roster and all — past its card on a
     phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.panel[hidden] { display: none; }
.row { display: flex; gap: 10px; align-items: stretch; }
.row .big-btn { flex: 1; }

.lbl { font-weight: 700; font-size: 14px; }

.text-input {
  font: inherit;
  font-size: 16px;
  padding: 11px 12px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #FFFDF6;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.text-input:focus { outline: 3px solid var(--frame); outline-offset: 1px; }

.mini {
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  border-radius: 11px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  white-space: nowrap;
}
.mini:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.mini[disabled], .big-btn[disabled] {
  cursor: not-allowed;
  opacity: .5;
  box-shadow: 0 3px 0 #B7A78F;
}

.games, .roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.games:empty { display: none; }
.games li, .roster li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #FFFDF6;
}
.games .gname, .roster .gname {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.games .gname { flex: 1; }
.roster .gname { flex: 1; }
.gcount { font-size: 13px; color: #6B4A2C; }
.tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: #EDE1C8;
  color: #6B4A2C;
}
.tag.you { background: var(--orange); color: var(--ink); }

.joincode { display: flex; gap: 8px; align-items: center; }
.joincode .lbl { white-space: nowrap; }
.lbl.small { font-size: 12px; color: #6B4A2C; }
.room-title { margin: 0; font-size: 20px; }
.muted { margin: 0; font-size: 13px; color: #6B4A2C; line-height: 1.5; }
.muted.small { font-size: 12px; color: #997A55; }
#room-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

.lobby-error {
  margin: 0;
  padding: 9px 11px;
  border: 3px solid #A9331F;
  border-radius: 12px;
  background: #FBE1DC;
  color: #7C2618;
  font-size: 13px;
  font-weight: 700;
}
.lobby-error[hidden] { display: none; }

.back-mini { position: absolute; top: -14px; right: -6px; }

/* In-game connection status, top-left over the canvas. */
.net-status {
  /* The score plaque is canvas-centred, so the pill is capped short of the
     middle and truncates instead of running under it. */
  max-width: calc(50% - 84px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  background: rgba(59, 36, 19, .45);
  border-radius: 999px;
  padding: 4px 11px;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.net-status[hidden] { display: none; }
.net-status .bad { color: #FFC9BE; }

@media (max-width: 640px), (max-height: 560px) {
  .net-status { font-size: 11px; padding: 3px 9px; }
}

/* A 12-player roster (or a busy lobby) scrolls inside the card. */
.games, .roster { max-height: min(42vh, 340px); overflow-y: auto; padding-right: 2px; }
.roster .mini.kick {
  padding: 3px 8px;
  font-size: 11px;
  box-shadow: 0 2px 0 var(--ink);
  background: #FBE1DC;
}

/* Audio bar (all screens) — small, top-right, out of the playfield's way. */
.audio-bar {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 20;
  display: flex;
  gap: 6px;
  align-items: center;
}
.music-select, .audio-mute {
  font: 700 12px "Trebuchet MS", Verdana, sans-serif;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 5px 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  max-width: 46vw;
}
.music-select:disabled { opacity: .75; cursor: default; }
.audio-mute { line-height: 1; padding: 5px 9px; }
.audio-mute.off { background: #EDE1C8; color: #8A7A66; }
.audio-mute:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
body[data-screen="game"] .audio-bar { top: 8px; right: 10px; opacity: .92; }

/* Live game list + short room codes. */
.list-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 -4px; }
.list-title { margin: 0; font-size: 15px; letter-spacing: .5px; }
.live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #5FBF6A;
  border: 2px solid var(--ink);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.code-input {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  width: 7.5ch;
  flex: 0 0 auto;
  text-align: center;
  padding-left: 8px;
  padding-right: 4px;
}
.code-input::placeholder { color: #C4B191; letter-spacing: 3px; }
.big-code {
  font: 700 15px ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 3px;
  background: var(--orange);
  border: 2px solid var(--ink);
  border-radius: 7px;
  padding: 1px 7px;
}
.games .gcode {
  font: 700 11px ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 2px;
  color: #997A55;
}
.lobby-error.warn { border-color: #B57C15; background: #FBEFD6; color: #7A5510; }

/* Game rows are the primary join control. */
.games .game-row { cursor: pointer; transition: transform .06s ease, background .12s ease; }
.games .game-row:hover { background: #FFF3D8; }
.games .game-row:active { transform: translateY(1px); }
.games .game-row:focus-visible { outline: 3px solid var(--frame); outline-offset: 2px; }
.games .game-row.full { cursor: default; opacity: .6; }
.games .game-row.full:hover { background: #FFFDF6; }
.list-hint { margin-left: auto; font-size: 11px; color: #997A55; }

/* Connection capability, from the ICE probe. */
.ice-status {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 2px solid #C4B191;
  color: #6B4A2C;
  background: #F6ECD5;
  cursor: help;
}
.ice-status[data-state="relay-ready"] { border-color: #33853D; background: #DDF0DE; color: #2C6B34; }
.ice-status[data-state="relay-error"],
.ice-status[data-state="relay-unreachable"] { border-color: #B57C15; background: #FBEFD6; }
.ice-status[data-state="relay-stale"] { border-color: #A9331F; background: #FBE1DC; color: #7C2618; }

/* ============================ SMALL SCREENS ============================ */
/* A quick pass so the menu, lobby and waiting room are usable on a phone at
   ~390px: room for the notch/home indicator, and tap targets that are
   actually thumb-sized. */
@media (max-width: 560px) {
  .menu, .lobby {
    padding: calc(56px + env(safe-area-inset-top, 0px)) 12px
             calc(20px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }
  .menu-card { padding: 22px 16px 18px; border-width: 5px; border-radius: 18px; }
  .lobby-card { padding-top: 28px; }
  .tagline { font-size: 14px; }
  .big-btn { font-size: 17px; padding: 15px 14px; min-height: 52px; }
  .mini { font-size: 14px; padding: 12px 14px; min-height: 46px; }
  .roster .mini.kick { min-height: 34px; padding: 6px 10px; font-size: 12px; }
  .text-input { font-size: 16px; padding: 13px 12px; }  /* 16px: no iOS zoom */
  .games li, .roster li { padding: 12px 11px; }
  .back {
    left: 10px;
    top: calc(10px + env(safe-area-inset-top, 0px));
    font-size: 14px;
    padding: 9px 14px;
  }
  .back-mini { position: static; margin-top: 4px; width: 100%; }
  .devrow { font-size: 13px; line-height: 2.2; }
  .devrow a { padding: 4px 8px; }
  .joincode { flex-wrap: wrap; }
  .joincode .lbl { width: 100%; }
  .code-input { flex: 1 1 auto; }
  .music-select, .audio-mute { font-size: 13px; padding: 9px 10px; min-height: 40px; }
  .audio-bar { top: calc(8px + env(safe-area-inset-top, 0px)); }
}

/* The in-game audio bar shares the top strip with the game buttons on narrow
   screens (declared last so it wins over the generic game-screen rule). */
@media (max-width: 640px), (max-height: 560px) {
  body[data-screen="game"] .audio-bar {
    top: calc(7px + env(safe-area-inset-top, 0px));
    right: 10px;
  }
}

/* Landscape on a phone: vertical space is the scarce thing and there is plenty
   of width, so skip the top strip — the buttons and audio bar tuck into the
   canvas corners, well clear of the centred score plaque. */
@media (orientation: landscape) and (max-height: 560px) {
  body.touch-ui[data-screen="game"] { --top-h: 0px; }
}

/* Menu note for touch players (the keyboard legend is useless on a phone). */
.touch-note { display: none; }
body.touch-ui .touch-note {
  display: block;
  margin: 0 0 16px;
  padding: 11px 13px;
  background: #F6EAD0;
  border: 3px solid #E0CEA9;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #6B4A2C;
  text-align: left;
}
@media (max-width: 640px) {
  body.touch-ui .keys { display: none; }
}