/* A compact, playful adult learning lobby. */
:root{color-scheme:light;--bg:#f6f5ff;--panel:#fff;--text:#29263f;--muted:#69677d;--line:#e2dff0;--green:#6854d9;--on:#fff;--soft:#eeeaff;--red:#c14360;--accent:#ed9d30}
body{background:radial-gradient(ellipse at top left,#e5f6fc 0,transparent 48%),radial-gradient(ellipse at top right,#f3e7ff 0,transparent 45%),var(--bg)}.app{max-width:1040px}header{border-color:#dedbea}.brand{letter-spacing:-.5px}.brand span{letter-spacing:0}nav button.active{background:#e7e1ff;color:#5943c4}.today-heading h1{font-weight:750}.today-heading h1 span{color:#efaa31}.today-heading .eyebrow{font-size:10px;letter-spacing:1.2px;font-weight:700}.today-heading label{font-size:12px}.primary{background:linear-gradient(120deg,#7159e6,#536dd6);border-color:transparent;box-shadow:0 4px 0 #49409633}.primary:hover{background:linear-gradient(120deg,#8065f0,#6479e3);transform:translateY(-1px)}.primary:active{transform:translateY(1px);box-shadow:0 1px 0 #49409633}
.scene-lobby{background:var(--panel);padding:16px 18px;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 30px #50417707}.lobby-filters{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:12px}.lobby-filters label{font-size:12px}.lobby-filters input,.lobby-filters select{min-height:36px;padding:6px 10px;font-size:13px}.scene-section-heading{display:flex;justify-content:space-between;align-items:center;margin:14px 0 9px}.scene-section-heading h2{font-size:15px}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.scene-card{position:relative;min-height:124px;padding:12px 13px;text-align:left;border-radius:13px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:2px solid transparent;background:var(--card-bg,#f0edff);box-shadow:none;transition:transform .15s,border-color .15s}.scene-card.violet{--card-bg:#f0eaff}.scene-card.blue{--card-bg:#e7f3ff}.scene-card.orange{--card-bg:#fff0dd}.scene-card.teal{--card-bg:#e1f6ee}.scene-card.pink{--card-bg:#ffeaf1}.scene-card:hover{background:var(--card-bg);transform:translateY(-2px)}.scene-card[aria-pressed=true]{border-color:#7059d9;box-shadow:0 0 0 2px #7059d915}.scene-card[aria-pressed=true]:after{content:'✓';position:absolute;right:10px;top:10px;border-radius:50%;width:20px;height:20px;background:#7059d9;color:#fff;text-align:center;font-size:13px}.scene-icon{font-size:24px;line-height:1.1}.scene-card strong{font-size:15px;font-weight:700}.scene-description{font-size:11px;color:#696478;line-height:1.4}.scene-meta{font-size:11px;font-weight:650;color:#504965}.scene-usage{position:absolute;right:10px;bottom:10px;font-size:10px;color:#706781}#difficulty-note{margin-top:8px;font-size:11px}.launch-options{display:flex;align-items:end;justify-content:center;gap:12px;margin-top:12px}.launch-options label{width:125px;font-size:12px}.launch-options select{min-height:35px;padding:5px 9px;font-size:13px}.launch-options .pack-info{margin:0 0 7px;font-size:12px}.launch-action{text-align:center;margin-top:12px}#start-btn{min-width:210px;font-size:16px;font-weight:700;border-radius:12px}.launch-action p{font-size:11px;margin-top:6px}.scene-lobby .secondary-actions{padding-top:7px;margin-top:10px}.today-overview{margin:10px 0;font-size:12px}.rules summary,.sources summary{font-size:12px}.scene-lobby .actions{justify-content:center}#setup .sources{display:none}
.exit-button{margin-left:auto;border-color:#dacff0;color:#79628c;font-size:12px;min-height:34px}.combo-status{text-align:center;font-size:13px;color:#8e5a20;font-weight:650;margin:8px 0}.progress{height:7px;background:#e8e4fa}.progress span{background:linear-gradient(90deg,#a48cf9,#6dbfca);border-radius:6px}.word.good input{border-color:#38a782}.word.bad input{border-color:#e27c80}.step.done{background:#dff4e9;color:#27855e}.audio-controls{border-radius:16px;background:#ffffffb3}.effect-volume{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:12px}.effect-volume input{width:90px;accent-color:#7862db}#practice[data-state=success] .correct-answer{animation:success-bounce .35s ease-out;color:#388d75}#practice[data-state=retry] .feedback{color:#b26442}.ended-card{text-align:center;max-width:640px;margin:30px auto;padding:32px}.end-icon{font-size:38px}.ended-card p{margin-top:15px}dialog{border:1px solid var(--line);border-radius:20px;max-width:500px;width:calc(100% - 32px);color:var(--text);background:#fff;padding:24px;box-shadow:0 15px 80px #25213f40}dialog::backdrop{background:#24223c66;backdrop-filter:blur(3px)}dialog p{margin:12px 0;font-size:14px;color:var(--muted)}#exit-error{color:var(--red)}@keyframes success-bounce{0%{transform:scale(.96);opacity:.5}70%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
@media(max-width:700px){.lobby-filters{grid-template-columns:1fr 1fr;gap:8px}.lobby-filters label:first-child{grid-column:1/-1}.scene-card{padding:10px;min-height:118px}.scene-card strong{font-size:14px}.scene-description{display:none}.scene-usage{position:static}.launch-options{flex-wrap:wrap;gap:8px}.launch-options .pack-info{width:100%;text-align:center;margin:0}.scene-lobby{padding:12px}.scene-section-heading{gap:5px}.scene-section-heading h2{font-size:14px}.scene-grid{gap:7px}.today-heading{flex-direction:row;align-items:center}.today-heading label{width:120px}.today-heading h1{font-size:22px}.today-heading .eyebrow{font-size:8px}.practice-top>div{flex-basis:100%}.exit-button{min-height:34px}}
@media(max-width:360px){.today-heading{gap:8px}.today-heading label{width:105px}.scene-icon{font-size:21px}.scene-card{padding:8px 6px}.scene-card strong{font-size:12px}.scene-meta{font-size:10px}.scene-card[aria-pressed=true]:after{right:4px;top:4px;width:16px;height:16px;font-size:11px}.launch-options label{width:110px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scene-card:hover,.primary:hover,.primary:active{transform:none}}

@media(min-width:701px){header{padding:10px 0}.view{padding-top:12px}.scene-card{min-height:108px}.launch-options,.launch-action{margin-top:8px}.scene-lobby{padding:12px 16px}footer{padding:9px 0;margin-top:10px}}

@media(min-width:701px){footer{padding:6px 0}}