:root{color-scheme:light;--ink:#29493c;--muted:#738476;--green:#315d48;--cream:#f7f8ed;--orange:#e98855;--cell:60px}*{box-sizing:border-box}body{margin:0;background:#e9f2e8;color:var(--ink);font-family:ui-rounded,'PingFang SC','Microsoft YaHei',system-ui,sans-serif}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #d66b32;outline-offset:5px}button{border:0;color:inherit}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}.parking-app{min-height:100svh;height:100dvh;max-width:1440px;margin:auto;padding:18px 36px 14px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 15% 38%,#f9faed 0,transparent 55%),#e9f2e8}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}.topbar a{color:var(--ink);text-decoration:none;font-size:13px;min-height:44px;display:flex;align-items:center}.topbar button{background:#fff7;border:1px solid #bbcbbc;border-radius:13px;padding:0 15px;min-height:44px;font-size:12px}.wordmark{font-size:10px;letter-spacing:3px;color:#7b8d7c}.heading{text-align:center;padding:12px 0 5px;flex:none}.eyebrow{font-size:10px;letter-spacing:4px;color:#7d8c78}.heading h1{font-size:clamp(28px,4vw,45px);letter-spacing:5px;margin:7px 0 3px;font-weight:800}.heading h1 span{color:#d87c4e}.heading h1 i{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:14px;border-radius:50%;width:32px;height:32px;background:#e6c59b;color:#fff;font-size:26px;font-style:normal;transform:rotate(-5deg)}.heading p{font-size:12px;letter-spacing:3px;color:var(--muted);margin:5px}.play-layout{display:grid;grid-template-columns:minmax(360px,520px) 240px;justify-content:center;align-items:center;gap:62px;min-height:0;flex:1}.play-column{min-height:0;align-self:center;width:100%}.board-meta{display:flex;align-items:center;justify-content:space-between;padding:0 26px;font-size:12px;letter-spacing:1px}.level-tag b{font-size:23px;margin:0 8px}.level-tag small{color:#8b9988;font-size:11px}.remaining{color:#6e806f}.remaining b{color:#315d48;font-size:18px;padding-left:4px}.remaining i{display:inline-block;width:6px;height:6px;border-radius:100%;background:#e98855;margin-right:7px}.scene{height:390px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}.board{position:relative;width:calc(var(--cell)*5);height:calc(var(--cell)*5);flex:none;border-radius:12px;background-color:#dce5d5;background-image:linear-gradient(#b7c7b550 1px,transparent 1px),linear-gradient(90deg,#b7c7b550 1px,transparent 1px);background-size:var(--cell) var(--cell);transform:rotate(-20deg) skewX(-6deg) scaleY(.91);box-shadow:0 0 0 9px #f7f7e9,0 0 0 13px #c3d0b9,0 13px 0 13px #aebb9e,0 26px 35px 15px #4367441e;}.scene-label{position:absolute;top:30px;right:25px;font-size:9px;letter-spacing:3px;color:#8b9b86;transform:rotate(-20deg)}.street-mark{position:absolute;bottom:15px;left:48px;font-size:10px;letter-spacing:2px;color:#98a68f;transform:rotate(-20deg)}.tree{position:absolute;width:37px;height:39px;background:#97b786;border-radius:45% 55% 40% 50%;box-shadow:inset -7px -8px #82a576,2px 9px 0 -3px #a4ae88;z-index:-1}.tree-a{left:30px;top:43px;transform:rotate(-22deg)}.tree-b{right:15px;bottom:55px;width:28px;height:31px}.tree-c{right:47px;bottom:37px;width:22px;height:25px;background:#b0c59c}.car{position:absolute;padding:5px;background:none;transition:filter .2s;z-index:2;min-width:44px;min-height:44px}.car:hover .car-body{filter:brightness(1.06)}.car:focus-visible{outline-offset:0;border-radius:12px}.car-body{position:absolute;inset:6px 5px;border-radius:11px 13px 13px 11px;background:var(--paint);box-shadow:inset 0 3px #ffffff65,inset 0 -5px #0002,0 6px 0 var(--dark),2px 10px 5px #314c3c33;display:flex;align-items:center;justify-content:center;pointer-events:none}.car-body:before{content:'';position:absolute;width:43%;height:74%;left:24%;top:9%;border-radius:7px;background:#537174;border:3px solid #ffffff45;box-shadow:inset 9px 0 #d9e8da90,inset -8px 0 #344e5330}.car-body:after{content:'';position:absolute;right:4px;top:6px;width:4px;height:6px;border-radius:3px;background:#fff7cb;box-shadow:0 17px #fff7cb}.car-arrow{position:absolute;right:10px;font-size:20px;font-weight:bold;color:#fff;line-height:1;text-shadow:0 1px 2px #0002}.car-wheel{position:absolute;left:14px;top:-3px;width:13px;height:5px;background:#3f504b;border-radius:3px;box-shadow:42px 0 #3f504b,0 40px #3f504b,42px 40px #3f504b;z-index:-1}.car-number{position:absolute;left:8px;bottom:5px;font-size:9px;color:#fff;font-weight:700;opacity:.85}.car.blocked{animation:bump .3s ease 2}.car.obstacle .car-body{outline:3px solid #c45f48;outline-offset:3px}.car.leaving{z-index:4;pointer-events:none;animation:drive .58s cubic-bezier(.45,0,.5,1) forwards}.feedback{font-size:12px;min-height:28px;text-align:center;color:#76806c;transition:color .2s}.feedback.error{color:#b85938}.actions{display:flex;justify-content:center;gap:10px}.actions button,.level-picker{height:44px;min-width:140px;border-radius:13px;background:#f8f9f0;border:1px solid #cbd6c3;display:flex;align-items:center;justify-content:center;font-size:12px;gap:9px}.actions button:hover{background:white}.level-picker{position:relative;min-width:125px}.level-picker select{appearance:none;position:absolute;inset:0;border:0;color:transparent;background:transparent;cursor:pointer;width:100%;border-radius:13px}.level-picker select option{color:var(--ink)}.level-picker:after{content:attr(data-label);font-weight:700}.level-picker span{order:2}.guide{border-left:1px solid #cad8c3;padding-left:35px}.guide-number{font-size:10px;letter-spacing:4px;color:#8f9e85}.guide h2{font-size:30px;line-height:1.5;letter-spacing:3px;margin:15px 0 16px}.guide p{font-size:12px;line-height:2.1;color:#7b8976}.mini-car{width:69px;height:33px;border-radius:8px;background:#df9868;box-shadow:0 5px #b4744e;transform:rotate(-12deg);color:#fff;padding:0 12px;text-align:right;font-size:24px;margin:20px 0 28px}.guide-foot{border-top:1px solid #d0dac7;padding-top:20px;font-size:10px;color:#778b70;white-space:nowrap}.guide-foot span{color:#cd9566;margin-right:7px}.guide .saved{font-size:9px;margin-top:17px;color:#91a087}.win-card{position:absolute;inset:40px 35px;z-index:20;border:1px solid white;border-radius:30px;background:#f9fbefed;backdrop-filter:blur(7px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 14px 50px #45653c25;text-align:center;animation:appear .4s ease}.win-icon{font-size:50px;color:#db9963}.win-card p{font-size:10px;letter-spacing:5px;color:#8d9e7a;margin:8px}.win-card h2{font-size:25px;margin:10px 0 25px}.win-card button{border-radius:15px;background:#335f49;color:white;min-height:48px;padding:0 35px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.parking-app.is-expanded{max-width:none;position:fixed;inset:0;z-index:1000;height:100dvh}.parking-app:fullscreen{max-width:none;height:100dvh}@keyframes drive{to{translate:var(--exit-x) var(--exit-y);opacity:0}}@keyframes bump{25%{translate:var(--bump-x) var(--bump-y)}75%{translate:0 0}}@keyframes appear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(min-height:850px) and (min-width:800px){:root{--cell:66px}.scene{height:460px}.heading{padding-top:35px}.play-layout{gap:85px}.guide h2{font-size:35px}}
@media(max-width:760px){:root{--cell:50px}.parking-app{padding:8px 14px 14px}.topbar .wordmark{display:none}.topbar a{font-size:12px}.topbar button{font-size:11px;padding:0 12px}.heading{padding:10px 0 9px}.heading h1{font-size:32px}.eyebrow{font-size:9px;letter-spacing:2px}.play-layout{display:flex;flex-direction:column;gap:0;justify-content:center}.play-column{max-width:440px}.guide{display:none}.board-meta{padding:0 12px}.scene{height:350px}.tree-a{left:15px;top:35px}.scene-label{right:7px;top:19px}.street-mark{left:15px;bottom:21px}.tree-b{right:9px;bottom:28px}.tree-c{right:40px;bottom:18px}.feedback{font-size:11px}.win-card{inset:35px 12px}}
@media(max-height:700px) and (min-width:761px){:root{--cell:50px}.heading{padding:0}.heading h1{font-size:30px}.heading .eyebrow,.heading p{display:none}.scene{height:320px}.play-layout{gap:40px}.guide h2{font-size:25px}.guide{padding-left:25px}.board-meta{padding:0 35px}}
@media(max-height:640px) and (max-width:760px){.heading{padding:0}.heading .eyebrow,.heading p{display:none}.heading h1{font-size:27px;margin:0}.scene{height:310px}.board-meta{font-size:10px}.level-tag b{font-size:18px}.feedback{min-height:25px}.play-layout{justify-content:center}}
@media(max-height:480px) and (orientation:landscape){.parking-app{padding:4px 14px}.topbar{height:44px}.heading{position:absolute;top:65px;right:4%;width:31%;text-align:left}.heading h1{font-size:25px;letter-spacing:2px}.heading h1 i{display:none}.heading p{display:block;font-size:10px;letter-spacing:1px}.play-layout{display:block;position:relative;margin:auto 0;flex:none}.play-column{max-width:none;width:100%;height:calc(100dvh - 58px);min-height:280px;position:relative}.scene{position:absolute;left:1%;top:0;width:59%;height:100%}.board-meta{position:absolute;right:4%;top:80px;width:31%;padding:0;display:block}.remaining{display:block;margin-top:8px}.feedback{position:absolute;right:4%;bottom:99px;width:31%;text-align:left;line-height:1.6}.actions{position:absolute;right:4%;bottom:4px;width:31%;flex-direction:column;gap:5px}.actions button,.level-picker{height:44px;min-width:0}.guide{display:none}.street-mark,.scene-label,.tree{display:none}.win-card{inset:10px 5px}.win-card h2{font-size:20px;margin:8px 0 14px}.win-icon{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important}}
/* Readable UI ink: minimum 4.5:1 for normal labels on the light surfaces. */
:root{--muted:#4e6550}
.wordmark,.eyebrow,.level-tag small,.remaining,.feedback,.guide-number,.guide p,.guide-foot,.guide .saved,.scene-label,.street-mark{color:#4e6550}
.feedback.error{color:#964427}
.heading h1 span{color:#a74c24}
.win-card p{color:#4e6550}
.car-arrow,.car-number{color:#172a20;text-shadow:none;opacity:1}
.car-number{font-size:10px}
/* Dense lots retain a compact overview; zoom gives touch users precise targets. */
.play-layout{grid-template-columns:minmax(360px,760px) 210px;gap:36px}.scene{height:min(58dvh,620px);min-height:260px}.board-viewport{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-gutter:stable;padding:12px;border:1px solid #bdcdb7;border-radius:14px;background:#e2ebdc}.board{--cell:24px;--grid-size:10;width:calc(var(--cell)*var(--grid-size));height:calc(var(--cell)*var(--grid-size));transform:none;box-shadow:0 0 0 3px #c3d0b9;flex:none;margin:auto;border-radius:5px}.scene-label,.street-mark,.tree{display:none}.car{min-width:0;min-height:0;padding:0}.car-body{inset:8% 5%;border-radius:calc(var(--cell)*.17);box-shadow:inset 0 1px #fff9,inset 0 -2px #0002,0 2px 0 var(--dark)}.car-body:before{border-width:1px;border-radius:3px;box-shadow:inset 3px 0 #d9e8da90}.car-body:after,.car-wheel{display:none}.car-arrow{right:8%;font-size:calc(var(--cell)*.7);font-weight:900}.car-number{left:8%;bottom:8%;font-size:clamp(7px,calc(var(--cell)*.22),11px)}.board.compact .car-number{display:none}.car.obstacle .car-body{outline:2px solid #a52c1c;outline-offset:0}.car.leaving{animation-duration:.26s}.zoom-tools{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;margin:8px 0 3px}.zoom-tools button{min-width:40px;min-height:40px;border:1px solid #b9c9af;background:#f8f9f0;border-radius:9px;font-size:12px}.zoom-tools button:disabled{opacity:.4}.zoom-tools span{font-size:11px;color:#4e6550;margin:0 3px}.zoom-tools #sound-toggle{padding:0 9px}.feedback{margin:5px 0;line-height:1.6}.win-card{inset:20px;pointer-events:auto}.car:focus-visible{outline-offset:-1px;z-index:5;outline-width:2px}
@media(max-width:760px){.parking-app{height:auto;min-height:100dvh;overflow:visible;padding:8px 12px 16px}.play-layout{display:flex}.play-column{max-width:600px}.scene{height:clamp(275px,49dvh,500px);min-height:0;margin-top:10px}.heading{padding:4px 0}.heading h1{font-size:28px;margin:2px}.heading p{margin:3px}.zoom-tools span{font-size:10px}.board-viewport{padding:8px}.guide{display:none}.actions{flex-wrap:wrap}.zoom-tools{gap:4px}}
@media(max-height:480px) and (orientation:landscape){.parking-app{height:auto;overflow:visible}.heading{position:static;width:auto;text-align:center}.heading h1{font-size:23px}.heading p{display:none}.play-layout{display:block;margin:0}.play-column{height:auto;min-height:0}.scene{position:relative;left:auto;top:auto;width:100%;height:65dvh;min-height:190px}.board-meta{position:static;width:auto;display:flex;padding:0 8px}.remaining{display:inline-block;margin:0}.feedback,.actions{position:static;width:auto;text-align:center}.actions{flex-direction:row}.actions button,.level-picker{min-width:130px}.zoom-tools{margin-top:6px}}

/* Keep departing transforms out of the viewport scrollable overflow.
   Clip at the lot edge without creating a nested scroll container. */
.board{overflow:clip}

/* Match the engine's swept rectangle: rotated hit area and visible car share
   the same 1.8 × 0.84-cell body, including diagonal cars. */
.car-body{inset:0}

/* The desktop row has less height than the viewport after its heading and
   navigation. Let the lot shrink, not the controls; scrolling remains a safe
   fallback when even the minimum lot cannot fit. Narrow/landscape pages keep
   their existing natural-height layout. */
@media (min-width:761px) and (min-height:481px){
 .parking-app{overflow-y:auto}
 .play-column{height:100%;display:flex;flex-direction:column;justify-content:safe center}
 .play-column>:not(.scene){flex-shrink:0}
}