:root {
  --ink: #252b38;
  --muted: #687181;
  --paper: #fffdf7;
  --cream: #fff7df;
  --line: #e8e1d3;
  --red: #f04f4f;
  --red-dark: #ce353c;
  --green: #2e9c69;
  --yellow: #f8c746;
  --sky: #60b9df;
  --violet: #8b6bc5;
  --shadow: 0 8px 22px rgba(47, 42, 33, .10);
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background: #f7f4ed;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(#f8f5ee 0 80%, #efe9dd 80%); }
button, input, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.app-shell { width: min(1440px, 100%); min-height: 100vh; margin: 0 auto; background: var(--paper); }

.topbar { height: 76px; padding: 0 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: rgba(255,253,247,.96); position: sticky; top: 0; z-index: 20; }
.brand { border: 0; background: none; display: flex; gap: 10px; align-items: center; padding: 0; font: 800 24px/1 "Baloo 2", sans-serif; cursor: pointer; justify-self: start; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--red); border-radius: 50% 50% 45% 55%; transform: rotate(-5deg); box-shadow: inset 0 -4px rgba(0,0,0,.08); }
.main-nav { display: flex; gap: 6px; }
.nav-button { border: 0; background: transparent; padding: 10px 15px; border-radius: 7px; color: var(--muted); font-weight: 800; cursor: pointer; }
.nav-button:hover, .nav-button.active { color: var(--red-dark); background: #fff0e8; }
.profile-button { border: 0; background: transparent; display: flex; gap: 10px; align-items: center; justify-self: end; text-align: left; cursor: pointer; padding: 5px; border-radius: 7px; }
.profile-button:hover { background: var(--cream); }
.profile-face { width: 38px; height: 38px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-weight: 900; }
.profile-copy { display: grid; }
.profile-copy small { color: var(--muted); }

.page { min-height: calc(100vh - 76px); }
.hero { padding: 48px clamp(22px, 6vw, 86px) 34px; background: var(--cream); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 44px; align-items: center; border-bottom: 1px solid #ead9ae; }
.eyebrow { color: var(--red-dark); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.1px; margin: 0 0 8px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Baloo 2", sans-serif; line-height: 1.05; }
h1 { max-width: 720px; font-size: clamp(38px, 5vw, 66px); margin-bottom: 14px; }
h1 em { color: var(--red); font-style: normal; }
.hero-copy > p:not(.eyebrow) { max-width: 650px; color: #596271; font-size: 18px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.player-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.player-strip span { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; border: 2px solid #ead9ae; border-radius: 7px; background: white; color: var(--muted); font-weight: 900; }
.player-strip strong { color: var(--ink); }
.primary-button, .secondary-button { min-height: 48px; border-radius: 7px; padding: 0 20px; border: 2px solid transparent; font-weight: 900; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.primary-button { color: white; background: var(--red); border-color: var(--red); box-shadow: 0 4px 0 var(--red-dark); }
.secondary-button { background: white; border-color: var(--line); box-shadow: 0 3px 0 #ddd4c4; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.primary-button:active, .secondary-button:active { transform: translateY(2px); box-shadow: none; }

.hero-scene { min-height: 260px; position: relative; display: grid; place-items: center; }
.canal-card { width: min(100%, 420px); height: 230px; background: #a8dded; border: 3px solid #293747; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 10px 12px 0 #f5cc5d; }
.canal-card:before { content: ""; position: absolute; inset: 0 0 45% 0; background: #89d2ee; }
.houses { position: absolute; inset: 30px 22px auto; display: flex; align-items: end; justify-content: center; gap: 4px; }
.house { width: 62px; height: 110px; background: #e85b48; border: 2px solid #293747; position: relative; }
.house:nth-child(2) { height: 135px; background: #f3b745; }
.house:nth-child(3) { height: 100px; background: #e9e1cc; }
.house:before { content: ""; position: absolute; width: 26px; height: 26px; background: #fff4b8; border: 2px solid #293747; left: 16px; top: 24px; box-shadow: 0 42px 0 #fff4b8; }
.water { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: repeating-linear-gradient(0deg,#4aafd0 0 12px,#77c8de 12px 19px); border-top: 3px solid #293747; }
.boat { position: absolute; right: 46px; bottom: 31px; width: 80px; height: 25px; background: white; border: 3px solid #293747; border-radius: 4px 4px 18px 18px; }
.boat:before { content: ""; position: absolute; width: 45px; height: 22px; left: 11px; bottom: 20px; background: var(--red); border: 3px solid #293747; }

.content-band { padding: 34px clamp(22px, 6vw, 86px) 52px; }
.section-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 20px; }
.section-head h2 { font-size: 31px; margin-bottom: 4px; }
.section-head p { color: var(--muted); margin-bottom: 0; }
.text-button { border: 0; background: none; color: var(--red-dark); font-weight: 900; cursor: pointer; }
.choice-grid, .topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.path-card, .topic-card { border: 2px solid var(--line); background: white; border-radius: 8px; padding: 20px; text-align: left; cursor: pointer; position: relative; overflow: hidden; transition: transform .15s, border-color .15s; }
.path-card:hover, .topic-card:hover { transform: translateY(-3px); border-color: #c8bda9; }
.path-card { min-height: 150px; }
.path-card.featured { color: white; background: #2f8c67; border-color: #2f8c67; }
.path-card h3, .topic-card h3 { font-size: 21px; margin: 13px 0 4px; }
.path-card p, .topic-card p { color: var(--muted); font-size: 14px; margin-bottom: 0; }
.path-card.featured p { color: rgba(255,255,255,.8); }
.card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); font-weight: 900; font-size: 20px; }
.featured .card-icon { background: rgba(255,255,255,.18); }
.topic-card { min-height: 170px; }
.topic-card h3 { min-height: 45px; }
.topic-card p { min-height: 40px; line-height: 1.35; }
.topic-card .topic-art { height: 72px; display: grid; place-items: center; margin: -20px -20px 0; font-size: 40px; background: #fff0ea; }
.topic-card[data-color="sky"] .topic-art { background: #e4f5fa; }
.topic-card[data-color="yellow"] .topic-art { background: #fff4c7; }
.topic-card[data-color="green"] .topic-art { background: #e2f4e9; }
.topic-card[data-color="violet"] .topic-art { background: #eee8f8; }
.topic-meta { color: var(--muted); font-size: 12px; font-weight: 800; margin-top: 9px; }

.inner-page { padding: 42px clamp(20px, 6vw, 84px) 60px; }
.page-title { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.page-title h1 { font-size: 44px; margin-bottom: 4px; }
.page-title p { color: var(--muted); margin-bottom: 0; }
.topic-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.topic-grid .topic-card { min-height: 210px; }

.mission-brief { min-height: 320px; margin-bottom: 26px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr); gap: 24px; align-items: stretch; border: 3px solid #293747; border-radius: 8px; overflow: hidden; background: #fff4c7; box-shadow: 10px 10px 0 #293747; }
.brief-copy { padding: 30px; background: white; }
.brief-copy h1 { font-size: clamp(36px, 5vw, 58px); margin-bottom: 10px; }
.brief-copy > p { color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 680px; }
.brief-objectives { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.brief-objectives span { min-height: 84px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 2px solid var(--line); border-radius: 8px; background: #fffaf0; color: var(--muted); font-weight: 800; }
.brief-objectives strong { color: var(--ink); }
.brief-scene { position: relative; min-height: 100%; overflow: hidden; background: linear-gradient(#9dd9ef 0 48%, #75c7de 48% 55%, #5ab2cc 55% 66%, #e6c171 66%); }
.brief-scene:before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 34%; height: 88px; background: repeating-linear-gradient(90deg,#e85b48 0 42px,#f3b745 42px 84px,#e9e1cc 84px 126px); border: 3px solid #293747; box-shadow: inset 0 -18px rgba(0,0,0,.08); }
.brief-scene:after { content: ""; position: absolute; left: -5%; right: -5%; bottom: 0; height: 34%; background: repeating-linear-gradient(0deg,#4aafd0 0 12px,#77c8de 12px 19px); border-top: 3px solid #293747; }
.brief-location { position: absolute; right: 26px; top: 24px; width: 74px; height: 74px; display: grid; place-items: center; border: 3px solid #293747; border-radius: 50%; background: white; font-size: 34px; z-index: 2; }

.setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.setup-panel, .summary-panel { border: 2px solid var(--line); border-radius: 8px; padding: 25px; background: white; }
.summary-panel { position: sticky; top: 100px; background: var(--cream); }
.control-group { border: 0; padding: 0; margin: 0 0 26px; }
.control-group legend { font: 800 20px "Baloo 2",sans-serif; margin-bottom: 12px; }
.segmented, .option-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.option-pill { border: 2px solid var(--line); background: white; border-radius: 7px; padding: 10px 14px; font-weight: 800; cursor: pointer; }
.option-pill.selected { color: var(--red-dark); background: #fff0e8; border-color: var(--red); }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 0; border-top: 1px solid var(--line); }
.toggle { width: 48px; height: 28px; border: 0; padding: 3px; border-radius: 20px; background: #c7c9ce; cursor: pointer; }
.toggle:after { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; background: white; transition: transform .15s; }
.toggle.on { background: var(--green); }
.toggle.on:after { transform: translateX(20px); }
.range-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.range-row input { grid-column: 1/-1; width: 100%; accent-color: var(--red); }
.summary-list { display: grid; gap: 12px; margin: 20px 0 24px; }
.summary-item { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #e6d8b3; }
.summary-item span { color: var(--muted); }
.summary-panel .primary-button { width: 100%; }

.game-page { min-height: calc(100vh - 76px); background: #fff9ea; padding: 18px clamp(14px,4vw,46px) 28px; }
.game-header { max-width: 900px; margin: 0 auto 20px; display: grid; grid-template-columns: auto 1fr auto auto; gap: 18px; align-items: center; }
.game-header.in-world { position: absolute; z-index: 8; left: 16px; right: 16px; top: 14px; max-width: none; margin: 0; }
.icon-button { width: 42px; height: 42px; border: 2px solid var(--line); background: white; border-radius: 7px; font-size: 24px; cursor: pointer; }
.progress-track { height: 12px; background: #e7dfcf; border-radius: 8px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--green); transition: width .25s; }
.timer-chip, .combo-chip { min-width: 70px; height: 42px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 7px; background: white; font-weight: 900; }
.combo-chip { min-width: 95px; color: #176a46; background: #e2f5e9; border-color: #b9dfc7; }
.timer-chip.danger { color: white; background: var(--red); border-color: var(--red); }
.mission-runner { max-width: 1180px; min-height: 190px; margin: 0 auto 18px; position: relative; overflow: hidden; border: 3px solid #293747; border-radius: 8px; background: linear-gradient(#b8e8f5 0 50%, #6cc0d8 50% 62%, #e9d4a2 62%); box-shadow: 8px 8px 0 rgba(41,55,71,.16); }
.mission-runner.game-arena { min-height: calc(100vh - 126px); display: block; }
.mission-runner:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 88px; background: repeating-linear-gradient(90deg,#5d6772 0 52px,#525c66 52px 104px); border-top: 3px solid #293747; }
.runner-skyline { position: absolute; left: 24px; right: 24px; bottom: 106px; height: 118px; display: flex; align-items: end; gap: 8px; opacity: .95; }
.runner-skyline span { flex: 1; max-width: 58px; height: 54px; background: #e85b48; border: 2px solid #293747; }
.runner-skyline span:nth-child(2) { height: 102px; background: #f3b745; }
.runner-skyline span:nth-child(3) { height: 74px; background: #e9e1cc; }
.runner-skyline span:nth-child(4) { height: 94px; background: #82c784; }
.runner-copy { position: absolute; z-index: 7; top: 72px; left: 16px; right: calc(min(430px, 38vw) + 40px); display: grid; gap: 2px; padding: 10px 12px; border: 2px solid #293747; border-radius: 8px; background: rgba(255,255,255,.9); }
.runner-copy strong { font-family: "Baloo 2", sans-serif; font-size: 20px; line-height: 1; }
.runner-copy span { color: var(--muted); font-size: 13px; font-weight: 800; }
.checkpoint-track { position: absolute; z-index: 7; left: 16px; top: 132px; display: flex; gap: 5px; max-width: calc(100% - min(500px, 44vw)); flex-wrap: wrap; justify-content: start; }
.checkpoint-track i { width: 18px; height: 18px; border: 2px solid #293747; border-radius: 50%; background: white; }
.checkpoint-track i.done { background: var(--green); }
.checkpoint-track i.active { background: var(--yellow); animation: checkpoint-pulse .9s ease infinite alternate; }
.runner-road { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 122px; }
.avatar-lane { position: absolute; left: min(calc(var(--runner-progress) - 28px), calc(100% - min(500px, 44vw) - 86px)); bottom: 58px; transition: left .35s ease; }
.coin-line { position: absolute; z-index: 1; left: 18%; right: min(46%, 520px); bottom: 64px; display: flex; justify-content: space-around; }
.coin-line span { width: 16px; height: 16px; border: 2px solid #293747; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 -3px rgba(0,0,0,.12); }
.stage-chip { position: absolute; z-index: 7; left: 16px; bottom: 16px; min-height: 34px; display: grid; place-items: center; padding: 0 12px; border: 2px solid #293747; border-radius: 7px; background: white; font-weight: 900; }
.runner-correct .coin-line span { animation: coin-pop .45s ease both; }
.runner-wrong .avatar { animation: avatar-stumble .45s ease both; }
.game-card { max-width: 760px; min-height: 590px; margin: auto; padding: 28px; background: white; border: 2px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); text-align: center; position: relative; overflow: hidden; }
.challenge-panel { position: absolute; z-index: 7; right: 22px; top: 82px; bottom: 22px; width: min(430px, 38vw); min-height: 0; max-width: none; margin: 0; overflow: auto; border: 3px solid #293747; box-shadow: 8px 8px 0 rgba(41,55,71,.18); }
.challenge-panel h2 { font-size: 25px; }
.challenge-panel .word-picture { width: min(210px, 68vw); margin-bottom: 16px; }
.challenge-panel .answer-grid { grid-template-columns: 1fr; }
.challenge-panel .feedback { min-height: 54px; margin-top: 14px; }
.game-card.answer-correct { animation: correct-pop .62s ease both; }
.game-card.answer-wrong { animation: wrong-shake .46s ease both; }
.game-kicker { color: var(--red-dark); font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
.game-card h2 { font-size: 30px; margin: 6px 0 18px; }
.word-picture { --x: 0; --y: 0; width: min(300px,70vw); aspect-ratio: 1; margin: 0 auto 24px; border-radius: 8px; background-image: url("./assets/vocabulary-sprite.png"); background-size: 400% 300%; background-position: calc(var(--x) * 33.333%) calc(var(--y) * 50%); border: 2px solid var(--line); }
.emoji-picture { background-image: none; background: linear-gradient(145deg,#fff8df,#ffe8da); display: grid; place-items: center; font-size: clamp(70px, 18vw, 142px); }
.answer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; max-width: 580px; margin: auto; }
.answer-button { min-height: 58px; border: 2px solid var(--line); border-radius: 7px; background: white; font-weight: 900; cursor: pointer; }
.answer-button:hover { border-color: var(--sky); background: #f0faff; }
.answer-button.correct { color: #176a46; background: #e2f5e9; border-color: var(--green); }
.answer-button.wrong { color: #a92e35; background: #ffebeb; border-color: var(--red); }
.typing-form { display: flex; gap: 10px; max-width: 580px; margin: auto; }
.typing-form input, .field-input, .field-select { width: 100%; min-height: 49px; border: 2px solid var(--line); border-radius: 7px; padding: 0 14px; background: white; }
.typing-form input:focus, .field-input:focus, .field-select:focus { outline: 3px solid rgba(96,185,223,.25); border-color: var(--sky); }
.feedback { min-height: 64px; margin: 18px auto 0; max-width: 580px; padding: 13px; border-radius: 7px; font-weight: 800; visibility: hidden; }
.feedback.show { visibility: visible; }
.feedback.good { background: #e2f5e9; color: #176a46; }
.feedback.bad { background: #ffebeb; color: #a92e35; }
.answer-burst { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; z-index: 3; }
.answer-burst span { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; color: white; font: 900 56px/1 "Baloo 2", sans-serif; box-shadow: 0 10px 28px rgba(37,43,56,.18); animation: answer-mark .82s ease both; }
.answer-burst.success span { background: var(--green); }
.answer-burst.error span { background: var(--red); }
.answer-burst i { position: absolute; width: 14px; height: 14px; border-radius: 4px; opacity: 0; animation: answer-spark .82s ease both; }
.answer-burst.success i { background: var(--yellow); }
.answer-burst.error i { background: #ffb2a8; }
.answer-burst i:nth-child(2) { transform: rotate(18deg) translate(0, -76px); }
.answer-burst i:nth-child(3) { transform: rotate(72deg) translate(0, -82px); animation-delay: .04s; }
.answer-burst i:nth-child(4) { transform: rotate(138deg) translate(0, -78px); animation-delay: .08s; }
.answer-burst i:nth-child(5) { transform: rotate(205deg) translate(0, -80px); animation-delay: .12s; }
.answer-burst i:nth-child(6) { transform: rotate(272deg) translate(0, -74px); animation-delay: .16s; }
.answer-burst i:nth-child(7) { transform: rotate(325deg) translate(0, -83px); animation-delay: .2s; }
.sentence-prompt { max-width: 620px; margin: 0 auto 18px; color: var(--muted); font-size: 19px; font-weight: 800; }
.sentence-builder { display: grid; gap: 16px; margin: 8px auto 18px; max-width: 650px; }
.selected-tiles, .tile-bank { min-height: 96px; display: flex; flex-wrap: wrap; align-content: start; justify-content: center; gap: 10px; padding: 14px; border: 2px solid var(--line); border-radius: 8px; background: #fffaf0; }
.selected-tiles { background: #f0faff; border-color: #c8e5f0; }
.tile-placeholder { color: var(--muted); font-weight: 800; align-self: center; }
.word-tile { min-height: 46px; border: 2px solid #d7ccbb; border-radius: 7px; background: white; padding: 0 15px; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 #e7dfcf; }
.word-tile:hover { border-color: var(--sky); transform: translateY(-1px); }
.word-tile:disabled { opacity: .35; cursor: default; transform: none; box-shadow: none; }
.word-tile.selected { background: var(--cream); border-color: var(--yellow); }
.sentence-actions { display: flex; justify-content: center; gap: 12px; }
.sentence-actions .primary-button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.world-object { position: absolute; z-index: 5; left: clamp(220px, 43%, 560px); bottom: 88px; min-width: 126px; min-height: 112px; display: grid; place-items: center; padding: 12px; border: 3px solid #293747; border-radius: 8px; background: white; box-shadow: 7px 7px 0 rgba(41,55,71,.18); font-weight: 900; }
.world-object strong { font: 900 15px/1 "Baloo 2", sans-serif; }
.item-object span { font-size: 48px; }
.gate-object { grid-template-columns: 1fr; gap: 5px; background: #fff4c7; }
.gate-object span { min-width: 72px; min-height: 34px; display: grid; place-items: center; border: 2px solid #293747; border-radius: 7px; background: white; font: 900 22px/1 "Baloo 2", sans-serif; }
.terminal-object { color: #91ffe0; background: #293747; }
.terminal-object span { color: white; font-size: 12px; letter-spacing: 1px; }
.terminal-object strong { font-size: 30px; }
.sign-object { background: #fffdf7; transform: rotate(-2deg); }
.sign-object span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); border: 2px solid #293747; font: 900 28px/1 "Baloo 2", sans-serif; }

.results { max-width: 760px; margin: 50px auto; text-align: center; }
.score-burst { width: 130px; height: 130px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); border: 4px solid var(--ink); font: 800 34px "Baloo 2"; box-shadow: 8px 8px 0 #f0a83d; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 25px 0; }
.stat { background: white; border: 2px solid var(--line); border-radius: 8px; padding: 18px 10px; }
.stat strong { display: block; font: 800 27px "Baloo 2"; }
.stat span { color: var(--muted); font-size: 13px; }

.empty-state { padding: 60px 20px; text-align: center; border: 2px dashed var(--line); border-radius: 8px; background: var(--cream); }
.empty-state .card-icon { margin: 0 auto; }
.word-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.word-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 13px; align-items: center; border: 2px solid var(--line); border-radius: 8px; padding: 10px; background: white; }
.word-thumb { width: 56px; aspect-ratio: 1; background-image: url("./assets/vocabulary-sprite.png"); background-size: 400% 300%; background-position: calc(var(--x) * 33.333%) calc(var(--y) * 50%); border-radius: 6px; }
.emoji-thumb { background-image: none; background: #fff0e8; display: grid; place-items: center; font-size: 28px; }
.mastery { color: var(--muted); font-size: 12px; font-weight: 900; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(37,43,56,.55); padding: 20px; display: grid; place-items: center; }
.modal { width: min(560px,100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--paper); border-radius: 8px; padding: 30px; position: relative; box-shadow: 0 24px 70px rgba(0,0,0,.25); }
.modal-close { position: absolute; right: 15px; top: 15px; }
.modal h2 { font-size: 30px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: grid; gap: 6px; font-weight: 800; }
.field.full { grid-column: 1/-1; }
.modal .primary-button { margin-top: 20px; width: 100%; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translate(-50%, 120px); background: var(--ink); color: white; border-radius: 7px; padding: 12px 18px; font-weight: 800; transition: transform .2s; }
.toast.show { transform: translate(-50%,0); }

.avatar { position: absolute; z-index: 4; width: 56px; height: 86px; left: 50%; bottom: 0; transform: translateX(-50%); }
.brief-scene .avatar { left: 44%; bottom: 28%; transform: translateX(-50%) scale(1.15); }
.avatar-head { position: absolute; left: 14px; top: 0; width: 28px; height: 28px; border: 3px solid #293747; border-radius: 50%; background: #f6c27c; }
.avatar-head:before { content: ""; position: absolute; left: -4px; top: -6px; width: 30px; height: 13px; border: 3px solid #293747; border-bottom: 0; border-radius: 16px 16px 4px 4px; background: #293747; }
.avatar-head i { position: absolute; left: 7px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: #293747; box-shadow: 10px 0 0 #293747; }
.avatar-body { position: absolute; left: 17px; top: 28px; width: 22px; height: 31px; border: 3px solid #293747; border-radius: 8px 8px 5px 5px; background: #f04f4f; }
.avatar-arm, .avatar-leg { position: absolute; width: 10px; height: 34px; border: 3px solid #293747; border-radius: 8px; background: #f6c27c; transform-origin: top center; }
.avatar-arm.left { left: 10px; top: 33px; transform: rotate(28deg); }
.avatar-arm.right { right: 10px; top: 33px; transform: rotate(-28deg); }
.avatar-leg.left { left: 16px; top: 57px; background: #2f8c67; transform: rotate(14deg); }
.avatar-leg.right { right: 16px; top: 57px; background: #2f8c67; transform: rotate(-14deg); }
.avatar.run .avatar-arm.left, .brief-scene .avatar .avatar-arm.left { animation: arm-run-left .55s ease infinite alternate; }
.avatar.run .avatar-arm.right, .brief-scene .avatar .avatar-arm.right { animation: arm-run-right .55s ease infinite alternate; }
.avatar.run .avatar-leg.left, .brief-scene .avatar .avatar-leg.left { animation: leg-run-left .55s ease infinite alternate; }
.avatar.run .avatar-leg.right, .brief-scene .avatar .avatar-leg.right { animation: leg-run-right .55s ease infinite alternate; }
.avatar.stumble { transform: translateX(-50%) rotate(-9deg); }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; padding: 0 18px; }
  .main-nav { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid var(--line); justify-content: space-around; padding: 7px; }
  .nav-button { display: grid; gap: 1px; place-items: center; font-size: 12px; }
  .profile-copy { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 35px; }
  .hero-scene { min-height: 235px; }
  .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mission-brief { grid-template-columns: 1fr; }
  .brief-scene { min-height: 230px; }
  .brief-objectives { grid-template-columns: 1fr; }
  .setup-layout { grid-template-columns: 1fr; }
  .summary-panel { position: static; }
  .page { padding-bottom: 72px; }
}

@media (max-width: 560px) {
  .topbar { height: 64px; }
  .brand { font-size: 20px; }
  .brand-mark, .profile-face { width: 34px; height: 34px; }
  .hero { padding: 28px 18px 25px; gap: 20px; }
  h1 { font-size: 39px; }
  .hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .hero-actions > button { flex: 1 1 100%; }
  .hero-scene { min-height: 185px; }
  .canal-card { height: 178px; }
  .houses { transform: scale(.78); transform-origin: bottom center; }
  .content-band, .inner-page { padding-left: 18px; padding-right: 18px; }
  .choice-grid, .topic-grid, .word-list { grid-template-columns: 1fr; }
  .choice-grid { gap: 10px; }
  .path-card { min-height: 120px; }
  .page-title { align-items: start; flex-direction: column; }
  .game-page { padding: 15px 10px 80px; }
  .game-header { grid-template-columns: auto 1fr auto; gap: 8px; }
  .combo-chip { grid-column: 2 / 4; width: 100%; height: 34px; }
  .mission-runner.game-arena { min-height: auto; padding: 126px 12px 138px; }
  .runner-copy { top: 72px; left: 12px; right: 12px; }
  .checkpoint-track { left: 12px; right: 12px; top: 132px; justify-content: start; max-width: calc(100% - 24px); }
  .world-object { left: auto; right: 18px; bottom: 96px; transform: scale(.78); transform-origin: bottom right; }
  .avatar-lane { left: calc(var(--runner-progress) - 28px); bottom: 58px; }
  .coin-line { left: 18%; right: 22%; }
  .stage-chip { left: 12px; right: auto; }
  .challenge-panel { position: relative; z-index: 8; right: auto; top: auto; bottom: auto; width: 100%; margin: 118px 0 0; }
  .game-card { min-height: 540px; padding: 20px 14px; }
  .challenge-panel { min-height: 0; }
  .answer-grid { grid-template-columns: 1fr; }
  .typing-form { flex-direction: column; }
  .result-stats { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; }
  .game-card.answer-correct, .game-card.answer-wrong, .answer-burst span, .answer-burst i { animation: none !important; }
  .avatar.run .avatar-arm.left, .avatar.run .avatar-arm.right, .avatar.run .avatar-leg.left, .avatar.run .avatar-leg.right, .brief-scene .avatar .avatar-arm.left, .brief-scene .avatar .avatar-arm.right, .brief-scene .avatar .avatar-leg.left, .brief-scene .avatar .avatar-leg.right, .checkpoint-track i.active, .runner-correct .coin-line span, .runner-wrong .avatar { animation: none !important; }
  .answer-burst { opacity: .9; }
}

@keyframes correct-pop {
  0% { box-shadow: var(--shadow); border-color: var(--line); }
  35% { transform: scale(1.015); box-shadow: 0 0 0 8px rgba(46,156,105,.15), var(--shadow); border-color: var(--green); }
  100% { transform: scale(1); box-shadow: var(--shadow); border-color: var(--line); }
}

@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); border-color: var(--line); }
  18% { transform: translateX(-8px); border-color: var(--red); }
  38% { transform: translateX(8px); }
  58% { transform: translateX(-5px); }
  78% { transform: translateX(4px); }
}

@keyframes answer-mark {
  0% { opacity: 0; transform: scale(.35) rotate(-12deg); }
  35% { opacity: 1; transform: scale(1.08) rotate(0deg); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.85); }
}

@keyframes answer-spark {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes checkpoint-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.18); }
}

@keyframes coin-pop {
  0% { transform: translateY(0) scale(1); }
  55% { transform: translateY(-20px) scale(1.2); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes avatar-stumble {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  35% { transform: translateX(-50%) rotate(-12deg); }
  70% { transform: translateX(-50%) rotate(7deg); }
}

@keyframes arm-run-left {
  from { transform: rotate(34deg); }
  to { transform: rotate(-26deg); }
}

@keyframes arm-run-right {
  from { transform: rotate(-34deg); }
  to { transform: rotate(26deg); }
}

@keyframes leg-run-left {
  from { transform: rotate(22deg); }
  to { transform: rotate(-18deg); }
}

@keyframes leg-run-right {
  from { transform: rotate(-22deg); }
  to { transform: rotate(18deg); }
}