*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-deep: #060b1a;
  --bg-mid: #0c1333;
  --bg-light: #141e47;
  --accent: #00e5ff;
  --accent2: #7c4dff;
  --pink: #ff6b9d;
  --green: #c3ff68;
  --text: #e0e6f0;
  --text-dim: #6b7db3;
  --panel-bg: rgba(10, 16, 40, 0.85);
  --panel-border: rgba(0, 229, 255, 0.15);
  --radius: 12px;
  /* HUD scale: 1 at 1280-px-wide viewport, grows linearly with viewport
     width so HUD panels stay a constant physical size even when the
     browser is zoomed out (zoom-out widens innerWidth → CSS shrinks the
     panels otherwise). main.js updates this on resize. Same calibration
     as the in-game canvas zoom so HUD + world scale together. */
  --hud-scale: 1;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Screens ── */

.screen {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.screen.active { display: flex; }

#screen-draw {
  overflow-y: auto;
  overflow-x: hidden;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 0;
  -webkit-overflow-scrolling: touch;
}

#screen-draw .draw-container {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
}

/* ── Drawing Screen ── */

.draw-container {
  text-align: center;
  padding: 24px;
  max-width: 1600px;
  width: 100%;
}

.title {
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.title-dot {
  background: linear-gradient(135deg, var(--pink), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
}

.subtitle {
  color: var(--text-dim);
  font-size: 0.95rem;
  margin-bottom: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 300;
}

.draw-main {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

.canvas-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.canvas-wrapper {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--panel-border);
  background: var(--bg-mid);
  box-shadow: 0 0 60px rgba(0, 229, 255, 0.05), inset 0 0 60px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.stats-panel {
  padding: 12px 18px;
}

.stats-header {
  margin-bottom: 10px;
}

.stats-header .label {
  white-space: nowrap;
}

#draw-canvas {
  display: block;
  cursor: crosshair;
  width: min(60vh, calc(100vw - 440px), 680px);
  height: min(60vh, calc(100vw - 440px), 680px);
  max-width: 100%;
}

.draw-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  letter-spacing: 1px;
  pointer-events: none;
  text-transform: uppercase;
}

.draw-hint.hidden { display: none; }

.draw-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 340px;
  flex-shrink: 0;
  text-align: left;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.step-panel { transition: border-color 0.25s, box-shadow 0.25s; }

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: var(--accent);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.label {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2.5px;
  color: var(--text);
  margin-bottom: 0;
  white-space: nowrap;
}

.text-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  outline: none;
  transition: border-color 0.2s;
}

.text-input:focus {
  border-color: var(--accent);
}

.text-input::placeholder { color: var(--text-dim); }

/* Color palette */

.color-palette {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.15s;
}

.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); }

/* Tools */

.tool-row {
  display: flex;
  gap: 6px;
}

.tool-btn {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  color: var(--text-dim);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tool-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.tool-btn.active { background: rgba(0, 229, 255, 0.15); border-color: var(--accent); color: var(--accent); }

/* Presets */

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

.preset-btn {
  flex: 1;
  min-width: 64px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

.preset-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }

/* Stats */

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

.stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text);
}

.stat-row span { width: 84px; flex-shrink: 0; font-weight: 600; }

.stat-bar {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 0%;
}

.stat-fill.speed { background: linear-gradient(90deg, var(--accent), #00b8d4); }
.stat-fill.agility { background: linear-gradient(90deg, var(--accent2), #e040fb); }
.stat-fill.collection { background: linear-gradient(90deg, var(--green), #69f0ae); }

/* Buttons */

.action-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all 0.25s;
  text-transform: uppercase;
}

.action-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 229, 255, 0.3);
}

.action-btn.primary:hover {
  box-shadow: 0 6px 30px rgba(0, 229, 255, 0.5);
  transform: translateY(-2px);
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--panel-border);
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-icon { margin-right: 6px; }

.action-btn.setting-front {
  background: rgba(255, 107, 157, 0.2);
  border-color: var(--pink);
  color: var(--pink);
  animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 157, 0.3); }
  50% { box-shadow: 0 0 15px 3px rgba(255, 107, 157, 0.15); }
}

/* Big call-to-action stack at bottom of sidebar */

.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.cta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  transition: transform 0.2s, box-shadow 0.25s, background 0.25s;
  animation: cta-pulse 2s ease-in-out infinite;
}

.cta-btn .cta-step {
  font-size: 0.62rem;
  letter-spacing: 3px;
  opacity: 0.85;
}

.cta-btn .cta-label {
  font-size: 1.25rem;
  letter-spacing: 3px;
  font-weight: 900;
  line-height: 1.1;
}

.cta-btn .cta-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  opacity: 0.85;
  text-transform: none;
  margin-top: 2px;
}

.cta-btn:hover {
  transform: translateY(-2px);
  animation-play-state: paused;
}

.cta-front {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.95), rgba(191, 127, 255, 0.95));
  color: #fff;
  box-shadow: 0 6px 24px rgba(255, 107, 157, 0.35);
}

.cta-front:hover {
  box-shadow: 0 10px 36px rgba(255, 107, 157, 0.55);
}

.cta-launch {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 229, 255, 0.4);
}

.cta-launch:hover {
  box-shadow: 0 10px 36px rgba(0, 229, 255, 0.6);
}

@keyframes cta-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ── Game Screen ── */

#screen-game { background: var(--bg-deep); }

#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: 0;
}

.hud-panel {
  pointer-events: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* HUD uses fixed px sizes. Browser zoom rescales the whole page (HUD
   included) — we no longer try to compensate. Sizes here are tuned for
   the desktop default (zoom 100%, ~1280-1920 wide). Mobile gets
   per-element tweaks via the touch media query lower down. */
#leaderboard {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 190px;
  border-radius: var(--radius);
  padding: 8px 10px;
}

.hud-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--text-dim);
}

.lb-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}

/* Room code pill, bottom-center of the game viewport. The "Room Code: "
   prefix is drawn via ::before so the JS can keep writing the raw code
   ('1:5' / 'RM 5') to textContent without worrying about the label. */
.room-id-label {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  pointer-events: none;
  white-space: nowrap;
}
.room-id-label:empty { display: none; }
.room-id-label::before {
  content: 'Room Code: ';
  opacity: 0.65;
}

#lb-list { display: flex; flex-direction: column; gap: 4px; }

.lb-entry {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  padding: 2px 0;
}

.lb-entry.me { color: var(--accent); font-weight: 600; }
.lb-rank { color: var(--text-dim); width: 28px; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: var(--text-dim); margin-left: 8px; }

.score-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: var(--radius);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

#score-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.score-label {
  font-size: 0.55rem;
  letter-spacing: 2.5px;
  color: var(--text-dim);
  font-family: 'Orbitron', sans-serif;
}

.minimap {
  position: absolute;
  bottom: 12px;
  right: 12px;
  border-radius: var(--radius);
  width: 130px;
  height: 130px;
}

.quit-btn {
  position: absolute;
  bottom: 14px;
  left: 14px;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 2px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
}

.quit-btn:hover {
  color: var(--pink);
  border-color: rgba(255, 107, 157, 0.3);
  background: rgba(255, 107, 157, 0.1);
}

.tuner-panel {
  position: absolute;
  bottom: 60px;
  left: 16px;
  border-radius: var(--radius);
  padding: 12px 16px;
  width: 200px;
}

.room-code-floater {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 240px;
  max-width: calc(50vw - 24px);
  pointer-events: none;
  transform-origin: bottom left;
  transform: scale(var(--hud-scale));
}

.room-code-floater > * { pointer-events: auto; }

.room-code-toggle-btn {
  align-self: flex-start;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: color 0.15s, border-color 0.15s;
}

.room-code-toggle-btn:hover { color: var(--accent); border-color: rgba(0, 229, 255, 0.4); }
.room-code-toggle-btn.open  { color: var(--accent); border-color: rgba(0, 229, 255, 0.4); }

/* Short "#" glyph is mobile-only; desktop sees the full pill text. */
.room-code-label-short { display: none; }

.room-code-collapse {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.room-code-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.room-code-input-row .room-code-input { flex: 1; min-width: 0; }

.room-code-close-btn {
  display: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.room-code-close-btn:hover { color: var(--accent); border-color: rgba(0, 229, 255, 0.4); }

.room-code-input {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 7px 12px;
}

.room-code-hint {
  font-size: 0.68rem;
  color: var(--text-dim);
  min-height: 1em;
  text-align: center;
}

.room-code-hint.error { color: var(--pink); }
.room-code-hint.ok { color: var(--green); }

.server-list {
  position: fixed;
  top: 52px;
  right: 12px;
  z-index: 10;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  min-width: 180px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 1px;
  color: var(--text-dim);
  pointer-events: none;
  user-select: none;
}

.server-list.open { display: flex; }
.server-list.open:empty { display: none; }

.server-list-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  column-gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}

.server-list-row .code {
  display: inline-block;
  min-width: 14px;
  padding: 1px 5px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  font-size: 0.58rem;
  text-align: center;
  opacity: 0.8;
}
.server-list-row .name { text-transform: uppercase; }
.server-list-row .ping { font-size: 0.6rem; opacity: 0.9; }
.server-list-row .rooms { font-size: 0.55rem; opacity: 0.6; min-width: 48px; text-align: right; }
.server-list-row.current .code { border-color: var(--accent); opacity: 1; }

.server-list-row.current { color: var(--accent); }
.server-list-row.current .rooms { opacity: 0.85; }
.server-list-row.unreachable { opacity: 0.35; }
.server-list-row.unreachable .ping { text-decoration: line-through; }

.server-list-row.good .ping { color: var(--green); }
.server-list-row.ok   .ping { color: var(--accent); }
.server-list-row.bad  .ping { color: var(--pink); }

.connection-indicator {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, color 0.15s;
  transform-origin: top right;
  transform: scale(var(--hud-scale));
}

.connection-indicator:hover { border-color: rgba(0, 229, 255, 0.4); }

.conn-chevron {
  font-size: 0.6rem;
  opacity: 0.65;
  transition: transform 0.15s;
}
.connection-indicator[aria-expanded="true"] .conn-chevron { transform: rotate(180deg); opacity: 1; }

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.connection-indicator.good .conn-dot { background: var(--green); box-shadow: 0 0 8px rgba(195, 255, 104, 0.6); }
.connection-indicator.ok   .conn-dot { background: var(--accent); box-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }
.connection-indicator.bad  .conn-dot { background: var(--pink); box-shadow: 0 0 8px rgba(255, 107, 157, 0.5); }
.connection-indicator.dead .conn-dot { background: #555; }

.connection-indicator.good { color: var(--green); }
.connection-indicator.ok   { color: var(--accent); }
.connection-indicator.bad  { color: var(--pink); }
.connection-indicator.dead { color: var(--text-dim); }

.conn-region { text-transform: uppercase; }
.conn-ping { font-size: 0.65rem; opacity: 0.85; }

.ping-display {
  position: absolute;
  /* Top-center, between the score (top-left) and leaderboard
     (top-right). Avoids the minimap-overlap mess in the bottom-right
     entirely — ping has no neighbour up here. */
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 50px;
  justify-content: center;
}

.ping-display .region-label {
  font-size: 0.62rem;
  letter-spacing: 1.2px;
  color: var(--text-dim);
  opacity: 0.7;
  margin-right: 2px;
  text-transform: uppercase;
}

.ping-display:empty + .region-label,
.ping-display .region-label:empty { display: none; }

.ping-display .ping-unit {
  font-size: 0.6rem;
  opacity: 0.6;
}

.ping-display.good { color: var(--green); }
.ping-display.ok   { color: var(--accent); }
.ping-display.bad  { color: var(--pink); }

.tuner-slider {
  width: 100%;
  margin: 4px 0 2px;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
}

.tuner-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.tuner-value {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
}

/* ── Death overlay ── */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 11, 26, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.overlay.active { display: flex; }

/* Launch warmup overlay — opaque cover over the game canvas while the
   join handshake completes and the first gameState packets settle.
   Fades out once the game screen is stable, so the player never sees
   the brief pop-in of food / wakes / camera snap. */
.launch-overlay {
  background: #060b1a;
  flex-direction: column;
  opacity: 1;
  transition: opacity 220ms ease-out;
}
.launch-overlay.fade-out { opacity: 0; pointer-events: none; }

.launch-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.launch-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(0, 229, 255, 0.18);
  border-top-color: var(--accent);
  animation: launch-spin 0.8s linear infinite;
}

@keyframes launch-spin {
  to { transform: rotate(360deg); }
}

.launch-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 0;
}

.death-box {
  text-align: center;
  padding: 44px 56px;
  width: min(92vw, 480px);
  background: var(--panel-bg);
  border: 1px solid rgba(255, 107, 157, 0.3);
  border-radius: 20px;
  box-shadow: 0 0 80px rgba(255, 107, 157, 0.1);
  transform-origin: center;
  transform: scale(var(--hud-scale));
}

.death-box h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  color: var(--pink);
  letter-spacing: 3px;
  margin-bottom: 14px;
}

.death-box p {
  color: var(--text-dim);
  font-size: 1rem;
  margin-bottom: 8px;
}

#death-score {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  color: var(--text);
  margin-bottom: 22px;
}

.death-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.death-buttons .action-btn {
  flex: 1 1 140px;
  padding: 14px 22px;
  font-size: 0.9rem;
  letter-spacing: 2.5px;
}

.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--hud-scale));
  background: rgba(255, 107, 157, 0.95);
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}

.toast.info {
  background: rgba(0, 229, 255, 0.95);
  color: #0a1f2e;
}

.shutdown-box {
  text-align: center;
  padding: 40px 50px;
  background: var(--panel-bg);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 0 80px rgba(0, 229, 255, 0.1);
  transform-origin: center;
  transform: scale(var(--hud-scale));
}

.shutdown-box h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  color: var(--accent);
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.shutdown-box p {
  color: var(--text-dim);
}

/* ── Daily Challenge ── */

.draw-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin: 0 auto;
}

.challenge-banner {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.15), rgba(0, 229, 255, 0.1));
  border: none;
  border-radius: var(--radius);
  padding: 30px 44px;
  width: 100%;
  border-collapse: collapse;
}

.challenge-cell-left {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
  padding: 12px 40px 12px 12px;
}

.challenge-cell-right {
  text-align: center;
  vertical-align: middle;
  padding: 12px 12px 12px 0;
}

.challenge-cell-right .challenge-name { margin-right: 14px; }

.challenge-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 2.5px;
  color: var(--accent2);
  background: rgba(124, 77, 255, 0.22);
  padding: 8px 14px;
  border-radius: 6px;
}

.challenge-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
}

.challenge-desc {
  font-size: 1.2rem;
  color: var(--text-dim);
}

/* ── Revive & Share ── */

.action-btn.revive {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-weight: 700;
  width: 100%;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.action-btn.revive:hover {
  box-shadow: 0 6px 30px rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
}

.share-btn { font-size: 0.7rem; }

.ad-notice {
  padding: 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.death-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Shop ── */

.shop-overlay .shop-box {
  background: var(--bg-mid);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 30px;
  max-width: 700px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}

.shop-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 24px;
}

.skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.skin-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  transition: all 0.2s;
}

.skin-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
}

.skin-card:hover { border-color: rgba(0, 229, 255, 0.4); }

.skin-preview {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 2px solid;
  background: rgba(255, 255, 255, 0.05);
}

.skin-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 4px;
}

.skin-desc {
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.skin-badge {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.skin-badge.equipped { background: rgba(0, 229, 255, 0.2); color: var(--accent); }
.skin-badge.owned { background: rgba(105, 240, 174, 0.15); color: #69f0ae; }
.skin-badge.ad { background: rgba(255, 215, 0, 0.15); color: #ffd700; }
.skin-badge.daily { background: rgba(255, 107, 157, 0.15); color: var(--pink); }
.skin-badge.buy { background: rgba(124, 77, 255, 0.15); color: var(--accent2); }

.skin-btn {
  display: block;
  width: 100%;
  padding: 6px;
  margin-top: 6px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}

.skin-btn:hover { background: rgba(255, 255, 255, 0.12); }
.skin-btn.unlock-ad { border-color: rgba(255, 215, 0, 0.3); color: #ffd700; }
.skin-btn.buy { border-color: rgba(124, 77, 255, 0.3); color: var(--accent2); }

.shop-footer {
  display: flex;
  gap: 12px;
}

.shop-footer .action-btn { flex: 1; }

.shop-trigger {
  margin-top: 6px;
  font-size: 0.7rem;
  padding: 10px;
}

/* ── Ad Banner ── */

.ad-banner {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 728px;
  max-width: 100%;
  height: 50px;
  background: rgba(10, 16, 40, 0.9);
  border-top: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.75rem;
  z-index: 50;
}

/* ── Responsive ── */

/* ── Mobile in-game controls ───────────────────────────────────────── */

.mobile-controls {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
@media (hover: none) and (pointer: coarse) {
  .mobile-controls { display: block; }
}

.mobile-joystick {
  position: fixed;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 140px;
  height: 140px;
  pointer-events: auto;
  touch-action: none;
}

.joystick-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.06);
  border: 2px solid rgba(0, 229, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
  transform: translate(0, 0);
  transition: transform 0.05s linear;
  will-change: transform;
}

.mobile-boost {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(36px, env(safe-area-inset-bottom));
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px solid var(--pink, #ff6b9d);
  background: rgba(255, 107, 157, 0.18);
  color: var(--pink, #ff6b9d);
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  letter-spacing: 2px;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 16px rgba(255, 107, 157, 0.25);
  transition: transform 0.05s ease, background 0.05s ease;
}
.mobile-boost.pressed {
  transform: scale(0.92);
  background: rgba(255, 107, 157, 0.45);
  box-shadow: 0 0 28px rgba(255, 107, 157, 0.55);
}

/* Hide the score panel's bulky padding on touch so controls have room */
@media (hover: none) and (pointer: coarse) {
  #score-display { font-size: 0.9rem; padding: 8px 12px; }
  #leaderboard { font-size: 0.8rem; max-width: 200px; }
  .ping-display { display: none; }

  /* Native shell still hides the picker entirely — the React Native side
     pre-warms a region and we don't want the WebView to second-guess it.
     Mobile browser users get the compact dot variant defined in the
     (max-width: 768px) block below. */
  body.native .connection-indicator,
  body.native .server-list { display: none !important; }

  /* Shorter prefix on mobile to save space. */
  .room-id-label::before { content: 'RC: '; }
  .room-id-label {
    font-size: 0.65rem;
    padding: 4px 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* The minimap stomps the boost button and isn't readable at thumb size. */
  .minimap { display: none; }

  /* Compact quit button on mobile: small round × at top-left. Height
     matches the score-panel so all three top-row elements (X, score,
     leaderboard) line up visually at the top of the viewport. */
  .quit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    bottom: auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 1;
  }
  .quit-btn::before {
    content: '×';
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dim);
    line-height: 1;
  }
  /* Score sits just right of the quit, same top. */
  #score-display.score-panel {
    top: max(8px, env(safe-area-inset-top));
    left: calc(max(8px, env(safe-area-inset-left)) + 42px);
  }

  /* Leaderboard sits snug in the corner — connection indicator is on the
     other screen so they don't fight for the same spot. */
  #leaderboard {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    max-width: 220px;
    width: max-content;
    padding: 6px 10px;
  }
  #leaderboard {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  #leaderboard .lb-header {
    gap: 8px;
  }
  #leaderboard .lb-header::after {
    content: '▾';
    font-size: 0.7rem;
    opacity: 0.7;
    transition: transform 0.15s;
  }
  #leaderboard.expanded .lb-header::after { transform: rotate(180deg); }
  #leaderboard #lb-list { display: none; margin-top: 4px; }
  #leaderboard.expanded #lb-list { display: block; }
  /* List rows rebuild whenever scores change. A tap on a row can miss
     its synthesized click when the row is replaced between touchstart
     and touchend — so route taps to the stable #leaderboard parent that
     owns the toggle handler by making list contents non-interactive. */
  #leaderboard #lb-list,
  #leaderboard #lb-list * { pointer-events: none; }

  /* Backdrop blur is GPU-expensive on phones — biggest single source of mobile
     lag in this layout. Drop it on the in-game HUD overlays. */
  #score-display,
  #leaderboard,
  .quit-btn,
  .joystick-base,
  .mobile-boost,
  .connection-indicator,
  .server-list {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 14, 28, 0.78);
  }
}

/* ── Mobile landing layout ─────────────────────────────────────────── */

/* ── Mobile draw screen ────────────────────────────────────────────────
   Mirrors the native React Native draw flow as a single-viewport,
   no-scroll layout: no DRAWSHIP.IO header, the daily challenge banner
   pinned at the top, the canvas dominant in the middle, compact name +
   color + preset rows below, and the SET FRONT / LAUNCH CTAs pinned at
   the bottom via sticky positioning. Desktop is untouched. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* Drop the scroll container's behaviour; the layout fills 100dvh. */
  #screen-draw {
    overflow: hidden;
    padding: 0;
    align-items: stretch;
    height: 100vh;
    height: 100dvh;
  }
  #screen-draw .draw-container {
    margin: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
    gap: 8px;
    text-align: left;
  }

  /* The brand block eats a sixth of the viewport — drop it on phones. */
  .title, .subtitle { display: none; }

  .draw-stack {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  /* Daily challenge: compact, horizontal, pinned at the top. Side
     padding leaves room for the corner icons that sit in the top
     corners of the viewport: connection dot on the left, room-code
     "#" on the right (see .connection-indicator and .room-code-floater
     rules later in this block). Name and desc stack inside the right
     cell so they read as "Glass Cannon / Huge speed, tiny wakes"
     instead of running together into one phrase. */
  .challenge-banner {
    flex-shrink: 0;
    padding: 8px 44px;
    margin: 0;
    font-size: 0.78rem;
  }
  .challenge-banner tr {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .challenge-cell-left,
  .challenge-cell-right {
    display: block;
    width: auto;
    padding: 0;
    text-align: center;
    white-space: normal;
  }
  .challenge-label { font-size: 0.6rem; letter-spacing: 2px; }
  /* Drop the "TODAY'S " prefix on phones; the surrounding daily-rotation
     context is implied by the rest of the UI and the shorter label fits
     a narrow viewport better. */
  .challenge-label-full { display: none; }
  /* Stack name above desc with the name as the visual anchor. */
  .challenge-name,
  .challenge-desc { display: block; }
  .challenge-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.15;
    margin-right: 0;
  }
  .challenge-desc {
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0.85;
    margin-top: 2px;
  }

  .draw-main {
    flex: 1;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Canvas column flexes to fill remaining height; canvas itself stays
     square via aspect-ratio and shrinks if the keyboard squeezes the
     viewport. */
  .canvas-column {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .canvas-wrapper {
    width: 100%;
    max-height: 100%;
  }
  #draw-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 100%;
  }
  /* Post-front "ship stats" panel adds vertical clutter on a tight layout
     and isn't critical to the launch flow. */
  #front-panel { display: none !important; }

  /* Sidebar = compact bottom strip below the canvas. */
  .draw-sidebar {
    width: 100%;
    max-width: none;
    flex-shrink: 0;
    gap: 8px;
    padding-bottom: 0;
  }
  .panel.step-panel { padding: 8px 12px; }
  /* The "STEP 1 | CAPTAIN NAME" labels are fine on desktop but eat space
     on a phone where the visual hierarchy is already obvious. */
  .step-header { display: none; }

  .text-input {
    font-size: 16px;  /* prevents iOS auto-zoom on focus */
    padding: 8px 12px;
  }

  /* Color palette: tap-target sized swatches, wrap to a second row if
     they don't fit (≥6 colors per row at typical phone widths). */
  .color-palette {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .color-swatch {
    width: 44px;
    height: 44px;
  }

  .preset-row { gap: 6px; flex-wrap: nowrap; }
  .preset-btn { padding: 8px 10px; font-size: 0.85rem; }
  .tool-row { margin-top: 6px !important; }
  .tool-btn { padding: 6px 10px; font-size: 0.72rem; }

  /* Sticky CTA — SET FRONT and LAUNCH always pinned to the bottom of the
     viewport, even when the keyboard is up, so the user never has to dig
     for the next action and never has to scroll back up to interact with
     the canvas after tapping SET FRONT. */
  .cta-stack {
    position: sticky;
    bottom: max(4px, env(safe-area-inset-bottom));
    z-index: 5;
    padding: 4px 0 0;
    margin: 0;
    background: transparent;
    gap: 8px;
  }
  .cta-btn { padding: 10px 14px; }
  .cta-btn .cta-step { display: none; }
  .cta-btn .cta-label { font-size: 1.05rem; letter-spacing: 2px; }
  .cta-btn .cta-hint { font-size: 0.65rem; margin-top: 1px; }

  /* Room-code feature on mobile: collapse the "Got a room code?" pill
     to a 32×32 "#" icon in the top-right corner. The challenge banner
     reserves padding-right: 44px to keep its centered text out from
     under it. Tapping the icon expands the input panel BELOW the icon
     (flex-direction: column-reverse flips DOM order so the button stays
     on top while the input drops down), aligned to the right edge. */
  .room-code-floater {
    flex-direction: column-reverse;
    align-items: flex-end;
    bottom: auto;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    width: auto;
  }
  .room-code-label-full { display: none; }
  .room-code-label-short { display: inline; }
  .room-code-toggle-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.95rem;
    letter-spacing: 0;
  }
  .room-code-collapse {
    margin-top: 6px;
    width: 240px;
    max-width: calc(100vw - 24px);
  }
  /* When the dropdown is open the corner "#" pill becomes redundant —
     the panel has its own × close inline with the input. Hide the
     pill so there isn't a stale × floating above an unrelated
     close button. */
  .room-code-toggle-btn.open { display: none; }
  .room-code-close-btn { display: inline-flex; }

  /* Connection indicator on mobile: same corner-dot pattern as the
     room-code icon. The full pill text (region name + ping) collapses
     to just the coloured dot; the JS-driven good/ok/bad/dead classes
     still drive the dot colour. Tapping the dot opens the server-list
     dropdown anchored just below it on the left edge. */
  .connection-indicator {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    gap: 0;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: auto;
  }
  .conn-region,
  .conn-ping,
  .conn-chevron { display: none; }
  .conn-dot { width: 12px; height: 12px; }

  .server-list {
    top: calc(max(8px, env(safe-area-inset-top)) + 40px);
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    min-width: 200px;
    max-width: calc(100vw - 16px);
  }

  /* Reserve sticky-CTA space upfront so the canvas doesn't pop smaller
     when SET FRONT and LAUNCH appear during the draw flow. drawing.js
     toggles inline `style.display` on these buttons; we force them
     back into layout via `display: flex !important` and instead
     control visibility — when no inline display is set (or it's
     'none') the button is layout-present but visually hidden, so the
     cta-stack always occupies its full two-button height. When
     drawing.js sets `style.display = 'flex'` the [style*="flex"]
     attribute match flips visibility back on.

     SET FRONT stays visible AFTER the front is set so the user can
     re-anchor it before launching, which means both CTAs are visible
     at the same time in the final step — a hard-coded one-button
     min-height (as in the previous revision) was undersized and the
     canvas still popped when LAUNCH appeared. */
  #btn-front,
  #btn-play {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
  }
  #btn-front[style*="flex"],
  #btn-play[style*="flex"] {
    visibility: visible;
    pointer-events: auto;
  }
}

/* Phones in landscape: keep the canvas reasonable so the sidebar fits next
   to it instead of stacking awkwardly. */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
  .draw-container { padding: 8px; }
  .title, .subtitle { display: none; }
  .challenge-banner { padding: 6px 14px; }
  .challenge-name { font-size: 0.95rem; }
  .challenge-desc { font-size: 0.78rem; }
  .draw-main { flex-direction: row; align-items: flex-start; gap: 12px; }
  .canvas-column { width: 50%; }
  .draw-sidebar { width: 50%; max-width: none; gap: 6px; }
  .panel.step-panel { padding: 6px 12px; }
  .step-header { display: none; }
  .preset-btn { padding: 6px 10px; font-size: 0.78rem; }
  .color-swatch { width: 32px; height: 32px; }
  #draw-canvas { width: 100%; height: auto; max-height: 78vh; aspect-ratio: 1/1; }
  /* Pin SET FRONT / LAUNCH to the bottom of the visible sidebar — at
     this aspect ratio the four panels stack taller than the viewport
     and the CTAs would otherwise sit below the fold. The transparent-
     to-bg gradient keeps the buttons readable when content scrolls
     underneath them. */
  /* CTAs sit in normal flow at the bottom of the sidebar, right below
     the CLEAR button. No sticky / fixed positioning — the page can
     scroll a little to reach them if the sidebar overflows, but
     visually they belong with the rest of the column rather than
     floating somewhere else. */
  .cta-stack {
    padding: 4px 0 0;
    gap: 4px;
  }
  .cta-btn { padding: 6px 10px; }
  .cta-btn .cta-step { display: none; }
  .cta-btn .cta-label { font-size: 0.9rem; }
  .cta-btn .cta-hint { font-size: 0.6rem; }
}

/* Short viewports above mobile-portrait width — typically the
   CrazyGames developer iframe (~1280×720), landscape tablets at
   common 1024×600/768 sizes, and laptops with heavy browser chrome
   that leaves <720px of viewport height. The default desktop layout
   assumes ~800px of vertical room (title + subtitle + banner +
   canvas + full-height sidebar); below that the CTAs at the bottom
   of the sidebar slip below the fold and the user has to scroll.
   This block hides the brand header, tightens spacing, sizes the
   canvas off viewport-height instead of viewport-width, and pins
   the CTAs sticky so SET FRONT / LAUNCH stay visible whether the
   content fits or scrolls. min-width: 921px gates this above the
   landscape-mobile query so the two don't fight each other. */
@media (min-width: 921px) and (max-height: 720px) {
  .title, .subtitle { display: none; }
  #screen-draw { padding: 8px 0; }
  #screen-draw .draw-container { padding: 8px 16px; gap: 8px; }
  .draw-stack { gap: 8px; }
  .challenge-banner { padding: 10px 20px; }
  .challenge-name { font-size: 1.1rem; }
  .challenge-desc { font-size: 0.9rem; }
  .draw-main { gap: 16px; align-items: flex-start; }
  #draw-canvas {
    width: min(70vh, calc(100vw - 380px), 540px);
    height: min(70vh, calc(100vw - 380px), 540px);
  }
  .draw-sidebar { gap: 8px; width: 320px; }
  .panel.step-panel { padding: 8px 14px; }
  .step-header { margin-bottom: 4px; }
  /* CTAs sit in normal flow at the bottom of the sidebar — see
     matching block in the landscape-mobile query above. */
  .cta-stack {
    padding: 4px 0 0;
  }
  .cta-btn { padding: 8px 12px; }
  .cta-btn .cta-step { display: none; }
  .cta-btn .cta-hint { font-size: 0.7rem; }
}