*{box-sizing:border-box}html{background:#fffaf0;color:#414458}body{margin:0;background:#fffaf0;font-family:ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,.tile:focus-visible{outline:3px solid #8b82bd;outline-offset:4px}main{min-height:100svh;max-width:640px;margin:auto;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center}header{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:52px;margin-bottom:8px;flex-shrink:0}.wordmark{font-size:clamp(35px,5vh,46px);font-weight:950;letter-spacing:-3px;line-height:1.1;transform:rotate(-3deg)}.wordmark span:nth-child(1){color:#ed35a6}.wordmark span:nth-child(2){color:#2460d4}.wordmark span:nth-child(3){color:#fe7332}.wordmark span:nth-child(4){color:#04adc3}.wordmark span:nth-child(5){color:#16a899}.wordmark span:nth-child(6){color:#f9b126}.wordmark span:nth-child(7){color:#7937e7}.icon-button{border:0;background:transparent;padding:12px;color:#737f9f;width:48px;height:48px}#sound>svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.play{--tile:min(340px,calc(100vw - 32px),max(132px,calc(33.333svh - 95px)));position:relative;display:flex;flex-direction:column;flex-shrink:0}.row{position:relative}.tile{width:var(--tile);height:var(--tile);aspect-ratio:1 / 1;overflow:hidden;touch-action:pan-y;position:relative;cursor:grab;user-select:none;-webkit-user-select:none}.tile:active{cursor:grabbing}.track{width:300%;height:100%;display:flex;transform:translateX(-33.333333%);will-change:transform}.part{flex:0 0 33.333333%;height:100%;min-width:0}.character-svg{display:block;width:100%;height:100%;pointer-events:none;overflow:hidden}#swipe-hint{font-size:14px;color:#747487;margin:8px 0 4px}.series{display:flex;justify-content:center;gap:12px;margin-top:8px;max-width:100%;flex-wrap:wrap;flex-shrink:0}.series button{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;font-size:14px;font-weight:750;padding:3px;transition:opacity .2s}.badge{width:56px;height:56px;display:block;overflow:hidden;border-radius:50%;position:relative;border:3px solid #fba43e;background:#fffaf0}.professions{border-color:#8b6bef}.fantasy{border-color:#39b894}.robots{border-color:#48b6c3}.food{border-color:#f1799e}.check{position:absolute;right:8px;top:39px;background:#64687f;color:white;border-radius:50%;width:19px;height:19px;line-height:19px;font-size:12px}.series button[aria-pressed=false]{opacity:.4}.series button[aria-pressed=false] .check{visibility:hidden}#status{position:fixed;z-index:10;bottom:calc(env(safe-area-inset-bottom) + 18px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;padding:12px 18px;border-radius:18px;background:#414458;color:#fffaf0;font-size:15px;font-weight:700;text-align:center;pointer-events:none}#status:empty{display:none}button:disabled{cursor:wait;opacity:.5}@media(min-width:750px){header{padding:0 35px}}@media(orientation:landscape) and (min-width:600px) and (max-height:700px){main{max-width:850px;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:56px 1fr auto auto auto;column-gap:16px;align-content:center;justify-items:center}header{grid-column:1 / -1;grid-row:1}.play{grid-column:1;grid-row:2 / 6;--tile:min(260px,max(90px,calc(33.333svh - 28px)))}.series{grid-column:2;grid-row:2;align-self:end;gap:10px;max-width:290px}#swipe-hint{grid-column:2;grid-row:3;margin-top:16px}.series button{font-size:14px}.badge{width:52px;height:52px}.check{top:34px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:450px){.series{gap:7px}.series button{font-size:14px;min-width:48px}.badge{width:46px;height:46px}.check{top:30px;right:3px}.play{--tile:min(340px,calc(100vw - 32px),max(132px,calc(33.333svh - 94px)))}}

header{gap:12px}.wordmark{flex-shrink:0}.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.header-actions #sound{width:40px;height:44px;padding:8px}.action-button{position:relative;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:transparent;transition:transform .16s}.action-button>svg{display:block;width:100%;height:100%}.action-button:active{transform:scale(.91)}.action-button[data-saved=true]::after{content:'✓';position:absolute;right:-2px;bottom:-2px;width:23px;height:23px;line-height:23px;border-radius:50%;background:#0c9d83;color:#fffaf0;font-weight:900;border:2px solid #fffaf0}.action-button:disabled{opacity:.65}
@media(max-width:360px){header{gap:6px}.wordmark{font-size:33px}.header-actions{gap:4px}.action-button{width:48px;height:48px}.header-actions #sound{width:36px;padding:6px}}

/* Nine series; keep all choices visible and preserve the tilted wordmark. */
main{max-width:760px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
header{padding:0;gap:8px}.wordmark{transform:rotate(-3deg)}
.header-actions #sound{width:56px;height:56px;padding:0}
#sound>svg{width:100%;height:100%;fill:initial;stroke:none}
#sound[aria-pressed=true] .music-off{display:none}
#sound[aria-busy=true]{opacity:.6}
.series{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,430px);gap:6px 4px}
.series button{min-width:0;min-height:44px;font-size:12px;line-height:16px;gap:3px;padding:2px 0}
.badge{width:46px;height:46px}.check{top:29px;right:calc(50% - 25px)}
.ocean{border-color:#278bd0}.dinosaurs{border-color:#70a441}.space{border-color:#7659be}.toys{border-color:#e87c5e}
.play{--tile:min(340px,calc(100vw - 24px),max(90px,calc((100svh - 314px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/3)))}
.credits-button{background:none;border:0;font-size:11px;min-height:44px;padding:10px 12px;color:#747487}
dialog{max-width:min(420px,calc(100vw - 32px));border:0;border-radius:24px;background:#fffaf0;color:#414458;padding:24px;box-shadow:0 10px 40px #41445833}dialog::backdrop{background:#41445888}dialog h2{margin-top:0}dialog p{font-size:14px;line-height:1.5}.license-address{overflow-wrap:anywhere}dialog button{min-height:44px;border:0;border-radius:20px;padding:10px 22px;background:#0c9d83;color:#fffaf0;font-weight:700}
@media(max-width:360px){.header-actions #sound{width:48px;height:48px}.series button{font-size:10px}.header-actions{gap:3px}.wordmark{font-size:33px}}
@media(orientation:landscape) and (min-width:600px) and (max-height:700px){main{max-width:850px}.play{--tile:min(260px,max(80px,calc((100svh - 100px)/3)))}.series{grid-template-columns:repeat(5,minmax(0,1fr));width:290px;gap:5px 2px}.series button{font-size:10px}.credits-button{grid-column:2;grid-row:4}#swipe-hint{font-size:12px}}

@supports(width:round(down,1.5px,1px)){.tile{width:round(down,var(--tile),1px);height:round(down,var(--tile),1px)}}
.bugs{border-color:#e5a12d}

/* Parent-only dialogs scroll independently, including with the keyboard open. */
dialog{max-height:calc(100dvh - 32px);overflow-y:auto}dialog a{color:#2460d4;overflow-wrap:anywhere}dialog summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:700}dialog details{border-top:1px solid #41445833}#parent-question{display:block;font-size:20px;font-weight:700}#parent-answer{display:block;margin:16px 0;width:100%;min-height:48px;border:2px solid #0c9d83;border-radius:12px;background:white;color:#414458;padding:8px 12px;font:inherit;font-size:24px}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px}#parent-cancel{background:#414458}#parents-panel .credits-button{color:#414458;background:transparent}