:root{font-family:Be Vietnam Pro,system-ui,sans-serif;color:#2e4654;background:#fbf9f3;font-synthesis:none;-webkit-font-smoothing:antialiased;font-weight:500;color-scheme:light;--ink: #2e4654;--secondary: #6d7f82;--blue: #82afc6;--accent: #2f4b5c;--surface: #fffef9;--line: #eaece6}*{box-sizing:border-box}[hidden]{display:none!important}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none}button,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #80adc4;outline-offset:4px}button:disabled{cursor:wait;opacity:.55}button svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}#app{position:relative;isolation:isolate;height:100dvh;min-height:280px}.home-layout{position:absolute;inset:0}#game{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#e7f2ee}#game canvas{display:block}#game:focus{outline:none}#game:focus-visible{outline:3px solid #80adc4;outline-offset:-5px}body[data-scene=intro] .home-layout{inset:50% auto auto 50%;width:min(1120px,calc(100% - 128px));height:min(600px,calc(100% - 144px));transform:translate(-50%,-50%);display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-rows:1fr 1fr;grid-template-areas:"copy scene" "actions scene";column-gap:clamp(40px,7vw,104px);row-gap:32px;align-items:center}body[data-scene=intro] #game{grid-area:scene;position:relative;inset:auto;width:100%;height:100%;min-height:0;border-radius:46% 46% 32px 32px/40% 40% 32px 32px}.topbar{position:absolute;z-index:10;top:max(26px,env(safe-area-inset-top));right:max(32px,env(safe-area-inset-right));pointer-events:none}.parents-button{position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;color:#61746d;background:transparent;border:0;border-radius:50%;pointer-events:auto;touch-action:manipulation;user-select:none;transition:color .2s,background .2s}.parents-button svg{width:22px;height:22px;stroke-width:1.6}.parents-button:hover{background:#f0f1e9;color:var(--ink)}#intro{grid-column:1;grid-row:1 / 3;align-self:center;display:flex;flex-direction:column;gap:32px}.intro-content{grid-area:copy;align-self:stretch;min-width:0}.intro-actions{grid-area:actions;align-self:start}h1{margin:0;color:var(--ink);font-family:"Baloo 2",ui-rounded,system-ui,sans-serif;font-size:clamp(66px,7vw,98px);font-weight:700;line-height:.96;letter-spacing:-.045em}.title-accent{color:#83a9ba}.primary-button{display:flex;align-items:center;justify-content:center;min-height:54px;padding:14px 28px;border:0;border-radius:18px;background:var(--accent);color:#fffef8;font-size:13px;font-weight:600;transition:background .2s,transform .2s}.primary-button:hover{background:#3a5a6b}.primary-button:active{transform:scale(.98)}#start{min-width:176px}#tap-hint{position:absolute;bottom:max(7%,24px);left:50%;transform:translate(-50%);z-index:6;display:flex;align-items:center;gap:10px;color:#687c68;font-size:12px;font-weight:500;opacity:0;visibility:hidden;pointer-events:none;white-space:nowrap;transition:opacity .25s,visibility .25s}#tap-hint svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}body[data-mode=playing] #intro{display:none}body[data-mode=paused] #intro>*{visibility:hidden}body[data-mode=playing]:not(.has-driven) #tap-hint{opacity:1;visibility:visible}body[data-mode=playing] .parents-button,body[data-mode=paused] .parents-button{background:#fffef9e8;box-shadow:0 2px 12px #304d5c12}dialog{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;margin:auto;border:0;border-radius:24px;padding:24px;background:var(--surface);color:var(--ink);box-shadow:0 20px 70px #304d5c17}dialog::backdrop{background:#435e6433;backdrop-filter:blur(6px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.dialog-tools{display:flex;gap:2px;margin:-6px -8px -6px 0}h2{margin:0;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.035em}.icon-button{display:grid;place-items:center;width:44px;height:44px;padding:13px;border:0;border-radius:12px;background:transparent;color:#8b9998}.icon-button svg{width:18px;height:18px}.icon-button:hover{background:#f0f3ed;color:var(--ink)}.vehicle-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:min(328px,calc(100dvh - 392px));min-height:104px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d7dfd6 transparent;padding:2px;scroll-padding:2px}.vehicle-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:104px;padding:10px 4px;border:1px solid transparent;border-radius:16px;background:transparent;color:#64746b;font-size:11px;font-weight:500;transition:border-color .2s,background .2s}.vehicle-option img{display:block;width:100%;max-width:110px;height:58px;object-fit:contain}.vehicle-option:hover{background:#f4f5ef}.vehicle-option[aria-pressed=true]{border-color:#cbd8d2;background:#f0f4ef;color:var(--ink)}.settings-options{padding-top:16px;margin:20px 0 24px;border-top:1px solid var(--line)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:51px;font-size:13px;font-weight:500;cursor:pointer}.setting-row input{appearance:none;-webkit-appearance:none;flex-shrink:0;position:relative;width:40px;height:24px;margin:0;border:0;border-radius:20px;background:#e3e8e2;cursor:pointer;transition:background .2s}.setting-row input:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fffefa;box-shadow:0 1px 3px #3453330d;transition:transform .2s}.setting-row input:checked{background:#8fb4c7}.setting-row input:checked:after{transform:translate(16px)}#resume{width:100%;min-height:50px;border-radius:15px}.text-button{display:flex;align-items:center;justify-content:center;min-height:44px;margin:8px auto -8px;padding:8px 12px;border:0;background:none;color:#64746b;font-size:11px;font-weight:400}.text-button:hover{color:var(--ink)}.dialog-footer{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 16px}.dialog-footer .text-button{margin:8px 0 -8px}#install-help{width:min(380px,calc(100% - 32px))}.install-icon{display:block;border-radius:17px;margin:0 0 18px}.install-description,#offline-note{color:var(--secondary);font-size:12px;line-height:1.7}#install-steps{margin:20px 0;padding-left:20px;font-size:13px;line-height:1.8}#install-steps li+li{margin-top:8px}#offline-note{margin-bottom:22px}#close-install{width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.no-js{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:30px;background:var(--surface)}@media(max-width:850px)and (orientation:portrait){.topbar{top:max(18px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right))}body[data-scene=intro] .home-layout{inset:max(86px,calc(env(safe-area-inset-top) + 70px)) 28px max(28px,calc(env(safe-area-inset-bottom) + 18px));width:auto;height:auto;max-width:440px;max-height:820px;margin:auto;transform:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(120px,1fr) auto;grid-template-areas:"copy" "scene" "actions";gap:clamp(20px,3.5vh,32px);justify-items:center}body[data-scene=intro] #game{width:100%;max-height:420px;border-radius:46% 46% 27px 27px/40% 40% 27px 27px}#intro{display:contents}.intro-content{align-self:center;text-align:center}.intro-actions{align-self:center}h1{font-size:clamp(50px,14.5vw,66px)}#tap-hint{bottom:8%;font-size:12px}dialog{padding:22px}.vehicle-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-height:550px)and (orientation:landscape){.topbar{top:14px;right:20px}body[data-scene=intro] .home-layout{width:calc(100% - 104px);height:calc(100% - 76px);column-gap:44px;row-gap:22px}body[data-scene=intro] #game{border-radius:44% 44% 22px 22px/38% 38% 22px 22px}#intro{gap:22px}h1{font-size:clamp(45px,6.3vw,62px)}#start{min-height:49px;min-width:160px;font-size:12px}#tap-hint{bottom:5%;font-size:11px}dialog{max-height:calc(100dvh - 24px);padding:18px}.dialog-header{margin-bottom:12px}#settings[open]{display:grid;width:min(760px,calc(100% - 32px));grid-template-columns:minmax(0,1.35fr) minmax(180px,1fr);column-gap:24px;align-items:start}.dialog-header{grid-column:1 / -1}.vehicle-picker{grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1;grid-row:2 / 5;max-height:calc(100dvh - 112px);min-height:80px}.settings-options{grid-column:2;grid-row:2}#resume{grid-column:2;grid-row:3}.dialog-footer{grid-column:2;grid-row:4}#update-app{grid-column:2;grid-row:5}.vehicle-option{min-height:80px;gap:6px}.vehicle-option img{height:44px}.settings-options{margin:0 0 14px;padding-top:0;border-top:0}.setting-row{min-height:44px}#resume{min-height:48px}}@media(max-height:680px)and (orientation:portrait){body[data-scene=intro] .home-layout{top:max(76px,calc(env(safe-area-inset-top) + 64px));bottom:max(22px,env(safe-area-inset-bottom));row-gap:18px}h1{font-size:clamp(44px,13.5vw,54px)}#start{min-height:52px}}@media(max-width:360px){dialog{width:calc(100% - 24px);padding-inline:18px}.vehicle-picker{gap:6px}.vehicle-option{padding-inline:3px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
