@font-face{font-family:"Rubik";src:url(fonts/rubik-heb.woff2) format("woff2");font-weight:300 900;unicode-range:U+0590-05FF,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Rubik";src:url(fonts/rubik-lat.woff2) format("woff2");font-weight:300 900;unicode-range:U+0000-00FF,U+2000-206F,U+2212;font-display:swap}
@font-face{font-family:"Read";src:url(fonts/notosanshebrew-heb.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Round";src:url(fonts/fredoka-heb.woff2) format("woff2");font-weight:400 700;unicode-range:U+0590-05FF;font-display:swap}
:root{--bg:#fff4d6;--card:#fffdf5;--ink:#4a2306;--mut:#8a5a32;--line:#f0d9ab;--sage:#2f9a5a;--sage2:#dff3e2;--mus:#ffc233;--mus2:#fff0bf;--cor:#f0643c;--cor2:#ffe0d2;--sky:#1f9fd1;--sky2:#d8f0fb;--bad:#d9433f;--hl:#ffd84d;--wood:#7a3d0a;
 --r:18px;--sh:0 6px 20px rgba(122,61,10,.09),0 1px 3px rgba(122,61,10,.08);
 --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--fs:1;--lh:1;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden}
body{font-family:"Rubik",system-ui,Arial,sans-serif;color:var(--ink);font-size:16px;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}
#app{position:fixed;inset:0}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sp{flex:1}
.ib{width:44px;height:44px;border-radius:14px;background:var(--card);box-shadow:var(--sh);font-size:19px;font-weight:700;display:grid;place-items:center;flex:none;color:var(--ink)}
.ib:active{transform:scale(.94)}
.ib.on{background:var(--mus2)}
.say.playing{background:var(--mus);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.tbar{display:flex;align-items:center;gap:8px;padding:calc(10px + var(--st)) 12px 10px;flex:none}
.tbar h2{margin:0 4px;font-family:"Round","Rubik";font-size:clamp(18px,4.6vw,24px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.body{flex:1;overflow:auto;padding:4px 14px calc(18px + var(--sb));-webkit-overflow-scrolling:touch}
.body>*{max-width:1100px;margin-inline:auto}
/* start */
#scr-start{overflow:auto}
.startbg{position:fixed;inset:0;background:url(img/bg.webp) center bottom/cover no-repeat;opacity:.95;z-index:-1}
.startbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,245,234,.35),rgba(251,245,234,.0) 40%,rgba(251,245,234,.25))}
.sbar{display:flex;align-items:center;gap:8px;padding:calc(10px + var(--st)) 14px 0}
.brand img{height:44px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.08))}
.startmain{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(10px,4vw,56px);padding:8px 18px;flex-wrap:wrap}
.hero{width:clamp(130px,30vw,330px);height:auto;filter:drop-shadow(0 10px 18px rgba(122,61,10,.18));animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.startcopy{max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
h1{font-family:"Round","Rubik";font-weight:700;font-size:clamp(34px,8vw,60px);margin:0;line-height:1.25;color:var(--ink);letter-spacing:.5px}
.goal{margin:0;font-size:clamp(15px,3.8vw,18px);line-height:1.55;color:var(--mut);background:rgba(255,253,248,.75);padding:8px 14px;border-radius:14px}
.who{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:999px;padding:6px 16px 6px 8px;box-shadow:var(--sh);text-align:right}
.who .av{width:38px;height:38px;border-radius:50%;background:var(--mus2);display:grid;place-items:center;font-size:22px}
.who small{display:block;font-size:12px;color:var(--mut)}.who b{font-size:16px}.who i{font-style:normal;color:var(--mut)}
.paths{display:flex;gap:14px;width:100%;justify-content:center;flex-wrap:wrap}
.path{flex:1 1 200px;max-width:250px;min-height:150px;border-radius:24px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:var(--sh);transition:transform .15s}
.path:active{transform:scale(.97)}
.path.kid{background:linear-gradient(160deg,#ffd25a,#f5a623);color:#5b2c07;border:3px solid #fff3c4}
.path.adult{background:var(--card);border:2px solid var(--line)}
.path img{width:78px;height:78px;object-fit:contain}
.path .pi{font-size:46px;line-height:78px}
.path b{font-family:"Round","Rubik";font-size:26px;font-weight:700}
.path small{font-size:13.5px;opacity:.8}
.sfoot{text-align:center;padding:8px 0 calc(12px + var(--sb));font-size:14px;color:var(--mut);font-weight:500}
/* pick */
.lvls{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.lvls button{flex:none;padding:10px 16px;border-radius:999px;background:var(--card);box-shadow:var(--sh);font-weight:600;font-size:15px;white-space:nowrap}
.lvls button.on{background:var(--sage);color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tcard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px;text-align:right;display:flex;gap:12px;align-items:center;min-height:92px;position:relative}
.tcard:active{transform:scale(.98)}
.tcard .em{font-size:38px;width:62px;height:62px;border-radius:16px;display:grid;place-items:center;background:var(--sky2);flex:none}
.tcard b{display:block;font-family:"Read","Rubik";font-size:20px;line-height:1.5;font-weight:600}
.tcard small{color:var(--mut);font-size:13px}
.tcard .dots{display:inline-flex;gap:3px;margin-inline-start:6px;vertical-align:middle}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dots i.f{background:var(--mus)}
.tcard .done{position:absolute;top:8px;left:10px;font-size:13px;color:var(--sage);font-weight:700}
.empty{color:var(--mut);text-align:center;padding:30px 10px;line-height:1.6}
/* hub */
.steps{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--r);padding:10px 14px;box-shadow:var(--sh);margin-bottom:12px;font-size:14px;color:var(--mut);line-height:1.5}
.steps img{width:54px;height:54px;object-fit:contain;flex:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.tile{background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:150px;justify-content:center;text-align:center;position:relative;border:2px solid transparent}
.tile:active{transform:scale(.97)}
.tile img{width:76px;height:76px;object-fit:contain}
.tile .e{font-size:44px;line-height:76px}
.tile b{font-family:"Round","Rubik";font-size:20px;font-weight:600}
.tile small{font-size:12.5px;color:var(--mut);line-height:1.35}
.tile .num{position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--mus2);font-weight:700;font-size:14px;display:grid;place-items:center}
.tile.t1{background:linear-gradient(170deg,#fffdf8,var(--sky2))}.tile.t2{background:linear-gradient(170deg,#fffdf8,var(--sage2))}.tile.t3{background:linear-gradient(170deg,#fffdf8,var(--mus2))}.tile.t4{background:linear-gradient(170deg,#fffdf8,var(--cor2))}
.tile.adultonly{border:2px dashed var(--line);background:var(--card)}
.tile .tag{font-size:11px;background:var(--line);border-radius:6px;padding:1px 6px;color:var(--mut)}
/* reader */
.readwrap{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 12px calc(10px + var(--sb));gap:10px;max-width:1100px;width:100%;margin:0 auto}
.modehead{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--mut);line-height:1.45;min-height:0}
.modehead img{width:46px;height:46px;object-fit:contain;flex:none}
.paper{flex:1;min-height:0;overflow:auto;background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:clamp(14px,3.5vw,34px) clamp(16px,4vw,44px);position:relative;-webkit-overflow-scrolling:touch}
.text{font-family:"Read","Rubik",serif;font-size:calc(clamp(25px,6.4vw,34px)*var(--fs));line-height:calc(2.05*var(--lh));word-spacing:calc(.12em*var(--lh));position:relative;z-index:1}
.text .ttl{display:block;font-weight:700;text-align:center;margin-bottom:.3em;color:var(--sage)}
.w{border-radius:.25em;padding:0 .08em;transition:background .15s,color .15s;cursor:default}
.w.cur{background:var(--hl);box-shadow:0 0 0 .08em var(--hl)}
.w.past{color:#a8998b}
.w.err{background:#fcd5d3;color:var(--bad);text-decoration:line-through;text-decoration-thickness:2px}
.w.last{outline:3px solid var(--sky);outline-offset:1px}
.tap .w{cursor:pointer}
.tap .w:hover{background:var(--sky2)}
.band{position:absolute;left:0;right:0;height:1em;background:rgba(255,224,138,.28);box-shadow:0 0 0 100vmax rgba(251,245,234,.55);pointer-events:none;z-index:2;transition:top .2s;border-top:2px solid rgba(233,185,73,.6);border-bottom:2px solid rgba(233,185,73,.6)}
.panel{flex:none;background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:10px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{min-height:50px;padding:0 20px;border-radius:16px;background:linear-gradient(180deg,#36b26a,#2a8c50);color:#fff;font-weight:700;font-size:17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.big{min-height:60px;font-size:20px;padding:0 28px;border-radius:20px}
.btn.alt{background:var(--card);color:var(--ink);border:2px solid var(--line);box-shadow:none}
.btn.mus{background:linear-gradient(180deg,#ffd25a,#f5b021);color:#5b2c07}
.btn.cor{background:var(--cor)}
.btn.sky{background:var(--sky)}
.btn:disabled{opacity:.45;pointer-events:none}
.rng{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
.rng input{width:min(42vw,220px);accent-color:var(--sage)}
.rng b{color:var(--ink);min-width:3.2em;display:inline-block}
.seg{display:inline-flex;background:var(--bg);border-radius:12px;padding:3px}
.seg button{padding:7px 11px;border-radius:9px;font-size:14px;font-weight:600;color:var(--mut)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.timer{font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;min-width:3.4em;text-align:center;direction:ltr}
.rbars{display:flex;flex-direction:column;gap:5px;flex:1 1 260px;min-width:220px}
.rbar{display:flex;align-items:center;gap:8px;font-size:13.5px}
.rbar span{width:62px;color:var(--mut);flex:none}
.rbar .tr{flex:1;height:18px;border-radius:9px;background:var(--bg);overflow:hidden;position:relative}
.rbar .tr i{position:absolute;inset:0 0 0 auto;width:0;border-radius:9px;background:linear-gradient(270deg,var(--sage),#9cc9a9);transition:width .6s}
.rbar.now .tr i{background:linear-gradient(270deg,var(--mus),#f6d47c)}
.rbar em{font-style:normal;font-weight:700;width:76px;text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
.note{font-size:12.5px;color:var(--mut);line-height:1.45}
.resrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:stretch}
.stat{background:var(--bg);border-radius:14px;padding:8px 14px;text-align:center;min-width:110px}
.stat b{display:block;font-size:28px;font-family:"Round","Rubik"}
.stat small{color:var(--mut);font-size:12.5px}
/* games */
.gamewrap{flex:1;min-height:0;overflow:auto;padding:0 12px calc(14px + var(--sb));display:flex;flex-direction:column;gap:12px;max-width:1100px;width:100%;margin:0 auto}
.ghead{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--mut);line-height:1.45}
.ghead img{width:46px;height:46px;object-fit:contain;flex:none}
.flash{flex:1;min-height:220px;background:var(--card);border-radius:24px;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;cursor:pointer;user-select:none;position:relative}
.flash .fw{font-family:"Read","Rubik";font-size:calc(clamp(44px,13vw,96px)*var(--fs));font-weight:600;line-height:1.6}
.flash .fc{position:absolute;top:12px;left:16px;color:var(--mut);font-size:14px;direction:ltr}
.flash .tapnote{color:var(--mut);font-size:14px}
.gtext{background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:clamp(14px,3.5vw,30px);font-family:"Read","Rubik";font-size:calc(clamp(21px,5vw,30px)*var(--fs));line-height:calc(2.1*var(--lh))}
.gap{display:inline-block;min-width:3.2em;border-bottom:3px dashed var(--mus);border-radius:.3em .3em 0 0;text-align:center;cursor:pointer;padding:0 .2em;line-height:1.5;background:var(--mus2);vertical-align:baseline;margin:0 .05em}
.gap.sel{background:#ffe7a3;outline:3px solid var(--mus)}
.gap.full{border-bottom-style:solid;background:var(--sky2)}
.gap.ok{background:#d5ecd9;border-color:var(--sage)}
.gap.no{background:#fbd9d7;border-color:var(--bad)}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{font-family:"Read","Rubik";font-size:calc(clamp(19px,4.6vw,26px)*var(--fs));background:var(--card);border-radius:14px;box-shadow:var(--sh);padding:6px 14px;line-height:1.6;min-height:48px;border:2px solid transparent}
.chip.used{opacity:.3;pointer-events:none}
.chip.ok{border-color:var(--sage);background:#e6f3e8}.chip.no{border-color:var(--bad);background:#fde6e5}
.answer{min-height:76px;background:var(--card);border-radius:20px;box-shadow:inset 0 0 0 2px var(--line);padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start}
.answer:empty::before{content:attr(data-ph);color:var(--mut);font-size:15px;padding:0 6px}
.gbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gmsg{min-height:30px;text-align:center;font-weight:600;font-size:18px}
.gmsg.good{color:var(--sage)}.gmsg.bad{color:var(--cor)}
.pyr{display:flex;flex-direction:column;align-items:center;gap:8px}
.prow{font-family:"Read","Rubik";font-size:calc(clamp(20px,5vw,30px)*var(--fs));background:var(--card);border-radius:16px;box-shadow:var(--sh);padding:4px 18px;line-height:1.8;opacity:.35;pointer-events:none;border:2px solid transparent;transition:all .2s;text-align:center;max-width:100%}
.prow.act{opacity:1;pointer-events:auto;border-color:var(--mus);cursor:pointer;animation:glow 1.6s infinite}
@keyframes glow{50%{box-shadow:0 0 0 6px rgba(233,185,73,.25)}}
.prow.done{opacity:1;background:#e6f3e8;border-color:var(--sage);pointer-events:none}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:640px;margin:0 auto;width:100%}
.mc{aspect-ratio:1.25;perspective:600px;cursor:pointer}
.mc .in{position:relative;width:100%;height:100%;transition:transform .4s;transform-style:preserve-3d}
.mc.open .in,.mc.got .in{transform:rotateY(180deg)}
.mc .f,.mc .bk{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;box-shadow:var(--sh)}
.mc .bk{background:linear-gradient(150deg,#ffd978,#f0b13d);font-size:30px}
.mc .f{background:var(--card);transform:rotateY(180deg);font-family:"Read","Rubik";font-size:calc(clamp(17px,4.4vw,26px)*var(--fs));padding:4px;text-align:center;line-height:1.5}
.mc.got .f{background:#e6f3e8;outline:3px solid var(--sage)}
.wintag{background:var(--sage2);border-radius:18px;padding:14px;text-align:center;font-size:18px;font-weight:600;color:#2e6a47;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.wintag img{width:60px;height:60px;object-fit:contain}
/* adult */
.atabs{display:flex;gap:6px;padding:0 12px 8px;overflow-x:auto;flex:none;scrollbar-width:none;max-width:1100px;width:100%;margin:0 auto}
.atabs button{flex:none;padding:10px 14px;border-radius:12px;background:var(--card);box-shadow:var(--sh);font-weight:600;font-size:14.5px}
.atabs button.on{background:var(--ink);color:#fff}
.box{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;margin-bottom:12px}
.box h3{margin:0 0 8px;font-size:18px;font-family:"Round","Rubik";font-weight:600}
.box p{margin:6px 0;line-height:1.55;color:var(--mut);font-size:14.5px}
.kids{display:flex;gap:8px;flex-wrap:wrap}
.kid{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--bg);font-weight:600;border:2px solid transparent}
.kid.on{border-color:var(--sage);background:var(--sage2)}
.kid .av{width:34px;height:34px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:20px}
.chart{width:100%;height:auto;display:block}
table.h{width:100%;border-collapse:collapse;font-size:14px}
table.h th,table.h td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:right}
table.h th{color:var(--mut);font-weight:500;font-size:12.5px}
.inp{width:100%;font:inherit;font-size:16px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--ink)}
textarea.inp{min-height:150px;font-family:"Read","Rubik";font-size:19px;line-height:1.9;resize:vertical}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.lnk{color:var(--sky);font-weight:600;text-decoration:underline}
.tlist{display:flex;flex-direction:column;gap:6px}
.titem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--bg)}
.titem b{flex:1;font-family:"Read","Rubik";font-size:17px;font-weight:600}
.titem small{color:var(--mut)}
.sw{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.sw:last-child{border:0}
.tg{width:52px;height:30px;border-radius:15px;background:var(--line);position:relative;flex:none;transition:background .2s}
.tg::after{content:"";position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:right .2s}
.tg.on{background:var(--sage)}.tg.on::after{right:25px}
/* overlays */
.ov{position:fixed;inset:0;background:rgba(59,47,39,.42);display:flex;align-items:center;justify-content:center;z-index:50;padding:14px;animation:fade .2s}
.sheet{background:var(--card);border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,.25);width:min(560px,100%);max-height:calc(100% - 10px);overflow:auto;padding:20px}
.sheet h3{margin:0 0 10px;font-family:"Round","Rubik";font-size:22px;font-weight:600}
.sheet p,.sheet li{line-height:1.6;color:#5b4c40;font-size:15.5px}
.sheet ul{padding-inline-start:20px;margin:6px 0}
.sheet .acts{display:flex;gap:10px;justify-content:flex-start;margin-top:14px;flex-wrap:wrap}
.tutimg{display:block;width:120px;height:120px;object-fit:contain;margin:0 auto 6px}
.tutdots{display:flex;gap:6px;justify-content:center;margin:10px 0 0}.tutdots i{width:9px;height:9px;border-radius:50%;background:var(--line)}.tutdots i.on{background:var(--mus);width:22px;border-radius:5px}
.toast{position:fixed;left:50%;bottom:calc(20px + var(--sb));transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:14px;font-weight:600;opacity:0;pointer-events:none;transition:all .3s;z-index:70;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.party{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(251,245,234,.55);animation:fade .2s}
.party canvas{position:absolute;inset:0;width:100%;height:100%}
.pcard{position:relative;background:var(--card);border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.2);padding:18px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.pcard img{width:130px;height:130px;object-fit:contain}
.pcard b{font-family:"Round","Rubik";font-size:30px}
.pcard small{color:var(--mut);font-size:15px;max-width:280px;line-height:1.5}
/* contrast */
body.hc{--bg:#fff;--card:#fff;--ink:#000;--mut:#333;--line:#999;--hl:#ffd400}
body.hc .paper,body.hc .gtext,body.hc .flash{box-shadow:0 0 0 3px #000}
body.hc .w.past{color:#666}
body.hc .startbg{opacity:.25}
/* landscape phone */
@media (max-height:500px){
 .tbar{padding-top:calc(6px + var(--st));padding-bottom:6px}.ib{width:40px;height:40px}
 .startmain{flex-wrap:nowrap}.hero{width:150px}.paths{flex-wrap:nowrap}.path{min-height:110px}.path img{width:54px;height:54px}.path .pi{font-size:34px;line-height:54px}h1{font-size:34px}.goal{font-size:14px;padding:5px 10px}.startcopy{gap:7px}
 .modehead{display:none}.panel{padding:6px 10px}.btn{min-height:44px}.btn.big{min-height:48px}
 .tile{min-height:110px}.tile img{width:54px;height:54px}.tile .e{font-size:34px;line-height:54px}
 .text{font-size:calc(26px*var(--fs))}
 .sfoot{padding:4px 0 6px}
}
@media (min-width:900px){
 .tiles{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
 .text{font-size:calc(36px*var(--fs))}
}
/* print */
#print{display:none}
@media print{
 @page{size:A4;margin:14mm}
 html,body{height:auto;overflow:visible;background:#fff!important}
 #app,.ov,.toast,.party{display:none!important}
 #print{display:block;color:#000;font-family:"Rubik",Arial,sans-serif}
 #print .ph{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #e9b949;padding-bottom:8px;margin-bottom:12px}
 #print .ph img{height:54px}
 #print h1{font-size:24px;margin:0}
 #print table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
 #print th,#print td{border:1px solid #ccc;padding:5px;text-align:right}
 #print .pf{margin-top:16px;font-size:11px;color:#555;border-top:1px solid #ddd;padding-top:6px}
 #print .sum{display:flex;gap:12px;margin:10px 0}
 #print .sum div{border:1px solid #ddd;border-radius:8px;padding:6px 12px}
 #print svg{width:100%;height:auto}
}

/* pirate world */
body{background:#8fd3f4}
.startbg{background-image:url(img/bg.webp)}
#scr-pick{background:linear-gradient(180deg,#7cc8f0 0%,#5bc0e6 30%,#3fb3d9 100%)}
#scr-pick::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.35),transparent 40%),repeating-radial-gradient(circle at 70% 120%,rgba(255,255,255,.08) 0 12px,transparent 12px 40px);pointer-events:none}
#scr-pick .tbar h2{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.album-btn{height:44px;padding:0 14px;border-radius:14px;background:linear-gradient(180deg,#ffd25a,#f5b021);color:#5b2c07;font-weight:700;font-size:17px;box-shadow:var(--sh);display:flex;align-items:center;gap:6px}
.mapbody{position:relative}
.map{max-width:760px;margin:0 auto;position:relative;padding-bottom:10px}
.isle{position:relative;width:min(100%,640px);aspect-ratio:3/2;margin:0 auto}
.isle:nth-child(4n+3){transform:translateX(-6%)}
.isle:nth-child(4n+1){transform:translateX(5%)}
.isleimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 18px rgba(0,60,90,.25))}
.isletag{position:absolute;top:2%;right:4%;background:rgba(255,253,245,.94);border-radius:14px;padding:5px 12px;box-shadow:var(--sh);border:2px solid #f5b021;text-align:right;z-index:2}
.isletag b{display:block;font-family:"Round","Rubik";font-size:16px;color:var(--wood)}.isletag small{font-size:12px;color:var(--mut)}
.stn{position:absolute;width:18%;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:3;transform:translateY(-10%)}
.stn .disc{width:clamp(48px,11vw,70px);height:clamp(48px,11vw,70px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe8,#ffe39a);border:4px solid #fff;box-shadow:0 5px 0 #c98a16,0 8px 14px rgba(0,0,0,.25);display:grid;place-items:center;font-size:clamp(24px,5.6vw,36px);transition:transform .15s}
.stn:active .disc{transform:translateY(3px);box-shadow:0 2px 0 #c98a16}
.stn.full .disc{background:radial-gradient(circle at 35% 30%,#fff6c0,#ffc233);border-color:#fff3c4}
.stn .lab{background:rgba(74,35,6,.85);color:#fff;font-family:"Read","Rubik";font-size:clamp(11.5px,2.6vw,14px);padding:1px 8px;border-radius:9px;width:max-content;max-width:min(150px,32vw);text-align:center;line-height:1.55}
.stn .stars{display:flex;gap:1px;font-size:clamp(14px,3.2vw,18px);line-height:1}
.stn .stars i{font-style:normal;color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.stn .stars i.f{color:#ffc233;text-shadow:0 0 6px rgba(255,200,40,.9),0 1px 1px #a86a00}
.stn.here .disc{animation:glowst 1.8s infinite}
@keyframes glowst{50%{box-shadow:0 5px 0 #c98a16,0 0 0 10px rgba(255,210,90,.45)}}
.kipimap{position:absolute;width:clamp(60px,14vw,96px);top:-62%;left:-48%;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));animation:bob 3s ease-in-out infinite}
.flyer{position:fixed;width:110px;z-index:40;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.bridge{height:56px;width:min(100%,640px);margin:-28px auto;position:relative;z-index:1}
.bridge svg{width:100%;height:100%}
.mine{max-width:760px;margin:14px auto 0;background:rgba(255,253,245,.92);border-radius:20px;padding:12px 14px;box-shadow:var(--sh)}
.mine h3{margin:0 0 8px;font-family:"Round","Rubik";font-size:17px}
.album{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:10px 0}
.stk{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:26px;background:var(--bg);color:var(--line);font-weight:700;border:3px dashed var(--line)}
.stk.got{background:#fff;border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.18);color:inherit;transform:rotate(-6deg)}
.stk.got:nth-child(2n){transform:rotate(5deg)}
.sky{width:58px;height:110px;border-radius:16px;background:linear-gradient(180deg,#bfe6f7,#e9f7fd);position:relative;flex:none;overflow:hidden;border:2px solid var(--line)}
.sky .bal{position:absolute;left:50%;transform:translateX(-50%);bottom:2%;font-size:30px;transition:bottom .8s cubic-bezier(.3,1.4,.5,1)}
.sky .goalline{position:absolute;left:4px;right:4px;border-top:2px dashed #f0643c;height:0}
.w.echo{background:var(--sky2)}
.w.readme{background:#dff3e2}
.glowb{animation:glow 1.4s infinite}
#scr-hub,#scr-games,#scr-game,#scr-read,#scr-adult{background:linear-gradient(180deg,#fff4d6,#ffe9b8)}
#scr-hub .tbar,#scr-games .tbar{background:transparent}
@media (max-width:420px){.tbar{gap:5px;padding-left:8px;padding-right:8px}.ib{width:40px;height:40px;font-size:17px;border-radius:12px}.album-btn{height:40px;padding:0 10px}.tbar h2{font-size:18px;margin:0 2px}}
.pz{display:inline-block;width:22px;height:1.3em;vertical-align:middle;margin:0 2px;border-radius:8px;border:2px dashed rgba(31,159,209,.45);background:rgba(216,240,251,.6);font-weight:900;color:var(--sage);font-size:.9em;line-height:1}
.pz.ok{border:2px solid var(--sage);background:#dff3e2;width:auto;padding:0 4px}.pz.no{border-color:var(--bad);background:#fde6e5}
.w.err{animation:shake .3s}@keyframes shake{25%{transform:translateX(3px)}75%{transform:translateX(-3px)}}
.chart{max-height:300px}
.path.mine{background:linear-gradient(160deg,#9be7ff,#3fb3d9);color:#073b52;border:3px solid #e2f7ff}
.paths{max-width:820px}.startcopy{max-width:820px}
.path{flex:1 1 170px;max-width:240px}
.mineisle.h1 .isleimg{filter:hue-rotate(-25deg) drop-shadow(0 12px 18px rgba(0,60,90,.25))}
.addstn .disc{background:radial-gradient(circle at 35% 30%,#fff,#d8f0fb);border-style:dashed;color:var(--sky);font-weight:900}
@media (max-width:560px){.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.path{min-height:128px;padding:10px 4px;border-radius:20px;max-width:none;min-width:0}.path img{width:58px;height:58px}.path .pi{font-size:36px;line-height:58px}.path b{font-size:18px}.path small{font-size:11.5px;line-height:1.3}.hero{width:min(42vw,170px)}.startmain{gap:4px;padding-top:0}}
@media (max-width:560px) and (max-height:760px){.hero{width:120px}h1{font-size:34px}.goal{font-size:14px}}
.titem{flex-wrap:wrap}.titem b{min-width:140px}
.script{display:flex;flex-direction:column;gap:8px;background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:14px;flex:1;min-height:0;overflow:auto}
.sl{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:14px;border:2px solid transparent;transition:all .2s;opacity:.75}
.sl .who{font-size:13px;font-weight:700;color:var(--mut)}.sl .ln{font-family:"Read","Rubik";font-size:calc(clamp(20px,5vw,28px)*var(--fs));line-height:calc(1.9*var(--lh))}
.sl.mine{background:var(--mus2)}.sl.mine .who{color:#b5740a}
.sl.cur{opacity:1;border-color:var(--sky);background:var(--sky2);box-shadow:0 4px 12px rgba(31,159,209,.2)}.sl.mine.cur{border-color:#f5b021;background:#ffe9a8}
.sl.past{opacity:.45}
#gb>.panel{flex:none}
.stage-btn{display:flex;align-items:center;gap:10px;margin:0 auto 10px;max-width:640px;width:100%;background:linear-gradient(180deg,#ff8a5c,#f0643c);color:#fff;border-radius:18px;padding:10px 16px;box-shadow:0 4px 0 #b8431f,0 8px 14px rgba(0,0,0,.18);text-align:right}
.stage-btn span{font-size:30px}.stage-btn b{font-family:"Round","Rubik";font-size:19px}.stage-btn small{opacity:.9;margin-inline-start:auto;font-size:13px}
/* scene backgrounds (soft, behind panels only) */
#scr-hub,#scr-games,#scr-game,#scr-read{background-size:cover;background-position:center bottom;background-repeat:no-repeat}
#scr-hub{background-image:linear-gradient(rgba(255,247,226,.52),rgba(255,247,226,.68)),url(img/s-beach.webp)}
#scr-games{background-image:linear-gradient(rgba(255,247,226,.5),rgba(255,247,226,.66)),url(img/s-jungle.webp)}
#scr-read{background-image:linear-gradient(rgba(255,247,226,.55),rgba(255,247,226,.7)),url(img/s-lagoon.webp)}
#scr-game{background-image:linear-gradient(rgba(255,247,226,.55),rgba(255,247,226,.7)),url(img/s-deck.webp)}
#scr-game.sc-jungle{background-image:linear-gradient(rgba(255,247,226,.55),rgba(255,247,226,.7)),url(img/s-jungle.webp)}
#scr-game.sc-cave{background-image:linear-gradient(rgba(255,247,226,.5),rgba(255,247,226,.66)),url(img/s-cave.webp)}
#scr-game.sc-beach{background-image:linear-gradient(rgba(255,247,226,.55),rgba(255,247,226,.7)),url(img/s-beach.webp)}
#scr-read.chk{background-image:none;background:#fff8e6}
.modehead,.ghead,.steps{background:rgba(255,253,245,.9);border-radius:16px;padding:6px 10px;box-shadow:var(--sh)}
.critter{position:absolute;pointer-events:none;z-index:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));animation:bob 3.6s ease-in-out infinite}
.crit-flow{display:block;width:84px;margin:14px auto 0;pointer-events:none;animation:bob 3.6s ease-in-out infinite}
.scr>.critter{display:none}
@media (min-width:1000px) and (min-height:640px){.scr>.critter{display:block;width:110px;bottom:24px;left:max(10px,calc(50% - 680px))}.scr>.critter.r{left:auto;right:max(10px,calc(50% - 680px));bottom:auto;top:140px}}
.body,.readwrap,.gamewrap{position:relative;z-index:1}
@media (min-width:1000px) and (min-height:640px){.crit-flow{display:none}}
@media (max-height:500px){.mem{grid-template-columns:repeat(6,1fr);max-width:760px}.mc{aspect-ratio:1.7}.script .sl .ln{font-size:calc(20px*var(--fs))}.ghead{display:none}}

/* tap-to-hear mode */
.panel .tapnote{font-size:15px;font-weight:600;color:var(--mut)}
.tap .w{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}

/* listening speed slider */
.lspd{gap:6px}.lspd[hidden]{display:none}
.lspd input{width:min(30vw,150px);height:32px;cursor:pointer}
.lspd b{min-width:2.6em;font-variant-numeric:tabular-nums}
.lspd span{font-size:18px}