/* Daisy's School Island · styles for /island/ (game: site/assets/island.js) */
/* page: a compact header, the game full width, then "How to play" */
.bar{flex-wrap:nowrap}.bar .brand{flex:none}.bar .nav{flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none}.bar .nav::-webkit-scrollbar{display:none}.bar .nav a{white-space:nowrap}
.isl-page-head{position:relative;overflow:hidden;background:radial-gradient(520px 220px at 10% 0,var(--pink) 0,transparent 70%),radial-gradient(520px 240px at 92% 10%,var(--lav) 0,transparent 70%),radial-gradient(520px 240px at 50% 120%,var(--mint) 0,transparent 70%),var(--cream);padding:14px 0 8px}
.isl-page-head .crumbs{margin:0 0 4px}
.isl-title{font-family:var(--head);font-weight:700;font-size:clamp(1.9rem,6vw,3.1rem);line-height:1.02;margin:0;color:var(--pink-2);-webkit-text-stroke:.1em #fff;paint-order:stroke fill;filter:drop-shadow(0 .05em 0 var(--pink-deep)) drop-shadow(0 .12em .12em rgba(201,61,122,.2));letter-spacing:.01em}
.isl-title span{color:var(--lav-2);filter:drop-shadow(0 .05em 0 var(--lav-deep))}
.isl-lead{margin:6px 0 4px;color:var(--ink-soft);font-size:clamp(.98rem,2.2vw,1.1rem);max-width:46em}
.isl-page-head .chips{margin:8px 0 0}
.howto h2{font-size:clamp(1.5rem,4vw,2rem);margin-top:6px}
.howto .card h3{font-size:1.15rem}
.howto .tbl{margin:10px 0}

/* ---------- game shell ---------- */
.isl{--t:46px;--acc:#2F6FB0;--acc2:#FFD95A;--soft:#D6ECFF;position:relative;max-width:1340px;margin:0 auto;padding:10px 12px 8px;color:var(--ink);font-family:"Nunito",system-ui,sans-serif}
.isl *{box-sizing:border-box}
.isl button{font-family:inherit;color:inherit}
.isl .vh,.isl-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.isl .ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;line-height:1}
.isl .ic svg,.isl-modal .ic svg{width:100%;height:100%;display:block}
.isl .ic.e,.isl-modal .ic.e{width:auto;height:auto;vertical-align:baseline}
.isl-modal .ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;line-height:1}
.isl .cur,.isl-modal .cur{display:inline-grid;place-items:center;min-width:1.3em;height:1.3em;border-radius:50%;background:#FFD95A;color:#7a4b00;font-family:var(--head);font-weight:700;font-size:.86em;margin-right:2px;box-shadow:inset 0 -2px 0 rgba(122,75,0,.18);vertical-align:.05em;line-height:1}
.isl-h{font-family:var(--head);font-weight:600;font-size:1.15rem;margin:0 0 8px}

/* HUD */
.isl-hud{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:0 0 8px}
.hud-isl{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;background:#fff;border-radius:999px;padding:6px 12px 6px 8px;box-shadow:0 3px 0 var(--line);font-family:var(--head);font-weight:600;font-size:1rem;min-height:42px;border-left:5px solid var(--acc)}
.hud-isl .flag{font-size:1.35rem;line-height:1}
.hud-isl .gear{font-size:.9rem;opacity:.75}
.hud-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:4px 12px 4px 4px;box-shadow:0 3px 0 var(--line);font-weight:800;min-height:42px;font-size:.98rem}
.hud-chip .hi{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--butter);font-size:1.05rem;flex:none}
.hud-chip.en .hi{background:#FFF0A8}
.hud-chip.co .hi{width:32px;height:32px;font-size:1rem;margin:0}
.hud-chip.stars .hi{background:var(--lav)}
.hud-chip.kids .hi{background:var(--mint)}
.hud-chip small{font-weight:700;color:var(--ink-soft);font-size:.78rem;white-space:nowrap}
.hud-chip.lv .lvb{display:inline-flex;align-items:center;gap:3px;width:auto;padding:0 10px;border-radius:999px;background:var(--acc);color:#fff;font-family:var(--head);font-weight:600;font-size:.85rem}
.hud-chip.lv .lvb b{font-weight:700}
.xpbar{display:block;width:58px;height:9px;border-radius:9px;background:var(--lav);overflow:hidden}
.xpbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--lav-2),var(--lav-deep));border-radius:9px;transition:width .5s}
.hud-fast{font:700 .78rem var(--head);background:var(--ink);color:#fff;border-radius:999px;padding:4px 10px}
@media(max-width:560px){.isl-hud{gap:5px}.hud-chip{min-height:38px;font-size:.92rem;padding-right:10px}.hud-chip .hi{width:28px;height:28px}.hud-isl{min-height:38px;font-size:.95rem}.xpbar{width:40px}.hud-isl .hud-name{max-width:9.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* layout: map + quests side by side on wide screens */
.isl-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media(max-width:1020px){.isl-main{grid-template-columns:minmax(0,1fr)}}
.isl-stage{position:relative;min-width:0}
.isl-map{position:relative;overflow:auto;height:min(calc(var(--t) * 14),max(360px,66vh));border-radius:26px;background:#a7d6fa;box-shadow:0 12px 34px rgba(110,79,196,.14),inset 0 0 0 4px rgba(255,255,255,.65);cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--lav-2) transparent;-webkit-overflow-scrolling:touch}
.isl-map.dragging{cursor:grabbing}
.isl-map.dragging .o{pointer-events:none}
.isl-map:focus-visible{outline:3px solid var(--lav-deep);outline-offset:2px}
@media(max-width:640px){.isl{padding-left:0;padding-right:0}.isl-hud{padding:0 10px}.isl-map{border-radius:0;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}.isl-bar,.isl-tools,.isl-side{margin-left:10px;margin-right:10px}}
.isl-world{position:relative;width:calc(var(--t) * 20);height:calc(var(--t) * 14);margin:0 auto;isolation:isolate}

/* terrain */
.isl-terrain{position:absolute;inset:0;display:grid;grid-template-columns:repeat(20,var(--t));grid-auto-rows:var(--t);z-index:0}
.tl{display:block}
.t-w{background:#a7d6fa}
.t-w.alt{background:#a2d2f8}
.t-w.shallow{background:#c2e6ff}
.t-w:nth-child(7n+3){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 22q4-4 8 0t8 0' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E");background-size:100% 100%}
.t-s{background:#ffefbd}.t-s.alt{background:#ffe8aa}
.t-g{background:#c0ecc8}.t-g.alt{background:#b5e6bf}
.t-t{background:#a1dbb0}.t-t.alt{background:#97d4a7}
.t-h{background:#d7eaa9}.t-h.alt{background:#cde49d}
.t-p{background:#f8e0bd}.t-p.alt{background:#f4d9b2}
.t-o{background:#ffe5d4;background-image:radial-gradient(circle,rgba(201,61,122,.12) 0 2px,transparent 2.5px);background-size:calc(var(--t) / 3) calc(var(--t) / 3)}
.t-f{background:#e8cba5}
.r1{border-top-left-radius:46%}.r2{border-top-right-radius:46%}.r3{border-bottom-right-radius:46%}.r4{border-bottom-left-radius:46%}
.isl-decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.dc{position:absolute;left:calc(var(--t) * var(--x));top:calc(var(--t) * var(--y));font-size:calc(var(--t) * var(--s));line-height:1;filter:drop-shadow(0 2px 0 rgba(67,55,90,.08))}
.dc svg{display:block;width:calc(var(--t) * .36);height:calc(var(--t) * .36)}

/* objects on the map */
.isl-objs{position:absolute;inset:0}
.o{position:absolute;left:calc(var(--t) * var(--x));top:calc(var(--t) * var(--y));width:calc(var(--t) * var(--w));height:calc(var(--t) * var(--h));padding:0;margin:0;border:0;background:none;cursor:pointer;display:block;border-radius:16px;-webkit-tap-highlight-color:transparent;font:inherit}
div.o{cursor:default}
.o:focus-visible{outline:3px solid var(--lav-deep);outline-offset:-1px;z-index:990!important}
.ob>svg{position:absolute;left:4%;top:4%;width:92%;height:92%;transition:transform .18s ease}
button.ob:hover>svg,.ob.sel>svg{transform:translateY(-2px) scale(1.06)}
.o.sel::before{content:"";position:absolute;inset:2px;border-radius:40%;border:3px dashed #fff;box-shadow:0 0 0 3px rgba(110,79,196,.5);animation:isl-sel 1.6s ease-in-out infinite alternate;pointer-events:none}
.bld.sel::before{inset:calc(var(--t) * .45) 2px 2px}
.ob.fogged{pointer-events:none}
.ob .need{position:absolute;right:-3px;top:-3px;display:grid;place-items:center;width:calc(var(--t) * .44);height:calc(var(--t) * .44);border-radius:50%;background:#fff;box-shadow:0 2px 0 var(--line);font-size:calc(var(--t) * .24)}
.ob-chest .spark{animation:isl-twinkle 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* field plots */
.plot .soil{position:absolute;inset:6%;border-radius:24%;background-color:#bf9068;background-image:repeating-linear-gradient(180deg,transparent 0 22%,rgba(110,70,40,.18) 22% 30%);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),inset 0 3px 0 rgba(255,255,255,.2)}
.plot .soil.wet{background-color:#94694a}
.plot.lock{border:2px dashed rgba(147,101,58,.45);border-radius:22%;background:rgba(255,255,255,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8a5a2b;font-weight:800;font-size:calc(var(--t) * .22);line-height:1.1}
.plot.lock .plus{font-size:calc(var(--t) * .38);line-height:1}
.plot.lock .cur{font-size:.9em}
.plot.lock:hover{background:rgba(255,255,255,.55)}
.crop{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--t) * .56);line-height:1}
.crop .ic{width:1em;height:1em}
.crop.grow{font-size:calc(var(--t) * .44);filter:saturate(.8)}
.crop.sprout{font-size:calc(var(--t) * .4)}
.crop.seed{display:flex;gap:12%;justify-content:center;align-items:center}
.crop.seed i{width:12%;height:16%;border-radius:50%;background:#fbe7b8;box-shadow:0 0 0 1.5px #8a5a2b;transform:rotate(-20deg)}
.crop.seed i:nth-child(2){transform:rotate(25deg) translateY(-25%)}
.crop.ready{animation:isl-bob 1.5s ease-in-out infinite;filter:drop-shadow(0 3px 0 rgba(67,55,90,.15))}
.crop .fruit{position:absolute;right:4%;bottom:6%;font-size:calc(var(--t) * .26)}
.plot .spark{position:absolute;right:0;top:-4%;font-size:calc(var(--t) * .28);animation:isl-twinkle 2s ease-in-out infinite}
.plot .drop{position:absolute;left:2%;top:-2%;font-size:calc(var(--t) * .26)}
.plot .pbar{position:absolute;left:16%;right:16%;bottom:10%;height:5px;border-radius:9px;background:rgba(255,255,255,.7);overflow:hidden}
.plot .pbar>i{display:block;height:100%;background:#2fa36b;border-radius:9px}

/* buildings */
.bld .bsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 0 rgba(67,55,90,.1))}
.bld:hover .bsvg{filter:drop-shadow(0 3px 0 rgba(67,55,90,.1)) brightness(1.04)}
.bld.locked .bsvg{filter:grayscale(.6);opacity:.65}
.bb{position:absolute;right:-6%;top:calc(var(--t) * .2);display:grid;place-items:center;width:calc(var(--t) * .5);height:calc(var(--t) * .5);border-radius:50%;background:#fff;box-shadow:0 3px 0 var(--line);font-size:calc(var(--t) * .28);font-weight:800;animation:isl-bob 1.8s ease-in-out infinite}
.bb.can{background:var(--pink-deep);color:#fff;box-shadow:0 3px 0 #9E2C5E;font-size:calc(var(--t) * .32)}
.bb.teach{background:#FFF0A8}
.lvtag{position:absolute;left:-2px;bottom:4px;min-width:21px;height:21px;padding:0 5px;border-radius:11px;background:var(--acc);color:#fff;font:600 12px/21px var(--head);text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.15),0 0 0 2px #fff}
.bprog{position:absolute;left:12%;right:12%;bottom:5%;height:8px;border-radius:9px;background:#fff;box-shadow:0 2px 0 rgba(67,55,90,.15);overflow:hidden}
.bprog>i{display:block;height:100%;background:linear-gradient(90deg,var(--pink-2),var(--pink-deep))}
.smoke{animation:isl-smoke 3.2s ease-in-out infinite;opacity:.85;transform-box:fill-box;transform-origin:center}
.smoke.s2{animation-delay:1.6s}

/* signs, NPCs, Daisy, children */
.sign .post{position:absolute;left:10%;right:10%;top:16%;height:52%;display:flex;align-items:center;justify-content:center;gap:2px;background:#f6d9ad;border:2px solid #b07a45;border-radius:10px;font-size:calc(var(--t) * .26);box-shadow:0 3px 0 rgba(147,101,58,.35)}
.sign .post::after{content:"";position:absolute;left:50%;top:100%;width:4px;height:calc(var(--t) * .22);margin-left:-2px;background:#93653a;border-radius:2px}
.sign .post b{font:700 calc(var(--t) * .3) var(--head);color:#7a4b25}
.npcb .face{display:block;font-size:calc(var(--t) * .62);line-height:var(--t);text-align:center;animation:isl-sway 3.4s ease-in-out infinite;filter:drop-shadow(0 3px 0 rgba(67,55,90,.12))}
.npc{position:absolute;left:calc(var(--t) * var(--x));top:calc(var(--t) * var(--y));width:var(--t);height:var(--t);display:grid;place-items:center;line-height:1;pointer-events:none}
.daisy{font-size:calc(var(--t) * .7);z-index:880;transition:left .7s ease,top .7s ease;filter:drop-shadow(0 4px 0 rgba(67,55,90,.15))}
.daisy.flip{scale:-1 1}
.daisy::after{content:"";position:absolute;left:22%;right:22%;bottom:4%;height:12%;border-radius:50%;background:rgba(0,0,0,.1);z-index:-1}
.kid{font-size:calc(var(--t) * .48);z-index:870;animation:isl-hop 2.6s ease-in-out infinite;animation-delay:var(--d)}
.isl-kids{position:absolute;inset:0;pointer-events:none}

/* fog over locked areas */
.isl-fog{position:absolute;inset:0;pointer-events:none}
.fog{position:absolute;left:calc(var(--t) * var(--x));top:calc(var(--t) * var(--y));width:var(--t);height:var(--t);background:rgba(246,242,255,.86);box-shadow:0 0 calc(var(--t) * .3) calc(var(--t) * .06) rgba(246,242,255,.86);z-index:900;pointer-events:auto;cursor:help}
.fog.c::after{content:"☁️";position:absolute;left:-12%;top:2%;font-size:calc(var(--t) * .95);line-height:1;opacity:.95;animation:isl-fog 9s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1)}
.fog.lift{animation:isl-lift 1.2s ease forwards;pointer-events:none}

/* floating numbers and pops */
.isl-fx{position:absolute;inset:0;pointer-events:none;z-index:1000}
.float{position:absolute;left:calc(var(--t) * (var(--x) - .5));top:calc(var(--t) * var(--y));width:calc(var(--t) * 2);text-align:center;font:700 16px/1.2 var(--head);color:var(--ink);text-shadow:0 2px 0 #fff,0 0 6px #fff,0 0 2px #fff;white-space:nowrap;animation:isl-float 1.4s ease-out both}
.poof{position:absolute;left:calc(var(--t) * var(--x));top:calc(var(--t) * var(--y));width:var(--t);height:var(--t);animation:isl-poof .6s ease-in forwards}
.poof svg{width:100%;height:100%}

/* bar under the map */
.isl-toasts{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:30;pointer-events:none;width:max-content;max-width:92%}
.toast{background:rgba(255,255,255,.97);border-radius:999px;padding:7px 16px;font-weight:800;font-size:.92rem;box-shadow:0 6px 0 rgba(67,55,90,.08),0 12px 26px rgba(110,79,196,.18);text-align:center;animation:isl-toast .35s ease both;transition:opacity .5s,transform .5s}
.toast.out{opacity:0;transform:translateY(-8px)}
.isl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;background:#fff;border-radius:22px;padding:10px 12px;margin-top:10px;box-shadow:0 8px 26px rgba(110,79,196,.1);min-height:74px}
.bar-art{flex:none;width:54px;height:54px;border-radius:18px;background:var(--soft);display:grid;place-items:center;font-size:30px;line-height:1}
.bar-art svg{width:46px;height:46px}
.bar-art .ic{width:1em;height:1em}
.bar-txt{flex:1 1 180px;min-width:0}
.bar-txt>b{font-family:var(--head);font-weight:600;font-size:1.05rem}
.bar-txt p{margin:3px 0 0;font-size:.93rem;color:var(--ink-soft);line-height:1.4}
.bar-txt .warn{color:var(--pink-deep);font-weight:700}
.bar-txt .say{color:var(--ink);font-weight:600}
.bar-txt .chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:3px}
.bar-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
@media(max-width:520px){.bar-act{flex:1 1 100%}.bar-act button{flex:1}}
.isl-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.isl-tools button{flex:1 1 auto;font-family:var(--head);font-weight:600;font-size:.95rem;border:0;background:#fff;border-radius:16px;padding:9px 12px;box-shadow:0 4px 0 var(--line);cursor:pointer;min-height:46px;white-space:nowrap}
.isl-tools button:hover{background:var(--soft)}
.isl-tools .t-teach{background:#FFF6C9}
@media(max-width:560px){.isl-tools button{flex:1 1 calc(33.3% - 8px);padding:8px 6px;font-size:.9rem}}

/* quests */
.isl-side{background:#fff;border-radius:26px;padding:14px;box-shadow:0 8px 26px rgba(110,79,196,.1)}
@media(max-width:1020px){.isl-side{margin-top:12px}}
.qcard{display:flex;gap:10px;align-items:center;padding:10px;border-radius:18px;background:var(--cream);margin-bottom:8px;box-shadow:0 2px 0 var(--line)}
.qcard.done{background:var(--mint)}
.qi{flex:none;width:42px;height:42px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:23px;line-height:1}
.qi .ic{width:1em;height:1em}
.qt{flex:1;min-width:0}
.qt>b{display:block;font-size:.93rem;line-height:1.28}
.qp{display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:800;color:var(--ink-soft);margin-top:3px}
.qbar{flex:1;height:7px;border-radius:9px;background:var(--lav);overflow:hidden}
.qbar>i{display:block;height:100%;background:var(--lav-deep);border-radius:9px}
.qcard.done .qbar>i{background:var(--mint-deep)}
.qr{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.isl-npcbox{display:flex;gap:10px;align-items:flex-start;margin-top:10px;background:var(--soft);border-radius:18px;padding:10px 12px}
.isl-npcbox .face{font-size:34px;line-height:1}
.isl-npcbox p{margin:0;font-size:.92rem;line-height:1.45}
.isl-npcbox b{display:block;font-family:var(--head);font-weight:600;color:var(--acc)}

/* chips and buttons (game + dialogs) */
.isl .chip,.isl-modal .chip{display:inline-flex;align-items:center;gap:3px;background:#fff;border-radius:999px;padding:3px 9px;font-weight:800;font-size:.82rem;color:var(--ink);box-shadow:0 2px 0 var(--line);white-space:nowrap}
.isl .chip.ok,.isl-modal .chip.ok{background:var(--mint)}
.isl .chip.no,.isl-modal .chip.no{background:#FFE1EA;color:#9E2C5E}
.isl .chip.soft,.isl-modal .chip.soft{background:var(--cream);box-shadow:none;color:var(--ink-soft)}
.isl .chip.en,.isl-modal .chip.en{background:#FFF0A8}
.isl-modal .chip.big{font-size:1.15rem;padding:6px 16px}
.isl .arrow{color:var(--ink-soft);font-weight:800}
.btn-p,.btn-g{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--head);font-weight:600;font-size:1rem;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;min-height:44px;line-height:1.15;text-decoration:none}
.btn-p{background:var(--pink-deep);color:#fff;box-shadow:0 4px 0 #9E2C5E}
.btn-p:active{transform:translateY(2px);box-shadow:0 2px 0 #9E2C5E}
.btn-g{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--line),inset 0 0 0 2px var(--line)}
.btn-g:hover{background:var(--cream)}
.btn-p[disabled],.btn-g[disabled]{background:#e4dceb;color:#7d7290;box-shadow:0 4px 0 #d3c8de;cursor:not-allowed;transform:none}
.btn-p.sm,.btn-g.sm{padding:7px 13px;font-size:.9rem;min-height:38px}
.btn-p.danger{background:#b3261e;box-shadow:0 4px 0 #7f1a15}
.btn-p .cur{background:#fff3b0}

/* dialogs */
html.isl-lock{overflow:hidden}
.isl-modal{position:fixed;inset:0;z-index:200;background:rgba(67,55,90,.4);display:flex;align-items:flex-end;justify-content:center;color:var(--ink);font-family:"Nunito",system-ui,sans-serif;line-height:1.5}
.isl-modal[hidden]{display:none}
.isl-modal *{box-sizing:border-box}
.isl-sheet{position:relative;width:100%;max-width:580px;max-height:90vh;max-height:90dvh;overflow:auto;background:var(--cream);border-radius:28px 28px 0 0;padding:16px 16px 22px;box-shadow:0 -10px 40px rgba(67,55,90,.25);animation:isl-sheet .28s ease both;overscroll-behavior:contain}
.isl-sheet:focus{outline:none}
@media(min-width:700px){.isl-modal{align-items:center;padding:24px}.isl-sheet{border-radius:28px;padding:20px 22px 24px;max-height:88vh}}
.isl-x{position:sticky;top:0;float:right;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:#fff;box-shadow:0 3px 0 var(--line);font-size:17px;cursor:pointer;margin:0 0 6px 8px;color:var(--ink)}
.isl-modal h3{font-family:var(--head);font-weight:600;font-size:1.06rem;margin:16px 0 8px}
.isl-modal h3 small{font-family:"Nunito",sans-serif;color:var(--ink-soft);font-weight:700}
.m-head{display:flex;gap:14px;align-items:center;margin-bottom:4px}
.m-art{flex:none;width:92px;height:118px;border-radius:20px;background:var(--soft);padding:6px 4px 2px}
.m-art.wide{width:118px}
.m-art svg{width:100%;height:100%;overflow:visible}
.m-title{font-family:var(--head);font-weight:600;font-size:1.45rem;line-height:1.15;margin:0}
.m-title small{font-size:.65em;color:var(--ink-soft)}
.m-sub{margin:2px 0 0;color:var(--ink-soft);font-weight:700}
.m-lv{display:inline-block;margin:6px 0 0;background:var(--acc);color:#fff;border-radius:999px;padding:2px 11px;font-size:.8rem;font-weight:800}
.m-desc{color:var(--ink-soft);margin:10px 0}
.m-lead{font-size:1.08rem;margin:6px 0}
.m-box{background:#fff;border-radius:20px;padding:12px 14px;margin:12px 0;box-shadow:0 3px 0 var(--line)}
.m-box h3{margin-top:0}
.m-box .chips,.isl-modal .chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.chips.center{justify-content:center;margin:10px 0}
.m-why{color:var(--pink-deep);font-weight:700;font-size:.92rem;margin:8px 0 0}
.isl-modal .note{font-size:.9rem;color:var(--ink-soft);margin:6px 0}
.m-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rows{display:grid;gap:8px}
.row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:8px 10px;box-shadow:0 3px 0 var(--line)}
.ri{flex:none;width:46px;height:46px;border-radius:15px;background:var(--soft);display:grid;place-items:center;font-size:26px;line-height:1}
.ri .ic{width:1em;height:1em}
.ri.plate{background:radial-gradient(circle,#fff 0 50%,#efe5f6 52% 62%,var(--soft) 64%)}
.rt{flex:1;min-width:0}
.rt>b{display:block;font-size:.96rem;line-height:1.3}
.rt>b small{color:var(--ink-soft);font-weight:700}
.rt .chips{margin-top:4px}
.row>small{font-weight:800;color:var(--ink-soft);white-space:nowrap}
.btns{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.owned{font-weight:800;font-size:.85rem;color:var(--mint-deep);white-space:nowrap}
.lockrow{opacity:.62}
.prog{height:12px;border-radius:9px;background:var(--lav);overflow:hidden}
.prog>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink-2),var(--pink-deep));border-radius:9px;transition:width .4s}
.prog.sm{height:7px;flex:1;min-width:40px}
.qlist{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.qlist li{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:7px 11px;font-weight:700;font-size:.92rem}
.qlist li em{color:var(--pink-deep);font-style:normal;margin-left:auto}
.qlist li small{min-width:3.2em;text-align:right;color:var(--ink-soft)}
.road{margin:0;padding-left:22px}
.road li{margin-bottom:7px}
.road li b{font-weight:800}
.road li.done b::after{content:" ✅"}
.road li small{display:block;color:var(--ink-soft)}
.teachbox{background:#FFF8D6}
/* lesson */
.q-dots{display:flex;justify-content:center;gap:7px;margin:8px 0}
.q-dots i{width:12px;height:12px;border-radius:50%;background:var(--line)}
.q-dots i.on{background:var(--pink-deep)}
.q-dots i.past{background:var(--mint-2)}
.q-box{background:#fff;border-radius:22px;padding:16px 12px;text-align:center;box-shadow:0 3px 0 var(--line);margin:10px 0}
.q-count{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;font-size:32px;line-height:1.15;max-width:300px;margin:0 auto}
.q-count .ic{width:1em;height:1em}
.q-pic{font-size:64px;line-height:1.1}
.q-word{display:flex;justify-content:center;gap:.18em;font:700 2.4rem/1.2 var(--head);margin-top:6px}
.q-word b{min-width:.7em;border-bottom:4px solid var(--line)}
.q-word .gap{color:var(--pink-deep);border-bottom-color:var(--pink-2)}
.q-sum{font:700 2.4rem/1.2 var(--head);color:var(--lav-deep)}
.q-ask{text-align:center;font-weight:800;font-size:1.12rem;margin:8px 0}
.q-ch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q-btn{font:600 1.55rem/1.1 var(--head);border:0;border-radius:20px;padding:14px;background:#fff;box-shadow:0 5px 0 var(--lav-2);cursor:pointer;min-height:66px;color:var(--ink)}
.q-btn:hover{background:var(--lav)}
.q-btn.right{background:var(--mint);box-shadow:0 5px 0 var(--mint-2)}
.q-btn.wrong{background:#FFE3D1;box-shadow:0 5px 0 var(--peach-2)}
.q-btn.dim{opacity:.5}
.q-btn[aria-disabled="true"]{cursor:default}
.q-fb{text-align:center;font-weight:800;font-size:1.1rem;margin:12px 0 0}
.q-fb.ok{color:var(--mint-deep)}
.q-fb+.m-actions{justify-content:center}
.lesson-end{text-align:center}
.lesson-end .m-actions{justify-content:center}
.big-face{font-size:64px;line-height:1.1}
/* dialogue and celebration */
.dlg{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:22px;padding:14px;box-shadow:0 3px 0 var(--line);margin:12px 0;text-align:left}
.dlg .face{font-size:46px;line-height:1;flex:none}
.dlg.big .face{font-size:58px}
.dlg p{margin:0;font-size:1.04rem}
.dlg p b{display:block;font-family:var(--head);font-weight:600;color:var(--acc)}
.cele{text-align:center}
.cele .m-actions{justify-content:center}
.cele-art{width:170px;height:208px;margin:0 auto 4px;background:radial-gradient(circle at 50% 60%,var(--soft) 0 55%,transparent 56%)}
.cele-art svg{width:100%;height:100%;overflow:visible}

/* island picker */
.isl-pick{display:none}
.isl.picking .isl-pick{display:block}
.isl.picking .isl-hud,.isl.picking .isl-main{display:none}
.pick-in{background:radial-gradient(500px 260px at 10% 0,var(--pink) 0,transparent 70%),radial-gradient(500px 260px at 90% 100%,var(--mint) 0,transparent 70%),#fff;border-radius:28px;padding:22px 16px 24px;text-align:center;box-shadow:0 8px 26px rgba(110,79,196,.1)}
@media(max-width:640px){.pick-in{border-radius:0}}
.pick-in>p{max-width:40em;margin:0 auto;color:var(--ink-soft)}
.isl-h.big{font-size:clamp(1.5rem,4vw,2rem)}
.pick-hello svg{width:58px;height:58px;animation:isl-sway 4s ease-in-out infinite}
.pick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
@media(max-width:920px){.pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pick-grid.sm{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px;gap:8px}
.pick{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;cursor:pointer;background:#fff;border-radius:24px;padding:14px 10px 16px;border-top:6px solid var(--acc);box-shadow:0 5px 0 var(--soft),0 10px 24px rgba(110,79,196,.1);font:inherit;color:var(--ink);min-width:0;transition:transform .15s}
.pick:hover{transform:translateY(-3px)}
.pick.on{outline:3px solid var(--acc);outline-offset:2px}
.pflag{font-size:42px;line-height:1.1}
.pick b{font-family:var(--head);font-weight:600;font-size:1.2rem;line-height:1.2}
.pick small{font-weight:700;color:var(--ink-soft)}
.pc{font-size:.88rem;color:var(--ink-soft);font-weight:700}
.pcrops{font-size:21px;letter-spacing:1px;margin-top:4px}
.pcrops .ic{width:1em;height:1em}
.pnpc{font-size:.82rem;color:var(--ink-soft)}
.pick-grid.sm .pick{padding:8px 6px 10px;border-top-width:5px}
.pick-grid.sm .pflag{font-size:30px}
.pick-grid.sm .pick b{font-size:1rem}

/* motion (all gentle; cute.css turns it off under reduced motion) */
@keyframes isl-sel{from{transform:scale(.95)}to{transform:scale(1.03)}}
@keyframes isl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes isl-hop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-14%)}90%{transform:translateY(0)}}
@keyframes isl-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes isl-twinkle{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@keyframes isl-smoke{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.85}100%{transform:translateY(-14px) scale(1.3);opacity:0}}
@keyframes isl-fog{from{transform:translate(0,0)}to{transform:translate(22%,-6%)}}
@keyframes isl-lift{to{opacity:0;transform:scale(1.5) translateY(-20%)}}
@keyframes isl-float{0%{opacity:0;transform:translateY(0) scale(.8)}15%{opacity:1;transform:translateY(-6px) scale(1.05)}100%{opacity:0;transform:translateY(-48px) scale(1)}}
@keyframes isl-poof{0%{transform:scale(1);opacity:1}40%{transform:scale(1.12) rotate(-4deg);opacity:1}100%{transform:scale(.2) rotate(8deg);opacity:0}}
@keyframes isl-toast{from{opacity:0;transform:translateY(-8px) scale(.95)}}
@keyframes isl-sheet{from{opacity:0;transform:translateY(24px)}}