/* Yabbaroo! — dark grey + vibrant mint. One screen, no scroll. */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #141416;
  --surface:   #1e1e24;
  --surface-2: #28282f;
  --surface-3: #303038;
  --border:    #3a3a48;
  --mint:      #00f5a0;
  --mint-dark: #00b876;
  --mint-dim:  rgba(0,245,160,0.09);
  --pink:      #ff3d9a;
  --pink-dark: #c01e6e;
  --yellow:    #f5c542;
  --yellow-dark: #b8901a;
  --purple:    #a98bff;
  --purple-dark: #7b5bd6;
  --cyan:      #22d3ee;
  --cyan-dark: #0e9bb5;
  --blue:      #4f7cff;
  --blue-dark: #3a63b8;
  --text:      #f0f0f2;
  --muted:     #7878a0;
  --tile-bg:   #f4f4ee;
  --tile-ink:  #1a1a24;
  --tile-edge: #ccccc0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Nunito", "Trebuchet MS", Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center; /* vertical centring for the height-capped app on tall screens */
  padding: 12px;
}

/* ===== LAYOUT ===== */
#app {
  width: min(1140px, 100%);
  /* Cap height too — on 4K/tall monitors the board would otherwise stretch and
     push the submit button to the bottom edge, miles from everything else */
  height: min(100%, 920px);
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
}
#app.lobby-mode {
  grid-template-columns: 1fr;
  max-width: 520px;
  margin: 0 auto;
}

.left-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
/* Only add gap between visible game elements */
#gameHeader:not(.hidden)   { margin-bottom: 10px; }
#roundbarWrap:not(.hidden) { margin-bottom: 10px; }
#buildPhase:not(.hidden)   { gap: 8px; margin-bottom: 0; }
#votePhase:not(.hidden)    { gap: 8px; }
#resultsPhase:not(.hidden) { gap: 8px; }
#galleryPhase:not(.hidden) { gap: 8px; }

.right-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* ===== HEADER ===== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 4px 0;
}
.logo {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--mint);
  -webkit-text-stroke: 5px #0a0a12;
  paint-order: stroke fill;
  text-shadow: 0 4px 16px rgba(0,245,160,0.22);
}
.tagline { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.scorebar { text-align: right; }
.score-label { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.scorebar b { display: block; font-size: 32px; font-weight: 900; color: var(--mint); line-height: 1; }

/* ===== ROUNDBAR ===== */
.roundbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 16px;
  flex-shrink: 0;
}
.roundbar .theme { font-size: 18px; font-weight: 800; white-space: nowrap; color: var(--cyan); }
.roundbar .theme small { display: block; font-size: 9px; color: var(--purple); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1px; }
.timerwrap { flex: 1; height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.timerbar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--mint-dark), var(--mint)); transition: width 1s linear; border-radius: 7px; }
.timerbar.low { background: linear-gradient(90deg, #b02050, var(--pink)); }
.timernum { font-weight: 900; min-width: 30px; text-align: right; color: var(--mint); font-size: 18px; }
/* Final seconds — the timer number blinks pink */
.timernum.urgent, .vote-timernum.urgent {
  color: var(--pink) !important;
  animation: timer-blink .5s steps(1, end) infinite;
}
@keyframes timer-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }

/* ===== PHASES ===== */
#buildPhase,
#votePhase,
#resultsPhase {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hidden { display: none !important; }

/* ===== RAIL ===== */
.rail {
  flex-shrink: 0;
  min-height: 54px;
  background: var(--mint-dim);
  border: 2px dashed var(--mint-dark);
  border-radius: 14px;
  padding: 8px 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-content: center;
  overflow: hidden;
  isolation: isolate;  /* contain hover transforms so they can't trigger scroll */
}
.rail:empty::before {
  content: "tap words to build your sentence";
  color: var(--muted); font-size: 12px; font-weight: 600; align-self: center;
}

/* ===== BOARD — one flat area, groups separated by soft gaps ===== */
.board {
  flex: 1;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  overflow: hidden;          /* keeps rounded corners; words scroll inside */
}
.board-words {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 4px 4px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.board-words::-webkit-scrollbar { width: 4px; }
.board-words::-webkit-scrollbar-track { background: transparent; }
.board-words::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.group-spacer {
  width: 22px;
  flex-shrink: 0;
}

/* ===== TILES ===== */
.tile {
  background: var(--tile-bg);
  color: var(--tile-ink);
  border: 1px solid var(--tile-edge);
  border-bottom-width: 3px;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transform: rotate(var(--rot, 0deg));
  transition: transform .12s, box-shadow .12s, background .08s;
}
.tile:hover {
  transform: rotate(var(--rot, 0deg)) translateY(-5px) scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  background: #fff;
}
.tile:active {
  transform: rotate(var(--rot, 0deg)) translateY(1px) scale(1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.tile--slang {
  background: #fff3c0;
  border-color: #d4a800;
  border-bottom-color: #a07800;
  color: #3d2800;
  box-shadow: 0 2px 8px rgba(212,168,0,0.3);
}
.tile--slang:hover { background: #ffe87a; box-shadow: 0 6px 16px rgba(212,168,0,0.45); }

.tile--wild {
  background: #dce8ff;
  border-color: #5b86e0;
  border-bottom-color: var(--blue-dark);
  color: #0e2a5e;
  box-shadow: 0 2px 8px rgba(79,124,255,0.22);
}
.tile--wild:hover { background: #c4d8ff; box-shadow: 0 6px 16px rgba(79,124,255,0.4); }

.tile--risque {
  background: #ede0ff;
  border-color: var(--purple);
  border-bottom-color: #6a45c0;
  color: #2d1050;
  box-shadow: 0 2px 10px rgba(169,139,255,0.3);
  animation: risque-pulse 2.5s ease-in-out infinite;
}
.tile--risque:hover { background: #dfc8ff; box-shadow: 0 6px 18px rgba(169,139,255,0.5); }
@keyframes risque-pulse { 0%,100% { box-shadow: 0 2px 10px rgba(169,139,255,0.3); } 50% { box-shadow: 0 2px 14px rgba(169,139,255,0.6); } }

.tile--rail { background: #bff8dc; border-color: var(--mint-dark); border-bottom-color: #009960; color: #082a1a; }
.tile--rail:hover {
  transform: translateY(-3px) scale(1);
  background: #a0f5cc;
  box-shadow: 0 5px 12px rgba(0,0,0,0.35);
}

/* Addon tiles fuse with their neighbour in the rail so they read as one word:
   suffix snaps onto the word before it, prefix onto the word after it.
   The -8px margins cancel the rail's flex gap. */
.tile--fuse-left  { margin-left: -8px;  border-left-width: 0;  border-top-left-radius: 0;  border-bottom-left-radius: 0;  padding-left: 5px;  color: #00734a; }
.tile--fuse-right { margin-right: -8px; border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 5px; color: #00734a; }
.tile--fused-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tile--fused-l { border-top-left-radius: 0;  border-bottom-left-radius: 0; }

/* Drag-onto-tile word fuse: highlight the target under the dragged word,
   and mark a fused word with a pink edge so it reads as one crafted tile */
.tile.fuse-target {
  border-color: var(--pink); border-bottom-color: var(--pink-dark);
  background: #ffd9ec;
  transform: scale(1.12);
  box-shadow: 0 0 14px rgba(255,61,154,0.6);
}
/* A combined "wombo" word — solid hot pink so two words read as one special tile */
.tile--merged,
.tile--rail.tile--merged:hover {
  background: var(--pink);
  border-color: var(--pink-dark); border-bottom-color: var(--pink-dark);
  color: #fff; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* ===== WELEASE THE WOMBO round (build) ===== */
.rail.wombo-rail { align-items: center; justify-content: center; gap: 12px; min-height: 64px; }
.wombo-hint { font-size: 14px; font-weight: 800; color: var(--cyan); text-align: center; }
.wombo-plus { font-size: 22px; }
.wombo-qmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 36px; border: 2px dashed var(--muted); border-radius: 10px;
  color: var(--muted); font-weight: 900;
}
.rail.wombo-rail .tile--merged { font-size: 20px; padding: 8px 16px; }
.wombo-redo {
  background: none; border: 1px solid var(--border); border-radius: 50px;
  color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 800;
  padding: 6px 12px; cursor: pointer;
}
.wombo-redo:hover { color: var(--text); border-color: var(--cyan); }

/* ===== WOMBO GALLERY (game over) ===== */
.wombo-card {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 12px; margin-bottom: 6px;
}
.wombo-card.is-king { border-color: var(--pink); box-shadow: 0 0 14px rgba(255,61,154,0.3); }
.wombo-crown { font-size: 18px; }
.wombo-card-word { font-size: 18px; flex-shrink: 0; }
.wombo-card-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.wombo-recipe { font-size: 12px; font-weight: 700; color: var(--muted); }
.wombo-by { font-size: 12px; font-weight: 800; }
.wombo-up {
  margin-left: auto; flex-shrink: 0;
  background: var(--surface-2); border: 2px solid var(--border); border-radius: 50px;
  color: var(--text); font-family: inherit; font-size: 14px; font-weight: 800;
  padding: 6px 14px; cursor: pointer; transition: border-color .1s, background .1s;
}
.wombo-up b { color: var(--cyan); }
.wombo-up:hover { border-color: var(--cyan); }
.wombo-up.voted { border-color: var(--cyan); background: var(--mint-dim); pointer-events: none; }
.tile--ghost { opacity: 0; pointer-events: none; box-shadow: none; }
.tile.dragging { opacity: 0.35; }

/* Floating copy that follows the finger during a touch drag */
.touch-ghost {
  position: fixed; z-index: 999;
  pointer-events: none;
  transform: translate(-50%, -130%) scale(1.15);
  box-shadow: 0 10px 24px rgba(0,0,0,0.5);
}

/* ===== LETTER TILE (from the spin button) — cyan, the one colour no tile uses ===== */
.tile--letter {
  background: #d4f7ff;
  border-color: var(--cyan);
  border-bottom-color: var(--cyan-dark);
  color: #053b46;
  text-transform: uppercase;
  font-weight: 900;
  box-shadow: 0 2px 10px rgba(34,211,238,0.35);
}
.tile--letter:hover { background: #b3f0ff; box-shadow: 0 6px 18px rgba(34,211,238,0.5); }
/* The freshly-dropped letter announces itself */
.tile--letter.just-dropped { animation: letter-drop .55s cubic-bezier(.2,1.4,.4,1) 1; }
@keyframes letter-drop {
  0%   { transform: translateY(-26px) scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: translateY(0) scale(1.35) rotate(8deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
}

/* ===== SPIN BUTTON (conjures one random letter per round) ===== */
/* Sits inline as the first item in the board so words wrap around it */
.spin-btn {
  flex-shrink: 0; align-self: flex-start;
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 2px solid var(--cyan);
  color: var(--cyan); cursor: pointer;
  box-shadow: 0 2px 0 var(--cyan-dark), 0 0 12px rgba(34,211,238,0.4);
  transition: transform .1s, box-shadow .1s, opacity .2s;
  animation: spin-idle 2.4s ease-in-out infinite; /* gentle glow so it's noticed */
}
@keyframes spin-idle { 0%,100% { box-shadow: 0 2px 0 var(--cyan-dark), 0 0 8px rgba(34,211,238,0.3); } 50% { box-shadow: 0 2px 0 var(--cyan-dark), 0 0 18px rgba(34,211,238,0.65); } }
.spin-btn .spin-letter { font-size: 18px; font-weight: 900; line-height: 1; }
.spin-btn:hover  { transform: translateY(-1px); }
.spin-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cyan-dark); }
/* Magic "calling" spin: the tile whirls (and its face cycles letters in JS),
   then settles on the conjured letter before it drops onto the board */
.spin-btn.spinning {
  animation: spin-whirl .8s cubic-bezier(.25,.1,.25,1) 1;
  box-shadow: 0 0 24px var(--cyan), 0 0 8px var(--cyan);
  border-radius: 50%;
}
@keyframes spin-whirl { from { transform: rotate(0); } to { transform: rotate(720deg); } }
/* Once used, the button is gone — the conjured letter tile has taken its place */
.spin-btn.used { display: none; }

/* ===== LOGO IMAGE (login + lobby) ===== */
.logo-hero { display: block; line-height: 0; }
.logo-hero img { display: block; max-width: min(360px, 80vw); height: auto; margin: 0 auto;
  filter: drop-shadow(0 4px 18px rgba(0,245,160,0.25)); }
.logo-hero .logo-fallback { display: none; }
.logo-hero.no-img img { display: none; }
.logo-hero.no-img .logo-fallback { display: block; }

.drop-indicator {
  display: inline-flex;
  align-self: stretch;
  width: 3px;
  min-height: 28px;
  background: var(--mint);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--mint), 0 0 4px var(--mint);
  flex-shrink: 0;
  animation: pulse-snap .45s ease-in-out infinite alternate;
}
@keyframes pulse-snap {
  from { opacity: .6; transform: scaleY(.9); }
  to   { opacity: 1;  transform: scaleY(1.05); }
}

/* ===== CONTROLS ===== */
.btn {
  border: none; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-weight: 900; font-size: 15px;
  padding: 11px 26px; color: var(--tile-ink);
  background: var(--mint);
  box-shadow: 0 4px 0 var(--mint-dark);
  transition: transform .08s, box-shadow .08s;
}
.btn:hover  { transform: translateY(-1px); box-shadow: 0 5px 0 var(--mint-dark); }
.btn:active { transform: translateY(3px);  box-shadow: 0 1px 0 var(--mint-dark); }
.btn.secondary { background: var(--surface-3); color: var(--text); box-shadow: 0 4px 0 #111116; }
.btn.secondary:hover  { transform: translateY(-1px); box-shadow: 0 5px 0 #111116; }
.btn.secondary:active { transform: translateY(3px);  box-shadow: 0 1px 0 #111116; }
.btn.big { font-size: 18px; padding: 14px 30px; }
.btn:disabled { filter: grayscale(.6) brightness(.65); cursor: not-allowed; }
.controls { display: flex; gap: 8px; justify-content: center; flex-shrink: 0; padding: 2px 0; }

/* ===== TILE LEGEND + INFO ===== */
.tile-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 2px 4px 4px;
  font-size: 11px; font-weight: 800; color: var(--muted);
}
.legend-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend-chip i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.tile-legend--stacked { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text); }
.tile-legend--stacked .legend-chip i { width: 16px; height: 16px; border-radius: 5px; }

/* Group of header buttons (info, chat, …) clustered on the right — add more freely */
.header-icons { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.header-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); cursor: pointer;
}
.header-icon-btn .icon { width: 18px; height: 18px; }
.header-chat-btn { position: relative; } /* anchors the unread badge */

.info-popover {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.info-popover.hidden { display: none; }
.info-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 18px; padding: 18px;
  width: min(360px, 100%);
  display: flex; flex-direction: column; gap: 14px;
}
.info-how { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.info-how b { color: var(--cyan); }
/* Simple 3-step how-to */
.howto-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 12px; }
.howto-steps li {
  position: relative; padding-left: 40px; padding-top: 4px; min-height: 28px;
  font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4;
}
.howto-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mint); color: var(--tile-ink);
  font-weight: 900; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.howto-steps b { color: var(--mint); }
.howto-extra { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
/* "How do I play?" link on the login screen */
.how-link {
  align-self: center; background: none; border: none; cursor: pointer;
  color: var(--cyan); font-family: inherit; font-size: 14px; font-weight: 800;
  text-decoration: underline; padding: 4px;
}
.how-link:hover { color: var(--mint); }
.info-trick { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.45; }
.info-trick-icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; width: 28px; text-align: center; }
.info-trick b { color: var(--mint); }
/* Mini replica of the in-game spin button, for the how-to */
.mini-spin {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-2); border: 2px solid var(--cyan); color: var(--cyan);
  font-weight: 900; font-size: 15px; line-height: 1;
  box-shadow: 0 0 8px rgba(34,211,238,0.4);
}

/* First-time nudge bubble pointing up at the info button */
.info-hint {
  position: fixed; z-index: 190; max-width: 210px;
  background: var(--mint); color: var(--tile-ink);
  font-size: 13px; font-weight: 800; padding: 9px 13px;
  border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  cursor: pointer; animation: hint-bob 1.5s ease-in-out infinite;
}
.info-hint.hidden { display: none; }
.info-hint::after {
  content: ''; position: absolute; top: -7px; right: 16px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 7px solid var(--mint);
}
@keyframes hint-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ===== NEXT THEME PEEK ===== */
.next-theme-peek {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--purple); text-align: center; padding: 4px 0; flex-shrink: 0;
}
.next-theme-peek::before { content: '↓ '; }

/* ===== VOTE HEADER + TIMER ===== */
.vote-header {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; margin-bottom: 8px;
}
.vote-header .muted { flex: 1; font-size: 12px; }
.vote-timer-wrap { width: 80px; height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.vote-timerbar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--mint-dark), var(--mint)); transition: width 1s linear; border-radius: 5px; }
.vote-timerbar.low { background: linear-gradient(90deg, #b02050, var(--pink)); }
.vote-timernum { font-weight: 900; font-size: 16px; color: var(--mint); min-width: 24px; text-align: right; flex-shrink: 0; }

/* ===== VOTING ===== */
.vote-list { display: flex; flex-direction: column; gap: 6px; overflow: hidden; flex: 1; min-height: 0; }
.vote-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 12px; padding: 12px 14px; cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, border-color .12s, transform .12s;
}
.vote-item:hover:not(.mine) { background: var(--surface-2); border-color: var(--mint); }
.vote-item .who  { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 80px; }
.vote-item .text { font-size: 16px; font-weight: 700; flex: 1; }
.vote-item.mine  { opacity: .4; cursor: not-allowed; }
.vote-item.mine .who { color: var(--mint); }
.vote-item.voted  { border-color: var(--mint); background: var(--mint-dim); }
.vote-item .tally { font-weight: 900; color: var(--mint); font-size: 18px; min-width: 28px; text-align: right; }
.vote-item.winner { border-color: var(--mint); background: var(--mint-dim); }

/* Results rows: sentence full-width on its own line, meta (who/votes/speaker) below */
.result-item { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; }
.result-item .text { width: 100%; }
.result-item.mine { opacity: 1; cursor: default; }
.result-meta { display: flex; align-items: center; gap: 10px; }
.result-meta .who { font-size: 12px; font-weight: 800; color: var(--mint); min-width: 0; margin-right: auto; }
.result-meta .tally { font-size: 13px; min-width: 0; text-align: left; }

/* ===== ROOM BAR ===== */
.room-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 2px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.room-bar-code { font-size: 11px; font-weight: 900; color: var(--mint); letter-spacing: .1em; flex: 1; }
.btn-inline {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font-family: inherit; font-size: 10px; font-weight: 800;
  padding: 3px 8px; cursor: pointer; white-space: nowrap;
  transition: background .1s, color .1s, border-color .1s;
}
.btn-inline:hover { background: var(--surface-3); color: var(--text); border-color: var(--mint); }

/* ===== RIGHT PANEL — PLAYERS ===== */
.players {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  flex-shrink: 0;
}
.players-header {
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; padding-left: 2px;
}
.player-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border);
}
.player-row:last-child { border-bottom: none; }
.player-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
}
.player-row.me { font-weight: 800; }
.you-tag {
  font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bg); background: var(--muted);
  border-radius: 5px; padding: 1px 5px; margin-left: 2px;
}

/* ===== WINS TALLY (games won, pinned above chat) ===== */
.wins-tally {
  flex-shrink: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 7px 10px;
  font-size: 12px; font-weight: 800;
}
.wins-tally.hidden { display: none; }
.wins-tally .wins-label {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  width: 100%;
}
.wins-tally .win-entry {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--surface-2); border-radius: 50px; padding: 3px 9px;
}
.wins-tally .win-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.wins-tally .win-entry b { font-weight: 900; color: var(--text); }
.wins-tally .win-medal { font-size: 13px; }

/* ===== RIGHT PANEL — CHAT ===== */
.chat {
  flex: 1;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  overflow-y: auto;
  font-size: 12px; font-weight: 600;
}
.chat .line { margin-bottom: 5px; line-height: 1.4; }
.chat .nick { font-weight: 800; color: var(--mint); }
.chat .nick:first-child { color: var(--mint); }
.topic-suggest .nick { color: #d4a800 !important; }

/* ===== LOGIN ===== */
.solo-panel {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; text-align: center;
  height: 100%;
}
.solo-panel .logo   { font-size: 72px; }
.solo-panel .tagline { font-size: 14px; color: var(--muted); font-weight: 600; }
.login-box {
  display: flex; flex-direction: column; gap: 10px;
  width: min(340px, 100%);
}
.login-box input {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-weight: 700;
  outline: none; transition: border-color .15s;
}
.login-box input:focus { border-color: var(--mint); }
.login-box input::placeholder { color: var(--muted); font-weight: 600; }

/* One consistent shape + size for every control on the login screen */
.login-box input,
.login-box .btn,
.login-box .kids-link {
  width: 100%; box-sizing: border-box;
  border-radius: 14px;
  font-size: 16px; padding: 14px 18px;
}
.login-box .btn.big { font-size: 16px; padding: 14px 18px; } /* same size as the rest */

/* Kids Mode: identical shape, distinct pink */
.kids-link {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; text-decoration: none;
  background: var(--pink); box-shadow: 0 4px 0 var(--pink-dark);
  transition: transform .08s, box-shadow .08s; margin-top: 2px;
}
.kids-link:hover  { transform: translateY(-1px); box-shadow: 0 5px 0 var(--pink-dark); }
.kids-link:active { transform: translateY(3px);  box-shadow: 0 1px 0 var(--pink-dark); }

/* Code + Play paired on one row — the simple "join a friend" option */
.code-row { display: flex; gap: 8px; width: 100%; }
.code-row #roomInput { flex: 1; width: auto; min-width: 0; text-transform: uppercase; letter-spacing: .15em; text-align: center; }
.code-row #roomInput::placeholder { letter-spacing: normal; text-transform: none; }
.code-row .btn { width: auto; flex-shrink: 0; padding: 14px 20px; }
.login-error { color: var(--pink); font-size: 13px; font-weight: 700; }
/* (kids-glow keyframe kept below for the in-game KIDS badge) */
@keyframes kids-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,61,154,0.4); }
  50%      { box-shadow: 0 0 22px rgba(255,61,154,0.8); }
}

/* ===== LOBBY ===== */
.lobby-code-area { text-align: center; }
.lobby-code-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.lobby-code { font-size: 52px; font-weight: 900; color: var(--mint); letter-spacing: 8px; line-height: 1; }
.lobby-hint { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.lobby-players {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 12px 16px;
  width: min(340px, 100%);
  display: flex; flex-direction: column; gap: 4px;
}
.lobby-player {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.lobby-player:last-child { border-bottom: none; }
.lobby-player .player-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.lobby-player.me .player-dot { background: var(--mint); }
.lobby-player.me { color: var(--mint); }
.lobby-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.player-score { margin-left: auto; font-weight: 900; color: var(--mint); font-size: 13px; }


/* ===== CHAT INPUT ===== */
.chat-input-wrap {
  display: flex; gap: 5px; flex-shrink: 0;
  position: relative;
}
.chat-input-wrap input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-family: inherit;
  font-size: 16px; /* ≥16px prevents iOS auto-zoom on focus */
  font-weight: 600; padding: 7px 10px; outline: none;
  transition: border-color .15s;
}
.chat-input-wrap input:focus { border-color: var(--mint); }
.chat-input-wrap input::placeholder { color: var(--muted); }
.chat-input-wrap button {
  border: none; border-radius: 10px; cursor: pointer;
  font-size: 14px; padding: 0 12px;
  background: var(--surface-3); color: var(--mint);
  font-weight: 900; transition: background .1s;
}
.chat-input-wrap button:hover { background: var(--mint); color: var(--tile-ink); }

/* ===== WAITING SCREEN ===== */
.waiting-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 16px; text-align: center; padding: 20px;
}
.waiting-sentence {
  font-size: clamp(14px, 2vw, 20px); font-weight: 800; color: var(--mint);
  background: var(--mint-dim); border: 1px solid var(--mint-dark);
  border-radius: 14px; padding: 14px 20px; max-width: 100%;
}
.waiting-label { font-size: 13px; color: var(--muted); font-weight: 700; }
.waiting-dots { display: flex; gap: 6px; }
.waiting-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mint); opacity: .3;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.waiting-dots span:nth-child(2) { animation-delay: .2s; }
.waiting-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-pulse { 0%,80%,100% { opacity:.15; transform:scale(.8); } 40% { opacity:1; transform:scale(1.1); } }

/* ===== SUBMITTED TICK ===== */
.submitted-tick {
  color: #d4a800;
  font-size: 16px;
  margin-left: auto;
  filter: drop-shadow(0 0 5px rgba(212,168,0,0.7));
  animation: tick-pop .35s cubic-bezier(.36,1.6,.6,1) both;
  line-height: 1;
}
@keyframes tick-pop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0deg); } }

/* ===== ICONS (flat inline SVGs — simple + cute, never 3D emoji) ===== */
.icon { width: 15px; height: 15px; vertical-align: -3px; pointer-events: none; }
.btn .icon, .btn-inline .icon { margin-right: 2px; }

/* ===== MEDALS (flat round badges, no emoji) ===== */
.medal {
  display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #1a1a24;
  margin-right: 4px; vertical-align: -3px;
}
.medal.m1 { background: #f5c542; }
.medal.m2 { background: #c0c6d4; }
.medal.m3 { background: #cd8f57; }

/* ===== TTS + SHARE BUTTONS ===== */
.tts-btn, .share-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-size: 11px; font-weight: 800;
  cursor: pointer; padding: 2px 7px; flex-shrink: 0;
  transition: background .1s, color .1s;
}
.tts-btn:hover  { background: var(--surface-3); color: var(--text); }
.share-btn:hover { background: var(--mint-dim); border-color: var(--mint); color: var(--mint); }

/* ===== REVEAL ANIMATION ===== */
.vote-item .who { transition: opacity .6s ease, transform .6s ease; }
.vote-item.unrevealed .who { opacity: 0; transform: translateY(5px); }
.vote-item .tally { transition: opacity .6s ease .3s; }
.vote-item.unrevealed .tally { opacity: 0; }

/* ===== GALLERY ===== */
#galleryPhase {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px;
}
.gallery-header { flex-shrink: 0; }
.gallery-title { font-size: 18px; font-weight: 900; color: var(--mint); }
.gallery-grid {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding-right: 4px;
}
.gallery-round-label {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.gallery-round { display: flex; flex-direction: column; gap: 6px; }
.gallery-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.gallery-card.gallery-winner { border-color: var(--mint); background: var(--mint-dim); }
.gallery-text { font-size: 15px; font-weight: 700; line-height: 1.4; }
.gallery-meta { display: flex; justify-content: space-between; align-items: center; }
.gallery-who  { font-size: 11px; font-weight: 700; color: var(--mint); }
.gallery-votes { font-size: 11px; color: var(--muted); font-weight: 600; }
.gallery-actions { display: flex; gap: 6px; }
.gallery-scoreboard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px;
}
.gallery-score-row { font-size: 14px; font-weight: 700; padding: 4px 0; }

/* ===== VOTE PROGRESS ===== */
.vote-progress { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* ===== CROWN ===== */
.crown { color: #f5c542; display: inline-flex; }

/* ===== CONFETTI ===== */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.confetti span {
  position: absolute; top: -12px; width: 9px; height: 9px; border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(540deg); opacity: .7; }
}

/* ===== PODIUM (game over) ===== */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 10px 0 4px; flex-shrink: 0; }
.podium-col { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; max-width: 140px; min-width: 0; }
.podium-col .crown .icon { width: 22px; height: 22px; }
.podium-name { font-weight: 900; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-block {
  width: 100%; border-radius: 10px 10px 4px 4px;
  display: flex; align-items: flex-start; justify-content: center;
  font-weight: 900; font-size: 12px; color: #1a1a24; padding-top: 6px;
}
.podium-col.p1 .podium-block { height: 86px; background: #f5c542; }
.podium-col.p2 .podium-block { height: 60px; background: #c0c6d4; }
.podium-col.p3 .podium-block { height: 44px; background: #cd8f57; }

/* ===== MOBILE WAITING ACTIONS + CHAT BADGE ===== */
.mobile-actions-row { display: flex; gap: 8px; justify-content: center; }
.mobile-chat-toggle { position: relative; }
.chat-badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; border-radius: 10px;
  background: var(--pink); color: #fff;
  font-size: 11px; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

/* ===== RECONNECT BANNER ===== */
.reconnect-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: 700;
  z-index: 1000; box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background: var(--mint); color: var(--tile-ink);
  font-weight: 800; font-size: 13px; padding: 8px 20px;
  border-radius: 20px; z-index: 999;
  animation: toast-in .2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ===== CHAT KICK ===== */
.chat-kick-btn {
  background: none; border: none; cursor: pointer;
  color: var(--border); font-size: 10px; font-weight: 800;
  padding: 0 3px; margin: 0 2px;
  vertical-align: middle; opacity: 0;
  transition: opacity .15s, color .15s;
}
.line:hover .chat-kick-btn { opacity: 1; }
.chat-kick-btn:hover { color: var(--pink); }

/* ===== KICK ===== */
.player-name { flex: 1; }
.kick-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-size: 11px; font-weight: 800;
  cursor: pointer; padding: 2px 6px; margin-left: 4px;
  transition: background .1s, color .1s;
  flex-shrink: 0;
}
.kick-btn:hover { background: rgba(255,61,154,.18); border-color: var(--pink); color: var(--pink); }

.kick-banner {
  background: rgba(255,61,154,.12); border: 1px solid var(--pink);
  border-radius: 12px; padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--text);
  flex-shrink: 0;
}
.kick-confirm-btn {
  border: none; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 900;
  padding: 4px 10px; background: var(--pink); color: #fff;
  flex-shrink: 0;
}

/* ===== DESKTOP-ONLY / MOBILE-ONLY HELPERS ===== */
.mobile-only  { display: none !important; }
.desktop-only { display: flex !important; }
/* .hidden must still win — without this, hidden desktop-only sections (e.g. the
   vote phase) leak onto the login page because this rule comes later in the file */
.desktop-only.hidden { display: none !important; }

/* ===== NEXT ROUND COUNTDOWN ===== */
.next-countdown {
  text-align: center; font-size: 13px; font-weight: 700;
  color: var(--muted); padding: 8px 0;
}
.next-countdown b { color: var(--mint); }
.btn-link {
  background: none; border: none; color: var(--mint);
  font-family: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer; text-decoration: underline; padding: 0;
}

/* ===== MOBILE CHAT DRAWER (visible on all sizes, hidden by default) ===== */
.mobile-chat-drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
}
.mobile-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
  flex-shrink: 0;
}
.mobile-chat-toggle {
  align-self: center;
  margin-top: 8px;
}

/* ===== MOBILE ===== */
@media (max-width: 680px) {
  .mobile-only  { display: flex !important; }
  .mobile-only.hidden { display: none !important; }
  .desktop-only { display: none !important; }
  .desktop-right { display: none !important; }

  html, body { height: 100dvh; overflow: hidden; overscroll-behavior: contain; }

  /* App is just a fixed full-screen container on mobile */
  #app {
    position: fixed; inset: 0;
    display: block;
    padding: 0; margin: 0;
    width: 100%; max-width: 100%;
  }
  #app.lobby-mode { max-width: 100%; }

  /* Left panel fills the app */
  .left-panel {
    position: absolute; inset: 0;
    display: block;
    overflow: hidden;
    padding: 0; gap: 0;
  }

  /* Every direct child of left-panel is a full-screen step on mobile.
     Exclude the chat drawer which manages its own position:fixed. */
  .left-panel > *:not(#mobileChatDrawer) {
    position: absolute; inset: 0;
    background: var(--bg);
    display: none !important;
    flex-direction: column;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
    gap: 12px;
    z-index: 1;
  }

  /* The active step (no .hidden class) */
  .left-panel > *:not(#mobileChatDrawer):not(.hidden) {
    display: flex !important;
  }

  /* Login and lobby always on top.
     NOTE: the full-screen-step rule above is `.left-panel > *:not(#mobileChatDrawer)`,
     whose :not(#id) gives it (1,1,0) specificity — plain #id rules (1,0,0) LOSE to it.
     Every per-section override below must be prefixed with `.left-panel >` to win. */
  .left-panel > #loginPhase, .left-panel > #lobbyPhase { z-index: 20; }

  /* Chat drawer: position:fixed, above everything, hidden until toggled */
  #mobileChatDrawer {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg);
    display: flex !important;  /* flex always, visibility via .hidden */
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
  #mobileChatDrawer.hidden { display: none !important; }

  /* ---- LOGIN / LOBBY ---- */
  .solo-panel {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
  }
  .solo-panel .logo   { font-size: 56px; }
  .solo-panel .tagline { font-size: 13px; }
  .login-box input { font-size: 16px; } /* prevents iOS zoom */

  /* ---- GAME HEADER ---- */
  .left-panel > #gameHeader {
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    padding: 12px 16px 8px;
    background: var(--bg);
    z-index: 10;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 58px;
    overflow: hidden;
  }
  #gameHeader .logo   { font-size: 28px; }
  #gameHeader .tagline { display: none; }
  /* Two lines, not three: "ROUND 1/8" on top, "0 PTS" together below —
     three stacked lines push PTS into the theme bar */
  .scorebar .score-label:first-child { display: block; }
  .scorebar b { display: inline; font-size: 20px; }

  .left-panel > #roundbarWrap {
    position: absolute; top: 58px; left: 0; right: 0; bottom: auto;
    padding: 0 16px 8px;
    background: var(--bg);
    z-index: 10;
    height: 52px;
    overflow: hidden;
    gap: 0;
  }
  .roundbar { padding: 8px 12px; border-radius: 12px; margin: 0; }
  .roundbar .theme { font-size: 14px; }
  .timernum { font-size: 14px; }

  /* ---- BUILD ---- */
  .left-panel > #buildPhase {
    top: 110px; /* below header + roundbar */
    padding-bottom: 70px; /* room for floating bar */
    gap: 8px;
    overflow: hidden;
  }

  /* Rail on mobile: expands to show full sentence, wraps naturally */
  .rail {
    min-height: 52px;
    max-height: 35vh;      /* expands up to a third of screen */
    padding: 8px 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    overflow-y: auto;
    align-content: flex-start;
  }

  /* Board on mobile: scrolls so the rail can expand */
  .board { flex: 1; min-height: 0; overflow-y: auto; }
  .board-words { overflow: visible; height: auto; }
  .tile  { font-size: 12px; padding: 3px 9px; }

  .mobile-build-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 50;
  }
  .mobile-build-bar .btn { flex: 1; padding: 12px; }

  /* ---- MOBILE WAITING ---- */
  .left-panel > #mobileWaiting {
    top: 110px;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
  }
  .mobile-your-sentence {
    background: var(--mint-dim); border: 1px solid var(--mint-dark);
    border-radius: 14px; padding: 14px 18px;
    font-size: 16px; font-weight: 800; color: var(--mint);
    text-align: center; width: 100%;
  }
  #mobileWaiting .players { width: 100%; flex-shrink: 0; }

  /* ---- MOBILE VOTE (single scrollable list, tap to vote) ---- */
  .left-panel > #mobileVotePhase {
    top: 110px; gap: 10px;
  }
  .mobile-vote-header {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  }
  .mobile-vote-hint { flex: 1; text-align: center; font-size: 11px; margin: 0; }
  #mobileVotePhase .vote-list { overflow-y: auto; padding-bottom: 8px; }
  #mobileVotePhase .vote-item { padding: 14px; }
  #mobileVotePhase .vote-item .text { font-size: 15px; line-height: 1.4; }

  /* ---- HEADER CHAT BUTTON ---- */
  .header-chat-btn .chat-badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--pink); color: #fff;
    font-size: 10px; font-weight: 900;
    min-width: 16px; height: 16px; line-height: 16px;
    border-radius: 8px; padding: 0 3px; text-align: center;
  }

  /* ---- RESULTS / GALLERY ---- */
  .left-panel > #resultsPhase, .left-panel > #galleryPhase { top: 110px; }

  /* Float toasts above the fixed submit bar, not on top of it */
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ===== UTIL ===== */
.center { text-align: center; }
.muted  { color: var(--muted); font-size: 13px; font-weight: 600; }