/* Compact spacing for SpeakStep, with readable controls and large question headings. */
body[data-mode=linked] header{min-height:58px;padding:12px 24px}
body[data-mode=linked] main{padding:16px 24px 24px}
body[data-mode=linked] .intro{padding:0 0 6px}
body[data-mode=linked] .intro h1{margin:6px 0}
body[data-mode=linked] .micro-demo{margin:8px auto 12px;min-height:44px;padding:7px 16px}
body[data-mode=linked] .dashboard{margin-bottom:12px}
body[data-mode=linked] .dashboard>div{padding:9px 16px}
body[data-mode=linked] .setup.panel{padding:18px 22px}
body[data-mode=linked] .setup h2{margin:0 0 10px}
body[data-mode=linked] .setup #gameMode{margin:0 auto 14px}
body[data-mode=linked] .setup .chips{margin-bottom:12px;gap:8px}
body[data-mode=linked] .setup .actions{margin-top:12px;gap:8px}
body[data-mode=linked] .setup .note{margin:8px 0 0}
body[data-mode=linked] .how{margin:16px 0 10px}
body[data-mode=linked] .how h2{margin-bottom:8px}
body[data-mode=linked] .how-grid{gap:12px}
body[data-mode=linked] .how-grid p{margin:0 0 6px}
body[data-mode=linked] .game-selection{margin:10px 0}
body[data-mode=linked] .game-selection a{display:inline-block;padding:8px 20px;border:1px solid #d9cde9;border-radius:22px;background:#faf9fc;font-weight:600}
body[data-mode=linked] footer{padding:12px 24px 20px}
body[data-mode=linked] .game-toolbar{margin-bottom:10px}
body[data-mode=linked] .track{margin-bottom:12px}
body[data-mode=linked] .question.panel{padding:18px 22px}
body[data-mode=linked] .question h1{margin:10px 0}
body[data-mode=linked] .mic{display:flex;align-items:center;justify-content:center;width:72px;height:72px;padding:16px;margin:12px auto 6px;color:#fff}
body[data-mode=linked] .mic svg{display:block;flex-shrink:0}
body[data-mode=linked] #micStatus{margin:4px 0 8px}
body[data-mode=linked] .typed{margin-top:12px}
body[data-mode=linked] .question-actions{margin-top:10px;gap:8px}
body[data-mode=linked] #feedback:empty{min-height:0;padding:0;margin:0}
@media(max-width:600px){
body[data-mode=linked] header{padding:10px 14px;min-height:54px}
body[data-mode=linked] main{padding:12px 12px 20px}
body[data-mode=linked] .setup.panel,body[data-mode=linked] .question.panel{padding:14px}
body[data-mode=linked] .dashboard>div{padding:8px}
body[data-mode=linked] .setup #gameMode{margin-bottom:12px}
body[data-mode=linked] .how-grid{gap:4px}
body[data-mode=linked] footer{padding:10px 14px 16px}
}

/* Match numbered SpeakStep choices above Start. */
/* Show speaking and listening as two independent practice choices. */
body[data-mode=linked] .setup #gameMode{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;border:0;border-radius:0;background:transparent}
body[data-mode=linked] .setup #gameMode button{border:1px solid #d4c5e8;border-radius:14px;background:#fff;color:#62458d;min-height:48px;padding:10px 12px}
body[data-mode=linked] .setup #gameMode button.selected{border:2px solid #a17be2;background:#f0e8fb;color:#39235a;box-shadow:none}
@media(max-width:600px){body[data-mode=linked] .setup #gameMode{gap:8px}body[data-mode=linked] .setup #gameMode button{font-size:13px;padding:9px 6px}}


body[data-mode=linked] .setup .practice-choice-guide{font-size:18px;font-weight:750;line-height:1.5;color:#6538a2;background:#f1eafa;border-radius:8px;padding:6px 10px;margin:0 auto 8px;max-width:600px;text-align:center;word-break:keep-all}
body[data-mode=linked] .setup #gameMode{margin-bottom:20px;gap:8px}
body[data-mode=linked] .setup #gameMode button{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 10px 8px 34px;border-radius:12px;font-size:13px;line-height:1.3}
body[data-mode=linked] .setup .practice-number{position:absolute;left:7px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f1eafa;border:1px solid #d0b8eb;color:#8052c0;font-size:12px;font-weight:800}
body[data-mode=linked] .setup #gameMode .selected .practice-number{background:#9365d7;border-color:#9365d7;color:#fff}
@media(max-width:600px){body[data-mode=linked] .setup #gameMode button{padding-left:28px;padding-right:6px;font-size:12px}body[data-mode=linked] .setup .practice-number{left:5px;width:18px;height:18px;font-size:11px}}

body[data-mode=linked] .setup .practice-choice-guide{background:transparent}

body[data-mode=linked] .setup .practice-choice-guide{font-size:16px}
body[data-mode=linked] .setup #gameMode{width:calc(100% - 16px);max-width:560px;margin-left:auto;margin-right:auto}

body[data-mode=linked] #learningInfo:empty{display:none}
