:root{--c-cream:#FFF6E9;--c-coral:#F4664A;--c-coral-dark:#D8472C;--c-yellow:#FFC233;--c-green:#7AC77E;--c-blue:#BFE8FB;--c-navy:#2E3A59;--c-pine:#31403A;--hit-min:80pt;--card-hit:200pt;--gap-min:24pt;--font-char:clamp(120px,24vh,240px);--font-ui:clamp(20px,3.5vh,34px);--font-title:clamp(28px,5vh,52px);--radius-card:28px;--radius-btn:20px;--shadow-card:0 8px 22px rgba(46,58,89,.16);--ring-correct:0 0 0 10px rgba(122,199,126,.55);--t-fast:.12s;--t-pop:.26s;--t-fly:.65s;--ease-pop:cubic-bezier(.34,1.56,.64,1)}html,body,#root{margin:0;height:100%;background:var(--c-cream);color:var(--c-navy);font-family:-apple-system,PingFang SC,system-ui,sans-serif;-webkit-text-size-adjust:100%}*{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-sizing:border-box}body{overscroll-behavior:none}button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer}@keyframes pop-bounce{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes head-shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.is-correct{animation:pop-bounce var(--t-pop) var(--ease-pop);box-shadow:var(--ring-correct)}.is-wrong{animation:head-shake .36s ease-in-out}.root-layout{min-height:100%;display:flex;flex-direction:column}.page{flex:1;padding:max(16px,env(safe-area-inset-top)) 24px 24px;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:16px;min-height:64px}.back-btn{min-width:var(--hit-min);min-height:var(--hit-min);font-size:36px;border-radius:var(--radius-btn);background:var(--c-blue);box-shadow:var(--shadow-card)}.topbar-title{font-size:var(--font-title);font-weight:700}.spacer{flex:1}.star-pocket{position:fixed;left:16px;bottom:16px;z-index:40;display:flex;align-items:center;gap:8px;background:var(--c-navy);color:#fff;padding:10px 18px;border-radius:999px;font-size:28px;font-weight:700;box-shadow:var(--shadow-card)}.star-pocket .star{color:var(--c-yellow)}.gear{position:fixed;right:14px;bottom:14px;z-index:40;width:48px;height:48px;font-size:28px;opacity:.35}.garage{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-min);align-content:center;flex:1}.veh-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:var(--card-hit);min-height:var(--card-hit);background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px;transition:transform var(--t-fast)}.veh-card:active{transform:scale(.96)}.veh-card--garage{filter:grayscale(1) opacity(.5)}.veh-art{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0}.veh-svg{width:100%;height:100%;max-height:22vh;object-fit:contain}.veh-emoji{font-size:clamp(56px,12vh,120px);line-height:1}.veh-label{font-size:var(--font-ui);font-weight:700;color:var(--c-navy)}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap-min)}.media-card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px}.media-card .thumb-emoji{font-size:64px}.media-card .media-title{font-size:var(--font-ui);font-weight:700;text-align:center}.video-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#000;border-radius:var(--radius-card);overflow:hidden}.video-wrap video{width:100%;height:100%;max-height:80vh}.lesson{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.big-char{font-size:var(--font-char);font-weight:800;color:var(--c-navy);line-height:1}.pinyin{font-size:var(--font-ui);color:var(--c-coral);font-weight:700}.words{font-size:var(--font-ui);color:var(--c-pine)}.speaker-btn{min-width:var(--hit-min);min-height:var(--hit-min);font-size:40px;border-radius:999px;background:var(--c-yellow);box-shadow:var(--shadow-card)}.quiz{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}.quiz-q{font-size:var(--font-ui);font-weight:700}.quiz-options{display:flex;gap:var(--gap-min);flex-wrap:wrap;justify-content:center}.quiz-opt{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px;min-height:140px;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px 24px}.quiz-opt .opt-icon{font-size:56px}.quiz-opt .opt-label{font-size:48px;font-weight:800}.quiz-opt.is-hint{outline:6px solid var(--c-green)}.store-bar{font-size:var(--font-title);font-weight:800;color:var(--c-yellow);-webkit-text-stroke:1px var(--c-navy);margin-bottom:12px}.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--gap-min)}.reward-card{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:var(--card-hit);background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px}.reward-card.reward--locked{filter:grayscale(.7) opacity(.55)}.reward-emoji{font-size:64px}.reward-img{width:96px;height:96px;object-fit:cover;border-radius:16px}.reward-name{font-size:var(--font-ui);font-weight:700;text-align:center}.reward-price{font-size:24px;font-weight:800;color:var(--c-coral)}.ticket{display:flex;align-items:center;gap:16px;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:18px 24px;margin-bottom:16px}.ticket .truck{font-size:48px}.ticket .t-name{font-size:var(--font-ui);font-weight:700;flex:1}.ticket .t-status{font-size:20px;font-weight:700;padding:6px 14px;border-radius:999px}.t-status.pending{background:var(--c-yellow)}.t-status.fulfilled{background:var(--c-green);color:#fff}.dialog-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#2e3a5973;display:flex;align-items:center;justify-content:center;z-index:60}.dialog{background:#fff;border-radius:var(--radius-card);padding:32px;display:flex;flex-direction:column;gap:24px;max-width:520px;box-shadow:0 16px 40px #00000040}.dialog-title{font-size:var(--font-title);font-weight:800;text-align:center}.dialog-actions{display:flex;gap:24px;justify-content:center}.btn{min-width:var(--hit-min);min-height:var(--hit-min);font-size:var(--font-ui);font-weight:700;border-radius:var(--radius-btn);padding:14px 32px;box-shadow:var(--shadow-card)}.btn-yes{background:var(--c-green);color:#fff}.btn-no{background:var(--c-blue)}.flying-star{position:fixed;z-index:70;font-size:40px;color:var(--c-yellow);pointer-events:none;transition:transform var(--t-fly) cubic-bezier(.4,0,.2,1),opacity var(--t-fly)}.orientation-gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;background:var(--c-cream);display:none;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:32px}.orientation-gate .rot{font-size:96px;animation:head-shake 1.2s ease-in-out infinite}.orientation-gate p{font-size:var(--font-title);font-weight:700}@media(orientation:portrait){.orientation-gate{display:flex}}.hint{font-size:var(--font-ui);color:var(--c-pine);text-align:center;margin:auto}.admin{max-width:680px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:20px}.admin h1{font-size:28px}.admin section{background:#fff;border-radius:16px;padding:20px;box-shadow:var(--shadow-card)}.admin label{display:block;font-weight:600;margin-bottom:6px}.admin input,.admin button.admin-btn{font-size:18px;padding:10px 14px;border-radius:10px;border:1px solid #ddd}.admin button.admin-btn{background:var(--c-coral);color:#fff;border:none;font-weight:700;cursor:pointer}.admin .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.admin .err{color:var(--c-coral-dark);font-weight:600}.big-visual{font-size:clamp(56px,15vh,130px);line-height:1.15;text-align:center;letter-spacing:6px}.opt-pinyin{font-size:22px;color:var(--c-coral);font-weight:700;margin-top:2px}.video-tile{display:flex;flex-direction:column;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);background:#fff;transition:transform var(--t-fast)}.video-tile:active{transform:scale(.97)}.video-tile .screen{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--c-coral),var(--c-yellow))}.video-tile .screen img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.video-tile .play{position:relative;width:84px;height:84px;border-radius:999px;background:#fffffff0;display:flex;align-items:center;justify-content:center;font-size:38px;color:var(--c-coral);box-shadow:0 4px 14px #00000038;padding-left:6px}.video-tile .deco{position:absolute;right:10px;bottom:8px;font-size:30px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}.video-tile .tile-title{padding:14px 16px;font-size:var(--font-ui);font-weight:700;text-align:center;color:var(--c-navy)}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.photo-thumb{aspect-ratio:1;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);background:#fff;padding:0}.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#2e3a59ed;z-index:80;display:flex;align-items:center;justify-content:center}.lightbox img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:12px}.lightbox .lb-close{position:fixed;top:14px;right:18px;font-size:44px;color:#fff;background:none}.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.admin-tab{padding:10px 16px;border-radius:999px;background:#eee;font-weight:700;font-size:16px;border:none;cursor:pointer}.admin-tab.active{background:var(--c-coral);color:#fff}.adm-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eee;flex-wrap:wrap}.adm-item .grow{flex:1;min-width:120px}.adm-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px}.adm-muted{color:#999}.adm-off{opacity:.5}.admin select{font-size:18px;padding:10px;border-radius:10px;border:1px solid #ddd}.admin .num{width:90px}.badge{font-size:13px;padding:3px 8px;border-radius:999px;background:#eee}.badge.on{background:var(--c-green);color:#fff}.badge.off{background:#ddd}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--gap-min)}.level-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:18px;transition:transform var(--t-fast);border:4px solid transparent}.level-card:active{transform:scale(.96)}.level-card.level-cleared{border-color:var(--c-green)}.level-no{font-size:30px;font-weight:800;color:var(--c-coral)}.level-title{font-size:var(--font-ui);font-weight:700;color:var(--c-navy);text-align:center}.level-prog{font-size:18px;font-weight:700;color:var(--c-yellow);-webkit-text-stroke:.5px var(--c-navy)}.level-cleared .level-prog{color:var(--c-green);-webkit-text-stroke:0}.level-emoji{font-size:clamp(48px,9vh,84px);line-height:1}.char-row{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,48px)}.stage-icon{font-size:clamp(80px,18vh,170px);line-height:1}.char-row .big-char{font-size:clamp(96px,20vh,200px)}.gate-loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--c-navy);font-size:20px;background:var(--c-cream)}.gate{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--c-cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px}.gate-logo{width:min(60vw,340px);max-height:36vh;object-fit:contain}.gate-card{background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:28px;display:flex;flex-direction:column;gap:14px;align-items:center;width:min(92vw,420px)}.gate-title{font-size:28px;font-weight:800;color:var(--c-coral)}.gate-sub{font-size:18px;color:var(--c-navy)}.gate-input{font-size:22px;padding:14px 16px;border-radius:14px;border:2px solid #e5ddcb;width:100%;text-align:center}.gate-btn{font-size:22px;font-weight:800;color:#fff;background:var(--c-coral);border-radius:14px;padding:14px 28px;width:100%;letter-spacing:4px}.gate-btn:disabled{opacity:.6}.gate-err{color:var(--c-coral-dark);font-weight:700}