:root {
  --ink: #120a1c;
  --panel: rgba(20, 12, 34, 0.82);
  --panel-2: rgba(36, 22, 58, 0.9);
  --line: rgba(255, 255, 255, 0.14);
  --gold: #ffcf5a;
  --hot: #ff5e7a;
  --cool: #6ff3ff;
  --text: #fff6ec;
  --muted: rgba(255, 246, 236, 0.62);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0716; color: var(--text); font-family: 'Rajdhani', system-ui, sans-serif; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

#ui { position: fixed; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; pointer-events: auto; }
.screen.active { display: flex; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hidden { display: none !important; }

button {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
  color: var(--text); background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 18px; cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-transform: uppercase;
}
button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
button:active { transform: translateY(0); }
button.primary { background: linear-gradient(180deg, #ff7a59, #e2365f); border-color: rgba(255,210,180,0.6); box-shadow: 0 6px 22px rgba(226,54,95,0.45); }
button.primary:hover { box-shadow: 0 10px 30px rgba(226,54,95,0.65); }
button.big { font-size: 22px; padding: 14px 28px; border-radius: 16px; }
button:disabled { opacity: 0.45; pointer-events: none; }

input, select {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 18px; color: var(--text);
  background: rgba(0,0,0,0.35); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; outline: none;
}
input:focus, select:focus { border-color: var(--cool); }
select option { background: #1d1230; }

/* ── Title ─────────────────────────────────────────────────────────── */
#title { align-items: center; justify-content: center; gap: 36px; background: radial-gradient(ellipse at center, rgba(12,6,24,0.1), rgba(12,6,24,0.65)); }
.logo { text-align: center; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6)); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.logo-top, .logo-bottom { font-family: 'Bungee', sans-serif; line-height: 0.92; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.logo-top { font-size: clamp(36px, 6vw, 84px); background: linear-gradient(180deg, #fff, #ffe08a 60%, #ff9a3a); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.06em; }
.logo-bottom { font-size: clamp(64px, 11vw, 160px); background: linear-gradient(180deg, #ffffff, #ff8aa0 40%, #e2365f 75%, #7a1a4a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-sub { text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 2px #000; margin-top: 10px; font-size: 20px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted); }
.menu { display: flex; flex-direction: column; gap: 12px; width: min(400px, 88vw); padding: 22px; border-radius: 24px; background: rgba(14,8,26,0.72); border: 1px solid var(--line); backdrop-filter: blur(8px); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.menu-row { display: flex; gap: 12px; }
.menu-row button { flex: 1; }
.footer { position: absolute; bottom: 18px; color: var(--muted); font-size: 14px; letter-spacing: 0.1em; }

/* ── Bars & panels ─────────────────────────────────────────────────── */
.bar { display: flex; align-items: center; gap: 16px; padding: 16px 22px; background: linear-gradient(180deg, rgba(12,6,24,0.92), rgba(12,6,24,0.55)); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bar h1 { margin: 0; flex: 1; font-family: 'Bungee', sans-serif; font-weight: 400; font-size: 28px; letter-spacing: 0.04em; }
.bar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.bar-right > span { display: flex; align-items: center; gap: 10px; }
.stocks-label { display: flex; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; font-size: 14px; color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 28px; backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
.code { color: var(--gold); letter-spacing: 0.15em; }
.error { color: #ff8a9a; min-height: 22px; font-weight: 600; }
.error.center { text-align: center; padding: 6px; }
#lobby-error { margin: 0; background: rgba(12,6,24,0.95); }
#lobby-error:empty { display: none; }

/* ── Character grid ───────────────────────────────────────────────── */
.char-grid { flex: 1; min-height: 150px; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 14px; padding: 22px; overflow-y: auto; background: radial-gradient(ellipse at top, rgba(12,6,24,0.35), rgba(12,6,24,0.75)); }
.char-card {
  width: 132px; height: 160px; border-radius: 18px; position: relative; cursor: pointer; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)), #1a1030; border: 2px solid var(--line);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.char-card:hover { transform: translateY(-4px) scale(1.03); border-color: rgba(255,255,255,0.55); box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.char-card canvas { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 120px; height: 120px; }
.char-card .name { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 6px; text-align: center; font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(0deg, rgba(10,5,20,0.95), rgba(10,5,20,0)); }
.char-card .name.long { font-size: 13px; letter-spacing: 0.02em; }
.char-card .pips { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.char-card .pip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
.char-card.random { display: grid; place-items: center; font-family: 'Bungee'; font-size: 54px; color: var(--muted); }

/* ── Slots ────────────────────────────────────────────────────────── */
.slots { display: flex; justify-content: center; gap: 16px; padding: 16px 22px 22px; background: linear-gradient(0deg, rgba(12,6,24,0.95), rgba(12,6,24,0.6)); border-top: 1px solid var(--line); }
.slot { width: 250px; border-radius: 20px; border: 2px solid var(--line); background: var(--panel-2); overflow: hidden; position: relative; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s; }
.slot.focus { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--slot-color), 0 14px 36px rgba(0,0,0,0.5); }
.slot.off { background: #1a1030; }
.slot.off > :not(.slot-head) { opacity: 0.45; }
.slot .slot-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--slot-color); color: var(--ink); font-weight: 700; letter-spacing: 0.06em; }
.slot .slot-head select { font-size: 14px; padding: 2px 6px; color: var(--ink); background: rgba(255,255,255,0.55); border: none; }
.slot canvas { display: block; width: 100%; height: 170px; }
.slot .slot-name { padding: 2px 12px 0; font-family: 'Bungee'; font-size: 20px; text-shadow: 0 3px 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .stats { padding: 8px 12px 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.slot .stat-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.1); align-self: center; overflow: hidden; }
.slot .stat-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--slot-color), #fff); }
.slot .remove { position: absolute; top: 40px; right: 8px; padding: 2px 8px; font-size: 12px; }
.slot .team-btn { font-size: 12px; font-weight: 700; padding: 2px 8px; margin-left: 6px; border: 2px solid rgba(0,0,0,0.35); border-radius: 8px; color: var(--ink); cursor: pointer; }
.slot .team-btn:disabled { cursor: default; opacity: 0.9; }
.slot .slot-head .head-right { display: flex; align-items: center; }
.teams-label input { width: 18px; height: 18px; accent-color: var(--gold); }
.slot .ready-tag { position: absolute; top: 44px; left: 10px; font-weight: 700; font-size: 13px; background: #3fdc7a; color: var(--ink); border-radius: 8px; padding: 1px 8px; }

/* ── Online ───────────────────────────────────────────────────────── */
#online { align-items: stretch; }
.online-panel { margin: auto; width: min(440px, 90vw); display: flex; flex-direction: column; gap: 16px; }
.online-panel label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 14px; }
.or { text-align: center; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; font-size: 13px; }
.join-row { display: flex; gap: 10px; }
.join-row input { flex: 1; min-width: 0; text-transform: uppercase; font-family: 'Bungee'; letter-spacing: 0.3em; text-align: center; font-size: 26px; }
.waiting { color: var(--muted); font-weight: 600; }

/* ── Results ──────────────────────────────────────────────────────── */
/* opaque + blurred: the frozen last match frame (banner, HUD) must not show through */
#results { background: radial-gradient(ellipse at 30% 50%, rgba(255,180,120,0.22), rgba(12,6,24,0) 60%), rgba(12,6,24,0.93); backdrop-filter: blur(10px); }
.results-wrap { margin: auto; display: flex; align-items: center; gap: 40px; padding: 20px; }
.winner-stage canvas { width: min(46vh, 520px); height: min(46vh, 520px); }
.winner-stage { border-radius: 28px; background: radial-gradient(ellipse at 50% 80%, rgba(255,207,90,0.18), rgba(20,12,34,0.9) 70%); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.results-side { display: flex; flex-direction: column; gap: 14px; min-width: 340px; padding: 24px 28px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
.results-buttons { display: flex; gap: 10px; }
.results-buttons button { flex: 1; }
#results-table .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 1.5px solid #fff; vertical-align: 1px; }
.winner-label { font-family: 'Bungee'; color: var(--gold); letter-spacing: 0.3em; }
.winner-name { font-family: 'Bungee'; font-size: 56px; line-height: 1; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
#results-table { border-collapse: collapse; font-size: 18px; font-weight: 600; }
#results-table th { text-align: left; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; }
#results-table td { padding: 6px 10px; border-top: 1px solid var(--line); }
#results-table td.place { font-family: 'Bungee'; }

/* ── Prose screens ────────────────────────────────────────────────── */
.prose { margin: 30px auto; width: min(820px, 92vw); font-size: 19px; line-height: 1.55; overflow-y: auto; }
.prose code { background: rgba(255,255,255,0.1); border-radius: 6px; padding: 1px 7px; font-size: 0.92em; }
.prose h3 { font-family: 'Bungee'; font-weight: 400; margin: 18px 0 8px; color: var(--gold); }
.steps li { margin-bottom: 10px; }
.note { color: var(--cool); }
.keys { display: grid; grid-template-columns: 170px 1fr; gap: 6px 16px; }
.keys b { color: var(--gold); }
.scheme-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.binds { align-items: center; margin: 14px 0; }
.keyrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 36px; }
.keycap { padding: 4px 10px; min-width: 40px; border-radius: 8px; font-family: 'Rajdhani'; font-weight: 700; font-size: 17px; background: rgba(255,255,255,0.08); border-bottom-width: 3px; }
.keycap .x { margin-left: 6px; color: var(--muted); font-size: 14px; }
.keycap:hover .x { color: #ff7a59; }
.keycap.add { color: var(--cool); border-style: dashed; }
.listening { color: var(--cool); font-weight: 700; animation: blink 1s steps(2, start) infinite; }
.listening small { color: var(--muted); font-weight: 500; }
.unbound { color: #ff7a59; }
.bind-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bind-actions button:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
@keyframes blink { to { opacity: 0.35; } }

/* ── Overlays ─────────────────────────────────────────────────────── */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,4,16,0.6); backdrop-filter: blur(4px); pointer-events: auto; }
.pause-panel { display: flex; flex-direction: column; gap: 12px; min-width: 300px; text-align: center; }
.pause-panel h2 { font-family: 'Bungee'; font-weight: 400; margin: 0 0 8px; font-size: 36px; }
.hint { color: var(--muted); font-size: 14px; }
#training-help { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; background: rgba(10,5,20,0.7); border: 1px solid var(--line); font-weight: 700; letter-spacing: 0.08em; font-size: 14px; color: var(--muted); }
/* gamepad menu focus (client/ui/padnav.js) */
.pad-focus { outline: 3px solid var(--cool) !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(111,243,255,0.25); }
#toast { position: absolute; top: 20px; right: 20px; max-width: 420px; padding: 12px 18px; border-radius: 14px; background: rgba(10,5,20,0.9); border: 1px solid var(--line); pointer-events: auto; font-weight: 600; }

/* ── Room code (lobby strip, pause menu, in-match pill) ──────────── */
/* lobby bar: room code next to the title; on narrow windows the host controls wrap to a second row */
#lobby .bar { flex-wrap: wrap; row-gap: 8px; }
#lobby .bar h1 { flex: 0 0 auto; }
#lobby .bar-right { margin-left: auto; }
.room-inline { flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; white-space: nowrap; }
.room-label { font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.room-code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-weight: 800;
  font-size: 24px; line-height: 1; letter-spacing: 0.32em; padding: 5px 2px 5px 12px; /* letter-spacing pads the right */
  color: var(--gold); background: rgba(0,0,0,0.45); border: 2px dashed rgba(255,207,90,0.55); border-radius: 12px;
  text-transform: none; white-space: nowrap; user-select: all; min-width: 6.5ch; text-align: center;
}
.room-code:hover { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,207,90,0.15); }
.room-code.copied { border-style: solid; border-color: #3fdc7a; color: #3fdc7a; }
.room-code.small { font-size: 22px; padding: 6px 4px 6px 12px; align-self: center; }
.copy-btn { font-size: 13px; padding: 6px 11px; border-radius: 10px; }
#match-room {
  position: absolute; left: 14px; bottom: 12px; padding: 4px 12px; border-radius: 999px; pointer-events: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: none;
  color: var(--muted); background: rgba(10,5,20,0.55); border: 1px solid var(--line); opacity: 0.7;
}
#match-room:hover { opacity: 1; transform: none; color: var(--gold); }
#match-room b { color: var(--gold); font-weight: 800; }

/* ── Pause menu extras ───────────────────────────────────────────── */
.pause-row { display: flex; gap: 12px; }
.pause-row button { flex: 1; }

/* ── Character card: move list button ────────────────────────────── */
.char-card .card-info {
  position: absolute; top: 6px; left: 6px; z-index: 1; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  font-family: Georgia, serif; font-style: italic; font-size: 15px; text-transform: none; line-height: 1;
  background: rgba(10,5,20,0.7); opacity: 0; transition: opacity 0.15s ease;
}
.char-card:hover .card-info, .char-card:focus-within .card-info, .char-card .card-info.pad-focus { opacity: 1; }
@media (hover: none) { .char-card .card-info { opacity: 0.85; } }

/* ── Move list overlay ───────────────────────────────────────────── */
#movelist { z-index: 5; }
.movelist-panel { position: relative; width: min(1120px, 94vw); max-height: 90vh; overflow-y: auto; padding: 22px 26px 16px; }
#ml-portrait { position: absolute; top: 18px; left: 22px; width: 96px; height: 96px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); }
.ml-close { position: absolute; top: 14px; right: 14px; padding: 4px 11px; font-size: 16px; }
.ml-intro { padding-left: 116px; padding-right: 48px; min-height: 100px; }
.ml-intro h2 { margin: 0; font-family: 'Bungee'; font-weight: 400; font-size: 30px; line-height: 1.1; }
.ml-author { color: var(--muted); font-size: 14px; font-weight: 600; }
.ml-intro p { margin: 6px 0 8px; font-size: 17px; line-height: 1.35; }
.ml-traits { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-trait { padding: 2px 10px; border-radius: 999px; background: rgba(111,243,255,0.1); border: 1px solid rgba(111,243,255,0.3); color: var(--text); font-size: 14px; font-weight: 600; }
.ml-trait b { color: var(--cool); margin-right: 2px; }
.ml-groups { margin-top: 14px; columns: 3 300px; column-gap: 22px; }
.ml-group { break-inside: avoid; margin-bottom: 12px; }
.ml-group h4 { margin: 0 0 4px; font-family: 'Bungee'; font-weight: 400; font-size: 15px; color: var(--gold); letter-spacing: 0.06em; }
.ml-group h4 small { font-family: 'Rajdhani'; color: var(--muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.ml-row { display: grid; grid-template-columns: 116px 1fr; gap: 8px; align-items: start; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.07); }
.ml-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.ml-keys small { width: 100%; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.ml-keys .plus { color: var(--muted); font-weight: 700; font-size: 13px; }
.ml-keys .combo { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ml-keys .or { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 2px; }
kbd { display: inline-flex; align-items: center; gap: 2px; min-width: 24px; justify-content: center; padding: 1px 6px; border-radius: 6px; font-family: 'Rajdhani'; font-weight: 700; font-size: 15px; color: var(--text); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); border-bottom-width: 3px; white-space: nowrap; }
kbd i { font-style: normal; font-size: 11px; color: var(--cool); }
.ml-move { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 16px; line-height: 1.25; }
.ml-move b { font-weight: 700; }
.ml-slot { width: 100%; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; order: -1; }
.ml-tag { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 6px; border-radius: 6px; background: rgba(255,207,90,0.14); color: var(--gold); }
.ml-tag.sit { background: rgba(111,243,255,0.12); color: var(--cool); cursor: help; }
.ml-desc, .ml-var { width: 100%; color: var(--muted); font-size: 13px; }
.ml-var { color: #c9a8ff; }
.ml-foot { margin-top: 6px; color: var(--muted); font-size: 13px; text-align: center; }
/* player tabs (several local humans): click / pad in click mode, 1-4 while peeking */
.ml-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -6px 48px 10px; }
.ml-tab { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 14px; border-radius: 10px; border-left: 5px solid var(--tab-color, #fff); text-transform: none; }
.ml-tab.on { background: rgba(255,255,255,0.2); border-color: var(--tab-color, #fff); box-shadow: 0 0 0 2px var(--tab-color, #fff); }
.ml-tab b { font-family: 'Bungee'; font-weight: 400; color: var(--tab-color, #fff); }
.ml-tab kbd { font-size: 12px; min-width: 18px; padding: 0 4px; }
#movelist:not(.peek) .ml-tab kbd { display: none; }
/* Hold-Tab peek: no pointer, no scrolling, so it must fit the window. Compact layout, then
   .fit-1 / .fit-2 drop extras, then --ml-scale shrinks the whole panel (client/main.js fitMoves). */
#movelist.peek { pointer-events: none; background: rgba(8,4,16,0.4); backdrop-filter: none; display: block; }
#movelist.peek .movelist-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--ml-scale, 1));
  width: min(1480px, calc(100vw - 16px)); max-height: none; overflow: visible; padding: 14px 18px 8px; border-radius: 18px;
}
#movelist.peek .ml-tabs { margin: -2px 0 8px; }
#movelist.peek #ml-portrait { top: 12px; left: 16px; width: 64px; height: 64px; border-radius: 12px; }
#movelist.peek .ml-intro { padding-left: 78px; padding-right: 0; min-height: 64px; }
#movelist.peek .ml-intro h2 { font-size: 24px; display: inline; }
#movelist.peek .ml-author { display: inline; margin-left: 10px; }
#movelist.peek .ml-intro p { margin: 2px 0 5px; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#movelist.peek .ml-trait { font-size: 13px; padding: 1px 8px; }
#movelist.peek .ml-groups { margin-top: 8px; columns: 4 220px; column-gap: 16px; }
#movelist.peek .ml-group { break-inside: auto; margin-bottom: 6px; }
#movelist.peek .ml-group h4 { break-after: avoid; font-size: 13px; margin-bottom: 1px; }
#movelist.peek .ml-row { break-inside: avoid; grid-template-columns: 86px 1fr; gap: 6px; align-items: center; padding: 2px 0; }
#movelist.peek .ml-move { font-size: 15px; line-height: 1.15; gap: 0 5px; }
#movelist.peek .ml-slot { width: auto; order: 1; font-size: 11px; }
#movelist.peek .ml-tag { order: 2; font-size: 10px; }
#movelist.peek .ml-desc { display: none; }
#movelist.peek .ml-var { order: 3; font-size: 12px; line-height: 1.1; }
#movelist.peek kbd { font-size: 14px; padding: 0 5px; min-width: 22px; }
#movelist.peek .ml-keys small { font-size: 10px; }
#movelist.peek .ml-foot { margin-top: 2px; font-size: 12px; }
#movelist.peek.fit-1 .ml-var, #movelist.peek.fit-1 .ml-slot { display: none; }
#movelist.peek.fit-2 .ml-intro p { -webkit-line-clamp: 1; }
#movelist.peek.fit-2 .ml-row { padding: 1px 0; }
#movelist.peek.fit-2 .ml-keys small { display: none; }
/* Controls opened from the pause menu: dim the match, hide the in-match pills */
.controls-over-match #controls { background: rgba(8,4,16,0.6); backdrop-filter: blur(4px); }
.controls-over-match #training-help, .controls-over-match #match-room { display: none; }
.room-code small { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-right: 10px; vertical-align: 3px; }

/* ── Short windows: keep at least one row of fighter cards above the slots ── */
@media (max-height: 780px) {
  .bar { padding-top: 10px; padding-bottom: 10px; }
  .char-grid { padding: 14px 18px; gap: 10px; }
  .slots { padding: 10px 18px 12px; }
  .slot canvas { height: 120px; }
  .slot .stats { padding: 6px 12px 8px; gap: 2px 8px; }
}
@media (max-height: 640px) {
  .bar h1 { font-size: 22px; }
  .bar button, .bar select { padding-top: 6px; padding-bottom: 6px; }
  .char-grid { padding: 10px 14px; min-height: 140px; }
  .char-card { width: 112px; height: 136px; }
  .char-card canvas { width: 100px; height: 100px; }
  .slot canvas { height: 92px; }
  .slot .stats { display: none; }
  .slot .slot-name { padding-bottom: 6px; font-size: 18px; }
}