:root{--bg:#fff8e7;--ink:#3b2f5c;--pink:#ff7eb6;--blue:#4cc3ff;--green:#5fd38d;--yellow:#ffd23f;--orange:#ff9f43;--purple:#9b7bff;--card:#ffffff;--r:24px}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:18px;line-height:1.6;-webkit-tap-highlight-color:transparent}
a{color:inherit}
.wrap{max-width:1000px;margin:0 auto;padding:16px}
header.top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-bottom:4px solid var(--yellow);position:sticky;top:0;z-index:5}
header.top .brand{font-weight:800;font-size:22px;text-decoration:none;display:flex;align-items:center;gap:8px}
header.top .brand svg{width:40px;height:40px}
.back{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:8px 18px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;text-decoration:none;font-size:18px}
h1{font-size:30px;margin:12px 0}
h2{font-size:24px;margin:10px 0}
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:0 6px 0 rgba(59,47,92,.08);margin:16px 0}
.btn{border:none;cursor:pointer;font:inherit;font-weight:800;font-size:20px;min-height:56px;min-width:56px;padding:10px 20px;border-radius:18px;color:#fff;background:var(--purple);box-shadow:0 5px 0 rgba(0,0,0,.18);touch-action:manipulation;user-select:none}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.green{background:var(--green)}.btn.pink{background:var(--pink)}.btn.orange{background:var(--orange)}.btn.blue{background:var(--blue)}.btn.gray{background:#9aa0b5}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.say{display:flex;gap:12px;align-items:flex-start}
.say svg{width:72px;height:72px;flex:none}
.bubble{background:#fff;border:3px solid var(--purple);border-radius:20px;padding:10px 16px;position:relative;font-size:20px;min-height:52px}
.bubble:before{content:"";position:absolute;left:-14px;top:18px;border:8px solid transparent;border-right-color:var(--purple);border-width:8px 12px 8px 2px}
.parent{background:#eef8ff;border-left:8px solid var(--blue);border-radius:16px;padding:14px 18px;font-size:16px}
.parent b{color:#1f6fa8}
footer{text-align:center;font-size:14px;color:#8a80a6;padding:24px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bob{animation:bob 2.4s ease-in-out infinite}
@media (max-width:600px){h1{font-size:24px}.btn{font-size:18px}}
/* ===== v2: gallery + activity engines ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{border:none;font:inherit;font-weight:700;font-size:16px;min-height:44px;padding:6px 14px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.08);cursor:pointer}
.chip.on{background:var(--purple);color:#fff}
.tag{display:inline-block;font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px;background:#f1ecff;color:#6a4fd6}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.gcard{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:22px;padding:14px;text-decoration:none;box-shadow:0 6px 0 rgba(59,47,92,.08);transition:transform .15s;min-height:150px}
.gcard:hover,.gcard:focus{transform:translateY(-3px)}
.gcard .ge{font-size:46px;line-height:1.1}
.gcard b{font-size:19px}
.gcard p{margin:0;font-size:15px;color:#6b5f8a;flex:1}
.gcard .num{font-size:12px;color:#aaa}
.navrow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0}
.navrow a{text-decoration:none}
.stage{min-height:200px}
.big{font-size:64px;line-height:1.1}
.center{text-align:center}
.muted{color:#6b5f8a;font-size:15px}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.jump{animation:jump2 .6s ease}
@keyframes jump2{0%{transform:none}30%{transform:translateY(-30px) scale(1.12,.92)}60%{transform:translateY(0) scale(.92,1.08)}100%{transform:none}}
.spin{animation:spin .7s ease}
@keyframes spin{to{transform:rotate(360deg)}}
.grow{animation:grow .6s ease}
@keyframes grow{40%{transform:scale(1.35)}100%{transform:none}}
.pop{animation:grow .4s ease}
.tapgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
.tapbtn{border:none;font:inherit;cursor:pointer;border-radius:30px;min-height:140px;font-size:78px;line-height:1;box-shadow:0 8px 0 rgba(0,0,0,.12);touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink)}
.tapbtn span{display:inline-block}
.tapbtn .tlab{font-size:22px;font-weight:800;min-height:28px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-top:14px}
.opt{border:none;font:inherit;cursor:pointer;background:#fff;border-radius:26px;min-height:120px;font-size:60px;line-height:1.1;box-shadow:0 7px 0 rgba(0,0,0,.12);padding:10px;color:var(--ink);touch-action:manipulation}
.opt.txt{font-size:22px;font-weight:700;min-height:80px}
.opt.right{background:#c9f5d9}
.qbox{background:#fff;border-radius:24px;padding:16px;text-align:center;font-size:54px;line-height:1.3}
.qbox .qt{font-size:22px;font-weight:700;display:block}
.seqrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.seqrow>span{display:inline-flex;align-items:center;justify-content:center;min-width:76px;min-height:76px;border-radius:18px;background:#f6f2ff}
.seqrow>span.q{background:#ffe9a8;font-weight:800}
.dots{display:flex;gap:6px;justify-content:center;margin:8px 0;font-size:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px}
.mcard{border:none;cursor:pointer;font:inherit;border-radius:20px;min-height:110px;font-size:54px;background:var(--purple);color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.15);transition:transform .25s;touch-action:manipulation}
.mcard.open{background:#fff;color:var(--ink);transform:rotateY(360deg)}
.mcard.done{background:#c9f5d9;color:var(--ink)}
.mcard.txt{font-size:18px;font-weight:700}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cols .opt{min-height:84px;font-size:40px;width:100%}
.cols .opt.txt{font-size:18px}
.opt.sel{outline:6px solid var(--yellow)}
.opt.done{background:#c9f5d9}
.slots{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:120px;background:#fff;border-radius:22px;padding:10px;border:4px dashed #d9cfee}
.slot{width:110px;min-height:100px;border-radius:18px;background:#f6f2ff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:44px;position:relative}
.slot small{font-size:14px;font-weight:700;text-align:center;line-height:1.2}
.slot .n{position:absolute;top:2px;left:8px;font-size:14px;color:#9a8fc0}
.slot.glow{background:#ffe9a8}
.stcard{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;border-radius:24px;min-height:260px;padding:20px}
.stcard .big{font-size:96px}
.stcard p{font-size:22px;max-width:640px}
.tray2{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:100px;padding:10px;border-radius:22px;background:#fff;border:4px dashed #d9cfee}
.sitem{width:84px;height:84px;border-radius:50%;font-size:48px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;user-select:none;background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.15);border:3px solid #eee}
.sitem.sel{outline:6px solid var(--yellow)}
.sitem.dragging{position:fixed;z-index:50;pointer-events:none;transform:scale(1.15)}
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:14px}
.bin{min-height:150px;border-radius:26px 26px 44px 44px;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:4px;padding:10px;border:5px solid rgba(0,0,0,.08);cursor:pointer}
.bin .bl{width:100%;text-align:center;font-size:40px;line-height:1.2}
.bin .bl small{display:block;font-size:16px;font-weight:800}
.bin .sitem{width:50px;height:50px;font-size:28px;box-shadow:none;cursor:default;border:none}
.bin.hover{transform:scale(1.05)}
.cgrid{display:grid;gap:5px;background:#c9a77c;padding:6px;border-radius:18px;width:100%;max-width:460px;aspect-ratio:1/1}
.cgrid .c{background:#d8f5c8;border-radius:9px;position:relative;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,5vw,34px);overflow:hidden;cursor:pointer}
.cgrid .c .v{position:absolute;inset:0;pointer-events:none}
.cgrid .c .ar{position:absolute;bottom:0;right:2px;font-size:12px;opacity:.75}
.cgrid .c .ag{position:absolute;inset:6%;z-index:2;display:flex;align-items:center;justify-content:center}
.cgrid .c .ag svg{width:100%;height:100%}
.cgrid .c.w{background:#7cc36a}
.two{display:grid;grid-template-columns:minmax(260px,460px) 1fr;gap:18px;align-items:start}
@media (max-width:780px){.two{grid-template-columns:1fr}}
.prog2{display:flex;flex-wrap:wrap;gap:6px;min-height:60px;background:#fff;border-radius:16px;padding:8px;border:3px dashed #b7a8e8}
.prog2 button{font:inherit;font-size:24px;border:none;background:#f1ecff;border-radius:10px;padding:2px 8px;min-height:48px;cursor:pointer}
.prog2 button.now{background:#ffd23f}
.area{position:relative;height:380px;border-radius:24px;overflow:hidden;background:linear-gradient(#bfe9ff,#e8f8ff);touch-action:manipulation}
.bub{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(180,230,255,.45) 40%,rgba(120,190,255,.35));border:2px solid rgba(255,255,255,.8);user-select:none}
.bub.balloon{border-radius:50% 50% 46% 46%;border:none}
.bub.popping{transform:scale(1.6);opacity:0;transition:all .25s}
canvas.play{width:100%;border-radius:24px;background:#fff;touch-action:none;display:block;box-shadow:0 6px 0 rgba(0,0,0,.08)}
input[type=range]{width:100%;height:40px;accent-color:#9b7bff}
.stat{font-size:20px;font-weight:800}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.peek{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.pslot{position:relative;height:170px;border-radius:28px;background:#fff7d6;overflow:hidden;cursor:pointer;border:none;font:inherit}
.pslot .who{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:80px}
.pslot .cov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:110px;transition:transform .45s cubic-bezier(.5,1.6,.4,1);background:#ffe3a3}
.pslot.open .cov{transform:translateY(-82%)}
.pads{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.pad{border:none;font:inherit;cursor:pointer;border-radius:24px;min-height:130px;font-size:52px;color:#fff;font-weight:800;box-shadow:0 7px 0 rgba(0,0,0,.18);touch-action:manipulation;transition:filter .1s,transform .1s}
.pad.lit{filter:brightness(1.35) saturate(1.3);transform:scale(1.06)}
.pad.next{outline:6px dashed var(--ink)}
.keys{display:flex;gap:6px;height:220px}
.keys .pad{flex:1;min-width:0;min-height:0;height:100%;font-size:26px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;border-radius:0 0 18px 18px}
.spotg{display:grid;gap:4px;background:#e8e0ff;padding:6px;border-radius:16px}
.spotg button{border:none;font:inherit;background:#fff;border-radius:10px;aspect-ratio:1/1;font-size:clamp(20px,5vw,34px);cursor:pointer;padding:0}
.spotg button.found{background:#ffe9a8;outline:4px solid var(--orange)}
#restOv{position:fixed;inset:0;background:rgba(59,47,92,.55);display:none;align-items:center;justify-content:center;z-index:100}
#restOv .card{max-width:420px;text-align:center}
.dancer{width:150px;height:165px;margin:0 auto;transition:transform .3s}
.dancer svg{width:100%;height:100%}
.d-wave{animation:dwave .6s}.d-jump{animation:jump2 .6s}.d-spin{animation:spin .6s}.d-clap{animation:grow .6s}.d-wiggle{animation:shake .6s}
@keyframes dwave{25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
table.t{border-collapse:collapse;font-size:16px}table.t td,table.t th{border:1px solid #e3dcf7;padding:4px 8px;text-align:center}
@media (max-width:520px){.cols.spotcols{grid-template-columns:1fr}}
.treebox{overflow-x:auto}.treebox ul{padding-left:14px}

/* ===== v3: large gallery ===== */
.gtools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.gsearch{flex:1;min-width:180px;font:inherit;font-size:18px;padding:10px 16px;border:3px solid #e4d9ff;border-radius:999px;outline:none;min-height:48px}
.gsearch:focus{border-color:var(--purple)}
.gdiff{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:#fff4d6;color:#b07a00}
.gdiff.d1{background:#e8ffe8;color:#2a8a2a}
.gdiff.d2{background:#e8f4ff;color:#1f6fa8}
.gdiff.d3{background:#fff4d6;color:#b07a00}
.gdiff.d4{background:#ffe8d6;color:#c45a00}
.gdiff.d5{background:#ffe0e8;color:#c02050}
.gseries{font-size:12px;color:#8a80a6}
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:18px 0}
.pager .btn{min-height:44px;font-size:16px;padding:8px 14px}
.pager .info{font-size:15px;color:#6b5f8a;font-weight:700}
.gcard .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}

.chip.ai-on,.chip.on[data-ai]{background:linear-gradient(90deg,#9b7bff,#ff7eb6);color:#fff}
.gcard.ai .tag{background:#ffe0f0}
