:root{
  --bg:#f2f8ff; --bg2:#e3eefc; --ink:#17203a; --muted:#536079; --card:#ffffff; --line:rgba(23,32,58,.13);
  --good:#178a4c; --bad:#c93b3b; --shade:rgba(30,50,110,.13);
  --display:'Baloo 2','Nunito',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --body:'Nunito',ui-rounded,'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1324; --bg2:#16203b; --ink:#edf2ff; --muted:#a3aec8; --card:#18223d; --line:rgba(255,255,255,.13);
    --good:#3fcf85; --bad:#ff7b7b; --shade:rgba(0,0,0,.45); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1324; --bg2:#16203b; --ink:#edf2ff; --muted:#a3aec8; --card:#18223d; --line:rgba(255,255,255,.13);
  --good:#3fcf85; --bad:#ff7b7b; --shade:rgba(0,0,0,.45); color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0; height:100%; overflow:hidden; background:#0b0a1c; color:var(--ink); font-family:var(--body); -webkit-tap-highlight-color:transparent}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:rgba(8,8,24,.7)}
button{font-family:inherit}
:focus-visible{outline:3px solid #ffd319; outline-offset:3px}

/* ---------- Home: the tank ---------- */
#c{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; outline:none}
#c.dragging{cursor:grabbing}
.topbar{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 26px; background:linear-gradient(rgba(8,8,24,.72),rgba(8,8,24,0)); color:#fff; pointer-events:none}
.topbar > *{pointer-events:auto}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{font-size:34px; line-height:1; filter:drop-shadow(0 3px 8px rgba(255,211,25,.45))}
.brand h1{margin:0; font:800 clamp(20px,3.2vw,30px)/1 var(--display); letter-spacing:.2px}
.brand small{display:block; margin-top:3px; font:700 clamp(11px,1.5vw,14px)/1.2 var(--body); color:#cfd6ff}
.spacer{flex:1}
.tools{display:flex; align-items:center; gap:8px}
.icon-btn{width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; font-size:19px; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s, border-color .2s, transform .15s}
.icon-btn:hover{background:rgba(255,255,255,.22)}
.icon-btn[hidden]{display:none}
#resetBtn.on{background:#ffd319; border-color:#ffd319; color:#3b2a00}
.lang-btn{min-width:46px; height:44px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; font:800 15px/1 var(--body); letter-spacing:.5px; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.hero .lang-btn{background:var(--card); color:var(--ink); border:2px solid var(--line); -webkit-backdrop-filter:none; backdrop-filter:none}
.hint{position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; justify-content:center; padding:0 14px calc(env(safe-area-inset-bottom,0px) + 16px); pointer-events:none}
.hint span{background:rgba(10,14,34,.6); color:#fff; padding:9px 18px; border-radius:999px; font:700 14px/1.3 var(--body); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); text-align:center}
#labels{position:fixed; inset:0; z-index:10; pointer-events:none; overflow:hidden}
.blabel{position:absolute; left:0; top:0; width:48px; height:48px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; pointer-events:auto;
  display:flex; align-items:center; justify-content:center; will-change:transform; -webkit-user-select:none; user-select:none; transition:opacity .35s}
.blabel.dim{opacity:0; pointer-events:none}
.blabel .ic{font-size:max(15px, calc(var(--r,20px)*1.05)); line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); transition:transform .25s}
.blabel:hover .ic, .blabel:focus-visible .ic{transform:scale(1.12) rotate(-6deg)}
.blabel .vi{position:absolute; left:50%; top:calc(50% + var(--r,20px) + 5px); transform:translateX(-50%); padding:3px 9px 2px; border-radius:999px; white-space:nowrap;
  font:700 12.5px/1.2 var(--display); color:#fff; background:rgba(8,26,48,.42); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .25s}
.blabel:hover .vi, .blabel:focus-visible .vi{background:var(--fc)}
.blabel .en{display:none}
.speech{position:fixed; left:0; top:0; z-index:12; max-width:min(290px,72vw); padding:10px 15px; border-radius:18px; background:#fff; color:#1b2340;
  font:700 16px/1.3 var(--display); box-shadow:0 10px 26px rgba(0,0,0,.3); pointer-events:none; opacity:0; transition:opacity .2s; will-change:transform}
.speech.show{opacity:1}
.speech::after{content:""; position:absolute; left:50%; bottom:-9px; margin-left:-9px; border:9px solid transparent; border-bottom:0; border-top-color:#fff}
.speech.small{font-size:14px; padding:6px 12px; background:#ffe1d6; color:#5a1f0c}
.speech.small::after{border-top-color:#ffe1d6}
.tag{position:fixed; left:0; top:0; z-index:11; padding:3px 11px; border-radius:999px; background:#ffd319; color:#3b2a00; font:800 13px/1.4 var(--display); pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.25); transition:opacity .2s; white-space:nowrap}
#wipe{position:fixed; inset:0; z-index:40; pointer-events:none; display:grid; place-items:center; -webkit-clip-path:circle(0px at 50% 50%); clip-path:circle(0px at 50% 50%)}
#wipe span{font-size:min(30vw,180px); line-height:1; filter:drop-shadow(0 10px 30px rgba(0,0,0,.25))}
#loader{position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:#0b0a1c; color:#fff; transition:opacity .6s}
#loader.hide{opacity:0; pointer-events:none}
#loader div{text-align:center; font:700 18px/1.4 var(--display)}
#loader b{display:block; font-size:64px; line-height:1.1; animation:bob 1.2s ease-in-out infinite}
body.room-open #labels, body.room-open .topbar, body.room-open .hint, body.room-open .speech, body.room-open .tag{visibility:hidden}

/* fallback when 3D is unavailable */
body.nogl{background:linear-gradient(#69bdf0,#0c4a78)}
body.nogl #c{display:none}
body.nogl #labels{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:44px 30px; padding:120px 20px 100px}
body.nogl .blabel{position:relative; --r:28px; width:56px; height:56px; transform:none!important; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75) 0 7%,transparent 8%),radial-gradient(circle,rgba(255,255,255,.05) 55%,color-mix(in srgb,var(--fc) 60%,white) 100%); border:2px solid rgba(255,255,255,.55)}

/* ---------- Science rooms ---------- */
#room{position:fixed; inset:0; z-index:35; display:none; overflow-y:auto; overflow-x:hidden; background:var(--bg); color:var(--ink); -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
#room.open{display:block}
.wrap{max-width:980px; margin:0 auto}
.hero{position:relative; padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 58px; background:var(--bg2); background:color-mix(in srgb,var(--fc) 26%,var(--bg))}
.hero .wave{position:absolute; left:0; bottom:-1px; width:100%; height:42px; display:block}
.hero .wave path{fill:var(--bg)}
.hero-bar{display:flex; align-items:center; justify-content:space-between; gap:10px}
.back{display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:10px 18px; border-radius:999px; border:2px solid var(--line); background:var(--card); color:var(--ink); font:800 16px var(--body); cursor:pointer}
.title-row{display:flex; align-items:center; gap:16px; margin-top:20px}
.title-row .ri{font-size:clamp(52px,9vw,80px); line-height:1; filter:drop-shadow(0 6px 10px var(--shade))}
.title-row h2{margin:0; font:800 clamp(38px,7vw,64px)/.95 var(--display); letter-spacing:-.5px}
.title-row .en{display:block; margin-top:4px; font:700 16px var(--body); color:var(--muted)}
.guide{display:flex; align-items:flex-end; gap:10px; margin-top:18px}
.mduck-btn{flex:none; width:112px; height:96px; padding:0; border:0; background:none; cursor:pointer}
.mduck{width:100%; height:100%; display:block; animation:bob 2.8s ease-in-out infinite; overflow:visible}
.mduck .lower{transform-box:fill-box; transform-origin:0% 0%}
.mduck-btn.talk .lower{animation:jaw .14s ease-in-out 6 alternate}
.say{position:relative; max-width:640px; margin-bottom:34px; padding:14px 56px 14px 18px; border-radius:22px 22px 22px 6px; background:var(--card); box-shadow:0 6px 0 var(--shade); font:700 clamp(16px,2.3vw,19px)/1.45 var(--body)}
.say p{margin:0}
.speak{position:absolute; right:9px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; font-size:18px; background:var(--bg2); background:color-mix(in srgb,var(--fc) 24%,var(--card))}
.room-main{padding:4px 18px calc(env(safe-area-inset-bottom,0px) + 56px)}
.block{margin:30px 0}
.block h3{margin:0 0 12px; font:800 clamp(23px,3.4vw,30px)/1.15 var(--display)}
.act-card{padding:clamp(16px,3vw,28px); border-radius:28px; background:var(--card); border:3px solid var(--line); border-color:color-mix(in srgb,var(--fc) 45%,transparent); box-shadow:0 10px 0 var(--shade)}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px}
.fact{display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:22px 22px 22px 6px; background:var(--bg2); background:color-mix(in srgb,var(--fc) 13%,var(--card))}
.fact .fi{font-size:34px; line-height:1}
.fact p{margin:0; font:600 16px/1.5 var(--body)}
.quiz .q{margin:0 0 14px; font:700 clamp(18px,2.6vw,21px)/1.45 var(--body)}
.qopts{display:flex; flex-wrap:wrap; gap:10px}
.qopt{min-height:50px; padding:12px 20px; border-radius:999px; border:2px solid var(--line); background:var(--card); color:var(--ink); font:700 17px var(--body); cursor:pointer}
.qopt:disabled{cursor:default}
.qopt.right{background:var(--good); border-color:transparent; color:#fff}
.qopt.wrong{background:var(--bad); border-color:transparent; color:#fff; animation:shake .4s}
.qres{min-height:1.5em; margin:14px 0 0; font:700 16px/1.45 var(--body)}
.next-rooms{display:flex; flex-wrap:wrap; gap:10px}
.nr{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:10px 18px; border-radius:999px; text-decoration:none; color:var(--ink); font:800 16px var(--body); background:var(--card); border:2px solid var(--line); border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.nr span{font-size:22px}
.act{min-height:48px; padding:12px 18px; border:0; border-radius:16px; background:var(--fd); color:#fff; font:800 16px var(--body); cursor:pointer; box-shadow:0 5px 0 rgba(0,0,0,.22); transition:transform .08s, box-shadow .08s}
.act:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.22)}
.act.ghost{background:transparent; color:var(--ink); border:2px solid var(--line); box-shadow:none}
.g-btns{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px}
.chip{min-height:44px; padding:9px 15px; border-radius:999px; border:2px solid var(--line); background:transparent; color:var(--ink); font:700 15px var(--body); cursor:pointer}
.chip.on{background:var(--fd); border-color:var(--fd); color:#fff}
.tile{display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px; border-radius:18px; border:2px solid var(--line); background:transparent; color:var(--ink); font:700 14px/1.2 var(--body); cursor:pointer; text-align:center}
.tile > span{font-size:34px; line-height:1.1}
.tile small{color:var(--muted); font-weight:700}
.tile.on{border-color:var(--fd); background:color-mix(in srgb,var(--fc) 20%,transparent)}

/* math */
.seg{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.mq{min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center}
.eq{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px; font:800 clamp(32px,6vw,46px)/1 var(--display)}
.term{display:flex; flex-direction:column; align-items:center; gap:8px}
.grp{display:flex; flex-wrap:wrap; justify-content:center; max-width:200px; font-size:clamp(20px,3.6vw,28px); line-height:1.2}
.grp.big{max-width:440px; font-size:clamp(24px,4.4vw,34px)}
.grp .gone{opacity:.22; filter:grayscale(1); transform:translateY(-6px) rotate(-12deg)}
.op{color:var(--fd)}
.qm{display:inline-grid; place-items:center; min-width:1.35em; height:1.35em; padding:0 .15em; border-radius:999px; background:var(--bg2); background:color-mix(in srgb,var(--fc) 25%,transparent); color:var(--fd)}
.story{margin:0; font:700 18px/1.45 var(--body)}
.mopts{display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin:20px 0 12px}
.ans{width:86px; height:86px; border-radius:50%; cursor:pointer; color:var(--ink); font:800 36px var(--display); border:3px solid var(--fc);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0 9%,transparent 10%),radial-gradient(circle,transparent 50%,color-mix(in srgb,var(--fc) 45%,transparent) 100%),var(--card); transition:transform .2s}
.ans:hover{transform:scale(1.06)}
.ans.right{background:var(--good); border-color:transparent; color:#fff; transform:scale(1.12)}
.ans.wrong{animation:shake .4s}
.stars{display:flex; justify-content:center; gap:4px; font-size:22px}
.stars span{opacity:.18; filter:grayscale(1); transition:all .3s}
.stars span.on{opacity:1; filter:none; transform:scale(1.15)}

/* geography */
.geo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:center}
.earth{display:block; width:100%; max-width:380px; margin:0 auto; overflow:visible}
.ly{cursor:pointer}
.ly.sel{stroke:#fff; stroke-width:5}
.lbtns{display:grid; gap:8px}
.lb{display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 14px; border-radius:14px; border:2px solid var(--line); background:transparent; color:var(--ink); font:700 16px var(--body); text-align:left; cursor:pointer}
.lb i{flex:none; width:22px; height:22px; border-radius:50%; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.lb small{margin-left:auto; color:var(--muted); font-weight:700}
.lb.on{border-color:var(--fd); background:color-mix(in srgb,var(--fc) 16%,transparent)}
.linfo{margin-top:14px; padding:16px; border-radius:18px; background:var(--bg2)}
.linfo h4{margin:0; font:800 24px/1.1 var(--display)}
.linfo h4 small{font:700 14px var(--body); color:var(--muted)}
.linfo p{margin:8px 0 0; font:600 16px/1.5 var(--body)}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.tag2{padding:5px 11px; border-radius:999px; background:var(--card); border:1px solid var(--line); font:700 14px var(--body)}
.note{margin:18px 0 0; font:600 16px/1.5 var(--body); color:var(--muted)}

/* biology */
.garden-wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:20px; align-items:center}
.garden{display:block; width:100%; border-radius:22px}
.sunrays{transform-origin:270px 46px; animation:spin 18s linear infinite}
.wdrop{animation:fall .8s ease-in forwards}
.meter{display:flex; align-items:center; gap:10px; margin:8px 0; font:700 15px var(--body)}
.meter > span{flex:none; width:96px}
.bar{flex:1; height:16px; border-radius:999px; overflow:hidden; background:var(--bg2); border:1px solid var(--line)}
.bar i{display:block; height:100%; width:0; border-radius:999px; background:#3aa0ff; transition:width .5s}
.bar i.gbar{background:#43a047}
.g-status{min-height:2.9em; margin:8px 0 4px; font:700 17px/1.45 var(--body)}
.g-day{margin:0; color:var(--muted); font-weight:700}

/* astronomy */
.space-wrap{border-radius:22px; overflow:hidden; background:#060918}
.space{display:block; width:100%; aspect-ratio:3/2; min-height:240px; max-height:520px; cursor:pointer; touch-action:manipulation}
.astro-ctrl{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:14px 0}
.speed{display:flex; align-items:center; gap:10px; font:700 16px var(--body)}
.speed input{width:min(200px,45vw); accent-color:var(--fd)}
.pinfo{min-height:92px; padding:14px 16px; border-radius:18px; background:var(--bg2); font:600 16px/1.5 var(--body)}
.pinfo h4{margin:0 0 4px; font:800 22px/1.1 var(--display)}
.pinfo h4 small{font:700 14px var(--body); color:var(--muted)}
.pinfo p{margin:0}

/* mechanics */
.m-help{margin:0 0 12px; font:600 16px/1.45 var(--body); color:var(--muted)}
.palette{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.seesaw{position:relative; height:220px; margin:12px 0 0}
.plank{position:absolute; left:2%; right:2%; top:140px; height:18px; border-radius:9px; background:linear-gradient(#cf9254,#9a6230); box-shadow:inset 0 -4px 0 rgba(0,0,0,.18); transition:transform .9s cubic-bezier(.34,1.5,.64,1); transform-origin:50% 50%}
.fulcrum{position:absolute; left:50%; top:156px; width:0; height:0; transform:translateX(-50%); border-left:36px solid transparent; border-right:36px solid transparent; border-bottom:58px solid #7d8597}
.slot{position:absolute; bottom:18px; width:54px; height:62px; margin-left:-27px; padding:0; border:0; background:none; color:var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:flex-end}
.slot .who{font-size:42px; line-height:1}
.slot.empty .who{display:grid; place-items:center; width:38px; height:38px; margin-bottom:4px; border:2px dashed var(--muted); border-radius:50%; font:800 20px var(--body); color:var(--muted); opacity:.65}
.slot .num{position:absolute; bottom:-17px; left:50%; transform:translateX(-50%); font:800 12px var(--body); color:#fff}
.torque{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px}
.torque > div{padding:12px 14px; border-radius:16px; background:var(--bg2); font:700 16px/1.4 var(--body)}
.torque b{display:block; font:800 15px var(--body); color:var(--muted)}
.torque .tr{text-align:right}
.mstatus{min-height:1.5em; margin:12px 0 0; font:800 17px/1.45 var(--body)}

/* chemistry */
.lab{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:22px; align-items:center}
.beaker-wrap{position:relative; width:100%; max-width:250px; margin:0 auto; color:var(--ink)}
.beaker{display:block; width:100%; overflow:visible}
.liquid{transition:fill 1.3s ease}
.fizz circle{animation:rise 1.5s ease-in forwards}
.drop-emoji{position:absolute; left:50%; top:-12px; font-size:42px; line-height:1; opacity:0; pointer-events:none; transform:translateX(-50%)}
.drop-emoji.go{animation:dropIn .75s ease-in forwards}
.subs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.ph{position:relative; margin:18px 0 8px; padding-top:34px}
.ph-bar{height:18px; border-radius:999px}
.ph-mark{position:absolute; top:0; left:50%; transform:translateX(-50%); transition:left 1.1s cubic-bezier(.34,1.5,.64,1)}
.ph-mark span{display:grid; place-items:center; min-width:34px; height:26px; padding:0 6px; border-radius:8px; background:var(--ink); color:var(--bg); font:800 14px var(--body)}
.ph-mark::after{content:""; display:block; width:0; height:0; margin:0 auto; border:7px solid transparent; border-bottom:0; border-top-color:var(--ink)}
.ph-labels{display:flex; justify-content:space-between; margin-top:6px; font:700 13px var(--body); color:var(--muted)}
.chem-res{min-height:3em; margin:10px 0; font:700 16px/1.5 var(--body)}
.sw{display:inline-block; width:18px; height:18px; margin:0 4px -3px 2px; border-radius:50%; border:2px solid var(--card); box-shadow:0 0 0 1px var(--line)}
.safety{margin:16px 0 0; font:600 14px/1.45 var(--body); color:var(--muted)}

/* physics */
.objs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.guess{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 0; padding:12px 14px; border-radius:18px; background:var(--bg2); background:color-mix(in srgb,var(--fc) 16%,var(--card))}
.guess[hidden]{display:none}
.gq{flex:1 1 220px; font:800 18px/1.35 var(--body)}
.gb{display:flex; gap:10px}
.ptank{position:relative; height:clamp(230px,40vw,320px); margin:16px 0 4px; overflow:hidden; border:4px solid var(--line); border-top:0; border-radius:0 0 28px 28px; background:linear-gradient(var(--bg2),var(--bg))}
.pwater{position:absolute; left:0; right:0; top:28%; bottom:0; background:linear-gradient(rgba(70,175,255,.5),rgba(20,95,200,.7)); transition:background 1s}
.pwater::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:rgba(255,255,255,.6)}
.ptank.salty .pwater{background:linear-gradient(rgba(150,215,240,.6),rgba(70,140,200,.78))}
.thing{position:absolute; width:48px; height:48px; display:grid; place-items:center; font-size:42px; line-height:1; transition:top 1.1s cubic-bezier(.34,1.3,.64,1); z-index:2}
.thing.bob span{display:block; animation:bobsm 2.4s ease-in-out infinite}
.ring{position:absolute; width:70px; height:14px; margin-left:-11px; border:3px solid rgba(255,255,255,.75); border-radius:50%; animation:ringOut .7s ease-out forwards; pointer-events:none; z-index:3}
.pres{min-height:3em; margin:12px 0 0; font:700 17px/1.5 var(--body)}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bobsm{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes jaw{from{transform:rotate(0)}to{transform:rotate(20deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fall{from{transform:translateY(0);opacity:1}to{transform:translateY(70px);opacity:0}}
@keyframes rise{to{transform:translateY(-110px);opacity:0}}
@keyframes dropIn{0%{opacity:1;transform:translate(-50%,-30px) rotate(-20deg)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,110px) rotate(25deg)}}
@keyframes ringOut{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}

@media (max-width:720px){
  .geo,.garden-wrap,.lab{grid-template-columns:1fr}
  .torque{grid-template-columns:1fr}
  .torque .tr{text-align:left}
  .hint span{font-size:13px}
}
@media (max-width:520px){
  .palette,.objs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .subs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ans{width:74px; height:74px; font-size:30px}
  .slot{width:44px; margin-left:-22px}
  .slot .who{font-size:32px}
  .brand small{display:none}
}
@media (prefers-reduced-motion: reduce){
  .mduck,#loader b,.sunrays,.thing.bob span{animation:none}
  .plank,.ph-mark,.thing{transition-duration:.2s}
}

/* Fun Flag game */
.game-card{padding:clamp(8px,1.6vw,14px)}
.game-frame{position:relative; height:min(78vh,720px); min-height:420px; border-radius:20px; overflow:hidden; background:#cfe3ea}
.game-frame iframe{display:block; width:100%; height:100%; border:0}
.game-ext{display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 12px; text-align:center}
.game-ext > span{font-size:56px; line-height:1}
.game-ext p{margin:0; font:700 17px/1.4 var(--body)}
a.act{display:inline-flex; align-items:center; text-decoration:none}

/* Guestbook */
.gb-form{display:grid; gap:14px}
.gb-form label{display:grid; gap:6px; font:800 15px var(--body)}
.gb-form input,.gb-form select,.gb-form textarea{width:100%; padding:12px 14px; border-radius:14px; border:2px solid var(--line); background:var(--bg); color:var(--ink); font:600 16px/1.4 var(--body)}
.gb-form textarea{resize:vertical; min-height:110px}
.gb-form input:focus,.gb-form select:focus,.gb-form textarea:focus{outline:none; border-color:var(--fd)}
.gb-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.gb-safe{margin:0; padding:12px 14px; border-radius:14px; background:var(--bg2); font:600 15px/1.45 var(--body)}
.gb-actions{display:flex; align-items:center; justify-content:space-between; gap:10px}
.gb-count{color:var(--muted); font-weight:700}
.gb-status{min-height:1.4em; margin:0; font:700 16px/1.45 var(--body)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.gb-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.gb-item{padding:16px 18px; border-radius:22px 22px 22px 6px; background:var(--card); border:2px solid var(--line)}
.gb-item header{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.gb-item header b{font:800 18px var(--display)}
.gb-from{color:var(--muted); font-weight:700; font-size:14px}
.gb-item p{margin:8px 0; font:600 16px/1.5 var(--body); white-space:pre-wrap; overflow-wrap:anywhere}
.gb-item footer{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:var(--muted); font-weight:700}
.gb-sub{padding:3px 10px; border-radius:999px; background:color-mix(in srgb,var(--c) 20%,transparent); color:var(--ink)}
.muted{color:var(--muted); font-weight:600}
#dbg{position:fixed; left:8px; bottom:8px; z-index:60; max-width:min(92vw,640px); max-height:40vh; overflow:auto; margin:0; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.82); color:#ffb4b4; font:12px/1.4 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap}
@media (max-width:620px){
  .gb-row{grid-template-columns:1fr}
  .icon-btn{width:40px; height:40px; font-size:17px}
  .lang-btn{height:40px; min-width:42px; padding:0 10px; font-size:14px}
  .tools{gap:6px}
  .brand .logo{font-size:28px}
}