/* Compact spacing for SpeakStep, with readable controls and large question headings. */
body[data-mode=public] header{min-height:58px;padding:12px 24px}
body[data-mode=public] main{padding:16px 24px 24px}
body[data-mode=public] .intro{padding:0 0 6px}
body[data-mode=public] .intro h1{margin:6px 0}
body[data-mode=public] .micro-demo{margin:8px auto 12px;min-height:44px;padding:7px 16px}
body[data-mode=public] .dashboard{margin-bottom:12px}
body[data-mode=public] .dashboard>div{padding:9px 16px}
body[data-mode=public] .setup.panel{padding:18px 22px}
body[data-mode=public] .setup h2{margin:0 0 10px}
body[data-mode=public] .setup #gameMode{margin:0 auto 14px}
body[data-mode=public] .setup .chips{margin-bottom:12px;gap:8px}
body[data-mode=public] .setup .actions{margin-top:12px;gap:8px}
body[data-mode=public] .setup .note{margin:8px 0 0}
body[data-mode=public] .how{margin:16px 0 10px}
body[data-mode=public] .how h2{margin-bottom:8px}
body[data-mode=public] .how-grid{gap:12px}
body[data-mode=public] .how-grid p{margin:0 0 6px}
body[data-mode=public] .game-selection{margin:10px 0}
body[data-mode=public] .game-selection a{display:inline-block;padding:8px 20px;border:1px solid #d9cde9;border-radius:22px;background:#faf9fc;font-weight:600}
body[data-mode=public] footer{padding:12px 24px 20px}
body[data-mode=public] .game-toolbar{margin-bottom:10px}
body[data-mode=public] .track{margin-bottom:12px}
body[data-mode=public] .question.panel{padding:18px 22px}
body[data-mode=public] .question .tag{font-size:36px;line-height:1.25;letter-spacing:0}
body[data-mode=public] .question .prompt{font-size:39px;line-height:1.3;margin:10px 0;overflow-wrap:anywhere}
body[data-mode=public] .question h1{margin:10px 0}
body[data-mode=public] .mic{display:flex;align-items:center;justify-content:center;width:72px;height:72px;padding:16px;margin:12px auto 6px;color:#fff}
body[data-mode=public] .mic svg{display:block;flex-shrink:0}
body[data-mode=public] #micStatus{margin:4px 0 8px}
body[data-mode=public] .typed{margin-top:12px}
body[data-mode=public] .question-actions{margin-top:10px;gap:8px}
body[data-mode=public] #feedback:empty{min-height:0;padding:0;margin:0}
@media(max-width:600px){
body[data-mode=public] header{padding:10px 14px;min-height:54px}
body[data-mode=public] main{padding:12px 12px 20px}
body[data-mode=public] .setup.panel,body[data-mode=public] .question.panel{padding:14px}
body[data-mode=public] .dashboard>div{padding:8px}
body[data-mode=public] .setup #gameMode{margin-bottom:12px}
body[data-mode=public] .how-grid{gap:4px}
body[data-mode=public] .question .prompt{font-size:36px}
body[data-mode=public] footer{padding:10px 14px 16px}
}

/* Show speaking and listening as two independent practice choices. */
body[data-mode=public] .setup #gameMode{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;border:0;border-radius:0;background:transparent}
body[data-mode=public] .setup #gameMode button{border:1px solid #d4c5e8;border-radius:14px;background:#fff;color:#62458d;min-height:48px;padding:10px 12px}
body[data-mode=public] .setup #gameMode button.selected{border:2px solid #a17be2;background:#f0e8fb;color:#39235a;box-shadow:none}
@media(max-width:600px){body[data-mode=public] .setup #gameMode{gap:8px}body[data-mode=public] .setup #gameMode button{font-size:13px;padding:9px 6px}}

body[data-mode=public] .setup #difficultyWrap{border-top:0;padding-top:0;margin:0 auto 16px}
body[data-mode=public] .setup #difficultyWrap h2{font-size:20px;line-height:1.5;margin:0 0 10px}

body[data-mode=public] .setup #difficultyWrap{margin-bottom:28px}
body[data-mode=public] .setup #topics{margin-bottom:28px}
body[data-mode=public] .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=public] .setup #gameMode{margin-bottom:20px;gap:8px}
body[data-mode=public] .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=public] .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=public] .setup #gameMode .selected .practice-number{background:#9365d7;border-color:#9365d7;color:#fff}
@media(max-width:600px){body[data-mode=public] .setup #gameMode button{padding-left:28px;padding-right:6px;font-size:12px}body[data-mode=public] .setup .practice-number{left:5px;width:18px;height:18px;font-size:11px}}

body[data-mode=public] .setup .practice-choice-guide{background:transparent}

body[data-mode=public] .setup .practice-choice-guide{font-size:16px}
body[data-mode=public] .setup #gameMode{width:calc(100% - 16px);max-width:560px;margin-left:auto;margin-right:auto}
body[data-mode=public] .setup #learningInfo{white-space:pre-line;text-align:center;line-height:1.7;margin:8px auto 0;max-width:600px}

/* Practice screen follows the supplied soft lavender card design. */
body[data-mode=public] #play{max-width:650px;margin:0 auto;padding:20px 24px 24px;border:1px solid #e7dff0;border-radius:26px;background:#f5f1fc}
body[data-mode=public] #play .question.panel{max-width:none;padding:16px 10px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
body[data-mode=public] #play .question .tag{font-size:18px;line-height:1.5;letter-spacing:0}
body[data-mode=public] #play .question .prompt,body[data-mode=public] #play .question #meaning{font-size:24px;line-height:1.45;font-weight:750;letter-spacing:-.5px}
body[data-mode=public] #play .question .prompt{margin:8px 0 14px}
body[data-mode=public] #play #meaning{margin:0 auto 12px;max-width:460px;min-height:72px;display:flex;align-items:center;justify-content:center;padding:18px 20px;border:1px solid #fff;border-radius:26px;background:linear-gradient(140deg,#fbf9fe,#eee9f8);box-shadow:0 7px 18px #78639312;word-break:keep-all}
body[data-mode=public] #play .typed{margin:12px 0 0;text-align:center}
body[data-mode=public] #play .typed label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body[data-mode=public] #play .answer-row{margin:0;display:block}
body[data-mode=public] #play #answer{width:100%;min-height:48px;text-align:center;border:1px solid #cfc1e5;border-radius:14px;background:#faf8fe;font-size:17px;padding:10px 14px}
body[data-mode=public] #play .speech-comparison-note{font-size:12px;line-height:1.5;color:#87778e;text-align:center;margin:12px 0 0}
body[data-mode=public] #play #micStatus{font-size:12px;color:#7b6594;margin:6px 0;min-height:0}
body[data-mode=public] #play #micStatus:empty{display:none}
body[data-mode=public] #play .practice-hint-actions{display:flex;justify-content:center;margin:20px 0 0}
body[data-mode=public] #play #hintButton{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e0d5ef;border-radius:24px;background:linear-gradient(145deg,#fbf8ff,#f4effb);box-shadow:0 5px 12px #77618616;color:#6a30c0;min-height:44px;padding:8px 18px;font-size:14px}
body[data-mode=public] #play #hintButton:before{content:'';display:block;width:16px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23703bc0' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 18h6M9 21h6M8 14a7 7 0 1 1 8 0c-1 1-1 2-1 3H9c0-1 0-2-1-3Z'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-mode=public] #play .practice-tools{display:flex;align-items:center;justify-content:center;gap:14px;margin:80px 0 28px}
body[data-mode=public] #play .practice-circle,body[data-mode=public] #play #microphone,body[data-mode=public] #play #replay{width:90px;height:90px;min-height:90px;margin:0;padding:12px;border:2px solid #c995ff;border-radius:50%;background:linear-gradient(145deg,#a268fc,#7733e9);box-shadow:inset 0 1px 3px #ffffff60,0 6px 14px #78549624;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:750;line-height:1.2}
body[data-mode=public] #play #microphone svg{width:30px;height:30px}
body[data-mode=public] #play #submit{width:100%;min-height:56px;border:1px solid #cdb3f1;border-radius:20px;background:linear-gradient(135deg,#9b67ee,#8545dd);color:#fff;font-size:16px;font-weight:750;box-shadow:0 5px 12px #77618616}
body[data-mode=public] #play #submit:disabled{background:linear-gradient(135deg,#d4b9f8,#b990e9);border-color:#dbc4f4;color:#fff;opacity:1}
body[data-mode=public] #play .question-actions{justify-content:center;margin-top:12px}
body[data-mode=public] #play>.note{display:none}
@media(max-width:600px){body[data-mode=public] #play{padding:16px 14px 18px;border-radius:22px}body[data-mode=public] #play .question.panel{padding:12px 0 0}body[data-mode=public] #play .question .prompt,body[data-mode=public] #play .question #meaning{font-size:22px}body[data-mode=public] #play .practice-tools{margin-top:52px;margin-bottom:24px}body[data-mode=public] #play .practice-circle,body[data-mode=public] #play #microphone,body[data-mode=public] #play #replay{width:84px;height:84px;min-height:84px}}

body[data-mode=public] #play .question .prompt{color:#282136}
body[data-mode=public] #play #microphone.listening{border-color:#e4c7ff;box-shadow:0 0 0 5px #b894ef40,0 6px 14px #78549624}