@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');

:root { --ink:#171713; --paper:#f2eee5; --card:#faf8f2; --acid:#d9ff43; --line:#c9c4b8; --muted:#69675f; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; }
button, input, select, textarea { font:inherit; }
button { color:inherit; }
.shell { width:min(1240px, calc(100% - 48px)); margin:auto; padding-top:24px; }
.mode-menu { border:1px solid var(--ink);background:var(--card);padding:clamp(32px,7vw,84px);min-height:min(620px,calc(100vh - 48px));display:flex;flex-direction:column;justify-content:center; }
.mode-kicker { margin:0 0 18px;font:600 11px DM Mono;letter-spacing:.16em; }
.mode-menu h1 { margin-bottom:48px;font-size:clamp(48px,7vw,88px); }
.mode-choices { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.mode-choices button { min-height:190px;border:1px solid var(--ink);background:transparent;padding:28px;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:24px; }
.mode-choices button:hover,.mode-choices button:focus-visible { background:var(--acid); }
.mode-choices strong { font:600 25px DM Mono; }
.mode-choices span { max-width:390px;color:var(--muted);line-height:1.55; }
.multiplayer-entry,.lobby-page { border:1px solid var(--ink);background:var(--card);padding:clamp(28px,6vw,72px);min-height:min(620px,calc(100vh - 48px)); }
.multiplayer-entry h1,.lobby-page h1 { margin:32px 0 42px; }
.multiplayer-entry form { max-width:560px;margin:0;display:grid;gap:12px; }
.multiplayer-entry form label,.invite-box label { font:600 11px DM Mono;letter-spacing:.1em; }
.multiplayer-entry input,.invite-box input { width:100%;border:1px solid var(--ink);background:white;padding:15px;font:600 18px DM Mono; }
.primary-action,.secondary-action { border:1px solid var(--ink);padding:14px 20px;font:600 12px DM Mono;letter-spacing:.08em;cursor:pointer; }
.primary-action { background:var(--acid); }
.secondary-action { background:transparent; }
.form-error { color:#9d291f;font:500 12px DM Mono; }
.lobby-heading,.multiplayer-heading { display:flex;align-items:center;justify-content:space-between;font:600 12px DM Mono;letter-spacing:.08em; }
.invite-box { max-width:720px;padding:22px;border:1px solid var(--line); }
.invite-box>div { display:flex;margin-top:10px; }.invite-box button { border:1px solid var(--ink);border-left:0;background:var(--ink);color:white;padding:0 18px;font:600 11px DM Mono;cursor:pointer; }
.invite-box p { margin:14px 0 0;color:var(--muted); }
.lobby-players { margin:34px 0;max-width:720px; }.lobby-players h2,.player-sidebar h2 { font:600 12px DM Mono;letter-spacing:.1em; }
.lobby-setting { max-width:720px;margin:0 0 28px;padding:18px 20px;border:1px solid var(--line); }
.lobby-setting>label { display:flex;justify-content:space-between;font:600 11px DM Mono;letter-spacing:.08em; }
.lobby-setting output { letter-spacing:0;text-transform:none; }
.lobby-setting .lobby-voice-label { margin-top:24px;margin-bottom:10px; }
.lobby-player { display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:14px 4px;font:600 15px DM Mono; }
.multiplayer-game { display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);border:1px solid var(--ink);background:var(--card); }
.multiplayer-main { padding:24px 28px;min-width:0; }.multiplayer-heading { margin-bottom:18px; }.multiplayer-heading>div { display:flex;gap:16px;align-items:baseline; }.multiplayer-heading strong { font-size:17px; }.multiplayer-heading>span { font-size:24px;color:#9d291f; }
.mp-audio-stage { grid-template-columns:1fr minmax(120px,260px); }.mp-skip { float:right;margin-top:9px;border:0;border-bottom:1px solid var(--ink);background:transparent;font:600 10px DM Mono;cursor:pointer; }
.player-sidebar { border-left:1px solid var(--ink);padding:24px 20px; }.game-player { padding:16px 4px;border-bottom:1px solid var(--line); }.game-player>div { display:flex;justify-content:space-between;gap:8px;font:600 13px DM Mono; }.game-player p { display:flex;justify-content:space-between;margin:8px 0 0;color:var(--muted);font:11px DM Mono; }.game-player.eliminated { opacity:.42; }.game-player.eliminated>div:first-child { text-decoration:line-through; }.game-player.me { background:rgba(217,255,67,.25);padding-left:8px;padding-right:8px; }
.player-round-result { margin-top:13px!important;padding-top:11px;border-top:1px dashed var(--line);display:grid!important;gap:7px!important; }
.player-round-result span { color:var(--ink);font:600 12px DM Mono; }
.player-round-result q,.player-round-result em { display:block;overflow-wrap:anywhere;color:var(--muted);font:400 12px/1.45 Manrope;text-decoration:none; }
.player-round-result q:before,.player-round-result q:after { color:var(--muted); }
.masthead { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); font:600 12px DM Mono, monospace; letter-spacing:.14em; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:13px; }
.brand-mark { width:28px; height:24px; display:flex; align-items:center; gap:2px; }
.brand-mark i { display:block; width:3px; background:var(--ink); }
.brand-mark i:nth-child(1),.brand-mark i:nth-child(5){height:8px}.brand-mark i:nth-child(2),.brand-mark i:nth-child(4){height:17px}.brand-mark i:nth-child(3){height:24px}
.header-meta { display:flex; align-items:center; gap:28px; color:var(--muted); }
.live-dot { color:var(--ink); }
.live-dot:before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--acid); border:1px solid var(--ink); margin-right:8px; }
.hero { padding:74px 0 58px; display:grid; grid-template-columns:1fr 1fr; align-items:end; }
.eyebrow { grid-column:1/-1; margin:0 0 20px; font:500 11px DM Mono,monospace; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(52px,7vw,94px); font-weight:600; line-height:.9; letter-spacing:-.065em; }
h1 em { font-family:Playfair Display,serif; font-weight:600; }
.intro { max-width:480px; justify-self:end; margin:0 0 5px; font-size:18px; line-height:1.65; color:#494840; }
.test-grid { display:grid; grid-template-columns:1fr 340px; border:1px solid var(--ink); background:var(--card); }
.test-grid.config-hidden { grid-template-columns:1fr; }
.test-grid.config-hidden .controls { display:none; }
.panel { min-width:0; }
.controls { order:2;padding:30px;border-left:1px solid var(--ink); }
.panel-heading { display:flex; align-items:center; gap:12px; margin-bottom:40px; }
.panel-heading>span:first-child,.section-title>span { width:27px;height:27px;border-radius:50%;background:var(--ink);color:white;display:grid;place-items:center;font:10px DM Mono; }
.panel-heading h2,.section-title h2 { margin:0; text-transform:uppercase; font:600 12px DM Mono,monospace; letter-spacing:.1em; }
.control-label { display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin-top:32px; }
.control-label output { font:500 12px DM Mono; }
input[type=range] { width:100%; accent-color:var(--ink); margin:18px 0 8px; }
.pace-input { width:100%;margin:14px 0 8px;padding:11px 12px;border:1px solid var(--ink);background:white;font:600 18px DM Mono; }
.range-notes { display:flex; justify-content:space-between; color:var(--muted); font:10px DM Mono; }
.auto-control { margin-top:22px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;font:10px DM Mono; }
.auto-control label { display:flex;align-items:center;gap:7px; }
.auto-control input { accent-color:var(--ink); }
.auto-control select { width:auto;padding:6px 8px;font:10px DM Mono; }
.select-label { margin-bottom:10px; }
select { width:100%; padding:12px; border:1px solid var(--line); background:transparent; font-size:12px; }
.test-card { order:1;padding:18px 28px; }
.test-card>.panel-heading { margin-bottom:12px;min-height:30px; }
.round-summary { position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:12px;white-space:nowrap; }
.round-meta { font:600 18px DM Mono;color:var(--ink);white-space:nowrap;letter-spacing:.04em; }
.round-meta:before { content:"/";margin-right:12px;color:var(--line); }
.test-heading { position:relative; }
.menu-button { border:0;border-bottom:1px solid var(--ink);background:transparent;padding:5px 0;font:600 10px DM Mono;letter-spacing:.08em;cursor:pointer; }
.round-label { font:600 18px DM Mono;color:var(--ink);white-space:nowrap;letter-spacing:.04em; }
.heading-words { margin-left:auto;font:600 12px DM Mono;color:var(--muted);white-space:nowrap; }
.settings-toggle { border:0;border-bottom:1px solid var(--ink);background:transparent;padding:6px 0;font:600 12px DM Mono;letter-spacing:.08em;cursor:pointer; }
.single-player .competitive-hidden-setting { display:none; }
.run-status { margin-left:auto;display:flex;align-items:baseline;gap:22px;font:600 17px DM Mono;letter-spacing:.02em;white-space:nowrap; }
.run-status span:first-child { color:#9d291f; }
.single-player .heading-words { margin-left:0; }
.test-grid:not(.config-hidden) .settings-toggle { display:none; }
.close-config { margin-left:auto;width:30px;height:30px;border:1px solid var(--ink);background:transparent;display:grid;place-items:center;padding:0;font:22px/1 Manrope;cursor:pointer; }
.close-config:hover { background:var(--acid); }
.audio-stage { position:relative; min-height:140px; padding:22px 26px; background:var(--ink); color:white; display:grid; grid-template-columns:auto 1fr minmax(120px,260px); gap:22px; align-items:center; }
.countdown { position:absolute;inset:0;z-index:3;background:var(--ink);color:var(--acid);display:grid;place-items:center;font:600 64px DM Mono; }
.countdown[hidden] { display:none!important; }
.play-button { width:68px;height:68px;border:0;border-radius:50%;background:var(--acid);display:grid;place-items:center;cursor:pointer; }
.play-button[hidden] { display:none!important; }
.play-button:disabled { opacity:.6; cursor:wait; }
.skip-button { position:absolute;right:18px;bottom:13px;border:0;border-bottom:1px solid #aaa99f;background:transparent;color:#ddd;padding:4px 0;font:10px DM Mono;letter-spacing:.08em;cursor:pointer; }
.skip-button:disabled { display:none; }
.play-icon { width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid var(--ink);margin-left:4px; }
.playing .play-icon { width:15px;height:18px;border:0;border-left:5px solid var(--ink);border-right:5px solid var(--ink);margin:0; }
.audio-stage strong { display:block; font-size:20px; }
.audio-stage p { margin:7px 0 0; color:#aaa99f; font-size:12px; }
.waveform { height:64px; display:flex; gap:4px; align-items:center; justify-content:flex-end; }
.waveform i { display:block;width:3px;height:var(--h);background:#6d6d66; }
.playing .waveform i { background:var(--acid); animation:pulse .65s ease-in-out infinite alternate; animation-delay:var(--d); }
@keyframes pulse { to { transform:scaleY(.3); } }
form { margin-top:22px; }
form[hidden] { display:none!important; }
form>label { display:block; margin-bottom:11px; text-transform:uppercase; font:600 14px DM Mono; letter-spacing:.08em; }
.answer-row { display:grid; grid-template-columns:1fr 135px; }
textarea { width:100%; min-height:96px; resize:vertical; border:1px solid var(--ink); padding:17px; background:white; outline:none; font-size:17px; }
textarea:focus { box-shadow:inset 0 0 0 2px var(--acid); }
.submit-button { border:1px solid var(--ink);border-left:0;background:var(--acid);font:600 15px DM Mono;letter-spacing:.08em;line-height:1.35;cursor:pointer; }
.submit-button[hidden] { display:none!important; }
.answer-row.answer-checked { grid-template-columns:1fr; }
.submit-button:disabled { background:#e3e0d8;color:#929087;cursor:not-allowed; }
.result { margin-top:22px; border-top:1px solid var(--ink); padding-top:22px; display:grid;grid-template-columns:100px 1fr auto;gap:22px;align-items:center; }
.result[hidden] { display:none; }
.result-score span { display:block;font:600 44px DM Mono; }.result-score small,.result-copy>span { font:11px DM Mono;letter-spacing:.1em;color:var(--muted); }
.result-copy p { margin:5px 0; }.result-copy #actualPhrase { font-size:20px;line-height:1.35;font-weight:600; }.distance-note { font-size:11px!important;color:var(--muted);font-weight:400!important; }
.answer-label { display:block;margin-top:12px;font:11px DM Mono;letter-spacing:.1em;color:var(--muted); }
.user-answer { font-size:16px;line-height:1.35;color:#494840; }
.next-button { border:0;border-bottom:1px solid var(--ink);background:transparent;padding:5px 0;font:500 8px DM Mono;color:var(--muted);cursor:pointer; }
.result-actions { display:flex;flex-direction:column;align-items:flex-end;gap:8px; }
.retry-button { border:1px solid var(--ink);background:var(--acid);padding:9px 11px;font:600 9px DM Mono;cursor:pointer;white-space:nowrap; }
.retry-button[hidden] { display:none; }
.next-button[hidden] { display:none; }
.game-over { margin-top:22px;border:1px solid var(--ink);background:var(--acid);padding:30px;text-align:center;display:flex;flex-direction:column;align-items:center; }
.game-over>span,.game-over>small { font:600 10px DM Mono;letter-spacing:.12em; }
.game-over>strong { margin:12px 0 0;font:600 64px DM Mono;letter-spacing:-.06em; }
.winner-score { margin:12px 0 0;font:600 20px DM Mono;letter-spacing:.04em; }
.game-over button { margin-top:24px;border:1px solid var(--ink);background:var(--ink);color:white;padding:13px 24px;font:600 11px DM Mono;letter-spacing:.08em;cursor:pointer; }
.stats-section { padding:0 0 16px; }
.stats-section>.section-title { margin:0;border:1px solid var(--ink);border-top:0;padding:10px 14px;background:var(--card); }
.stats-section>.stat-grid { border-top:0; }
.stats-section .section-title h2 { font-size:16px; }
.stats-section .section-title p { font-size:12px; }
.section-title { display:flex;align-items:center;gap:12px;margin-bottom:25px; }.section-title p { margin-left:auto;color:var(--muted);font:10px DM Mono;text-transform:uppercase; }
.stat-grid { display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--ink); }
.single-player~.stats-section .stat-grid { grid-template-columns:repeat(6,1fr); }
.score-stat { background:#171713;color:white; }
.score-stat small { color:#aaa99f; }
.stat { padding:18px;min-height:120px;border-right:1px solid var(--ink);display:flex;flex-direction:column; }.stat:last-child{border:0}.stat.accent{background:var(--acid)}
.stat>span { font:11px DM Mono;letter-spacing:.1em; }.stat strong { font:500 44px DM Mono;margin:auto 0 3px;letter-spacing:-.06em; }.stat small { color:var(--muted);font-size:11px; }
.history-wrap { overflow:auto;margin-top:22px; }
table { width:100%;border-collapse:collapse;font:13px DM Mono; }th { text-align:left;color:var(--muted);font-weight:400; }th,td{padding:13px 10px;border-bottom:1px solid var(--line)}td:last-child{font-weight:600}.empty-row{text-align:center;color:var(--muted)}
tbody tr:not(.empty-row) { cursor:help; }
tbody tr:not(.empty-row):hover { background:rgba(217,255,67,.22); }
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:28px}.intro{justify-self:start}.test-grid{grid-template-columns:1fr}.controls{order:2;border-left:0;border-top:1px solid var(--ink)}.stat-grid{grid-template-columns:1fr 1fr}.stat{border-bottom:1px solid var(--ink)}}
@media(max-width:850px){.multiplayer-game{grid-template-columns:1fr}.player-sidebar{border-left:0;border-top:1px solid var(--ink)}}
@media(max-width:600px){.shell{width:calc(100% - 24px)}.mode-menu{padding:28px 20px}.mode-choices{grid-template-columns:1fr}.mode-choices button{min-height:145px}.header-meta span:first-child{display:none}.hero{padding:50px 0 40px}h1{font-size:52px}.intro{font-size:15px}.test-card{padding:25px 18px}.test-heading{flex-wrap:wrap;padding-top:38px}.round-summary{top:0}.run-status{width:100%;justify-content:center;order:5}.audio-stage{grid-template-columns:auto 1fr}.waveform{display:none}.answer-row{grid-template-columns:1fr}.submit-button{border-left:1px solid var(--ink);border-top:0;padding:15px}.result{grid-template-columns:85px 1fr}.result-actions{grid-column:1/-1;align-items:stretch}.stat-grid{grid-template-columns:1fr}.stat{border-right:0!important;border-bottom:1px solid var(--ink)}footer{gap:20px}.controls{padding:25px 20px}}
@media(max-width:850px){.single-player~.stats-section .stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.single-player~.stats-section .stat-grid{grid-template-columns:1fr}}