/* Chippy Draughts — one bright look taken from the art: rainforest green, Chippy's blue, wing red, sunshine gold */
:root{
  color-scheme: light;
  --forest:#1f6b3f; --leaf:#2f9e5a; --chippy-blue:#1d4fd8; --wing:#e0332b; --gold:#f3b51f; --sea:#0f8fa0;
  --paper:#fff8e8; --card:#ffffff; --ink:#1d2b1d; --muted:#5d6b55; --line:#eadfc4;
  --sq-light:#f3e4c2; --sq-dark:#8a5a34; --num:#f8e9cc; --frame:#5b3a1e; --frame-shadow:#3d2612;
  --ok:#1f8a4c; --ok-bg:#e3f5e8; --bad:#b8321f; --bad-bg:#fde8e4;
  --f-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#14361f radial-gradient(circle at 50% 0,#2d6a3e,#0f2a18 70%) fixed;color:var(--ink);font:17px/1.45 var(--f-body);-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--f-display);line-height:1.1;margin:0;text-wrap:balance}
button{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:4px solid var(--gold);outline-offset:2px}
img{max-width:100%}

#app{max-width:520px;margin:0 auto;height:100%;display:flex;flex-direction:column;background:var(--paper);overflow-y:auto;position:relative;box-shadow:0 0 40px rgba(0,0,0,.35)}
#app.full,#app.map{background:#0f2a18}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;background:var(--forest);color:#fff}
.top h1{font-size:1.15rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.top-actions{display:flex;align-items:center;gap:6px;min-width:0}
.sound-btn{display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:44px;padding:0 10px;border-radius:999px;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);color:#fff;font:700 .85rem var(--f-body);cursor:pointer;line-height:1}
.sound-btn .sb-ic{font-size:1.1rem}
.sound-btn[aria-pressed="true"]{background:#fff;color:var(--forest);border-color:#fff}
.sound-btn:focus-visible{outline:4px solid var(--gold);outline-offset:2px}
.corner-sound{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;z-index:25}
.corner-sound .sound-btn{background:rgba(20,54,31,.78);border-color:rgba(255,255,255,.7)}
.corner-sound .sound-btn[aria-pressed="true"]{background:#fff;color:var(--forest)}
@media (max-width:374px){.sound-btn{padding:0 8px}.sound-btn .sb-text{font-size:.75rem}.xp-pill{padding:8px 10px}}
.xp-pill{border:0;background:var(--gold);color:#3a2a00;font-weight:800;border-radius:999px;padding:8px 14px;cursor:pointer;font-family:var(--f-display);font-size:1rem}

/* buttons */
.btn{border:0;border-radius:999px;background:var(--wing);color:#fff;font-family:var(--f-display);font-weight:800;font-size:1.1rem;padding:12px 22px;cursor:pointer;box-shadow:0 4px 0 #8f1f17;min-height:48px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8f1f17}
.btn.big{font-size:1.35rem;padding:14px 30px;min-height:56px}
.btn.ghost{background:var(--card);color:var(--forest);box-shadow:0 3px 0 var(--line);border:2px solid var(--line)}
.btn.danger{background:var(--bad);box-shadow:0 4px 0 #6d1d12}
.btn.ghost.danger{background:var(--card);color:var(--bad)}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.center{justify-content:center}

/* welcome */
.welcome{flex:1;min-height:100%;background:center/cover no-repeat;display:flex;align-items:flex-end;padding:24px 16px calc(28px + env(safe-area-inset-bottom,0px))}
.welcome-card{width:100%;background:rgba(255,248,232,.94);border-radius:24px;padding:20px 22px 24px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.logo{font-size:3rem;font-weight:800;color:var(--forest);display:flex;flex-direction:column;line-height:.95}
.logo span{color:var(--wing);font-size:2.2rem}
.welcome-card p{margin:10px 0 18px;color:var(--muted)}

/* name */
.name-screen{padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.name-screen h2{font-size:1.8rem;color:var(--forest)}
.name-screen input{width:100%;font-size:1.4rem;padding:14px 16px;border-radius:14px;border:3px solid var(--line);text-align:center;font-family:var(--f-display);background:#fff}
.note{color:var(--muted);font-size:.9rem;margin:0}
.pose{width:110px;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}
.pose.big{width:170px}

/* maps */
.scroll-art{flex:1;overflow-y:auto;position:relative}
.art-wrap{position:relative}
.art{display:block;width:100%;height:auto}
.world-pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:6px 14px 6px 6px;background:rgba(255,255,255,.92);font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.35);text-align:left;max-width:78%}
.world-pin b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--wing);color:#fff;font-family:var(--f-display);font-size:1.3rem;flex:none}
.world-pin span{font-size:.9rem;line-height:1.2}
.world-pin small{display:block;color:var(--muted);font-weight:400}
.world-pin.locked{background:rgba(255,255,255,.75);color:#555}
.world-pin.locked b{background:#777;font-size:1rem}
.world-pin.open{animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,-58%)}}
.node{position:absolute;transform:translate(-50%,-50%);border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0}
.node b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--card);color:var(--forest);font:800 1.6rem var(--f-display);border:5px solid var(--gold);box-shadow:0 5px 0 #a47a10,0 8px 16px rgba(0,0,0,.35)}
.node.done b{background:var(--leaf);color:#fff;border-color:#fff}
.node.locked b{background:#d9d2c0;color:#666;border-color:#aaa;box-shadow:0 4px 0 #888;font-size:1.1rem}
.node.current b{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 5px 0 #a47a10,0 0 0 8px rgba(243,181,31,.32),0 0 24px 8px rgba(255,214,90,.55)}}
.node-label{background:rgba(29,43,29,.82);color:#fff;font-size:.78rem;font-weight:700;border-radius:8px;padding:2px 8px;white-space:nowrap}
.node-stars{color:var(--gold);font-size:1.05rem;text-shadow:0 1px 2px #000;letter-spacing:1px}
.node-chippy{position:absolute;width:74px;transform:translate(-115%,-95%);pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));animation:hover 2.4s ease-in-out infinite}
@keyframes hover{50%{transform:translate(-115%,-108%)}}
.world-badge{position:absolute;width:96px;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.toast-line{position:sticky;bottom:0;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--forest);color:#fff;text-align:center;font-weight:700;transform:translateY(100%);transition:transform .25s;z-index:5}
.toast-line.show{transform:none}

/* chapter */
.chapter{flex:1;background:center/cover;padding:20px 14px}
.sheet{background:rgba(255,248,232,.97);border-radius:24px;padding:20px 18px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:700;color:var(--sea)}
.sheet h2{font-size:2rem;color:var(--forest);margin-top:2px}
.goal{margin:6px 0 14px;color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.step{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:16px;padding:10px 12px;cursor:pointer}
.step .tick{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper);color:var(--muted);font-weight:800}
.step.done .tick{background:var(--leaf);color:#fff}
.step .st b{display:block;font-family:var(--f-display);font-size:1.15rem}
.step .st small{color:var(--muted)}
.step .go{font-weight:800;color:var(--wing);font-family:var(--f-display)}
.step.next{border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,181,31,.35)}
.step.locked{opacity:.55;cursor:default}
.stars-line{color:var(--gold);font-size:2rem;text-align:center;margin:12px 0 0;letter-spacing:4px;text-shadow:0 1px 0 #a47a10}
.stars-line.big{font-size:3rem}

/* story */
.story{flex:1;background:center/cover;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.bubbles{flex:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:16px 12px}
.bubble{display:flex;gap:10px;align-items:flex-end;animation:rise .35s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.bubble>div{background:rgba(255,255,255,.96);border-radius:18px 18px 18px 4px;padding:10px 14px;box-shadow:0 4px 12px rgba(0,0,0,.25);min-width:0}
.bubble b{font-family:var(--f-display);color:var(--sea);font-size:.95rem}
.bubble p{margin:2px 0 0;font-size:1.1rem}
.bubble.narrator>div{background:rgba(29,43,29,.85);color:#fff;border-radius:14px;font-style:italic;margin:0 auto}
.bubble.chippy b{color:var(--chippy-blue)}
.bubble.kiki b{color:#b07d00}
.bubble.ibis b{color:var(--wing)}
.bubble.pico b{color:#c2410c}
.bubble.raptors b{color:#2b3a67}
.bubble.elders b{color:#8a4b14}
.actor.raptors,.actor.elders{max-width:92%}
.face{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;background:var(--paper);border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.stage{flex:none;height:30%;min-height:150px;display:flex;align-items:flex-end;justify-content:center;padding-top:12px;pointer-events:none}
.actor{max-height:100%;max-width:70%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
.actor.in{animation:actorIn .35s ease-out}
@keyframes actorIn{from{opacity:0;transform:translateY(16px) scale(.95)}}
.story-bar{padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(0,0,0,.4));display:flex;justify-content:center}

/* runner */
.runner{display:flex;flex-direction:column;gap:10px;padding:10px 12px calc(16px + env(safe-area-inset-bottom,0px))}
.progress{display:flex;gap:6px}
.progress span{flex:1;height:8px;border-radius:4px;background:var(--line)}
.progress span.on{background:var(--leaf)}
.progress span.now{background:var(--gold)}
.board-host{width:100%;max-width:min(100%,62vh);margin:0 auto}
.card{position:relative;background:var(--card);border-radius:var(--radius);padding:14px 14px 14px 98px;min-height:112px;box-shadow:0 3px 0 var(--line);display:flex;flex-direction:column;gap:8px}
.card>.pose{position:absolute;left:4px;bottom:6px;width:90px}
.prompt,.caption{margin:0;font-size:1.12rem;font-weight:700}
.caption{font-weight:400}
.msg{margin:0;font-weight:700;border-radius:12px;min-height:0}
.msg:empty{display:none}
.msg.ok{background:var(--ok-bg);color:var(--ok);padding:8px 12px}
.msg.bad{background:var(--bad-bg);color:var(--bad);padding:8px 12px}
.msg.info{color:var(--muted);font-weight:400}
.choices{display:grid;gap:8px}
.choice{text-align:left;border:3px solid var(--line);background:var(--paper);border-radius:14px;padding:12px 14px;font-weight:700;cursor:pointer;min-height:48px}
.choice.right{border-color:var(--ok);background:var(--ok-bg)}
.choice.wrong{border-color:var(--bad);background:var(--bad-bg);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.chip{display:inline-block;margin:0;background:var(--paper);border:2px dashed var(--sea);border-radius:999px;padding:4px 14px;font-weight:800;font-family:var(--f-display);font-size:1.15rem}
.movelist{font-family:ui-monospace,Menlo,monospace;font-size:.95rem;display:flex;flex-wrap:wrap;gap:2px 12px;max-height:5.5em;overflow-y:auto}
.movelist b{color:var(--muted);font-weight:400}

/* board */
.board{position:relative;width:100%;aspect-ratio:1;background:var(--sq-light);border:7px solid var(--frame);border-radius:10px;overflow:hidden;box-shadow:0 6px 0 var(--frame-shadow);touch-action:manipulation}
.sq{position:absolute;width:10%;height:10%;background:var(--sq-dark);border:0;padding:0;cursor:default}
.board.interactive .sq{cursor:pointer}
.sq .n{position:absolute;left:5%;top:3%;font:700 clamp(8px,2.3vw,11px)/1 var(--f-body);color:var(--num);opacity:.85;pointer-events:none}
.board.no-numbers .sq .n{display:none}
.sq.hl{box-shadow:inset 0 0 0 4px var(--gold)}
.sq.last{box-shadow:inset 0 0 0 3px #7fd3df}
.sq.sel{box-shadow:inset 0 0 0 5px var(--gold);background:#9c6a3f}
.sq.mark{background:var(--sea)}
.sq.good{background:var(--ok)}
.sq.bad{background:var(--bad)}
.sq.hint{animation:hint 1s ease-in-out 3}
@keyframes hint{50%{box-shadow:inset 0 0 0 6px var(--gold);background:#b07a46}}
.sq.dot::after{content:"";position:absolute;inset:33%;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(0,0,0,.2)}
.board.pulse .sq{animation:dark 1.2s ease-in-out 2}
@keyframes dark{50%{background:#c0843f}}
.pc{position:absolute;width:10%;height:10%;padding:1.1%;pointer-events:none;z-index:2}
.pc i{display:block;width:100%;height:100%;border-radius:50%;position:relative}
.pc.w i{background:radial-gradient(circle at 35% 30%,#fff,#fbf3df 60%);box-shadow:0 3px 0 #b9a77d,inset 0 0 0 2px #c9b98f}
.pc.b i{background:radial-gradient(circle at 35% 30%,#4a453e,#211e1a 60%);box-shadow:0 3px 0 #000,inset 0 0 0 2px #000}
.pc.k i::after{content:"";position:absolute;inset:24%;background:var(--gold);clip-path:polygon(0 85%,0 25%,25% 55%,50% 12%,75% 55%,100% 25%,100% 85%)}
@keyframes crown{40%{transform:scale(1.35)}}
.pc.gone{opacity:0}

/* results, award, certificate, me */
.result,.award{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 20px;text-align:center}
.result h2,.award h2{font-size:2rem;color:var(--forest)}
#app.celebrate{background:radial-gradient(circle at 50% 30%,#fff3c4,#f3b51f 70%)}
.badge-big{width:min(240px,60vw);filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.2) rotate(-20deg);opacity:0}}
.confetti{position:fixed;top:-12px;width:10px;height:14px;z-index:99;animation:fall 2.6s linear forwards;pointer-events:none}
@keyframes fall{to{top:105vh;transform:rotate(720deg)}}
.cert-screen{padding:16px;display:flex;flex-direction:column;gap:10px;align-items:center}
.cert-screen img{width:100%;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.25);min-height:200px;background:var(--line)}
.me{padding:16px;display:flex;flex-direction:column;gap:14px}
.me-head{display:flex;align-items:center;gap:12px}
.me-head .pose{width:84px}
.me-head h2{font-size:1.8rem;color:var(--forest)}
.me-head p{margin:0;color:var(--muted)}
.me h3{font-size:1.25rem}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.badges figure{margin:0;text-align:center;font-size:.8rem;font-weight:700}
.badges img{width:100%;filter:grayscale(1) opacity(.35)}
.badges .got img{filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.badges small{display:block;color:var(--muted);font-weight:400}
.chap-list{list-style:none;margin:0;padding:0;background:var(--card);border-radius:14px}
.chap-list li{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.chap-list li:first-child{border-top:0}
.chap-list .stars{color:#c99206;letter-spacing:2px}
.confirm{background:var(--bad-bg);border-radius:14px;padding:12px 14px}
.confirm p{margin:0 0 10px;font-weight:700;color:var(--bad)}
.parents{background:var(--card);border-radius:14px;padding:12px 14px}
.parents summary{font-weight:800;cursor:pointer}
.parents p{margin:8px 0 0;color:var(--muted)}
.xp-toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);background:var(--gold);color:#3a2a00;font:800 1.4rem var(--f-display);padding:8px 20px;border-radius:999px;z-index:100;animation:xp 1.4s ease-out forwards;box-shadow:0 6px 16px rgba(0,0,0,.3);pointer-events:none}
@keyframes xp{from{opacity:0;transform:translate(-50%,20px)}20%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-30px)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* the in-app "Less movement" setting does the same */
html[data-motion="less"] *,html[data-motion="less"] *::before,html[data-motion="less"] *::after{animation:none!important;transition:none!important}

/* ---------- board themes (unlocked by level) ---------- */
body[data-theme="grove"]{--sq-light:#e8f2d0;--sq-dark:#3f7f45;--num:#dff0cf;--frame:#2a5530;--frame-shadow:#173a1c}
body[data-theme="sea"]{--sq-light:#e4f6f7;--sq-dark:#1b7f95;--num:#d6f1f4;--frame:#0d4f63;--frame-shadow:#07323f}
body[data-theme="carnival"]{--sq-light:#fff0c9;--sq-dark:#c4362b;--num:#ffe6b0;--frame:#e0a21a;--frame-shadow:#8a5f06}
body[data-theme="crystal"]{--sq-light:#efe9fb;--sq-dark:#6a4fb3;--num:#e4dbfa;--frame:#3a2a72;--frame-shadow:#21174a}
body[data-theme="castle"]{--sq-light:#f2efe8;--sq-dark:#6f7b8e;--num:#ebe7de;--frame:#c99a2e;--frame-shadow:#7d5e14}
body[data-theme="cosmic"]{--sq-light:#c9d3f0;--sq-dark:#1c2457;--num:#b8c4ef;--frame:#0b0f2b;--frame-shadow:#000}
.swatch{display:block;width:44px;height:44px;margin:0 auto 6px;border-radius:8px;border:4px solid var(--fr);background:conic-gradient(var(--d) 0 25%,var(--l) 0 50%,var(--d) 0 75%,var(--l) 0) 0 0/50% 50%}
.t-classic{--l:#f3e4c2;--d:#8a5a34;--fr:#5b3a1e}.t-grove{--l:#e8f2d0;--d:#3f7f45;--fr:#2a5530}.t-sea{--l:#e4f6f7;--d:#1b7f95;--fr:#0d4f63}
.t-carnival{--l:#fff0c9;--d:#c4362b;--fr:#e0a21a}.t-crystal{--l:#efe9fb;--d:#6a4fb3;--fr:#3a2a72}.t-castle{--l:#f2efe8;--d:#6f7b8e;--fr:#c99a2e}.t-cosmic{--l:#c9d3f0;--d:#1c2457;--fr:#0b0f2b}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin:8px 0 16px}
.theme-pick{border:2px solid var(--line);background:var(--card);border-radius:14px;padding:8px 4px;font:700 .85rem var(--f-body);cursor:pointer;color:var(--ink)}
.theme-pick small{display:block;color:var(--muted);font-weight:400}
.theme-pick.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,181,31,.35)}
.theme-pick:disabled{opacity:.5;cursor:default}

/* ---------- levels ---------- */
.level-card{display:flex;gap:12px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px;margin:12px 0}
.lv-num{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--chippy-blue);color:#fff;font:800 1.7rem var(--f-display);border:4px solid var(--gold);flex:none}
.lv-body{flex:1;min-width:0}.lv-body b{font-family:var(--f-display);font-size:1.2rem;color:var(--forest)}
.lv-bar{height:12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);overflow:hidden;margin:6px 0 4px}
.lv-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--leaf),var(--gold))}
.lv-body small{color:var(--muted)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px}
.stat-row>div{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center}
.stat-row b{display:block;font:800 1.3rem var(--f-display);color:var(--forest)}.stat-row small{color:var(--muted);font-size:.8rem}
@keyframes pop{from{transform:translateX(-50%) scale(.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}

/* ---------- bottom tabs ---------- */
.tabbar{position:sticky;bottom:0;margin-top:auto;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);background:var(--forest);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -3px 10px rgba(0,0,0,.25)}
.tab{border:0;background:none;color:#cfe6d4;font:700 .8rem var(--f-body);padding:6px 2px;border-radius:12px;cursor:pointer;min-height:52px;display:flex;flex-direction:column;align-items:center;gap:2px}
.tab span{font-size:1.35rem;line-height:1}
.tab.on{background:rgba(255,255,255,.14);color:#fff}
#app.map .toast-line{bottom:64px}

/* ---------- daily and play ---------- */
.daily,.play{padding:16px}
.daily-hero{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.daily-hero .pose{width:110px;flex:none}
.daily-hero h2{color:var(--forest);font-size:1.6rem;margin:2px 0 6px}
.daily-hero p{margin:0;color:var(--muted)}
.btn.big{display:block;width:100%;margin:14px 0;font-size:1.25rem}
.play h2{color:var(--forest);font-size:1.3rem;margin:4px 0 10px}
.opps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.opp{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:10px;cursor:pointer;text-align:center;color:var(--ink)}
.opp img{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 4px}
.opp b{display:block;font-family:var(--f-display);font-size:1.1rem}.opp small{color:var(--muted);font-size:.8rem}
.opp.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,181,31,.4)}
.play .row{display:flex;gap:8px;margin-bottom:12px}.play .row .btn{flex:1}
.online-soon{margin-top:8px;padding:12px;border:2px dashed var(--line);border-radius:14px;color:var(--muted)}
.online-soon b{color:var(--forest)}.online-soon p{margin:4px 0 0;font-size:.9rem}
.movelist{max-height:84px;overflow-y:auto;font-size:.9rem;display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0;color:var(--muted)}
.checker-ic{width:1.35rem;height:1.35rem;vertical-align:-.25rem}
.tab .checker-ic{width:1.5rem;height:1.35rem;display:block;vertical-align:0}
.logo small{display:block;font-size:1.1rem;color:var(--sea);letter-spacing:.04em;margin-top:6px}
.dev-tag{font:800 .65rem var(--f-body);background:var(--gold);color:#3a2a00;border-radius:6px;padding:2px 6px;vertical-align:middle;letter-spacing:.06em}
.dev-entry{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.dev-entry label{font-size:.85rem;color:var(--muted)}
.dev-entry .row,.dev-panel .row{display:flex;gap:8px;margin:6px 0}
.dev-entry input,.dev-panel select{flex:1;min-width:0;font-size:1rem;padding:10px;border-radius:12px;border:2px solid var(--line);background:#fff}
.dev-panel{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.dev-panel h3{color:var(--wing)}
.dev-label{margin:6px 0 0;font-weight:700;font-size:.9rem}
.dev-worlds{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.dev-worlds .btn{padding:8px 0}
.dev-more .btn{flex:1}

/* ---------- progress code and class leaderboard ---------- */
.send-card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px;margin:0 0 14px}
.send-card b{font-family:var(--f-display);color:var(--forest);font-size:1.1rem}.send-card p{margin:4px 0 8px;color:var(--muted);font-size:.9rem}
.send-card .row{display:flex;gap:8px}.send-card .row .btn{flex:1}
.code{font:700 1rem/1.3 ui-monospace,Menlo,Consolas,monospace;background:var(--paper);border:2px dashed var(--gold);border-radius:12px;padding:10px;word-break:break-all;user-select:all;color:var(--ink)}
.coach{padding:16px;display:flex;flex-direction:column;gap:10px}
.coach textarea{width:100%;font:1rem var(--f-body);padding:10px;border-radius:12px;border:2px solid var(--line);background:#fff;resize:vertical}
.coach .row{display:flex;gap:8px}.coach .row .btn{flex:1}
.lb-sort{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font:700 .85rem var(--f-body);cursor:pointer;color:var(--forest)}
.chip.on{background:var(--forest);color:#fff;border-color:var(--forest)}
.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lb-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto 28px;gap:8px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 10px}
.lb-row:nth-child(1){border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,181,31,.3)}
.lb-row.stale{opacity:.55}
.lb-pos{font:800 1.3rem var(--f-display);text-align:center;color:var(--muted)}
.lb-who b{font-family:var(--f-display);font-size:1.1rem;color:var(--ink);display:block}
.lb-who small{display:block;color:var(--muted);font-size:.78rem;line-height:1.35}
.lb-xp{text-align:right}.lb-xp b{display:block;font:800 1.2rem var(--f-display);color:var(--forest)}.lb-xp small{color:var(--muted);font-size:.7rem}
.lb-xp em{display:block;font-style:normal;font-weight:800;font-size:.8rem;color:var(--muted)}.lb-xp em.up{color:var(--ok)}
.lb-del{border:0;background:none;color:var(--muted);font-size:1.3rem;cursor:pointer;min-height:40px}
.empty{color:var(--muted);text-align:center;padding:20px 0}

/* ---------- piece and tempo counter in games ---------- */
.counts{margin:8px 12px 0;display:flex;flex-direction:column;gap:4px}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cside{display:flex;flex-direction:column;gap:1px;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:6px 10px;font-size:.85rem;color:var(--ink);position:relative}
.cside b{font-family:var(--f-display);font-size:1rem;padding-left:20px}
.cside .cdot{position:absolute;left:9px;top:9px;width:14px;height:14px;border-radius:50%;border:2px solid #555}
.cside.w .cdot{background:#fff}.cside.b .cdot{background:#222}
.cside.to-move{border-color:var(--gold);box-shadow:0 0 0 2px rgba(243,181,31,.35)}
.ctemps{font-weight:700;color:var(--sea)}
.csum{margin:0;font-size:.85rem;font-weight:700;color:var(--forest);text-align:center}
.csum small{font-weight:400;color:var(--muted)}
.counts-toggle{align-self:center;border:0;background:none;color:var(--muted);font:600 .8rem var(--f-body);text-decoration:underline;cursor:pointer;padding:4px}

/* ---------- daily training ---------- */
.slots{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.slot{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 12px}
.slot-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper);font:800 1rem var(--f-display);color:var(--muted)}
.slot-name{font-family:var(--f-display);font-weight:700;color:var(--ink)}
.slot.next{border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,181,31,.3)}
.slot.ok .slot-ic{background:var(--ok-bg);color:var(--ok)}
.slot.star .slot-ic{background:#fff3cf}
.tier{color:var(--gold);letter-spacing:1px;font-size:.95rem;white-space:nowrap}.tier small{color:var(--muted);margin-left:4px;font-weight:700;letter-spacing:0}
.run-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.link-back{border:0;background:none;color:var(--forest);font:700 .95rem var(--f-body);cursor:pointer;padding:4px 0}
.done-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.done-card h2{color:var(--forest);font-size:1.8rem}
.big-pose{width:150px}
.big-score{font-size:1.8rem;letter-spacing:4px;margin:0;color:var(--ok)}
.level-change{font-weight:800;font-family:var(--f-display);font-size:1.15rem;color:var(--forest)}
.level-change.up{color:var(--wing)}.level-change.down{color:var(--muted)}
.done-card .btn{width:100%}

/* ---------- coach licence ---------- */
.lic-card{margin-top:12px;border:2px solid var(--gold);background:#fffaf0;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.lic-card.expired{border-color:var(--bad);background:var(--bad-bg)}
.lic-card b{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.lic-name{font:800 1.2rem var(--f-display);color:var(--forest)}
.lic-card small{color:var(--muted)}
.lic-card .counts-toggle{align-self:flex-start;padding-left:0}
.dev-entry textarea{width:100%;font:.9rem ui-monospace,Menlo,Consolas,monospace;padding:8px;border-radius:12px;border:2px solid var(--line);background:#fff;margin:6px 0}
.lic-line{margin:0;font:800 1.1rem var(--f-display);color:var(--forest)}

/* ---------- online classes ---------- */
.ask{position:fixed;inset:0;z-index:200;background:rgba(10,25,15,.55);display:grid;place-items:center;padding:16px}
.ask-card{background:var(--card);border-radius:18px;padding:18px;max-width:380px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}
.ask-card p{margin:0;font-weight:700}
.ask-card .row{display:flex;gap:8px}.ask-card .btn{flex:1}
.class-card{margin:0 0 14px;border:2px solid var(--line);background:var(--card);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px}
.class-card b{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.class-card small{color:var(--muted)}
.class-card .counts-toggle{align-self:flex-start;padding-left:0}
.class-card label,.hw-form label{font-weight:700;font-size:.88rem;display:flex;flex-direction:column;gap:4px;min-width:0}
.class-card input,.hw-form input,.hw-form select,.newclass input{font:inherit;padding:10px;border-radius:12px;border:2px solid var(--line);background:#fff;width:100%;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.classplay{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.classplay h3,.coach h3{margin:10px 0 4px;color:var(--forest)}
.muted{color:var(--muted);font-weight:400;font-size:.85rem}
.glist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gline{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 12px}
.gline>b,.gline>div{flex:1;min-width:140px}
.gline small{display:block;color:var(--muted);font-size:.82rem}
.gline .gbtns{display:flex;gap:6px}
.gline .btn{min-height:40px;padding:8px 14px;font-size:.95rem}
.your-move{color:var(--wing);font-weight:800}
.hw-card{background:#fff8e1;border:2px solid var(--gold);border-radius:16px;padding:12px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.hw-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hw-row small{display:block;color:var(--muted)}
.code-card{background:var(--card);border:2px dashed var(--gold);border-radius:16px;padding:12px;text-align:center;display:flex;flex-direction:column;gap:6px}
.code-card small{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.big-code{font:800 2.4rem/1 var(--f-display);letter-spacing:.2em;color:var(--forest)}
.code-card .row{display:flex;gap:8px;justify-content:center}
.jc{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;color:var(--forest)}
.hw-form{display:flex;flex-direction:column;gap:8px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px}
.hw-kids{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem;margin-top:4px}
.newclass{display:flex;gap:8px}.newclass input{flex:1}
.toggle{display:flex;gap:8px;align-items:center;font-weight:700}
.toggle input{width:22px;height:22px}

/* ---------- language ---------- */
/* five languages: separate chips that wrap into tidy rows (3 + 2 on a phone) instead of one long pill */
.lang-switch{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%}
.lang-switch button{border:2px solid var(--line);border-radius:999px;background:var(--card);padding:6px 11px;font:700 .9rem var(--f-body);color:var(--forest);cursor:pointer;min-height:36px;white-space:nowrap}
.lang-switch button.on{background:var(--forest);border-color:var(--forest);color:#fff}
.welcome-card .lang-switch{margin:-6px auto 14px}
.lang-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:12px 0;font-weight:700}
.lang-row .lang-switch{justify-content:flex-start}

/* ---------- version 2: hints, advanced challenges, profiles, Feathers, clocks, records, review, certificates ---------- */
.adv-chip{display:inline-block;background:#fff4d1;color:#7a5600;border:2px solid var(--gold);border-radius:999px;padding:1px 10px;font:800 .8rem var(--f-body);vertical-align:middle;margin-right:4px}
.progress span.adv{outline:2px dashed var(--gold);outline-offset:1px}
.choice.faded{opacity:.35;text-decoration:line-through}
.feather-toast{top:26%;background:#fff;color:#7a1f3d;border:3px solid var(--gold)}
/* Chippy's accessory from the Feather shop */
.pose-wrap{position:relative;display:inline-block;flex:none;line-height:0}
.pose-wrap>.acc{position:absolute;top:-4px;right:6%;font-size:30px;line-height:1;transform:rotate(12deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.card>.acc.card-acc{position:absolute;left:46px;bottom:74px;font-size:26px;line-height:1;transform:rotate(12deg);pointer-events:none}
/* welcome: who is playing? */
.who-q{margin:8px 0 4px;font-weight:800}
.who-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0}
.who-list .btn{min-width:110px}
.link-btn{border:0;background:none;color:var(--forest);font:700 1rem var(--f-body);text-decoration:underline;cursor:pointer;padding:10px;min-height:44px}
.shared-note{font-size:.82rem;margin-top:6px}
.btn.wide{width:100%;margin:8px 0}
/* Me: this week, Feathers, rating */
.week-card,.feather-card,.qual-card,.note-card,.resume-card,.offer-card{background:var(--card);border-radius:var(--radius);padding:12px 14px;box-shadow:0 3px 0 var(--line);margin:10px 0}
.week-card .stat-row{grid-template-columns:repeat(4,1fr)}
.feather-card{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feather-card b{font:800 1.5rem var(--f-display);display:block}
.feather-card small{color:var(--muted);display:block;max-width:34ch}
.rating-list{margin:6px 0;padding-left:18px}.rating-list b{font-family:var(--f-display);font-size:1.15rem}
/* the Feather shop */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.shop-item{background:var(--card);border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;box-shadow:0 2px 0 var(--line)}
.shop-item.owned{outline:2px solid var(--ok)}
.shop-item .btn{padding:8px 14px;font-size:1rem;min-height:44px;width:100%}
.sw{display:grid;place-items:center;width:64px;height:64px;border-radius:12px}
.sw-board{background:conic-gradient(var(--d) 0 25%,var(--l) 0 50%,var(--d) 0 75%,var(--l) 0) 0 0/32px 32px;border:5px solid var(--f)}
.sw-pcs{display:flex;gap:4px}.sw-pcs i{width:26px;height:26px;border-radius:50%;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.sw-emoji,.sw-cel{font-size:40px}
.sticker{position:absolute;font-size:34px;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));pointer-events:none}
.confetti.feather{background:none!important;width:auto;height:auto;font-size:22px}
.confetti.spark{border-radius:50%;width:9px;height:9px;box-shadow:0 0 8px currentColor}
/* clocks */
.clocks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.clk{background:var(--card);border-radius:12px;padding:6px 12px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 0 var(--line);border:3px solid transparent}
.clk b{font:800 1.5rem ui-monospace,Menlo,monospace}
.clk.run{border-color:var(--forest)}
.clk.low b{color:var(--bad)}
.tc-pick{margin:4px 0 6px}
.tc-line{display:flex;gap:8px;align-items:center;font-weight:700;margin:6px 0}
.tc-line select{min-height:44px;border-radius:10px;padding:4px 8px}
/* pause, resume, draw offers */
.runner{position:relative}
.pause-cover{position:absolute;inset:0;z-index:20;background:rgba(15,40,25,.85);display:grid;place-items:center;text-align:center;color:#fff;border-radius:var(--radius)}
.pause-cover p{font:800 1.6rem var(--f-display);margin:0 0 12px}
.pause-cover .btn{display:block;margin:8px auto}
.resume-card .row,.offer-card .row{display:flex;gap:8px;margin-top:8px}.resume-card .row .btn,.offer-card .row .btn{flex:1}
.resume-card small{display:block;color:var(--muted)}
.offer-card{border:3px solid var(--gold)}
/* record and review */
.record-card .movelist{max-height:150px;color:var(--ink)}
.review-head{display:flex;gap:12px;align-items:center}.review-head .pose{width:84px}
.moment{background:var(--card);border-radius:var(--radius);padding:12px;margin:12px 0;box-shadow:0 3px 0 var(--line)}
.moment.missed-shot,.moment.blunder{border-left:6px solid var(--bad)}
.moment.strong-move,.moment.good-defence{border-left:6px solid var(--ok)}
.board-host.mini{max-width:300px;margin:6px auto}
/* certificates */
.qual-card{border:3px solid var(--gold);text-align:left}
.qual-line{font-weight:700;background:#fff;border-radius:12px;padding:8px 12px;max-width:420px}
.cred-list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.cred{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:14px;padding:10px 12px;box-shadow:0 2px 0 var(--line)}
.cred.ok{outline:2px solid var(--ok)}
.cred-ic{font-size:1.4rem;line-height:1}
.cred small{display:block;color:var(--muted)}
.qcode{display:inline-block;margin-top:4px;font:700 1rem ui-monospace,Menlo,monospace;background:#fff4d1;border-radius:8px;padding:2px 8px;letter-spacing:.04em}
/* comfortable touch targets everywhere */
.icon-btn,.lb-del,.counts-toggle,.link-back,.chip{min-height:44px;min-width:44px}
.choice{min-height:52px}
@media (max-width:380px){.week-card .stat-row{grid-template-columns:repeat(2,1fr)}}
[hidden]{display:none!important}
/* games: compact controls so the board stays in view */
.runner #btns{display:flex;flex-wrap:wrap;gap:6px}
.runner #btns .btn.ghost{padding:8px 12px;font-size:.95rem;min-height:44px;box-shadow:0 2px 0 var(--line)}
.feather-card .btn{white-space:nowrap;padding:10px 16px;font-size:1rem}
/* paused: the board is hidden so nobody can think on the clock's time */
.pause-cover{background:var(--forest);border-radius:0}
/* comfortable touch targets */
.xp-pill{min-height:44px}
.lang-switch button{min-height:44px}
select{min-height:44px}

/* ---------- Coach Academy (adult coaches) ---------- */
.academy h3{font-size:1.2rem;color:var(--forest);margin-top:6px}
.ac-top{grid-template-columns:48px minmax(0,1fr) 8px}
.ac-hero{background:var(--card);border:2px solid var(--line);border-left:6px solid var(--gold);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.ac-hero h2{font-size:1.5rem;color:var(--forest)}
.ac-hero p{margin:0}
.ac-lang{margin:0;background:#eef5ff;border:2px solid #c9dafc;color:#1d3f8f;border-radius:12px;padding:8px 12px;font-size:.92rem;font-weight:700}
.ac-mod>div{min-width:0}
.ac-bar{display:block;height:6px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.ac-bar i{display:block;height:100%;background:var(--leaf)}
.ac-form label{font-weight:700;font-size:.88rem}
.ac-form .ac-consent{flex-direction:row;align-items:flex-start;font-weight:400;font-size:.88rem;gap:10px}
.ac-consent input{flex:none;margin-top:2px}
.ac-form .btn,.ac-credits .btn,.ac-retake .btn{align-self:stretch}
.ac-credits b{font-size:1rem;color:var(--forest);text-transform:none;letter-spacing:0}
.ac-credits label{font-weight:700;font-size:.88rem;display:flex;flex-direction:column;gap:4px}
.ac-credits input{font:1rem ui-monospace,Menlo,monospace;padding:10px;border-radius:12px;border:2px solid var(--line);background:#fff;width:100%;min-width:0}
.ac-retake p{margin:0;font-weight:700}
.ac-active{border:3px solid var(--gold);background:#fff8dc;border-radius:16px;padding:12px}
.academy textarea{width:100%;font:1rem ui-monospace,Menlo,monospace;padding:10px;border-radius:12px;border:2px solid var(--line);background:#fff;resize:vertical}
.ac-lessons .st b{font-size:1.02rem}
.ac-card{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:0 3px 0 var(--line);display:flex;flex-direction:column;gap:10px}
.ac-card .caption{margin:0;font-size:1.02rem;line-height:1.5}
.ac-meta{margin:0;font-size:.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ac-item{display:flex;flex-direction:column;gap:10px}
.ac-prompt{margin:0;font-size:1.02rem;line-height:1.5;background:var(--card);border-radius:14px;padding:12px;border:2px solid var(--line)}
.ac-setup{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;word-break:break-word}
.ac-board{max-width:min(100%,56vh)}
.ac-answer{display:flex;flex-direction:column;gap:8px}
.ac-opt{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.98rem;line-height:1.4;background:var(--card)}
.ac-opt .ac-mark{flex:none;font-size:1.15rem;line-height:1.2;color:var(--forest)}
.ac-opt.sel{border-color:var(--chippy-blue);background:#eef3ff;font-weight:700}
.ac-opt:disabled{cursor:default}
.ac-opt:disabled:not(.sel){opacity:.75}
.ac-right{margin:0;padding:0 0 0 4px;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.ac-right b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--forest);color:#fff;font-size:.8rem;margin-right:4px}
.ac-mrow{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.ac-mrow p{margin:0;font-size:.95rem}
.ac-chips{display:flex;flex-wrap:wrap;gap:6px}
.ac-chips .chip{min-width:44px;min-height:44px}
.ac-order{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:6px}
.ac-order li{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 10px}
.ac-order li{display:list-item}
.ac-order li span:first-child{display:block;font-size:.95rem}
.ac-arrows{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}
.ac-arrows .chip{min-width:48px;min-height:44px}
.ac-moves{margin:0;font-family:ui-monospace,Menlo,monospace;font-size:.95rem;background:var(--card);border:2px dashed var(--sea);border-radius:12px;padding:8px 10px;word-break:break-word}
.ac-moves b{font-family:var(--f-body)}
.ac-answer .row .btn{min-height:44px;padding:8px 14px;font-size:1rem}
.ac-num{display:flex;flex-direction:column;gap:4px;font-weight:700;max-width:220px}
.ac-num input{font:1.3rem var(--f-display);padding:10px;border-radius:12px;border:2px solid var(--line);background:#fff}
.ac-feedback{display:flex;flex-direction:column;gap:8px}
.ac-feedback:empty{display:none}
.ac-key,.ac-why{margin:0;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.95rem}
.ac-key{border-color:var(--ok)}
.ac-done{text-align:center}
.ac-done h2{color:var(--forest);font-size:1.4rem}
.ac-rulelist{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px}
/* the exam */
.ac-examtop{grid-template-columns:auto minmax(0,1fr) auto}
.ac-timer{font:800 1.15rem var(--f-display);background:rgba(255,255,255,.18);border-radius:999px;padding:6px 12px;font-variant-numeric:tabular-nums;min-width:74px;text-align:center}
.ac-timer.low{background:var(--gold);color:#3a2a00}
.ac-examtop h1{font-size:1rem;text-align:center}
.ac-handin{min-height:44px;padding:6px 14px;font-size:.95rem;box-shadow:0 3px 0 #8f1f17}
.ac-warn{background:#fff3c9;border:2px solid var(--gold);border-radius:12px;padding:8px 12px;font-weight:800}
.ac-secs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ac-secl{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.ac-secs .chip{flex:none;min-width:44px;min-height:44px}
.ac-navbox{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 12px}
.ac-navbox summary{cursor:pointer;font-weight:700}
.ac-nav{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ac-navsec{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ac-navsec>b{width:22px;color:var(--muted)}
.ac-q{width:44px;height:44px;border-radius:10px;border:2px solid var(--line);background:var(--paper);font-weight:700;font-size:.85rem;cursor:pointer;padding:0}
.ac-q.done{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.ac-q.lock{opacity:.6}
.ac-q.lock::after{content:"🔒";font-size:.55rem;vertical-align:super}
.ac-q.cur{outline:3px solid var(--chippy-blue);outline-offset:1px}
.ac-pn{display:flex;gap:8px}.ac-pn .btn{flex:1}
.ac-save{margin:0;font-size:.85rem;color:var(--muted);text-align:center}
.ac-save.saved{color:var(--ok)}
.ac-save.bad{color:var(--bad);font-weight:700}
/* the result */
.ac-total{display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap;background:var(--card);border:3px solid var(--line);border-radius:18px;padding:14px}
.ac-total b{font:800 3rem/1 var(--f-display);color:var(--forest)}
.ac-total small{font-size:1.2rem;color:var(--muted)}
.ac-total span{flex-basis:100%;text-align:center;font:800 1.2rem var(--f-display)}
.ac-total.certified{border-color:var(--ok)}.ac-total.certified span{color:var(--ok)}
.ac-total.retake{border-color:var(--gold)}.ac-total.reassess{border-color:var(--bad)}.ac-total.reassess span{color:var(--bad)}
.ac-domains{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ac-domains li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;align-items:center;background:var(--card);border:2px solid var(--line);border-left:6px solid var(--ok);border-radius:12px;padding:8px 12px}
.ac-domains li.not{border-left-color:var(--bad)}
.ac-dn{font-weight:700}.ac-dn small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
.ac-domains em{font-style:normal;font-weight:800;font-size:.85rem;color:var(--ok)}
.ac-domains li.not em{color:var(--bad)}
.ac-crit{grid-column:1/-1;color:var(--bad);font-size:.82rem}
.ac-ready{margin:0;font-weight:700}
.ac-certview .cert-wrap{margin:4px 0}
.ac-certview .row .btn{flex:1}
.academy .link-back{min-height:44px;padding:10px 0}
.academy .gline .btn{min-height:44px}
/* exam: connection banner, parts not opened yet, the practical inside teaching, the recovery key step */
.ac-net{position:sticky;top:60px;z-index:19;margin:0;background:var(--bad);color:#fff;font-weight:800;padding:10px 14px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.ac-net[hidden]{display:none}
.ac-hidden{background:var(--card);border:2px dashed var(--line);border-radius:14px;padding:18px 14px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ac-hidden p{margin:0;font-weight:700;color:var(--muted)}
.ac-q.hid{background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 4px,var(--line) 4px,var(--line) 6px);color:var(--muted);border-style:dashed}
.ac-sub{grid-column:1/-1;font-size:.84rem;color:var(--ok);font-weight:700}
.ac-sub.not{color:var(--bad)}
.ac-freemsg{font-weight:700}
.ac-keysave{text-align:left}
.ac-keysave h2{color:var(--forest);font-size:1.4rem}
.ac-keysave p{margin:0}
.ac-how a{color:var(--forest);font-weight:700;word-break:break-all}
.ac-keynote{color:var(--bad)}

/* ---------- Chippy's celebration (app/src/celebrate.ts) ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cel-layer{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.cel-backdrop{position:absolute;inset:0;background:rgba(10,30,18,.42)}
.cel-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.cel-fly{position:absolute;left:0;top:0;width:72px;height:72px;object-fit:contain;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.cel-bit{position:absolute;left:-7px;top:-7px;width:14px;height:14px;opacity:0;will-change:transform,opacity;font-style:normal;line-height:14px;font-size:14px;text-align:center}
.cel-bit.spark{border-radius:3px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.cel-bit.paper{width:9px;height:13px;border-radius:2px}
.cel-bit.feather{background:none!important;font-size:16px}
.cel-card{position:relative;z-index:1;width:min(380px,100%);max-height:100%;overflow:auto;background:var(--card);border:5px solid var(--gold);border-radius:26px;padding:18px 18px 20px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink)}
.cel-card.cel-level{background:linear-gradient(180deg,#eef3ff,#fff 55%)}
.cel-card.cel-badge{background:radial-gradient(circle at 50% 22%,#fff3c4,#fff 65%)}
.cel-eyebrow{margin:0;color:var(--wing);font:800 .95rem var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.cel-card h2{font-size:1.7rem;color:var(--forest);outline:none}
.cel-card h2:focus-visible{outline:3px dashed var(--gold);outline-offset:4px;border-radius:6px}
.cel-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.cel-lines p{margin:0;background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:700}
.cel-count{margin:0;color:var(--muted);font-size:.9rem;font-weight:700}
.cel-go{margin-top:6px;min-width:180px}
.cel-pose{width:min(150px,38vw);height:auto}
.cel-pose.small{width:min(96px,26vw)}
.cel-layer.cel-at-top{align-items:flex-start;padding-top:calc(64px + env(safe-area-inset-top,0px))}
.cel-layer.cel-at-bottom{align-items:flex-end}
.cel-badge-wrap{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%}
.cel-badge-img{width:min(150px,40vw);height:auto;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.cel-perch.side{width:min(82px,22vw);height:auto;margin-left:-14px}
.cel-path{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:62px 4px 6px}
.cel-node{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--card);border:5px solid var(--gold);color:var(--forest);font:800 1.35rem var(--f-display);box-shadow:0 4px 0 #a47a10}
.cel-node.done{background:var(--leaf);color:#fff;border-color:#c99206}
.cel-node.next{width:60px;height:60px;border-color:var(--chippy-blue);box-shadow:0 0 0 5px rgba(29,79,216,.2),0 4px 0 #a47a10}
.cel-node.later{opacity:.55}
.cel-node.empty{color:#c99206}
.cel-link{flex:1 1 30px;max-width:60px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 14px)}
.cel-path .cel-perch{position:absolute;left:50%;top:0;width:68px;height:68px;object-fit:contain;transform:translateX(-50%)}
@media (max-height:600px){.cel-card{gap:4px;padding:12px 14px 14px}.cel-card h2{font-size:1.4rem}.cel-badge-img{width:110px}.cel-pose{width:100px}}

/* ---- game juice: board animations (Web Animations API in board.ts / fx.ts), idle life, button squish ---- */
.pc.moving{z-index:5}
.pc.crowning i::after{visibility:hidden}
.crown-drop{position:absolute;inset:24%;background:var(--gold);clip-path:polygon(0 85%,0 25%,25% 55%,50% 12%,75% 55%,100% 25%,100% 85%)}
.fx-bit{position:absolute;pointer-events:none;z-index:6}
.fx-bit.puff{width:4.6%;height:2.8%;border-radius:60% 0 60% 0;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.fx-bit.spark{width:2.2%;height:2.2%;border-radius:50%;background:#fff6c2;box-shadow:0 0 6px 2px rgba(255,214,90,.85)}
.board-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;pointer-events:none;background:var(--gold);color:#3a2a00;font:800 clamp(1.05rem,5vw,1.6rem) var(--f-display);padding:.35em .9em;border-radius:999px;border:3px solid #fff;box-shadow:0 4px 0 #a47a10,0 8px 22px rgba(0,0,0,.28);white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.fx-layer>*{position:absolute;left:0;top:0}
.fx-fly{height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.fx-hand{font-size:56px;line-height:1}
.fx-feather{font-size:34px;line-height:1}
.fx-puff{width:12px;height:7px;border-radius:60% 0 60% 0}
.fx-star{display:inline-block}
/* idle life: Chippy and friends breathe (and blink-ish) slowly; never on the task cards the child is reading */
@keyframes idle-breathe{0%,100%{transform:none}40%{transform:translateY(-2px) scale(1.015) rotate(-.8deg)}86%{transform:none}91%{transform:scaleY(.965)}95%{transform:none}}
.name-screen>.pose,.name-screen>.pose-wrap,.me-head>.pose,.me-head .pose-wrap,.daily-hero>.pose,.daily-hero>.pose-wrap,.result>.pose,.result>.pose-wrap,.award>.pose,.award>.pose-wrap,.review-head .pose,.done-card>.pose{animation:idle-breathe 5.4s ease-in-out infinite;transform-origin:50% 90%}
.actor.in{animation:actorIn .35s ease-out,idle-breathe 6.5s ease-in-out .6s infinite;transform-origin:50% 95%}
/* buttons squish a little when pressed */
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="less"]) .btn{transition:transform .09s ease,box-shadow .09s ease}
  html:not([data-motion="less"]) .btn:active:not(:disabled){transform:translateY(3px) scale(.96)}
  html:not([data-motion="less"]) :is(.choice,.opp,.step,.theme-pick,.tab,.chip):active:not(:disabled){transform:scale(.96);transition:transform .08s ease}
}

/* ---- launch: "What experts say", Support Chippy (grown-ups only), update note, backups ---- */
.experts{margin-top:14px;padding-top:12px;border-top:2px dashed var(--line);text-align:left}
.experts h2{font-size:1.15rem;color:var(--forest);text-align:center}
.experts-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 6px;margin:0 -4px;overscroll-behavior-x:contain}
.experts-row:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:12px}
.experts-row>.endorse{flex:0 0 84%;scroll-snap-align:center}
.experts-row.one>.endorse{flex-basis:100%}
.experts .link-btn{display:block;margin:2px auto 0}
.endorse{margin:0;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;text-align:left}
.endorse blockquote{margin:0;position:relative;padding-left:20px}
.endorse blockquote::before{content:"“";position:absolute;left:-2px;top:-10px;font:800 2.2rem/1 var(--f-display);color:var(--gold)}
.endorse blockquote p{margin:0;color:var(--ink);font-size:.95rem;line-height:1.35}
.experts-row .endorse blockquote p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.endorse .en-tr{margin:0;font-size:.78rem;color:var(--muted);font-style:italic}
.endorse figcaption{display:flex;gap:10px;align-items:center;margin-top:auto}
.en-photo{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.en-initials{display:grid;place-items:center;background:var(--forest);color:#fff;font:800 1rem var(--f-display)}
.en-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.en-who b{font-family:var(--f-display);color:var(--forest)}
.en-who small{color:var(--muted);font-size:.8rem}
.en-link{display:inline-flex;align-items:center;min-height:44px;color:var(--forest);font-weight:700}
.en-orig summary{display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;color:var(--forest);font-weight:700;font-size:.9rem;list-style:none}
.en-orig summary::-webkit-details-marker{display:none}
.en-orig summary::before{content:"▸";transition:transform .15s}
.en-orig[open] summary::before{transform:rotate(90deg)}
.en-orig p{margin:0;font-size:.9rem;color:var(--muted)}
.endorse.full blockquote p{font-size:1rem}
.experts-page{padding:16px;display:flex;flex-direction:column;gap:12px}
.experts-me .endorse{margin-top:10px}
.support-card{margin:12px 0;background:linear-gradient(180deg,#f1faf3,#fff);border:2px solid #cfe8d6;border-radius:16px;padding:12px}
.support-card h3{margin:0;font-family:var(--f-display);color:var(--forest);font-size:1.1rem}
.support-card p{margin:4px 0 10px}
.give-btns{display:flex;flex-direction:column;gap:10px}
.give-btns[hidden]{display:none}
.give-btns .btn,.gate a.btn{width:100%;white-space:normal;line-height:1.25}
.gate .link-btn{align-self:flex-start;min-height:44px}
.gate{margin-top:10px;padding:10px 12px;border:2px dashed var(--gold);border-radius:14px;background:var(--paper);display:flex;flex-direction:column;gap:8px}
.gate .gate-t{margin:0;font-weight:800;color:var(--ink)}
.gate label{font-weight:700}
.gate .row{flex-wrap:nowrap}
.gate input{flex:1;min-width:0;min-height:48px;font:700 1.3rem var(--f-display);padding:6px 12px;border-radius:12px;border:3px solid var(--line);background:#fff;text-align:center}
.gate .btn{flex:none}
.gate a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.gate p{margin:0}
.gate .donate-mail{font-weight:800;font-size:1.05rem;color:var(--forest);overflow-wrap:anywhere;display:inline-block;min-height:44px;line-height:44px}
.gate #donate-copy{flex:1}
.update-toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:150;width:min(496px,calc(100% - 24px));display:none;align-items:center;gap:8px;padding:8px 8px 8px 14px;background:var(--forest);color:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.update-toast.show{display:flex}
/* while the note shows, the end of the screen can scroll clear of it (nothing stays hidden under it) */
body:has(.update-toast.show) #app>:not(.tabbar):is(:has(+ .tabbar),:last-child){margin-bottom:88px}
body:not(:has(.tabbar)) .update-toast{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.update-toast .upd-text{flex:1;font-weight:700;font-size:.95rem;line-height:1.25}
.update-toast .btn{flex:none;background:var(--gold);color:#3a2a00;box-shadow:0 3px 0 #a47a10;padding:8px 16px;font-size:1rem}
.update-toast .upd-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.update-toast .upd-x:focus-visible,.update-toast .btn:focus-visible{outline:4px solid var(--gold);outline-offset:2px}
.backup{padding:16px;display:flex;flex-direction:column;gap:4px}
.backup h2{font-size:1.25rem;color:var(--forest)}
.backup .send-card>p{font-size:.95rem}
.bk-who{border:0;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:2px}
.bk-who legend{font-weight:800;margin-bottom:4px;padding:0}
.bk-who .toggle,.backup .toggle{min-height:44px}
.bk-btns{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.bk-code{max-height:9.5em;overflow:auto;font-size:.8rem;margin:8px 0 6px}
.backup #bkcopy,.bk-restore>.btn{width:100%}
.bk-label{display:block;font-weight:700;margin:12px 0 4px}
.bk-restore textarea{width:100%;font:.85rem/1.3 ui-monospace,Menlo,Consolas,monospace;padding:10px;border-radius:12px;border:2px solid var(--line);background:#fff;margin-bottom:8px;resize:vertical}
.bk-restore #rsmsg{margin-top:8px}
.bk-prev{margin-top:10px;background:var(--paper);border:2px solid var(--gold);border-radius:14px;padding:10px 12px}
.bk-prev ul{margin:6px 0 10px;padding-left:20px}
.bk-prev li{font-weight:700}
.bk-prev small{color:var(--muted);font-weight:400}
.bk-prev .btn{width:100%}