/* Conversational scenarios. Kept separate from exercise styling so normal practice is unchanged. */
.scenario-card { display: grid; grid-template-columns: auto 1fr; gap: .75rem; width: 100%; max-width: 31rem; margin: 0 auto; padding: 1rem; text-align: left; background: #fff; border: 2px solid #e8ddd3; border-radius: 16px; color: #2d3436; font: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(45,52,54,.06); }
.scenario-card:hover, .scenario-card:focus-visible { border-color: #6c5ce7; box-shadow: 0 4px 16px rgba(108,92,231,.18); outline: none; }
.scenario-card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: #f2efff; font-size: 1.6rem; }
.scenario-card strong, .scenario-card small { display: block; }
.scenario-card small { margin-top: .2rem; color: #746d68; line-height: 1.35; }
.scenario-page { width: min(100%, 42rem); margin: 0 auto; padding: 1rem 0 2rem; }
.scenario-page[hidden] { display: none; }
.scenario-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .35rem .15rem .8rem; }
.scenario-kicker { color: #6c5ce7; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.scenario-header h2 { margin: .15rem 0 0; font-size: 1.5rem; }
.scenario-round { flex: 0 0 auto; padding: .4rem .65rem; border-radius: 999px; background: #f2efff; color: #5848c2; font-size: .82rem; font-weight: 800; }
.scenario-goal { margin-bottom: .75rem; padding: .7rem .85rem; border-left: 3px solid #6c5ce7; border-radius: 0 10px 10px 0; background: #f8f7ff; color: #4c456e; font-size: .92rem; line-height: 1.4; }
.scenario-goal strong { color: #2d3436; }
.scenario-budget { margin: -.45rem 0 .7rem; color: #746d68; font-size: .78rem; font-weight: 700; }
.scenario-history { display: grid; gap: .65rem; min-height: 10rem; max-height: 49vh; overflow: auto; padding: .3rem .1rem .7rem; scrollbar-gutter: stable; }
.scenario-message { max-width: 86%; padding: .7rem .8rem; border-radius: 14px; line-height: 1.42; animation: scenarioMessageIn .2s ease-out; }
.scenario-message-npc { justify-self: start; border-bottom-left-radius: 3px; background: #fff; box-shadow: 0 2px 8px rgba(45,52,54,.08); }
.scenario-message-user { justify-self: end; border-bottom-right-radius: 3px; background: #6c5ce7; color: #fff; }
.scenario-speaker { display: block; margin-bottom: .2rem; font-size: .72rem; font-weight: 800; opacity: .74; }
.scenario-intro { padding: 1.8rem 1rem; border: 2px dashed #d9d2f5; border-radius: 18px; background: #fbfaff; text-align: center; }
.scenario-intro-icon { display: block; font-size: 2.1rem; }
.scenario-intro p { max-width: 27rem; margin: .65rem auto 1rem; color: #625b56; line-height: 1.45; }
.scenario-intro .scenario-speaking-only { margin-top: -.35rem; color: #5848c2; font-weight: 700; }
.scenario-start, .scenario-action, .scenario-hint, .scenario-replay { border: 0; border-radius: 10px; font: inherit; font-weight: 800; cursor: pointer; }
.scenario-start:disabled, .scenario-action:disabled, .scenario-hint:disabled, .scenario-replay:disabled { cursor: wait; opacity: .58; }
.scenario-start, .scenario-advance { padding: .68rem 1.1rem; background: #6c5ce7; color: #fff; box-shadow: 0 2px 8px rgba(108,92,231,.25); }
.scenario-resume-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.scenario-resume-actions[hidden] { display: none; }
.scenario-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .2rem; }
.scenario-replay, .scenario-hint, .scenario-retry { padding: .52rem .7rem; color: #5f5651; background: #fff; border: 1px solid #e8ddd3; }
.scenario-replay { width: 2.75rem; min-height: 2.75rem; padding: .52rem; }
.scenario-replay.needs-tap { border-color: #d68132; box-shadow: 0 0 0 3px rgba(214,129,50,.14); }
.scenario-audio-status { width: 100%; margin: .1rem 0 0; color: #8a4e17; font-size: .82rem; font-weight: 700; }
.scenario-hint-text { width: 100%; margin: .1rem 0 0; padding: .65rem .75rem; border-radius: 10px; background: #fff7dc; color: #6d5411; font-size: .92rem; line-height: 1.4; }
.scenario-result { margin-top: .8rem; padding: .8rem; border-radius: 12px; background: #f7f7f7; line-height: 1.4; }
.scenario-result p { margin: 0; }
.scenario-result p + p { margin-top: .45rem; }
.scenario-result-note { opacity: .9; }
.scenario-result-example { font-weight: 700; }
.scenario-result.is-correct { background: #eaf8f0; color: #17683d; }
.scenario-result.is-incorrect { background: #fff1ee; color: #9d3f2d; }
.scenario-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: .75rem; }
.scenario-action { padding: .58rem .85rem; }
@keyframes scenarioMessageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) { .scenario-page { padding: .6rem 0 1.25rem; } .scenario-history { max-height: 44vh; } .scenario-message { max-width: 93%; } .scenario-header h2 { font-size: 1.3rem; } }
.practice-mode-tabs { grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr)); max-width: 34rem; }