/* Subject navigation and the six language / shooting adventures. */
.subject-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:-3px 0 24px}.subject-options{display:flex;gap:7px;flex-wrap:wrap}.subject-filter{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #e7dfeb;background:#fffdf7;color:#8a7a95;border-radius:11px;font-size:13px;min-height:42px}.subject-filter small{font-size:10px;color:#aa9bb2;background:#f1eaf5;padding:2px 5px;border-radius:5px}.subject-filter.active{background:#eae0f4;border-color:#cbbbdd;color:#7a5c9d;font-weight:650}.subject-filter.active small{background:#d9c9e9;color:#816395}.new-adventures{font-size:11px;color:#a084a7}.new-game-label{font-size:9px;background:#e9ecdc;color:#929b6b;border:1px solid #dae0c5;padding:3px 5px;border-radius:5px;flex-shrink:0}
.lesson-progress{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;font-size:11px;color:#9e89ac;padding-bottom:8px;border-bottom:1px dashed #e8dfeb}.lesson-progress>div{display:flex;gap:5px}.lesson-progress i{height:6px;width:20px;border-radius:6px;background:#e9e1ee}.lesson-progress i.current{background:#c5afd8}.lesson-progress i.complete{background:#a8bfa0}.lesson-kicker{display:block;font-size:11px;font-weight:500;letter-spacing:1px;color:#a08aab;line-height:1.8}.lesson-next{font-size:13px;min-height:44px;padding:11px 24px;gap:10px}.hinted{outline:3px dashed #a684bf!important;outline-offset:4px;background-color:#f1e6fb!important}.word-garden-card{background:#eff3e6;border:1px solid #dce5ce;border-radius:18px;padding:21px;width:100%;text-align:center}.pinyin-text{font-family:system-ui,sans-serif;font-size:clamp(24px,3vw,35px);color:#799466;margin:9px 0 14px;font-weight:650;line-height:1.55;overflow-wrap:anywhere}.word-garden-card p{font-size:14px;line-height:1.85;color:#869575;max-width:440px;margin:auto}.flower-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,460px);gap:8px 24px;align-items:center;padding:10px 8px 0}.flower-choice{position:relative;background:none;padding:0 0 35px;min-height:106px;margin:10px 0 6px;border-radius:20px;isolation:isolate}.flower-word{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;background:#fff3dc;border:9px solid #e8b9b1;border-radius:40%;min-height:74px;padding:8px 10px;font-size:clamp(19px,2vw,26px);font-weight:650;letter-spacing:2px;color:#956c67;box-shadow:8px 2px 0 -4px #f0d0c3,-8px -2px 0 -4px #f0d0c3}.flower-choice:nth-child(2) .flower-word{border-color:#b9a5d2;color:#8b719f;box-shadow:8px 2px 0 -4px #d7c7e3,-8px -2px 0 -4px #d7c7e3}.flower-choice:nth-child(3) .flower-word{border-color:#e4cc8d;color:#a48a52;box-shadow:8px 2px 0 -4px #efdfa9,-8px -2px 0 -4px #efdfa9}.flower-choice:nth-child(4) .flower-word{border-color:#a9c7b6;color:#728d7c;box-shadow:8px 2px 0 -4px #c8dccf,-8px -2px 0 -4px #c8dccf}.flower-stem{position:absolute;width:5px;height:45px;bottom:0;left:calc(50% - 2px);background:#98b18a;border-radius:4px;z-index:0}.flower-stem::after{content:"";position:absolute;width:23px;height:14px;background:#b3c79f;border-radius:100% 0 100% 0;top:19px;left:4px;transform:rotate(-10deg)}.flower-choice.correct .flower-word{border-color:#8fb984;background:#f0f8d8;color:#6b915f}.flower-choice.wrong{opacity:.35}.flower-choices.three .flower-choice:last-child{grid-column:1/-1;width:calc(50% - 12px);justify-self:center}.flower-choice:hover:not(:disabled){transform:translateY(-4px)}
.sentence-task{width:100%;background:#f4efe4;border:1px solid #e7ddc8;border-radius:14px;padding:15px}.sentence-task>p{font-size:12px;color:#9b8c7e;margin:7px 0 10px}.sentence-order{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.sentence-order span{background:#fffbf2;color:#99846f;padding:5px 8px;border-radius:6px;font-size:11px;border:1px solid #e8dcc7}.sentence-order i{font-style:normal;color:#c2ab91;font-size:11px}.train-track{width:100%;background:#f4eee4;border:1px solid #e4d6c3;border-radius:14px;padding:14px 10px 23px;position:relative}.train-track::after{content:"";height:4px;background:repeating-linear-gradient(to right,#c7ae93 0,#c7ae93 7px,#e3d1ba 7px,#e3d1ba 15px);position:absolute;bottom:10px;left:8px;right:8px;border-radius:5px}.train-engine{display:block;width:48px;height:49px;background:#b09bc8;border-radius:12px 12px 6px 6px;position:relative;padding:3px;margin:0 0 13px 5px}.train-engine .illustration{width:100%;height:100%}.train-engine i{position:absolute;bottom:-5px;left:5px;width:11px;height:11px;border-radius:50%;background:#998284}.train-engine i:last-child{left:auto;right:5px}.train-carriages{display:flex;flex-wrap:wrap;gap:9px}.train-slot{flex:1 1 110px;background:#fffbf2;border:2px dashed #d9c8ac;border-radius:10px;min-height:76px;padding:8px 10px;position:relative;text-align:center;opacity:1!important;color:#b8a990}.train-slot small{display:block;font-size:9px;font-weight:400;color:#b79d88;margin-bottom:9px}.train-slot>span{display:block;line-height:1.6;font-size:15px;overflow-wrap:anywhere}.train-slot.filled{background:#f0e1cc;border-style:solid;color:#977458}.train-slot.filled:nth-child(3n+1){background:#e3d9f0;border-color:#c8b4dc;color:#8d6c9f}.train-slot.filled:nth-child(3n+2){background:#e2ead9;border-color:#bdceb0;color:#81956c}.sentence-preview{width:100%;min-height:50px;background:#fffaf3;padding:13px 14px;border:1px dashed #e3d9c7;border-radius:10px;font-size:14px;line-height:1.9;color:#998773;overflow-wrap:anywhere}.word-carriages{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}.word-carriage{background:#f0e7f5;border:1px solid #decee8;box-shadow:0 3px 0 #e1d4e9;border-radius:10px;padding:10px 14px;min-height:44px;color:#8b719e;font-size:14px}.word-carriage:disabled{opacity:.25}.word-carriage:hover:not(:disabled){background:#e5d9ed}
.spelling-clue{display:flex;gap:19px;align-items:center;justify-content:center;background:#f1eaf6;border:1px solid #e2d5ec;border-radius:18px;padding:20px 22px;width:100%}.spelling-mascot{width:83px;height:83px;background:#fff6e2;border-radius:50%;padding:9px;flex-shrink:0}.spelling-clue h3{font-size:30px;line-height:1.5;color:#8f6da8;margin:6px 0 2px}.word-speak{color:#9a7aae;font-size:11px;padding:7px 0;gap:5px}.word-speak .icon{width:17px;height:17px}.letter-slots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:10px 0 4px;width:100%}.letter-slot{height:56px;width:42px;border:2px dashed #d8c9e5;border-radius:10px;background:#faf6fc;color:#9471aa;font-family:system-ui,sans-serif;font-size:25px;font-weight:700;position:relative;opacity:1!important;padding:3px 1px 8px}.letter-slot small{position:absolute;bottom:3px;left:0;width:100%;font-size:8px;font-weight:400;color:#beaaca}.letter-slot.filled{border-style:solid;background:#efe4f6}.letter-slot.correct{border-color:#b3c6a4;background:#edf4e4;color:#7e966b}.letter-palette{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;background:#f4eee7;padding:16px;border:1px solid #e8dfd4;border-radius:14px}.letter-tile{width:44px;height:47px;min-width:0;font:700 24px system-ui,sans-serif;color:#a18360;background:#fff7e7;border:1px solid #e7d4b8;box-shadow:0 3px 0 #e3d0b3;border-radius:9px}.letter-tile:disabled{opacity:.22;box-shadow:none}.letter-tile:hover:not(:disabled){background:#f5e4c6}
.post-heading{width:100%;display:flex;align-items:center;justify-content:center;gap:13px}.post-heading>span{width:65px;height:65px;flex-shrink:0}.post-heading h3{font-size:16px;color:#82969d;line-height:1.7}.post-heading p{font-size:11px;color:#9da5a4;line-height:1.8;margin-top:5px}.post-columns{display:grid;grid-template-columns:1.15fr 1fr;gap:21px;width:100%;align-items:start}.post-column{display:flex;flex-direction:column;gap:11px;min-width:0}.post-column>small{text-align:center;font-size:11px;color:#a2acb0;margin:5px 0}.post-word-row{display:flex;gap:5px;min-width:0}.post-card{position:relative;background:#edf3f4;border:1px solid #d2e1e4;border-radius:11px;min-height:58px;font-size:15px;line-height:1.5;color:#7c949c;padding:12px 8px;text-align:center;min-width:0;overflow-wrap:anywhere}.post-card.english{flex:1;font-family:system-ui,sans-serif;font-weight:650}.post-card.chinese{background:#f8f0e1;color:#a18865;border-color:#e9dac1}.post-card.selected{outline:3px solid #bba2cd;outline-offset:1px;background:#ede3f5;color:#9275a3}.post-card.matched{background:#e9efe1;border-color:#cad9be;color:#91a180;opacity:.6}.post-speak{width:31px;flex-shrink:0;background:#edf2f2;border:1px solid #dce5e4;border-radius:9px;color:#8dabb0;padding:0}.post-speak .icon{width:16px;height:16px}.mail-stamp{position:absolute;right:3px;top:3px;color:#98b084;background:#f8faef;border:1px dashed #a7b795;border-radius:50%;width:17px;height:17px;font-size:11px;transform:rotate(-15deg)}
.shoot-task{width:100%;background:#f1eaf4;border:1px solid #e2d6e7;border-radius:14px;padding:15px 18px;text-align:center}.shoot-task h3{font-size:19px;color:#8b709d;line-height:1.65;margin-top:5px;overflow-wrap:anywhere}.shoot-task p{font-size:12px;color:#a08bab;line-height:1.7;margin-top:5px}.shoot-hud{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#8a7698;gap:10px}.shoot-hud>span{background:#f1ebf6;border:1px solid #e7deed;padding:7px 12px;border-radius:9px}.shoot-hud b{font-size:16px;margin:0 3px;color:#9675b0}.shoot-stage{position:relative;width:100%;max-width:600px;aspect-ratio:600/520;border:5px solid #d7dce3;border-radius:18px;overflow:hidden;background:#e9eff6;isolation:isolate}.shoot-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.shoot-hit-zones{position:absolute;inset:0;pointer-events:none}.shoot-target{position:absolute;transform:translate(-50%,-50%);background:transparent;border-radius:50%;border:0;padding:0;pointer-events:auto;cursor:crosshair;touch-action:manipulation}.shoot-target:disabled{pointer-events:none}.shoot-target:focus-visible{outline:3px dashed #8972aa;outline-offset:3px;background:#fff9e029}.shoot-target:active{transform:translate(-50%,-50%)!important}.shoot-overlay{position:absolute;inset:0;z-index:2;background:#f7f4eeeb;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:20px;backdrop-filter:blur(2px)}.shoot-buddy{width:80px;height:80px;background:#eee4f4;border-radius:50%;padding:7px}.shoot-overlay strong{font-size:21px;color:#91729f;line-height:1.5}.shoot-overlay p{font-size:12px;line-height:1.85;max-width:320px;color:#a18aa8}.shoot-overlay .primary-button{font-size:12px;padding:10px 20px;min-height:40px}.shoot-note{font-size:11px!important;color:#a393aa!important}
.shoot-stage{max-width:470px}.shoot-controls{width:100%;padding:0}.train-scroll-hint{display:none}
@media(max-width:760px){.train-track{display:flex;align-items:center;gap:9px;padding:12px 8px 24px}.train-engine{flex-shrink:0;width:37px;height:39px;margin:0 2px 0 0}.train-carriages{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#c8b2d9 #f4eee4;gap:8px;padding:3px 4px 6px;scroll-snap-type:x proximity}.train-slot{flex:0 0 128px!important;min-height:84px;scroll-snap-align:center}.train-scroll-hint{display:block;width:100%;font-size:10px;color:#ac97b4;text-align:center;margin-top:-9px}}
@media(max-width:1050px){.new-adventures{display:none}.post-columns{gap:14px}.post-card{font-size:14px}}
@media(max-width:760px){.subject-bar{margin:0 0 20px}.subject-options{gap:6px;width:100%}.subject-filter{padding:9px 12px;font-size:12px;flex:1;justify-content:center}.subject-filter small{font-size:9px}.pinyin-text{font-size:27px}.word-garden-card{padding:18px}.word-garden-card p{font-size:13px}.flower-word{font-size:22px}.sentence-task{padding:12px}.post-card{min-height:56px}.shoot-stage{border-width:4px}.shoot-task h3{font-size:18px}.shoot-overlay strong{font-size:19px}.spelling-clue h3{font-size:27px}}
@media(max-width:420px){.subject-options{gap:4px}.subject-filter{padding:8px 4px;gap:4px;font-size:11px;min-height:40px}.subject-filter small{font-size:8px;padding:2px 3px}.lesson-kicker{font-size:10px;letter-spacing:.5px}.pinyin-text{font-size:23px}.word-garden-card{padding:14px 12px}.flower-choices{gap:5px 18px;padding:5px 6px 0}.flower-word{font-size:19px;min-height:66px;border-width:7px;letter-spacing:0;padding:7px 3px}.flower-choice{min-height:100px}.lesson-progress{font-size:10px}.lesson-progress i{width:17px}.sentence-order{gap:4px}.sentence-order span{font-size:10px;padding:4px 6px}.train-slot{flex-basis:110px;min-height:72px;padding:7px}.train-slot>span{font-size:13px}.train-slot small{font-size:8px}.word-carriage{font-size:12px;padding:9px 10px;min-height:42px}.sentence-preview{font-size:13px;padding:11px}.spelling-clue{padding:14px 12px;gap:12px}.spelling-mascot{width:64px;height:64px}.spelling-clue h3{font-size:25px}.letter-slots{gap:5px}.letter-slot{width:34px;height:48px;font-size:22px;border-radius:8px}.letter-palette{padding:12px 9px;gap:7px}.letter-tile{width:37px;height:43px;font-size:22px}.post-columns{gap:12px;grid-template-columns:1.2fr 1fr}.post-heading h3{font-size:13px}.post-heading p{font-size:10px}.post-heading>span{width:52px;height:52px}.post-word-row{gap:3px}.post-card{font-size:12px;min-height:57px;padding:13px 5px}.post-speak{width:25px}.post-speak .icon{width:14px;height:14px}.post-column{gap:9px}.shoot-task{padding:12px}.shoot-task h3{font-size:16px}.shoot-task p{font-size:11px}.shoot-hud{font-size:11px}.shoot-hud>span{padding:6px 9px}.shoot-hud b{font-size:15px}.shoot-stage{border-radius:14px}.shoot-buddy{width:58px;height:58px}.shoot-overlay{gap:9px;padding:13px}.shoot-overlay strong{font-size:17px}.shoot-overlay p{font-size:11px}.shoot-overlay .primary-button{font-size:11px;min-height:36px;padding:8px 18px}}