:root{--ink:#25324a;--paper:#fff9e8;--rule:#9fc8db;--red:#d94b58;--blue:#236c9b;--sky:#dff3f4;--yellow:#ffd35a;--green:#4f9b72;--eraser:#ee8d91;--pencil:#ce7b32;--shadow:#172032}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-width:280px;min-height:100%;background:var(--ink)}body{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif;font-size:16px;line-height:1.4;color:var(--ink);overflow:hidden}button{min-width:44px;min-height:44px;font:inherit;font-size:14px;font-weight:900;cursor:pointer}button:focus-visible{outline:4px solid var(--yellow);outline-offset:2px}[hidden]{display:none!important}
.app-shell{height:100svh;height:100dvh;min-height:568px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--ink)}
.topbar{min-height:58px;padding:5px max(7px,calc((100vw - 1080px)/2));display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--paper);border-bottom:4px solid var(--red);background:var(--ink)}.brand{display:flex;align-items:center;gap:9px;min-width:0}.brand small{display:block;color:#b8deea;font-size:14px;font-weight:800;letter-spacing:.06em;white-space:nowrap}.brand h1{margin:0;max-width:48vw;font-size:clamp(17px,3.5vw,24px);line-height:1.08;overflow-wrap:anywhere}.paper-mark{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;color:var(--ink);background:var(--yellow);border:3px solid var(--paper);box-shadow:4px 4px 0 var(--red);font-weight:1000;transform:rotate(-4deg)}.top-actions{display:flex;gap:5px;flex-shrink:0}.top-actions button,#pauseButton,#rankingButton,.ranking-panel>button{padding:5px 9px;color:var(--paper);border:2px solid var(--paper);background:#344665;box-shadow:3px 3px 0 #111827}
.screen-stack{position:relative;width:min(1080px,100%);height:100%;min-height:0;margin:0 auto}.screen{width:100%;height:100%;min-height:0;background:var(--paper)}
.start-screen{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);overflow:hidden}.notebook-scene{position:relative;min-height:0;overflow:hidden;border-right:6px solid var(--ink);background:repeating-linear-gradient(0deg,var(--paper) 0 38px,var(--rule) 39px 41px)}.red-margin{position:absolute;inset:0 auto 0 13%;width:4px;background:var(--red);box-shadow:8px 0 0 rgba(217,75,88,.2)}.lane-label{position:absolute;left:17%;padding:3px 8px;color:var(--paper);background:var(--blue);font-weight:900;transform:rotate(-3deg)}.lane-label.tens{top:20%}.lane-label.ones{top:66%}.paper-plane{position:absolute;left:23%;top:46%;width:124px;height:66px;background:var(--yellow);clip-path:polygon(0 42%,100% 0,62% 100%,48% 59%);filter:drop-shadow(6px 7px 0 var(--shadow));transform:rotate(-5deg)}.paper-plane i{position:absolute;left:28%;top:42%;width:50%;height:5px;background:var(--red);transform:rotate(-18deg)}.bundle{position:absolute;width:66px;height:50px;display:grid;place-items:center;border:5px solid var(--ink);border-radius:9px;background:var(--eraser);box-shadow:6px 6px 0 var(--shadow);font-size:22px;font-weight:1000}.bundle::before,.bundle::after{content:"";position:absolute;top:-5px;bottom:-5px;width:7px;background:var(--yellow);border:2px solid var(--ink)}.bundle-a{right:26%;top:25%;transform:rotate(7deg)}.bundle-b{right:12%;top:44%;transform:rotate(-8deg)}.sum-card{position:absolute;right:7%;bottom:8%;width:116px;padding:9px 18px;color:var(--ink);background:#fff;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--blue);font-family:ui-monospace,monospace;font-size:22px;text-align:right;transform:rotate(3deg)}.sum-card b,.sum-card strong{display:block}.sum-card span{display:block;border-top:3px solid var(--ink)}.sum-card strong{color:var(--red);font-size:28px}.start-copy{align-self:center;padding:clamp(17px,3vw,38px)}.kicker{margin:0 0 4px;color:var(--blue);font-size:14px;font-weight:1000;letter-spacing:.05em}.start-copy h2,.quiz-screen h2,.result-screen h2,.help-card h2{margin:4px 0 9px;font-size:clamp(23px,4vw,39px);line-height:1.15}.start-copy p{margin:7px 0}.start-copy ul{margin:9px 0 14px;padding-left:1.3em}.primary-button{min-height:48px;padding:8px 18px;color:var(--ink);border:4px solid var(--ink);background:var(--yellow);box-shadow:6px 6px 0 var(--red)}
.game-screen{display:grid;grid-template-rows:auto auto minmax(160px,1fr) auto auto;overflow:hidden;background:var(--sky)}.hud{min-height:51px;display:grid;grid-template-columns:.75fr .9fr .75fr 1fr auto;color:var(--paper);background:var(--ink);border-bottom:3px solid var(--red)}.hud>div{min-width:0;padding:3px 8px;border-right:2px dashed #69809f;display:flex;flex-direction:column;justify-content:center}.hud small{font-size:14px;font-weight:900}.hud strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px}#pauseButton{min-width:84px;border-width:0 0 0 3px;box-shadow:none}
.calculation-strip{min-height:66px;padding:4px 8px;display:grid;grid-template-columns:88px minmax(0,1fr) 82px;align-items:center;gap:8px;background:var(--paper);border-bottom:4px solid var(--ink)}.vertical-calc{min-height:58px;padding:2px 8px;border-left:6px solid var(--red);font:900 18px/1.05 ui-monospace,monospace;text-align:right}.vertical-calc span{display:block}.vertical-calc span:last-child{padding-top:2px;border-top:2px solid var(--ink);color:var(--blue)}.calculation-strip p{margin:0;font-weight:900;overflow-wrap:anywhere}.charge-readout{text-align:center;border:3px solid var(--ink);background:var(--yellow)}.charge-readout small,.charge-readout strong{display:block}.charge-readout small{font-size:14px;font-weight:900}.charge-readout strong{font-size:24px;line-height:1}
.field-wrap{position:relative;min-height:160px;overflow:hidden;background:var(--paper)}#gameField{display:block;width:100%;height:100%;min-width:160px;min-height:160px;touch-action:pan-y;cursor:crosshair}.release-banner{position:absolute;left:50%;top:45%;min-width:min(76%,360px);padding:8px 12px;text-align:center;color:var(--ink);background:var(--yellow);border:5px solid var(--ink);box-shadow:7px 7px 0 var(--red);transform:translate(-50%,-50%) rotate(-2deg);pointer-events:none}.release-banner strong,.release-banner span{display:block}.release-banner strong{font-size:clamp(23px,5vw,38px)}.pause-panel{position:absolute;inset:0;z-index:5;display:grid;place-content:center;gap:12px;text-align:center;color:var(--paper);background:rgba(37,50,74,.92)}.pause-panel strong{font-size:24px}.pause-panel button{border:4px solid var(--paper);background:var(--yellow)}
.status-line{min-height:31px;margin:0;padding:4px 8px;overflow-wrap:anywhere;text-align:center;font-weight:900;color:var(--paper);background:#344665;border-top:3px solid var(--ink)}.flight-controls{min-height:74px;padding:5px 7px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(118px,.85fr);gap:8px;background:var(--paper);border-top:4px solid var(--ink)}.move-pad{display:grid;grid-template-columns:repeat(2,minmax(88px,1fr));gap:6px}.move-pad button{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--paper);border:3px solid var(--ink);background:var(--blue);box-shadow:3px 3px 0 var(--shadow);touch-action:manipulation}.move-pad button span{font-size:14px}.fire-button{padding:3px 9px;color:var(--paper);border:4px solid var(--ink);background:var(--red);box-shadow:4px 4px 0 var(--shadow);touch-action:manipulation}.fire-button span,.fire-button strong{display:block}.fire-button i{display:block;height:9px;border:2px solid var(--paper);background:#772b37}.fire-button i i{width:0;height:100%;border:0;background:var(--yellow)}
.quiz-screen{padding:clamp(10px,3vw,28px);overflow:hidden}.quiz-head{display:flex;justify-content:space-between;gap:10px;color:var(--blue);font-weight:900}.quiz-screen h2{max-width:900px;font-size:clamp(20px,4vw,32px)}.quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0}.quiz-choices button{min-height:58px;padding:7px 10px;overflow-wrap:anywhere;text-align:left;color:var(--ink);border:4px solid var(--ink);background:#e3f1ee}.quiz-choices button.correct{background:#a9d9aa;border-style:double}.quiz-choices button.wrong{background:#f4b4b7;text-decoration:line-through}.quiz-feedback{padding:10px 13px;border-left:8px solid var(--red);background:#f0e7c9}.quiz-feedback p{margin:5px 0 8px}
.result-screen{padding:clamp(10px,3vw,28px);overflow:hidden;display:grid;align-content:center}.result-screen h2{font-size:clamp(23px,4vw,36px)}.final-score{display:flex;align-items:baseline;gap:12px;padding:7px 12px;color:var(--paper);background:var(--ink);border:5px solid var(--yellow)}.final-score strong{font-size:clamp(36px,8vw,68px);line-height:1;color:var(--yellow)}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:9px 0;border:3px solid var(--ink)}.result-stats div{padding:6px;text-align:center;border-right:2px dashed var(--ink)}.result-stats div:last-child{border:0}.result-stats span,.result-stats b{display:block}.result-actions{display:flex;flex-wrap:wrap;gap:8px}
.ranking-panel{position:absolute;inset:8px;z-index:20;padding:12px;overflow:auto;color:var(--ink);background:var(--paper);border:6px solid var(--red)}.ranking-panel>button{float:right;color:var(--paper)!important}.ranking-panel button{color:var(--ink)!important;background:#e3f1ee!important;border-color:var(--ink)!important}.ranking-panel button[aria-pressed="true"]{color:var(--paper)!important;background:var(--ink)!important}.help-panel{position:absolute;inset:0;z-index:30;padding:10px;overflow:auto;background:rgba(23,32,50,.94)}.help-card{width:min(760px,100%);margin:0 auto;padding:16px;color:var(--ink);background:var(--paper);border:5px solid var(--yellow)}.help-card>button{float:right;color:var(--paper);border:3px solid var(--ink);background:var(--red)}.help-card li{margin-bottom:8px}
@media(max-width:640px){body{font-size:14px}.app-shell{min-height:568px}.topbar{min-height:56px;padding:4px 5px}.brand small{display:none}.paper-mark{width:36px;height:36px;flex-basis:36px}.brand h1{max-width:41vw}.top-actions button{padding:3px 6px}.start-screen{grid-template-columns:1fr;grid-template-rows:minmax(168px,38%) minmax(0,1fr)}.notebook-scene{border-right:0;border-bottom:5px solid var(--ink)}.paper-plane{width:88px;height:49px;left:23%}.bundle{width:50px;height:39px;border-width:4px;font-size:17px}.sum-card{width:91px;padding:5px 12px;font-size:17px}.sum-card strong{font-size:21px}.start-copy{padding:7px 11px 9px}.start-copy h2{font-size:21px}.start-copy p{margin:4px 0}.start-copy ul{margin:4px 0 7px}.start-copy .primary-button{width:100%;min-height:46px}.hud{min-height:48px;grid-template-columns:.67fr .82fr .72fr .9fr auto}.hud>div{padding:2px 4px}.hud strong{font-size:16px}#pauseButton{min-width:54px;padding:2px}.calculation-strip{min-height:61px;grid-template-columns:75px minmax(0,1fr) 65px;gap:5px;padding:3px 5px}.vertical-calc{min-height:53px;font-size:16px;padding:2px 5px}.charge-readout strong{font-size:21px}.status-line{min-height:30px;padding:4px 5px}.flight-controls{min-height:72px;padding:4px;gap:5px;grid-template-columns:minmax(0,1fr) minmax(100px,.72fr)}.move-pad{grid-template-columns:repeat(2,minmax(72px,1fr));gap:4px}.move-pad button{padding:2px;gap:4px}.fire-button{padding:2px 5px}.quiz-screen{padding:8px}.quiz-screen h2{margin:4px 0 7px;font-size:19px}.quiz-choices{grid-template-columns:1fr;gap:5px;margin:6px 0}.quiz-choices button{min-height:48px;padding:5px}.quiz-feedback{padding:7px 9px}.quiz-feedback p{margin:3px 0 5px}.result-screen{padding:8px}.result-screen h2{margin:4px 0;font-size:21px}.result-screen p{margin:6px 0}.final-score{padding:4px 8px}.final-score strong{font-size:38px}.result-stats{margin:6px 0}.result-stats div{padding:4px 2px}}
@media(max-height:620px) and (max-width:640px){.topbar{min-height:54px}.start-screen{grid-template-rows:165px minmax(0,1fr)}.start-copy ul{display:none}.hud{min-height:45px}.calculation-strip{min-height:58px}.flight-controls{min-height:68px}.move-pad button span{display:none}}
@media(max-height:567px),(max-width:279px){body{overflow:auto}.app-shell{height:auto;min-height:568px}.screen-stack{min-height:510px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}