:root { --ink:#28344d; --yellow:#ffd72e; --purple:#8d38da; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; min-height:100vh; background:#dce7f5; color:var(--ink); font-family:ui-rounded,"PingFang SC","Microsoft YaHei",sans-serif; user-select:none; }
.game-shell { width:min(100%,520px); min-height:100vh; margin:auto; overflow:hidden; position:relative; background:linear-gradient(135deg,#dbe5f1 0 48%,#cbd7e7 48%); padding-top:max(12px,env(safe-area-inset-top)); }
.topbar { height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; position:relative; z-index:3; }
.round-button { border:3px solid white; width:37px; height:37px; border-radius:50%; background:#45bbe9; color:white; font-size:26px; font-weight:bold; box-shadow:0 3px #207da8; line-height:28px; }
.level-pill { color:white; background:#394359; border:2px solid rgba(255,255,255,.8); border-radius:18px; padding:5px 18px; font-weight:800; font-size:15px; box-shadow:0 2px 3px #9caabd; }
.coins { color:#fff8ac; font-weight:900; text-shadow:0 2px #735d1a; }
.hero { height:164px; position:relative; overflow:hidden; }
.crowd { position:absolute; width:46%; height:142px; display:grid; grid-template-columns:repeat(9,1fr); align-content:start; gap:1px; opacity:.98; transform:skewY(-10deg); }
.crowd-yellow { top:3px; left:-6px; }.crowd-purple { bottom:-5px; right:-3px; transform:skewY(-10deg); }
.person { width:16px; height:20px; border-radius:9px 9px 5px 5px; border:1.5px solid rgba(59,55,93,.3); box-shadow:inset -3px -2px rgba(0,0,0,.13); position:relative; }
.person:before { content:""; position:absolute; width:8px; height:8px; border-radius:50%; top:-4px; left:2.5px; background:inherit; border:1px solid rgba(59,55,93,.25); }
.crowd-yellow .person { background:var(--yellow); }.crowd-purple .person { background:var(--purple); }
.hint { position:absolute; left:50%; top:78px; translate:-50% 0; white-space:nowrap; background:#fff; border-radius:13px; padding:7px 11px; font-size:12px; font-weight:bold; box-shadow:0 2px 5px #99a7b9; z-index:2; }
.road-wrap { height:102px; margin-top:-24px; position:relative; transform:skewY(-7deg); z-index:1; }
.road { height:100%; background:#778398; border-block:4px solid #f2f6fb; position:relative; overflow:hidden; }.road:after { content:""; position:absolute; inset:49% 0 auto; height:3px; background:repeating-linear-gradient(90deg,transparent 0 24px,#fff 24px 42px,transparent 42px 65px); }
.lane { width:3px; position:absolute; top:0; bottom:0; background:rgba(255,255,255,.45); }.lane-a{left:32%;}.lane-b{right:32%;}
.exit { position:absolute; color:#fff; font-size:10px; font-weight:800; background:#647186; border-radius:8px; padding:3px 7px; right:9%; }.exit-top { top:8px; }.exit-bottom{bottom:8px;}
.yard { min-height:405px; display:grid; grid-template-columns:repeat(5, 1fr); grid-template-rows:repeat(6,62px); gap:5px; padding:25px 19px 12px; position:relative; background:linear-gradient(155deg,#c9d5e5,#e4edf7); }
.yard:before { content:""; position:absolute; inset:14px; border:3px solid rgba(255,255,255,.65); border-radius:22px; pointer-events:none; }
.car { z-index:1; border:0; padding:0; cursor:pointer; position:relative; border-radius:10px; box-shadow:inset 0 3px rgba(255,255,255,.55), inset 0 -4px rgba(0,0,0,.18), 0 4px 3px rgba(52,67,91,.28); transition:transform .16s, filter .16s; color:#fff; }
.car:hover { filter:brightness(1.07); }.car:active { transform:scale(.93); }.car.blocked { animation:wiggle .26s 2; }
.car.horizontal { margin:9px 0; }.car.vertical { margin:0 9px; }
.car.compact { margin:7px; border-radius:12px; }
.car:before { content:""; position:absolute; background:rgba(230,246,255,.78); border-radius:4px; inset:18% 20%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.28); }.car.vertical:before { inset:20% 18%; }
.car:after { content:"➜"; position:absolute; font-size:20px; font-weight:900; left:50%; top:50%; translate:-50% -50%; text-shadow:0 2px rgba(0,0,0,.2); }.car.down:after { rotate:90deg; }.car.up:after{rotate:-90deg;}.car.left:after{rotate:180deg;}
.yellow { background:linear-gradient(135deg,#ffe95d,#efac00); }.purple { background:linear-gradient(135deg,#b359fa,#6618b2); }.blue { background:linear-gradient(135deg,#54cfff,#1976d2); }.red { background:linear-gradient(135deg,#ff7272,#cf243d); }.green { background:linear-gradient(135deg,#8de65b,#37a34b); }
.instruction { margin:-1px 0 0; color:#4a5870; font-weight:800; font-size:14px; text-align:center; }.legend { padding:12px; text-align:center; font-size:12px; color:#657188; }.yellow-dot,.purple-dot { display:inline-block; width:10px;height:10px;border-radius:50%;margin:0 4px 0 11px; }.yellow-dot{background:var(--yellow)}.purple-dot{background:var(--purple)}
.toast { position:fixed; left:50%; bottom:28px; translate:-50% 30px; opacity:0; background:#3d4b63; color:#fff; padding:9px 15px; border-radius:16px; font-size:13px; transition:.22s; z-index:10; }.toast.show { opacity:1; translate:-50% 0; }
.win { position:fixed; inset:0; z-index:20; background:rgba(28,41,61,.5); display:grid; place-items:center; }
.win[hidden] { display:none; }
.win-card { text-align:center; width:280px; border-radius:28px; padding:27px; background:#fff; box-shadow:0 12px 35px #233; }.win-card span{font-size:48px}.win-card h1{margin:8px 0;color:#4e3c7c}.win-card p{font-size:14px;color:#748096}.win-card button { background:#ffbd20;color:#fff;border:0;border-bottom:5px solid #d88a04;border-radius:15px;padding:11px 40px;font-size:17px;font-weight:900; }
@keyframes wiggle { 25%{transform:translateX(-6px)}75%{transform:translateX(6px)} }
@media (max-height:720px) { .hero{height:132px}.crowd{height:118px}.yard{min-height:350px;grid-template-rows:repeat(6,52px)}.road-wrap{height:85px} }