:root{color:#1d2733;font-synthesis:none;text-rendering:optimizelegibility;background:#77c9e7;font-family:ui-rounded,Avenir Next,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{color:#1f2933;cursor:pointer;background:#fff8dc;border:3px solid #1f2933;border-radius:8px;min-height:44px;padding:10px 16px;font:800 16px/1.1 inherit;box-shadow:0 4px #1f2933}button:active{transform:translateY(3px);box-shadow:0 1px #1f2933}.primary{background:#ffcf3e}.screen{width:100%;min-height:100%;padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));background-color:#77c9e7;background-image:linear-gradient(#ffffff47 2px,#0000 2px),linear-gradient(90deg,#ffffff38 2px,#0000 2px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:54px 54px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;place-items:center;display:grid}.hero-stage{grid-template-rows:1fr auto;align-items:end;gap:18px;width:min(1060px,100%);min-height:min(690px,100vh - 36px);display:grid}.title-wrap{text-align:center;color:#17202a}.eyebrow{text-transform:uppercase;letter-spacing:0;color:#724e00;margin:0 0 4px;font-weight:900}h1{letter-spacing:0;margin:0;font-size:clamp(40px,9vw,98px);line-height:.95}h2{margin:8px 0 5px;font-size:24px}p{margin:0;line-height:1.35}.button-row{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px;display:flex}.school-illustration{align-content:end;align-self:stretch;min-height:340px;display:grid;position:relative}.school-roof{clip-path:polygon(50% 0,100% 100%,0 100%);background:#ff7b54;border:4px solid #1f2933;justify-self:center;width:78%;max-width:760px;height:120px}.school-face{background:#ffeaa7;border:4px solid #1f2933;border-radius:8px;grid-template-columns:repeat(5,1fr);justify-self:center;align-items:end;gap:18px;width:min(870px,92%);height:285px;padding:42px 36px 0;display:grid}.window,.door{background:#9df;border:4px solid #1f2933;border-radius:8px 8px 0 0;height:105px}.door{background:#b06b3d;height:160px}.peek-row{gap:14px;display:flex;position:absolute;top:36px;left:50%;transform:translate(-50%)}.villain-peek{background:#fff;border:3px solid #1f2933;border-radius:8px;padding:10px 12px;font-weight:900}.villain-peek.raoul{background:#8ee3b7}.villain-peek.jasper{background:#ff9ac5}.villain-peek.femke{background:#98e2f1}.selection-screen{align-content:start;gap:22px;overflow:auto}.selection-header{justify-content:space-between;align-items:center;gap:16px;width:min(1120px,100%);display:flex}.selection-header h1{font-size:clamp(34px,6vw,66px)}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(1120px,100%);display:grid}.choice-card{background:#fff8dc;border:4px solid #1f2933;border-radius:8px;min-width:0;padding:14px;box-shadow:0 8px #1f293340}.portrait{aspect-ratio:11/9;width:100%;height:auto;display:block}.choice-card strong{color:#975a00;margin-bottom:7px;display:block}.choice-card p{min-height:64px;margin-bottom:12px}.choice-card button{width:100%}.intro-screen,.ending-screen{grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:22px}#introCanvas,#endingCanvas{aspect-ratio:23/13;background:#f6dca6;border:4px solid #1f2933;border-radius:8px;width:min(920px,100%);max-height:calc(100vh - 60px)}.dialog-panel,.ending-copy,.modal{background:#fff8dc;border:4px solid #1f2933;border-radius:8px;padding:18px;box-shadow:0 8px #1f293340}.dialog-panel h1,.ending-copy h1,.modal h1{margin-bottom:12px;font-size:clamp(34px,6vw,58px)}.dialog-panel p,.ending-copy p{margin-bottom:16px;font-size:22px;font-weight:800}.dialog-panel button,.ending-copy button,.modal button{width:100%;margin-top:10px}.game-shell{touch-action:none;background:#243a54;grid-template-rows:auto 1fr;width:100%;height:100%;display:grid;position:relative}.hud{min-height:66px;padding:calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));background:#fff8dc;border-bottom:4px solid #1f2933;grid-template-columns:minmax(90px,1fr) minmax(180px,2fr) minmax(80px,.8fr) auto auto;align-items:center;gap:10px;display:grid}.hud>div,.cooldown{gap:2px;min-width:0;display:grid}.hud span,.cooldown span{text-transform:uppercase;letter-spacing:0;color:#687385;font-size:12px;font-weight:900}.hud strong,.cooldown strong{text-overflow:ellipsis;white-space:nowrap;font-size:19px;overflow:hidden}.teacher-lives{align-items:center;gap:5px;min-height:17px;display:flex}.teacher-lives span{background:#f1d5c8;border:2px solid #1f2933;border-radius:5px;width:24px;height:13px;display:block;box-shadow:inset 0 2px #ffffff59}.teacher-lives .full{background:linear-gradient(90deg,#e63b3f,#ff8a5b)}.xp-track{background:#f5d1d1;border:3px solid #1f2933;border-radius:8px;height:17px;overflow:hidden}#xpFill{background:linear-gradient(90deg,#4ed37b,#ffcf3e);width:100%;height:100%;transition:width .18s}.icon-btn{min-width:72px;padding-inline:10px}#gameCanvas{background:#7bc1d9;width:100%;height:100%;display:block}.cooldowns{left:max(12px, env(safe-area-inset-left));top:calc(78px + env(safe-area-inset-top));pointer-events:none;gap:10px;display:flex;position:absolute}.cooldown{background:#fff8dcf0;border:3px solid #1f2933;border-radius:8px;grid-template-columns:38px 1fr;align-items:center;width:148px;min-height:54px;padding:8px}.cooldown strong{grid-column:2}.power-mark{color:#1f2933;background:#ffcf3e;border:3px solid #1f2933;border-radius:8px;grid-row:span 2;place-items:center;width:34px;height:34px;font-size:18px;display:grid}.bubble{left:50%;top:calc(92px + env(safe-area-inset-top));text-align:center;pointer-events:none;background:#fff;border:3px solid #1f2933;border-radius:8px;max-width:min(440px,78vw);padding:11px 14px;font-weight:900;position:absolute;transform:translate(-50%)}.hidden{display:none!important}.touch-pad,.touch-actions{bottom:max(18px, env(safe-area-inset-bottom));pointer-events:auto;position:absolute}.touch-pad{left:max(18px, env(safe-area-inset-left))}#stickBase{background:#fff8dcb8;border:4px solid #1f2933d9;border-radius:50%;place-items:center;width:148px;height:148px;display:grid}#stickKnob{background:#ffcf3e;border:4px solid #1f2933;border-radius:50%;width:64px;height:64px}.touch-actions{right:max(18px, env(safe-area-inset-right));align-items:end;gap:12px;display:flex}.touch-actions button{width:88px;height:72px}.throw-touch{background:#ff7b54;width:104px!important;height:92px!important}.overlay{background:#141c2694;place-items:center;padding:18px;display:grid;position:absolute;inset:0}.modal{width:min(360px,100%)}@media (width<=820px){html,body,#app{height:100dvh;min-height:100svh}.screen{-webkit-overflow-scrolling:touch;height:100dvh;min-height:100svh;padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));place-items:start center;overflow:auto}.hero-stage{grid-template-rows:minmax(180px,1fr) auto;gap:10px;min-height:calc(100svh - 24px)}h1{font-size:clamp(42px,13vw,68px)}.school-illustration{min-height:210px}.school-roof{height:72px}.school-face{gap:8px;height:165px;padding:24px 14px 0}.window{height:58px}.door{height:96px}.peek-row{gap:6px;top:16px}.villain-peek{padding:7px 8px;font-size:13px}.button-row{margin-top:12px}.card-grid{grid-template-columns:1fr;padding-bottom:18px}.choice-card p{min-height:0}.selection-header{align-items:start}.intro-screen,.ending-screen{grid-template-columns:1fr;align-content:start;gap:12px}#introCanvas,#endingCanvas{width:100%;max-height:38svh}.dialog-panel,.ending-copy{width:100%;padding:14px}.dialog-panel h1,.ending-copy h1,.modal h1{font-size:clamp(28px,9vw,42px);line-height:1}.dialog-panel p,.ending-copy p{margin-bottom:10px;font-size:18px}.hud{grid-template-columns:1fr 1.3fr auto;gap:6px}.game-shell{grid-template:"hud hud""cooldowns cooldowns""canvas canvas"minmax(0,1fr)"stick actions"/1fr 1fr}.hud{grid-area:hud}.hud>div:first-child,.hud .icon-btn:first-of-type{display:none}.hud strong{font-size:16px}.icon-btn{min-width:64px;min-height:42px;padding:8px;font-size:13px}.cooldowns{pointer-events:none;background:#243a54;border-bottom:3px solid #1f2933;grid-area:cooldowns;gap:8px;padding:8px 10px;position:static;transform:none}.cooldown{background:#fff8dc;width:min(50%,180px);min-height:52px}.bubble{top:calc(128px + env(safe-area-inset-top))}.touch-pad,.touch-actions{padding-bottom:max(10px, env(safe-area-inset-bottom));background:#243a54;align-self:center;position:static}.touch-pad{padding-left:max(14px, env(safe-area-inset-left));grid-area:stick;justify-self:start}.touch-actions{padding-right:max(14px, env(safe-area-inset-right));grid-area:actions;justify-self:end}#gameCanvas{grid-area:canvas;min-height:0}#stickBase{width:138px;height:138px}#stickKnob{width:60px;height:60px}.touch-actions button{width:82px;height:64px}.throw-touch{width:96px!important;height:76px!important}}@media (hover:hover) and (pointer:fine){.touch-pad,.touch-actions{opacity:.2}.touch-pad:hover,.touch-actions:hover{opacity:1}}@media (height<=620px) and (orientation:landscape){.touch-actions button{height:58px}#stickBase{width:98px;height:98px}#stickKnob{width:44px;height:44px}}