:root{color-scheme:light dark;--bg:#f4f6fa;--card:#fff;--text:#172033;--muted:#657086;--line:#d9dfeb;--accent:#4f46e5;--good:#16834b;--bad:#c53b3b}html[data-theme=dark]{--bg:#0d111b;--card:#151b28;--text:#eef2ff;--muted:#9aa6bc;--line:#2a3448;--accent:#818cf8;--good:#28a866;--bad:#ef6666;color-scheme:dark}html[data-theme=light]{color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px system-ui,-apple-system,Segoe UI,sans-serif}header{height:64px;padding:0 max(18px,calc((100% - 780px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--card)}header div{display:flex;gap:10px;align-items:baseline}header span{color:var(--muted);font-size:13px}main{max-width:780px;margin:28px auto;padding:0 16px}.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 8px 30px #0000000c}h1{margin-top:0;font-size:34px}.muted{color:var(--muted)}label{display:block;margin:18px 0 6px;font-weight:650}select,button{font:inherit}select{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);margin-top:7px}button{border:1px solid var(--line);background:var(--card);color:var(--text);padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700}.primary{background:var(--accent);border-color:var(--accent);color:white}.row,.judge{display:flex;gap:12px;margin-top:22px}.wide{width:100%;margin-top:18px}.topline,.stats{display:flex;justify-content:space-between;align-items:center}.progress{height:12px;background:var(--line);border-radius:99px;overflow:hidden;margin:18px 0 8px}.progress i{display:block;height:100%;width:0;background:var(--accent);transition:.25s}.stats{font-size:13px;color:var(--muted)}.word{text-align:center;padding:42px 12px 28px;min-height:330px}.word h2{font-size:clamp(34px,8vw,66px);margin:10px 0 18px;overflow-wrap:anywhere}.word small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.word hr{border:0;border-top:1px solid var(--line);margin:30px auto;width:70%}.judge button{flex:1;font-size:18px}.good{background:color-mix(in srgb,var(--good) 15%,var(--card));border-color:var(--good)}.bad{background:color-mix(in srgb,var(--bad) 12%,var(--card));border-color:var(--bad)}.center{text-align:center;min-height:24px}@media(max-width:520px){main{margin:14px auto}.card{padding:17px;border-radius:16px}.word{padding-top:32px;min-height:300px}.row{flex-direction:column}.judge button{padding:15px 8px}header{height:56px}}.answerInput{width:min(520px,100%);font:inherit;font-size:24px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);text-align:center}.typingWord{min-height:280px}.result{margin:20px auto 0;padding:14px;border-radius:12px;max-width:560px;font-size:18px}.result.ok{border:1px solid var(--good);background:color-mix(in srgb,var(--good) 12%,var(--card))}.result.no{border:1px solid var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--card))}.matchGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:22px 0}.tile{min-height:72px;padding:10px;overflow-wrap:anywhere}.tile.selected{outline:3px solid var(--accent)}.tile.matched{background:color-mix(in srgb,var(--good) 16%,var(--card));border-color:var(--good);opacity:.55}.tile.wrong{background:color-mix(in srgb,var(--bad) 15%,var(--card));border-color:var(--bad)}@media(max-width:520px){.matchGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{min-height:64px;padding:8px}}

.quizAnswers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.quizChoice{min-height:64px;font-size:1.05rem}.quizChoice.correct{outline:3px solid #22c55e}.quizChoice.wrong{outline:3px solid #ef4444}@media(max-width:600px){.quizAnswers{grid-template-columns:1fr}}

[hidden]{display:none!important}

.browserWarning{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px;padding:13px 14px;border:1px solid #d9a21b;border-radius:14px;background:color-mix(in srgb,#f5b82e 13%,var(--card));font-size:14px}.browserWarning span{color:var(--muted)}.browserWarning button{padding:3px 9px;font-size:20px;line-height:1}.quizChoice:disabled{cursor:default;opacity:1}@media(max-width:600px){main{padding:0 10px}.card{padding:14px}.word{min-height:0;padding:24px 8px 16px}.word h2{font-size:clamp(30px,10vw,48px);margin:8px 0 12px}.quizAnswers{gap:9px;margin:12px 0}.quizChoice{min-height:58px;padding:10px}.result{margin-top:12px}.topline{gap:8px}.topline .back{padding:9px 10px}.matchGrid{gap:8px;margin:16px 0}.tile{min-height:58px}.browserWarning{margin-bottom:10px}}

.multiplayerEntry{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}.multiplayerEntry p{margin:5px 0 0}.groupChoices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.groupChoices button{min-height:90px;font-size:18px}.groupChoices small{display:block;margin-top:5px;color:var(--muted);font-size:12px}.groupChoices button:disabled{cursor:not-allowed;opacity:.6}@media(max-width:520px){.multiplayerEntry{align-items:stretch;flex-direction:column}.groupChoices{grid-template-columns:1fr}}

/* v0.7-dev Step 2 */
#hostPanel,#joinPanel{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.compactInput{width:100%;font-size:18px;text-align:left;margin-top:7px}.playerList{display:grid;gap:8px;margin:14px 0}.playerItem{padding:11px 13px;border:1px solid var(--line);border-radius:12px}.roomCode{font-size:1.4em;letter-spacing:.12em}.mpOk{border-color:var(--good)}.mpNo{border-color:var(--bad)}

/* v0.7-dev Step 3 */
#hostGameStatus{text-align:center;margin-top:16px}.leaderItem{display:flex;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}.mpWord{min-height:190px;padding:28px 8px 10px}.mpWord h2{font-size:clamp(28px,8vw,50px)}#gameTimer{font-size:1.25rem}#myScore{font-weight:700}