/* The playground skin builds on the shared game and form layout. */
:root{--bg:#fffaf0;--ink:#243b32;--muted:#617a6e;--line:#d7eee2;--lime:#d4fa59;--forest:#23734f}
body{background-image:radial-gradient(#bae1ce50 1px,transparent 1px);background-size:22px 22px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible,.section-heading:focus-visible{outline:3px solid #f05a28;outline-offset:5px}
.sidebar{position:relative;inset:auto;width:100%;height:90px;flex-direction:row;align-items:center;justify-content:space-between;padding:16px max(28px,calc((100vw - 1240px)/2));border:0;border-bottom:2px solid var(--ink);background:#fffdf7;gap:26px}
.brand{font-size:35px;transform:rotate(-3deg);padding:0;white-space:nowrap}.brand-mark{gap:3px;grid-template-columns:repeat(2,10px)}.brand-mark i{height:10px;background:#23734f;border:1px solid var(--ink)}.brand-mark i:last-child{background:#ed864e}.brand small{background:#d4fa59;border:1px solid var(--ink);padding:4px;border-radius:5px;font-size:8px;letter-spacing:1px;transform:rotate(8deg)}
.nav-label,.side-bottom{display:none}.nav{display:flex;gap:6px}.nav button{font-size:13px;color:#587566;border:2px solid transparent;min-height:44px;padding:10px 14px;font-weight:700;border-radius:14px}.nav button.active{background:#e5f4ec;border-color:var(--ink);color:var(--ink);box-shadow:0 3px 0 var(--ink)}.nav button:hover{background:#eef8f3}.nav button .badge{background:#d4fa59;color:var(--ink)}
.main{margin-left:0}.topbar{height:66px;padding:0 32px;background:transparent;border:0;max-width:1240px;margin:auto}.breadcrumb,.breadcrumb strong{color:#55826c;font-weight:700}.beta{color:#518e70;border:0;font-weight:700}.avatar{background:#ffd185;border:2px solid var(--ink);border-radius:12px;transform:rotate(5deg);color:var(--ink)}.content{max-width:1240px;padding:16px 32px 32px}.intro{margin-bottom:23px;gap:16px}.intro h1{font-size:25px;font-weight:800;letter-spacing:-.7px}.intro p{font-size:13px;color:var(--muted)}.tour-replay{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;border:0;background:transparent;color:#23734f;min-height:44px;flex-shrink:0}.tour-replay>span{display:grid;place-items:center;width:24px;height:24px;border:2px solid currentColor;border-radius:50%;font-weight:800}
.hero{border:2px solid var(--ink);border-radius:28px;background:#23734f;box-shadow:0 7px 0 var(--ink);min-height:350px;color:white;margin-bottom:28px;isolation:isolate}.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(#ffffff24 1.2px,transparent 1.2px);background-size:16px 16px;z-index:-1}.hero-copy{padding:32px 38px;width:62%}.hero .pill{color:#fff3b2;background:#ffffff12;border:1px solid #ffffff65;border-radius:30px;letter-spacing:1.5px;font-size:9px}.hero .dot{background:#d4fa59}.hero h2{font-size:clamp(45px,5.3vw,68px);letter-spacing:-3px;line-height:1.02;max-width:none;margin:18px 0 15px;font-weight:800}.hero h2>span{color:#d4fa59}.hero p{font-size:14px;color:#f0f9f4;line-height:1.65;max-width:none}.hero-actions{gap:12px;flex-wrap:wrap;margin-top:23px}.dark-btn,.outline-btn,.primary-btn{border:2px solid var(--ink);border-radius:13px;min-height:46px;font-size:13px;font-weight:800;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s}.dark-btn{background:#23734f;color:white}.outline-btn{background:#fffdf7;color:var(--ink)}.hero-actions .dark-btn{background:#d4fa59;color:var(--ink);padding:15px 23px;font-size:16px}.hero-actions .outline-btn{padding:15px 22px;font-size:16px}.dark-btn:hover,.outline-btn:hover,.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink);filter:none}.dark-btn:active,.outline-btn:active,.primary-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.hero-foot{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:20px;font-size:11px;color:#eef8f3}.hero-foot button{border:0;background:none;color:#fff;font-size:11px;text-decoration:underline;text-underline-offset:3px;min-height:32px;padding:0}
.hero-art{width:38%;min-height:350px}.orbit{border:2px dashed #addcc4;width:250px;height:250px}.orbit:after,.orbit:before{border-color:#9ad3b6}.question-tile{background:#ffd274;color:var(--ink);border:3px solid var(--ink);border-radius:28px;width:140px;height:160px;box-shadow:8px 9px 0 var(--ink);font-size:115px;animation:bob 7s ease-in-out 2}.floating{border:2px solid var(--ink);color:var(--ink);box-shadow:3px 4px 0 var(--ink);font-size:10px;font-weight:800}.floating.fast{top:32px;right:24px;background:#ff9977;transform:rotate(9deg)}.floating.brain{bottom:49px;left:-25px;background:#fffdf7;transform:rotate(-8deg)}.floating.brain span{background:#d4fa59;padding:4px 7px;border-radius:6px;font-size:16px}.spark{color:#d4fa59}.spark.one{top:40px;left:15px;font-size:52px}.spark.two{bottom:37px;right:23px;font-size:50px}.art-dot{background:#ff9b78;width:15px;height:15px;right:42px;top:134px;border:2px solid var(--ink)}.art-word{position:absolute;display:flex;bottom:22px;right:57px;transform:rotate(12deg);gap:4px}.art-word span{display:grid;place-items:center;width:32px;height:36px;border:2px solid var(--ink);border-radius:7px;background:#ff97b1;color:var(--ink);font-size:20px;font-weight:800;box-shadow:2px 3px 0 var(--ink)}
.tour-invite{display:flex;align-items:center;gap:16px;padding:15px 18px;border:2px dashed #a5d9bf;background:#f2faf6;border-radius:18px;margin:24px 0 32px}.tour-wave{font-size:28px}.tour-invite>div{flex:1}.tour-invite strong{display:block;font-size:14px;margin-bottom:3px}.tour-invite>div>span{font-size:12px;color:#547c68}.tour-invite .outline-btn{font-size:12px;padding:9px 13px}.close{color:var(--ink);background:#edf7f2;min-width:36px;min-height:36px}
#games-section{scroll-margin-top:24px;margin-top:32px}.section-head h2{font-size:24px;font-weight:800;letter-spacing:-.8px}.section-head h2 small{background:#ffd788;color:var(--ink);border:1px solid var(--ink);transform:rotate(-4deg);font-size:8px;font-weight:800;padding:5px}.section-head p{font-size:13px;color:#617a6e;margin-top:8px}.text-link{color:#23734f;font-size:12px;font-weight:700;min-height:36px}.filter{background:#fffdf7;border:1px solid #a5ccb9;border-radius:25px;color:#537e69;font-size:11px;min-height:36px;padding:8px 13px}.filter.active{background:#23734f;border-color:#23734f}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.game-card{border:2px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink)}.game-card.playable:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 10px 0 var(--ink)}.game-visual{height:168px;background:#d7f779;border-bottom:2px solid var(--ink);background-image:radial-gradient(#829f3940 1px,transparent 1px);background-size:13px 13px}.game-visual.sky{background:#c8e6f4}.game-visual.peach{background:#ffc59e}.game-visual:before{border:2px dashed #243b3230;width:190px;height:190px}.game-card .available{border:1px solid var(--ink);background:#fffdf7;color:var(--ink);border-radius:20px;font-size:9px;padding:6px 9px}.mini-tile{background:#fffdf7;border:2px solid var(--ink);color:#23734f;box-shadow:5px 5px 0 var(--ink);width:73px;height:82px;font-size:59px}.letter-tiles span{border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);color:var(--ink);background:#fffdf7}.letter-tiles span:nth-child(2){background:#ffdd79}.favorite{width:34px;height:34px;border:1px solid var(--ink);background:#fffdf7;color:var(--ink)}.game-body{padding:20px}.game-title h3{font-size:20px;font-weight:800}.game-body p{font-size:12px;color:#60796c;margin:9px 0 14px;line-height:1.65}.tags{flex-wrap:wrap}.tags span{font-size:9px;background:#eef8f3;color:#517965;padding:5px 8px}.card-cta{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:13px;font-weight:800;color:#23734f}.card-cta>span{display:grid;place-items:center;width:29px;height:29px;background:#d4fa59;border:1px solid var(--ink);border-radius:50%;color:var(--ink);font-size:19px}.future-game{box-shadow:0 5px 0 #b2cdc0;border-color:#b2cdc0}.future-game .game-visual{border-color:#b2cdc0}.future-game .game-title{flex-wrap:wrap;gap:8px}.coming{background:#eef8f3;color:#617a6e;border:0;font-weight:700}.family-section{margin-top:38px}.family-games{gap:18px}.family-card{border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:20px;background:#ffe17e;padding:22px;position:relative;overflow:hidden}.family-card:after{content:'Play →';position:absolute;right:17px;top:24px;font-size:12px;font-weight:800}.family-card.dinosaurs{background:#b6edc9;border-color:var(--ink)}.family-card.animals{background:#bce4ec;border-color:var(--ink)}.family-card strong{font-size:18px;font-weight:800}.family-card small{font-size:12px;color:#516c5e}.family-card>span{margin-bottom:12px}.stats{margin-top:32px;gap:15px}.stat{background:#fffdf7;border:1px solid #bddfce;border-radius:16px;padding:16px}.stat-icon{background:#eef8f3;color:#23734f;border:1px solid #cbe8da}.stat strong{font-size:23px;color:#23734f}.stat p{font-size:11px;color:#587667}.stat .stat-note{font-size:10px;color:#658374}.history-panel,.friends-panel{background:#fffcf7;border:1px solid #c7e6d6;border-radius:17px}.section-head h3{font-size:15px}.empty-inline,.friends-panel p{font-size:12px;color:#60796c}.empty-inline strong{font-size:13px;color:#46745d}.footer{font-size:11px;color:#678a78}.footer button{color:#23734f}.footer span{display:block}
/* Keep the same controls during play, with a bolder game-board treatment. */
.arena{border:2px solid var(--ink);box-shadow:0 6px 0 var(--ink);border-radius:24px;background:#fffdf9}.arena-top{color:#548e71}.question-label{color:#23734f}.progress{background:#eff8f3}.progress i{background:#a1d6bc}.timer{background:#ecf7f2;color:#23734f;border-color:#b1ddc7}.player-chip{border:2px solid #a3d0ba;background:#fffdf9}.point-winner{background:#e6fbb5;border-color:#698b31}.activity-panel{border:2px solid #c7e7d7;border-radius:20px;background:#fffdf9}.activity-heading h2{font-size:18px}.log-entry{background:#eef8f3}.log-meta strong{color:#467b61}.correct-guess{background:#ecfacb;border-color:#c1d98c}.chat-form input,.answer-form input{border:2px solid #a0cfb8;border-radius:12px;background:white}.question-text{font-weight:800}.dialog{background:#fffaf0;border:2px solid var(--ink);box-shadow:0 7px 0 var(--ink),0 20px 70px #243b3244;border-radius:22px;max-height:calc(100dvh - 32px)}.dialog::backdrop{background:#243b3299}.dialog h2{font-weight:800}.field{font-size:12px}.field input,.field select{border-color:#baddcc;font-size:14px}.switcher{background:#e4f3ec}.switcher button.selected{background:#d4fa59;box-shadow:0 2px 0 var(--ink);font-weight:800}.form-note{font-size:12px}.form-error{color:#a93238}.kids-game .arena{border-color:var(--ink)}.kids-game .question-text{color:#23734f}.letter-tile{border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);color:#23734f}.letter-tile.wildcard{border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
/* Native dialog provides focus trapping and makes the page inert during the tour. */
#walkthrough{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden;pointer-events:none}#walkthrough::backdrop{background:transparent}#tour-spotlight{position:fixed;border:3px solid #d4fa59;border-radius:17px;box-shadow:0 0 0 9999px #243b32c9;pointer-events:none}.tour-card{position:fixed;width:min(340px,calc(100vw - 32px));padding:22px;border:2px solid var(--ink);border-radius:20px;background:#fffaf0;box-shadow:0 5px 0 var(--ink);pointer-events:auto;max-height:calc(100dvh - 24px);overflow:auto}.tour-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}#tour-count{background:#e4f3ec;border:1px solid #9ed5ba;border-radius:20px;padding:5px 11px;color:#23734f;font-size:12px;font-weight:800}.tour-skip{border:0;background:transparent;font-size:12px;color:#567e6a;min-height:32px}.tour-card h2{font-size:24px;font-weight:800;letter-spacing:-.6px}.tour-card p{font-size:14px;line-height:1.7;color:#567e6a;margin-top:9px}.tour-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.tour-controls .ghost-btn{color:#567e6a}#tour-play{margin:13px auto 0}#tour-back:disabled{visibility:hidden}
@media(max-width:1050px){.sidebar{padding:16px 24px;gap:12px}.nav button{padding:9px 10px;font-size:12px;gap:7px}.nav button .icon{width:17px}.nav .badge{display:none}.hero-copy{padding:30px;width:65%}.hero-art{width:35%}.floating.fast{right:12px;font-size:8px}.floating.brain{left:-12px}.stat .stat-note{display:none}.game-title h3{font-size:18px}}
@media(max-width:760px){.sidebar{height:76px;padding:12px 20px}.brand{font-size:29px}.nav{gap:7px}.nav button{padding:8px;font-size:11px}.main{padding-bottom:0}.topbar{height:54px;padding:0 22px}.topbar .beta{display:none}.content{padding:12px 22px 26px}.intro h1{font-size:22px}.intro p{font-size:12px}.hero-copy{width:67%;padding:27px}.hero h2{font-size:52px}.hero-art{width:33%;position:relative;right:auto;top:auto;opacity:1}.question-tile{width:100px;height:118px;font-size:85px;border-radius:22px}.floating.fast{font-size:8px;right:5px;top:52px}.floating.brain{bottom:63px;left:-12px;font-size:8px;padding:7px}.spark.one{left:-5px;font-size:30px}.orbit{width:170px;height:170px}.art-word{right:13px;bottom:24px}.art-word span{width:27px;height:30px;font-size:16px}.hero-actions{gap:10px}.hero-actions .dark-btn,.hero-actions .outline-btn{font-size:13px;padding:13px 16px}.hero-foot>span{font-size:10px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.future-game{display:none}.game-visual{height:154px}.game-body{padding:18px}.tour-invite{gap:11px;flex-wrap:wrap;padding:15px}.tour-invite>div{flex-basis:calc(100% - 80px)}.tour-invite .outline-btn{margin-left:40px}.tour-invite .close{margin-left:auto}.family-games{gap:12px}.family-card{padding:18px 13px}.family-card strong{font-size:14px}.family-card small{font-size:11px}.family-card:after{top:23px;right:10px;font-size:10px}.section-head h2{font-size:22px}.section-head h2 small{display:none}.stats .stat{display:flex;gap:10px}.stat-icon{margin:0}.stat p{font-size:10px}.footer{font-size:10px}.bottom-grid{grid-template-columns:1fr}.nav button.active{box-shadow:0 2px 0 var(--ink)}}
@media(max-width:500px){.sidebar{height:68px;padding:12px 18px}.brand{font-size:27px}.brand small{display:none}.nav button{font-size:11px;min-height:38px;padding:7px}.nav .icon{display:none}.topbar{padding:0 18px;height:53px}.breadcrumb{font-size:11px;gap:8px}.profile-name{display:block;font-size:11px}.profile-name small{font-size:9px}.avatar{width:29px;height:29px}.content{padding:8px 18px 25px}.intro{align-items:flex-start;margin-bottom:18px;gap:8px}.intro h1{font-size:20px;margin-bottom:5px}.intro p{font-size:11px;max-width:210px;line-height:1.6}.tour-replay{font-size:10px;gap:5px;max-width:100px;line-height:1.5;text-align:left;padding:0;min-height:40px}.tour-replay>span{flex-shrink:0;width:21px;height:21px}.hero{min-height:0;border-radius:23px;display:block}.hero-copy{padding:25px 22px;width:100%}.hero .pill{font-size:8px;letter-spacing:1px}.hero h2{font-size:53px;letter-spacing:-2.5px;position:relative;z-index:2;margin:21px 0 16px}.hero p{font-size:12px;max-width:250px}.hero-art{position:absolute;right:12px;top:61px;width:110px;min-height:0;height:130px;z-index:0;pointer-events:none}.hero-art .question-tile{width:66px;height:80px;font-size:62px;border-radius:17px;box-shadow:5px 6px 0 var(--ink);transform:rotate(14deg);animation:none}.hero-art .orbit{width:110px;height:110px}.hero-art .orbit:after{inset:-10px}.hero-art .orbit:before,.hero-art .floating,.hero-art .art-word,.hero-art .art-dot{display:none}.hero-art .spark.one{top:0;left:-3px;font-size:25px}.hero-art .spark.two{bottom:-5px;right:0;font-size:28px}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:23px}.hero-actions .dark-btn,.hero-actions .outline-btn{padding:14px 8px;font-size:12px;min-height:51px;gap:6px}.hero-actions .icon{width:16px}.hero-foot{gap:7px;justify-content:space-between;margin-top:16px}.hero-foot>span,.hero-foot button{font-size:9px}.tour-invite{margin:23px 0 27px}.tour-invite>div>span{font-size:11px;line-height:1.5;display:block}.section-head h2{font-size:21px}.section-head p{font-size:12px}.section-head{gap:10px}.section-head .text-link{font-size:10px}.filters{gap:6px}.filter{font-size:10px;min-height:36px;padding:7px 11px}.game-grid{gap:14px}.game-visual{height:134px}.game-card .available{font-size:7px;padding:4px 7px;left:8px;top:9px}.favorite{top:7px;right:6px;width:30px;height:30px}.game-body{padding:14px 12px}.game-title h3{font-size:16px}.game-title>.icon{display:none}.game-body p{font-size:11px;min-height:55px}.tags{gap:4px}.tags span{font-size:8px;padding:4px 5px}.card-cta{font-size:12px;margin-top:13px}.card-cta>span{width:24px;height:24px;font-size:15px}.mini-tile{width:57px;height:66px;font-size:47px}.letter-tiles{gap:3px}.letter-tiles span{width:32px;height:40px;font-size:23px}.family-games{grid-template-columns:1fr;gap:13px}.family-card{padding:18px 20px 18px 80px;text-align:left;min-height:87px}.family-card>span{position:absolute;left:21px;top:20px;font-size:34px;margin:0}.family-card strong{font-size:18px;margin-right:38px}.family-card small{font-size:12px}.family-card:after{right:16px;top:22px;font-size:11px}.stats{gap:8px}.stats .stat{display:block;padding:13px 11px}.stat-icon{display:none}.stat strong{font-size:23px}.stat p{font-size:10px}.dialog{padding:22px}.dialog h2{font-size:24px}.field input,.field select{font-size:16px}.field-grid{gap:0 12px}.arena{padding:24px 17px}.question-text,.kids-game .question-text{font-size:25px}.answer-form input,.chat-form input{font-size:16px}.activity-panel{padding:17px}.play-header{gap:7px}.room-badge{font-size:10px;padding:8px}.toast{left:50%;bottom:22px}.tour-card{padding:19px}.footer{gap:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.extra-settings{grid-column:1/-1;border-top:1px dashed #baddcc;margin:3px 0 20px}.extra-settings>.section-heading{font-size:12px;font-weight:800;padding:15px 0;color:#23734f}.extra-settings>.section-heading>span{font-weight:400;color:#6d897b;font-size:11px;margin-left:8px}.extra-settings>.section-heading{margin-bottom:5px}
@media(max-width:360px){.brand{font-size:23px}.brand-mark{display:none}.nav{gap:3px}.nav button{padding:7px 5px}.hero h2{font-size:46px}.hero-art{right:4px;width:85px}.hero-actions{gap:7px}.hero-actions .dark-btn,.hero-actions .outline-btn{font-size:11px}.hero-actions .dark-btn>span{display:none}}
/* Reset the former sidebar's compact layout for the new top navigation. */
.sidebar .brand{display:flex}.brand-word{display:block}.sidebar{border-top:0}.nav{margin-top:0}.nav button{flex-direction:row}.nav button>span{display:inline;font-size:inherit}.nav button>.badge{font-size:10px}
@media(max-width:1050px){.nav button>.badge{display:none}}
@media(max-width:760px){.nav button>span{font-size:12px}.brand-word{display:block}}
@media(max-width:500px){.brand{font-size:25px}.brand-mark{display:none}.nav{gap:3px}.nav button>span{font-size:11px}.sidebar{gap:8px}.hero-art{top:16px;right:17px;width:55px;height:62px}.hero-art .question-tile{width:43px;height:52px;font-size:40px;border-radius:11px;box-shadow:3px 4px 0 var(--ink)}.hero-art .orbit{display:none}.hero .pill{max-width:calc(100% - 50px);font-size:7px;letter-spacing:.7px}}

/* Replay controls need their own row beneath explanatory copy on narrow screens. */
#room-controls{flex-wrap:wrap;align-items:center;margin:24px 0}
#room-controls>p{flex:1 0 100%;text-align:center;line-height:1.6}
#pattern-card .game-title{flex-wrap:wrap;gap:8px}
.answer-explanation{font-size:15px;font-weight:400;line-height:1.6;margin-top:12px}

/* A browser preference for the whole playground, independent of room rules. */
html[data-site-mode="normal"] [data-mode-only="kids"],
html[data-site-mode="kids"] [data-mode-only="normal"]{display:none!important}
.site-mode-switch{display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:24px;background:#fffdf7;flex-shrink:0}
.site-mode-switch button{min-height:36px;padding:7px 15px;border:0;border-radius:20px;background:transparent;color:var(--muted);font-size:13px;font-weight:700}
.site-mode-switch button[aria-pressed="true"]{background:var(--forest);color:white}
/* Colour is owned by the theme tokens in themes.css; Normal mode only tones down layout. */
html[data-site-mode="normal"] .hero .floating,
html[data-site-mode="normal"] .hero .art-word{display:none}
html[data-site-mode="kids"] .filter{font-size:13px;min-height:44px}
html[data-site-mode="kids"] .dark-btn,
html[data-site-mode="kids"] .outline-btn{min-height:48px}
html[data-site-mode="kids"] .game-body p{font-size:14px}
html[data-site-mode="kids"] .hero h2{font-size:clamp(38px,5vw,64px)}
@media(max-width:760px){
    .topbar{height:auto;min-height:66px;gap:10px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
    .top-right{gap:10px}
    .site-mode-switch button{min-height:36px;padding:7px 12px}
}
@media(max-width:500px){
    .topbar .breadcrumb{display:none}
    .top-right{width:100%;justify-content:space-between}
    html[data-site-mode="kids"] .game-grid{grid-template-columns:1fr}
    html[data-site-mode="kids"] .game-body p{min-height:0}
    html[data-site-mode="kids"] .hero h2{font-size:43px}
}

/* Kids activities use native buttons and a scrollable dialog at every viewport size. */
.kids-discover{margin-bottom:40px}
.kids-catalogue{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kids-catalogue-card{min-width:0;display:flex;flex-direction:column;text-align:left;gap:12px;padding:23px;border:2px solid var(--ink);border-radius:22px;background:#e6f5ee;box-shadow:0 4px 0 var(--ink);line-height:1.5}
.kids-catalogue-card:hover{background:#f0f9f4}
.kids-catalogue-card.kids-maths{background:#fff0b3}.kids-catalogue-card.kids-odd{background:#d7f3df}.kids-catalogue-card.kids-reading{background:#ffe2bd}
.kids-card-symbol{font-size:40px}.kids-catalogue-card strong{font-size:21px;line-height:1.25}.kids-catalogue-card>span:not(.kids-card-symbol){font-size:14px}.kids-catalogue-card small{font-size:12px;color:#4a695a}.kids-card-play{margin-top:auto;padding-top:12px;font-weight:800;display:flex;justify-content:space-between}
.kids-game-dialog{width:calc(100% - 32px);max-width:680px;max-height:calc(100dvh - 32px);padding:28px;overscroll-behavior:contain}
.kids-game-dialog .dialog-head{gap:12px;align-items:flex-start}.kids-game-dialog .dialog-head h2{font-size:24px;overflow-wrap:anywhere}.kids-game-dialog .close{flex-shrink:0;min-height:44px;min-width:44px}
#kids-game-content{min-width:0}#kids-game-content h3{font-size:clamp(23px,4vw,32px);line-height:1.3;margin:14px 0;overflow-wrap:anywhere}
.kids-game-symbol{font-size:58px;text-align:center;margin:14px 0}.kids-instructions{font-size:17px;line-height:1.7;color:#4a695a}
.kids-levels{border:0;margin:22px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.kids-levels legend{font-size:15px;font-weight:700;margin-bottom:12px}
.kids-levels label{display:flex;align-items:center;gap:10px;padding:15px;border:2px solid #baddcc;border-radius:14px;cursor:pointer;font-size:16px;min-width:0}.kids-levels label:has(input:checked){border-color:#23734f;background:#edf7f2}.kids-levels input{width:20px;height:20px;accent-color:#23734f;flex-shrink:0}
.kids-practice-note,.kids-audio-note{font-size:13px;color:#516c5e;line-height:1.7;margin:16px 0}.kids-progress{font-size:14px;font-weight:700;color:#23734f;margin-top:16px}
.kids-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.kids-choice{border:2px solid #a6d5be;border-radius:15px;background:#fffdf9;min-height:64px;font-size:21px;padding:15px;overflow-wrap:anywhere}.kids-choice:hover{background:#edf7f2}.kids-choice.answer-correct{background:#e1f5bc;border-color:#527820}
.kids-feedback{min-height:55px;font-size:16px;line-height:1.65;margin:18px 0;color:#416050}
.kids-game-dialog .dark-btn,.kids-game-dialog .outline-btn{min-height:48px;white-space:normal;line-height:1.4}
.memory-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}.memory-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:95px;padding:10px 4px;border:2px solid #23734f;border-radius:15px;background:#e5f4ec;box-shadow:0 3px 0 #23734f}.memory-card>span{font-size:35px}.memory-card small{font-size:12px;overflow-wrap:anywhere}.memory-card.face-up{background:#fff9dd}.memory-card.matched{border-color:#527820;background:#e1f5bc;box-shadow:0 3px 0 #527820}
.reading-story{font-size:clamp(21px,4vw,27px);line-height:1.9;background:#fff5d5;padding:20px;border-radius:16px;margin:18px 0;color:#243b32}
.reading-tools,.kids-end-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.kids-end-actions>*{flex:1}
@media(max-width:1000px){.kids-catalogue{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){
    .kids-catalogue{gap:12px}.kids-catalogue-card{padding:16px;gap:9px;border-radius:17px}.kids-catalogue-card strong{font-size:18px}.kids-card-symbol{font-size:32px}
    .kids-game-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:18px;border-radius:18px}
    .kids-game-dialog .dialog-head h2{font-size:22px}.kids-levels{grid-template-columns:1fr}.kids-choices{gap:10px}.kids-choice{font-size:18px;padding:12px;min-height:60px}
    .memory-board{gap:8px}.memory-card{min-height:78px;border-radius:10px}.memory-card>span{font-size:29px}.memory-card small{font-size:10px}
    .reading-story{padding:15px}.kids-end-actions{flex-direction:column}
}
@media(max-width:360px){.kids-catalogue{grid-template-columns:1fr}.kids-choices{grid-template-columns:1fr}.memory-board{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Ten-level paths stay compact enough for a phone, with separate local explorers. */
.kids-player-field{display:grid;gap:8px;margin-top:20px;font-size:15px;font-weight:700}
.kids-player-field select{min-height:48px;min-width:0;width:100%;font-size:17px;padding:10px;border:2px solid #a6d5be;border-radius:12px;background:#fffdf9}
.kids-player-count{min-width:0;margin:20px 0 0;padding:0;border:0}
.kids-player-count legend{padding:0;margin-bottom:8px;font-size:15px;font-weight:700}
.kids-count-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kids-count{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;min-height:64px;padding:8px 4px;border:2px solid #a6d5be;border-radius:12px;background:#fffdf9;color:#244034;font:inherit;cursor:pointer}
.kids-count strong{font-size:24px;line-height:1}.kids-count small{font-size:12px;font-weight:700}
.kids-count:hover{background:#edf5ee}
.kids-count[aria-pressed="true"]{border-color:#23734f;background:#d7efbc;box-shadow:0 2px 0 #23734f}
.kids-levels.kids-level-map{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.kids-level-map label{position:relative;justify-content:center;min-height:62px;padding:8px;text-align:center}
.kids-level-map label>span{font-size:21px;font-weight:800}.kids-level-map small{display:block;font-size:16px;color:#23734f}
.kids-level-map input{position:absolute;opacity:0;width:1px;height:1px}
.kids-level-map label:has(input:focus-visible){outline:3px solid #f05a28;outline-offset:3px}
.kids-start{margin-top:18px}
.kids-visual{font-size:38px;line-height:1.7;letter-spacing:4px;padding:14px;margin-top:14px;border-radius:16px;background:#fff3ce;overflow-wrap:anywhere;text-align:center}
.kids-choice{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px}
.kids-choice-picture{font-size:38px;line-height:1.4;overflow-wrap:anywhere;max-width:100%}
.memory-board.memory-first{grid-template-columns:repeat(2,minmax(0,1fr))}
.memory-first .memory-card{min-height:112px}
@media(max-width:360px){.kids-levels.kids-level-map{gap:6px}.kids-level-map label{padding:6px}.kids-visual{font-size:30px;letter-spacing:2px}}
@media(max-width:500px){.kids-game-dialog:has(.kids-level-map) .kids-game-symbol{display:none}}

/* Both playgrounds use a green, sky-blue and sunshine palette. */
.kids-catalogue-card.kids-memory{background:#d5edf5}
.kids-catalogue-card.kids-memory:hover{background:#e7f5fa}

/* Phone keyboard open on the answer box: drop the chrome so the question, tiles and input fit above the keyboard. */
html.answer-typing :is(.topbar,.play-header,.question-label,#voice-answer){display:none}
html.answer-typing .content{padding-top:8px}
html.answer-typing .arena{padding:12px 14px}
html.answer-typing .arena-top{margin-bottom:8px}
html.answer-typing .question-text{font-size:20px;line-height:1.3;min-height:0;margin:10px auto}
html.answer-typing .letter-rack{margin:10px auto;gap:5px}
html.answer-typing .letter-tile{width:34px;height:42px;font-size:21px}
html.answer-typing .answer-form{flex-direction:row;margin-top:10px}
html.answer-typing .answer-form .dark-btn{padding:10px 14px;flex-shrink:0}
html.answer-typing .answer-feedback{margin-top:6px}
@media(max-width:560px){html.answer-typing .sidebar{display:none}html.answer-typing .main{padding-bottom:0}}

/* Safari Spotter: a game-drive checklist that sits on the phone in the car, so tap targets and sticky controls matter. */
.kids-catalogue-card.kids-safari{grid-column:1/-1;background:#f6e3b4}
.kids-catalogue-card.kids-safari:hover{background:#fbedc9}
html[data-theme] .kids-catalogue-card.kids-safari{background:var(--card-b)}
.safari-dialog{max-width:720px;padding-bottom:0}
.safari-dialog .filter{font-size:14px;min-height:44px;padding:9px 15px}
.safari-dialog .filter[aria-pressed="true"]{background:var(--forest);color:var(--button-ink,#fff);border-color:var(--forest)}
.safari-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.safari-tabs .filter{font-size:16px;min-height:50px;font-weight:700}
.safari-meter{height:14px;border-radius:99px;background:var(--soft,#e5eddc);overflow:hidden;margin:14px 0 6px}
.safari-meter span{display:block;height:100%;background:var(--forest);border-radius:inherit;transition:width .3s}
.safari-count-line{font-size:14px;font-weight:700;color:var(--forest)}
.safari-summary{padding:16px;border:2px solid var(--line);border-radius:18px;background:var(--surface,#fffdf6);margin:16px 0}
.safari-rank{display:flex;align-items:center;gap:12px}.safari-rank-emoji{font-size:40px}
.safari-rank strong{display:block;font-size:20px}.safari-rank small{font-size:13px;color:var(--muted)}
.safari-big5{display:flex;gap:8px;margin:12px 0}
.safari-big5>span{filter:grayscale(1);opacity:.35}.safari-big5>span.found{filter:none;opacity:1}
.safari-big5 .safari-pic{width:46px;height:46px}.safari-big5>span:not(.found) img{animation:none}
.safari-scores{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;padding:0;margin:0;font-size:14px}.safari-scores li{display:flex;align-items:center;gap:6px}
.safari-scores .safari-pic,.safari-spotters .safari-pic{width:28px;height:28px}
.safari-spotters{position:sticky;top:-28px;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;padding:10px 0;margin:0 0 6px;background:var(--surface,#fffaf0)}
.safari-spotters legend{float:left;grid-column:1/-1;font-size:14px;font-weight:700;margin-bottom:6px}
.safari-spotters label{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:48px;padding:6px 8px;border:2px solid var(--line);border-radius:99px;font-size:16px;white-space:nowrap;cursor:pointer}
.safari-spotters label:has(input:checked){border-color:var(--forest);background:var(--soft,#e5eddc);font-weight:700}
.safari-spotters input{position:absolute;opacity:0;width:1px;height:1px}
.safari-spotters label:has(input:focus-visible){outline:3px solid var(--focus,#f05a28);outline-offset:2px}
.safari-kit-item input{accent-color:var(--forest);width:22px;height:22px;flex-shrink:0}
.safari-filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.safari-hide{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px}
.safari-list,.safari-kit,.safari-badges{list-style:none;padding:0;margin:10px 0;display:grid;gap:10px}
.safari-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border:2px solid var(--line);border-radius:16px;background:var(--surface,#fffdf6)}
.safari-item.spotted{background:#e1f0c9;border-color:#527820}
.safari-item-body strong{font-size:18px;margin-right:8px}.safari-item-body p{font-size:14px;line-height:1.55;margin-top:4px}
.safari-item-body small{display:block;font-size:12px;margin-top:4px;color:var(--muted)}
.safari-points{font-size:12px;color:#a86a00;white-space:nowrap}
.safari-fact{background:#fff3ce;border-radius:10px;padding:6px 10px}
.safari-dialog .safari-spot{min-height:52px;padding:10px 14px;font-size:15px}
.safari-tally{display:flex;align-items:center;gap:6px}.safari-tally span{min-width:28px;text-align:center;font-size:20px;font-weight:800}
.safari-dialog .safari-tally .outline-btn{min-width:44px;min-height:44px;padding:0;font-size:22px;margin:0}
.safari-item.just-spotted{animation:safari-pop .5s ease-out}
@keyframes safari-pop{40%{transform:scale(1.04)}}
/* Each picture moves the way its animal does; transforms only, so dozens can run smoothly on a phone. */
.safari-pic{display:grid;place-items:center;width:72px;height:72px;flex-shrink:0}
.safari-pic img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 90%;animation:var(--safari-motion,none) var(--safari-speed,2.4s) ease-in-out var(--safari-delay,0s) infinite alternate}
.safari-pic-emoji{font-size:36px;line-height:1}
.safari-item.spotted .safari-pic{position:relative}
.safari-item.spotted .safari-pic::after{content:'✓';position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#527820;color:#fff;font-size:14px;font-weight:800}
.safari-item.just-spotted .safari-pic{animation:safari-celebrate .9s ease-out}
@keyframes safari-celebrate{0%{transform:scale(.6) rotate(-20deg)}45%{transform:scale(1.35) rotate(12deg)}70%{transform:scale(.95) rotate(-4deg)}100%{transform:none}}
.motion-prowl{--safari-motion:safari-prowl;--safari-speed:2.6s}
.motion-dash{--safari-motion:safari-prowl;--safari-speed:.7s}
.motion-stomp{--safari-motion:safari-stomp;--safari-speed:1.1s}
.motion-sway{--safari-motion:safari-sway;--safari-speed:2.8s}
.motion-bound{--safari-motion:safari-bound;--safari-speed:.9s}
.motion-pronk{--safari-motion:safari-pronk;--safari-speed:.75s}
.motion-swing{--safari-motion:safari-swing;--safari-speed:1.6s}
.motion-scurry{--safari-motion:safari-scurry;--safari-speed:.45s}
.motion-fly{--safari-motion:safari-fly;--safari-speed:1.4s}
.motion-peck{--safari-motion:safari-peck;--safari-speed:1s}
.motion-swim{--safari-motion:safari-swim;--safari-speed:2.6s}
.motion-float{--safari-motion:safari-float;--safari-speed:3s}
.motion-slither{--safari-motion:safari-slither;--safari-speed:1.8s}
.motion-crawl{--safari-motion:safari-crawl;--safari-speed:4s}
.motion-wiggle{--safari-motion:safari-wiggle;--safari-speed:.9s}
.motion-pulse{--safari-motion:safari-pulse;--safari-speed:2.2s}
.motion-drip{--safari-motion:safari-drip;--safari-speed:1.3s}
@keyframes safari-prowl{from{transform:translateX(-8%) rotate(-2deg)}50%{transform:translateX(0) translateY(-3%)}to{transform:translateX(8%) rotate(2deg)}}
@keyframes safari-stomp{from{transform:translateY(0) scale(1.03,.97)}to{transform:translateY(-6%) scale(.98,1.02)}}
@keyframes safari-sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes safari-bound{from{transform:translateY(0) scale(1.04,.96)}60%{transform:translateY(-16%) rotate(-4deg)}to{transform:translateY(-18%) rotate(3deg)}}
@keyframes safari-pronk{from{transform:translateY(0) scale(1.05,.95)}to{transform:translateY(-26%)}}
@keyframes safari-swing{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.motion-swing img{transform-origin:50% 0}
@keyframes safari-scurry{from{transform:translateX(-6%) translateY(0)}50%{transform:translateX(0) translateY(-5%)}to{transform:translateX(6%) translateY(0)}}
@keyframes safari-fly{from{transform:translateY(4%) rotate(-6deg)}to{transform:translateY(-12%) rotate(6deg)}}
@keyframes safari-peck{from,40%{transform:rotate(0)}to{transform:rotate(16deg)}}
@keyframes safari-swim{from{transform:translateY(6%) rotate(-3deg)}to{transform:translateY(-4%) rotate(3deg)}}
@keyframes safari-float{from{transform:translate(-6%,4%) rotate(-14deg)}to{transform:translate(6%,-8%) rotate(14deg)}}
@keyframes safari-slither{from{transform:translateX(-6%) skewX(-8deg)}to{transform:translateX(6%) skewX(8deg)}}
@keyframes safari-crawl{from{transform:translateX(-10%)}to{transform:translateX(10%)}}
@keyframes safari-wiggle{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes safari-pulse{from{transform:scale(.94)}to{transform:scale(1.06)}}
@keyframes safari-drip{from{transform:translateY(-8%) scale(.92,1.08)}to{transform:translateY(6%) scale(1.06,.94)}}
.safari-empty{padding:16px;text-align:center;font-size:15px}
.safari-badge-panel{margin:16px 0}.safari-badge-panel .section-heading{font-weight:700;font-size:16px;min-height:44px;display:flex;align-items:center}
.safari-badges{grid-template-columns:1fr 1fr}
.safari-badges li{display:flex;gap:10px;align-items:center;padding:10px;border:2px dashed var(--line);border-radius:14px;opacity:.6}
.safari-badges li.earned{opacity:1;border-style:solid;border-color:var(--forest);background:var(--soft,#e5eddc)}
.safari-badges span{font-size:28px}.safari-badges strong{display:block;font-size:14px}.safari-badges small{font-size:12px;color:var(--muted)}
.safari-kit-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px solid var(--line);border-radius:16px;background:var(--surface,#fffdf6);cursor:pointer;min-height:60px}
.safari-kit-item:has(input:checked){background:#e1f0c9;border-color:#527820}
.safari-kit-item:has(input:checked) strong{text-decoration:line-through;text-decoration-thickness:2px}
.safari-kit-item strong{display:block;font-size:17px}.safari-kit-item small{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.safari-guess{margin:20px 0;padding:16px;border-radius:18px;background:#fff3ce}
.safari-guess h3{font-size:20px}.safari-guess p{font-size:14px;margin-top:6px}
.safari-guess-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.safari-guess-result{font-weight:700;color:var(--forest)}
.safari-dialog .kids-end-actions{padding-bottom:24px}
.safari-feedback{position:sticky;bottom:0;z-index:2;margin:0 -28px;padding:0 28px;max-height:0;overflow:hidden;font-size:16px;font-weight:700;line-height:1.5;background:var(--forest);color:var(--button-ink,#fff);border-radius:16px 16px 0 0;transition:max-height .25s,padding .25s}
.safari-feedback.visible{max-height:220px;padding:14px 28px 20px}
html[data-theme="midnight"] :is(.safari-item.spotted,.safari-kit-item:has(input:checked)){background:#264731;border-color:#8bb279}
html[data-theme="midnight"] :is(.safari-fact,.safari-guess){background:var(--card-b)}
html[data-theme="midnight"] .safari-points{color:#f4c779}
@media(prefers-reduced-motion:reduce){.safari-item.just-spotted,.safari-item.just-spotted .safari-pic,.safari-pic img{animation:none}.safari-meter span,.safari-feedback{transition:none}}
@media(max-width:500px){
    .safari-spotters{top:-18px}.safari-feedback{margin:0 -18px;padding:0 18px}.safari-feedback.visible{padding:12px 18px 18px}.safari-spotters label{font-size:15px}
    .safari-item{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:12px}
    .safari-item>.safari-spot,.safari-item>.safari-tally{grid-column:1/-1}
    .safari-item>.safari-spot{width:100%}.safari-item>.safari-tally{justify-content:flex-end}
    .safari-item>.safari-pic{width:60px;height:60px}.safari-badges,.safari-guess-fields{grid-template-columns:1fr}
}
/* Real photos for identifying things in the bush: full width on top of each card, a pair side by side for trees and look-alikes. */
.safari-photos{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:-4px -4px 2px}
.safari-photos figure{margin:0;position:relative;border-radius:12px;overflow:hidden;background:var(--soft,#eef3e6)}
.safari-photos img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.safari-photos figure:only-child img{aspect-ratio:16/10}
.safari-photos figcaption{position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:999px;background:rgba(20,40,25,.78);color:#fff;font-size:12px;font-weight:700}
.safari-photo-missing img{visibility:hidden}.safari-photo-missing::after{content:'📷 Photo needs signal';position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--muted)}
.safari-item.spotted .safari-photos img{filter:saturate(1.08)}
.safari-offline{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:var(--soft,#eef3e6);font-size:14px;line-height:1.45}
.safari-credits{margin:14px 0 18px;font-size:12px;color:var(--muted);text-align:center}.safari-credits a{color:inherit}
.safari-kit-pic .safari-pic{width:52px;height:52px}.safari-kit-pic.is-photo img{border-radius:12px}

.memory-card.mismatch{animation:memory-mismatch-pulse .6s ease-in-out 2}
@keyframes memory-mismatch-pulse{0%,100%{outline:3px solid transparent;outline-offset:2px}50%{outline:3px solid #dc8634;outline-offset:2px;border-color:#dc8634}}
.memory-card.match-shimmer{position:relative;overflow:hidden}
.memory-card.match-shimmer::after{content:'';position:absolute;inset:-50%;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,245,180,.35) 43%,rgba(255,255,255,.85) 50%,rgba(255,245,180,.35) 57%,transparent 65%);animation:memory-match-shimmer 1s ease-in-out both}
@keyframes memory-match-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.memory-card.match-shimmer::after{display:none}}
.kids-avatar-players{display:grid;gap:16px;margin:18px 0}
.kids-avatar-player{min-width:0;margin:0;padding:12px;border:1px solid #a6d5be;border-radius:14px}
.kids-avatar-player legend{padding:0 6px;font-weight:700}
.kids-avatar-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kids-avatar{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;min-height:70px;padding:8px 4px;border:2px solid transparent;border-radius:12px;background:#edf5ee;color:#244f39}
.kids-avatar>span{font-size:30px}.kids-avatar small{font-size:12px}
.kids-avatar[aria-pressed="true"]{border-color:#23734f;background:#d7efbc;box-shadow:0 2px 0 #23734f}
.kids-avatar:disabled{opacity:.35;cursor:not-allowed}
.kids-spoken-turns{display:flex;align-items:center;gap:10px;min-height:44px}
.kids-spoken-turns input{width:20px;height:20px;accent-color:#23734f}
.kids-current-turn{display:inline-block;font-weight:800}
#kids-game-content,.memory-board{position:relative}
.kids-turn-flash{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:15px;background:rgba(255,253,240,.82);color:#244f39;pointer-events:none;opacity:0;animation:kids-turn-flash 2s ease-in-out forwards}
.kids-turn-flash span{font-size:96px;line-height:1}.kids-turn-flash strong{font-size:clamp(20px,4vw,28px)}
/* Question screens can be taller than the viewport, so keep the animal near the top where focus lands. */
#kids-game-content>.kids-turn-flash{justify-content:flex-start;padding-top:min(18vh,140px)}
@keyframes kids-turn-flash{0%{opacity:0}50%{opacity:1}100%{opacity:0;visibility:hidden}}
/* Correct answers pop a big star with varied praise. Fixed to the viewport so tall question screens still show it. */
.kids-celebration{position:fixed;left:50%;top:50%;z-index:3;width:min(300px,70vw);padding:22px 16px 26px;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:28px;background:#fffdf0;color:#244f39;box-shadow:0 0 0 4px #ffd43b,0 12px 40px rgba(36,79,57,.3);pointer-events:none;transform:translate(-50%,-50%);animation:kids-celebration-fade 1.4s ease-in-out forwards}
.kids-celebration-star{font-size:120px;line-height:1;filter:drop-shadow(0 0 18px #ffd43b);animation:kids-celebration-pop .7s cubic-bezier(.3,1.6,.5,1) both}
.kids-celebration strong{font-size:clamp(26px,6vw,34px);animation:kids-celebration-pop .7s .12s cubic-bezier(.3,1.6,.5,1) both}
.kids-celebration i{position:absolute;font-size:26px;font-style:normal;opacity:0;animation:kids-celebration-twinkle 1s ease-in-out both}
@keyframes kids-celebration-pop{0%{transform:scale(.1) rotate(-40deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes kids-celebration-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}22%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.04);visibility:hidden}}
@keyframes kids-celebration-twinkle{0%{transform:scale(0);opacity:0}35%{transform:scale(1.25);opacity:1}100%{transform:scale(0) rotate(180deg);opacity:0}}
/* The praise word is also in the spoken feedback, so reduced motion can skip the pop-up entirely. */
@media(prefers-reduced-motion:reduce){.kids-celebration{display:none}}

/* Seek & Find: a busy SVG cartoon crowd. The picture scales with its frame and can zoom for small screens. */
.kids-catalogue-card.kids-seek{grid-column:span 2;background:#e3dcfb}
.kids-catalogue-card.kids-seek:hover{background:#eee9fd}
.kids-catalogue-card.kids-seek~.kids-safari{grid-column:span 2}
html[data-theme] .kids-catalogue-card.kids-seek{background:var(--card-c)}
@media(max-width:1000px){.kids-catalogue-card.kids-seek,.kids-catalogue-card.kids-seek~.kids-safari{grid-column:1/-1}}
.seek-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 14px;padding:0}
.seek-list li{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:6px 8px 4px;border:2px solid #baddcc;border-radius:16px;background:#fffdf9;color:#4a695a}
.seek-list small{font-size:12px;font-weight:800}
.seek-list li.current{border-color:#23734f;background:#d4fa59;color:#243b32;box-shadow:0 3px 0 #23734f}
.seek-list li.found{border-color:#a6d5be;background:#e5f4ec;color:#23734f}
.seek-list li.found .seek-thumb{opacity:.55}
.seek-list li.bonus{border-style:dashed;border-color:#e0a800;background:#fff6d1;color:#7a5a00}
.seek-list li.bonus.current{border-style:solid;background:#ffe27a;box-shadow:0 3px 0 #b58900}
.seek-list li.bonus.found{border-style:solid;background:#e5f4ec;border-color:#a6d5be;color:#23734f}
.seek-thumb{display:block;width:auto;height:58px;max-width:96px}
.seek-list-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* On wide screens the list, tools and messages sit beside the picture, and the picture grows to fill the height that is left. */
.kids-game-dialog:has(.seek-board){max-width:1240px}
@media(min-width:900px) and (min-aspect-ratio:1/1){
    .kids-game-dialog:has(.seek-board){padding-block:20px}
    #kids-game-content:has(.seek-board) h3{font-size:24px;margin:2px 0 10px}
    .seek-board{display:grid;grid-template-columns:216px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"list picture" "tools picture" "note picture" "feedback picture";column-gap:18px}
    .seek-board .seek-list{grid-area:list;display:grid;grid-template-columns:repeat(2,1fr);align-content:start;margin:0 0 12px}
    .seek-board .seek-thumb{height:46px;max-width:76px}
    .seek-board .seek-frame{grid-area:picture;width:min(100%,calc((100dvh - 210px)*4/3));justify-self:center;align-self:start}
    .seek-board .reading-tools{grid-area:tools;flex-direction:column;align-items:stretch;margin:0}
    .seek-board .kids-audio-note{grid-area:note}
    .seek-board .kids-feedback{grid-area:feedback}
}
.seek-frame{overflow:hidden;border:3px solid #23734f;border-radius:18px;box-shadow:0 4px 0 #23734f;background:#9bd982}
.seek-frame.zoomed{overflow:auto;aspect-ratio:4/3;max-height:72vh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.seek-scene{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.seek-frame.zoomed .seek-scene{width:250%;max-width:none}
.seek-person{cursor:pointer;outline:none}
.seek-person:focus-visible .seek-hit{fill:rgba(255,212,59,.45);stroke:#23734f;stroke-width:2.5}
.seek-wiggle{transform-box:fill-box;transform-origin:50% 100%}
.seek-person.seek-miss .seek-wiggle{animation:seek-miss .45s ease-in-out}
.seek-person.seek-pop .seek-wiggle{animation:seek-pop .6s ease-out}
@keyframes seek-miss{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes seek-pop{40%{transform:scale(1.3)}}
.seek-found-ring{fill:rgba(255,253,240,.18);stroke:#ffd43b;stroke-width:3;paint-order:stroke;filter:drop-shadow(0 0 1.5px #23734f)}
.seek-spotlight{fill:rgba(255,245,180,.2);stroke:#ffd43b;stroke-width:3.5;stroke-dasharray:9 6;animation:seek-hint-glow 1.4s ease-in-out infinite alternate}
@keyframes seek-hint-glow{to{stroke-opacity:.55;fill-opacity:.5}}
@media(max-width:500px){.seek-frame.zoomed{aspect-ratio:1}.seek-list{gap:6px}.seek-list li{min-width:48px;padding:4px 5px 3px}.seek-thumb{height:44px}}
@media(prefers-reduced-motion:reduce){.seek-person.seek-miss .seek-wiggle,.seek-person.seek-pop .seek-wiggle,.seek-spotlight{animation:none}}

/* Scene previews keep their habitat colours in every site theme. */
.kids-levels.seek-level-map{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.seek-level-map label{overflow:hidden;padding:0;display:block}
.seek-level-map label>span{display:block;font-size:13px}
.seek-level-thumb{display:block;width:100%;height:auto;aspect-ratio:4/3}
.seek-level-map strong{display:block;padding:5px 3px;text-transform:capitalize;font-size:13px}
.seek-level-map small{padding:0 3px 6px;font-size:12px}
.seek-level-map label:has(input:checked){outline:3px solid var(--forest,#23734f);outline-offset:2px}
.memory-card>span{font-size:44px;line-height:1.15}
.memory-card small{line-height:1.2}
.maths-pictures{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0}
.maths-pictures>strong{font-size:30px}
.maths-group{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:44%;padding:12px;background:var(--soft,#e5f4ec);border-radius:16px}
.maths-group>span{position:relative}
.maths-group>span>svg,.maths-group>span>img{display:block;width:36px;height:40px;object-fit:contain}
.maths-group .taken-away{opacity:.4}
.maths-group .taken-away::after{content:'';position:absolute;top:50%;left:0;right:0;border-top:3px solid currentColor;transform:rotate(-35deg)}
.kids-answer-pad{max-width:390px;margin:14px auto}
.kids-answer-entry{display:block;min-height:56px;text-align:center;padding:8px;font-size:30px;font-weight:800;letter-spacing:5px;border:2px solid var(--forest,#23734f);border-radius:12px;margin-bottom:10px;background:var(--surface,#fff)}
.kids-input-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kids-input-keys button{min-height:48px;padding:8px;font-size:23px}
.word-builder{max-width:520px}
.word-builder .kids-input-keys{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
.word-builder button:disabled{opacity:.4}
@media(max-width:500px){
    .kids-levels.seek-level-map{grid-template-columns:repeat(2,minmax(0,1fr))}
    .memory-card>span{font-size:36px}
    .maths-group>span>svg,.maths-group>span>img{width:27px;height:30px}
}
/* Tablet landscape: reserve the height for play, with clues alongside the scene. */
@media(min-width:700px) and (orientation:landscape){
    .kids-game-dialog:has(.memory-board),.kids-game-dialog:has(.seek-board),.kids-game-dialog:has(.number-pad){width:calc(100% - 24px);max-width:1240px;padding:14px 20px;max-height:calc(100dvh - 24px)}
    .kids-game-dialog:has(.memory-board) .dialog-head,.kids-game-dialog:has(.seek-board) .dialog-head,.kids-game-dialog:has(.number-pad) .dialog-head{margin-bottom:4px}
    #kids-game-content:has(.memory-board) h3,#kids-game-content:has(.seek-board) h3{font-size:22px;margin:4px 0}
    #kids-game-content:has(.memory-board) .kids-instructions{margin:4px 0}
    .memory-board{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:10px}
    .memory-board.memory-first{grid-template-columns:repeat(4,minmax(0,1fr))}
    .memory-card,.memory-first .memory-card{min-height:82px;height:clamp(82px,calc((100dvh - 340px)/4),130px);padding:5px}
    .seek-board{display:grid;grid-template-columns:188px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"list picture" "tools picture" "note picture" "feedback picture";gap:8px 14px}
    .seek-board .seek-list{grid-area:list;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0}
    .seek-board .seek-list li{min-width:0;padding:3px;border-radius:10px}
    .seek-board .seek-thumb{height:34px;max-width:48px}
    .seek-board .seek-list small{font-size:10px}
    .seek-board .seek-frame{grid-area:picture;width:min(100%,calc((100dvh - 192px)*4/3));justify-self:center;align-self:start}
    .seek-board .reading-tools{grid-area:tools;display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0}
    .seek-board .reading-tools button{font-size:12px;min-height:44px;padding:5px}
    .seek-board .kids-audio-note{grid-area:note;font-size:11px;margin:0}
    .seek-board .kids-feedback{grid-area:feedback;font-size:12px;margin:0;min-height:0}
    #kids-game-content:has(.number-pad){display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:24px;align-content:start}
    #kids-game-content:has(.number-pad)>*{grid-column:1}
    /* The turn flash is absolutely positioned, so a grid column would shrink it to the left half. */
    #kids-game-content:has(.number-pad)>.kids-turn-flash{grid-column:auto}
    #kids-game-content:has(.number-pad) .number-pad{grid-column:2;grid-row:1 / span 6;align-self:end;width:100%}
    #kids-game-content:has(.number-pad) .reading-story{font-size:18px;margin:4px 0}
    #kids-game-content:has(.number-pad) h3{margin:6px 0;font-size:28px}
    #kids-game-content:has(.number-pad) .maths-pictures{margin:8px 0}
    #kids-game-content:has(.number-pad) .kids-feedback{margin:4px 0;min-height:0}
    #kids-game-content:has(.number-pad) [data-kids-control="next"]{grid-column:2}
    #kids-game-content:has(.memory-board) .kids-feedback{min-height:0;margin:10px 0 0}
    .number-pad [data-kids-control="check"]{font-size:19px}
}
.seek-difficulties{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.seek-difficulties button{flex:1;min-width:140px}
.seek-difficulties [aria-pressed="true"]{outline:3px solid var(--forest,#23734f);outline-offset:1px;font-weight:800}
@media(orientation:portrait) and (min-width:600px){
    #kids-game-content:has(.seek-board) h3{font-size:24px;margin:8px 0}
    .kids-game-dialog:has(.seek-board){padding:20px}
}

@media(min-width:700px) and (orientation:landscape) and (max-height:650px){
    .memory-board{grid-template-columns:repeat(8,minmax(0,1fr))}
    .seek-board{grid-template-columns:240px minmax(0,1fr)}
    .seek-board .seek-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Keep every navigation destination visible on small screens. */
@media(max-width:760px){.sidebar{flex-wrap:wrap;height:auto}.sidebar .nav{width:100%;flex-wrap:wrap;gap:6px}.sidebar .nav button{min-height:44px;flex:1 1 auto}.sidebar .nav button>span{white-space:normal}}
#setup-dialog{max-height:90dvh}#setup-dialog[open]{display:flex;flex-direction:column}#setup-dialog>.dialog-head,#setup-summary{flex-shrink:0}#setup-form{display:flex;flex-direction:column;max-height:60dvh;min-height:0;gap:12px}#setup-form .setup-fields{overflow:auto;min-height:0;padding:5px}#setup-submit{flex-shrink:0}