:root{font-family:Microsoft YaHei,PingFang SC,system-ui,sans-serif;color:#163c55;background:#a8d98e;font-synthesis:none;--orange:#ff763f}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:linear-gradient(135deg,#bce89f,#8fce92)}button{font:inherit}.crossroads-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none}.road{position:absolute;background:#71818a;box-shadow:inset 0 0 0 7px #d8e3e5}.road:after{content:"";position:absolute;inset:48%;background:repeating-linear-gradient(90deg,#fff7b2 0 42px,transparent 42px 78px)}.road-horizontal{left:-5%;right:-5%;top:37%;height:29%;transform:rotate(-2deg)}.road-horizontal:after{height:5px}.road-vertical{top:-8%;bottom:-8%;left:39%;width:24%;transform:rotate(4deg)}.road-vertical:after{width:5px;background:repeating-linear-gradient(0deg,#fff7b2 0 42px,transparent 42px 78px)}.grass{position:absolute;width:260px;height:150px;border-radius:50%;background:#439b4e47;box-shadow:0 0 0 18px #ffffff2e}.grass-one{left:3%;top:4%}.grass-two{right:4%;bottom:3%}.crosswalk{position:absolute;z-index:1;background:repeating-linear-gradient(90deg,#fffc 0 15px,transparent 15px 27px)}.crosswalk-top{width:18%;height:54px;left:41%;top:30%}.crosswalk-bottom{width:18%;height:54px;left:43%;bottom:26%}.crosswalk-left,.crosswalk-right{width:54px;height:20%;background:repeating-linear-gradient(0deg,#fffc 0 15px,transparent 15px 27px);top:42%}.crosswalk-left{left:34%}.crosswalk-right{right:32%}.traffic-sign{position:absolute;z-index:2;width:clamp(70px,7vw,112px);height:clamp(70px,7vw,112px);object-fit:contain;filter:drop-shadow(0 8px 6px #1e403e40)}.sign-stop{left:3.2vw;bottom:4.2vh;transform:rotate(-5deg)}.sign-pedestrian{right:3.2vw;top:5vh;transform:rotate(6deg)}.game-shell{position:relative;z-index:3;width:min(1180px,calc(100vw - 44px));height:min(744px,calc(100vh - 20px));margin:10px auto;display:grid;grid-template-rows:auto minmax(240px,1fr) minmax(110px,.38fr) auto;gap:clamp(8px,1.2vh,14px);padding:clamp(10px,1.3vw,18px);border:4px solid #ffffffc2;border-radius:34px;background:linear-gradient(160deg,#fffbe2eb,#e7f9ffe6);box-shadow:0 22px 55px #194a4d40,inset 0 0 35px #ffffffa6}.game-header{text-align:center}h1{margin:0;color:#174668;font-size:clamp(32px,4vw,52px);line-height:1.02;letter-spacing:.06em;text-shadow:0 3px 0 #fff}.instruction{margin:5px 0 0;font-size:clamp(16px,1.7vw,23px);color:#38749a;font-weight:700}.mission-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);min-height:0}.sound-slot{min-height:0;padding:10px;display:grid;grid-template-rows:66px 1fr;place-items:center;gap:4px;border:3px solid #fff;border-radius:28px;background:#ffffffd6;box-shadow:0 10px #37778d1f,0 18px 30px #1f586d24}.sound-slot:nth-child(1){border-color:#9ad5ff}.sound-slot:nth-child(2){border-color:#ffbd7e}.sound-slot:nth-child(3){border-color:#8fd9bc}.sound-button{width:64px;height:64px;padding:4px;border:0;border-radius:20px;background:linear-gradient(#fffdf3,#ffecb0);box-shadow:0 6px #e4a840,0 9px 18px #8a5b1738;cursor:pointer;transition:transform .16s}.speaker-icon{width:100%;height:100%;object-fit:contain;display:block}.sound-button:hover{transform:translateY(-2px) rotate(-2deg)}.sound-button:active{transform:translateY(4px);box-shadow:0 2px #e4a840}.sound-button:focus-visible,.action-button:focus-visible{outline:4px solid #215fb9;outline-offset:3px}.sound-button.is-playing{animation:sound-pulse .7s ease-in-out infinite alternate;outline:5px solid #ff763f40}.drop-zone{position:relative;width:100%;height:100%;min-height:118px;border:3px dashed #8ebfd9;border-radius:20px;background:linear-gradient(180deg,#dff6ffe6,#f0faffb8);overflow:hidden}.drop-zone:before{content:"车辆停这里";position:absolute;inset:48% 0 auto;text-align:center;color:#2e688773;font-weight:800}.drop-zone:has(.vehicle-card):before{display:none}.drop-zone[aria-invalid=true]:after{content:"再试试";position:absolute;right:9px;bottom:7px;padding:3px 10px;border-radius:999px;color:#9f2923;background:#fff;font-weight:900}.sound-slot.is-incorrect{border-color:#ff756f;background:#ffeae7;animation:gentle-shake .32s ease-in-out 2}.sound-slot.is-correct{border-color:#4dc286;background:#e7fff1}.vehicle-dock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:clamp(10px,1.6vw,20px);padding:8px clamp(28px,5vw,74px);border:3px solid #ffffffc7;border-radius:26px;background:linear-gradient(90deg,#ffda5c52,#74c99647)}.parking-space{min-width:0}.vehicle-card{position:relative;z-index:2;display:grid;grid-template-rows:1fr auto;place-items:center;min-height:88px;border-radius:20px;background:#fffffff0;box-shadow:0 7px #326a7f26,0 12px 18px #1f52731f;-webkit-user-select:none;user-select:none;touch-action:none;cursor:grab;transition:transform .16s,box-shadow .16s}.vehicle-card:hover{transform:translateY(-3px)}.vehicle-art{display:block;width:min(100%,250px);height:clamp(66px,8vw,108px);object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 5px #1a415b33)}.vehicle-card.is-dragging{cursor:grabbing;z-index:20;box-shadow:0 18px 36px #1f527347;transition:none;pointer-events:none}.drop-zone .vehicle-card{width:100%;height:100%;min-height:0;background:transparent;box-shadow:none}.drop-zone .vehicle-card:hover{transform:none}.drop-zone .vehicle-art{height:min(100%,150px)}.vehicle-name{padding:2px 12px 5px;border-radius:999px;color:#24445d;background:#fff;font-size:clamp(15px,1.4vw,20px);font-weight:900}.game-footer{min-height:58px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}.feedback{margin:0;padding:11px 18px;border:2px solid #ffffffe6;border-radius:17px;background:#ffffffe0;font-size:clamp(15px,1.35vw,19px);font-weight:800}.actions{display:flex;gap:10px}.action-button{min-width:118px;min-height:48px;padding:9px 20px;border:0;border-radius:17px;cursor:pointer;font-weight:900;box-shadow:0 5px #1c4a5f26}.action-button.primary{color:#fff;background:var(--orange)}.action-button.secondary{color:#31536d;background:#fff}.reward-overlay{position:absolute;z-index:50;inset:0;display:grid;place-items:center;pointer-events:none;background:#163c550f;border-radius:30px}.reward-overlay[hidden]{display:none}.reward-message{position:relative;z-index:2;margin:0;padding:24px 42px;border:5px solid #fff;border-radius:28px;color:#9a3f14;background:linear-gradient(135deg,#fff7c7,#ffd85e);box-shadow:0 18px #d4761d38,0 24px 55px #45330c40;font-size:clamp(28px,4vw,54px);font-weight:900;transform:scale(.4) rotate(-5deg);opacity:0}.reward-overlay.is-visible .reward-message{animation:reward-pop 1.8s ease both}.firework{position:absolute;width:180px;height:180px}.firework-one{left:15%;top:16%}.firework-two{right:14%;top:22%;transform:scale(.85)}.firework i{position:absolute;left:50%;top:50%;width:12px;height:62px;border-radius:999px;background:linear-gradient(#ff5d58,#ffd84e);transform-origin:50% 0;opacity:0}.firework i:nth-child(1){transform:rotate(0)}.firework i:nth-child(2){transform:rotate(45deg)}.firework i:nth-child(3){transform:rotate(90deg)}.firework i:nth-child(4){transform:rotate(135deg)}.firework i:nth-child(5){transform:rotate(180deg)}.firework i:nth-child(6){transform:rotate(225deg)}.firework i:nth-child(7){transform:rotate(270deg)}.firework i:nth-child(8){transform:rotate(315deg)}.reward-overlay.is-visible .firework i{animation:firework-burst 1.25s ease-out both}.firework-two i{background:linear-gradient(#2cc6e8,#7858e8);animation-delay:.18s!important}@keyframes sound-pulse{to{transform:scale(1.06) rotate(2deg)}}@keyframes gentle-shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes reward-pop{0%{opacity:0;transform:scale(.4) rotate(-5deg)}18%{opacity:1;transform:scale(1.1) rotate(2deg)}30%,78%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes firework-burst{0%{opacity:0;height:10px}18%{opacity:1}75%{opacity:1;height:72px}to{opacity:0;height:84px}}@media(max-height:820px){.game-shell{grid-template-rows:auto minmax(205px,1fr) minmax(92px,.34fr) auto;padding:10px 14px}h1{font-size:36px}.instruction{margin-top:2px;font-size:17px}.sound-slot{grid-template-rows:54px 1fr;padding:8px}.sound-button{width:52px;height:52px;border-radius:16px}.vehicle-card{min-height:72px}.vehicle-art{height:72px}.feedback{padding:9px 16px}.action-button{min-height:44px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.reward-overlay.is-visible .reward-message{opacity:1;transform:none}.firework{display:none}}@media(prefers-reduced-motion:reduce){.reward-overlay.is-visible .reward-message{animation:none!important;opacity:1;transform:none}}body{background:linear-gradient(#ffffff0d,#e7f6ff14),url(/assets/background/crossroads-illustration.png) center / cover no-repeat fixed}.crossroads-scene .road,.crossroads-scene .crosswalk,.crossroads-scene .grass,.crossroads-scene .traffic-sign{display:none}.game-shell{border-color:#ffffffe0;background:linear-gradient(160deg,#fffdeb6b,#e7f9ff4d);box-shadow:0 24px 60px #1a3e5847,inset 0 0 45px #ffffff61;-webkit-backdrop-filter:blur(2px) saturate(1.05);backdrop-filter:blur(2px) saturate(1.05)}.game-header{width:fit-content;margin-inline:auto;padding:4px 30px 7px;border-radius:22px;background:#ffffffad;box-shadow:0 7px 24px #2052701f}.sound-slot{background:#ffffffe6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.vehicle-dock{background:linear-gradient(90deg,#ffed99b8,#c2f0d7b8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.feedback{background:#fffffff0}
