/* 手机体验 + 幼小/小学“少文字、多动手”。放在最后加载，覆盖前面的同名规则。
   手机：一行顶栏（图标导航 + ⚙ 设置下拉），弹窗变成从底部升起的抽屉。
   幼小（kid）：标题下的说明、卡片副标题、操作提示都隐藏，靠图、图标和 🔊 朗读；小学（primary）在手机上同样精简。 */

/* ---------- 通用：大按钮、圆形朗读键、圆形翻页键 ---------- */
.btn.big{min-height:56px;padding:12px 24px;font-size:1.06rem;border-radius:18px}
.read-btn.big{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border-radius:50%;font-size:1.25rem;line-height:1}
.round-btn{display:inline-grid;place-items:center;width:58px;height:58px;border:0;border-radius:50%;background:var(--tile-top);color:var(--ink);font-size:1.2rem;box-shadow:0 5px 0 var(--tile-side);transition:transform .2s var(--spring)}
.round-btn.next{background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-side)}
.round-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tile-side)}
.round-btn:disabled{opacity:.35}
#prefs-toggle{display:none}
.section-top.tight{margin:28px 0 12px}

/* ---------- 学段密度 ---------- */
html[data-age=kid] .page-heading p,html[data-age=kid] .page-heading .eyebrow,
html[data-age=kid] .hero-card .intro,html[data-age=kid] .hero-card .eyebrow,html[data-age=kid] .section-top p,
html[data-age=kid] .isle-copy p,html[data-age=kid] .isle-copy span,html[data-age=kid] .game-card .copy p,html[data-age=kid] .game-card .kicker,
html[data-age=kid] .hint,html[data-age=kid] .route-footer,html[data-age=kid] .route-unlocated,
html[data-age=kid] .toolbar label,html[data-age=kid] .toolbar [aria-label="地名"],html[data-age=kid] .tutor-panel>p,html[data-age=kid] .chat-top small{display:none}
html[data-age=kid] .page-heading{margin-bottom:12px}
html[data-age=kid] .page-heading h1{font-size:clamp(1.8rem,7vw,2.6rem)}

/* ---------- 首页（幼小、小学） ---------- */
.hero.lite .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-guide.talk{display:flex;align-items:flex-end;gap:10px;margin-top:16px}
.hero-guide.talk>div{flex:0 0 96px}.hero-guide.talk svg{width:96px;height:124px}
.bubble-say{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 30px;padding:12px 14px;border-radius:18px 18px 18px 4px;background:var(--tile-top);box-shadow:0 3px 0 var(--tile-side)}
.bubble-say b{font-size:1rem}
.seek-entry{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;margin-top:14px;padding:8px 14px 8px 8px;border:0;border-radius:20px;background:linear-gradient(135deg,#fff6dc,#ffe9c4);text-align:left;box-shadow:0 4px 0 #e8c98a;transition:transform .2s var(--spring)}
html[data-time=night] .seek-entry{background:linear-gradient(135deg,#4a466e,#3b3d68);box-shadow:0 4px 0 #262850}
.seek-entry svg{width:92px;height:72px;border-radius:14px;background:radial-gradient(70% 70% at 50% 55%,#3fa3c8,var(--sea) 72%)}
.seek-entry b{display:block;font-size:1.08rem;letter-spacing:.08em}.seek-entry small{color:var(--ink-soft);font-size:.8rem}
.seek-entry i{font-style:normal;font-size:1.3rem;color:var(--coral)}
.seek-entry:active{transform:translateY(3px)}
.chapter-panel.lite{display:block}
.quick-line{display:flex;align-items:center;gap:12px}
.quick-line .no{flex:none;width:52px;height:58px;display:grid;place-items:center;background:var(--coral);color:#fff;font-size:1.3rem;font-weight:700;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.quick-line p{flex:1;margin:0;font-size:1.08rem;font-weight:600;color:var(--ink)}
.quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.quick-actions.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.quick{display:grid;justify-items:center;gap:4px;min-height:96px;padding:10px 6px;border:0;border-radius:18px;background:var(--tile-top);color:var(--ink);text-decoration:none;box-shadow:0 4px 0 var(--tile-side);transition:transform .2s var(--spring)}
.quick svg{width:54px;height:48px}.quick b{font-size:.9rem;letter-spacing:.06em}
.quick:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tile-side)}
.isle-found{position:absolute;top:8px;right:10px;color:var(--ochre);font-style:normal;font-size:1.2rem;text-shadow:0 1px 0 #fff}
.isle{position:relative}

/* ---------- 绘本（幼小、小学） ---------- */
.story-line{margin:6px 0 14px;font-size:1.22rem;line-height:1.65;font-weight:600;color:var(--ink)!important}
.story-play{display:flex;align-items:center;gap:12px}
.autobar{height:5px;margin:14px 0 4px;border-radius:3px;background:rgba(34,64,90,.1);overflow:hidden}
.autobar i{display:block;height:100%;width:0;background:var(--teal)}
.autobar.run i{animation:autobar var(--ms,5s) linear forwards}
@keyframes autobar{to{width:100%}}
.story-controls.round{justify-content:space-between;margin-top:14px}
.swipe-hint{display:none;margin:8px 0 0;text-align:center;color:var(--muted);font-size:.78rem}
.storybook.lite .story-caption{touch-action:pan-y}
html[data-age=kid] .storybook.lite .stage-chip{display:none}

/* ---------- 地图（幼小、小学）与地点抽屉 ---------- */
.stop-drawer>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:18px;background:var(--card);box-shadow:var(--shadow-sm);font-weight:700}
.stop-drawer>summary::after{content:'▾';transition:transform .2s}.stop-drawer[open]>summary::after{transform:rotate(180deg)}
.stop-drawer>summary::-webkit-details-marker{display:none}
.stop-drawer[open]>summary{margin-bottom:10px}
@media (min-width:861px){.stop-drawer>summary{display:none}}
.detail-content.lite h2{margin-top:0}
.lead-row{display:flex;align-items:flex-start;gap:12px;margin:8px 0 12px}
.lead-row .lead{flex:1;margin:0;font-size:1.2rem;line-height:1.6;font-weight:600}
.detail-content.lite .quick-actions{margin:14px 0}
.note.more{margin-top:6px}

/* ---------- 闯关（幼小、小学） ---------- */
.prompt-row{display:flex;align-items:center;gap:12px;margin:12px 0 4px}
.prompt-row .game-prompt{flex:1;margin:0}
html[data-age=kid] .game-prompt{font-size:1.2rem}
.why{margin-top:6px}.why summary{cursor:pointer;font-weight:600}
.pack-zone{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"bag slots" "bag note";align-items:center;gap:4px 14px;margin:14px 0 4px;padding:12px 16px;border:3px dashed var(--ochre);border-radius:22px;background:rgba(228,178,76,.08);transition:background .2s}
.pack-zone.over{background:rgba(228,178,76,.28)}
.pack-bag{grid-area:bag;font-size:2.6rem;line-height:1}
.pack-zone.took .pack-bag{animation:pop .45s var(--spring)}
.pack-slots{grid-area:slots;display:flex;gap:8px;flex-wrap:wrap}
.pack-zone small{grid-area:note;color:var(--muted);font-size:.78rem}
.slot{display:grid;place-items:center;width:58px;height:52px;border-radius:14px;background:#fff6dc;animation:pop .4s var(--spring)}
.slot svg{width:46px;height:40px}.slot.empty{background:transparent;border:2px dashed rgba(185,138,44,.45);animation:none}
.drag-ghost{position:fixed;z-index:300;width:80px;height:70px;margin:-35px 0 0 -40px;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(34,64,90,.35));transform:scale(1.15)}
.drag-ghost svg{width:100%;height:100%}
.seek-shelf{margin-top:8px}
.seek-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.seek-card{position:relative;display:grid;justify-items:center;gap:4px;padding:8px 8px 12px;border:0;border-radius:20px;background:var(--card);box-shadow:var(--shadow-sm);transition:transform .25s var(--spring)}
.seek-card svg{width:100%;height:96px;border-radius:14px;background:radial-gradient(70% 70% at 50% 55%,#3fa3c8,var(--sea) 72%)}
.seek-card b{letter-spacing:.06em}
.seek-card i{position:absolute;top:6px;right:8px;font-style:normal;color:var(--ochre);font-size:1.3rem;text-shadow:0 1px 0 #fff}
.seek-card.done{box-shadow:0 0 0 3px var(--ochre),var(--shadow-sm)}
.seek-card:active{transform:translateY(3px)}

/* ---------- 小岛寻宝 ---------- */
.seek{padding:clamp(16px,3vw,28px)}
.seek-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.seek-head h2{margin:.2em 0 0;letter-spacing:.08em}
.seek-tray{display:flex;gap:10px;margin:12px 0;overflow-x:auto;padding:6px 2px}
.seek-want{position:relative;flex:none;display:grid;justify-items:center;gap:2px;min-width:92px;padding:8px 10px;border-radius:18px;background:var(--tile-top);box-shadow:0 3px 0 var(--tile-side)}
.seek-want svg{width:58px;height:50px}.seek-want b{font-size:.8rem;font-weight:600;white-space:nowrap}
.seek-want i{position:absolute;top:-6px;right:-6px;display:none;place-items:center;width:26px;height:28px;background:var(--grass);color:#fff;font-style:normal;font-size:.85rem;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.seek-want.got{background:#eaf6e2;box-shadow:0 3px 0 #b8d8a2}.seek-want.got i{display:grid;animation:pop .5s var(--spring)}
html[data-time=night] .seek-want.got{background:#2f5a46}
.seek-board{position:relative;aspect-ratio:4/3;max-height:58dvh;margin:0 auto;border-radius:22px;overflow:hidden;cursor:pointer;touch-action:manipulation;background:radial-gradient(70% 66% at 50% 56%,#3fa3c8,var(--sea) 70%,var(--sea-deep))}
.seek-board svg{width:100%;height:100%}
.seek-map polygon.found{stroke:#ffd34d!important;stroke-width:.14!important}
.seek-marks{position:absolute;inset:0;pointer-events:none}
.seek-mark{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:5px solid #ffd34d;box-shadow:0 0 0 4px rgba(255,255,255,.5);animation:mark-in .5s var(--spring) both}
.seek-mark.miss{width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid rgba(255,255,255,.85);box-shadow:none;animation:mark-miss .6s ease-out both}
@keyframes mark-in{from{transform:scale(.2);opacity:0}}
@keyframes mark-miss{to{transform:scale(1.6);opacity:0}}
.seek-foot{display:flex;align-items:center;gap:10px;margin-top:10px}
.seek-foot .feedback{flex:1;margin:0}
.seek-next{display:flex;justify-content:space-between;gap:10px;margin-top:12px}

/* ---------- 庆祝彩纸 ---------- */
.confetti{position:fixed;inset:0;z-index:400;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-24px;left:var(--x);width:12px;height:14px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:confetti-fall var(--d,1.2s) cubic-bezier(.2,.65,.4,1) forwards}
@keyframes confetti-fall{to{transform:translate(var(--dx),105vh) rotate(var(--r))}}

/* ---------- 手机 ---------- */
@media (max-width:860px){
 html{scroll-padding-top:12px}
 /* 一行顶栏：小印章 + 六个图标标签 + ⚙ */
 /* 不吸顶：滚动时导航不盖住小岛、翻页键和输入框（与原有的“无遮挡”约定一致） */
 .header{position:relative;top:auto;flex-wrap:nowrap;gap:6px;width:100%;margin:0 0 6px;padding:6px 8px;border-radius:0 0 20px 20px}
 .brand-copy{display:none}.brand-mark,.brand-mark svg{width:34px;height:34px}
 .nav{order:0;position:static;display:flex;flex:1 1 auto;justify-content:space-between;width:auto;margin:0;padding:0;border:0;gap:0;background:none;box-shadow:none}
 .nav a{flex:1 1 0;flex-direction:column;justify-content:center;gap:1px;min-width:0;min-height:50px;padding:4px 1px;border-radius:12px;font-size:.6rem}
 .nav a b{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip}
 .nav a span,.nav a span svg{width:24px;height:24px}
 #prefs-toggle{display:inline-grid;flex:none;width:40px;height:40px;font-size:1.1rem}
 .prefs{display:none;position:absolute;right:8px;top:calc(100% + 6px);z-index:60;flex-wrap:wrap;gap:8px;width:min(280px,calc(100vw - 16px));padding:12px;margin:0;border-radius:18px;background:var(--card-solid);box-shadow:var(--shadow)}
 html[data-prefs=open] .prefs{display:flex}
 .prefs .tile-select{flex:1 1 100%;max-width:none!important;width:100%;font-size:16px}
 .prefs .tile-icon{flex:1;width:auto}
 main{width:calc(100% - 20px)}
 /* 精简：小学在手机上也只留标题 */
 html[data-age=primary] .page-heading p,html[data-age=primary] .hero-card .intro,html[data-age=primary] .isle-copy p,html[data-age=primary] .game-card .copy p,html[data-age=primary] .section-top p{display:none}
 .page-heading{margin:4px 0 12px}
 .page-heading h1{font-size:1.8rem}
 .hero.lite .hero-card h1{font-size:1.9rem}
 .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quick-actions.three{grid-template-columns:repeat(3,minmax(0,1fr))}
 .quick{min-height:88px}
 .story-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
 .story-tabs button{flex:none;scroll-snap-align:start}
 .swipe-hint{display:block}
 .archipelago{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%}
 /* 弹窗 → 底部抽屉 */
 dialog{width:100%;max-width:100%;margin:auto 0 0;max-height:92dvh;border-radius:26px 26px 0 0}
 dialog[open]{animation:sheet-up .4s var(--spring)}
 .dialog-bar{position:relative;padding-top:18px!important;touch-action:none}/* 下拉关闭由脚本处理，别让浏览器接管手势 */
 .dialog-bar::before{content:'';position:absolute;left:50%;top:7px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(34,64,90,.22)}
 .seek-board{aspect-ratio:1/1}
 .seek-want{min-width:84px}
}
@keyframes sheet-up{from{transform:translateY(45%);opacity:.5}}
@media (max-width:420px){.hero.lite .hero-actions{grid-template-columns:1fr}.seek-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.seek-card svg{height:84px}}
html[data-motion=off] .autobar.run i{animation:none;width:100%}