:root{font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#183c50;background:#102d40;--blue:#1765c1;--yellow:#ffdc65;--ink:#183c50}*{box-sizing:border-box}body{margin:0}button{font:inherit;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:5px solid #f58c2c;outline-offset:3px}button:disabled{cursor:default}svg{display:block;width:100%;height:100%}.app{min-height:640px;height:100svh;display:flex;flex-direction:column;overflow:hidden}.hud{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;background:#12334a;color:white;z-index:5;box-shadow:0 2px 8px #00142325}.brand{font-weight:900;font-size:26px;letter-spacing:.04em;white-space:nowrap}.brand small{display:block;font-size:11px;letter-spacing:.22em;color:#bdd8e5;margin-top:2px}.tools{display:flex;gap:8px}.utility{color:inherit;min-height:44px;border:1px solid #52748a;border-radius:12px;background:#24485e;padding:8px 13px;font-size:15px;font-weight:700}.utility[aria-pressed=true]{color:#17334b;background:#ffdc65;border-color:#ffdc65}.progress{display:flex;list-style:none;gap:12px;margin:0;padding:0}.progress li{width:35px;height:35px;border:2px solid #728e9e;color:#cbdde5;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:17px}.progress li.current{background:#ffdc65;color:#183c50;border-color:#ffdc65;box-shadow:0 0 0 4px #ffdc651a}.progress li.done{background:#a8e5d5;color:#164537;border-color:#a8e5d5}.count{display:none}.play{flex:1;display:flex;flex-direction:column;min-height:0}.race-scene{position:relative;flex:1;min-height:250px;overflow:hidden;background:#a9dff5}.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%;transform:scale(1.06)}.track{position:absolute;inset:0;width:100%;height:100%}.route-label{position:absolute;top:20px;left:22px;z-index:2;padding:9px 14px;background:#153a50d9;border:1px solid #ffffff36;border-radius:10px;color:white;font-weight:700;font-size:15px;box-shadow:0 3px 10px #153a5020}.mission{position:absolute;top:17px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:17px;background:#fffffff5;border:3px solid white;border-radius:20px;padding:12px 22px;z-index:4;box-shadow:0 5px 0 #13385022;max-width:65%;white-space:nowrap}.sample-wrap{position:relative;width:74px;height:74px;display:grid;place-items:center;border:2px solid #bad0df;border-radius:12px;background:#f6faff;flex-shrink:0}.sample,.stamp{position:absolute;width:53px;height:53px;color:var(--blue)}.sample svg{fill:none;stroke:currentColor;stroke-width:5;stroke-linejoin:round}.stamp svg{fill:currentColor}.stamp{opacity:0}.stamped .stamp{animation:stamp-in .5s ease-out forwards}.stamped .sample{opacity:.1}h1{font-size:clamp(22px,2.8vw,31px);line-height:1.4;font-weight:900;letter-spacing:.03em;margin:0}.mission p{font-size:15px;margin:4px 0 0;color:#4b6876}.kart{position:absolute;z-index:3;bottom:-6px;left:50%;transform:translateX(-50%);width:clamp(150px,24vh,230px);height:auto;max-height:62%;object-fit:contain;filter:drop-shadow(0 10px 7px #12232870);transition:transform .3s}.race-scene.driving .kart{animation:kart-ride .7s ease-in-out infinite alternate}.speed-note{position:absolute;bottom:20px;left:23px;border-radius:12px;padding:10px 15px;background:#143449e0;color:white;font-size:17px;font-weight:700;z-index:4}.finish-flag{position:absolute;right:25px;top:20px;font-size:35px;filter:drop-shadow(0 2px 1px white)}.dock{position:relative;z-index:5;background:#f5f8fb;border-top:5px solid #fff;padding:13px 26px 12px;box-shadow:0 -6px 18px #1e33472a;flex-shrink:0}.choices{display:flex;gap:20px;max-width:650px;margin:auto}.choice{position:relative;flex:1;min-width:0;height:115px;border:3px solid #bacde0;border-radius:18px;background:white;color:var(--blue);box-shadow:0 5px 0 #d4e0e9;display:grid;place-items:center}.choice .shape{width:82px;height:82px}.choice svg{fill:currentColor;pointer-events:none}.choice:hover:enabled{border-color:var(--blue);background:#f4f8ff}.choice:active:enabled{transform:translateY(3px);box-shadow:0 2px 0 #d4e0e9}.choice.selected{border-color:#26846c;background:#e8f7ed;box-shadow:0 5px 0 #c1e0ce}.choice.quiet{opacity:.4}.bottom-row{max-width:980px;margin:11px auto 0;min-height:52px;display:flex;align-items:center;justify-content:center;gap:20px}.feedback{margin:0;font-size:21px;font-weight:800;text-align:center}.primary{min-height:50px;border:0;border-radius:13px;background:var(--yellow);color:#17334b;font-size:21px;font-weight:900;padding:10px 25px;box-shadow:0 4px 0 #d1aa3d;white-space:nowrap}.primary:active:enabled{transform:translateY(2px);box-shadow:0 2px 0 #d1aa3d}.primary:disabled{opacity:.55}.goal{position:absolute;inset:72px 0 0;z-index:8;display:grid;place-items:center;background:#13354845;padding:20px}.goal-card{background:#fffffff5;padding:28px 42px 32px;border-radius:28px;border:4px solid white;text-align:center;box-shadow:0 12px 50px #102d4040;max-height:100%;overflow:auto}.goal h1{font-size:43px}.goal p{font-size:20px;line-height:1.65;margin:10px 0 16px}.trophy{font-size:45px!important;line-height:1!important}.badges{display:flex;justify-content:center;gap:17px;margin:20px auto}.badge{width:77px;height:77px;border-radius:14px;display:grid;place-items:center;background:#eef5fc;color:var(--blue)}.badge svg{width:49px;height:49px;fill:currentColor}.goal .outro{font-size:17px;margin:22px 0 0}.dialog{max-width:580px;width:calc(100% - 32px);border:0;border-radius:22px;padding:27px;color:var(--ink);max-height:85svh;overflow:auto}.dialog::backdrop{background:#10283ba8}.dialog h2{font-size:24px;margin:0 0 15px}.dialog p,.dialog li{font-size:17px;line-height:1.8}.dialog ol{padding-left:25px}.dialog .setting{display:flex;align-items:center;gap:12px;padding:15px 0;font-size:17px;border-top:1px solid #d2e0e8}input[type=checkbox]{width:25px;height:25px;accent-color:var(--blue)}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.dialog-actions button{flex:1;white-space:nowrap}.dialog .primary{font-size:18px;min-height:48px;padding:10px 20px}.dialog .utility{color:var(--ink);background:#edf3f7;border-color:#c7d9e4}.dialog small{font-size:14px;color:#4d676e;line-height:1.7;display:block}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes stamp-in{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}@keyframes kart-ride{from{transform:translateX(-50%) rotate(-1deg)}to{transform:translateX(-50%) translateY(-3px) rotate(1deg)}}.less-motion .kart{animation:none!important}.less-motion .stamp{animation-duration:.1s!important}@media(prefers-reduced-motion:reduce){.kart{animation:none!important}.stamp{animation-duration:.1s!important}}
@media(min-height:900px){.race-scene{min-height:380px}.kart{width:260px}.dock{padding-top:20px;padding-bottom:22px}.choice{height:150px}.choice .shape{width:108px;height:108px}.bottom-row{margin-top:18px}.mission{top:35px}}
@media(max-width:800px){.hud{padding:12px 16px;gap:10px}.brand{font-size:21px}.progress{gap:7px}.progress li{width:29px;height:29px;font-size:15px}.tools{gap:6px}.utility{font-size:14px;padding:8px 10px}.route-label{top:auto;bottom:17px;left:13px;font-size:13px}.mission{max-width:90%;padding:11px 16px;gap:12px}.finish-flag{font-size:25px;right:13px;top:20px}.speed-note{display:none}.kart{width:190px}.dock{padding-left:18px;padding-right:18px}}
@media(max-width:540px){.app{min-height:690px}.hud{flex-wrap:wrap;min-height:92px;padding:10px 12px;gap:9px}.brand{font-size:22px}.brand small{font-size:9px}.tools{margin-left:auto}.progress{position:absolute;top:62px;left:50%;transform:translateX(-50%)}.progress li{width:22px;height:22px;font-size:12px}.mission{top:12px;max-width:94%;gap:10px;padding:9px 13px}.sample-wrap{width:59px;height:59px}.sample,.stamp{width:43px;height:43px}h1{font-size:21px;letter-spacing:0}.mission p{font-size:13px}.finish-flag{display:none}.kart{width:172px;bottom:1px}.choice{height:112px}.choice .shape{width:79px;height:79px}.choices{gap:14px}.dock{padding:12px 13px}.bottom-row{min-height:78px;flex-direction:column;gap:10px;margin-top:14px}.feedback{font-size:17px}.primary{font-size:19px;min-height:45px;padding:8px 21px}.goal{inset:92px 0 0}.goal-card{padding:20px}.goal h1{font-size:33px}.goal p{font-size:18px}.badge{width:65px;height:65px}.route-label{bottom:14px;font-size:12px;left:9px;padding:7px 9px}}
@media(min-width:801px){.kart{width:300px}} @media(min-width:541px) and (max-width:800px){.kart{width:270px}} @media(max-width:540px){.kart{width:240px}}

/* Large high-contrast shape targets and perspective course structures. */
.course-obstacle{position:absolute;z-index:3;line-height:1;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 8px 5px #17292370);will-change:top,left,font-size}.race-scene.driving .kart{animation:none!important;transition:none;will-change:transform}.race-scene.driving .backdrop{animation:none!important;transform:scale(1.12) translateX(var(--world-shift,0%));transition:transform .1s linear}.race-scene.boosting:before{animation-duration:.16s;opacity:.9}.race-scene.driving:before{mask-image:radial-gradient(ellipse at 50% 60%,transparent 20%,#000 95%)}
.sample-wrap{width:122px;height:122px;border-width:3px}.sample,.stamp{width:98px;height:98px}.mission{gap:20px;padding:11px 21px}.choice{height:159px}.choice .shape{width:138px;height:138px}.choices{max-width:800px;gap:24px}.dock{padding-top:14px;padding-bottom:13px}.portal{position:absolute;z-index:2;object-fit:fill;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 8px 5px #17292355);will-change:width,height,top,opacity}.tunnel-shade{position:absolute;inset:0;z-index:3;background:#142430;opacity:0;pointer-events:none}.mission{z-index:5}.kart{z-index:4}.speed-note,.route-label{z-index:5}
.race-scene.driving:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(102deg,transparent 0 7%,#fff8 7.2% 7.6%,transparent 7.8% 15%),repeating-linear-gradient(78deg,transparent 0 11%,#fff6 11.2% 11.7%,transparent 11.9% 22%);mix-blend-mode:screen;animation:speed-lines .24s linear infinite;opacity:.8}.race-scene.driving .backdrop{animation:world-rush .75s ease-in-out infinite alternate}.race-scene.driving .kart{animation:kart-rush .24s ease-in-out infinite alternate}.race-scene.driving .speed-note{background:#d45132;color:#fff;animation:boost-pulse .28s ease-in-out infinite alternate}@keyframes speed-lines{from{transform:translateY(-7%);opacity:.45}to{transform:translateY(9%);opacity:1}}@keyframes world-rush{from{transform:scale(1.06) translateX(-.3%)}to{transform:scale(1.13) translateX(.3%)}}@keyframes kart-rush{from{transform:translateX(-50%) translateY(1px) rotate(-2deg)}to{transform:translateX(-50%) translateY(-7px) rotate(2deg)}}@keyframes boost-pulse{from{transform:scale(1)}to{transform:scale(1.07)}}
@media(min-height:900px){.choice{height:185px}.choice .shape{width:158px;height:158px}.sample-wrap{width:140px;height:140px}.sample,.stamp{width:116px;height:116px}}
@media(max-width:800px){.sample-wrap{width:106px;height:106px}.sample,.stamp{width:88px;height:88px}.mission{padding:9px 14px;gap:13px}.choice .shape{width:126px;height:126px}.choice{height:148px}.choices{gap:20px}}
@media(max-width:540px){.app{min-height:760px}.mission{max-width:95%;padding:8px 12px;gap:11px}.sample-wrap{width:96px;height:96px}.sample,.stamp{width:78px;height:78px}.mission h1{font-size:19px}.mission p{font-size:12px}.choice{height:140px}.choice .shape{width:118px;height:118px}.choices{gap:13px}.bottom-row{min-height:78px}.route-label{display:none}}

.race-scene.driving .backdrop{transform:scale(1.18) translate(var(--world-shift,0%),var(--world-rise,0%))}
