@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/Poppins-Regular.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/Poppins-Medium.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:600 900;font-style:normal;font-display:swap;src:url(../fonts/Poppins-Bold.woff) format("woff")}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: comic book. Every section is a panel with a thick ink outline and an offset shadow, like the videos. */
:root{
  --paper:#FFF3D9; --panel:#FFFFFF; --ink:#4A2E14; --text:#1F3B57; --muted:#5B4A3A;
  --sun:#FFD34E; --red:#D92D20; --red-ink:#FFFFFF; --green:#2E7D4F; --night:#1F3B57;
  --dot:rgba(74,46,20,.09); --focus:#1565C0;
  --c-zoe:#FFD34E; --c-dia:#6CB8FF; --c-gas:#B79CFF; --c-ast:#7FD1AE; --c-neu:#FF9EB5; --c-all:#A8D86A;
  --f-display:"Poppins","Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;
  --f-body:"Poppins","Verdana","Segoe UI",system-ui,sans-serif;
  --fs:1.125rem; --r:18px; --sh:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#13202E; --panel:#1E3045; --ink:#05090E; --text:#FFF3D9; --muted:#D9C8AE;
  --red:#FF6A5C; --red-ink:#13202E; --green:#6FD39A; --night:#0C1724; --dot:rgba(255,243,217,.05); --focus:#8FC3FF; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#13202E; --panel:#1E3045; --ink:#05090E; --text:#FFF3D9; --muted:#D9C8AE;
  --red:#FF6A5C; --red-ink:#13202E; --green:#6FD39A; --night:#0C1724; --dot:rgba(255,243,217,.05); --focus:#8FC3FF; color-scheme:dark}
:root.hc{--muted:var(--text); --dot:transparent}
:root.big{--fs:1.35rem}
html{font-size:100%;scroll-behavior:smooth}
:root.calm{scroll-behavior:auto}
body{background:var(--paper);color:var(--text);font-family:var(--f-body);font-size:var(--fs);line-height:1.6;
  background-image:radial-gradient(var(--dot) 2px,transparent 2.5px);background-size:16px 16px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--night)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:12px;top:-60px;background:var(--sun);color:#1F3B57;padding:10px 16px;border:3px solid var(--ink);font-weight:700;z-index:50}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* comic primitives */
.panel{background:var(--panel);border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh) var(--sh) 0 var(--ink)}
.btn{font:700 1rem/1.2 var(--f-display);display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 20px;border:4px solid var(--ink);border-radius:999px;
  background:var(--sun);color:#1F3B57;box-shadow:4px 4px 0 var(--ink);cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:var(--panel);color:var(--text)}
.btn.red{background:var(--red);color:var(--red-ink)}
.btn svg{width:22px;height:22px;flex:none}
.tag{display:inline-block;font:800 .8rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border:3px solid var(--ink);border-radius:8px;background:var(--sun);color:#1F3B57;transform:rotate(-2deg)}
.bubble{position:relative;background:#fff;color:#1F3B57;border:4px solid var(--ink);border-radius:26px;padding:16px 20px;font:700 1.1rem/1.4 var(--f-display);box-shadow:5px 5px 0 var(--ink)}
.bubble::after{content:"";position:absolute;width:26px;height:26px;background:#fff;border:4px solid var(--ink);border-top:0;border-left:0;transform:rotate(45deg)}
.say{display:inline-flex;align-items:center;gap:6px;font:700 .9rem/1 var(--f-display);background:none;border:3px solid var(--ink);border-radius:999px;padding:8px 12px;min-height:40px;color:var(--text);cursor:pointer}
.say svg{width:18px;height:18px}
.say:hover{background:var(--sun);color:#1F3B57}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--night);color:#FFF3D9;border-bottom:4px solid var(--ink)}
.bar{display:flex;align-items:center;gap:16px;min-height:72px;flex-wrap:wrap;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#FFF3D9}
.brand svg.stk{width:128px;height:82px;margin-block:2px}
.brand b{font:800 1.35rem/1 var(--f-display);letter-spacing:.01em}
.brand b span{color:var(--sun)}
nav.main{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav.main a{font:700 1rem/1 var(--f-display);color:#FFF3D9;text-decoration:none;padding:12px 14px;border-radius:999px}
nav.main a:hover{background:rgba(255,255,255,.12)}
.a11y{display:flex;gap:6px}
.a11y button{font:800 .85rem/1 var(--f-display);min-width:44px;min-height:44px;border:3px solid #FFF3D9;border-radius:12px;background:transparent;color:#FFF3D9;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 10px}
.a11y button[aria-pressed="true"]{background:var(--sun);color:#1F3B57;border-color:var(--sun)}
.a11y svg{width:20px;height:20px}
@media (max-width:860px){nav.main{order:3;width:100%;margin-left:0;justify-content:flex-start;gap:0}nav.main a{padding:10px 10px;font-size:.95rem}.a11y{margin-left:auto}}
@media (max-width:420px){.a11y .lbl{display:none}.brand svg.stk{width:112px;height:72px}}

/* hero */
.hero{padding-block:36px 20px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:stretch}
.hero-copy{padding:36px;display:flex;flex-direction:column;gap:20px;justify-content:center;position:relative;overflow:hidden}
.hero-copy h1{font-size:clamp(2.2rem,5.5vw,3.9rem);color:var(--text)}
.hero-copy h1 em{font-style:normal;color:var(--red);display:inline-block;transform:rotate(-2deg)}
.hero-copy .lead{font-size:1.2em;max-width:34ch}
.doors{display:flex;gap:12px;flex-wrap:wrap}
.stage{position:relative;background:var(--c-zoe);min-height:440px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:22px;cursor:pointer;padding:22px 22px 0;font:inherit;color:inherit;width:100%}
.stage::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 70%,rgba(255,255,255,.35) 0 8deg,transparent 8deg 18deg)}
.stage .kim{position:relative;width:min(250px,62%);height:auto;margin-bottom:18px;transition:transform .25s}
.stage:hover .kim{transform:translateY(-6px) rotate(-1deg)}
.stage .bubble{position:relative;align-self:stretch;z-index:2;text-align:left}
.stage .bubble::after{bottom:-17px;left:58%}
.stage .hint{position:absolute;right:14px;bottom:14px;z-index:2;font:800 .8rem/1 var(--f-display);background:var(--night);color:#FFF3D9;padding:8px 10px;border-radius:8px;transform:rotate(3deg)}
.stage-wrap{display:flex}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-copy{padding:24px}.stage{min-height:400px}}

/* sections */
section.blk{padding-block:44px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.head p{max-width:52ch;color:var(--muted)}
.kicker{font:800 .85rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:8px}

/* case files */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cases{grid-template-columns:1fr}}
.case{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;background:var(--panel);border:4px solid var(--ink);border-radius:6px 18px 18px 18px;box-shadow:var(--sh) var(--sh) 0 var(--ink);position:relative;transition:transform .15s,box-shadow .15s;color:var(--text)}
.case::before{content:"";position:absolute;top:-18px;left:-4px;width:46%;height:18px;background:var(--cc);border:4px solid var(--ink);border-bottom:0;border-radius:10px 10px 0 0}
.case:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:9px 9px 0 var(--ink)}
.case:focus-visible{outline:4px solid var(--focus);outline-offset:6px}
.case[aria-expanded="true"]{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);outline:4px dashed var(--ink);outline-offset:6px}
.case .art{background:var(--cc);border-bottom:4px solid var(--ink);height:150px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:2px 14px 0 0;overflow:hidden}
.case .art::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(74,46,20,.16) 2px,transparent 2.6px);background-size:12px 12px}
.case .art svg{width:120px;height:120px;position:relative;z-index:1}
.case .no{position:absolute;top:10px;left:12px;z-index:2;font:800 .8rem/1 var(--f-display);letter-spacing:.1em;background:#fff;color:#1F3B57;border:3px solid var(--ink);padding:6px 9px;border-radius:8px}
.case .stamp{position:absolute;top:12px;right:10px;z-index:2;font:800 .78rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:#B3261E;border:3px solid #B3261E;background:rgba(255,255,255,.88);padding:6px 8px;border-radius:6px;transform:rotate(8deg)}
.case .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.case .ttl{font:800 1.3rem/1.15 var(--f-display)}
.case .topic{font-weight:700;color:var(--muted)}
.case .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.chip{font:700 .8rem/1 var(--f-display);border:2px solid var(--ink);border-radius:999px;padding:6px 10px;background:var(--paper)}
.case.soon .art{filter:saturate(.55)}
.dossier{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
.dossier>div{padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.dossier .kid{background:var(--dc,var(--c-zoe));color:#1F3B57;border-right:4px solid var(--ink)}
.dossier .kid h3{font-size:1.6rem}
.dossier .kid .say{color:#1F3B57;border-color:#1F3B57}
.dossier ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.dossier .adult h3{font-size:1.25rem}
.dossier .adult .note{font-size:.92em;color:var(--muted);border-top:3px dotted var(--ink);padding-top:12px}
.dossier .acts{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:760px){.dossier{grid-template-columns:1fr}.dossier .kid{border-right:0;border-bottom:4px solid var(--ink)}}

/* lab: one game per row, generous spacing, numbered like comic chapters */
.lab{display:flex;flex-direction:column;gap:72px}
.gm{display:flex;flex-direction:column;gap:18px}
.gm-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gm-no{font:800 1.6rem/1 var(--f-display);width:58px;height:58px;display:grid;place-items:center;background:var(--red);color:var(--red-ink);border:4px solid var(--ink);border-radius:50%;box-shadow:4px 4px 0 var(--ink);transform:rotate(-6deg);flex:none}
.gm-head h3{font-size:clamp(1.4rem,3vw,1.9rem)}
.gm-head .chip{margin-left:auto}
.gm-intro{max-width:62ch;color:var(--muted)}
.game{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);overflow:hidden}
.game .scene{position:relative;background:#2A1C10;border-right:4px solid var(--ink);min-width:0}
.game .scene svg{display:block;width:100%;height:auto;touch-action:manipulation}
.side{padding:24px;display:flex;flex-direction:column;justify-content:center;gap:20px;min-width:0}
.side .bubble::after{content:"";left:-17px;top:30px;bottom:auto;transform:rotate(135deg)}
.side .bubble{margin-left:10px}
.side-kim{display:flex;align-items:flex-end;gap:10px}
.side-kim svg{width:96px;height:auto;flex:none}
.score{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:800 1rem/1 var(--f-display)}
.crumbs{display:flex;gap:6px}
.crumbs i{width:26px;height:26px;border-radius:50%;border:3px solid var(--ink);background:var(--paper)}
.crumbs i.on{background:var(--red)}
.item{cursor:pointer}
.item:focus{outline:none}
.item:focus-visible .ring{stroke:var(--focus);stroke-width:6;stroke-dasharray:10 6}
.item .ring{fill:transparent;stroke:transparent}
.found-g .mark{opacity:1}
.mark{opacity:0;transition:opacity .2s}
@media (max-width:860px){.game{grid-template-columns:1fr}.game .scene{border-right:0;border-bottom:4px solid var(--ink)}}
.quiz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);overflow:hidden}
.quiz .qkim{background:var(--c-dia);border-right:4px solid var(--ink);display:flex;align-items:flex-end;justify-content:center;padding:24px 16px 0;position:relative;overflow:hidden;min-height:300px}
.quiz .qkim::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 80%,rgba(255,255,255,.3) 0 8deg,transparent 8deg 18deg)}
.quiz .qkim svg{position:relative;width:min(210px,80%);height:auto}
.quiz .qmain{padding:28px;display:flex;flex-direction:column;gap:18px;min-width:0}
.qcard{font:800 clamp(1.3rem,2.6vw,1.7rem)/1.3 var(--f-display);min-height:3.9em}
.qbtns{display:flex;gap:14px;flex-wrap:wrap}
.qbtns .btn{flex:1 1 160px;justify-content:center;font-size:1.15rem;min-height:56px}
.qbtns .btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:4px 4px 0 var(--ink)}
.qfeed{min-height:3.2em;font-weight:700}
.qfeed.ok{color:var(--green)} .qfeed.no{color:var(--red)}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-weight:700}
.qdots{display:flex;gap:6px}
.qdots i{width:16px;height:16px;border-radius:50%;border:3px solid var(--ink);background:var(--paper)}
.qdots i.ok{background:var(--green)} .qdots i.no{background:var(--red)} .qdots i.now{background:var(--sun)}
@media (max-width:760px){.quiz{grid-template-columns:1fr}.quiz .qkim{border-right:0;border-bottom:4px solid var(--ink);min-height:220px}.quiz .qkim svg{width:150px}}
.idgame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);overflow:hidden}
.idgame .idform{padding:28px;min-width:0}
.idgame .idprev{background:var(--c-gas);border-left:4px solid var(--ink);padding:28px;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;min-width:0;background-image:radial-gradient(rgba(74,46,20,.14) 2px,transparent 2.6px);background-size:14px 14px}
@media (max-width:860px){.idgame{grid-template-columns:1fr}.idgame .idprev{border-left:0;border-top:4px solid var(--ink);order:-1}}
form.id{display:flex;flex-direction:column;gap:16px}
form.id label,form.id legend{font:700 1rem/1.2 var(--f-display);color:var(--text)}
form.id input[type=text],form.id select{font:700 1.1rem var(--f-body);min-height:52px;border:3px solid var(--ink);border-radius:12px;padding:8px 12px;background:var(--paper);color:var(--text);width:100%;box-sizing:border-box;margin-top:6px}
form.id fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.sw{display:flex;gap:12px;flex-wrap:wrap}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw label{width:46px;height:46px;border-radius:50%;border:4px solid var(--ink);cursor:pointer;display:block}
.sw input:checked+label{box-shadow:0 0 0 4px var(--panel),0 0 0 8px var(--ink)}
.sw input:focus-visible+label{outline:4px solid var(--focus);outline-offset:8px}
.av{display:flex;gap:10px;flex-wrap:wrap}
.av input{position:absolute;opacity:0;width:1px;height:1px}
.av label{width:64px;height:64px;border-radius:16px;border:4px solid var(--ink);background:var(--paper);cursor:pointer;display:grid;place-items:center;padding:4px;box-sizing:border-box}
.av label svg{width:100%;height:100%}
.av input:checked+label{background:var(--sun);box-shadow:4px 4px 0 var(--ink)}
.av input:focus-visible+label{outline:4px solid var(--focus);outline-offset:4px}
.idcard{width:100%;max-width:520px;height:auto;display:block;filter:drop-shadow(0 0 0 transparent)}
.dl-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.dl-msg{font-weight:700;color:#1F3B57;text-align:center;min-height:1.6em}
.dl-img{display:none;max-width:100%;border:3px solid var(--ink);border-radius:12px}
.fine{font-size:.9em;color:var(--muted)}
.album{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:18px 22px;margin-bottom:56px}
.album b{font-family:var(--f-display)}
.album .cnt{margin-left:auto;font:800 .95rem/1 var(--f-display);color:var(--muted)}
.badge{display:flex;align-items:center;gap:8px;font:700 .95rem/1.2 var(--f-display);opacity:.45;filter:grayscale(1)}
.badge.got{opacity:1;filter:none}
.badge svg{width:46px;height:46px}

/* adults */
.adults{background:var(--night);color:#FFF3D9;border-block:4px solid var(--ink)}
.adults .kicker{color:var(--sun)}
.adults .head p{color:#E9DCC4}
.ad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.ad-grid{grid-template-columns:1fr}}
.ad{background:#FFF3D9;color:#1F3B57;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh) var(--sh) 0 #05090E;padding:24px;display:flex;flex-direction:column;gap:12px}
.ad h3{font-size:1.3rem}
.ad ul{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:6px}
.ad .btn{align-self:flex-start;margin-top:auto}
.promise{margin-top:28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.promise{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.promise{grid-template-columns:1fr}}
.promise div{border:3px dashed #FFF3D9;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.promise strong{font-family:var(--f-display);color:var(--sun)}
.ph{background:rgba(255,211,78,.25);border-bottom:2px dotted currentColor;padding:0 3px}
/* newsletter & social */
.news{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);overflow:hidden}
.news .art{background:var(--c-dia);border-right:4px solid var(--ink);display:flex;align-items:flex-end;justify-content:center;padding:24px 16px 0;position:relative;overflow:hidden;min-height:320px}
.news .art::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 85%,rgba(255,255,255,.3) 0 8deg,transparent 8deg 18deg)}
.news .art svg{position:relative;width:min(220px,80%);height:auto}
.news .art .bubble{position:absolute;top:20px;left:20px;right:20px;z-index:1;font-size:1rem}
.news .art .bubble::after{bottom:-17px;left:55%}
.news .body{padding:30px;display:flex;flex-direction:column;gap:16px;min-width:0}
.news h2{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.news ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
form.nl{display:flex;flex-direction:column;gap:12px}
.nl-row{display:flex;gap:10px;flex-wrap:wrap}
.nl-row input{flex:1 1 220px;min-width:0;font:700 1.05rem var(--f-body);min-height:52px;border:3px solid var(--ink);border-radius:999px;padding:8px 18px;background:var(--paper);color:var(--text)}
.nl-row input[aria-invalid="true"]{border-color:var(--red)}
.nl-row .btn{min-height:52px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95em}
.check input{width:24px;height:24px;margin-top:2px;flex:none;accent-color:var(--red)}
.nl-msg{font-weight:700;min-height:1.6em}
.nl-msg.err{color:var(--red)} .nl-msg.ok{color:var(--green)}
.social{display:flex;gap:12px;flex-wrap:wrap}
.btn.yt{background:#D92D20;color:#fff;--btn-in:#D92D20}
.btn.ig{background:#fff;color:#1F3B57}
@media (max-width:820px){.news{grid-template-columns:1fr}.news .art{border-right:0;border-bottom:4px solid var(--ink);min-height:300px}}
.foot .social a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:3px solid var(--ink);border-radius:14px;background:var(--panel);color:var(--text)}
.foot .social a:hover{background:var(--sun);color:#1F3B57}
.foot .social svg{width:24px;height:24px}
.foot .social a.yt{--btn-in:var(--panel)}
.foot .social a.yt:hover{--btn-in:var(--sun)}
footer{padding-block:36px 48px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.foot p{max-width:60ch;color:var(--muted)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;font-weight:700}

@keyframes pop{0%{transform:scale(.6) rotate(-6deg);opacity:0}70%{transform:scale(1.06) rotate(1deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.pop{animation:pop .35s ease-out}
@keyframes wob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.hero-copy .tag{animation:wob 3s ease-in-out infinite;align-self:flex-start}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root.calm *{animation:none!important;transition:none!important}

/* ---------- multi-page additions ---------- */
nav.main a[aria-current="page"]{background:var(--sun);color:#1F3B57}
.crumbs-nav{font:700 .9rem/1 var(--f-display);display:flex;gap:8px;flex-wrap:wrap;color:var(--muted)}
.crumbs-nav a{color:inherit}
.band{border-bottom:4px solid var(--ink);background:var(--cc,var(--sun));color:#1F3B57;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 80% 100%,rgba(255,255,255,.28) 0 7deg,transparent 7deg 16deg);pointer-events:none}
.band .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px;align-items:end;padding-block:30px 0}
.band h1{font-size:clamp(2rem,5vw,3.4rem);color:#1F3B57}
.band .crumbs-nav{color:#1F3B57}
.band .intro{display:flex;flex-direction:column;gap:14px;padding-bottom:30px}
.band .intro p{font-size:1.15em;max-width:46ch}
.band .bkim{width:min(280px,100%);height:auto;justify-self:center;display:block}
.band .say{color:#1F3B57;border-color:#1F3B57;align-self:flex-start;background:rgba(255,255,255,.6)}
@media (max-width:760px){.band .wrap{grid-template-columns:1fr}.band .bkim{width:200px}}
.band.navy{--cc:#1F3B57;color:#FFF3D9}.band.navy h1,.band.navy .crumbs-nav{color:#FFF3D9}

.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;gap:12px;padding:0;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.tile .art{height:170px;background:var(--cc);border-bottom:4px solid var(--ink);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative}
.tile .art::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 100%,rgba(255,255,255,.3) 0 8deg,transparent 8deg 18deg)}
.tile .art svg{position:relative;height:155px;width:auto}
.tile .tb{padding:4px 22px 22px;display:flex;flex-direction:column;gap:6px}
.tile h3{font-size:1.45rem}
.tile .go{font:800 1rem var(--f-display);color:var(--red)}
.tile.adult{background:#1F3B57;color:#FFF3D9}.tile.adult .go{color:var(--sun)}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.facts{grid-template-columns:1fr}}
.fact{padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fact svg{width:84px;height:84px}
.fact b{font:800 1.15rem var(--f-display)}
.video-ph{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);overflow:hidden}
.video-ph .screen{aspect-ratio:16/9;background:var(--cc);border-right:4px solid var(--ink);display:flex;align-items:center;justify-content:center;position:relative;max-width:100%}
.video-ph .play{width:96px;height:96px;border-radius:50%;background:#fff;border:5px solid var(--ink);display:grid;place-items:center;box-shadow:5px 5px 0 var(--ink)}
.video-ph .soon{position:absolute;top:14px;right:14px;font:800 .8rem var(--f-display);background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:8px;padding:6px 10px;transform:rotate(4deg)}
.video-ph .vb{padding:26px;display:flex;flex-direction:column;gap:10px;min-width:0}
@media (max-width:760px){.video-ph{grid-template-columns:1fr}.video-ph .screen{border-right:0;border-bottom:4px solid var(--ink)}}
.gamecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:860px){.gamecards{grid-template-columns:1fr}}
.gamecard{padding:18px;display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--text)}
.gamecard svg{width:70px;height:70px;flex:none}
.gamecard b{font:800 1.1rem var(--f-display);display:block}
.adultbox{background:#1F3B57;color:#FFF3D9;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh) var(--sh) 0 var(--ink);padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.adultbox .kicker{color:var(--sun)}
@media (max-width:700px){.adultbox{grid-template-columns:1fr}}
.nextcase{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* game page */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.tab{font:800 1.05rem/1 var(--f-display);min-height:52px;padding:10px 18px;border:4px solid var(--ink);border-radius:14px;background:var(--panel);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:4px 4px 0 var(--ink)}
.tab svg{width:34px;height:34px}
.tab[aria-selected="true"]{background:var(--cc);color:#1F3B57;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.tab[disabled]{opacity:.5;cursor:default;box-shadow:none;border-style:dashed}
.tab small{font-size:.7rem;background:var(--red);color:#fff;border-radius:6px;padding:3px 6px}
.album2{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:14px 20px;margin-bottom:40px}
.album2 b{font-family:var(--f-display)}
.say-kim{display:flex;align-items:flex-end;gap:10px}
.say-kim svg{width:92px;height:auto;flex:none}
.say-kim .bubble{margin-left:10px;font-size:1rem}
.say-kim .bubble::after{left:-17px;top:24px;bottom:auto;transform:rotate(135deg)}
/* sort */
.sort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.sort-stage{border-right:4px solid var(--ink);padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:360px;text-align:center;color:#1F3B57;position:relative}
.sort-q{font:800 1.25rem/1.3 var(--f-display);margin:0}
.sort-item{background:#fff;border:4px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink);padding:14px 26px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:200px}
.sort-item b{font:800 1.3rem var(--f-display)}
.sort-done{display:flex;flex-direction:column;align-items:center}
.sort-n{font-weight:700;margin:0}
.sort-side{padding:24px;display:flex;flex-direction:column;gap:18px;min-width:0}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bin{font:800 1.05rem/1.2 var(--f-display);min-height:96px;border:4px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;color:#1F3B57}
.bin.in{background:#7FD1AE}.bin.out{background:#FFB4A6}
.bin:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.bin:disabled{opacity:.5;cursor:default}
.bin-ico{font-size:1.6rem;line-height:1}
.packed{display:flex;gap:6px;flex-wrap:wrap;min-height:50px;border:3px dashed var(--ink);border-radius:14px;padding:6px}
.chipico svg{display:block}
@media (max-width:760px){.sort{grid-template-columns:1fr}.sort-stage{border-right:0;border-bottom:4px solid var(--ink);min-height:300px}}
/* memory */
.memory{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);overflow:hidden}
.mem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:20px;border-right:4px solid var(--ink);background:var(--paper)}
.mcard{aspect-ratio:3/4;border:4px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);cursor:pointer;padding:0;position:relative;background:var(--cc);overflow:hidden;font:inherit;color:#1F3B57}
.mcard .back,.mcard .front{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.mcard .front{background:#fff;opacity:0;transition:opacity .2s}
.mcard .front svg{width:70%;height:auto}
.mcard .front small{font:700 .8rem/1.1 var(--f-display);text-align:center;padding:0 4px}
.mcard.up .front{opacity:1}.mcard.up .back{opacity:0}
.mcard.done{box-shadow:0 0 0 4px #2E9E5B;border-color:#2E9E5B}
.mcard:disabled{cursor:default}
.mem-side{padding:24px;display:flex;flex-direction:column;gap:16px;justify-content:center;min-width:0}
.mem-n{font-weight:700;margin:0}
@media (max-width:860px){.memory{grid-template-columns:1fr}.mem-grid{border-right:0;border-bottom:4px solid var(--ink)}}
@media (max-width:420px){.mem-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}}
/* ID page */
.idwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:26px;align-items:start}
@media (max-width:900px){.idwrap{grid-template-columns:1fr}.idwrap .idprev{order:-1}}
.idform{padding:26px}
.idprev{padding:26px;display:flex;flex-direction:column;gap:16px;align-items:center;background:var(--c-gas);background-image:radial-gradient(rgba(74,46,20,.14) 2px,transparent 2.6px);background-size:14px 14px;position:sticky;top:110px}
.photo-drop{border:4px dashed var(--ink);border-radius:18px;padding:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--paper)}
.photo-drop.drag{background:var(--sun)}
.photo-drop .ph-prev{width:84px;height:84px;border-radius:50%;border:4px solid var(--ink);background:#fff center/cover no-repeat;flex:none;display:grid;place-items:center;font:800 2rem var(--f-display);color:#1F3B57}
.photo-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.photo-tools{display:flex;flex-direction:column;gap:8px;width:100%}
.photo-tools label{font:700 .9rem var(--f-display)}
.photo-tools input[type=range]{width:100%;accent-color:var(--red)}
.privacy{display:flex;gap:14px;align-items:flex-start;background:#E8F6EE;color:#14532D;border:4px solid #2E7D4F;border-radius:18px;padding:16px 18px}
.privacy svg{width:40px;height:40px;flex:none}
.privacy b{font-family:var(--f-display)}
:root[data-theme="dark"] .privacy{background:#163A27;color:#D7F5E3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .privacy{background:#163A27;color:#D7F5E3}}
.idcard{cursor:grab;touch-action:none}
/* adults page */
.quick{display:flex;gap:10px;flex-wrap:wrap}
.quick a{font:700 .95rem var(--f-display);padding:10px 16px;border:3px solid var(--ink);border-radius:999px;background:var(--panel);color:var(--text);text-decoration:none}
.quick a:hover{background:var(--sun);color:#1F3B57}
details.case-info{border:4px solid var(--ink);border-radius:var(--r);background:var(--panel);box-shadow:var(--sh) var(--sh) 0 var(--ink);overflow:hidden}
details.case-info+details.case-info{margin-top:20px}
details.case-info summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:16px 22px;background:var(--cc);color:#1F3B57;font:800 1.3rem var(--f-display)}
details.case-info summary::-webkit-details-marker{display:none}
details.case-info summary svg{width:54px;height:54px;flex:none}
details.case-info summary::after{content:"+";margin-left:auto;font-size:2rem;line-height:1}
details.case-info[open] summary::after{content:"–"}
details.case-info .ci{padding:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
details.case-info .ci h3{font-size:1.1rem;margin-bottom:6px}
details.case-info .ci ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
details.case-info .warn{grid-column:1/-1;border:3px solid var(--red);border-radius:14px;padding:12px 16px;font-weight:700}
@media (max-width:760px){details.case-info .ci{grid-template-columns:1fr}}
.expert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:24px}
.expert svg{width:90px;height:90px}
.expert p{font:700 1.2rem/1.45 var(--f-display)}
@media (max-width:600px){.expert{grid-template-columns:1fr}}
.adult-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:800px){.adult-grid{grid-template-columns:1fr}}
.copy{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy code{font:700 1.05rem var(--f-body);background:var(--paper);border:3px solid var(--ink);border-radius:10px;padding:6px 10px}
/* ---------- round 3 polish ---------- */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confetti i{position:absolute;top:-14px;width:12px;height:18px;border-radius:3px;animation:fall 1.9s ease-in forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--r));opacity:.2}}
.qq{display:flex;gap:12px;align-items:flex-start}.qq .qcard{flex:1}
.qread{font-size:1.4rem;min-width:52px;min-height:52px;justify-content:center}
.qi{font-size:1.4rem;line-height:1}
.gm-head .listen{margin-left:auto;font-size:1rem}
.gm-intro{font-size:1.1rem}
.lab{gap:88px}
.say{min-height:44px}
/* mobile: menu in one scrollable row, tabs in a compact grid */
@media (max-width:860px){
 nav.main{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding-bottom:4px}
 nav.main::-webkit-scrollbar{display:none}
 nav.main a{white-space:nowrap;flex:none}
 .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .tab{flex-direction:column;gap:4px;padding:8px 4px;font-size:.82rem;min-height:84px;justify-content:center;text-align:center;box-shadow:3px 3px 0 var(--ink)}
 .tab svg{width:38px;height:38px}
 .tab small{font-size:.62rem}
}
.body-teaser{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.body-teaser .bt{padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.body-teaser svg{width:86px;height:86px}
.body-teaser b{font:700 1rem var(--f-display)}
@media (max-width:900px){.body-teaser{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tipps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:800px){.tipps{grid-template-columns:1fr}}
.tipp{padding:20px 22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.tipp .n{font:800 1.4rem/1 var(--f-display);width:46px;height:46px;border-radius:50%;background:var(--sun);color:#1F3B57;border:3px solid var(--ink);display:grid;place-items:center}
.tipp b{font:700 1.1rem var(--f-display);display:block;margin-bottom:4px}
details.faq{border:3px solid var(--ink);border-radius:16px;background:var(--panel);padding:0;overflow:hidden}
details.faq+details.faq{margin-top:12px}
details.faq summary{cursor:pointer;padding:16px 20px;font:700 1.08rem var(--f-display);list-style:none;display:flex;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";margin-left:auto;font-size:1.5rem;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{padding:0 20px 18px;margin:0}
.fact .say{margin-top:auto}
.tab .ts{display:none}
@media (max-width:860px){.tab .tl{display:none}.tab .ts{display:block;hyphens:manual;line-height:1.15}}
@media (max-width:760px){.band .bkim{width:150px}.band .wrap{gap:4px}.band .intro{padding-bottom:10px}}
/* ---- body page ---- */
.fact .say svg,.machmit .say svg,.body-hero .say svg{width:18px;height:18px}
a.panel.bt{text-decoration:none;color:#1F3B57;transition:transform .15s}
a.panel.bt *{text-decoration:none}
a.panel.bt:hover,a.panel.bt:focus-visible{transform:translateY(-3px)}
.body-sec{scroll-margin-top:90px}
.body-hero{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:center;padding:26px 30px;background:linear-gradient(90deg,var(--cc) 0 230px,#fff 230px);margin-bottom:22px}
.body-hero .bh-art{display:flex;justify-content:center}
.body-hero h2{margin:.2em 0 .45em}
.body-hero p{max-width:62ch;margin:0 0 16px}
.machmit{margin-top:22px;padding:20px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-left:14px solid var(--cc)}
.machmit p{flex:1 1 300px;margin:0;font-size:1.15rem;font-weight:600}
.mm-tag{font:800 1.3rem var(--f-display);color:#D92D20;transform:rotate(-3deg)}
.body-sec .facts{margin-top:4px}
@media (max-width:700px){.body-hero{grid-template-columns:1fr;gap:12px;background:linear-gradient(180deg,var(--cc) 0 132px,#fff 132px);padding:18px}.body-hero .bh-art svg{width:100px;height:100px}.body-hero .bh-txt{padding-top:6px}.machmit{padding:16px}}
/* nav pictograms for children who cannot read yet */
nav.main a{display:inline-flex;align-items:center;gap:7px}
nav.main .ni{width:20px;height:20px;flex:none}
nav.main a[aria-current="page"]{--nav-bg:#FFD34E}
@media (min-width:861px){nav.main a{padding:11px 12px}nav.main{gap:2px}}
@media (min-width:861px) and (max-width:1240px){.a11y{margin-left:auto}}
/* body finder game */
.bodygame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.bg-map{background:#EAF6FF;display:flex;justify-content:center;padding:16px;border-right:5px solid var(--ink,#4A2E14)}
.bodymap{width:100%;max-width:340px;height:auto}
.bodymap .org{cursor:pointer;transition:transform .2s}
.bodymap .org:hover>*:not(.hit),.bodymap .org:focus-visible>*:not(.hit){filter:drop-shadow(0 0 6px #FFD34E)}
.bodymap .org:focus{outline:none}
.bodymap .org:focus-visible .hit{stroke:#1F3B57;stroke-width:5;stroke-dasharray:8 6}
.bodymap .hit{fill:transparent}
.bodymap .org.done .hit{fill:rgba(46,158,91,.18);stroke:#2E9E5B;stroke-width:5}
.bodymap .org.wrong{animation:shake .4s}
@keyframes shake{25%{translate:-6px 0}75%{translate:6px 0}}
.calm .bodymap .org.wrong{animation:none}
.bg-q{font:800 1.5rem var(--f-display);color:#1F3B57;margin:8px 0 0}
@media (max-width:760px){.bodygame{grid-template-columns:1fr}.bg-map{border-right:0;border-bottom:5px solid var(--ink,#4A2E14)}.bodymap{max-width:260px}}
main p,main li,main a,main td{overflow-wrap:anywhere}
h1,h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ---- order game ---- */
.ordergame{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);overflow:hidden}
.ord-stage{border-right:4px solid var(--ink);padding:22px;display:flex;flex-direction:column;gap:18px;color:#1F3B57}
.ord-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:none}
.ord-slot{position:relative;aspect-ratio:1/1.05;border:4px dashed rgba(74,46,20,.55);border-radius:16px;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center}
.ord-slot+.ord-slot::before{content:"";position:absolute;left:-12px;top:50%;width:14px;height:4px;background:var(--ink)}
.ord-slot.next{border-color:#1F3B57;background:#fff;animation:pulseB 1.4s ease-in-out infinite}
.ord-slot.filled{border-style:solid;border-color:var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink)}
.ord-no{position:absolute;top:-14px;left:-10px;width:30px;height:30px;border-radius:50%;background:#1F3B57;color:#fff;font:800 1rem/30px var(--f-display);text-align:center;border:3px solid var(--ink)}
.ord-in{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.ord-in b{font-size:.78rem;line-height:1.1;hyphens:auto}
.ord-pool{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:120px}
.ord-card{font:inherit;color:#1F3B57;background:#fff;border:4px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);padding:10px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:108px;min-height:120px;transition:transform .15s}
.ord-card:hover,.ord-card:focus-visible{transform:translateY(-3px)}
.ord-card.wrong{animation:shake .4s;background:#FFE1E1}
@keyframes pulseB{50%{box-shadow:0 0 0 6px rgba(255,211,78,.7)}}
.calm .ord-slot.next{animation:none}.calm .ord-card.wrong{animation:none}
@media (max-width:860px){.ordergame{grid-template-columns:1fr}.ord-stage{border-right:0;border-bottom:4px solid var(--ink)}}
@media (max-width:520px){.ord-track{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.ord-slot svg{width:40px;height:40px}.ord-in b{font-size:.62rem}.ord-card{min-width:92px;min-height:104px;padding:8px}.ord-card svg{width:58px;height:58px}.ord-slot+.ord-slot::before{left:-8px;width:8px}}
/* ---- heart pump ---- */
.heartgame,.brushgame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.hg-map{position:relative;background:#FFF1F1;display:flex;justify-content:center;align-items:center;padding:16px;border-right:4px solid var(--ink)}
.hg-svg{width:100%;max-width:300px;height:auto}
.hg-r{transition:fill .5s,stroke .5s}
circle.hg-r.on,ellipse.hg-r.on,path.hg-r[data-r="bauch"].on{fill:#FFC9C9}
path.hg-r.on:not([data-r="bauch"]){stroke:#FFC9C9}
.hg-v{opacity:0;transition:opacity .6s}.hg-v.on{opacity:1}
.hg-heart{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%);width:118px;height:110px;border:0;background:none;padding:0;cursor:pointer;filter:drop-shadow(4px 4px 0 rgba(74,46,20,.9))}
.hg-heart svg{width:100%;height:100%}
.hg-heart:focus-visible{outline:4px dashed #1F3B57;outline-offset:6px;border-radius:20px}
.hg-heart.beat{animation:beat .35s ease-out}
@keyframes beat{40%{transform:translate(-50%,-50%) scale(1.22)}}
.calm .hg-heart.beat{animation:none}
.hg-meter{height:22px;border:4px solid var(--ink);border-radius:12px;background:#fff;overflow:hidden}
.hg-meter i{display:block;height:100%;width:0;background:#E5484D;transition:width .3s}
.brushgame .hg-meter i{background:#56CCF2}
@media (max-width:760px){.heartgame,.brushgame{grid-template-columns:1fr}.hg-map,.br-map{border-right:0!important;border-bottom:4px solid var(--ink)}.hg-svg{max-width:220px}.hg-heart{width:92px;height:86px}}
/* ---- brushing ---- */
.br-map{background:#EAF8FD;display:flex;justify-content:center;align-items:center;padding:14px;border-right:4px solid var(--ink)}
.br-svg{width:100%;max-width:420px;height:auto;touch-action:none;cursor:none}
.br-svg .tooth{cursor:none}
.br-svg .tooth:focus{outline:none}.br-svg .tooth:focus-visible path:first-child{stroke:#1F3B57;stroke-width:7;stroke-dasharray:8 5}
.br-svg .dirt{transition:opacity .2s}
.br-svg .bug{transition:transform .3s}
.br-svg .foam{fill:#fff;stroke:#BDE7FF;stroke-width:2;animation:foam .9s ease-out forwards}
@keyframes foam{to{opacity:0;transform:translateY(-10px)}}
.br-svg .clean path:first-child{fill:#fff}
@media (hover:none){.br-svg{cursor:auto}.br-brush{display:none}}
.tabgroup{font:800 .95rem var(--f-display);text-transform:uppercase;letter-spacing:.06em;color:#1F3B57;margin:0 0 10px}
.tabs+.tabgroup{margin-top:-8px}
.bg-h{margin:26px 0 12px;font-size:1.25rem}
.hg-heart.idle{animation:idleBeat 1.2s ease-in-out infinite}@keyframes idleBeat{0%,100%{transform:translate(-50%,-50%)}15%{transform:translate(-50%,-50%) scale(1.08)}30%{transform:translate(-50%,-50%)}45%{transform:translate(-50%,-50%) scale(1.05)}}.calm .hg-heart.idle{animation:none}
.ord-done{display:flex;align-items:center;gap:14px;margin:0;background:#fff;border:4px solid var(--ink);border-radius:16px;padding:12px 18px;font-weight:700;box-shadow:4px 4px 0 var(--ink)}
/* mobile: header scrolls away so games get the full screen; Kim's prompt sits above the play area */
@media (max-width:860px){
 header.top{position:relative}
 .bodygame .mem-side,.ordergame .mem-side{order:-1;padding:14px 16px;gap:10px;border-bottom:4px solid var(--ink)}
 .bodygame .mem-side .bubble,.ordergame .mem-side .bubble{min-height:5.6em;display:flex;align-items:center}
 .bodygame .bg-map{border-bottom:0!important}
 .ordergame .ord-stage{border-bottom:0}
 .bodygame .mem-side .again,.ordergame .mem-side .again{order:5}
}
@media (max-width:860px){.bodygame .bg-q{display:none}}