.game-page { position:relative; max-width:1120px; margin:28px auto 64px; padding:0 20px; --color-text-muted:#705f59; --color-primary:#b94a14; }
.game-page .back-btn { position:static; display:inline-flex; min-height:44px; align-items:center; }
.game-heading { padding:12px 0 16px; max-width:760px; }
.game-heading h1 { margin:8px 0; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.3; color:var(--color-text); }
.game-heading p { line-height:1.8; color:var(--color-text-muted); }
.game-eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.1em; color:var(--color-primary); }
.game-player { margin-top:12px; font-size:.9rem; }
.game-card { background:var(--color-bg-card,#fff); border:1px solid var(--color-border); border-radius:20px; padding:24px; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:20px; align-items:start; }
[hidden] { display:none!important; }
.game-card h2 { font-size:1.15rem; line-height:1.5; }
.game-card h3 { font-size:1rem; }
.game-notice { color:var(--color-text); min-height:24px; margin:0 0 16px; line-height:1.7; }
.game-login p { margin:10px 0 20px; color:var(--color-text-muted); line-height:1.8; }
.game-login-form { display:flex; gap:16px; align-items:end; flex-wrap:wrap; }
.game-login-form label { flex:1; min-width:180px; }
.game-page input,.game-page select { min-height:44px; width:100%; border:1px solid var(--color-border); border-radius:10px; padding:10px 12px; color:var(--color-text); background:var(--color-bg-card,#fff); font:inherit; }
.game-page label { display:block; font-size:.9rem; font-weight:600; }
.game-page label input { margin-top:7px; }
.game-page button,.game-page select { cursor:pointer; }
.game-page :focus-visible { outline:3px solid var(--color-primary); outline-offset:3px; }
.game-button { min-height:44px; padding:10px 18px; border:1px solid var(--color-primary); border-radius:12px; background:var(--color-primary); color:#fff; font:inherit; font-size:.9rem; font-weight:600; }
.game-button.secondary { color:var(--color-text); background:transparent; border-color:var(--color-border); }
.game-button:hover:enabled { filter:brightness(.94); }
.game-button:disabled,.song-option:disabled { opacity:.55; cursor:default; }
.game-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-bottom:24px; border-bottom:1px solid var(--color-border); }
.game-controls select { width:auto; max-width:100%; }
.game-round-header { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:24px 0 10px; }
.game-round-header h2 { margin-top:5px; }
.game-clock { font-size:1.8rem; font-weight:700; color:var(--color-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.game-hint { color:var(--color-text-muted); font-size:.88rem; line-height:1.8; }
.game-puzzle img { display:block; width:100%; aspect-ratio:16/9; max-height:300px; object-fit:contain; background:var(--color-bg); border-radius:12px; margin:18px 0; }
.game-puzzle audio { display:block; width:100%; margin:24px 0; }
#gamePreparing { min-height:160px; display:flex; align-items:center; justify-content:center; color:var(--color-text-muted); text-align:center; padding:24px; line-height:1.8; }
.game-answer-form { margin-top:20px; }
.game-answer-form>div { display:flex; gap:10px; margin-top:8px; }
.game-answer-form input { min-width:0; flex:1; }
.game-answer-form button { white-space:nowrap; }
.song-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:20px; }
.song-option { min-height:88px; display:flex; align-items:center; gap:8px; text-align:left; padding:10px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-bg-card,#fff); color:var(--color-text); font:inherit; font-size:.85rem; overflow-wrap:anywhere; }
.song-option img { width:48px; height:48px; flex:0 0 auto; object-fit:cover; border-radius:7px; }
.song-option:hover:enabled { border-color:var(--color-primary); }
.game-feedback { margin-top:18px; line-height:1.8; font-weight:600; }
.game-result { margin-top:18px; padding:18px; border-radius:12px; background:var(--color-bg); }
.game-result p { margin-top:8px; line-height:1.8; }
.game-result img { margin-top:16px; width:100%; height:auto; border-radius:10px; }
.game-guide p { margin-top:14px; font-size:.9rem; line-height:1.9; color:var(--color-text-muted); }
.game-other { display:inline-flex; min-height:44px; align-items:center; margin-top:18px; color:var(--color-primary); font-weight:600; }
.game-leaderboard { margin-top:24px; }
.game-leaderboard-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.game-table-scroll { overflow:auto; }
.game-leaderboard table { width:100%; border-collapse:collapse; min-width:360px; }
.game-leaderboard th,.game-leaderboard td { border-bottom:1px solid var(--color-border); text-align:left; padding:12px 8px; font-size:.9rem; }
@media(max-width:850px) { .game-layout { grid-template-columns:1fr; } .game-guide { display:grid; gap:8px; } .game-guide p { margin:0; } }
@media(max-width:520px) { .game-page { padding:0 12px; margin-top:18px; } .game-card { padding:18px; } .song-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .song-option { flex-direction:column; align-items:start; min-height:116px; } .song-option img { width:42px; height:42px; } .game-controls label { width:100%; } .game-controls select { flex:1; } .game-controls button { flex:1; } .game-answer-form>div { flex-wrap:wrap; } .game-answer-form button { width:100%; } }