:root{--paper:#f8f4eb;--ink:#44523d;--sage:#7d9069;--muted:#a3a48d;--line:#e7e4d6;--peach:#e3a687}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}body{font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent;color:inherit}button{font:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}a{text-decoration:none}button:focus-visible,a:focus-visible,[data-diff]:focus-visible{outline:3px solid #bd966e;outline-offset:3px}button:disabled{cursor:default;opacity:.5}.game{width:100%;max-width:458px;height:100vh;height:100dvh;max-height:970px;margin:auto;padding:max(8px,env(safe-area-inset-top)) 14px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px;overflow:hidden}header{height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.brand{display:flex;align-items:center;gap:6px;font-size:32px;color:#7a8969;font-weight:650;letter-spacing:-.8px}.brand span{font-size:23px;font-weight:800;color:#4a573f}.brand i{font-family:Georgia,serif;font-weight:400;color:#9ba184}.sound{font-size:23px;border-radius:50%;width:40px;height:40px;color:#7f8e71}.sound[aria-pressed=false]{opacity:.45}.scene-title{height:25px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 6px;font-size:12px;letter-spacing:1px}.progress{display:flex;gap:11px;align-items:center}.progress b{font-size:11px;font-weight:500;letter-spacing:1px;color:#8e987f}#progressDots{display:flex;gap:5px}#progressDots i{height:7px;width:7px;border-radius:50%;background:#e0e3d4}#progressDots i.done{background:#8fa176}.boards{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.scene-wrap{width:min(100%,calc((100dvh - 217px)*.75));aspect-ratio:3/2;min-height:0;position:relative;border-radius:17px;overflow:hidden;background:#efe5d1;border:1px solid #eadfca;box-shadow:0 3px 10px #a68b6320;isolation:isolate}.scene-wrap svg{display:block;width:100%;height:100%;touch-action:manipulation;user-select:none}.scene-label{position:absolute;top:8px;left:9px;font-size:10px;font-weight:700;display:grid;place-items:center;width:24px;height:24px;background:#fffcf0ee;border:1px solid #eee1c7;color:#7d8468;border-radius:9px;z-index:1;pointer-events:none}.scene-wrap [data-diff]{cursor:pointer}.found-ring{fill:#ffffff0a;stroke:#fffef0;stroke-width:9;stroke-linecap:round;pointer-events:none;filter:drop-shadow(0 1px 3px #596c3a80)}.mark-badge{fill:#829965;stroke:#fff8e6;stroke-width:5;pointer-events:none}.mark-text{fill:#fff9e8;font-size:27px;text-anchor:middle;dominant-baseline:central;pointer-events:none}.hint-ring{fill:#fff1b838;stroke:#fff4bf;stroke-width:10;stroke-dasharray:16 12;pointer-events:none;animation:pulse 1s ease-in-out infinite}.word-strip{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 5px;position:relative}.word-strip>p{font-size:12px;letter-spacing:1px;color:#a4a48e}.word-strip>p b{font-weight:650;color:#83916f}.word{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:6px 4px;min-width:0;height:100%}.word .letter{font-size:9px;font-weight:700;color:#a8aa94;align-self:center}.word strong{font-family:Georgia,serif;font-size:26px;font-weight:400;line-height:1;color:#66794e}.word .listen{font-size:13px;color:#9cab88;margin-left:3px}.word small{display:block;font-size:9px;color:#a3aa94;text-align:center;margin-top:5px}.separator{width:1px;height:28px;background:var(--line)}footer{flex-shrink:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;gap:14px}.tool{display:flex;align-items:center;gap:6px;font-size:11px;min-width:62px;padding:9px 5px;justify-content:center;color:#8e997e}.tool>span{font-size:21px;line-height:1}.replay{font-size:11px;color:#889779;padding:11px 15px;border-radius:22px;background:#e9eddf;min-width:140px}.replay.win{background:#81936b;color:#fffcf2;font-weight:600}.toast{position:fixed;bottom:max(116px,calc(env(safe-area-inset-bottom) + 116px));left:50%;max-width:calc(100vw - 42px);transform:translate(-50%,10px);font-size:11px;line-height:1.6;padding:10px 18px;background:#65744ce8;border:1px solid #e9ebd344;color:#fffbed;border-radius:22px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes pulse{50%{opacity:.3}}.miss{animation:nudge .2s ease-in-out}@keyframes nudge{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}@media(max-height:700px){.game{padding-top:5px;padding-bottom:5px;gap:6px}header{height:34px}.brand{font-size:28px}.brand span{font-size:21px}.sound{height:34px}.scene-title{height:20px;font-size:11px}.word-strip{height:54px}.word strong{font-size:24px}.replay{padding:9px 12px}footer{height:38px}.scene-wrap{width:min(100%,calc((100dvh - 180px)*.75));border-radius:14px}.boards{gap:7px}.scene-label{width:21px;height:21px;top:6px;left:7px}}@media(min-width:700px){body{background:radial-gradient(ellipse at 20% 25%,#e9ebdc,transparent 40%),radial-gradient(ellipse at 80% 80%,#f0e2d3,transparent 40%),#f6f3e9;display:flex;align-items:center;justify-content:center}.game{max-height:min(930px,100dvh);background:#fbf8f0;box-shadow:0 6px 60px #8b90641a}}@media(max-height:470px) and (min-width:600px){.game{max-width:950px;gap:5px}.boards{flex-direction:row;gap:10px}.scene-wrap{width:min(calc(50% - 5px),calc((100dvh - 180px)*1.5))}.word-strip{height:48px}header{height:30px}.scene-title{height:16px}footer{height:32px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}.play-area{display:flex;flex-direction:column;flex:1;min-height:0;gap:9px}.header-tools{display:flex;align-items:center;gap:8px}.levels-btn{display:flex;align-items:center;gap:5px;font-size:11px;min-height:40px;padding:0 10px;border:1px solid #e2e5d7;border-radius:18px}.levels-btn span{font-size:18px;color:#859575}.scene-title h1{font-size:12px;font-weight:600;letter-spacing:.5px;display:flex;align-items:center;gap:9px;margin:0}.scene-title h1>span{font-size:10px;color:#a1aa91;letter-spacing:1px;font-weight:500}.scene-title{height:28px}.word strong{font-size:25px;white-space:nowrap}.word:has(strong){gap:6px}.word:has(strong) .listen{margin-left:1px}.word-strip:has(.word) .word strong{font-size:clamp(18px,5.5vw,25px)}.level-picker{flex:1;min-height:0;overflow-y:auto;padding:8px 3px 0;scrollbar-width:thin}.picker-heading{padding:8px 4px 20px;position:relative}.picker-heading p{font-size:10px;letter-spacing:2px;color:#9da38e;margin:0 0 9px}.picker-heading h1{font-size:25px;letter-spacing:.5px;font-weight:600;margin:0}.picker-heading>span{display:block;font-size:10px;color:#9ba58e;margin-top:10px}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;padding:0 2px 10px}.level-card{display:flex;flex-direction:column;gap:7px;min-width:0}.level-card .thumb{aspect-ratio:3/2;border-radius:12px;overflow:hidden;position:relative;background:#e9e6d9;box-shadow:0 2px 5px #8b88541a}.thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}.level-card:hover .thumb img{transform:scale(1.04)}.thumb b{position:absolute;top:4px;left:5px;background:#fcfaedeb;border-radius:5px;padding:2px 4px;font-weight:500;font-size:9px;color:#7d8f68}.level-card>span{font-size:10px;letter-spacing:.3px;text-align:center;white-space:nowrap}.completed-mark{position:absolute;bottom:4px;right:5px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#7d9567;color:#fffbed;font-size:12px;box-shadow:0 0 0 2px #fffae5}.picker-note{font-size:10px;text-align:center;color:#a4a990;margin:12px 0 10px}.game.picking{max-height:970px}.game.picking .brand{pointer-events:none}.game.picking{padding-bottom:max(10px,env(safe-area-inset-bottom))}
@media(max-height:700px){.play-area{gap:6px}.scene-title{height:24px}.levels-btn{min-height:34px;padding:0 8px}.word-strip:has(.word) .word strong{font-size:clamp(18px,5vw,23px)}.picker-heading{padding:5px 4px 14px}.picker-heading h1{font-size:22px}.picker-heading p{margin-bottom:5px}.picker-heading>span{margin-top:7px}.level-grid{gap:12px 8px}.level-card{gap:5px}.level-card>span{font-size:9px}.picker-note{margin-top:7px}.scene-wrap{width:min(100%,calc((100dvh - 184px)*.75))}}
@media(max-width:350px){.game{padding-left:10px;padding-right:10px}.header-tools{gap:3px}.brand span{font-size:20px}.scene-title{padding:0 3px}.scene-title h1{font-size:11px;gap:6px}.progress{gap:6px}.replay{min-width:125px;padding-left:9px;padding-right:9px}footer{gap:4px}.word .listen{display:none}.word{padding:5px 1px}.level-grid{gap:11px 7px}}
@media(max-height:470px) and (min-width:600px){.game{max-width:950px}.play-area{gap:5px}.scene-wrap{width:min(calc(50% - 5px),calc((100dvh - 184px)*1.5))}.level-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.picker-heading{padding-bottom:8px}.picker-heading h1{font-size:18px}.picker-heading p,.picker-heading>span{display:none}.level-card>span{font-size:10px}.level-picker{padding-top:0}.picker-note{display:none}}
/* English leads; Chinese stays a quiet supporting line. */
.bi{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0}.bi .en{font-family:"Avenir Next",Arial,sans-serif;font-weight:600;letter-spacing:0;line-height:1.15}.bi .zh{font-size:9px;font-weight:400;letter-spacing:.4px;line-height:1.15;color:#9ba58d}.brand-copy{display:flex;flex-direction:column;gap:2px}.brand .brand-copy>span{font-size:23px}.brand .brand-copy>small{font-size:8px;font-weight:400;letter-spacing:2px;color:#9ba58d}.header-tools{gap:5px}.levels-btn{padding:2px 9px;min-height:40px;gap:4px}.levels-btn .en{font-size:11px}.levels-btn .zh{font-size:8px}.sound{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:19px}.sound .bi{gap:1px}.sound .en{font-size:8px;font-weight:500}.sound .zh{font-size:7px;letter-spacing:0}.sound[aria-pressed=false]{opacity:.65}.play-area{gap:8px}.scene-title{height:40px}.scene-title h1{min-width:0;flex:1;gap:8px;letter-spacing:0}.title-read{padding:2px 0;text-align:left;min-width:0}.title-read .bi{align-items:flex-start;gap:3px}.title-read .en{font-size:13px;line-height:1.15}.title-read .zh{font-size:9px}.scene-title h1>span{font-size:10px}.progress{padding:8px 0 8px 10px;gap:8px;flex-shrink:0}.scene-wrap{width:min(100%,calc((100dvh - 250px)*.75))}.scene-label{pointer-events:auto;cursor:pointer}.instruction{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#7c8d69}.instruction .en{font-size:14px;font-weight:550}.instruction .zh{font-size:10px}.word-strip .word{color:#66794e}footer{height:48px;gap:8px}.tool{padding:3px 5px;min-height:44px;gap:6px;min-width:72px}.tool .en{font-size:11px;white-space:nowrap}.tool .zh{font-size:9px}.replay{padding:8px 14px;min-height:44px;min-width:133px;line-height:1.15}.replay .en{font-size:12px}.replay .zh{font-size:9px}.replay.win .zh{color:#e1e7d6}.picker-heading{padding:5px 4px 16px}.picker-heading button{padding:0;text-align:left}.picker-heading .bi{align-items:flex-start}.eyebrow .en{font-size:11px;color:#7d8f69}.eyebrow .zh{font-size:8px}.picker-heading h1{margin:10px 0}.picker-heading h1 .en{font-size:25px;font-weight:600}.picker-heading h1 .zh{font-size:11px}.picker-rule .en{font-size:10px;font-weight:500;color:#8c9a7b}.picker-rule .zh{font-size:8px}.level-grid{gap:12px 9px}.level-card{gap:5px}.level-card>.bi{min-height:40px;gap:3px;justify-content:flex-start;text-align:center;padding:0 1px}.level-card>.bi .en{font-size:10px;line-height:1.18;min-height:24px;display:flex;align-items:center;justify-content:center;white-space:normal}.level-card>.bi .zh{font-size:8px}.picker-note{display:flex;margin:5px auto 10px;min-height:40px}.picker-note .en{font-size:10px;font-weight:500}.picker-note .zh{font-size:8px}.toast.visible{pointer-events:auto}.toast .en{font-size:12px}.toast .zh{color:#e5ebdb;font-size:10px}
@media(max-height:700px){.game{gap:6px}.play-area{gap:6px}.scene-title{height:36px}.title-read .en{font-size:12px}.title-read .zh{font-size:9px}.scene-wrap{width:min(100%,calc((100dvh - 212px)*.75))}footer{height:44px}.replay{padding:6px 11px}.picker-heading h1{margin:6px 0}.picker-heading{padding-bottom:10px}.picker-heading h1 .en{font-size:22px}.level-grid{gap:9px 8px}.level-card>.bi{min-height:38px}.picker-note{margin-top:2px}}
@media(max-width:350px){.brand .brand-copy>span{font-size:19px}.brand .brand-copy>small{font-size:7px;letter-spacing:1px}.brand{gap:3px}.levels-btn{padding:2px 6px}.levels-btn .en{font-size:10px}.levels-btn>span[aria-hidden]{display:none}.header-tools{gap:2px}.title-read .en{font-size:11px}.scene-title h1{gap:5px}.progress{padding-left:7px;gap:5px}.progress b{font-size:10px}#progressDots{gap:3px}.tool{min-width:65px;padding:3px 1px}.tool .en{font-size:10px}.tool>span[aria-hidden]{font-size:18px}.replay{min-width:120px}.level-card>.bi .en{font-size:9px}.picker-heading h1 .en{font-size:21px}}
@media(max-height:470px) and (min-width:600px){.scene-wrap{width:min(calc(50% - 5px),calc((100dvh - 210px)*1.5))}.scene-title{height:36px}.word-strip{height:48px}.picker-heading h1{margin:3px 0}.picker-heading .eyebrow,.picker-rule{display:none}.picker-heading h1 .en{font-size:19px}.picker-heading h1 .zh{font-size:9px}.level-card>.bi{min-height:35px}}