/* HaloNu · My Little Magical World */
:root{
  --ink:#4a3428; --ink-soft:#5c4536; --cream:#fffaf0; --sky:#bfe6fb;
  --green:#8fd06b; --butter:#ffd76a; --peach:#ffb3c1; --coral:#ff9a6b; --pink:#fa015e;
  --shadow:0 6px 0 rgba(74,52,40,.13);
  --font:"Baloo 2","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--sky)}
a{color:inherit}
button{font-family:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Home ---------- */
.world{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#8fd2f7}
.stage{position:relative;width:min(100vw,1366px,calc(100vh * 1670 / 942));aspect-ratio:1670/942;container-type:inline-size;overflow:hidden;user-select:none}
.stage .bg{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none}
.px{position:absolute;left:calc(var(--x) * 100% / 1670);top:calc(var(--y) * 100% / 942);width:calc(var(--w) * 100% / 1670);height:calc(var(--h) * 100% / 942)}
.hot{display:block;z-index:2;border:0;padding:0;background:transparent;cursor:pointer;border-radius:3cqw;transition:background .2s,box-shadow .2s}
.hot:hover{background:rgba(255,255,255,.12);box-shadow:0 0 0 .35cqw rgba(255,255,255,.65)}
.hot:focus-visible,.star:focus-visible{outline:.3cqw solid var(--ink);outline-offset:.2cqw}
.isl{border-radius:40%}
.busy .hot,.busy .star{cursor:wait}
.busy .hot:hover{background:transparent;box-shadow:none}
.count{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;border-radius:999px;background:linear-gradient(#ff2f7d,#f5005a);color:#fff;font-weight:800;font-size:1.55cqw;line-height:1;pointer-events:none}
.star{position:absolute;z-index:4;width:2.8cqw;height:2.8cqw;translate:-50% -50%;left:calc(var(--x) * 100% / 1670);top:calc(var(--y) * 100% / 942);border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer}
.star:hover{background:radial-gradient(circle,rgba(255,244,180,.95),rgba(255,244,180,0) 70%)}
.star svg{width:100%;height:100%;display:none}
.star.got svg{display:block;animation:pop .5s ease-out}
.hint .star:not(.got){animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,214,90,0)}50%{box-shadow:0 0 0 1.1cqw rgba(255,214,90,.85)}}
@keyframes pop{0%{transform:scale(.2) rotate(-30deg)}70%{transform:scale(1.25)}100%{transform:scale(1)}}

/* girl: body, two arms and two legs, posed from js/world.js while walking.
   Her feet sit at 59.5% of the box width, so that point follows the path. */
.girl{position:absolute;z-index:5;width:calc(122 * 100% / 1670);left:calc(var(--gx) * 100% / 1670);top:calc(var(--gy) * 100% / 942);transform:translate(-59.5%,-100%) scale(var(--gs,1));transform-origin:59.5% 100%;pointer-events:none}
.girl .flip{transform:scaleX(var(--dir,1));transform-origin:59.5% 50%;transition:transform .28s ease}
.girl .hop{transform-origin:59.5% 100%}
.rig{position:relative;aspect-ratio:630/982;transform:translateY(var(--bob,0%)) rotate(var(--tilt,0deg));transform-origin:59.5% 100%}
.rig img{position:absolute;display:block;-webkit-user-drag:none}
.rig .body{left:0;top:0;width:100%}
.rig .p-leg-l{left:31.11%;top:80.55%;width:26.83%;transform-origin:52.66% 17.80%;transform:rotate(var(--ll,0deg))}
.rig .p-leg-r{left:58.73%;top:80.75%;width:29.37%;transform-origin:40.54% 16.93%;transform:rotate(var(--lr,0deg))}
.rig .p-arm-r{left:27.78%;top:61.30%;width:23.97%;transform-origin:62.91% -5.08%;transform:rotate(var(--ar,0deg))}
.rig .p-arm-l{left:84.44%;top:61.71%;width:11.59%;transform-origin:35.62% -4.71%;transform:rotate(var(--al,0deg))}
.girl.turning .hop{animation:turnhop .3s ease-out}
.girl.arrive .hop{animation:arrive .55s ease-out forwards}
@keyframes turnhop{0%{transform:none}40%{transform:scale(1.06,.93)}75%{transform:translateY(-6%)}100%{transform:none}}
@keyframes arrive{0%{transform:none;opacity:1}40%{transform:translateY(-12%) scale(1.04)}100%{transform:translateY(-4%) scale(.9);opacity:0}}
.girl::after{content:"";position:absolute;left:59.5%;bottom:-2%;width:60%;height:7%;translate:-50% 0;border-radius:50%;background:rgba(40,60,80,.18);z-index:-1}

/* cloud steps (AI island) */
.cstep{position:absolute;z-index:4;width:calc(var(--w) * 100% / 1670);aspect-ratio:2.4/1;left:calc(var(--x) * 100% / 1670);top:calc(var(--y) * 100% / 942);translate:-50% -50%;border-radius:999px;background:#fff;box-shadow:inset 0 -.35cqw 0 #dceffd,0 .3cqw .6cqw rgba(60,120,170,.18);opacity:0;scale:.3;transition:opacity .25s,scale .3s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.cstep::before{content:"";position:absolute;left:18%;top:-38%;width:42%;aspect-ratio:1;border-radius:50%;background:#fff}
.cstep::after{content:"";position:absolute;left:46%;top:-24%;width:32%;aspect-ratio:1;border-radius:50%;background:#fff}
.cstep.show{opacity:1;scale:1}

/* bubble */
.bubble{position:absolute;z-index:6;left:calc(262 * 100% / 1670);top:calc(70 * 100% / 942);width:24cqw;display:none;gap:1cqw;align-items:center;padding:1.1cqw 2.8cqw 1.1cqw 1.2cqw;background:var(--cream);border:.25cqw solid #e3b98f;border-radius:2cqw;box-shadow:0 .5cqw 0 rgba(74,52,40,.15)}
.bubble{pointer-events:none}.bubble .x{pointer-events:auto}
.bubble.show{display:flex;animation:pop .35s ease-out}
.bubble::before{content:"";position:absolute;left:-1.5cqw;top:40%;border:.75cqw solid transparent;border-right-color:#e3b98f}
.avatar{position:relative;width:5.4cqw;height:5.4cqw;flex:none}
.avatar img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;border:.22cqw solid #fff;box-shadow:0 0 0 .2cqw #e3b98f;transform-origin:50% 90%}
.avatar.m-happy img{animation:dogHop .6s ease-out}
.avatar.m-tilt img{animation:dogTilt .7s ease-out forwards}
.avatar.m-wow img{animation:dogWow .5s ease-out}
.avatar.m-love img{animation:dogHop .7s ease-out}
@keyframes dogHop{0%,100%{transform:none}30%{transform:translateY(-14%) scale(1.04,.97)}55%{transform:translateY(0) scale(1.03,.95)}75%{transform:translateY(-5%)}}
@keyframes dogTilt{0%{transform:none}60%{transform:rotate(-16deg)}100%{transform:rotate(-12deg)}}
@keyframes dogWow{0%{transform:scale(1)}35%{transform:scale(1.16)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.fx{position:absolute;inset:0;pointer-events:none}
.fx svg{position:absolute;width:38%;height:38%;animation:fxUp 1.4s ease-out forwards}
.fx svg:nth-child(1){right:-22%;top:-18%}
.fx svg:nth-child(2){right:-36%;top:22%;width:26%;height:26%;animation-delay:.15s}
@keyframes fxUp{0%{opacity:0;transform:translateY(30%) scale(.5)}25%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-60%) scale(1)}}
.bubble p{margin:0;font-size:1.3cqw;line-height:1.5;font-weight:600}
.bubble .x{position:absolute;right:.4cqw;top:.3cqw;min-width:2.4cqw;min-height:2.4cqw;border:0;background:transparent;font-size:1.5cqw;color:#7a5a46;cursor:pointer;line-height:1}

/* mobile nav */
.mnav{display:none}

/* modal & toast */
.modal{position:fixed;inset:0;z-index:20;background:rgba(74,52,40,.35);display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.letter{width:min(420px,100%);background:var(--cream);border:4px solid #ffd6dc;border-radius:28px;padding:28px 28px 24px;text-align:center;box-shadow:0 10px 0 rgba(74,52,40,.18);animation:pop .4s ease-out}
.letter .date{font-size:14px;color:#6e5242}
.letter .quote{margin:14px 0 6px;font-size:24px;line-height:1.6;font-weight:700}
.btn{margin-top:18px;min-height:48px;padding:12px 28px;border:0;border-radius:999px;background:var(--coral);color:#3d2416;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 #d9744a}
.toast{position:fixed;z-index:30;left:50%;bottom:28px;translate:-50% 0;max-width:calc(100% - 40px);padding:12px 22px;border-radius:999px;background:var(--ink);color:var(--cream);font-size:16px;font-weight:600;text-align:center;box-shadow:0 6px 0 rgba(0,0,0,.15);display:none}
.toast.show{display:block;animation:pop .3s ease-out}

/* ---------- Sub pages ---------- */
.sub{min-height:100vh;padding:20px 20px 56px}
.sub-elementary{background:#e6f6d9}.sub-middle{background:#dff0fd}.sub-ai{background:#fff4d2}.sub-craft{background:#ffe7da}.sub-book{background:#e8f4fd}
.wrap{max-width:1080px;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;background:var(--cream);text-decoration:none;font-size:16px;font-weight:800;box-shadow:var(--shadow)}
.brand{font-weight:800;font-size:26px;color:#7a4320;text-decoration:none;letter-spacing:.02em}
.brand small{display:block;font-size:11px;letter-spacing:.14em;color:var(--ink-soft);font-weight:700}
.hero{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.hero-text{flex:1 1 320px;min-width:0}
.eyebrow{font-weight:800;letter-spacing:.14em;font-size:13px;color:#6e5242;text-transform:uppercase}
.hero h1{margin:4px 0 0;font-size:48px;line-height:1.2}
.hero p{margin:10px 0 0;font-size:18px;line-height:1.7;color:var(--ink-soft)}
.crop{flex:none;width:min(380px,100%);aspect-ratio:var(--cw)/var(--ch);border:5px solid var(--cream);border-radius:32px;background:url(../assets/home-bg.webp) no-repeat;background-size:calc(1670 / var(--cw) * 100%) auto;background-position:calc(var(--cx) / (1670 - var(--cw)) * 100%) calc(var(--cy) / (942 - var(--ch)) * 100%);box-shadow:0 10px 0 rgba(74,52,40,.12)}
.section-title{margin:40px 0 0;font-size:24px}
.works-grid{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.work-card{display:flex;flex-direction:column;border-radius:26px;background:var(--cream);text-decoration:none;color:var(--ink);box-shadow:0 7px 0 rgba(74,52,40,.12);overflow:hidden;transition:transform .2s}
a.work-card:hover{transform:translateY(-4px) rotate(-.6deg)}
.work-art{aspect-ratio:4/3;background:#fff3e0;display:flex;align-items:center;justify-content:center}
.work-art img{width:100%;height:100%;object-fit:cover;display:block}
.work-art svg{width:56px;height:56px}
.work-copy{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.work-copy h3{margin:0;font-size:20px}
.work-copy p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.work-status{align-self:flex-start;margin-top:4px;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700}
.work-status.ready{background:#a9dd8c;color:#24401a}
.work-status.soon{background:#efe7df;color:#5c4536}
.others{margin-top:44px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.others span{font-size:16px;color:var(--ink-soft)}
.others a{min-height:44px;display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;background:var(--cream);text-decoration:none;font-weight:700;box-shadow:0 4px 0 rgba(74,52,40,.12)}
.foot{margin-top:56px;text-align:center;color:var(--ink-soft);font-size:14px}
.foot img{height:56px;width:auto;display:block;margin:0 auto 6px}

/* achievements */
.stats{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px}
.stat{padding:12px 20px;border-radius:20px;background:var(--cream);font-size:16px;box-shadow:0 5px 0 rgba(74,52,40,.1)}
.stat b{font-size:22px;margin-left:6px}
.badges{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.badge{padding:20px;border-radius:24px;background:var(--cream);text-align:center;box-shadow:0 6px 0 rgba(74,52,40,.1)}
.bicon{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ece5de}
.badge.on .bicon{background:var(--butter);box-shadow:0 0 0 6px #fff1c2}
.bname{font-size:19px;font-weight:800}
.bcond{margin-top:4px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.bstat{display:inline-block;margin-top:10px;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700;background:#efe7df;color:#5c4536}
.badge.on .bstat{background:#a9dd8c;color:#24401a}
.log{margin:14px 0 0;padding:6px 22px;list-style:none;background:var(--cream);border-radius:24px;box-shadow:0 6px 0 rgba(74,52,40,.1)}
.log li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:2px dashed #f0e2d4;font-size:16px}
.log li:last-child{border-bottom:0}
.log time{color:#6e5242;font-size:14px;flex:none}
.empty{margin:14px 0 0;padding:20px 22px;background:var(--cream);border-radius:24px;font-size:16px;color:var(--ink-soft)}
.reset{margin-top:20px;min-height:44px;padding:8px 16px;border:2px solid #c9b5a4;border-radius:999px;background:transparent;color:var(--ink-soft);font-size:14px;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .girl.turning .hop,.girl.arrive .hop,.avatar img,.fx svg,.hint .star:not(.got),.star.got svg,.bubble.show,.letter,.toast.show{animation:none}
  a.work-card,.hot{transition:none}
}
@media (max-width:760px){
  .world{justify-content:flex-start}
  .stage{width:100%}
  .mnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;padding:16px}
  .mnav h2{grid-column:1/-1;margin:6px 0 0;font-size:16px}
  .mnav a,.mnav button{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px;border:0;border-radius:18px;background:var(--cream);color:var(--ink);font-size:16px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 rgba(74,52,40,.13);text-align:left}
  .dot{flex:none;width:14px;height:14px;border-radius:50%}
  .bubble{position:fixed;left:16px;right:16px;top:auto;bottom:84px;width:auto;padding:14px 44px 14px 14px;gap:12px;border-width:3px;border-radius:20px}
  .bubble::before{display:none}
  .avatar{width:58px;height:58px}
  .bubble p{font-size:16px}
  .bubble .x{font-size:22px;min-width:40px;min-height:40px;right:4px;top:4px}
  .hero h1{font-size:38px}
}

/* ---------- 小學島：學習冒險海域 ---------- */
.sea{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#3cc4f0}
.sea .stage .bg{pointer-events:none}
.pts{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;background:#fdf0c6;border-radius:1cqw;color:#3b2a1f;font-weight:800;font-size:2.55cqw;line-height:1;pointer-events:none}
.pts.bump{animation:pop .45s ease-out}
.subj.on{box-shadow:0 0 0 .35cqw #fff,0 0 0 .7cqw #ff6f91;background:rgba(255,255,255,.12)}
.lock{position:absolute;z-index:2;border-radius:50%;backdrop-filter:grayscale(.85) brightness(1.04);-webkit-backdrop-filter:grayscale(.85) brightness(1.04);pointer-events:none;display:flex;align-items:center;justify-content:center;transition:opacity .6s}
.lock svg{width:3.2cqw;height:3.2cqw;filter:drop-shadow(0 .2cqw .2cqw rgba(0,0,0,.25))}
.lock.open{opacity:0}
.badge-done{position:absolute;z-index:3;translate:-50% -50%;padding:.25cqw .8cqw;border-radius:999px;background:#5cc06a;color:#fff;font-weight:800;font-size:1.05cqw;box-shadow:0 .25cqw 0 #3d8f49;pointer-events:none;display:none}
.badge-done.show{display:block;animation:pop .4s ease-out}
.here{position:absolute;z-index:4;translate:-50% -100%;pointer-events:none;display:flex;flex-direction:column;align-items:center}
.here span{padding:.25cqw .8cqw;border-radius:999px;background:#ff6f91;color:#fff;font-weight:800;font-size:1cqw;white-space:nowrap;box-shadow:0 .25cqw 0 #d94d72}
.here i{width:0;height:0;border:.55cqw solid transparent;border-top-color:#ff6f91}
.here{animation:bobPin 1.4s ease-in-out infinite}
@keyframes bobPin{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5cqw)}}
.boat{position:absolute;z-index:5;width:calc(78 * 100% / 1670);translate:-50% -88%;pointer-events:none;display:none}
.boat.show{display:block}
.boat img{display:block;width:100%;transform:scaleX(var(--bdir,1));animation:rock 1.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes rock{0%,100%{rotate:-4deg}50%{rotate:4deg}}
.ticket-row.can{box-shadow:0 0 0 .3cqw #ffd34d;background:rgba(255,240,170,.18)}
.isle-panel{position:fixed;inset:0;z-index:20;background:rgba(20,70,110,.35);display:none;align-items:center;justify-content:center;padding:20px}
.isle-panel.show{display:flex}
.card{width:min(460px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--cream);border:5px solid #f3c27a;border-radius:28px;padding:24px 24px 22px;box-shadow:0 10px 0 rgba(74,52,40,.2);animation:pop .35s ease-out;position:relative}
.card .lv{display:inline-block;padding:3px 12px;border-radius:999px;color:#fff;font-weight:800;font-size:14px}
.card h2{margin:8px 0 0;font-size:30px;line-height:1.2}
.card .sub-t{margin:4px 0 0;color:var(--ink-soft);font-size:15px}
.card .close{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:26px;color:#7a5a46;cursor:pointer}
.chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:6px 14px;border:2px solid #e8d5bd;border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{border-color:#ff6f91;background:#ffe3ea}
.task{margin-top:18px;padding:16px;border-radius:20px;background:#fff6e2}
.task h3{margin:0;font-size:17px}
.dots{margin:10px 0 0;display:flex;gap:8px}
.dots b{width:22px;height:22px;border-radius:50%;background:#efe2cf}
.dots b.on{background:#ffcf3a;box-shadow:inset 0 -3px 0 #e0a800}
.task p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.acts{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.act{min-height:46px;padding:10px 18px;border:0;border-radius:999px;font-size:16px;font-weight:800;cursor:pointer;color:#3d2416;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.act.primary{background:#ffcf3a}
.act.go{background:#7fd38a;color:#173d1c}
.act.sail{background:#7cc6f2;color:#0f3550}
.act:disabled{background:#eee3d4;color:#8a7766;box-shadow:none;cursor:not-allowed}
.works-mini{margin-top:16px}
.works-mini h3{margin:0 0 8px;font-size:16px}
.works-mini a,.works-mini span{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;margin-top:8px;border-radius:14px;background:#fff;text-decoration:none;font-size:15px;font-weight:700}
.works-mini em{font-style:normal;font-size:13px;color:#5c4536;font-weight:600}
.snav{display:none}
@media (max-width:760px){
  .sea{justify-content:flex-start}
  .snav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;padding:16px}
  .snav h2{grid-column:1/-1;margin:6px 0 0;font-size:16px;color:#0f3550}
  .snav button,.snav a{display:flex;align-items:center;gap:8px;min-height:50px;padding:10px 14px;border:0;border-radius:16px;background:var(--cream);color:var(--ink);font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.12);text-align:left}
  .snav button[aria-pressed="true"]{box-shadow:0 0 0 3px #ff6f91}
}
@media (prefers-reduced-motion:reduce){.here,.boat img,.card{animation:none}}
.acts[hidden]{display:none}
.float-btns{position:absolute;z-index:4;right:1.4cqw;top:1.6cqw;display:flex;gap:.8cqw}
.float-btn{display:inline-flex;align-items:center;min-height:max(2.9cqw,36px);padding:0 max(1.3cqw,12px);border-radius:999px;background:var(--cream);color:var(--ink);font-weight:800;font-size:max(1.15cqw,13px);text-decoration:none;box-shadow:0 .3cqw 0 rgba(74,52,40,.18);border:.18cqw solid #f3c27a}
.float-btn.task{background:#ffcf3a;border-color:#e8a800}
.float-btn:hover{transform:translateY(-2px)}
@media (max-width:760px){.float-btns{display:none}}