.traffic-game{position:relative;width:min(100%,520px);margin:0 auto;color:#25424b}
.traffic-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
.traffic-hud>div{padding:7px 5px;border:2px solid #a6c3b7;border-radius:14px;background:#f1faf2;box-shadow:0 3px 0 #c1d8c7;text-align:center}
.traffic-hud small{display:block;font-size:11px;font-weight:800;color:#627e75}
.traffic-hud strong{display:block;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.traffic-hud [data-gridlock]{color:#ce5f54}
.traffic-scene{position:relative;overflow:hidden;width:100%;height:310px;border:4px solid #3b6b72;border-radius:23px;background:repeating-linear-gradient(0deg,#84bb99 0 26px,#8ec7a3 26px 52px);box-shadow:inset 0 0 0 3px #d1e9c6,0 6px 0 #648b80;isolation:isolate}
.traffic-road{position:absolute;background-color:#536575;box-shadow:inset 0 0 0 3px #ecf1dd66}
.traffic-road-ns{top:-4%;bottom:-4%;left:36%;width:28%;background-image:linear-gradient(90deg,transparent 0 48%,#e8dfb9 48% 52%,transparent 52%)}
.traffic-road-ew{left:-4%;right:-4%;top:36%;height:28%;background-image:linear-gradient(0deg,transparent 0 48%,#e8dfb9 48% 52%,transparent 52%)}
.traffic-road-ns:after,.traffic-road-ew:after{content:'';position:absolute;background:#536575}
.traffic-road-ns:after{left:0;right:0;top:36%;height:28%}
.traffic-road-ew:after{top:0;bottom:0;left:36%;width:28%}
.traffic-crosswalk{position:absolute;z-index:1;top:35%;bottom:35%;left:65%;width:17%;background:repeating-linear-gradient(0deg,#f3f5e6 0 7px,transparent 7px 13px);opacity:.88}
.traffic-light{position:absolute;z-index:2;width:22px;height:22px;border:4px solid #2d404c;border-radius:50%;background:#e47168;box-shadow:0 2px 0 #273c43,0 0 8px #eb716a}
.traffic-light.is-green{background:#7de9a2;box-shadow:0 2px 0 #273c43,0 0 12px #7de9a2}
.traffic-light-ns{left:32%;top:27%}.traffic-light-ew{right:27%;bottom:32%}.traffic-light-walk{right:13%;top:31%}
.traffic-vehicle{position:absolute;z-index:3;transform:translate(-50%,-50%);font-size:44px;filter:drop-shadow(0 4px 3px #192c4377);will-change:left,top}
.traffic-vehicle[hidden]{display:none}
.traffic-vehicle.is-ns{transform:translate(-50%,-50%) rotate(90deg)}
.traffic-vehicle.is-ew{transform:translate(-50%,-50%)}
.traffic-vehicle.is-walk{font-size:36px}
.traffic-scene-label{position:absolute;z-index:3;left:50%;bottom:10px;transform:translateX(-50%);min-width:140px;padding:4px 11px;border:2px solid #37656a;border-radius:20px;background:#fff6dbed;color:#38585d;font-size:12px;font-weight:900;text-align:center;white-space:nowrap}
.traffic-queues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:16px 0 10px}
.traffic-queue{display:grid;justify-items:center;gap:2px;min-width:0;padding:7px 3px;border:2px solid #a8c6b9;border-radius:13px;background:#fffdf1;box-shadow:0 3px 0 #c9d8c0;text-align:center}
.traffic-queue.is-emergency{border-color:#e5726a;background:#fff0e7}
.traffic-queue-title{font-size:12px;font-weight:900;color:#56736d}
.traffic-queue strong{font-size:21px;line-height:1.1}
.traffic-queue-icons{overflow:hidden;max-width:100%;height:20px;font-size:17px;white-space:nowrap}
.traffic-queue small{font-size:10px;font-weight:700;color:#766b69;white-space:nowrap}
.traffic-meter{overflow:hidden;width:84%;height:6px;border-radius:10px;background:#e6dccb}
.traffic-meter i{display:block;width:0;height:100%;border-radius:inherit;background:#75c797}
.traffic-meter i.is-low{background:#e36e63}
.traffic-switches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.traffic-switches button{display:grid;justify-items:center;gap:1px;min-height:65px;padding:5px 3px;border:2px solid #6b918b;border-radius:15px;background:#e6f0e7;color:#345253;font-family:inherit;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 0 #9fb8aa}
.traffic-switches button[aria-pressed=true]{border-color:#37846d;background:#c4ead0;box-shadow:0 4px 0 #86b497}
.traffic-switches button span{font-size:22px;line-height:1}
.traffic-switches button strong{font-size:14px;line-height:1.1}
.traffic-switches button small{font-size:10px;color:#4e6d66}
.traffic-switches button:disabled{opacity:.55;cursor:default}
.traffic-game .toy-status{min-height:2.5em;margin:9px 0;text-align:center}
.traffic-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.traffic-controls .button{min-width:0;padding:7px 2px;font-size:14px;white-space:nowrap}
.traffic-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;border-radius:20px;background:#274957a8;backdrop-filter:blur(2px)}
.traffic-overlay[hidden]{display:none}
.traffic-dialog{width:min(100%,350px);padding:23px 19px;border:3px solid #547c78;border-radius:21px;background:#fffdf0;box-shadow:0 8px 0 #23414894;text-align:center}
.traffic-dialog h2{margin:0 0 10px;color:#3a5d5e;font-size:25px}
.traffic-dialog p{margin:0 0 17px;color:#527176;font-size:15px;line-height:1.6}
.traffic-dialog .button{min-width:145px}
.traffic-game button:focus-visible{outline:3px solid #e6756c;outline-offset:2px}
@media(max-width:480px){.toy-page:has(.traffic-game) .toy-card{padding:14px 11px}.toy-page:has(.traffic-game) .toy-card h1{font-size:22px}.toy-page:has(.traffic-game) .toy-instruction{margin:5px 0 10px;line-height:1.4}.traffic-hud{gap:6px;margin-bottom:8px}.traffic-hud>div{padding:5px 3px}.traffic-hud strong{font-size:16px}.traffic-scene{height:clamp(265px,38dvh,315px)}.traffic-queues{gap:5px;margin:12px 0 8px}.traffic-queue{padding:5px 2px}.traffic-queue strong{font-size:18px}.traffic-switches{gap:6px}.traffic-switches button{min-height:58px}.traffic-dialog{padding:18px 14px}.traffic-dialog h2{font-size:22px}}