/* Two clear practice paths and a quiet, cumulative growth reward. */
.practice-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 30px}
.practice-tab{display:flex;align-items:center;gap:16px;min-height:108px;padding:20px;text-align:left;border:2px solid #e0e7dd;border-radius:24px;background:#fffef9;color:#627a70}
.practice-tab.selected{border-color:#90b2bd;background:#e6f0f3;box-shadow:0 4px 0 #d5e3e6}
.practice-tab[data-mode="echo"].selected{border-color:#cfaa7b;background:#f9ecd9;box-shadow:0 4px 0 #ecddc7}
.practice-tab-icon{display:grid;place-items:center;width:55px;height:55px;border-radius:18px;background:#ffffff9c;flex-shrink:0}.practice-tab-icon .icon{width:33px;height:33px}
.practice-tab>span:nth-child(2){flex:1}.practice-tab strong{display:block;font-size:22px;color:#34535d}.practice-tab small{display:block;font-size:12px;margin-top:5px}.practice-tab>.icon{width:23px;height:23px;flex-shrink:0}
.spoken-done{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-width:205px;min-height:68px;padding:14px 24px;border:2px solid #bacba7;border-radius:24px;background:#e9f0de;box-shadow:0 5px 0 #d4dfc7;color:#58724b;font-size:18px;font-weight:600}
.spoken-done>.icon{width:32px;height:32px}.spoken-done:disabled{opacity:.45;cursor:default}.spoken-done[hidden]{display:none}
.oral-game[data-mode="echo"] .game-feedback{min-height:12px;margin:14px auto 10px}.oral-game[data-mode="echo"] .quiet-encouragement{display:none}
.overview-card.is-playing{border-color:#79a3ad;background:#edf5f6;box-shadow:0 4px 0 #c0d8dc}.overview-card.is-playing .overview-speaker{background:#cfe7eb;color:#365d68}
.star-counter small{font-size:10px;line-height:1;color:#876638;white-space:nowrap}
.rank-panel{display:flex;align-items:center;gap:25px;padding:25px 29px;margin:26px 0 34px;background:#f4ead6;border:1px solid #ebdfc4;border-radius:28px}
.rank-emblem{position:relative;display:grid;place-items:center;width:94px;height:94px;flex-shrink:0;border-radius:31px;background:#fffbeb;border:2px solid #e2cd99;box-shadow:0 5px 0 #e4d5b0;color:#b39352}
.rank-emblem>.icon{width:46px;height:46px;stroke-width:1.5}.rank-emblem>span{position:absolute;bottom:-9px;padding:4px 12px;border-radius:14px;background:#ae8850;color:#fffaf0;font-size:12px;font-weight:700}
.rank-copy{flex:1;min-width:0}.rank-copy .eyebrow{font-size:10px;letter-spacing:2px;margin:0 0 6px}.rank-copy h2{font-size:25px;color:#68583c;margin:0 0 7px}.rank-copy p:not(.eyebrow){font-size:13px;line-height:1.6;color:#89765b;margin:0 0 13px}
.rank-progress{display:block;width:100%;max-width:420px;height:8px;border:0;border-radius:9px;overflow:hidden;background:#e7dbbd;accent-color:#bea064}.rank-progress::-webkit-progress-bar{background:#e7dbbd;border-radius:9px}.rank-progress::-webkit-progress-value{background:#bea064;border-radius:9px}.rank-progress::-moz-progress-bar{background:#bea064;border-radius:9px}
.rank-link{color:#987d48;flex-shrink:0}.rank-ladder{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:0 0 19px}
.rank-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;padding:18px 5px;border:1px solid #e2e5dc;border-radius:21px;background:#f0f1eb;color:#8d9b8b;text-align:center}.rank-step.reached{background:#fff9e7;border-color:#ead5a1;color:#8f7640}.rank-step.current{border:2px solid #bea166;box-shadow:0 4px 0 #eadfbe}
.rank-step-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:#ffffff80}.rank-step-icon>.icon{width:26px;height:26px}.rank-step small{font-size:12px}.rank-step strong{font-size:12px;line-height:1.5}.rank-step>span:last-child{font-size:10px}
.rank-note{font-size:12px;color:#7f8878;line-height:1.9;margin:0 0 35px}.rank-up{display:flex;align-items:center;justify-content:center;gap:8px;margin:17px auto 3px;color:#a88339;font-size:16px;font-weight:700}.rank-up .icon{width:26px;height:26px}
.badge-practice{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}.badge-practice>span{display:flex;gap:4px;align-items:center;font-size:10px;color:#afb4a8}.badge-practice>span.done{color:#628366}.badge-practice .icon{width:16px;height:16px}
.practice-tab:focus-visible,.spoken-done:focus-visible{outline:3px solid #537d87;outline-offset:5px}
@media(max-width:900px){.rank-ladder{grid-template-columns:repeat(4,minmax(0,1fr))}.practice-tab{gap:12px;padding:16px}.practice-tab strong{font-size:20px}.practice-tab-icon{width:46px;height:46px}}
@media(max-width:640px){.practice-tabs{gap:11px;margin-bottom:25px}.practice-tab{position:relative;align-items:flex-start;flex-direction:column;padding:16px 13px;gap:12px;min-height:157px;border-radius:22px}.practice-tab>.icon{position:absolute;right:12px;top:14px;width:19px;height:19px}.practice-tab strong{font-size:20px}.practice-tab small{font-size:10px;line-height:1.5}.rank-panel{padding:21px 15px;gap:16px;border-radius:24px;margin:23px 0 28px}.rank-emblem{width:65px;height:76px;border-radius:23px}.rank-emblem>.icon{width:34px;height:34px}.rank-copy h2{font-size:21px}.rank-copy .eyebrow{font-size:8px;letter-spacing:1.2px}.rank-copy p:not(.eyebrow){font-size:11px;margin-bottom:10px}.rank-link{display:none}.rank-ladder{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rank-step{border-radius:18px;padding:15px 5px}.rank-step:last-child{grid-column:2}.rank-note{font-size:11px}.star-counter{gap:5px}.star-counter small{font-size:9px}}