/* Rootlet Kids game kit. No external fonts, scripts or trackers (ICO Children's Code). */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#17231B;-webkit-user-select:none;user-select:none;overflow:hidden}
body.space{background:linear-gradient(180deg,#1E3A6E 0%,#3B6FB5 70%,#7FB6E8 100%)}
body.day{background:linear-gradient(180deg,#FFF6DF 0%,#FFFBF0 100%)}
#app{position:relative;height:100%;display:flex;flex-direction:column;padding:14px 16px 18px}
.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800;font-size:15px}
.pill{background:rgba(255,255,255,.2);color:#fff;border-radius:20px;padding:7px 13px;display:flex;align-items:center;gap:8px;border:0;font:inherit;cursor:pointer}
body.day .pill{background:#fff;color:#17331F;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.fuel{width:min(160px,28vw);height:12px;border-radius:8px;background:rgba(255,255,255,.3);overflow:hidden}
body.day .fuel{background:#EEF2EF}
.fuel i{display:block;height:100%;width:0;background:linear-gradient(90deg,#F5B83D,#F27A5E);transition:width .4s}
.title{color:#fff;text-align:center;font-weight:800;font-size:clamp(16px,2.6vw,22px);margin:8px 0 4px}
body.day .title{color:#17331F}
.card{background:#fff;border-radius:22px;padding:clamp(14px,3vw,26px);text-align:center;box-shadow:0 8px 0 rgba(0,0,0,.14);margin:10px auto 0;width:min(560px,100%)}
.qno{font-size:14px;font-weight:700;color:#66756b}
.q{font-size:clamp(34px,8vw,64px);font-weight:900;color:#17331F;line-height:1.1;margin:6px 0}
.q.small{font-size:clamp(20px,4.4vw,32px)}
.hint{font-size:14px;font-weight:600;color:#66756b;min-height:18px}
.seq{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.seq span{width:clamp(48px,9vw,70px);height:clamp(48px,9vw,70px);border-radius:14px;border:3px solid #8B6FD6;display:flex;align-items:center;justify-content:center;font-size:clamp(26px,5vw,40px);color:#4FA3E0;background:#fff}
.seq span.ask{border-style:dashed;color:#8B6FD6;font-weight:900}
.opts{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(640px,100%);align-self:center}
.opts.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:520px){.opts{grid-template-columns:repeat(2,1fr)}}
.opt{border:0;border-radius:20px;min-height:clamp(64px,13vh,96px);font:inherit;font-size:clamp(22px,5vw,38px);font-weight:900;color:#fff;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.2);transition:transform .08s;padding:6px}
.opt.txt{font-size:clamp(16px,3.4vw,22px)}
.opt:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.c0{background:#4FA3E0}.c1{background:#2F8F4E}.c2{background:#F27A5E}.c3{background:#8B6FD6}.c4{background:#F5B83D;color:#3b2a00}
.opt.wrong{animation:shake .35s;opacity:.45}
.opt.right{outline:5px solid #fff;outline-offset:-5px}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.rocket{position:absolute;left:4%;width:clamp(56px,9vw,100px);transition:bottom .6s ease;pointer-events:none}
.moon{position:absolute;right:5%;top:22%;width:clamp(56px,10vw,110px);pointer-events:none}
.board{display:grid;gap:12px;width:min(720px,100%);margin:14px auto 0}
.tile{background:#fff;border:3px solid #cfe3d5;border-radius:16px;padding:12px 10px;font-weight:800;font-size:clamp(15px,3vw,20px);cursor:pointer;text-align:center;color:#17331F}
.tile.sel{border-color:#F5B83D;background:#FFF6DF}
.tile.done{visibility:hidden}
.tile.ok{border-color:#2F8F4E;background:#EEF6F0;cursor:default}
.groups{display:grid;gap:12px;width:min(720px,100%);margin:auto auto 0}
.group{border-radius:18px;padding:14px;min-height:110px;color:#fff;font-weight:900;font-size:clamp(16px,3vw,22px);cursor:pointer;border:0;font-family:inherit;display:flex;flex-direction:column;gap:6px;align-items:center}
.group small{font-weight:700;font-size:13px;opacity:.95}
.slot{min-height:64px;border:3px dashed #F27A5E;border-radius:16px;background:#fff;display:flex;flex-wrap:wrap;gap:8px;padding:8px;justify-content:center;align-items:center;width:min(720px,100%);margin:14px auto 0}
.slot .tile{border-color:#2F8F4E;background:#EEF6F0}
.end{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(23,51,31,.55);padding:16px}
.end .card{max-width:440px}
.end h2{font-size:30px;font-weight:900;margin:6px 0}
.end .stars{font-size:38px;color:#F5B83D;letter-spacing:4px}
.btn{display:inline-block;border:0;border-radius:14px;padding:13px 22px;font:inherit;font-weight:800;font-size:17px;cursor:pointer;margin-top:14px;background:#2F8F4E;color:#fff;box-shadow:0 4px 0 #1F6B3A}
.err{color:#fff;font-weight:700;text-align:center;margin-top:30%}
.pill{white-space:nowrap}
p.hint{text-align:center;margin-top:2px}
@media (max-width:520px){.hud{font-size:13px;gap:6px}.pill{padding:6px 10px}.pill .lbl{display:none}.fuel{width:22vw}}
/* Big screens: keep the game in a comfortable centred stage instead of stretching edge to edge */
body{display:flex;align-items:center;justify-content:center}
#app{width:100%;max-width:1100px;max-height:780px}
/* Phones: the fuel bar shows progress, so the rocket and moon step aside to keep answers clear */
@media (max-width:520px){.rocket,.moon{display:none}}
/* Match game (1 Nov): fit every pair inside the lesson embed instead of cutting off the bottom rows */
#app{overflow-y:auto}
.mboard{flex:1 1 auto;min-height:0;margin-top:10px;margin-bottom:0;gap:10px}
.mboard>.board{margin:0;width:100%;min-height:0;grid-auto-rows:minmax(30px,1fr);gap:8px}
.mboard .tile{display:flex;align-items:center;justify-content:center;padding:4px 8px;min-height:0}
@media (max-height:560px){#app{padding:8px 10px 10px}.hud{font-size:13px}.pill{padding:5px 11px}.title{margin:4px 0 0;font-size:16px}p.hint{font-size:12px;min-height:0}.mboard{gap:8px;margin-top:6px}.mboard>.board{gap:6px}.mboard .tile{border-width:2px;border-radius:12px;font-size:clamp(13px,4.4vh,18px)}}
@media (max-height:260px){p.hint{display:none}.title{font-size:14px;margin:2px 0 0}}
/* Tiny embeds (phone, inside the lesson page): squeeze everything so the whole game shows */
@media (max-height:300px){.card{padding:6px 10px;margin-top:4px;border-radius:16px;box-shadow:0 4px 0 rgba(0,0,0,.14)}.qno{font-size:11px}.q{font-size:26px;margin:2px 0}.q.small{font-size:16px}.hint{font-size:11px;min-height:0}.opts,.opts.two{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}.opt{min-height:40px;font-size:18px;border-radius:12px;box-shadow:0 3px 0 rgba(0,0,0,.2)}.opt.txt{font-size:12px}.group{min-height:48px;padding:6px;font-size:13px;border-radius:12px}.group small{font-size:10px}.groups{gap:6px}.board{gap:6px;margin-top:6px}.tile{padding:5px 6px;font-size:12px;border-width:2px;border-radius:10px}.slot{min-height:36px;margin-top:6px;padding:4px}}
@media (max-height:300px){#app{padding:6px 8px 6px}.mboard{margin-top:4px;gap:6px}.mboard>.board{grid-auto-rows:minmax(20px,1fr);gap:4px}.mboard .tile{font-size:12px;padding:2px 6px}.hud{font-size:12px}.pill{padding:3px 9px}.title{font-size:13px;margin:2px 0 0}.tile{padding:3px 6px}.group{min-height:40px}}

/* Shape puzzles (3 Nov): "ink": true in a set shows shapes in black on white buttons, so black and white shading reads correctly */
body.ink .opt,body.ink .seq span,body.ink .q{font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",system-ui,sans-serif}
body.ink .opt{background:#fff;color:#17231B;border:4px solid #4FA3E0;box-shadow:0 6px 0 rgba(0,0,0,.12);font-weight:400}
body.ink .opt.c1{border-color:#2F8F4E}body.ink .opt.c2{border-color:#F27A5E}body.ink .opt.c3{border-color:#8B6FD6}body.ink .opt.c4{border-color:#F5B83D}
body.ink .opt.txt{font-weight:800}
body.ink .opt.right{outline:5px solid #2F8F4E;outline-offset:-9px;background:#EEF6F0}
body.ink .seq span{width:auto;min-width:clamp(48px,9vw,70px);padding:0 8px;color:#17231B;letter-spacing:2px}
body.ink .seq span.ask{color:#8B6FD6}
body.ink .tile{font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",system-ui,sans-serif;font-size:clamp(22px,5vw,34px);font-weight:400;line-height:1.1;padding:6px 10px}
@media (max-height:300px){body.ink .tile{font-size:20px;padding:2px 8px}}