/* The practice flow shares the onboarding palette, cards, and raised buttons. */
.practice-screen { --ink: #4b4b4b; --green: #429900; --muted: #737373; --paper: #fff; background: #fff; }
.practice-screen #app-shell { max-width: 480px; background: #fff; }
.practice-screen .daily-page { padding: max(24px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); }
.quiz-wordmark { color: var(--green); font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.7px; }
.practice-screen .daily-header-actions { gap: 8px; }
.practice-screen .header-login { color: var(--green); font-size: 14px; font-weight: 750; }
.practice-screen .icon-button { border: 2px solid var(--panel-border); border-radius: 14px; background: #fff; color: var(--muted); box-shadow: 0 2px 0 var(--panel-border); }
.practice-screen .streak-pill { padding: 8px; border-radius: 12px; background: #f1fbe8; color: var(--green); font-size: 12px; font-weight: 750; white-space: nowrap; }
.practice-screen .question-card { margin-top: 24px; padding: 16px 22px 20px; border: 2px solid var(--panel-border); border-bottom-width: 5px; border-radius: 18px; background: #fff; }
.practice-question-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.practice-screen .question-label { color: var(--muted); font-size: 13px; font-weight: 750; }
.practice-screen .question-dot { width: 7px; height: 7px; background: var(--action-green); }
.practice-alpaca { flex: none; width: 52px; height: 58px; }
.practice-alpaca .sign-in-alpaca { width: 52px; height: 58px; margin: 0; }
.practice-screen .question-card h2 { margin: 12px 0 18px; font-family: inherit; font-size: clamp(25px, 6.7vw, 30px); font-weight: 750; line-height: 1.4; letter-spacing: -.7px; overflow-wrap: anywhere; }
.practice-screen .translation-button, .practice-screen .question-translation summary { color: var(--green); font-size: 14px; font-weight: 700; text-underline-offset: 5px; }
.practice-screen .question-translation { color: var(--muted); font-size: 15px; line-height: 1.65; }
.practice-screen .question-translation p { margin-top: 14px; }
.practice-screen .language-help { margin-top: 26px; }
.practice-screen .answer-help-form label { margin-bottom: 12px; color: #5b5b5b; font-size: 15px; line-height: 1.65; font-weight: 600; }
.practice-screen .answer-help-form textarea { display: block; min-height: 112px; padding: 14px 16px; border: 2px solid var(--panel-border); border-radius: 16px; background: #fff; color: var(--ink); font-size: 16px; line-height: 1.6; }
.practice-screen .answer-help-form textarea::placeholder { color: #9a9a9a; opacity: 1; }
.practice-screen .primary-button, .practice-screen .secondary-button { min-height: 56px; padding: 14px 18px; border: 2px solid var(--panel-border); border-radius: 16px; font-size: 16px; font-weight: 750; transition: background-color .12s, transform .12s, box-shadow .12s; }
.practice-screen .primary-button { border-color: var(--action-green); background: var(--action-green); color: #fff; box-shadow: 0 4px 0 var(--action-green-shadow); }
.practice-screen .secondary-button { background: #fff; color: var(--green); box-shadow: 0 4px 0 var(--panel-border); }
.practice-screen .answer-help-form .primary-button { margin-top: 16px; }
.practice-screen .primary-button:active:not(:disabled), .practice-screen .secondary-button:active:not(:disabled) { transform: translateY(4px); border-color: var(--panel-border); background: var(--panel-border); color: #777; box-shadow: none; }
.practice-screen .primary-button:disabled, .practice-screen .secondary-button:disabled { opacity: 1; border-color: var(--panel-border); background: var(--panel-border); color: #777; box-shadow: none; }
.practice-screen :focus-visible { outline: 3px solid var(--action-green-shadow); outline-offset: 4px; }
.practice-screen .answer-help-result { margin-top: 26px; padding: 20px; border: 2px solid #d7efbc; border-radius: 18px; background: #f1fbe8; }
.practice-screen .answer-help-result .question-label { color: var(--green); }
.practice-screen .english-answer { margin: 12px 0; font-family: inherit; font-size: 24px; font-weight: 700; line-height: 1.45; letter-spacing: -.4px; }
.practice-screen .ipa-answer { margin-bottom: 0; color: #6b7d5c; font-size: 14px; }
.practice-screen .first-practice-hint { color: #5b5b5b; font-size: 15px; font-weight: 650; }
.practice-screen .record-translation-prompt, .practice-screen .recording-status { color: var(--muted); font-size: 13px; }
.practice-screen .recording-status[role=alert], .practice-screen .help-error { color: #bc3d3d; }
.practice-screen .record-button { width: 92px; height: 82px; border: 2px solid var(--action-green); outline: 0; border-radius: 22px; background: var(--action-green); color: #fff; box-shadow: 0 5px 0 var(--action-green-shadow); transition: transform .12s, box-shadow .12s; }
.practice-screen .record-button svg { width: 34px; height: 34px; }
.practice-screen .record-button:active { transform: translateY(5px); box-shadow: none; }
.practice-screen .record-button.is-recording { border-color: #ff4b4b; background: #ff4b4b; box-shadow: 0 5px 0 #d93636; }
.practice-screen .play-recording-button { border: 2px solid var(--panel-border); background: #fff; }
.practice-screen .playback-track { stroke: var(--panel-border); }
.practice-screen .playback-fill { stroke: var(--action-green); }
.practice-screen .practice-saved, .practice-screen .flash { background: #f1fbe8; color: var(--green); }
.practice-screen .completion-celebration { padding-top: 20px; }
.practice-screen .celebration-hero { margin: auto 0 20px; }
.practice-screen .completion-celebration .alpaca-scene { width: 190px; height: 140px; margin: 0 auto 8px; }
.practice-screen .alpaca-scene::before { inset: 9px 24px 4px; background: #f1fbe8; }
.practice-screen .completion-celebration .celebration-alpaca { width: 130px; height: 143px; transform: rotate(-5deg); }
.practice-screen .celebration-alpaca .sign-in-alpaca { width: 100%; height: 100%; margin: 0; }
.practice-screen .spark-one { top: 25px; left: 11px; color: #58cc02; font-size: 20px; }
.practice-screen .spark-two { top: 15px; right: 4px; color: #ffca28; font-size: 30px; }
.practice-screen .spark-three { bottom: 15px; left: 19px; color: #1cb0f6; font-size: 13px; }
.quiz-complete-check { position: absolute; right: 24px; bottom: 7px; display: grid; place-items: center; width: 34px; height: 34px; border: 4px solid #fff; border-radius: 50%; background: var(--action-green); color: #fff; font-size: 21px; font-weight: 800; box-shadow: 0 2px 0 #d7efbc; }
.quiz-complete-label { margin: 0 0 6px; color: var(--green); font-size: 12px; line-height: 1.5; font-weight: 750; }
.practice-screen .completion-celebration h1 { color: var(--ink); font-size: 34px; line-height: 1.2; font-weight: 850; letter-spacing: -1.2px; }
.practice-screen .completion-celebration .completion-praise { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.practice-screen .completion-praise, .practice-screen .share-incentive, .practice-screen .guest-save p { color: var(--muted); }
.practice-screen .completion-streak { padding: 12px 16px 14px; border: 2px solid var(--panel-border); border-bottom-width: 5px; border-radius: 18px; background: #fff; }
.completion-streak-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.practice-screen .completion-label, .practice-screen .completion-count, .practice-screen .completion-day { color: var(--muted); }
.practice-screen .completion-label { gap: 6px; font-size: 12px; font-weight: 650; }
.completion-label svg { width: 21px; height: 24px; color: #ffad28; }
.practice-screen .completion-label > span, .practice-screen .completion-dot.is-done { background: var(--action-green); color: #fff; }
.practice-screen .completion-count { margin: 0; gap: 4px; font-size: 12px; white-space: nowrap; }
.practice-screen .completion-count strong { color: var(--green); font-size: 28px; line-height: 1.2; letter-spacing: -.7px; }
.practice-screen .completion-week { margin-top: 12px; padding-top: 12px; border-top-color: var(--panel-border); }
.practice-screen .completion-day { gap: 8px; }
.practice-screen .completion-dot { width: 28px; height: 28px; background: #f1f1f1; color: #afafaf; }
.practice-screen .completion-day.is-today .completion-dot { outline-color: var(--action-green); }
.practice-screen .completion-sentences { margin: 0 0 16px; padding: 14px 18px 16px; border: 2px solid #d7efbc; border-radius: 18px; background: #f1fbe8; }
.practice-screen .completion-sentences h2 { margin-bottom: 8px; color: var(--green); font-size: 12px; font-weight: 700; }
.practice-screen .completion-sentences p { color: var(--ink); font-family: inherit; font-size: 21px; line-height: 1.45; font-weight: 750; letter-spacing: -.3px; }
.practice-screen .celebration-actions { padding-top: 18px; }
.practice-screen .completion-celebration .next-practice { margin-top: 16px; }
.practice-screen .completion-celebration .next-practice-heading { color: var(--muted); }
.practice-screen .completion-celebration .next-practice-clock { color: #8d8d8d; }
.practice-screen .share-card-dialog { background: #fff; border-radius: 18px; }
.practice-screen .share-card-close { background: #f1f1f1; color: var(--muted); }
.practice-screen .share-card-header h2 { color: var(--ink); }
@media (max-width: 350px) { .quiz-wordmark { font-size: 18px; } .practice-screen .daily-page { padding-inline: 20px; } .practice-screen .question-card { padding-inline: 18px; } .practice-screen .completion-label { font-size: 11px; } }
@media (max-height: 750px) { .practice-screen .completion-celebration { padding-top: 16px; } .practice-screen .completion-celebration .alpaca-scene { width: 160px; height: 110px; } .practice-screen .completion-celebration .celebration-alpaca { width: 100px; height: 110px; } .practice-screen .completion-celebration h1 { font-size: 30px; } .practice-screen .celebration-hero { margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .practice-screen button, .practice-screen a { transition: none; } }