@font-face{font-family:TeamPixel;src:url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Long presses are game controls, not text selection or iOS callouts. */
.layout,.layout *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Disable double-tap zoom across the page, including gaps and menu buttons. */
html,body,.layout{touch-action:manipulation}
.touch-controls{touch-action:none}
.touch-controls span{pointer-events:none}
:root{--blue:#5981ce;--button:#527bc6;--ink:#365989;--paper:#fff;--line:#e1e9f5;--soft:#f2f6fc;font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--blue);min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #b6d5ff;outline-offset:5px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.layout{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:40px 24px}.intro{position:fixed;left:clamp(24px,5vw,100px);top:40px;bottom:40px;color:white;display:flex;flex-direction:column;justify-content:space-between;width:205px}.wordmark{display:flex;flex-direction:column;gap:12px;width:max-content;color:white;text-decoration:none}.wordmark-lettering{display:block;width:185px;height:38px;overflow:visible}.wordmark small{font-family:TeamPixel,monospace;font-weight:400;font-size:8px;letter-spacing:0;line-height:1.5}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:700;display:block}.desktop-help p{font-size:13px;line-height:1.8;margin:13px 0}.desktop-help p span{font-size:11px;margin:0 3px}.desktop-help .eyebrow{font-size:10px;letter-spacing:1.3px}.desktop-help small{font-size:12px;color:#e6eeff}kbd{display:inline-block;font:inherit;font-size:12px;min-width:25px;text-align:center;padding:2px 5px;border:1px solid #ffffff70;border-radius:4px}.notebook{position:relative;background:white;box-shadow:4px 6px 0 #3d65ae55,0 15px 45px #294e8e18;border-radius:4px 11px 11px 4px;width:min(420px,calc((100dvh - 184px)*.6875));flex-shrink:0}.binding{position:absolute;top:-11px;left:23px;right:23px;height:23px;background:repeating-linear-gradient(90deg,transparent 0 10px,#42629b 10px 13px,#91abdb 13px 15px,transparent 15px 30px);z-index:5;border-radius:2px}.game-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:16px 22px 7px;border-bottom:1px solid var(--line)}.game-header .eyebrow{font-size:9px;letter-spacing:1.3px}.game-header strong{display:block;font-size:29px;line-height:1.2;letter-spacing:-.8px}.unit{font-size:14px;letter-spacing:0}.icon-button{height:35px;width:35px;border:0;background:var(--soft);color:var(--button);border-radius:50%;font-weight:700;font-size:18px}.playfield{position:relative;width:100%;aspect-ratio:440/640;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.notebook-footer{height:32px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 19px;font-size:11px;background:#fafcff;border-radius:0 0 11px 4px}.overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#ffffffed;padding:18px 16px}.start-content{width:100%;max-width:224px;text-align:center}.start-content>.eyebrow{margin-bottom:16px}.character-card{position:relative;border:1.5px solid #83a0d4;border-radius:100px 100px 14px 14px;width:100%;background:#f4f7fc;display:flex;flex-direction:column;align-items:center;color:var(--ink);padding:13px 12px 16px}.character-card img{object-fit:contain;display:block;width:100%;height:clamp(90px,25vh,220px)}.character-card strong{font-size:25px;margin-top:5px}.check{position:absolute;right:9px;top:18px;border-radius:50%;background:var(--button);color:white;width:25px;height:25px;line-height:25px;z-index:1;font-size:14px}.primary{background:var(--button);border:0;color:white;border-radius:7px;min-height:48px;width:100%;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:10px 17px;margin-top:21px;box-shadow:0 3px 0 #3d63a6}.primary:hover{background:#4770b8}.primary:active{transform:translateY(1px);box-shadow:0 2px 0 #3d63a6}.primary span{font-size:23px;line-height:1}.dialog{width:100%;max-width:260px;text-align:center}.dialog h2{font-size:40px;letter-spacing:-1.5px;margin:16px 0}.dialog p{font-size:15px;line-height:1.5}.text-button{background:none;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-size:13px;padding:17px 8px 7px}.result{font-size:64px!important;line-height:1.1}.result small{font-size:19px;display:block;letter-spacing:0;margin-top:8px}.milestone{position:absolute;z-index:4;width:60%;padding:12px 13px;background:white;color:var(--ink);border:2px solid var(--button);border-radius:24px;pointer-events:none;text-align:center}.milestone span{font-size:10px;font-weight:700;letter-spacing:1px}.milestone p{font-family:"Chalkboard SE","Comic Sans MS",cursive;font-size:21px;line-height:1.2;margin:5px 0 1px}.speech-tail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}.speech-tail path{fill:white;stroke:var(--button);stroke-width:2;stroke-linejoin:round}.touch-controls{display:none}.touch-controls button{touch-action:none;user-select:none;-webkit-user-select:none}
@media(min-width:761px) and (max-width:1000px){.intro{left:22px;width:170px}.wordmark-lettering{width:166px;height:34px}.wordmark small{font-size:7px}.notebook{width:min(380px,calc((100dvh - 184px)*.6875),calc(100vw - 410px))}.desktop-help p{font-size:12px}}
@media(max-width:760px){body{overflow:hidden}.layout{height:100dvh;min-height:0;padding:12px 12px max(12px,env(safe-area-inset-bottom));flex-direction:column;justify-content:center}.intro{position:static;flex-shrink:0;width:100%;max-width:400px;height:52px;display:block;padding-left:3px}.wordmark{gap:6px}.wordmark-lettering{width:151px;height:31px}.wordmark small{font-size:7px}.desktop-help{display:none}.notebook{width:min(100%,400px,calc((100dvh - 238px)*.6875));max-height:none;box-shadow:3px 4px 0 #3d65ae55}.game-header{height:58px;padding:11px 16px 6px 19px}.game-header strong{font-size:24px}.game-header .eyebrow{font-size:8px}.unit{font-size:12px}.binding{height:19px;top:-8px}.notebook-footer{height:28px;padding:0 13px;font-size:10px}.overlay{padding:12px}.start-content{max-width:205px}.start-content>.eyebrow{font-size:9px;margin-bottom:12px}.character-card{padding:7px 9px 12px}.character-card img{height:clamp(75px,24dvh,202px)}.character-card strong{font-size:22px}.primary{min-height:43px;font-size:15px;padding:8px 14px;margin-top:16px}.touch-controls{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:25px;width:min(100%,350px);padding-top:12px;height:76px;color:#f0f5ff}.touch-controls button{border:1px solid #ffffff66;background:#ffffff12;color:white;border-radius:12px;height:51px;width:91px;font-size:28px}.touch-controls button:active,.touch-controls button.held{background:white;color:var(--button)}.touch-controls span{text-align:center;font-size:10px;line-height:1.5}.milestone{padding:9px 10px;border-radius:19px}.milestone p{font-size:clamp(13px,4.7vw,19px)}.milestone span{font-size:9px}.dialog h2{font-size:32px}.dialog p{font-size:13px}.result{font-size:46px!important}}
@media(max-width:760px) and (max-height:650px){.character-card img{height:clamp(62px,18dvh,112px)}.character-card strong{font-size:18px}.start-content>.eyebrow{margin-bottom:8px;font-size:8px}.character-card{padding-bottom:8px}.primary{min-height:37px;margin-top:12px;font-size:14px}.overlay{padding-left:8px;padding-right:8px}.milestone p{font-size:14px}.milestone{padding:7px 9px}.dialog h2{font-size:26px;margin:9px 0}.dialog p{font-size:12px}.result{font-size:38px!important}}
@media(max-height:500px) and (orientation:landscape){.layout{padding:16px;display:flex;flex-direction:row}.intro{position:fixed;top:20px;left:24px;width:170px;height:auto}.notebook{width:calc((100dvh - 122px)*.6875)}.game-header{height:58px}.notebook-footer{height:28px}.touch-controls{display:flex;position:fixed;bottom:16px;left:20px;right:20px;width:auto;max-width:none;pointer-events:none;justify-content:space-between}.touch-controls button{pointer-events:auto;width:75px;height:48px;background:#ffffff15;border:1px solid #ffffff66;border-radius:10px;color:white;font-size:25px}.touch-controls span,.desktop-help{display:none}.character-card img{height:70px}.start-content>.eyebrow{font-size:8px;margin-bottom:7px}.character-card strong{font-size:16px}.character-card{padding:4px 8px 7px}.overlay{padding:7px 8px}.primary{min-height:33px;margin-top:9px;font-size:13px}.milestone p{font-size:13px}.milestone{padding:6px 9px}.dialog h2{font-size:23px;margin:8px 0}.dialog p{font-size:12px}.text-button{padding-top:10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.start-content{max-width:328px}.hero-carousel{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center}.hero-arrow{display:grid;place-items:center;width:44px;height:64px;border:0;border-radius:10px;background:transparent;color:var(--button);padding:3px}.hero-arrow svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.hero-arrow:hover{background:var(--soft)}.hero-arrow:active{background:#e5edfa}.start-content>.primary{justify-content:center;width:calc(100% - 104px);margin-left:auto;margin-right:auto}.hero-carousel .character-card{min-width:0}.hero-carousel .check{display:none}
@media(max-height:650px){.character-card img{max-height:17dvh}.hero-carousel{grid-template-columns:40px minmax(0,1fr) 40px;gap:4px}.hero-arrow{width:40px;height:52px}.hero-arrow svg{width:30px;height:30px}.start-content>.primary{width:calc(100% - 88px)}}

.header-actions{display:flex;gap:5px}.sound-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;vertical-align:middle}.sound-muted{display:none}.sound-button[aria-pressed="false"] .sound-muted{display:block}.sound-button[aria-pressed="false"] .sound-waves{display:none}