@font-face{font-family:SchoolPixel;src:url('/pixel.woff2') format('woff2');font-display:swap}
:root{--school-blue:#29b0ff;--school-green:#54cc52;--school-ink:#193d57;--school-paper:#fffbea;--school-shadow:#236b8b;--blue:#0874af;--deep:#193d57;--green:#247a38;--paper:#fffbea;--ink:#193d57;--leaf:#54cc52;--sky:#29b0ff;--mint:#e2f8d5;--orange:#a84b19;--red:#ad3833;--muted:#456272;--line:#a4ccba;--shadow:#236b8b}
html body{margin:0;color:var(--school-ink);font-family:SchoolPixel,monospace;background-color:var(--school-blue);background-image:linear-gradient(0deg,#54cc52 0 12%,transparent 12%),url('/school-bg.png');background-size:100% 100%,cover;background-position:center;background-attachment:fixed}
body button,body input,body select,body h1,body h2,body h3,body p,body span,body strong,body b,body small,body label,body output,body div{font-family:SchoolPixel,monospace}
body button{border-radius:0!important;border:3px solid var(--school-ink);box-shadow:3px 3px 0 var(--school-ink);transition:transform 100ms steps(2),box-shadow 100ms steps(2)}
body button:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--school-ink)}
body button:active:not(:disabled){transform:translate(3px,3px);box-shadow:none}
body button:focus-visible,body input:focus-visible{outline:3px solid #a84b19;outline-offset:4px}
body input:not([type=range]){border-radius:0!important;border:3px solid var(--school-ink);background:#fffef7;color:var(--school-ink)}
body .primary,body .pixel-button.primary,body .next-round,body button.bg-blue-600{background:var(--school-green);color:var(--school-ink);border-color:var(--school-ink)}
body .eyebrow,body .hero-kicker{letter-spacing:1px;color:#236b8b}
body .page{background:transparent;padding:24px;min-height:100dvh}
body .hero-card,body .lesson-card,body .mission-card,body .result-card,body .ranking-board,body .board,body .tutorial-shell{border:4px solid var(--school-ink);border-radius:0;box-shadow:7px 7px 0 var(--school-shadow);background-color:var(--school-paper)}
body .hero-card h1,body .lesson-card h2,body .mission-card h2{letter-spacing:0;line-height:1.5}
body .hero-badge,body .card-tab,body .lesson-ribbon{background:#193d57;color:#fffbea;border-radius:0}
body .game-header,body .concept-banner,body .number-flow,body .term-box,body .score-chips>*{border-radius:0;border-color:var(--school-ink)}
body .game-header{background:#fffbea;box-shadow:4px 4px 0 #236b8b}
body .concept-banner{background:#e2f8d5}
body .hero-scene{background:#29b0ff url('/round2-bg.png') center/cover!important;border:4px solid #193d57!important;image-rendering:pixelated}
body .hero-scene:before{display:none!important}
body .clean-field{background:#54cc52 url('/school-bg.png') center top/100% auto no-repeat!important;border:4px solid #193d57!important;box-shadow:6px 6px 0 #236b8b}
body .clean-field:before{content:'SCHOOL FIELD · 02';position:absolute;top:92px;left:16px;padding:8px;background:#fffbea;border:2px solid #193d57;color:#193d57;font-size:11px;z-index:2;transform:none;width:auto;height:auto;border-radius:0}
body .clean-field:after{background:repeating-linear-gradient(0deg,transparent 0 31px,#ffffff14 32px),repeating-linear-gradient(90deg,transparent 0 31px,#ffffff14 32px);pointer-events:none}
body .map-topline{background:#fffbea;border-color:#193d57}
body .pixel-person *{border-radius:0!important}
body .route-label{paint-order:stroke;stroke:#fffbea;stroke-width:6px;fill:#193d57}
body .gym-shell{max-width:1180px;margin:auto;padding:18px 24px 32px}
body .game-toolbar{background:#fffbea;border:4px solid #193d57;box-shadow:5px 5px 0 #236b8b;margin-bottom:20px;padding:14px 18px;color:#193d57}
body .game-toolbar .eyebrow{color:#236b8b}
body .game-toolbar button{background:#dff4ff;color:#193d57}
body .scoreboard{background:#193d57;color:#fffbea;border-bottom:6px solid #54cc52;border-radius:0}
body .scoreboard strong{color:#fffbea;font-size:24px;text-shadow:2px 2px #0874af}
body .scoreboard small,body .home-label{color:#bde8ff}
body .court-wrap{background:#29b0ff;border-top:4px solid #193d57;border-bottom:4px solid #193d57}
body .court-wrap canvas{image-rendering:pixelated}
body .court-label{background:#dff4ff;color:#193d57}
body .mission{background:#e2f8d5}
body .message{background:#eef8ff;color:#193d57;border-bottom:2px solid #193d57}
body .vertex-formula{font-size:clamp(18px,2.2vw,27px)}
body .game-dialog{border:4px solid #193d57;border-radius:0;box-shadow:8px 8px 0 #236b8b}
body .game-dialog::backdrop{background:#193d5799;backdrop-filter:none}
body .dialog-close{background:#54cc52;color:#193d57}
body .text-slate-300{color:#456272}body .text-amber-300{color:#89510e}
body:has(.bowling-stage){background-image:url('/school-aisle.png');background-size:cover}
.bowling-stage{max-width:1000px;margin:28px auto;padding:24px;background:#fffbeaf5;border:4px solid #193d57;box-shadow:8px 8px 0 #236b8b;min-height:calc(100dvh - 64px)}
.bowling-stage>div{min-height:0}
.bowling-stage>div:has(>h1){min-height:65dvh;justify-content:center;background:url('/school-aisle.png') center/cover}
.bowling-stage h1{background:#fffbea;border:4px solid #193d57;padding:16px 24px;box-shadow:4px 4px 0 #54cc52}
.bowling-stage .bg-cover{border:4px solid #193d57}
.bowling-stage .bg-cover>p{background:#fffbeaf5;padding:12px;border:2px solid #193d57;line-height:1.8}
.bowling-stage .bg-cover>div.w-72{background:#fffbea;padding:12px;border:2px solid #193d57}
.bowling-stage .bg-neutral-900\/90{background:#193d57}.bowling-stage .bg-neutral-900\/90 .text-amber-300{color:#fffbea}
@media(max-width:700px){body .page{padding:12px}body .gym-shell{padding:12px}body .game-toolbar{flex-wrap:wrap;padding:12px}body .game-toolbar h1{font-size:20px}body .scoreboard{padding:12px 8px;gap:8px}body .scoreboard strong{font-size:19px}body .hero-card h1{font-size:28px}.bowling-stage{margin:12px;padding:12px;min-height:calc(100dvh - 24px)}.bowling-stage>div{padding:12px}.bowling-stage h1{font-size:22px}}
.pin-deck{position:absolute;left:12.5%;right:12.5%;top:10%;bottom:10%;background:repeating-linear-gradient(90deg,#c69b60 0 9%,#dcb578 9% 10%);border:3px solid #193d57;box-shadow:inset 0 0 0 4px #f6d69c}
[data-testid=lane] img[data-testid^=pin-]{filter:drop-shadow(2px 0 #193d57) drop-shadow(-2px 0 #193d57) drop-shadow(0 2px #193d57);z-index:2}
[data-testid=direction-arrow]{z-index:3;background:#fffbea;border:2px solid #193d57;line-height:1.1;color:#a84b19}
body .court-wrap canvas{max-height:none;aspect-ratio:48/25;width:100%;height:auto;object-fit:fill}
body .vertex-controls{grid-template-columns:minmax(0,1fr) minmax(180px,.65fr);gap:18px;padding:20px}
body .vertex-equation{min-width:0;grid-column:1/-1}
body .vertex-formula{flex-wrap:wrap;white-space:normal;gap:6px;line-height:1.7}
body .vertex-formula input{flex:0 0 60px;width:60px}
body .vertex-controls .shoot{justify-self:end;min-width:150px}
body .shoot small{color:#193d57}
@media(max-width:600px){body .vertex-controls{grid-template-columns:minmax(0,1fr);padding:14px}body .vertex-controls .shoot{width:100%;justify-self:stretch}body .scoreboard{flex-wrap:wrap}body .scoreboard>div{min-width:50px}body .mission{flex-wrap:wrap}body .game-toolbar nav{flex-wrap:wrap}body .vertex-hint{line-height:1.8}}
#ranking-open{margin:12px;background:#fffbea}
#ranking-screen{margin:24px auto;padding:24px;max-width:1050px;background:#fffbea;border:4px solid #193d57;box-shadow:6px 6px #236b8b}
#ranking-screen h1{font-size:clamp(24px,4vw,40px)}
#ranking-screen p{line-height:1.8}
.ranking-scroll{overflow-x:auto;margin:24px 0}
#ranking-screen table{width:100%;border-collapse:collapse;min-width:580px}
#ranking-screen th,#ranking-screen td{padding:12px;border:2px solid #193d57;text-align:center}
#ranking-screen th{background:#dff4ff}#ranking-screen td:nth-child(2){overflow-wrap:anywhere;max-width:200px}
#ranking-home{margin:12px}
#registration-screen{max-width:800px;margin:32px auto;padding:32px;background:#fffbea;border:4px solid #193d57;box-shadow:6px 6px #236b8b}
#registration-screen h1{font-size:clamp(24px,4vw,40px)}
#registration-form{display:flex;gap:16px;flex-wrap:wrap;margin:24px 0}
#registration-form label{width:100%}#registration-form input{min-width:0;padding:12px;max-width:100%}
body .court-wrap canvas{image-rendering:auto}
.coordinate-help{font-size:14px;line-height:1.8;margin:0}
.bowling-guide{max-width:650px;background:#fffbea;border:3px solid #193d57;padding:20px;line-height:1.9}
.bowling-guide h2{font-size:20px}.bowling-guide p{margin:14px 0}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep the photograph and every field coordinate in the same responsive plane. */
body:has(.game-page),body:has(.intro-page),body:has(.lesson-page),body:has(.tutorial-page),body:has(.finish-page){background:#528655 url('/round2-bg.png') center/cover fixed}
body .page{background:transparent}
body .hero-scene{background:url('/round2-bg.png') center/cover!important}
body .hero-scene>div{display:none}
body .clean-field{padding:0!important;min-height:0!important;background:#fffbea!important;align-self:start}
body .clean-field:before,body .clean-field:after,body .clean-field .field-stage:before,body .clean-field .field-stage:after{display:none!important}
body .clean-field .field-stage{position:relative;left:auto;bottom:auto;width:100%;max-width:none;aspect-ratio:1200/896;transform:none;background:url('/round2-bg.png') center/100% 100% no-repeat;container-type:inline-size}
body .clean-field .map-topline{border:0;border-bottom:3px solid #193d57;gap:12px;font-size:14px}
body .clean-field .map-legend{position:relative;bottom:auto!important;left:auto!important;right:auto!important;transform:none;max-width:none;width:100%;border:0;border-top:3px solid #193d57;font-size:12px}
body .clean-field .player-pin{width:50px;height:79px;transform-origin:50% 100%;zoom:1}
body .clean-field .player-pin>b{position:absolute;top:-25px;left:50%;transform:translateX(-50%);margin:0;padding:2px 5px;background:#fffbea;color:#193d57;text-shadow:none;white-space:nowrap}
body .clean-field .route-label{font-size:12px!important;stroke-width:4px}
body .clean-field .label-diagonal{text-anchor:start}
body .clean-field .label-vertical{text-anchor:middle}
body .clean-field .route-line{stroke-width:2;opacity:.8}
@media(max-width:600px){body .clean-field .pixel-person{transform:scale(.7);transform-origin:bottom center}body .clean-field .player-pin>b{top:0;font-size:12px}body .clean-field .map-topline{font-size:12px;flex-wrap:wrap}}
/* Responsive touch layout shared by the isolated round documents. */
.touch-aim{display:none;gap:10px;min-width:0}
.touch-aim label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.touch-aim output{margin-left:auto;font-variant-numeric:tabular-nums}
.touch-aim input[type=range]{width:100%;height:32px;margin:0;accent-color:var(--green);touch-action:pan-y}
@media(max-width:600px){
  .touch-aim{display:grid}
  html{scroll-padding-block:16px}
  html body{background-attachment:scroll}
  body *,body *:before,body *:after{box-sizing:border-box}
  body button{min-height:44px;touch-action:manipulation;max-width:100%;white-space:normal}
  body input:not([type=range]),body select{font-size:16px!important;max-width:100%;min-height:44px}
  body p{overflow-wrap:anywhere}
  body .page,body .gym-shell{width:100%;min-width:0;padding:10px 10px calc(20px + env(safe-area-inset-bottom))}
  body .board,body .mission-card,body .result-card,body .tutorial-shell{min-width:0;box-shadow:3px 3px 0 var(--school-shadow)}
  .bowling-stage{margin:8px;padding:8px;min-height:calc(100dvh - 16px);box-shadow:3px 3px var(--school-shadow)}
  .bowling-stage>div{width:100%;gap:14px;padding:10px}
  .bowling-stage .w-72{width:100%;max-width:100%}
  .bowling-stage h1{font-size:20px;padding:12px;line-height:1.6}
  .bowling-stage h2,.bowling-stage .text-xl{font-size:18px;line-height:1.6}
  .bowling-stage .text-lg{font-size:16px;line-height:1.8}
  .bowling-stage .bowling-guide,.bowling-stage .bowling-coach{padding:12px;font-size:13px;line-height:1.8;max-width:100%}
  .bowling-stage .ball-question{padding:12px;box-shadow:3px 3px #54cc52}
  .bowling-stage .ball-question>p{font-size:17px}
  .bowling-stage .ball-diagram{width:min(100%,240px)}
  .bowling-stage form{width:100%}
  .bowling-stage form input{flex-basis:120px;width:0;padding:10px}
  .bowling-stage form button{padding:10px 14px}
  body .game-header{gap:8px;padding:10px;flex-wrap:wrap}
  body .game-header .logo{font-size:10px;gap:5px}
  body .game-header .points{font-size:11px}
  body .concept-banner{margin:12px 0;gap:8px;padding:10px}
  body .concept-banner b{font-size:18px}
  body .concept-banner span{font-size:13px;line-height:1.6}
  body .game-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  body .mission-card{padding:16px}
  body .mission-card h2{font-size:24px;margin:12px 0}
  body .mission-copy{font-size:14px;line-height:1.7}
  body .number-flow{flex-wrap:wrap;padding:10px 4px}
  body .map-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:5px}
  body .map-legend span{margin:0;font-size:10px}
  body .answer-row input{width:100%;text-align:left}
  body .feedback{scroll-margin-top:16px}
  body .result-card{width:100%;padding:20px 14px}
  body .result-card h2{font-size:22px;overflow-wrap:anywhere}
  body .game-toolbar{margin-bottom:12px;gap:8px;padding:10px;box-shadow:3px 3px #236b8b}
  body .game-toolbar h1{font-size:19px}
  body .game-toolbar nav{margin-left:auto}
  body .scoreboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 6px}
  body .scoreboard .home-label{display:none}
  body .scoreboard>div{min-width:0;text-align:center}
  body .scoreboard strong{font-size:18px}
  body .scoreboard strong>span{font-size:11px}
  body .scoreboard small{font-size:8px;letter-spacing:0}
  body .chances{justify-content:center;gap:4px;height:22px}
  body .chances i{width:9px;height:9px}
  body .mission{padding:10px}
  body .mission h2{font-size:14px}
  body .mission p{font-size:11px;line-height:1.7}
  body .court-label{top:4px;left:4px;right:4px;background:transparent}
  body .court-label>span{display:none}
  body .court-label button{margin-left:auto;font-size:10px;min-height:32px;padding:4px 7px}
  body .message{display:block;font-size:12px;padding:10px;line-height:1.8}
  body .message>span{display:none}
  body .vertex-controls{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:12px}
  body .vertex-formula{font-size:18px;gap:4px;line-height:1.6}
  body .vertex-formula input{width:54px;padding:4px;flex-basis:54px}
  body .coordinate-help,body .vertex-hint{font-size:12px;line-height:1.8;margin:0}
  body .shoot{min-height:52px;font-size:17px;width:100%}
  body .shoot small{display:none}
  body .next-round{min-height:52px}
  body .result{padding:16px 12px}
  body .result-score h2{font-size:36px}
  body .result-score>span{font-size:22px;padding:8px 12px}
  body .result .primary{width:100%}
  #registration-screen,#ranking-screen{margin:12px;padding:16px;box-shadow:3px 3px #236b8b}
  #registration-form{gap:12px}
  #registration-form input,#registration-form button{width:100%}
  .ranking-scroll{scrollbar-width:thin;overscroll-behavior-x:contain}
}