:root {
  color-scheme: dark;
  --ink: #f8fafc;
  --muted: #9fb0c8;
  --panel: #172237;
  --panel-soft: #202f49;
  --line: #324463;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --green: #34d399;
  --red: #fb7185;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(34, 211, 238, .15), transparent 32rem),
    radial-gradient(circle at 90% 15%, rgba(139, 92, 246, .16), transparent 30rem),
    #0b1220;
}

button { font: inherit; }
button > .fa-solid { margin-right: .35em; }
.stats .fa-star { color: #fde68a; }
.stats .fa-circle-check { color: var(--green); }
.stats .fa-heart { color: var(--red); }
.back-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--panel);
  cursor: pointer;
}
.app-shell { width: min(100%, 1080px); min-height: 100dvh; margin: auto; padding: max(18px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom)); }
.topbar, .mission-head, footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar { padding-bottom: 20px; border-bottom: 1px solid rgba(159, 176, 200, .2); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border-radius: 14px; color: #07111f; font-weight: 900; background: linear-gradient(135deg, var(--cyan), #a7f3d0); box-shadow: 0 10px 28px rgba(34, 211, 238, .22); }
.brand strong, .brand small { display: block; }
.brand small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.stats { display: flex; gap: 9px; }
.stats span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(23, 34, 55, .8); font-size: .82rem; }
.profile-button { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(23, 34, 55, .9); cursor: pointer; }
.profile-button i, .profile-card i, .avatar-options i { display: grid; place-items: center; width: 30px; aspect-ratio: 1; border-radius: 50%; color: #07111f; font-size: .62rem; font-style: normal; font-weight: 950; background: linear-gradient(135deg, var(--cyan), #a7f3d0); }
.profile-button b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-head { padding: 26px 0 18px; }
.profile-view { max-width: 850px; margin: auto; padding: 34px 0 10px; }
.profile-heading { margin-bottom: 24px; text-align: center; }
.profile-heading p { color: var(--muted); }
.profile-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.profile-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-align: left; background: var(--panel); cursor: pointer; }
.profile-card.active { border-color: var(--green); }
.profile-card i { width: 42px; grid-row: 1 / span 2; }
.profile-card b, .profile-card small { display: block; }
.profile-card small { color: var(--muted); }
.profile-form { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: rgba(23, 34, 55, .96); }
.profile-form h2 { margin-top: 0; }
.profile-form > label, .profile-form legend { display: block; margin-bottom: 8px; color: var(--muted); font-size: .8rem; font-weight: 750; }
.profile-form > input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: #101b2d; }
.profile-form > input:focus { border-color: var(--cyan); }
.profile-form fieldset { margin: 20px 0 0; padding: 0; border: 0; }
.avatar-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.avatar-options button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--panel-soft); cursor: pointer; }
.avatar-options button.selected { border-color: var(--cyan); background: rgba(34, 211, 238, .1); }
.route-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.route-options label { position: relative; cursor: pointer; }
.route-options input { position: absolute; opacity: 0; }
.route-options span { display: block; min-height: 82px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.route-options b, .route-options small { display: block; }
.route-options small { margin-top: 5px; color: var(--muted); }
.route-options input:checked + span { border-color: var(--violet); background: rgba(139, 92, 246, .13); }
.profile-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.profile-actions .primary-button { margin: 0; }
.secondary-button { padding: 11px 16px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--panel-soft); cursor: pointer; }
.map-view { padding: 34px 0 10px; }
.map-heading { max-width: 650px; margin-bottom: 28px; }
.map-heading p { margin: 0; color: var(--muted); }
.quest-map { position: relative; display: grid; gap: 18px; max-width: 850px; margin: 0 auto; }
.quest-map::before { content: ""; position: absolute; z-index: -1; top: 55px; bottom: 55px; left: 50%; width: 3px; background: linear-gradient(var(--cyan), var(--violet), #334155); transform: translateX(-50%); }
.quest-node { position: relative; display: grid; grid-template-columns: 54px 90px 1fr auto; align-items: center; gap: 17px; min-height: 142px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(23, 34, 55, .96); box-shadow: 0 18px 45px rgba(0, 0, 0, .2); }
.quest-node:nth-child(even) { margin-left: 9%; }
.quest-node:nth-child(odd) { margin-right: 9%; }
.quest-node.locked { opacity: .58; filter: saturate(.45); }
.quest-node.completed { border-color: rgba(52, 211, 153, .65); }
.quest-order { display: grid; place-items: center; width: 45px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; color: var(--cyan); font-weight: 900; background: #0c1628; }
.quest-icon { position: relative; display: grid; place-items: center; width: 82px; height: 82px; overflow: visible; border-radius: 21px; color: #07111f; font-size: .68rem; font-weight: 950; letter-spacing: .08em; background: linear-gradient(135deg, #67e8f9, #a7f3d0); }
.quest-icon img { width: 92%; height: 92%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 5px rgba(7, 17, 31, .25)); }
.quest-node.locked .quest-icon img { opacity: .48; filter: grayscale(.7) drop-shadow(0 4px 4px rgba(7, 17, 31, .2)); }
.quest-lock { position: absolute; right: -5px; bottom: -5px; padding: 4px 5px; border: 2px solid #52627a; border-radius: 7px; color: #cbd5e1; font-size: .42rem; letter-spacing: .04em; background: #111c2e; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.quest-node:nth-child(2) .quest-icon { background: linear-gradient(135deg, #c4b5fd, #93c5fd); }
.quest-node:nth-child(3) .quest-icon { background: linear-gradient(135deg, #fde68a, #fca5a5); }
.quest-copy small { color: #7dd3fc; font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.quest-copy h2 { margin: 4px 0; }
.quest-copy p { margin: 0 0 8px; color: var(--muted); font-size: .87rem; }
.quest-copy span { color: #a7f3d0; font-size: .75rem; font-weight: 750; }
.quest-node > button { display: inline-flex; align-items: center; justify-content: center; padding: 11px 15px; border: 0; border-radius: 11px; color: white; font-weight: 800; background: linear-gradient(135deg, var(--violet), #2563eb); cursor: pointer; }
.quest-node > button:disabled { color: #8b98aa; background: #27344a; cursor: not-allowed; }
.eyebrow { color: var(--cyan); font-size: .73rem; font-weight: 850; letter-spacing: .13em; }
h1 { margin: 5px 0 3px; font-size: clamp(1.65rem, 4vw, 2.4rem); }
.mission-head p { margin: 0; color: var(--muted); }
.progress-wrap { width: min(32%, 260px); text-align: right; }
.progress { overflow: hidden; height: 10px; margin-bottom: 5px; border: 1px solid #324463; border-radius: 99px; background: #0c1628; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width .35s ease; }
.progress-wrap small { color: var(--muted); }

.scene { position: relative; overflow: hidden; height: 310px; border: 1px solid #344867; border-radius: 24px 24px 8px 8px; background: linear-gradient(#33445f 0 62%, #21314a 62%); box-shadow: 0 28px 70px rgba(0, 0, 0, .3); }
.scene-cafe { background: #18263a url('../images/pixel/moonlight-cafe-32bit-v1.png') center center / cover no-repeat; }
.scene-airport { background: #18263a url('../images/pixel/london-airport-32bit-v1.png') center center / cover no-repeat; }
.scene-hotel { background: #18263a url('../images/pixel/moonlight-hotel-32bit-v1.png') center center / cover no-repeat; }
.scene-clothing { background: #18263a url('../images/pixel/camden-clothing-32bit-v1.png') center center / cover no-repeat; }
.scene-street { background: #18263a url('../images/pixel/london-street-32bit-v1.png') center center / cover no-repeat; }
.scene-clinic { background: #18263a url('../images/pixel/riverside-clinic-32bit-v1.png') center center / cover no-repeat; }
.scene-market { background: #18263a url('../images/pixel/green-market-32bit-v1.png') center center / cover no-repeat; }
.scene-park { background: #18263a url('../images/pixel/hyde-park-32bit-v1.png') center center / cover no-repeat; }
.scene-office { background: #18263a url('../images/pixel/northstar-office-32bit-v1.png') center center / cover no-repeat; }
.scene-apartment { background: #18263a url('../images/pixel/baker-street-flat-32bit-v1.png') center center / cover no-repeat; }
.scene-pixel { image-rendering: pixelated; }
.scene-pixel::before,
.scene-pixel .window,
.scene-pixel .lamp,
.scene-pixel .menu-board,
.scene-pixel .counter,
.scene-pixel .character > * { display: none; }
.scene-pixel .character {
  left: 50%;
  bottom: 4%;
  width: min(92%, 460px);
  height: auto;
  aspect-ratio: 4 / 3;
  transform: translateX(-50%);
  transform-origin: bottom center;
  background-image: url('../images/pixel/maya-spritesheet-32bit-v1.png');
  background-repeat: no-repeat;
  background-size: 200% 400%;
  background-position: 0 0;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 7px rgba(0, 0, 0, .35));
}
.scene-airport .character { background-image: url('../images/pixel/alex-spritesheet-32bit-v1.png'); }
.scene-hotel .character { background-image: url('../images/pixel/emma-spritesheet-32bit-v1.png'); }
.scene-clothing .character { background-image: url('../images/pixel/sophie-spritesheet-32bit-v1.png'); }
.scene-street .character { background-image: url('../images/pixel/oliver-spritesheet-32bit-v1.png'); }
.scene-clinic .character { background-image: url('../images/pixel/dr-taylor-spritesheet-32bit-v1.png'); }
.scene-market .character { background-image: url('../images/pixel/noah-spritesheet-32bit-v1.png'); }
.scene-park .character { background-image: url('../images/pixel/chloe-spritesheet-32bit-v1.png'); }
.scene-office .character { background-image: url('../images/pixel/james-spritesheet-32bit-v1.png'); }
.scene-apartment .character { background-image: url('../images/pixel/grace-spritesheet-32bit-v1.png'); }
.scene.maya-speaking .character { background-position-y: 33.333%; animation: maya-two-frame .48s steps(1) infinite; }
.scene.maya-listening .character { background-position-y: 66.666%; animation: maya-two-frame 1.1s steps(1) infinite; }
.scene.maya-serving .character { background-position-y: 100%; animation: maya-two-frame .75s steps(1) infinite; }
.scene.maya-idle .character { background-position-y: 0; animation: maya-two-frame 1.4s steps(1) infinite; }
@keyframes maya-two-frame { 0%, 49% { background-position-x: 0; } 50%, 100% { background-position-x: 100%; } }
.scene::before { content: ""; position: absolute; inset: 62% 0 0; background: repeating-linear-gradient(90deg, #6b412f 0 50px, #5b3528 50px 52px); opacity: .9; }
.window { position: absolute; top: 33px; left: 7%; display: grid; grid-template-columns: 1fr 1fr; width: 27%; height: 115px; border: 9px solid #172237; background: linear-gradient(#82d8ec 0 65%, #67926c 65%); box-shadow: inset 0 0 0 2px #a6eeff; }
.window span + span { border-left: 6px solid #172237; }
.lamp { position: absolute; top: -5px; left: 47%; width: 4px; height: 70px; background: #182235; }
.lamp::after { content: ""; position: absolute; left: -32px; bottom: -13px; width: 68px; height: 27px; border-radius: 40px 40px 8px 8px; background: #fbbf24; box-shadow: 0 18px 35px rgba(251, 191, 36, .34); }
.menu-board { position: absolute; top: 35px; right: 6%; width: 23%; padding: 18px; border: 7px solid #8b5e3c; border-radius: 3px; color: #f8e8bd; text-align: center; font: 800 1.1rem/1.6 Georgia, serif; background: #17241f; transform: rotate(1deg); }
.menu-board small { color: #d4c99c; font-size: .72rem; }
.counter { position: absolute; z-index: 3; right: 0; bottom: 0; width: 57%; height: 86px; border-top: 13px solid #ad7953; background: #543526; }
.cup { position: absolute; top: -48px; right: 22%; font-size: 2.4rem; }
.character { position: absolute; z-index: 2; left: 48%; bottom: 45px; width: 110px; height: 172px; transform: translateX(-50%); }
.face { position: absolute; z-index: 2; top: 21px; left: 25px; display: grid; place-items: center; width: 61px; height: 68px; border-radius: 45% 45% 48% 48%; color: #5a3329; font-weight: 900; background: #d79770; }
.hair { position: absolute; z-index: 3; top: 8px; left: 17px; width: 76px; height: 43px; border-radius: 50% 55% 25% 20%; background: #2a1a1a; transform: rotate(-6deg); }
.body { position: absolute; bottom: 0; width: 110px; height: 101px; border-radius: 45px 45px 8px 8px; background: linear-gradient(90deg, #613e85, #8b5cf6); }
.body::after { content: ""; position: absolute; inset: 0 36px; background: #ede6db; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.scene-label { position: absolute; z-index: 4; bottom: 16px; left: 18px; padding: 7px 12px; border-radius: 99px; background: rgba(8, 16, 29, .78); backdrop-filter: blur(8px); font-size: .78rem; }
.scene-prop { position: absolute; top: -39px; right: 22%; min-width: 52px; padding: 9px; border-radius: 10px 10px 4px 4px; color: #172237; text-align: center; font-size: .66rem; font-weight: 950; background: #f8fafc; }
.scene-clinic .counter { background: #547482; border-color: #d8eef2; }
.scene-market .counter, .scene-park .counter { background: #405d3c; border-color: #9cbd72; }
.scene-clothing .counter, .scene-apartment .counter { background: #50343e; border-color: #c28a75; }

.dialogue-card { position: relative; z-index: 5; margin: -1px auto 0; padding: 22px; border: 1px solid #344867; border-radius: 0 0 24px 24px; background: rgba(23, 34, 55, .96); }
.speaker { display: flex; align-items: center; gap: 10px; }
.speaker > span { display: grid; place-items: center; width: 36px; aspect-ratio: 1; border-radius: 50%; color: #15101e; font-weight: 900; background: #c4b5fd; }
.speaker > span.speaker-avatar {
  flex: 0 0 42px;
  width: 42px;
  overflow: hidden;
  border: 2px solid rgba(125, 211, 252, .7);
  color: transparent;
  background-color: #101b2d;
  background-repeat: no-repeat;
  background-size: 299px 448px;
  background-position: -66px -8px;
  image-rendering: pixelated;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
}
.speaker > span.avatar-cafe { background-image: url('../images/pixel/maya-spritesheet-32bit-v1.png'); }
.speaker > span.avatar-airport {
  background-image: url('../images/pixel/alex-spritesheet-32bit-v1.png');
  background-position: -71px -8px;
}
.speaker > span.avatar-hotel { background-image: url('../images/pixel/emma-spritesheet-32bit-v1.png'); }
.speaker > span.avatar-clothing { background-image: url('../images/pixel/sophie-spritesheet-32bit-v1.png'); }
.speaker > span.avatar-street { background-image: url('../images/pixel/oliver-spritesheet-32bit-v1.png'); }
.speaker > span.avatar-clinic { background-image: url('../images/pixel/dr-taylor-spritesheet-32bit-v1.png'); }
.speaker > span.avatar-market { background-image: url('../images/pixel/noah-spritesheet-32bit-v1.png'); }
.speaker > span.avatar-park { background-image: url('../images/pixel/chloe-spritesheet-32bit-v1.png'); }
.speaker > span.avatar-office { background-image: url('../images/pixel/james-spritesheet-32bit-v1.png'); }
.speaker > span.avatar-apartment { background-image: url('../images/pixel/grace-spritesheet-32bit-v1.png'); }
.speaker b, .speaker small { display: block; }
.speaker small { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.dialogue { margin: 19px 0 7px; font-size: clamp(1.15rem, 3vw, 1.48rem); font-weight: 750; }
.translation-toggle { padding: 0; border: 0; color: #7dd3fc; background: transparent; cursor: pointer; font-size: .82rem; }
.translation { margin: 8px 0 0; color: var(--muted); font-style: italic; }
.speech-tools { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 9px; margin-top: 15px; }
.speech-tools > button { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #22314b; cursor: pointer; }
.speech-tools > button:hover:not(:disabled) { border-color: var(--cyan); }
.speech-tools > button:disabled { opacity: .45; cursor: not-allowed; }
.speech-tools > button.listening { border-color: var(--red); background: rgba(251, 113, 133, .12); animation: listening-pulse 1s infinite alternate; }
.speech-tools button span { display: grid; place-items: center; min-width: 31px; height: 23px; border-radius: 7px; color: #07111f; font-size: .55rem; font-weight: 950; background: #7dd3fc; }
.speech-status { margin: 0; color: var(--muted); font-size: .76rem; }
.speech-status.good { color: var(--green); }
.speech-status.medium { color: #fbbf24; }
.speech-status.low { color: var(--red); }
@keyframes listening-pulse { from { box-shadow: 0 0 0 0 rgba(251, 113, 133, .12); } to { box-shadow: 0 0 0 7px rgba(251, 113, 133, 0); } }
.exercise-area { margin-top: 20px; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 20px; }
.exercise-area .choices { margin-top: 0; }
.choice { min-height: 64px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-align: left; background: var(--panel-soft); cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.choice:hover:not(:disabled) { border-color: var(--cyan); transform: translateY(-2px); }
.choice span { display: inline-grid; place-items: center; width: 25px; margin-right: 8px; aspect-ratio: 1; border-radius: 8px; color: var(--muted); background: #101b2d; }
.choice.correct { border-color: var(--green); background: rgba(52, 211, 153, .13); }
.choice.incorrect { border-color: var(--red); background: rgba(251, 113, 133, .12); }
.feedback { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; }
.feedback span { color: #c9d5e7; }
.feedback.success { background: rgba(52, 211, 153, .12); }
.feedback.error { background: rgba(251, 113, 133, .12); }
.answer-zone { min-height: 64px; padding: 18px; border: 1px dashed #5b7192; border-radius: 14px; color: var(--muted); text-align: center; background: #101b2d; }
.word-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 14px; }
.word-token { padding: 10px 14px; border: 1px solid #526785; border-radius: 10px; color: var(--ink); background: var(--panel-soft); cursor: pointer; }
.word-token:disabled { opacity: .35; }
.exercise-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 15px; }
.exercise-actions button, .fill-form button { padding: 10px 15px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #22314b; cursor: pointer; }
.exercise-actions .check-button, .fill-form button { border: 0; background: linear-gradient(135deg, var(--violet), #2563eb); }
.fill-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.fill-form label { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; }
.fill-form input { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: #101b2d; }
.fill-form input:focus { border-color: var(--cyan); }
.fill-form input.correct-input { border-color: var(--green); }
.fill-form input.incorrect-input { border-color: var(--red); }
.primary-button { display: block; min-width: 160px; margin: 15px 0 0 auto; padding: 12px 18px; border: 0; border-radius: 12px; color: white; font-weight: 800; background: linear-gradient(135deg, #7c3aed, #2563eb); cursor: pointer; box-shadow: 0 10px 24px rgba(79, 70, 229, .25); }
.completion { padding: 22px; text-align: center; }
.completion-icon { font-size: 3rem; }
.completion h2 { margin: 8px 0; }
.completion p { color: var(--muted); }
.completion strong { display: block; color: #fde68a; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 430px; margin: 18px auto; }
.result-grid span { padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: #101b2d; }
.result-grid b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 1.35rem; }
.completion .primary-button { margin: 20px auto 0; }
footer { padding-top: 16px; color: #71829c; font-size: .72rem; }

@media (max-width: 700px) {
  .app-shell { padding-inline: 13px; }
  .brand small { display: none; }
  .stats span { padding: 7px 9px; }
  .profile-button b { display: none; }
  .profile-list, .route-options { grid-template-columns: 1fr; }
  .avatar-options { grid-template-columns: repeat(2, 1fr); }
  .mission-head { align-items: flex-end; }
  .quest-node, .quest-node:nth-child(even), .quest-node:nth-child(odd) { grid-template-columns: 44px 1fr; margin: 0; padding: 16px; }
  .quest-icon { width: 44px; height: 44px; border-radius: 13px; font-size: .5rem; }
  .quest-lock { right: -7px; bottom: -6px; padding: 3px; font-size: .34rem; }
  .quest-copy { grid-column: 2; grid-row: 1 / span 2; }
  .quest-node > button { grid-column: 1 / -1; width: 100%; }
  .quest-map::before { left: 22px; }
  .mission-head p { font-size: .84rem; }
  .progress-wrap { width: 34%; }
  .scene { height: 260px; }
  .window { left: 4%; width: 34%; }
  .menu-board { right: 3%; width: 29%; padding: 12px 5px; }
  .character { left: 50%; transform: translateX(-50%) scale(.9); transform-origin: bottom; }
  .scene-pixel .character { width: min(92%, 320px); height: auto; bottom: 1%; transform: translateX(-50%); }
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: 54px; }
  .dialogue-card { padding: 17px; }
  .speech-tools { grid-template-columns: 1fr 1fr; }
  .speech-tools > button { justify-content: center; padding-inline: 8px; font-size: .75rem; }
  .speech-status { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 390px) {
  .stats span { font-size: .72rem; }
  .stats span:nth-child(2) { display: none; }
  .mission-head { display: block; }
  .progress-wrap { width: 100%; margin-top: 14px; }
}
.ai-chat {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 180px;
  max-height: 360px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #293b58;
  border-radius: 16px;
  background: rgba(7, 16, 30, .48);
  scrollbar-color: #415677 transparent;
}

.ai-message {
  position: static;
  width: auto;
  height: auto;
  transform: none;
  justify-self: start;
  max-width: 82%;
  padding: 12px 14px;
  border: 1px solid #dbe3ee;
  border-radius: 16px 16px 16px 4px;
  background: #f7fafc;
  color: #142033;
}

.ai-message.npc { background: #eef2ff; border-color: #c7d2fe; }

.ai-message.player {
  justify-self: end;
  border-radius: 16px 16px 4px 16px;
  background: #e8f7ef;
  border-color: #bce3cc;
}

.ai-message.system { max-width: 100%; background: #fff7df; border-color: #efd897; }
.ai-message b { display: block; margin-bottom: 3px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.ai-message p { margin: 0; line-height: 1.45; }
.ai-tutor-phrase { margin: 9px 0 0; padding: 9px 11px; border-left: 3px solid #2fa77c; border-radius: 0 8px 8px 0; color: #102d27; background: #e8f8f1; font-weight: 800; line-height: 1.4; }
.ai-tutor-alternative { display: block; margin-top: 8px; color: #425675; line-height: 1.4; }
.ai-tutor-ready { margin-top: 9px !important; font-weight: 650; }
.ai-tutor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #c7d2e6; }
.ai-tutor-actions button { padding: 8px 11px; border: 1px solid #93a7c5; border-radius: 9px; color: #17304e; background: #fff; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.ai-tutor-actions button:first-child { border-color: #5bbf9b; color: #0b513b; background: #e8f8f1; }
.ai-tutor-actions button:disabled { opacity: .55; cursor: default; }
.ai-chat-form { display: grid; gap: 7px; margin-top: 12px; }
.ai-chat-form > div { display: flex; gap: 8px; }
.ai-chat-form input { flex: 1; min-width: 0; padding: 13px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; }
.ai-chat-form button { padding: 0 20px; border: 0; border-radius: 10px; background: #166534; color: white; font-weight: 700; }
.ai-chat-form button:disabled, .ai-chat-form input:disabled { opacity: .6; }
.ai-chat-form small { min-height: 1.25rem; color: #d7e3f4; font-size: .8rem; font-weight: 650; }
.ai-session-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ai-session-header > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #1c725c; border-radius: 999px; color: #7ff1cf; background: rgba(12, 91, 70, .25); font-size: .68rem; font-weight: 850; letter-spacing: .08em; }
.ai-session-header > span i { width: 7px; height: 7px; border-radius: 50%; background: #5ee4bd; box-shadow: 0 0 0 4px rgba(94, 228, 189, .12); }
.ai-session-header div { display: grid; gap: 2px; }
.ai-session-header small { color: #8293ad; }
.ai-start { display: grid; justify-items: center; gap: 12px; padding: 24px; border: 1px dashed #415677; border-radius: 16px; text-align: center; background: rgba(15, 30, 50, .55); }
.ai-start[hidden] { display: none; }
.ai-start p { margin: 0; color: #b8c5d9; }
.ai-start button { padding: 13px 24px; border: 0; border-radius: 12px; color: #062d22; background: #5ee4bd; font-weight: 850; cursor: pointer; }
.ai-start button:disabled { opacity: .65; cursor: wait; }
.ai-voice-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-voice-actions button { min-height: 42px; border: 1px solid #415677; background: #16243a; color: #dbeafe; }
.ai-voice-actions button.listening { border-color: #22d3ee; background: #164e63; animation: ai-mic-pulse 1s ease-in-out infinite; }
@keyframes ai-mic-pulse { 50% { box-shadow: 0 0 0 5px rgba(34, 211, 238, .18); } }

@media (max-width: 700px) {
  .ai-message { max-width: 92%; }
  .ai-chat-form > div { align-items: stretch; }
  .ai-chat-form button { padding-inline: 14px; }
  .ai-voice-actions { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  #missionView.conversation-layout:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(360px, .88fr) minmax(440px, 1.12fr);
    gap: 18px;
    align-items: stretch;
  }
  #missionView.conversation-layout .mission-head { grid-column: 1 / -1; }
  #missionView.conversation-layout .scene { height: auto; min-height: 520px; border-radius: 24px; }
  #missionView.conversation-layout .scene-pixel .character { width: min(92%, 480px); height: auto; }
  #missionView.conversation-layout .dialogue-card { margin: 0; border-radius: 24px; }
  #missionView.conversation-layout .exercise-area { margin-top: 14px; }
  #missionView.conversation-layout .ai-chat { max-height: 310px; }
}