:root{
  --ink:#17313a;--paper:#fff9dc;--blue:#1a7180;--sky:#bde8df;--sun:#ffd85a;
  --orange:#e86f42;--red:#ba3d3f;--green:#3d8c65;--chalk:#f8f1ce;
}
*{box-sizing:border-box}
html{background:#d8eee6;color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif}
body{margin:0;min-width:300px;background:linear-gradient(180deg,#9ed9d4 0,#e5f1dd 42%,#f1d49a 100%);overflow-x:hidden}
button,a{font:inherit}
button{color:inherit}
button:focus-visible,a:focus-visible{outline:4px solid #ffb400;outline-offset:3px}
[hidden]{display:none!important}
.school-book{width:min(1180px,100%);margin:auto;min-height:100vh;background:#fffdf0;border-inline:5px solid rgba(23,49,58,.16);box-shadow:0 0 50px rgba(23,49,58,.18)}
.school-header{height:52px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff7cf;border-bottom:5px solid var(--sun);font-weight:800}
.school-header a{color:#fff;text-decoration:none}
.school-header button{border:2px solid #fff4be;background:transparent;color:#fff;border-radius:4px;padding:6px 11px;cursor:pointer}
.screen{min-height:calc(100vh - 52px)}

.start-screen{display:grid;grid-template-columns:1.15fr .85fr;position:relative;overflow:hidden;background:#c4e7de}
.cover-scene{position:relative;min-height:650px;background:linear-gradient(#9fd8d6 0 42%,#88b878 42% 54%,#dbbd75 54%);border-right:7px solid var(--ink);overflow:hidden}
.cover-scene:before{content:"";position:absolute;inset:55% 0 0;background:repeating-linear-gradient(0deg,transparent 0 44px,rgba(255,255,255,.34) 45px 48px)}
.school-roof{position:absolute;left:12%;right:7%;top:18%;height:70px;padding:17px;background:#b4443e;color:#fff;text-align:center;font:900 24px/1 Georgia,serif;letter-spacing:8px;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.school-body{position:absolute;left:16%;right:11%;top:28%;height:245px;background:#f5dfa9;border:8px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:25px}
.school-body i{background:#b8e3df;border:6px solid var(--ink);box-shadow:inset 0 -12px rgba(255,255,255,.45)}
.school-body b{position:absolute;width:74px;height:114px;left:calc(50% - 37px);bottom:-7px;background:#d86c48;border:7px solid var(--ink)}
.signal-trail{position:absolute;left:7%;right:6%;top:63%;height:100px;border-top:13px dotted #fff9b1;transform:rotate(-5deg)}
.signal-trail span{position:absolute;width:23px;height:23px;background:var(--sun);border:4px solid var(--ink);transform:rotate(45deg)}
.signal-trail span:nth-child(1){left:28%;top:-17px}.signal-trail span:nth-child(2){left:55%;top:-17px}.signal-trail span:nth-child(3){left:80%;top:-17px}
.cover-runner{position:absolute;left:12%;top:66%;width:84px;height:84px;background:#fff5d2;border:7px solid var(--ink);border-radius:50% 50% 42% 42%}
.cover-runner:before{content:"";position:absolute;width:110px;height:54px;left:38px;top:44px;background:var(--blue);border:7px solid var(--ink);border-radius:45% 60% 35% 45%;transform:rotate(-8deg)}
.cover-runner:after{content:"";position:absolute;width:80px;height:18px;left:120px;top:58px;background:var(--sun);border:5px solid var(--ink);clip-path:polygon(0 20%,100% 0,100% 100%,0 80%)}
.opening-note{align-self:center;padding:50px 42px;background:#fffdf0;position:relative}
.opening-note:before{content:"";position:absolute;inset:18px;border:3px dashed #d7c79d;pointer-events:none}
.opening-note>*{position:relative}
.kicker{font:900 13px/1 monospace;letter-spacing:2px;color:var(--red)}
h1{font-size:clamp(34px,5vw,63px);line-height:1.18;margin:15px 0 25px;letter-spacing:.02em}
h1 em{font-style:normal;color:var(--red);background:linear-gradient(transparent 72%,#ffe67b 72%)}
.opening-note>p:not(.kicker){font-size:18px;line-height:1.9;font-weight:700}
.opening-note small{display:block;line-height:1.8;margin-top:14px}
.start-button{border:5px solid var(--ink);border-radius:2px;background:var(--sun);box-shadow:8px 8px 0 var(--ink);font-weight:900;font-size:20px;padding:15px 26px;cursor:pointer;transition:.15s transform,.15s box-shadow}
.start-button:hover{transform:translate(3px,3px);box-shadow:5px 5px 0 var(--ink)}
.record-strip{margin-top:30px;border-block:3px solid var(--ink);padding:12px 0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 15px}
.record-strip strong{font:900 34px/1 monospace;color:var(--red);grid-row:span 2}

.play-screen{background:#f7ecc8;padding-bottom:20px}
.hud-board{display:grid;grid-template-columns:repeat(3,1fr) 2fr;border-bottom:4px solid var(--ink);background:#fffdf0}
.hud-board>div{padding:9px 15px;border-right:3px solid var(--ink);display:flex;gap:9px;align-items:baseline}
.hud-board small,.place-ribbon small{font-weight:900;color:#65747a}.hud-board strong{font:900 24px/1 monospace}
.safety-cell{display:grid!important;grid-template-columns:1fr auto;align-items:center}.safety-cell i{grid-column:1/-1;height:12px;border:2px solid var(--ink);background:#e7d8b5}.safety-cell i b{display:block;height:100%;width:100%;background:var(--green);transition:width .3s}
.place-ribbon{min-height:74px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:18px;padding:8px 20px;background:#f8e181;border-bottom:4px solid var(--ink)}
.place-ribbon strong{display:block;font-size:24px}.place-ribbon p{margin:0;font-weight:800;line-height:1.5}.place-ribbon>span{background:#fffdf0;border:3px solid var(--ink);padding:7px 12px;font-weight:900;transform:rotate(-2deg)}
.arena{position:relative;width:100%;background:#a8d5d0;border-bottom:5px solid var(--ink);touch-action:pan-y;user-select:none}
#gameCanvas{display:block;width:100%;height:auto;max-height:66vh;touch-action:pan-y}
.warning-text{position:absolute;left:14px;top:14px;max-width:65%;background:#fffdf0e8;border:3px solid var(--ink);padding:8px 12px;font-weight:900;box-shadow:4px 4px 0 rgba(23,49,58,.4)}
.warning-text.danger{background:#ffe1ca;color:#7a2226}
.release-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);width:min(500px,86%);padding:22px;background:#fff8b8;border:6px solid var(--ink);box-shadow:10px 10px 0 rgba(23,49,58,.38);text-align:center;z-index:4}
.release-banner strong{display:block;font-size:28px;color:var(--green)}.release-banner span{display:block;margin-top:8px;font-weight:800;line-height:1.6}
.control-board{display:grid;grid-template-columns:190px minmax(150px,1fr) minmax(250px,1.3fr);gap:18px;align-items:center;padding:16px 20px;background:#fffdf0;border-bottom:3px dashed #9b8d64}
.move-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,48px);gap:5px}.move-pad button{border:3px solid var(--ink);background:#cbe8dd;font-size:22px;font-weight:900;cursor:pointer}.move-pad button:active{background:var(--sun)}
#upButton{grid-column:2}#leftButton{grid-row:2;grid-column:1}#downButton{grid-row:2;grid-column:2}#rightButton{grid-row:2;grid-column:3}
.aim-readout{border-left:6px solid var(--blue);padding-left:13px}.aim-readout small,.aim-readout span{display:block}.aim-readout strong{font-size:21px}.aim-readout span{font-size:13px}
.fire-button{border:5px solid var(--ink);background:var(--orange);color:#fff8dc;padding:9px 14px;min-height:82px;cursor:pointer;box-shadow:6px 6px 0 var(--ink)}.fire-button small,.fire-button b{display:block}.fire-button b{font-size:20px}.fire-button i{display:block;height:11px;margin-top:8px;background:#8a352f;border:2px solid #fff8dc}.fire-button i span{display:block;width:0;height:100%;background:#fff086}
.play-help{margin:13px 22px;font-weight:700;line-height:1.55}

.quiz-screen{display:grid;place-items:center;padding:28px;background:repeating-linear-gradient(0deg,#e0c891 0 31px,#ead7a9 32px 34px)}
.quiz-sheet{width:min(760px,100%);background:#fffdf0;border:5px solid var(--ink);padding:28px 34px;box-shadow:12px 12px 0 rgba(23,49,58,.32)}
.quiz-kicker{font-weight:900;color:var(--red);border-bottom:3px solid var(--ink);padding-bottom:8px}.quiz-map{height:90px;position:relative;border-bottom:6px solid var(--ink);margin:12px 0 20px;background:linear-gradient(90deg,#c8e5dd 0 25%,#f6dc8b 25% 50%,#c9dcac 50% 75%,#deb79a 75%)}
.quiz-map i{position:absolute;bottom:7px;width:38px;height:45px;background:#fff;border:4px solid var(--ink)}.quiz-map i:nth-child(1){left:8%}.quiz-map i:nth-child(2){left:34%}.quiz-map i:nth-child(3){left:65%}.quiz-map b{position:absolute;right:6%;bottom:0;width:10px;height:60px;background:var(--red)}
.quiz-sheet h2{font-size:clamp(22px,4vw,34px);line-height:1.5}.quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quiz-choices button{min-height:64px;text-align:left;border:3px solid var(--ink);background:#dceee7;padding:12px;font-weight:900;cursor:pointer}.quiz-choices button:hover{background:#fff2a8}.quiz-choices button:disabled{cursor:default}.quiz-choices button.correct{background:#cbe7b6}.quiz-choices button.wrong{background:#f2c2ad;text-decoration:line-through}
.quiz-feedback{margin-top:17px;padding:15px;border-left:8px solid var(--green);background:#f4e8bd}.quiz-feedback strong{font-size:21px}.quiz-feedback p{line-height:1.7}.quiz-feedback button{border:3px solid var(--ink);background:var(--sun);font-weight:900;padding:10px 18px;cursor:pointer}

.result-screen{display:grid;place-items:center;padding:30px;background:#86b8a1;position:relative;overflow:hidden}.result-poster{position:relative;width:min(760px,100%);background:#fff9d8;border:8px solid var(--ink);padding:34px;text-align:center;box-shadow:14px 14px 0 #396c60}.result-poster>*:not(.result-rays){position:relative}.result-rays{position:absolute;inset:0;background:repeating-conic-gradient(from 5deg at 50% 24%,rgba(255,216,90,.48) 0 9deg,transparent 9deg 20deg);opacity:.8}.result-poster>p:first-of-type{font:900 14px/1 monospace;letter-spacing:3px;color:var(--red)}.result-poster h2{font-size:clamp(28px,5vw,48px);margin:12px}.final-score{display:inline-flex;gap:16px;align-items:center;border-block:5px solid var(--ink);padding:12px 30px;margin:12px}.final-score strong{font:900 48px/1 monospace;color:var(--red)}.result-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.result-facts div{border:3px solid var(--ink);background:#e5edd0;padding:10px}.result-facts small,.result-facts b{display:block}.result-facts b{font-size:23px}.result-actions{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.result-actions>button:not(.start-button){border:4px solid var(--ink);background:#d6ebe4;padding:13px 20px;font-weight:900;cursor:pointer}.ranking-panel{margin-top:24px;text-align:left;background:#fffdf0!important;color:#17313a!important;border:4px solid var(--ink);padding:12px;max-height:55vh;overflow:auto}.ranking-panel *{color:#17313a}.ranking-panel .is-active,.ranking-panel [aria-selected="true"]{background:#17313a!important;color:#fff!important}

@media(max-width:800px){
  .start-screen{grid-template-columns:1fr}.cover-scene{min-height:350px;border-right:0;border-bottom:6px solid var(--ink)}.opening-note{padding:35px 25px}.school-body{height:150px}.school-roof{top:11%}.school-body{top:26%}.cover-runner{top:68%;transform:scale(.75)}
  .hud-board{grid-template-columns:repeat(3,1fr)}.hud-board>div{padding:7px 8px;display:block}.hud-board strong{font-size:19px}.safety-cell{grid-column:1/-1;display:grid!important}.place-ribbon{grid-template-columns:105px 1fr}.place-ribbon>span{grid-column:1/-1;justify-self:start}.control-board{grid-template-columns:175px 1fr;gap:10px}.fire-button{grid-column:1/-1}.aim-readout{align-self:stretch;padding-top:8px}.play-help{font-size:14px}
}
@media(max-width:700px){
  .school-header{font-size:12px;padding:0 9px}.school-header span{display:none}.screen{min-height:calc(100vh - 52px)}
  .place-ribbon{padding:7px 10px;gap:6px 10px}.place-ribbon p{font-size:13px}.place-ribbon strong{font-size:20px}
  .warning-text{font-size:12px;max-width:76%;padding:5px 7px}.control-board{padding:12px 10px}.move-pad{grid-template-columns:repeat(3,48px)}
  .quiz-screen{padding:16px 10px}.quiz-sheet{padding:20px 14px}.quiz-choices{grid-template-columns:1fr}.quiz-choices button{width:100%;min-width:0}.result-screen{padding:16px 10px}.result-poster{padding:25px 13px}.result-facts{grid-template-columns:1fr}.final-score{padding:10px 13px}.final-score strong{font-size:38px}
}
@media(max-width:390px){.hud-board strong{font-size:17px}.control-board{grid-template-columns:158px 1fr}.move-pad{grid-template-columns:repeat(3,44px)}.aim-readout strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}