@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Noto+Sans+SC:wght@700;800;900&display=swap");

:root {
  --ink: #201d2b;
  --yellow: #ffd526;
  --orange: #ff7420;
  --red: #f04444;
  --green: #27c873;
  --blue: #25a8ff;
  --paper: #fff8df;
  font-family: "Baloo 2", "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink);
  background: #ffe168;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }
.screen { min-height: 100vh; position: relative; overflow: hidden; }

.menu-screen {
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: #ffd629;
}

.sunburst {
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(#ffe76d 0deg 10deg, #ffcc20 10deg 20deg);
  animation: spin 45s linear infinite;
}

.menu-sticker {
  width: min(540px, 94vw);
  z-index: 1;
  padding: clamp(28px, 6vw, 48px);
  text-align: center;
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: 42px 32px 48px 30px;
  box-shadow: 12px 14px 0 var(--ink), 19px 22px 0 rgba(255, 89, 38, .45);
  transform: rotate(-1deg);
}

.eyebrow { margin: 0; color: var(--red); letter-spacing: .12em; font-size: 14px; font-weight: 900; }
h1 { margin: 7px 0 0; font-size: clamp(50px, 10vw, 86px); line-height: .95; letter-spacing: -.08em; text-shadow: 4px 4px 0 #fff, 7px 7px 0 var(--ink); }
h1 span { color: var(--red); }
.menu-subtitle { margin: 20px 0 26px; font-size: 20px; }
.scene-select-button { margin: -8px 0 18px; padding: 7px 14px; border: 3px solid var(--ink); border-radius: 999px; background: #fff0a9; font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.scene-select-button strong { color: var(--red); }
.menu-buttons { display: grid; gap: 13px; }

.comic-button {
  position: relative;
  border: 4px solid var(--ink);
  border-radius: 18px 14px 20px 15px;
  background: white;
  min-height: 62px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 5px 6px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.comic-button:hover { transform: translate(-2px, -2px); box-shadow: 8px 9px 0 var(--ink); background: #fff4bc; }
.comic-button:active { transform: translate(4px, 5px); box-shadow: 1px 1px 0 var(--ink); }
.comic-button.primary { background: var(--red); color: white; font-size: 26px; text-shadow: 2px 2px 0 var(--ink); }
.button-tag { float: right; margin-top: 2px; padding: 3px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: 12px; }
.button-tag.muted { background: #ddd; color: #67616e; }
.button-tag.connected { background: var(--green); color: white; }
.keyboard-hint { margin: 24px 0 0; font-size: 12px; opacity: .64; }
.menu-doodle { position: absolute; z-index: 1; font-size: clamp(70px, 14vw, 150px); color: var(--red); -webkit-text-stroke: 4px var(--ink); filter: drop-shadow(6px 7px 0 white); }
.doodle-left { left: 6vw; top: 14vh; transform: rotate(-18deg); }
.doodle-right { right: 7vw; bottom: 13vh; transform: rotate(12deg); }

.game-screen { background: #fff4c7; padding-bottom: 22px; }
.game-header { height: 78px; padding: 12px clamp(14px, 3vw, 40px); display: flex; align-items: center; gap: 16px; background: var(--yellow); border-bottom: 4px solid var(--ink); }
.icon-button { width: 48px; height: 48px; border: 3px solid var(--ink); border-radius: 50%; background: white; font-size: 27px; font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.level-heading { display: flex; flex-direction: column; line-height: 1.05; }
.level-heading span { font-weight: 900; font-size: 20px; }
.level-heading strong { color: #77590c; font-size: 13px; }
.header-score, .header-combo { min-width: 76px; padding: 5px 10px; border: 3px solid var(--ink); border-radius: 12px; background: white; text-align: center; box-shadow: 3px 3px 0 var(--ink); }
.header-score { margin-left: auto; }
.header-score span, .header-combo span { display: block; color: #777; font-size: 8px; line-height: 1; }
.header-score strong, .header-combo strong { display: block; font-size: 18px; line-height: 1.1; }
.header-combo strong { color: var(--red); }
.difficulty-chip { margin-left: auto; padding: 8px 13px; border: 3px solid var(--ink); border-radius: 999px; background: white; font-size: 12px; font-weight: 900; box-shadow: 3px 3px 0 var(--ink); }

.score-panel { max-width: 1180px; margin: 10px auto; padding: 9px 18px 12px; background: var(--ink); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 6px 7px 0 #d99726; }
.score-meta { display: flex; justify-content: space-between; color: #fff3a3; font-size: 12px; letter-spacing: .1em; }
.note-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 10px; }
.note { min-width: 45px; padding: 7px 8px; color: white; border: 2px solid #716c7d; border-radius: 8px; text-align: center; font-size: clamp(13px, 2vw, 18px); font-weight: 900; transition: .16s; }
.note.done { color: #74f5a9; border-color: #2b9659; background: #173c2b; }
.note.current { color: var(--ink); border-color: white; background: var(--yellow); transform: translateY(-3px) rotate(-2deg) scale(1.1); box-shadow: 0 0 0 3px var(--orange), 0 0 18px var(--yellow); animation: current-pulse .7s alternate infinite; }

.chase-stage { position: relative; width: min(calc(100% - 18px), 1050px, calc(60vh * 1.918)); height: auto; aspect-ratio: 1170 / 610; margin: 0 auto; overflow: hidden; border: 5px solid var(--ink); border-radius: 30px 22px 32px 20px; background-color: #74d4ff; background-image: linear-gradient(rgba(40,45,50,.10), rgba(40,45,50,.10)), var(--scene-background); background-repeat: no-repeat; background-position: center; background-size: contain; box-shadow: 9px 10px 0 var(--ink); }
.chase-stage::after { display: none; }
.chase-stage > :is(.sky-decor,.school-building,.finish-line,.track-line) { display: none; }
.school-building { position: absolute; left: 23%; top: 19%; width: 250px; height: 170px; background: #ead8bc; border: 4px solid var(--ink); filter: saturate(.72) contrast(.92); }
.school-building::before { content: ""; position: absolute; left: -25px; top: -45px; width: 292px; height: 45px; background: #f16955; border: 4px solid var(--ink); transform: skewX(-17deg); }
.school-sign { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 148px; background: #fff7c8; border: 3px solid var(--ink); text-align: center; font-size: 13px; }
.school-windows { position: absolute; left: 21px; right: 21px; top: 61px; height: 76px; background: repeating-linear-gradient(90deg, #71c2e9 0 35px, #263442 35px 39px, transparent 39px 62px); border: 3px solid var(--ink); }
.cloud { position: absolute; width: 100px; height: 30px; border: 4px solid var(--ink); border-radius: 50px; background: white; opacity: .94; }
.cloud::before, .cloud::after { content: ""; position: absolute; border: 4px solid var(--ink); border-bottom: 0; background: white; border-radius: 50% 50% 0 0; }
.cloud::before { width: 44px; height: 33px; left: 13px; top: -25px; }
.cloud::after { width: 37px; height: 25px; right: 12px; top: -18px; }
.cloud-one { left: 6%; top: 15%; }
.cloud-two { right: 18%; top: 9%; transform: scale(.75); }
.finish-line { position: absolute; z-index: 2; right: 4%; bottom: 17%; width: 84px; height: 175px; }
.finish-post { position: absolute; bottom: 0; width: 13px; height: 140px; border: 3px solid var(--ink); background: repeating-linear-gradient(#fff 0 15px, var(--red) 15px 30px); }
.finish-post.left { left: 0; } .finish-post.right { right: 0; }
.finish-banner { position: absolute; z-index: 1; width: 100%; padding: 8px 0; border: 3px solid var(--ink); background: var(--yellow); text-align: center; font-weight: 900; }
.track-line { position: absolute; z-index: 1; left: 4%; right: 4%; bottom: 19%; border-top: 5px dashed rgba(255,255,255,.8); }

.character { --x: 8%; position: absolute; z-index: 5; left: var(--x); bottom: 9%; width: 120px; height: 180px; transition: left .34s cubic-bezier(.16,.9,.29,1.25); }
.character::after { content: ""; position: absolute; z-index: -2; left: 50%; bottom: 20px; width: 92px; height: 19px; border-radius: 50%; background: rgba(25, 22, 30, .28); filter: blur(2px); transform: translateX(-50%); transform-origin: center; }
.character-art { position: absolute; bottom: 23px; left: 11px; width: 100px; height: 142px; transform-origin: bottom center; }
.sprite-frame { display: none; position: absolute; left: 50%; bottom: 24px; width: 210px; height: 140px; transform: translateX(-50%); transform-origin: 50% 100%; background-color: transparent; background-image: var(--sprite-url); background-repeat: no-repeat; background-size: calc(var(--sprite-columns) * 100%) calc(var(--sprite-rows) * 100%); background-position: var(--sprite-x, 0%) var(--sprite-y, 0%); filter: drop-shadow(2px 4px 1px rgba(0,0,0,.16)); }
.sprite-ready .sprite-frame { display: block; }
.sprite-ready .fallback-art { display: none; }
.scene-placeholder { display: none; position: absolute; left: 50%; bottom: 27px; width: 130px; height: 120px; transform: translateX(-50%); place-items: center; font-size: 84px; line-height: 1; filter: drop-shadow(3px 6px 0 rgba(30,25,20,.24)); transform-origin: 50% 100%; }
.scene-kitchen .scene-placeholder { display: grid; }
.scene-kitchen .fallback-art { display: none; }
.scene-kitchen .sprite-ready .scene-placeholder { display: none; }
.scene-kitchen .sprite-ready .sprite-frame { display: block; }
.scene-kitchen .sprite-ready .fallback-art { display: none; }
.scene-kitchen .character { bottom: 16%; }
.scene-kitchen .chaser-placeholder { font-size: 96px; }
.scene-kitchen .runner-placeholder { font-size: 68px; }
.scene-kitchen .runner.action-run .scene-placeholder,
.scene-kitchen .runner.action-panic .scene-placeholder { animation: runner-run .22s steps(2) infinite; }
.scene-kitchen .chaser.action-run .scene-placeholder { animation: attack .3s ease-out; }
.scene-kitchen .chaser.action-combo_4 .scene-placeholder { animation: combo-four-attack .3s ease-out; }
.scene-kitchen .chaser.action-combo_8 .scene-placeholder { animation: rage-attack .3s ease-out; }
.character-label { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: max-content; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 999px; background: white; font-size: 11px; font-weight: 900; }
.face { position: absolute; z-index: 3; left: 17px; top: 0; width: 69px; height: 67px; border: 4px solid var(--ink); border-radius: 44% 48% 45% 48%; background: #ffc89c; }
.body { position: absolute; z-index: 2; left: 25px; top: 58px; width: 55px; height: 67px; border: 4px solid var(--ink); border-radius: 18px 18px 10px 10px; background: #edf3ff; }
.teacher-hair, .student-hair { position: absolute; z-index: 4; top: -4px; left: 17px; width: 69px; height: 27px; border: 4px solid var(--ink); border-radius: 50% 50% 20% 20%; background: #2e2831; }
.glasses { position: absolute; top: 25px; left: 5px; display: flex; gap: 3px; }
.glasses i { width: 25px; height: 17px; border: 4px solid var(--ink); border-radius: 5px; background: #c8f3ff; }
.mouth { position: absolute; left: 27px; top: 50px; width: 20px; border-top: 4px solid var(--ink); }
.teacher .tie { position: absolute; left: 21px; top: 5px; width: 11px; height: 38px; background: var(--red); clip-path: polygon(50% 0, 100% 23%, 72% 100%, 28% 100%, 0 23%); }
.pointer { position: absolute; z-index: 1; right: 2px; top: 64px; width: 8px; height: 87px; border: 2px solid var(--ink); border-radius: 5px; background: #e5b45c; transform: rotate(-24deg); transform-origin: top; }
.chair { display: none; position: absolute; left: 0; bottom: 0; width: 105px; padding: 5px; border: 4px solid var(--ink); border-radius: 10px; background: #4b6175; color: white; text-align: center; font-size: 10px; }
.runner { --x: 47%; }
.student-hair { background: #593725; transform: rotate(-5deg); }
.student .eyes { position: absolute; top: 28px; left: 13px; display: flex; gap: 17px; }
.student .eyes i { width: 7px; height: 10px; border-radius: 50%; background: var(--ink); }
.student .body { background: #3e8dec; }
.latiao { position: absolute; z-index: 6; right: -2px; top: 67px; padding: 3px; border: 3px solid var(--ink); background: #ee3e26; color: #ffed50; font-size: 10px; transform: rotate(12deg); }
.backpack { position: absolute; z-index: 1; left: 7px; top: 64px; width: 35px; height: 49px; border: 4px solid var(--ink); border-radius: 14px 9px 11px 14px; background: #e94b3f; transform: rotate(-8deg); }
.bike { display: none; position: absolute; z-index: 6; left: -4px; bottom: -8px; font-size: 60px; }
.runner-emotion { position: absolute; z-index: 8; right: -15px; top: 13px; color: white; font-size: 25px; font-weight: 900; text-shadow: 2px 2px 0 var(--ink); opacity: 0; }
.action-idle :is(.character-art,.sprite-frame) { animation: idle-breathe .72s steps(2) infinite; }
.runner.action-walk .character-art { animation: snack-walk .48s steps(2) infinite; }
.runner.action-run .character-art { animation: runner-run .22s steps(2) infinite; }
.runner.action-panic .character-art { animation: panic-run .16s steps(2) infinite; }
.runner.action-walk .eyes { transform: translateY(2px); }
.runner.action-walk .mouth { width: 13px; border-top-color: #9d3b2d; transform: rotate(8deg); }
.runner.action-walk .latiao { animation: snack-chew .36s steps(2) infinite; }
.runner.action-walk .runner-emotion { opacity: 1; }
.runner.action-walk .runner-emotion::after { content: "♪"; color: var(--yellow); }
.runner.action-run .runner-emotion { opacity: 1; }
.runner.action-run .runner-emotion::after { content: "💦"; }
.runner.action-panic .runner-emotion { opacity: 1; right: -25px; }
.runner.action-panic .runner-emotion::after { content: "!!"; color: var(--red); font-size: 34px; }
.runner.action-panic .student .face { transform: rotate(-10deg); }
.runner.action-panic .student .eyes { transform: scale(1.28); }
.runner.action-panic .student .mouth { width: 29px; height: 18px; border: 4px solid var(--ink); border-radius: 50%; background: #fff; }
.runner.action-panic .backpack { animation: backpack-panic .16s steps(2) infinite; }
.chaser.action-run :is(.character-art,.sprite-frame) { animation: attack .3s ease-out; }
.chaser.action-combo_4 :is(.character-art,.sprite-frame) { animation: combo-four-attack .3s ease-out; }
.chaser.action-combo_4 .glasses i { background: white; box-shadow: 0 0 13px white; }
.chaser.action-combo_4 .pointer { background: #fff; box-shadow: 0 0 14px #fff14d; }
.chaser.action-combo_8 .chair { display: block; }
.chaser.action-combo_8 :is(.character-art,.sprite-frame) { animation: rage-attack .3s ease-out; }
.chaser.action-miss :is(.character-art,.sprite-frame) { animation: miss .28s linear; }
.runner.action-caught :is(.character-art,.sprite-frame) { animation: caught .45s ease-out forwards; }
.runner.action-escape .bike { display: block; }
.runner.action-escape :is(.character-art,.sprite-frame) { animation: escape .55s ease-out forwards; }
.chaser.action-win :is(.character-art,.sprite-frame) { animation: win-pose .45s ease-out forwards; }
.chaser.action-lose :is(.character-art,.sprite-frame) { animation: lose-pose .5s ease-out forwards; }
.speed-lines { display: none; position: absolute; right: 73%; top: 30%; width: 110px; height: 80px; background: repeating-linear-gradient(0deg, transparent 0 8px, #fff 9px 13px, transparent 14px 20px); clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%); }
.chaser.action-run .speed-lines,
.chaser.action-combo_4 .speed-lines,
.chaser.action-combo_8 .speed-lines { display: block; }
.character:is(.action-run,.action-panic,.action-combo_4,.action-combo_8)::before { content: ""; position: absolute; z-index: -1; left: 18%; bottom: 24px; width: 70px; height: 30px; opacity: .72; background: radial-gradient(ellipse at 20% 70%, #eee 0 15%, transparent 17%), radial-gradient(ellipse at 50% 45%, #ddd 0 18%, transparent 20%), radial-gradient(ellipse at 80% 70%, #f5f5f5 0 13%, transparent 15%); filter: drop-shadow(2px 2px 0 rgba(60,55,50,.14)); animation: dust-puff .3s steps(2) infinite; }

.hud { position: absolute; z-index: 8; left: 18px; top: 16px; display: flex; gap: 9px; }
.combo-meter, .state-meter { min-width: 95px; padding: 7px 12px; border: 3px solid var(--ink); border-radius: 12px; background: white; box-shadow: 3px 3px 0 var(--ink); }
.combo-meter span, .state-meter span { display: block; font-size: 9px; color: #777; }
.combo-meter strong { font-size: 25px; line-height: .8; }
.state-meter strong { color: var(--blue); font-size: 15px; }
.judgement { position: absolute; z-index: 10; left: 50%; top: 35%; transform: translate(-50%, -50%); color: #fff23e; font-size: clamp(38px, 7vw, 76px); font-weight: 900; font-style: italic; -webkit-text-stroke: 4px var(--ink); text-shadow: 5px 5px 0 #ff3e87, 9px 9px 0 var(--blue); pointer-events: none; opacity: 0; }
.judgement::before { content: ""; position: absolute; z-index: -1; inset: -20px -35px; background: var(--red); clip-path: polygon(50% 0,60% 26%,82% 8%,79% 34%,100% 39%,80% 53%,96% 75%,70% 72%,69% 100%,50% 79%,29% 100%,30% 72%,3% 76%,21% 54%,0 39%,23% 34%,18% 8%,41% 26%); }
.judgement.show { animation: judgement .55s ease-out; }
.judgement.miss-word { color: #aaa6ae; -webkit-text-stroke-color: #48434d; text-shadow: 4px 7px 0 #6b6670; filter: grayscale(1); }
.judgement.miss-word::before { background: #d7d2d8; clip-path: polygon(3% 14%,97% 10%,91% 73%,69% 68%,57% 100%,44% 72%,18% 85%); }
.combo-burst { position: absolute; z-index: 12; right: 6%; top: 16%; max-width: 350px; color: #fff; font-size: clamp(26px, 4vw, 46px); font-weight: 900; font-style: italic; -webkit-text-stroke: 3px var(--ink); text-shadow: 5px 5px 0 var(--red); transform: rotate(-7deg); opacity: 0; }
.combo-burst.show { animation: combo-burst .9s ease-out; }
.final-chase-alert { position: absolute; z-index: 18; left: 50%; top: 23%; width: max-content; color: #fff34e; font-size: clamp(42px, 8vw, 92px); font-weight: 900; font-style: italic; letter-spacing: -.06em; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(-5deg); -webkit-text-stroke: 5px var(--ink); text-shadow: 7px 7px 0 var(--red), 12px 12px 0 var(--ink); }
.final-chase-alert.show { animation: final-chase-pop 1.45s cubic-bezier(.2,.9,.25,1.25) forwards; }
.chase-stage.final-chase { box-shadow: 9px 10px 0 var(--ink), inset 0 0 45px 15px rgba(255, 24, 24, .72); animation: danger-edge .62s ease-in-out infinite alternate; }
.chase-stage.final-chase .runner:is(.action-walk,.action-run,.action-panic)::before,
.chase-stage.final-chase .runner:is(.action-walk,.action-run,.action-panic)::after { content: ""; position: absolute; inset: 18px 8px 22px 8px; z-index: -1; border-radius: 45%; background: rgba(255, 62, 44, .28); filter: blur(4px); transform: translateX(-24px) scale(.92); }
.chase-stage.final-chase .runner:is(.action-walk,.action-run,.action-panic)::after { opacity: .5; transform: translateX(-46px) scale(.82); }
.chase-stage.final-chase .runner:is(.action-walk,.action-run,.action-panic) .character-art { filter: saturate(1.25) contrast(1.08); }

.game-controls { display: flex; justify-content: center; min-height: 68px; padding-top: 10px; }
.ready-button { min-width: min(360px, 85vw); min-height: 52px; background: var(--green); color: white; font-size: 23px; }
.playing-help { align-items: center; gap: 9px; padding: 12px 22px; font-weight: 900; }
.playing-help:not(.hidden) { display: flex; }
.live-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(240,68,68,.2); animation: current-pulse .7s alternate infinite; }

.overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(32,29,43,.78); backdrop-filter: blur(4px); }
.title-card { position: absolute; top: 15%; width: min(650px, 90vw); padding: 24px; border: 5px solid var(--ink); border-radius: 22px; background: var(--yellow); text-align: center; box-shadow: 10px 11px 0 white; transform: rotate(-1deg); animation: card-in .35s ease-out; }
.title-card p { margin: 0; color: var(--red); font-size: 20px; font-weight: 900; }
.title-card h2 { margin: 2px 0; font-size: clamp(28px, 6vw, 52px); }
.title-card h2 em { color: var(--red); font-style: normal; }
.title-card strong { font-size: 19px; }
.countdown-number { margin-top: 180px; color: white; font-size: clamp(100px, 25vw, 220px); font-weight: 900; line-height: 1; -webkit-text-stroke: 7px var(--ink); text-shadow: 10px 12px 0 var(--red); animation: count-pop .65s ease-out; }
.result-card { width: min(520px, 94vw); padding: 30px; border: 5px solid var(--ink); border-radius: 31px 22px 35px 25px; background: var(--paper); text-align: center; box-shadow: 11px 12px 0 var(--yellow); }
.result-card.loss { box-shadow: 11px 12px 0 var(--red); }
.result-card p { margin: 0; }
.result-card h2 { margin: 3px 0 10px; font-size: 54px; color: var(--red); }
.result-visual { position: relative; min-height: 170px; overflow: hidden; border: 4px solid var(--ink); border-radius: 18px; background: radial-gradient(circle, #fff69b 0 12%, #ffca36 13% 31%, #f15d3b 32%); }
.result-sprite { position: absolute; bottom: 5px; width: 130px; height: 125px; border: 4px solid var(--ink); border-radius: 20px; background: #ffc99e; filter: drop-shadow(5px 5px 0 rgba(32,29,43,.25)); }
.result-sprite::before { content: ""; position: absolute; left: 25px; top: -30px; width: 68px; height: 64px; border: 4px solid var(--ink); border-radius: 48%; background: #ffc99e; }
.result-chaser::after { content: "👓"; position: absolute; z-index: 2; left: 38px; top: -17px; font-size: 37px; }
.result-runner { background-color: #398ce8; }
.result-runner::after { content: "🌶️"; position: absolute; z-index: 2; right: -16px; top: 20px; font-size: 29px; }
.sprite-chaser-ready .result-chaser,
.sprite-runner-ready .result-runner { width: 210px; height: 140px; border: 0; border-radius: 0; background-color: transparent; background-image: var(--result-sprite-url); background-repeat: no-repeat; background-size: calc(var(--result-sprite-columns) * 100%) calc(var(--result-sprite-rows) * 100%); background-position: var(--result-sprite-x) var(--result-sprite-y); }
.sprite-chaser-ready .result-chaser::before,
.sprite-chaser-ready .result-chaser::after,
.sprite-runner-ready .result-runner::before,
.sprite-runner-ready .result-runner::after { display: none; }
.result-chaser { left: 13%; }
.result-runner { right: 10%; }
.result-props { position: absolute; inset: 0; pointer-events: none; }
.school-win .result-chaser { transform: rotate(-4deg) translateY(-5px); }
.school-win .result-runner { transform: rotate(9deg) translateY(10px); }
.school-win .result-props::after { content: "🌶️  🌶️  🌶️"; position: absolute; left: 42%; bottom: 3px; font-size: 27px; }
.school-lose { background: linear-gradient(#bfc4cc, #777e89); }
.school-lose .result-chaser { left: 14%; transform: rotate(8deg) scaleY(.82); transform-origin: bottom; }
.school-lose .result-runner { right: 12%; transform: translateX(18px) rotate(-6deg); }
.school-lose .result-props::after { content: "💦  💦"; position: absolute; left: 34%; top: 28px; font-size: 25px; }
.kitchen-win { background: radial-gradient(circle, #fff3a6, #f2a641); }
.kitchen-lose { background: linear-gradient(#aeb5bd, #6e747b); }
.kitchen-win .result-props::after,
.kitchen-lose .result-props::after { content: ""; }
.kitchen-win .result-chaser { left: 50%; transform: translateX(-50%); }
.kitchen-win .result-runner { display: none; }
.result-copy { margin-bottom: 22px !important; font-size: 17px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.result-actions .comic-button { font-size: 17px; }

.modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(32,29,43,.72); }
.modal-card { position: relative; width: min(480px, 94vw); padding: 30px; border: 5px solid var(--ink); border-radius: 26px; background: var(--paper); box-shadow: 10px 11px 0 var(--orange); }
.modal-card h2 { margin: 3px 0 20px; font-size: 38px; }
.modal-close { position: absolute; right: 15px; top: 15px; width: 39px; height: 39px; border: 3px solid var(--ink); border-radius: 50%; background: white; font-size: 24px; font-weight: 900; cursor: pointer; }
.difficulty-options { display: grid; gap: 10px; }
.difficulty-option { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 3px solid var(--ink); border-radius: 13px; background: white; cursor: pointer; font-size: 18px; font-weight: 900; }
.difficulty-option.selected { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.difficulty-option span { color: var(--red); font-size: 14px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: 11px 18px; border: 3px solid var(--ink); border-radius: 999px; background: white; box-shadow: 4px 4px 0 var(--ink); font-weight: 900; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes current-pulse { to { filter: brightness(1.18); transform: translateY(-3px) rotate(2deg) scale(1.12); } }
@keyframes idle-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-1px) scale(1, 1.012); }
}
.action-idle .fallback-art { animation-name: idle-breathe-fallback; }
@keyframes idle-breathe-fallback {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1, 1.012); }
}
@keyframes snack-walk { 50% { transform: translate(3px,-3px) rotate(2deg); } }
@keyframes runner-run { 50% { transform: translateY(-7px) rotate(3deg) scaleX(.97); } }
@keyframes panic-run { 50% { transform: translate(7px,-10px) rotate(7deg) scale(1.06,.96); } }
@keyframes snack-chew { 50% { transform: rotate(-5deg) translateX(4px); } }
@keyframes backpack-panic { 50% { transform: translate(-9px,-7px) rotate(-18deg); } }
@keyframes dust-puff { 50% { transform: translateX(-8px) scale(1.12,.9); opacity: .48; } }
@keyframes attack { 35% { transform: translate(14px,-7px) rotate(9deg) scale(1.12); } }
@keyframes combo-four-attack { 35% { transform: translate(18px,-10px) rotate(12deg) scale(1.17); filter: brightness(1.18); } }
@keyframes rage-attack { 35% { transform: translate(20px,-6px) skewX(-12deg) scale(1.18); filter: saturate(1.7); } }
@keyframes combo-four-chase { 50% { transform: translate(8px,-7px) rotate(6deg) scale(1.1); filter: brightness(1.16); } }
@keyframes rage-chase { 50% { transform: translate(13px,-8px) skewX(-8deg) scale(1.15); filter: saturate(1.65) brightness(1.08); } }
@keyframes miss { 20%,60% { transform: translateX(-8px) rotate(-7deg); } 40%,80% { transform: translateX(8px) rotate(7deg); } }
@keyframes caught { 60% { transform: translateY(-24px) rotate(12deg) scale(.88); } 100% { transform: translateY(-18px) rotate(-8deg) scale(.9); } }
@keyframes escape { 45% { transform: translate(18px,-8px) rotate(-5deg) scale(1.08); } 100% { transform: translateX(48px) rotate(4deg); } }
@keyframes win-pose { to { transform: translateY(-8px) rotate(-4deg) scale(1.08); } }
@keyframes lose-pose { to { transform: translateY(18px) rotate(8deg) scaleY(.82); } }
@keyframes judgement { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(-10deg); } 25% { opacity: 1; transform: translate(-50%,-50%) scale(1.2) rotate(2deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-85%) scale(.9); } }
@keyframes combo-burst { 0% { opacity: 0; transform: scale(.2) rotate(-20deg); } 20%,75% { opacity: 1; transform: scale(1.12) rotate(-7deg); } 100% { opacity: 0; transform: scale(.8) rotate(3deg); } }
@keyframes final-chase-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.15) rotate(-14deg); } 18% { opacity: 1; transform: translate(-50%,-50%) scale(1.25) rotate(4deg); } 36% { transform: translate(-50%,-50%) scale(.94) rotate(-3deg); } 58% { opacity: 1; transform: translate(-50%,-50%) scale(1.05) rotate(2deg); } 100% { opacity: 0; transform: translate(-50%,-75%) scale(.9) rotate(-2deg); } }
@keyframes danger-edge { from { box-shadow: 9px 10px 0 var(--ink), inset 0 0 25px 8px rgba(255, 24, 24, .42); } to { box-shadow: 9px 10px 0 var(--ink), inset 0 0 58px 20px rgba(255, 24, 24, .88); } }
@keyframes card-in { from { transform: scale(.3) rotate(-10deg); } }
@keyframes count-pop { from { transform: scale(.15) rotate(-15deg); opacity: 0; } 35% { transform: scale(1.2) rotate(3deg); opacity: 1; } }

@media (max-width: 700px) {
  .menu-doodle { opacity: .35; }
  .score-panel, .chase-stage { margin-left: 9px; margin-right: 9px; }
  .chase-stage { height: auto; }
  .school-building { left: 17%; transform: scale(.78); transform-origin: bottom left; }
  .character { width: 91px; transform: scale(.77); transform-origin: bottom left; }
  .runner { --x: 45%; }
  .finish-line { right: 2%; transform: scale(.8); transform-origin: bottom right; }
  .hud { transform: scale(.82); transform-origin: top left; }
  .difficulty-chip { display: none; }
  .header-score, .header-combo { min-width: 58px; padding: 4px 6px; }
  .header-score { margin-left: auto; }
  .header-score strong, .header-combo strong { font-size: 14px; }
  .title-card { top: 10%; }
}

@media (max-height: 820px) and (min-width: 701px) {
  .game-header { height: 64px; padding-top: 7px; padding-bottom: 7px; }
  .score-panel { margin-top: 7px; margin-bottom: 7px; }
  .note { padding-top: 5px; padding-bottom: 5px; }
  .chase-stage { width: min(calc(100% - 18px), 1050px, calc(57vh * 1.918)); height: auto; }
  .game-controls { padding-top: 7px; min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}