@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap');

/* Unslop by Damir Sokolovsky, CC BY 4.0. ExpoKit MIT adaptations:
   see THIRD_PARTY_NOTICES.txt for the full notices. */
:root {
  color-scheme: dark;
  --bg: #09090b;
  --panel: #111113;
  --raised: #1c1c20;
  --hover: #27272c;
  --line: #28282e;
  --line-strong: #3c3c44;
  --text: #f4f4f5;
  --sub: #a1a1aa;
  --muted: #85858f;
  --accent: #eac078;
  --accent-hover: #f1cf98;
  --ink: #201a10;
  --positive: #81d4aa;
  --negative: #ee9a9e;
  --radius: 12px;
  --radius-control: 8px;
  --shadow: 0 1px 2px #0003;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 'Golos Text', Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { min-height: 36px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--raised); color: var(--text); box-shadow: var(--shadow); cursor: pointer; transition: all 200ms var(--ease); }
button:hover:enabled { background: var(--hover); border-color: var(--line-strong); }
button:active:enabled { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: default; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 500; }
button.primary:hover:enabled { background: var(--accent-hover); border-color: var(--accent-hover); }
a { color: inherit; text-underline-offset: 4px; transition: color 200ms var(--ease); }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: Manrope, Arial, sans-serif; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
h1 { font-size: 32px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
strong, b { font-weight: 500; }
label { display: block; margin-bottom: 8px; color: var(--sub); font-size: 12px; }
input, select, textarea { width: 100%; min-height: 40px; padding: 10px 12px; margin: 0 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--bg); color: var(--text); transition: border-color 200ms var(--ease), background 200ms var(--ease); }
input:hover, select:hover, textarea:hover { border-color: #55555f; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox] { width: 16px; min-height: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
textarea { resize: vertical; min-height: 72px; max-height: 120px; }
[hidden] { display: none !important; }
.text { min-height: 32px; padding: 4px 8px; background: transparent; border-color: transparent; color: var(--sub); box-shadow: none; }
.text:hover:enabled { background: #ffffff08; border-color: transparent; color: var(--text); }
.wide { width: 100%; }
.danger { color: var(--negative); }
.fine, .footer { font-size: 12px; line-height: 1.6; color: var(--muted); }
.fine { margin: 16px 0 0; }
.footer:empty, .hint:empty, .statusline:empty, .soundbar small:empty, .lobbysub:empty, .lobbyaside>p:empty { display: none; }
.eyebrow { margin: 0 0 12px; font-size: 12px; color: var(--sub); }
.hint { max-width: 640px; margin: 12px auto; color: var(--sub); font-size: 14px; line-height: 1.6; }
header { height: 56px; display: flex; align-items: center; gap: 24px; padding: 0 32px; border-bottom: 1px solid var(--line); background: #101012; }
.brand { display: inline-flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; font: 600 16px Manrope, Arial, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.brandmark { color: var(--accent); font: 24px/1 Georgia, serif; }
header #connection { margin-left: auto; color: var(--sub); font-size: 12px; }
header .text { font-size: 13px; }
main { max-width: 1280px; padding: 24px 32px; margin: auto; transform-origin: top center; }

/* Entry: a single decision, seven quiet notes, balanced against the title. */
.entrance { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: center; gap: 80px; min-height: calc(100dvh - 104px); max-width: 1100px; margin: auto; }
.entrance h1 { margin: 0 0 24px; font: 500 clamp(44px,5vw,68px)/1.06 Manrope, Arial, sans-serif; letter-spacing: -.045em; }
.entrance .eyebrow { margin-bottom: 20px; }
.intro { max-width: 400px; font-size: 17px; line-height: 1.6; color: var(--sub); }
.facts { display: flex; gap: 40px; padding-top: 24px; border-top: 1px solid var(--line); margin-top: 32px; max-width: 420px; }
.facts b { font: 500 28px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.facts span { display: block; margin-top: 8px; color: var(--sub); font-size: 12px; }
.entrypanel { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: 0 8px 32px #0002; }
.score-art { height: 120px; display: flex; justify-content: center; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: #151517; }
.note { display: grid; place-items: center; width: 36px; height: 52px; border: 1px solid #35353c; border-radius: 6px; color: #a1a1aa; font: 32px/1 Georgia, serif; }
.note:nth-child(4) { color: var(--accent); border-color: #756344; background: #211e18; }
.entrybody { padding: 28px; }
.tabs { display: flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); margin-bottom: 24px; }
.tabs button { flex: 1; border-color: transparent; box-shadow: none; background: transparent; color: var(--sub); font-size: 14px; }
.tabs button.active { color: var(--text); background: var(--raised); border-color: var(--line); }
.entrybody .hint { margin: 0 0 20px !important; font-size: 14px; }
.entrybody .primary { min-height: 44px; }
.joinerror { padding: 12px 16px; margin-bottom: 20px; border: 1px solid #754147; border-radius: 8px; color: var(--negative); font-size: 13px; }

/* Lobby: one height for every participant, no judge readiness indicator. */
main:has(.lobbyscreen) { min-height: calc(100dvh - 56px); display: grid; align-items: center; }
.lobbyscreen { max-width: 1120px; width: 100%; margin: 0 auto; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.topline h1 { margin: 0; }
.lobbyscreen .topline { margin-bottom: 32px; }
.lobbyscreen .eyebrow { margin-bottom: 8px; }
.lobbycode { text-align: right; }
.lobbycode span { display: block; margin-bottom: 8px; color: var(--sub); font-size: 12px; }
.lobbycode strong { font: 500 28px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.lobbylayout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start; }
.lobbysectionhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.lobbysectionhead h2, .lobbyaside h2 { margin: 0; font-size: 16px; }
.lobbysectionhead>span { font-size: 12px; color: var(--sub); }
.lobbymembers { display: grid; gap: 8px; }
.lobbymember { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.lobbymember.is-ready { border-color: #345345; }
.lobbymember.empty { background: transparent; border-style: dashed; }
.memberavatar { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 8px; background: var(--raised); color: var(--sub); font-size: 18px; overflow: hidden; }
.hostavatar { color: var(--accent); }
.membername { flex: 1; min-width: 0; }
.membername strong { font-size: 14px; overflow-wrap: anywhere; }
.membername small { display: block; margin-top: 4px; color: var(--sub); font-size: 12px; }
.judge-status, .readystate { color: var(--sub); font-size: 12px; white-space: nowrap; }
.readystate { display: inline-flex; gap: 8px; align-items: center; }
.readystate:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.readystate.ready { color: var(--positive); }
.readystate.offline { color: var(--negative); }
.removeplayer { min-height: 32px; width: 32px; padding: 0; font-size: 20px; color: var(--muted); background: transparent; border-color: transparent; box-shadow: none; }
.lobbyaside { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.lobbyaside input { margin: 16px 0 12px; font-size: 12px; }
.lobbyaside>p, .lobbystart p { color: var(--sub); font-size: 13px; line-height: 1.6; }
.lobbystart { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--line); }
.lobbystart p { margin: 16px 0 12px; }
.lobbystart button { min-height: 40px; }
.waitinghost { font-size: 13px; color: var(--accent); }
#leaveLobby { margin-top: 12px; padding-left: 0; }
.lobbyready { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.lobbyready>button { min-height: 40px; min-width: 160px; }
.lobby-media-tools { display: flex; gap: 8px; }
.lobby-media-tools button { font-size: 12px; }
.lobby-portrait { position: relative; }
.lobby-portrait img, .lobby-portrait video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lobby-portrait .portrait-initial { font-size: 18px; }
.lobby-portrait .camera-placeholder { font-size: 10px; padding: 2px; }
.lobby-portrait .portrait-presence { bottom: 0; right: 0; width: 8px; height: 8px; border-width: 1px; }

/* The arena keeps the board dominant. Content, not chrome, carries the contrast. */
main.game-view { max-width: 1600px; height: calc(100dvh - 56px); padding: 20px 32px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 0; zoom: 1 !important; }
.arena-toolbar { display: flex; align-items: center; gap: 24px; min-height: 44px; flex-shrink: 0; }
.arena-toolbar .topline { flex: 1; justify-content: flex-start; gap: 16px; margin: 0; }
.arena-toolbar .topline h1 { font-size: 18px; white-space: nowrap; }
.metatext { font-size: 12px; color: var(--sub); margin: 0 0 8px; }
.arena-toolbar .metatext { display: none; }
.roomcode { font-size: 13px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.arena-toolbar .roomcode { border-left: 1px solid var(--line-strong); padding-left: 16px; color: var(--sub); }
.roundbuttons, .rounds { display: flex; gap: 4px; margin: 0; }
.arena-toolbar .roundbuttons { flex: 0 1 600px; order: 1; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.roundbuttons button { flex: 1; min-height: 36px; padding: 8px 16px; font-size: 13px; color: var(--sub); border-color: transparent; background: transparent; box-shadow: none; white-space: nowrap; }
.roundbuttons small { display: none; }
.roundbuttons button.selected { color: var(--text); border-color: #45454d; background: #303035; box-shadow: 0 1px 2px #0003; }
.rounds { order: 1; align-items: center; gap: 20px; font-size: 13px; color: var(--muted); }
.rounds .active { color: var(--accent); }
.soundbar { display: flex; align-items: center; gap: 8px; }
.arena-toolbar .soundbar { order: 2; }
.arena-toolbar .soundbar>span { display: none; }
.soundbar button { min-height: 40px; font-size: 12px; padding: 8px 12px; white-space: nowrap; }
.arena-toolbar .arena-menu { min-width: 40px; padding: 0; font-size: 24px; color: var(--sub); border-color: transparent; background: transparent; box-shadow: none; }
.arena-toolbar>.packbar, .round-picker { display: none; }
.packbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.packbar small { display: block; color: var(--sub); font-size: 12px; margin-bottom: 8px; }
.packbar>div { display: flex; gap: 8px; }
.packbar button { font-size: 13px; }
.game-view .layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.game-view .layout>div:first-child { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 16px; }
.game-view .aside, .game-view .mobilecontrols { display: none; }
.stage { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.stagehead { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-shrink: 0; }
.stagehead h2 { margin: 0; font-size: 16px; }
.badge { font-size: 12px; color: var(--sub); white-space: nowrap; }
.categoryboard { display: grid; grid-template-rows: repeat(var(--visible-rows,6),minmax(0,1fr)); flex: 1; min-height: 0; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: #141416; }
.categoryrow { display: grid; grid-template-columns: minmax(180px,1.8fr) repeat(5,minmax(0,1fr)); min-height: 0; }
.categoryrow+.categoryrow { border-top: 1px solid var(--line-strong); }
.categoryname { display: flex; align-items: center; justify-content: flex-start; padding: 12px 20px; background: #161618; color: #dedee3; font: 500 clamp(16px,1.5vw,22px)/1.25 Manrope, Arial, sans-serif; overflow-wrap: anywhere; }
.questioncell { display: grid; place-items: center; min-height: 0; min-width: 0; padding: 8px; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; background: #202023; color: var(--text); font: 500 clamp(24px,2.6vw,38px)/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; box-shadow: none; }
.questioncell:hover:enabled { background: #303034; border-left-color: var(--line-strong); }
.questioncell:active:enabled { transform: none; background: #3b3b41; }
.questioncell:disabled { opacity: 1; cursor: default; }
.questioncell.empty, .questioncell.played { background: #141416; color: #62626b; }
.second-round-board .categoryrow { grid-template-columns: minmax(0,1.8fr) minmax(0,5fr); }
.category-choice { display: flex; justify-content: center; align-items: center; gap: 24px; }
.category-choice strong { font: inherit; }
.category-choice span { font: 400 13px 'Golos Text', Arial, sans-serif; color: var(--sub); }
.board-stage>#buzz, .board-stage>.statusline { display: none; }
.compactpager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; color: var(--sub); font-size: 12px; flex-shrink: 0; }
.compactpager button { min-width: 36px; min-height: 28px; padding: 4px 8px; border-radius: 6px; }

/* Photos and scores share exactly the same geometry for all three players. */
.players { flex: 0 0 156px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 0; min-height: 0; }
.player.podium { display: grid; grid-template-columns: 144px minmax(0,1fr); grid-template-rows: 1fr auto; min-width: 0; padding: 8px; overflow: hidden; background: #141416; border: 1px solid var(--line); border-radius: var(--radius); }
.player.buzz-first { border-color: #46745b; }
.player.buzz-late { border-color: #7e6744; }
.player.out { opacity: .5; }
.portrait { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; grid-row: 1/3; border-radius: 4px; background: var(--raised); overflow: hidden; }
.portrait img, .portrait video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #242428; color: #c5c5cd; font: 500 44px Manrope, Arial, sans-serif; }
.camera-placeholder { position: absolute; padding: 8px; color: var(--sub); font-size: 12px; text-align: center; }
.portrait-presence { position: absolute; bottom: 6px; right: 6px; width: 10px; height: 10px; border: 2px solid var(--panel); border-radius: 50%; background: var(--muted); }
.portrait-presence.online { background: var(--positive); }
.podium-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 12px 16px 4px; min-width: 0; }
.playername { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 500; }
.podium-score { color: var(--accent); font: 500 36px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.podium-status { display: flex; align-items: center; justify-content: space-between; min-height: 28px; gap: 8px; padding: 4px 16px 8px; color: var(--sub); font-size: 12px; }
.podium-status .manage { min-height: 20px; margin: 0; padding: 0; font-size: 12px; }
.podium-status:has(.buzzlabel) .manage { display: none; }
.buzzlabel { font-size: 12px; white-space: nowrap; }
.buzzlabel.first { color: var(--positive); }
.buzzlabel.late { color: var(--accent); }
.portrait-tools { position: absolute; top: 6px; right: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.portrait-tools button { min-height: 28px; padding: 4px 8px; border-color: #ffffff28; border-radius: 6px; background: #111113ed; font-size: 11px; }
.portrait-tools .active { color: var(--positive); border-color: #46745b; }

/* Active question: readable feedback above a calm stage. */
.listening { display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.listening h2 { margin: 12px 0; font-size: 28px; }
.bigprice { font: 500 clamp(40px,8vh,88px)/1.1 Manrope, Arial, sans-serif; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; flex-shrink: 0; }
.actions button { flex: 1; min-width: 96px; min-height: 40px; font-size: 13px; }
.answerbox { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--sub); font-size: 13px; flex-shrink: 0; }
.answerbox strong { color: var(--text); }
.answerbox #showGameScore { margin-left: 8px; padding: 0 8px; min-height: 24px; font-size: 12px; }
.statusline { margin-top: 8px; color: var(--sub); font-size: 12px; line-height: 1.5; }
.buzz { width: 100%; min-height: 56px; margin-top: 12px; border-color: var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--ink); font: 600 24px Manrope, Arial, sans-serif; flex-shrink: 0; }
.buzz:hover:enabled { background: var(--accent-hover); border-color: var(--accent-hover); }
.buzz:disabled { opacity: 1; color: var(--sub); background: var(--raised); border-color: var(--line); font-size: 18px; }
.key { display: inline-block; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 4px; font-size: 11px; }
.buzznotice { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin-bottom: 12px; border: 1px solid; border-radius: var(--radius); flex-shrink: 0; }
.buzznotice.first { color: var(--positive); border-color: #365f48; background: #11251a; }
.buzznotice.late { color: var(--accent); border-color: #6e5938; background: #241f15; }
.buzznotice.wrong { color: var(--negative); border-color: #704047; background: #28171b; }
.buzznotice.unavailable { color: var(--sub); border-color: var(--line-strong); background: var(--raised); }
.buzznotice strong { font-size: clamp(18px,2vw,28px); font-weight: 500; }
.buzznotice p { margin: 8px 0 0; font-size: 12px; color: var(--sub); }
.buzznotice p:empty { display: none; }
.signalmark { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.buzzorder { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.buzzorder>span { padding: 4px 8px; font-size: 12px; color: var(--sub); border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.buzzorder .first { color: var(--positive); }
.buzzorder .late { color: var(--accent); }
.auctionsetup { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) auto; gap: 12px; align-items: end; flex-shrink: 0; }
.auctionsetup select, .auctionsetup input { margin: 0; }
.auctionsetup>button { min-height: 40px; }
.auction-riddle { max-width: 900px; margin: 12px auto 24px; font: 500 clamp(20px,2.8vw,36px)/1.4 Manrope, Arial, sans-serif; letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.auction-selection { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; flex: 1; min-height: 0; padding: 16px 0; }
.auction-selection h2 { margin: 0; font-size: 24px; text-align: center; }
.auction-choices { display: flex; justify-content: center; gap: 16px; width: 100%; max-width: 760px; }
.auction-choice { flex: 1; min-width: 0; max-width: 128px; aspect-ratio: 1; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #202023; font: 500 42px Manrope, Arial, sans-serif; }
.auction-choice:hover:enabled { background: #323237; border-color: #666670; }
.auction-choice:disabled { opacity: 1; }
.auction-choice.empty, .auction-choice.played { background: #131315; color: #565661; border-color: var(--line); }
.slots { display: flex; justify-content: center; gap: 8px; }
.slot { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--sub); background: var(--raised); font-size: 20px; }
.slot.current { border-color: #92929d; }
.slot.next { border-color: var(--accent); color: var(--accent); }
.slot.done { background: #153326; color: var(--positive); border-color: #345a43; }
.slot:disabled { opacity: 1; }
.super-stage>.stagehead, .super-stage>.hint, .super-stage>.buzzorder { display: none; }
.super-stage .listening { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-content: center; align-items: center; gap: 16px; text-align: left; }
.super-stage .listening h2 { grid-column: 1; grid-row: 1; margin: 0; font-size: 24px; }
.super-stage .listening .bigprice { grid-column: 2; grid-row: 1; text-align: right; }
.super-slots { grid-column: 1/-1; grid-row: 2; justify-content: flex-start; }
.stage .waiting, .editorform .waiting { padding: 24px 0; }
.stage .waiting h2, .editorform .waiting h2 { margin: 0 0 16px; }

/* Editor: a single set of controls, a compact score workbench. */
.editorroutebar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 0 0 16px; }
.editorroutebar h1 { margin: 0; font-size: 28px; }
.editorroutebar .eyebrow, .editorroutebar .hint { display: none; }
.editorroutebar>div:last-child { display: flex; gap: 12px; align-items: center; }
.editorroutebar a { color: var(--sub); font-size: 13px; white-space: nowrap; }
.editorroutebar button { font-size: 13px; }
#editorTracks { display: none; }
#editor { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.editorhead { display: none; }
.editorlayout { display: grid; grid-template-columns: 240px minmax(0,1fr); }
.editorlist { padding: 20px; border-right: 1px solid var(--line); background: #0e0e10; }
.editorlist>input { font-size: 13px; }
.editorlist>button { font-size: 12px; }
.editorlist #addFiles { min-height: 40px; }
.editorlist .fine { margin-top: 12px; }
.notation-add { margin-top: 8px; min-height: 36px; padding: 8px; }
.tracklist { display: grid; gap: 6px; margin: 16px 0 12px; }
.tracklist button { display: flex; gap: 12px; align-items: center; min-height: 36px; padding: 8px 12px; font-size: 12px; text-align: left; overflow-wrap: anywhere; box-shadow: none; }
.tracklist button span { min-width: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tracklist button.selected { border-color: #786242; background: #252119; color: var(--accent); }
#newPack { padding-left: 0; text-align: left; }
.editorform { padding: 20px 24px; min-width: 0; }
.editorform input, .editorform textarea { font-size: 13px; }
.editor-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.editor-tabs button { flex: 1; min-width: 0; min-height: 32px; padding: 6px 12px; border-color: transparent; background: transparent; color: var(--sub); font-size: 12px; box-shadow: none; }
.editor-tabs button.selected { border-color: #45454d; background: #303035; color: var(--text); }
.fieldgrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.fieldgrid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.roundchecks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 20px; }
.roundchecks label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
.audiopreview { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.audiopreview audio { width: 100%; height: 40px; }
.audiopreview .fine { margin-top: 0; }
.markerline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 16px; }
.markerline span { margin-right: auto; color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.markerline button { min-height: 32px; padding: 6px 8px; font-size: 12px; }
.editorform .actions { margin-top: 8px; }
.editorfoot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line); background: #141416; }
.editorfoot>span { display: none; }
.editorfoot>div { display: flex; gap: 8px; }
.editorfoot button { font-size: 13px; min-height: 40px; }
.notation-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notation-toolbar button, .notation-controls button { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.notation-help, .notation-caption { max-width: 760px; margin: 12px 0 16px; color: var(--sub); font-size: 12px; line-height: 1.6; }
.notation-caption { margin-bottom: 0; color: var(--muted); }
.notation-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.notation-fields input { font-family: ui-monospace, monospace; }
.notation-status { margin: 4px 0 16px; }
.notation-status>p { color: var(--sub); font-size: 13px; }
.note-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.note-strip>span { text-align: center; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.note-strip small { display: block; margin-bottom: 8px; color: var(--sub); font-size: 11px; font-weight: 400; }
.notation-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notation-controls label { margin: 0 0 0 8px; }
.notation-controls select { width: 88px; min-height: 36px; margin: 0; padding: 8px; font-size: 12px; }

/* Dialogs and feedback have the same surface, radius and focus treatment. */
dialog { width: calc(100% - 32px); max-width: 720px; max-height: calc(100dvh - 32px); padding: 24px; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #151518; color: var(--text); box-shadow: 0 20px 80px #0006; }
dialog::backdrop { background: #000a; }
dialog h2 { margin: 0 0 20px; font-size: 24px; }
dialog p { font-size: 13px; line-height: 1.65; color: var(--sub); }
dialog li { padding: 8px 0; }
.close { float: right; min-width: 32px; min-height: 32px; padding: 0; font-size: 24px; color: var(--sub); border: 0; box-shadow: none; background: transparent; }
#rules { overflow: hidden; }
#rules .rule-page p { font-size: 14px; }
#rules .compactpager { margin-top: 24px; }
.room-package { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 8px; }
.room-package h3 { font-size: 16px; }
.room-package .packbar { flex-wrap: wrap; }
#scoreViewer { width: calc(100% - 32px); height: calc(100dvh - 32px); max-width: 1100px; max-height: 900px; padding: 20px; overflow: hidden; grid-template-rows: auto minmax(0,1fr) auto; gap: 12px; }
#scoreViewer[open] { display: grid; }
#scoreViewer h2 { margin: 0; font-size: 20px; }
#scoreViewer .close { position: absolute; top: 12px; right: 16px; }
#scoreViewer img, #scoreViewer iframe { width: 100%; height: 100%; min-height: 0; object-fit: contain; border: 0; border-radius: 6px; background: #fff; }
#scoreViewer a { font-size: 12px; color: var(--sub); }
#notationImport { max-width: 640px; }
#toast { display: none; position: fixed; bottom: 24px; left: 50%; z-index: 20; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 20px; border: 1px solid #d4d4d8; border-radius: 8px; background: #f4f4f5; color: #18181b; box-shadow: 0 4px 16px #0003; font-size: 13px; }

@media (max-width: 1050px) {
  .entrance { gap: 40px; }
  .lobbylayout { grid-template-columns: minmax(0,1fr) 288px; }
  .arena-toolbar { gap: 12px; }
  .roundbuttons button { padding: 8px 12px; }
  .players { flex-basis: 132px; }
  .player.podium { grid-template-columns: 108px minmax(0,1fr); }
  .podium-info { padding: 8px 12px 4px; }
  .podium-status { padding: 4px 12px; }
  .playername { font-size: 14px; }
  .editorlayout { grid-template-columns: 216px minmax(0,1fr); }
  .editorlist { padding: 16px; }
  .editorform { padding: 20px; }
}
@media (max-width: 700px) {
  header { height: 44px; gap: 12px; padding: 0 12px; }
  .brand { gap: 8px; font-size: 13px; }
  .brandmark { font-size: 20px; }
  header #connection { font-size: 11px; max-width: 88px; text-align: right; }
  header .text { padding: 4px; font-size: 12px; }
  main { padding: 16px 12px; }
  .entrance { min-height: calc(100dvh - 76px); display: flex; flex-direction: column; justify-content: center; gap: 24px; max-width: 440px; }
  .entrance>div { width: 100%; }
  .entrance h1 { font-size: 40px; letter-spacing: -.04em; margin: 0 0 12px; }
  .entrance h1 br { display: none; }
  .entrance .eyebrow { margin-bottom: 12px; }
  .intro { font-size: 14px; margin: 0; }
  .facts { display: none; }
  .entrybody { padding: 20px; }
  .score-art { height: 64px; gap: 12px; }
  .note { width: 28px; height: 36px; font-size: 24px; }
  .tabs { margin-bottom: 16px; }
  .entrybody .hint { font-size: 13px; margin-bottom: 16px !important; }
  .entrybody .fine { font-size: 12px; margin-top: 12px; }
  main:has(.lobbyscreen) { min-height: calc(100dvh - 44px); padding-top: 16px; padding-bottom: 16px; }
  .lobbyscreen .topline { gap: 16px; margin-bottom: 20px; }
  .lobbyscreen h1 { font-size: 28px; }
  .lobbycode strong { font-size: 24px; letter-spacing: .08em; }
  .lobbycode span { font-size: 11px; }
  .lobbylayout { grid-template-columns: 1fr; gap: 16px; }
  .lobbysectionhead { margin-bottom: 12px; }
  .lobbysectionhead h2 { font-size: 14px; }
  .lobbymembers { gap: 6px; }
  .lobbymember { min-height: 60px; padding: 8px 12px; gap: 12px; }
  .memberavatar { flex-basis: 32px; height: 32px; font-size: 16px; }
  .membername strong { font-size: 13px; }
  .membername small { font-size: 11px; margin-top: 4px; }
  .readystate, .judge-status { font-size: 11px; }
  .readystate { gap: 6px; }
  .removeplayer { width: 24px; min-height: 28px; }
  .lobbyaside { padding: 16px; }
  .lobbyaside h2 { display: none; }
  .lobbyaside input { margin: 0 0 8px; min-height: 36px; }
  .lobbyaside #copyInvite { min-height: 36px; font-size: 12px; }
  .lobbystart { margin-top: 12px; padding-top: 0; }
  .lobbystart p { margin: 12px 0; font-size: 12px; }
  #leaveLobby { margin-top: 8px; min-height: 28px; font-size: 12px; }
  .lobbyready { margin-top: 12px; }
  .lobbyready>button { min-width: 140px; }
  .lobby-media-tools { gap: 4px; }
  .lobby-media-tools button { padding: 8px; font-size: 11px; }
  main.game-view { height: calc(100dvh - 44px); padding: 12px; gap: 12px; }
  .arena-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; min-height: 40px; }
  .arena-toolbar .topline, .arena-toolbar .roundbuttons { display: none; }
  .round-picker { display: block; width: 100%; min-height: 40px; padding: 8px 12px; margin: 0; background: var(--raised); font-size: 14px; }
  .soundbar button { min-height: 40px; padding: 8px; font-size: 12px; }
  .rounds { gap: 8px; font-size: 11px; }
  .stage { padding: 12px; }
  .stagehead { gap: 8px; margin-bottom: 12px; }
  .stagehead h2 { font-size: 14px; }
  .badge { font-size: 11px; }
  .categoryrow { grid-template-columns: minmax(84px,1.8fr) repeat(5,minmax(0,1fr)); }
  .categoryname { justify-content: center; padding: 8px; text-align: center; font-size: 12px; }
  .questioncell { padding: 4px; font-size: 20px; }
  .second-round-board .categoryrow { grid-template-columns: minmax(100px,1.5fr) minmax(0,2fr); }
  .category-choice { gap: 16px; }
  .category-choice span { font-size: 12px; }
  .players { flex-basis: 156px; gap: 8px; }
  .player.podium { display: flex; flex-direction: column; padding: 4px; border-radius: 8px; }
  .portrait { flex: 1; min-height: 0; }
  .portrait-initial { font-size: 32px; }
  .podium-info { align-items: center; padding: 8px 4px 4px; gap: 4px; }
  .playername { font-size: 12px; }
  .podium-score { font-size: 22px; }
  .podium-status { min-height: 24px; justify-content: center; padding: 0 2px; }
  .podium-status .manage, .buzzlabel { font-size: 11px; }
  .portrait-tools { top: 2px; right: 2px; gap: 2px; flex-direction: row; }
  .portrait-tools button { min-height: 24px; padding: 2px 4px; font-size: 10px; }
  .camera-placeholder { font-size: 11px; padding: 4px; }
  .game-view .layout>div:first-child { gap: 12px; }
  .listening h2 { font-size: 20px; margin: 8px 0; }
  .bigprice { font-size: 48px; }
  .hint { font-size: 12px; margin: 8px auto; }
  .actions { margin-top: 8px; }
  .actions button { min-width: 72px; min-height: 36px; padding: 8px; font-size: 12px; }
  .answerbox { padding: 8px; margin-top: 8px; font-size: 12px; }
  .statusline { font-size: 11px; margin-top: 8px; }
  .buzz { min-height: 48px; margin-top: 8px; font-size: 22px; }
  .buzz:disabled { font-size: 16px; }
  .buzznotice { padding: 12px; margin-bottom: 8px; gap: 8px; }
  .buzznotice strong { font-size: 18px; }
  .buzznotice p { font-size: 11px; margin-top: 4px; }
  .buzzorder { gap: 4px; padding-bottom: 4px; margin-bottom: 4px; }
  .buzzorder>span { font-size: 11px; padding: 4px 6px; }
  .auctionsetup { grid-template-columns: minmax(0,1fr) minmax(0,.7fr) auto; gap: 8px; }
  .auctionsetup label { font-size: 11px; }
  .auctionsetup select, .auctionsetup input { padding: 8px; min-height: 36px; font-size: 12px; }
  .auctionsetup>button { padding: 8px; min-height: 36px; font-size: 11px; }
  .auction-riddle { margin: 8px auto 16px; font-size: 18px; line-height: 1.35; }
  .auction-selection { gap: 24px; }
  .auction-selection h2 { font-size: 20px; }
  .auction-choices { gap: 8px; }
  .auction-choice { font-size: 26px; border-radius: 8px; }
  .super-stage .listening { gap: 12px; }
  .super-stage .listening h2 { font-size: 18px; line-height: 1.3; }
  .super-stage .listening .bigprice { font-size: 44px; line-height: 1.1; }
  .super-stage .buzznotice p { display: none; }
  .super-slots { width: 100%; gap: 6px; }
  .super-slots .slot { flex: 0 1 32px; min-width: 0; width: 32px; height: 32px; min-height: 32px; font-size: 16px; }
  .editorroutebar { gap: 12px; margin-bottom: 12px; }
  .editorroutebar h1 { font-size: 20px; }
  .editorroutebar>div:last-child { gap: 8px; }
  .editorroutebar button, .editorroutebar a { font-size: 12px; white-space: nowrap; }
  .editorroutebar button { padding: 8px; min-height: 36px; }
  #editorTracks { display: inline-block; }
  .editorlayout { grid-template-columns: minmax(0,1fr); }
  .editorlist { display: none; border-right: 0; padding: 16px; }
  #editor.tracks-open .editorlist { display: block; }
  #editor.tracks-open .editorform { display: none; }
  .editorform { padding: 16px; }
  .editor-tabs { padding: 4px; gap: 2px; margin-bottom: 16px; }
  .editor-tabs button { min-height: 32px; padding: 6px; font-size: 12px; }
  .editorform input, .editorform textarea { margin-bottom: 12px; min-height: 36px; padding: 8px 12px; font-size: 13px; }
  .editorform label { font-size: 12px; margin-bottom: 6px; }
  .fieldgrid { gap: 12px; }
  .fieldgrid.three { gap: 8px; }
  .roundchecks { gap: 8px 12px; margin-bottom: 16px; }
  .roundchecks label { font-size: 11px; margin: 0; }
  .audiopreview { padding: 12px; }
  .audiopreview audio { height: 36px; }
  .markerline { gap: 6px; margin: 12px 0; }
  .markerline span { width: 100%; }
  .markerline button { font-size: 11px; }
  .editorfoot { padding: 12px 16px; }
  .editorfoot>div { width: 100%; }
  .editorfoot button { flex: 1; min-height: 40px; font-size: 12px; padding: 8px 12px; }
  .notation-toolbar { gap: 6px; }
  .notation-toolbar button, .notation-controls button { min-height: 36px; padding: 8px; font-size: 11px; }
  .notation-help, .notation-caption { font-size: 12px; line-height: 1.5; margin: 8px 0 12px; }
  .notation-fields { grid-template-columns: 1fr; gap: 0; }
  .notation-status { margin: 4px 0 12px; }
  .note-strip { padding: 8px; gap: 4px; }
  .note-strip>span { font-size: 16px; }
  .note-strip small { margin-bottom: 4px; }
  .notation-controls { gap: 6px; }
  .notation-controls label { display: none; }
  .notation-controls select { width: 76px; min-height: 36px; font-size: 12px; padding: 8px; }
  dialog { padding: 20px; }
  dialog h2 { font-size: 20px; }
  #toast { bottom: 12px; padding: 12px 16px; font-size: 12px; }
}
@media (max-height: 720px) and (min-width: 701px) {
  main.game-view { padding: 12px 24px; gap: 12px; }
  .players { flex-basis: 120px; }
  .player.podium { grid-template-columns: 100px minmax(0,1fr); }
  .podium-score { font-size: 28px; }
  .stage { padding: 12px; }
  .game-view .layout>div:first-child { gap: 12px; }
}
@media (max-height: 720px) and (max-width: 700px) {
  .entrance { gap: 16px; }
  .entrance h1 { font-size: 36px; }
  .entrance .eyebrow { margin-bottom: 8px; }
  .entrybody { padding: 16px; }
  .score-art { height: 52px; }
  .lobbymember { min-height: 52px; }
  .lobbyscreen .topline { margin-bottom: 12px; }
  .lobbysectionhead { margin-bottom: 8px; }
  .lobbylayout { gap: 12px; }
  .lobbyaside { padding: 12px; }
  .lobbystart { margin-top: 8px; }
  .lobbystart p { margin: 8px 0; }
  .notation-help { display: none; }
  .notation-caption { font-size: 11px; }
  .editorform { padding: 12px; }
  .editor-tabs { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  button:active:enabled { transform: none; }
}

/* ExpoKit source license for adapted styles and avatar helpers:
MIT License

Copyright (c) 2025-2026 Karan (anshkaran7)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/
/* A package is authored in its four actual round boards, not in a track list. */
main.round-editor-view { max-width: 1440px; height: calc(100dvh - 56px); min-height: 0; display: flex; flex-direction: column; gap: 16px; zoom: 1 !important; }
.round-editor-view .editorroutebar { flex-shrink: 0; margin: 0; min-height: 40px; }
.round-editor-view .editorroutebar h1 { margin: 0; font-size: 24px; }
#editor.round-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 20px; gap: 16px; }
.package-header { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.package-header label { margin: 0; font-size: 12px; }
.package-header input { width: min(480px,60%); min-width: 0; margin: 0; font-size: 14px; }
.package-header #newPack { margin-left: auto; padding: 8px 12px; text-align: center; font-size: 12px; }
.package-rounds { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); flex-shrink: 0; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.package-rounds button { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 40px; border-color: transparent; color: var(--sub); background: transparent; box-shadow: none; }
.package-rounds button>span { color: var(--muted); font-size: 12px; }
.package-rounds button.selected { background: #303035; color: var(--text); border-color: #45454d; }
.package-board-head { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.package-board-head h2 { margin: 0; font-size: 16px; }
.package-board-head>span { margin-left: auto; font-size: 12px; color: var(--sub); }
.package-board-head button { min-height: 28px; padding: 4px 8px; font-size: 12px; }
.package-grid { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(6,minmax(0,1fr)); border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.package-grid-row { display: grid; grid-template-columns: minmax(160px,1.7fr) repeat(5,minmax(0,1fr)); min-height: 0; }
.package-grid-row+.package-grid-row { border-top: 1px solid var(--line-strong); }
.package-category { height: 100%; min-height: 0; padding: 12px 16px; margin: 0; border: 0; border-radius: 0; background: #151517; font-size: 14px; text-overflow: ellipsis; }
.package-category:focus { outline-offset: -3px; }
.package-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 0; padding: 8px 12px; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; background: #202023; box-shadow: none; overflow: hidden; }
.package-cell:hover:enabled { background: #303034; border-left-color: var(--line-strong); }
.package-cell .cell-value { font: 500 clamp(20px,2.1vw,30px)/1 Manrope,Arial,sans-serif; font-variant-numeric: tabular-nums; }
.package-cell .cell-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; overflow: hidden; font-size: 12px; line-height: 1.35; color: var(--sub); }
.package-cell .cell-indicator { position: absolute; right: 8px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #55555e; }
.package-cell.filled .cell-indicator { background: var(--accent); }
.package-cell.partial .cell-indicator { border: 1px solid var(--accent); background: transparent; }
.package-cell.drop-target { outline: 2px solid var(--accent); outline-offset: -3px; background: #30291d; }
.package-sequence { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-content: center; gap: 16px; }
.package-sequence.seven { grid-template-columns: repeat(7,minmax(0,1fr)); }
.package-sequence .package-cell { aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 12px; }
.package-sequence .cell-value { font-size: 36px; }
.package-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-shrink: 0; padding-top: 4px; }
.package-foot>span { color: var(--sub); font-size: 12px; }
.package-foot>div { display: flex; gap: 8px; }
.package-foot button { min-height: 40px; font-size: 13px; }
.placement-message { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid #786242; border-radius: 8px; background: #252119; font-size: 13px; color: var(--accent); }
.unplaced-list { display: grid; gap: 8px; }
#slotEditor { width: calc(100% - 32px); max-width: 960px; height: min(720px,calc(100dvh - 32px)); max-height: none; padding: 0; overflow: hidden; }
#slotEditor[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.slot-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.slot-heading>div { flex: 1; min-width: 0; }
.slot-heading h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot-heading span { display: block; font-size: 12px; color: var(--sub); margin-bottom: 8px; }
.slot-heading h2 { margin: 0; font-size: 20px; }
#slotEditor .editorform { min-height: 0; overflow: hidden; padding: 20px 24px; }
.slot-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.slot-upload button { font-size: 13px; }
.slot-upload>span { margin-left: auto; font-size: 12px; color: var(--sub); }
#slotEditor #editAudio { width: 100%; height: 40px; }
.slot-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line); background: #141416; }
.slot-foot button { min-height: 40px; }
@media(max-width:700px) {
  main.round-editor-view { height: calc(100dvh - 44px); padding: 12px; gap: 12px; }
  .round-editor-view .editorroutebar h1 { font-size: 20px; }
  #editor.round-editor { padding: 12px; gap: 12px; }
  .package-header { gap: 8px; }
  .package-header label { display: none; }
  .package-header input { flex: 1; width: 0; min-height: 36px; padding: 8px; font-size: 13px; }
  .package-header #newPack { font-size: 11px; padding: 8px; min-height: 36px; }
  .package-rounds { gap: 2px; padding: 4px; }
  .package-rounds button { min-height: 36px; padding: 6px 2px; font-size: 11px; white-space: nowrap; }
  .package-rounds button>span { display: none; }
  .package-board-head { gap: 8px; }
  .package-board-head h2 { font-size: 13px; }
  .package-board-head>span { font-size: 11px; white-space: nowrap; }
  .package-grid-row { grid-template-columns: minmax(80px,1.8fr) repeat(5,minmax(0,1fr)); }
  .package-category { padding: 8px 4px; font-size: 11px; }
  .package-cell { gap: 0; padding: 4px; }
  .package-cell .cell-value { font-size: 18px; }
  .package-cell .cell-title { display: none; }
  .package-cell .cell-indicator { width: 4px; height: 4px; top: 4px; right: 4px; }
  .package-sequence { gap: 8px; }
  .package-sequence.seven { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .package-sequence .cell-value { font-size: 28px; }
  .package-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .package-foot>span { font-size: 11px; }
  .package-foot>div { justify-content: stretch; }
  .package-foot button { flex: 1; font-size: 12px; padding: 8px; }
  .placement-message { font-size: 12px; padding: 8px; }
  #slotEditor { width: calc(100% - 16px); height: calc(100dvh - 16px); border-radius: 12px; }
  .slot-heading { padding: 12px 16px; gap: 12px; }
  .slot-heading>div { flex: 1; min-width: 0; }
.slot-heading h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot-heading span { margin-bottom: 4px; font-size: 11px; }
  .slot-heading h2 { font-size: 16px; }
  #slotEditor .editorform { padding: 12px; }
  .slot-upload { gap: 8px; margin-bottom: 12px; }
  .slot-upload button { font-size: 11px; padding: 8px; }
  .slot-upload>span { width: 100%; margin: 0; font-size: 11px; }
  .slot-foot { padding: 12px 16px; }
  .slot-foot button { font-size: 12px; }
  #slotEditor .notation-help { font-size: 11px; }
  #slotEditor .notation-caption { font-size: 11px; }
}
.button-test-stage{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(16px,4vh,40px);border:1px solid #29292c;border-radius:12px;background:#141416}.test-instruction{color:#a1a1aa;margin:0}.test-players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.test-player{border:1px solid #303034;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:all .2s}.test-player h2{font-size:20px;overflow-wrap:anywhere;margin:0}.test-player strong{font-size:42px;font-variant-numeric:tabular-nums}.test-player span{font-size:12px;color:#a1a1aa}.test-dot{width:8px;height:8px;border-radius:50%;background:#52525b}.test-player.tested .test-dot{background:#70bd92}.test-player.latest{border-color:#eac078;background:#211e18}.test-result{min-height:24px;color:#eac078;font-size:20px}.button-test-stage .buzz{margin:0;max-width:none}.button-test-stage .actions{margin:0}@media(max-width:600px){.button-test-stage{gap:14px;padding:14px}.test-players{gap:6px}.test-player{padding:10px;gap:8px}.test-player h2{font-size:14px}.test-player strong{font-size:30px}.test-player span{font-size:10px}.test-result{font-size:16px}}

/* Media actions belong to the participant card and stay quiet until needed. */
[data-media-card]{position:relative;outline:none}
[data-media-card]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.media-reveal{opacity:0;pointer-events:none;transition:opacity 200ms ease}
[data-media-card]:hover .media-reveal,[data-media-card]:focus-within .media-reveal,[data-media-card].media-open .media-reveal{opacity:1;pointer-events:auto}
.lobbymember .lobby-media-tools{position:absolute;left:68px;top:50%;transform:translateY(-50%);padding:6px;gap:6px;background:var(--panel);border-radius:8px;z-index:2;box-shadow:0 0 12px 6px var(--panel)}
.lobby-media-tools button{min-height:32px;padding:4px 8px}
.lobbyready{justify-content:flex-end}
@media(hover:none){[data-media-card]:hover:not(.media-open):not(:focus-within) .media-reveal{opacity:0;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.media-reveal{transition:none}}