*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{--ink:#173f48;--accent:#246f74;--paper:#fff5e5;--wash:#e6e9d8;--glow:#df9e50;font-family:ui-rounded,"Avenir Next",system-ui,sans-serif;color:var(--ink);background:#95caca}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-size:14px;min-height:44px;min-width:44px;border:0;border-radius:14px;padding:10px 15px;font-weight:750;cursor:pointer;color:var(--ink);background:var(--paper);touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #df9e50;outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}header{position:absolute;top:calc(16px + env(safe-area-inset-top));left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;z-index:3}.brand{display:flex;align-items:center;gap:10px}.brand>b{font-size:36px;position:relative;line-height:1}.brand>b span{font-size:14px;position:absolute;top:-6px;right:-7px;color:#e08d61}.brand>span{font-size:10px;font-weight:850;letter-spacing:2px}.brand small{display:block;font-size:9px;margin-top:3px;letter-spacing:1px}nav{display:flex;gap:8px}nav button{border:1px solid #27596366;border-radius:50%;width:44px;height:44px;padding:0;background:#fff5e588;font-size:20px;position:relative}#sound[aria-pressed="false"] i{position:absolute;top:8px;left:21px;width:1px;height:27px;background:currentColor;transform:rotate(40deg)}#hud{position:absolute;z-index:2;top:calc(80px + env(safe-area-inset-top));left:24px;right:24px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.chapter{background:#fff5e5c9;border-radius:14px;padding:9px 13px}.chapter small,.eyebrow,.objective small{display:block;font-size:9px;font-weight:850;letter-spacing:1.5px}.chapter strong{display:block;font-size:17px;margin-top:4px}.stats{display:flex;gap:6px}.stats>div{background:#fff5e5e8;border-radius:14px;min-width:78px;padding:8px 12px;text-align:center}.stats small{font-size:8px;letter-spacing:1px;display:block}.stats b{display:block;font-size:18px;margin-top:3px}#stage{position:absolute;inset:0}#world{width:100%;height:100%;display:block;touch-action:none}#play-ui{position:absolute;z-index:2;bottom:calc(14px + env(safe-area-inset-bottom));left:24px;right:24px;pointer-events:none}#play-ui button,#joystick{pointer-events:auto}.objective{width:min(490px,70%);margin:0 auto 10px;text-align:center;background:#fff5e5eb;border:1px solid #fff8;border-radius:20px;padding:12px 18px;box-shadow:0 8px 30px #184d4d12}.objective h1{font-size:21px;letter-spacing:-.5px;margin:4px 0}.objective p{margin:0;font-size:11px;line-height:1.5}.progress{height:4px;background:#2c676322;border-radius:5px;margin:8px auto 0;max-width:280px;overflow:hidden}.progress>span{display:block;height:100%;background:#d99c47;transform-origin:left;transition:transform .2s}.actions{display:flex;justify-content:center;gap:6px}.actions button{box-shadow:0 4px 12px #173c3020;min-width:48px}.actions button[data-action="brake"]{background:#ec9477;color:#3d322d}.actions button.selected{background:var(--accent);color:var(--paper)}.hint{text-align:center;font-size:10px;margin:8px 0 0;font-weight:650}#joystick{position:absolute;left:0;bottom:8px;border:2px solid #fff8;border-radius:50%;width:104px;height:104px;touch-action:none;background:#225e6540;box-shadow:inset 0 2px 18px #fff2}#joystick:before{content:'STEER';position:absolute;top:-22px;left:0;right:0;text-align:center;font-size:9px;font-weight:800;letter-spacing:1px}#joystick span{position:absolute;left:29px;top:29px;width:42px;height:42px;border-radius:50%;background:#fff5e5c9;border:2px solid #fff}#toast{position:absolute;z-index:6;top:calc(148px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:var(--paper);padding:11px 18px;border-radius:24px;font-size:12px;text-align:center;max-width:calc(100% - 28px);opacity:0;pointer-events:none;box-shadow:0 8px 25px #23423518}#toast.show{opacity:1}#overlay{position:absolute;z-index:5;inset:0;background:#173f483b;backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;overflow:auto}.intro,.dialog{background:var(--paper);border:1px solid #ffffff80;border-radius:28px;box-shadow:0 24px 90px #15282b33;max-width:900px;overflow:hidden}.intro{display:grid;grid-template-columns:1.2fr 1fr}.intro>img{width:100%;height:100%;object-fit:cover;min-height:350px}.intro>div{padding:32px}.intro h2,.dialog h2{font-size:40px;line-height:1.03;letter-spacing:-1.7px;margin:18px 0 14px}.intro p,.dialog>p{line-height:1.65;font-size:14px}.intro .eyebrow{font-size:9px}.intro a,.dialog>a{font-size:12px;display:block;text-align:center;margin-top:16px;min-height:28px}.primary{background:var(--accent);color:var(--paper);display:block;width:100%;font-size:15px;padding:15px 22px;margin-top:20px}.secondary{background:transparent;display:block;width:100%;margin-top:6px;font-size:12px}.save-note{font-size:10px!important;opacity:.7;text-align:center;margin:12px 0}.dialog{width:min(510px,100%);padding:28px;display:flex;flex-direction:column;max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto}.dialog>*{flex-shrink:0}.dialog h2{font-size:32px;margin-top:12px}.dialog>p{font-size:13px}.results{display:flex;gap:8px;margin:18px 0}.results>div{flex:1;background:var(--wash);border-radius:16px;padding:14px 8px;text-align:center}.results b{display:block;font-size:22px}.results small{display:block;font-size:10px;margin-top:4px}#instructions{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}#instructions ol{padding-left:22px;font-size:13px;line-height:1.8}#instructions p{font-size:11px;line-height:1.6}.intro-links{display:flex;gap:6px;margin-top:6px}.intro-links button{flex:1;width:auto;min-width:0;font-size:11px;padding:9px 6px;margin:0;background:var(--wash)}.intro{max-height:calc(100dvh - 28px);overflow-y:auto}
@media(max-width:600px){header{left:14px;right:14px;top:calc(12px + env(safe-area-inset-top))}.brand>span{font-size:9px;letter-spacing:1px}.brand small{font-size:8px}.brand>b{font-size:31px}nav{gap:5px}#hud{left:12px;right:12px;top:calc(70px + env(safe-area-inset-top));gap:4px}.chapter{padding:8px}.chapter strong{font-size:12px;max-width:100px}.chapter small{font-size:8px}.stats{gap:4px}.stats>div{min-width:56px;padding:7px}.stats b{font-size:15px}.stats small{font-size:7px}#play-ui{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom))}.objective{width:100%;margin-bottom:9px;padding:9px 10px}.objective h1{font-size:17px}.objective p{font-size:10px}.objective small{font-size:8px}.actions{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));margin-left:104px;gap:5px}.actions button{padding:8px 5px;font-size:13px;min-width:44px}.hint{font-size:9px;text-align:right;margin-left:104px;min-height:22px}#joystick{width:90px;height:90px;bottom:32px}#joystick span{left:22px;top:22px}#joystick:before{top:-18px}.intro{display:block;width:min(420px,100%)}.intro>img{height:180px;min-height:0;object-fit:cover}.intro>div{padding:18px 22px}.intro h2{font-size:30px;margin:10px 0}.intro p{font-size:12px}.primary{margin-top:14px}.intro a{margin-top:8px}#overlay{padding:14px}.dialog{padding:23px}.dialog h2{font-size:29px}#toast{top:calc(133px + env(safe-area-inset-top));font-size:11px;width:max-content}}
@media(max-width:360px){.brand>span{display:none}.stats>div{min-width:53px}.chapter strong{max-width:91px}.objective p{font-size:9px}.actions{margin-left:98px}.hint{margin-left:98px}.intro>img{height:145px}.intro>div{padding:15px 20px}}
@media(max-height:480px) and (min-width:600px){header{top:10px;left:18px;right:18px}.brand small{display:none}#hud{top:65px;left:18px;right:18px}.stats>div{padding:6px 12px}.stats b{font-size:15px}.chapter strong{font-size:14px}#play-ui{left:18px;right:18px;bottom:8px}.objective{width:340px;padding:7px 12px;margin-bottom:5px;margin-left:auto;margin-right:0}.objective h1{font-size:15px;margin:2px 0}.objective small{display:none}.progress{display:none}.actions{justify-content:flex-end}.hint{text-align:right;font-size:9px}.intro{max-width:740px;grid-template-columns:1fr 1fr}.intro>img{min-height:260px}.intro>div{padding:18px 24px}.intro h2{font-size:29px;margin:9px 0}.intro p{font-size:11px}.primary{margin-top:12px}.dialog{padding:16px 24px}.dialog h2{font-size:24px;margin:5px 0}.dialog>p{font-size:11px;margin:6px 0}.results{margin:9px 0}.results>div{padding:8px}#overlay{padding:10px}#instructions ol{font-size:11px;line-height:1.6;margin:6px 0}#instructions p{margin:6px 0}.dialog>a{margin-top:7px}#joystick{bottom:8px;width:90px;height:90px}#joystick span{left:22px;top:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
@media(max-width:600px){#joystick{bottom:24px}}
@media(max-width:600px) and (max-height:700px){#stage{bottom:150px}}
@media(max-height:480px) and (min-width:600px){#stage{right:355px}.actions{width:330px;margin-left:auto;gap:4px}.actions button{padding:9px 7px;min-width:44px}.objective{width:330px}.hint{max-width:330px;margin-left:auto}}
canvas:focus-visible{outline:2px solid #ffffff55;outline-offset:-3px}
body{--ink:#f4e7d3;--accent:#ec9c79;--paper:#222641;--wash:#34354f;--glow:#f0be7b;background:#151a34;color:var(--ink)}#stage{inset:133px 18px 190px;border:1px solid #ccc4ed22;border-radius:32px;overflow:hidden;background:#1d213e}header nav button{background:#ffffff0a;border-color:#aaa4cf44}.brand>b span{color:#ec9c79}.chapter,.stats>div{background:#30314ee8}.objective{background:#272b47ed;border-color:#d5c5e522}.primary{color:#23253d}.actions button{background:#3c3c57;color:#f3e3cf}.actions button.selected{background:#615272}.actions button[data-action="deliver"]{background:#e8a07e;color:#25263d}.actions button[data-action="brake"]{background:#42455e;color:#f2dfce}#joystick{background:#ffffff0a;border-color:#d0c8ed44}#joystick span{background:#dcd1e1aa;border-color:#f1d9c9}.intro .eyebrow,.dialog .eyebrow{color:#ebb89a}.dialog,.intro{border-color:#d7c8e633}.intro>img{object-position:center}.dialog .secondary,.intro .secondary{color:#e7ddf0}.objective p{color:#c6bfd3}.hint{color:#b7b0c9}.progress>span{background:#efa781}#toast{background:#41405a;color:#ffefd8}.results>div{background:#383952}.objective{max-width:560px}canvas:focus-visible{outline:2px solid #f2c18b55;outline-offset:-3px}
@media(max-width:600px){#stage{inset:126px 8px 215px;border-radius:24px}.actions{display:flex;gap:5px;margin-left:103px;flex-wrap:wrap;justify-content:flex-end}.actions button{flex:1;font-size:11px;padding:8px 6px}.actions button[data-action="course"]{flex-basis:100%}.hint{font-size:8px}.objective{padding:9px 10px}.objective h1{font-size:16px}#joystick{bottom:25px}.objective p{font-size:9px}.stats b{font-size:16px}.chapter strong{max-width:110px;font-size:11px}}
@media(max-width:600px) and (max-height:700px){#stage{inset:122px 7px 207px}.objective{padding:7px 9px}.objective small{display:none}.objective h1{font-size:14px}.objective .progress{margin-top:5px}.hint{font-size:8px}.actions button{font-size:10px}.chapter strong{max-width:95px}}
@media(max-height:480px) and (min-width:600px){#stage{inset:119px 360px 12px 16px;border-radius:24px}.objective{width:330px}.actions{width:330px}.actions button{flex:1}#joystick{bottom:5px}.hint{max-width:330px}.chapter strong{font-size:12px}.chapter{padding:7px 10px}}