html,body{background:#fff9ed;color:#073f3c}
:root{--bg:#fff9ed;--ink:#073f3c;--muted:#57706a;--lime:#d2f22d;--orange:#ed8610;--line:#e9e3d1;--white:#fffcf5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-rounded,'PingFang SC','Microsoft YaHei',system-ui,sans-serif}button,select,input{font:inherit}button,a,label.file{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #e89016;outline-offset:4px}header{max-width:1440px;margin:auto;padding:22px 36px;display:flex;gap:26px;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center;font-size:35px;text-decoration:none;color:var(--ink);font-weight:900}.brand small{display:block;font-size:12px;font-weight:600;letter-spacing:1px;margin-top:2px}nav{display:flex;gap:10px;margin:auto}nav button{background:none;border-radius:30px;padding:14px 22px;font-weight:800;font-size:17px}nav button.active{background:var(--lime)}.plain{padding:12px 16px;background:#f0eedf;border-radius:26px}.muted{color:var(--muted);font-size:14px;line-height:1.7}main{max-width:1380px;margin:auto;padding:32px 36px 48px}h1{font-size:clamp(30px,3.4vw,50px);letter-spacing:-1.6px;line-height:1.15;margin:12px 0 15px}h1 em{color:var(--orange);font-style:normal}h2{font-size:28px;margin:0 0 14px}h3{margin:0 0 10px;font-size:19px}p{line-height:1.7}.lead{font-size:17px;max-width:630px;margin:0;color:#405955}.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:30px;align-items:start}.scene{position:relative;margin-top:8px}.scene img{width:100%;display:block;mix-blend-mode:multiply}.node{position:absolute;border-radius:50%;width:48px;height:48px;background:#fff0bd;border:4px solid white;box-shadow:0 4px 0 #ca911e;color:#995809;font-weight:900;font-size:22px;animation:bob 3s ease-in-out infinite}.node:hover{background:var(--lime);transform:scale(1.1)}.node:nth-of-type(1){left:37%;top:62%}.node:nth-of-type(2){left:47%;top:53%;animation-delay:.3s}.node:nth-of-type(3){left:59%;top:45%;animation-delay:.6s}.node:nth-of-type(4){left:68%;top:37%;animation-delay:.9s}.node:nth-of-type(5){left:76%;top:30%;animation-delay:1.2s}.lesson{background:#fffcf5;border:2px solid var(--line);border-radius:30px;padding:26px;box-shadow:0 6px 16px #6b4b1510}.letter-title{font-size:105px;line-height:1;text-align:center;font-weight:900;margin-bottom:15px}.namebar{display:flex;align-items:center;justify-content:space-between;background:#ffdfaa;padding:12px 18px;border-radius:28px;font-size:19px;font-weight:750}.play{width:42px;height:42px;border-radius:50%;background:var(--lime);font-size:19px;flex-shrink:0}.examples{display:grid;gap:12px;margin:20px 0}.example{display:flex;align-items:center;gap:14px;border:2px solid var(--line);border-radius:22px;padding:16px}.emoji{font-size:42px;flex-shrink:0}.word{font-size:29px;font-weight:850;letter-spacing:1px}.ipa{font-family:Arial,sans-serif;font-size:21px}.example .play{margin-left:auto}.primary{background:var(--lime);border:2px solid #b5d413;box-shadow:0 5px 0 #acc80e;padding:17px 25px;border-radius:22px;font-size:20px;font-weight:850;width:100%;transition:transform .15s}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #acc80e}.secondary{background:#eeeada;padding:12px 18px;border-radius:14px;display:inline-block;cursor:pointer;font-weight:650}.rail{display:flex;justify-content:space-around;gap:12px;padding:20px;background:#fffcf5;border:2px solid var(--line);border-radius:24px;margin-top:22px}.rail span{font-weight:750}.rail b{color:var(--orange);padding-right:6px}.progress{height:9px;background:#e9e9cc;border-radius:8px;overflow:hidden;margin:12px 0}.progress i{display:block;background:#a5c919;height:100%;transition:width .5s}.section-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.letters{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}.tile{background:var(--white);border:2px solid var(--line);border-radius:18px;padding:20px 10px;position:relative;text-align:center}.tile strong{display:block;font-size:38px;line-height:1.2}.tile small{color:var(--muted)}.tile.done:after{content:'✓';position:absolute;right:10px;top:6px;color:#719308}.tile:hover{border-color:var(--orange)}.tip{padding:18px 22px;background:#f2efd9;border-radius:18px;margin:20px 0;font-size:15px;line-height:1.7}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:26px}.back{margin-bottom:20px}.soundlist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.soundcard{border:2px solid var(--line);border-radius:20px;padding:20px;background:var(--white)}.soundcard b{font-size:33px;font-family:Arial}.soundcard button{float:right}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.tabs button{padding:10px 16px;border-radius:16px;background:#efebda}.tabs button.active{background:var(--lime)}.game{max-width:850px;margin:auto}.game-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.game-stage{text-align:center;background:var(--white);border:2px solid var(--line);border-radius:30px;padding:34px}.game-stage .listen{font-size:27px;max-width:360px;margin:16px auto}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:22px 0}.option{border:3px solid var(--line);border-radius:23px;background:white;padding:28px 15px;font-size:30px;font-weight:800}.option:hover{border-color:#b4cf24}.option.correct{background:#deef9c;border-color:#92b908}.option.wrong{background:#ffe3cb;border-color:#eda05d}.feedback{min-height:56px;font-size:17px;font-weight:650;line-height:1.6}.spark{font-size:65px;animation:bob 2s infinite}.mouth{width:104px;height:48px;background:#523230;border:9px solid #df8872;border-radius:50%;margin:20px auto;animation:mouth 2s infinite}.mouth.round{width:60px;height:66px}.mouth.slim{height:24px}.explain{text-align:left}.reward{font-size:70px}.close{float:right;background:none;font-size:30px}.file input{display:none}dialog{border:2px solid var(--line);background:var(--white);border-radius:25px;max-width:560px;width:calc(100% - 30px);color:var(--ink);padding:25px}dialog::backdrop{background:#123e3870}dialog label{display:block;margin:16px 0}select{max-width:100%;padding:8px}details{margin-top:22px}summary{cursor:pointer}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:18px;padding:14px 20px;max-width:90%;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}footer{font-size:12px;color:var(--muted);margin-top:20px}.choices{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.slot{font-size:40px;letter-spacing:12px;margin:24px auto;min-height:60px}.choice{font-size:29px;padding:15px 22px;border-radius:14px;background:#ffdfaa}.choice:disabled{opacity:.35}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes bob{50%{translate:0 -7px}}@keyframes mouth{50%{scale:1 .7}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:900px){header{padding:18px 20px;gap:12px;flex-wrap:wrap}.brand{font-size:27px}nav{order:3;width:100%;justify-content:center}nav button{padding:11px 16px;font-size:15px}.plain{margin-left:auto}main{padding:25px 20px}.hero{grid-template-columns:1fr 1fr;gap:18px}.lesson{padding:18px}.letter-title{font-size:80px}.example{padding:12px;gap:8px}.emoji{font-size:29px}.word{font-size:24px}.letters{grid-template-columns:repeat(6,1fr)}}@media(max-width:640px){.hero,.workbench{grid-template-columns:1fr}.hero{gap:12px}h1{font-size:36px}.scene{margin:-3px -10px}.lesson{padding:22px}.letter-title{font-size:90px}.rail{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:14px;padding:17px;gap:16px}.letters{grid-template-columns:repeat(4,1fr);gap:9px}.tile{padding:16px 5px}.tile strong{font-size:30px}.soundlist{grid-template-columns:1fr 1fr}.section-top{display:block}.game-stage{padding:22px 16px}.option{font-size:24px;padding:25px 10px}.node{width:38px;height:38px;font-size:17px}.game-head{font-size:14px}.lead{font-size:15px}.namebar{font-size:17px}.soundcard{padding:16px}.soundcard b{font-size:28px}}
/* Original nonviolent reconnaissance mode */
.mission-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}.level-card{text-align:left;border:2px solid var(--line);border-radius:22px;padding:22px;background:var(--white);display:flex;flex-direction:column;gap:12px}.level-card .level-no{font-size:42px;color:var(--orange);font-weight:900}.level-card h3{margin:0}.level-card p{font-size:14px;margin:0;min-height:70px}.level-card button{margin-top:auto}.level-card.locked{opacity:.65}.mission-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.85fr);gap:24px;align-items:start}.mission-map{position:relative;aspect-ratio:1;background:url('assets/mission-map.png') center/cover;border-radius:22px;overflow:hidden;border:3px solid #0c5048;isolation:isolate}.map-grid{position:absolute;inset:5%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr)}.map-cell{background:transparent;border:1px solid #fff4;position:relative;border-radius:2px;padding:0}.map-cell.walkable:after{content:'';position:absolute;width:22%;height:22%;border:2px solid #fff9;background:#fff3;border-radius:50%;left:39%;top:39%}.map-cell.adjacent{background:#d5f74044}.map-cell.blocked{background:#073f3c22}.map-cell .token{position:absolute;inset:5%;display:grid;place-items:center;font-size:clamp(18px,3.4vw,42px);z-index:2;text-shadow:0 3px 4px #253e40}.map-cell.crate .token{animation:bob 2.5s infinite}.map-cell.current{background:#c8ec4855;outline:3px solid #dcf849;outline-offset:-3px;z-index:2}.map-cell.current .token{filter:drop-shadow(0 0 8px #f3ff97)}.mission-hud{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:14px 0}.radio-panel{background:var(--white);border:2px solid #175a53;border-radius:24px;padding:24px}.radio-panel .options{gap:10px;margin:18px 0}.radio-panel .option{font-size:22px;padding:16px 10px}.radio-panel .option small{font-size:13px;font-weight:500;display:block;margin-top:5px}.radio-panel .feedback{background:#f1f3dd;border-radius:12px;padding:12px;margin:16px 0;font-size:15px}.dpad{display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(2,46px);gap:7px;justify-content:center;margin:16px 0}.dpad button{border-radius:12px;background:var(--lime);border:2px solid #7f9c25;font-size:20px}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-row:2;grid-column:1}.dpad button:nth-child(3){grid-row:2;grid-column:2}.dpad button:nth-child(4){grid-row:2;grid-column:3}.mission-legend{display:flex;flex-wrap:wrap;gap:15px;font-size:13px;margin:12px 0;color:var(--muted)}.mission-note{font-size:14px;line-height:1.7;background:#f1ead5;border-radius:15px;padding:16px}.audio-strip{font-size:13px;background:#edf1d4;padding:12px;border-radius:12px}.audio-stop{margin-left:8px;background:#ede7d7;border-radius:9px;padding:6px 9px}.progress-pill{padding:7px 13px;border-radius:15px;background:#ddefac;font-size:14px;font-weight:700}.mission-results{max-width:720px;margin:auto;text-align:center}.mission-results ul{text-align:left;line-height:1.9}.review-word{border:0;background:none;text-decoration:underline;font-weight:700;color:#246257}.mission-lobby-art{display:grid;grid-template-columns:1.2fr 1fr;gap:25px;align-items:center}.mission-lobby-art img{width:100%;max-height:330px;object-fit:cover;border-radius:22px}.mission-levels .primary{font-size:16px;padding:13px 14px}.mission-map-label{position:absolute;top:8px;left:12px;color:white;background:#123f36d9;padding:5px 10px;border-radius:8px;font-size:12px;z-index:3}.mission-help{margin-top:16px}.mission-help p{font-size:14px}.speech-status{font-size:12px;min-height:20px;color:var(--muted)}
@media(max-width:1000px){.mission-levels{grid-template-columns:repeat(2,1fr)}header{gap:12px}nav button{padding:12px 15px}.mission-layout{grid-template-columns:1.1fr 1fr}}
@media(max-width:700px){.mission-layout,.mission-lobby-art{grid-template-columns:1fr}.mission-levels{gap:10px}.level-card{padding:16px}.level-card p{min-height:95px}.mission-map{max-width:560px;width:100%;margin:auto}.radio-panel{padding:20px}.mission-lobby-art img{max-height:230px}nav{gap:1px}nav button{padding:11px 10px;font-size:13px}.map-cell .token{font-size:30px}.mission-hud{font-size:13px}}
#playerDock{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:9;background:#fffdf4;border:2px solid #c4d789;box-shadow:0 8px 35px #123b3933;border-radius:20px;padding:10px 14px;display:flex;gap:12px;align-items:center;max-width:calc(100% - 24px)}#playerDock[hidden]{display:none}#playerLabel{font-size:13px;min-width:115px}#arkPlayer{width:270px;height:40px;max-width:100%}#closePlayer{background:none;font-size:25px}body{padding-bottom:65px}@media(max-width:650px){#playerDock{width:calc(100% - 24px);flex-wrap:wrap;gap:3px;padding:8px 12px}#playerLabel{width:calc(100% - 36px);font-size:12px}#arkPlayer{width:100%;order:3;height:32px}#closePlayer{position:absolute;right:12px;top:2px}}
.mobile-dpad{display:none}@media(max-width:700px){.mobile-dpad{display:grid}}
.recording-note{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.word mark{background:#ffe1a6;color:#ad5700;border-radius:5px;padding:0 1px}
.map-cell.current .token{animation:step-in .22s ease-out}.option.correct{animation:answer-pop .24s ease-out}@keyframes step-in{from{transform:translateY(-7px) scale(.92)}to{transform:translateY(0) scale(1)}}@keyframes answer-pop{50%{transform:scale(1.035)}}

/* Original illustrated vocabulary and expedition tokens, not emoji icons. */
.word-art{display:inline-block;width:72px;height:72px;flex:0 0 72px;background:url('assets/word-sprites.png') no-repeat;background-size:400% 400%;vertical-align:middle}
.game-art{display:inline-block;width:48px;height:48px;background:url('assets/game-sprites.png') no-repeat;background-size:200% 200%;vertical-align:middle}
.word-badge{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:#e9eddd;color:#073f3c;font:700 30px/1 ui-rounded,system-ui;vertical-align:middle}
.spark .game-art,.spark .word-art{width:100px;height:100px}.map-cell .game-art{width:100%;height:100%}.map-cell .token{display:block;width:100%;height:100%}.mission-legend .game-art{width:28px;height:28px}.radio-panel h2 .game-art{width:34px;height:34px}.audio-strip>.game-art{width:28px;height:28px}
.option .word-art{width:60px;height:60px;display:block;margin:0 auto}.soundcard .word-art{width:42px;height:42px}.example .emoji{display:flex;align-items:center;justify-content:center;width:72px;font-size:initial}.brand{display:flex;align-items:center;gap:12px}
@media(max-width:600px){.word-art,.example .emoji{width:60px;height:60px;flex-basis:60px}.option .word-art{width:50px;height:50px}.mission-legend .game-art{width:24px;height:24px}}