.traffic-heading h1>span{color:#f4bf61}.traffic-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start}.traffic-play{border:1px solid #35455c;border-radius:22px;background:radial-gradient(ellipse at 48% 35%,#253650,#131d2c 68%);overflow:hidden;transition:border-color .25s}.traffic-play.is-won{border-color:#74c4a0}.traffic-level-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 26px 0}.traffic-level-heading h2{font-family:'Space Grotesk',sans-serif;font-size:22px;margin-top:6px;font-weight:500}.traffic-level-heading .eyebrow{font-size:10px;letter-spacing:1.6px;color:#a9b8ce}.traffic-signal{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1.3px;color:#9bc9af;border:1px solid #42634f;background:#1e352d77;padding:7px 10px;border-radius:7px;white-space:nowrap}.traffic-signal>span{width:5px;height:5px;background:#a9edc9;border-radius:50%;box-shadow:0 0 10px #91edb9}.traffic-signal .lucide{width:12px;height:12px}.traffic-stage{position:relative;width:100%;height:clamp(350px,51vh,520px);touch-action:none;cursor:grab;outline-offset:-6px!important}.traffic-stage:active{cursor:grabbing}.traffic-stage canvas{display:block;width:100%;height:100%;touch-action:none}.traffic-board-caption{display:flex;align-items:center;gap:10px;padding:0 26px 22px;font-size:13px;color:#aabbcf}.target-mark{display:grid;place-items:center;background:#f2bd5c;color:#392c14;border-radius:6px;width:27px;height:25px;font-size:20px}.traffic-board-size{margin-left:auto;letter-spacing:2px;font-size:11px;color:#6e819c}.traffic-toolbar{display:flex;gap:10px;padding:19px 24px;border-top:1px solid #34435a;background:#101824aa}.traffic-side{display:grid;gap:18px}.traffic-controller,.traffic-levels{border:1px solid var(--line);background:#111925;border-radius:18px;padding:21px}.traffic-panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.traffic-panel-title h2{font-size:15px}.traffic-panel-title>.lucide{width:17px;color:#8b9db6}.traffic-cars{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}.traffic-car-pick{width:32px;height:32px;border:1px solid #344256;border-radius:7px;background:#1b2432;color:var(--car-color);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;position:relative}.traffic-car-pick[aria-pressed=true]{background:var(--car-color);color:#172031;border-color:var(--car-color);box-shadow:0 0 0 3px #ffffff0c}.traffic-car-pick:hover{border-color:var(--car-color)}.traffic-selection{display:flex;gap:11px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}#traffic-car-badge{display:grid;place-items:center;width:35px;height:35px;border-radius:9px;color:#172031;font-weight:700}.traffic-selection strong{font-size:14px;font-weight:500;display:block}.traffic-selection div>span{font-size:11px;color:#8da0b9;display:block;margin-top:3px}.traffic-range-label{display:flex;justify-content:space-between;gap:4px;font-size:11px;color:#9aacbf;margin:7px 0 12px}.traffic-range-label>span{color:#e0bc7a;font-size:10px}#traffic-destination{accent-color:#edbf70;width:100%;margin:0 0 15px;cursor:pointer;height:20px}.traffic-drive-buttons{display:flex;gap:8px}.traffic-drive-buttons .button{min-height:38px;padding:8px 12px}.traffic-drive-buttons #traffic-confirm{flex:1}.traffic-primary{background:#f2c574!important;border-color:#f2c574!important;color:#302819!important}.traffic-primary:hover:not(:disabled){background:#ffda92!important}.traffic-keyboard{font-size:11px;line-height:1.9;color:#7d90a9;margin-top:15px}.traffic-level-group+ .traffic-level-group{margin-top:15px}.traffic-level-group h3{font-size:10px;font-weight:500;letter-spacing:.7px;color:#8e9db4;margin-bottom:7px}.traffic-level-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.traffic-level-button{position:relative;height:39px;border:1px solid #2d3a50;border-radius:8px;background:#182231;font-family:'Space Grotesk',sans-serif;font-size:13px;color:#a7b6cc}.traffic-level-button:hover{background:#293749;border-color:#61728f}.traffic-level-button[aria-pressed=true]{background:#3a3227;color:#f9d48e;border-color:#bf9552}.traffic-level-button.completed:after{content:'✓';position:absolute;right:3px;top:1px;font-size:10px;color:#9de7c4}.traffic-victory{padding:26px 22px;border:1px solid #49745d;border-radius:18px;background:radial-gradient(at 100% 0,#264b3e,#15271f 70%);display:grid;gap:12px;animation:traffic-appear .4s ease both}.win-symbol{width:39px;height:39px;display:grid;place-items:center;border:1px solid #648e75;border-radius:12px;background:#a9e8ba16;color:#b5eed0}.traffic-victory .eyebrow{font-size:9px;color:#a2caaf}.traffic-victory h2{font-family:'Space Grotesk',sans-serif;font-size:32px;letter-spacing:-1px}.traffic-victory p{font-size:13px;line-height:1.7;color:#b7cdbd}.traffic-victory>.quiet-button{justify-content:center;font-size:12px;padding:2px}.traffic-victory .button{margin-top:5px}.traffic-fallback{display:grid;grid-template:repeat(6,1fr)/repeat(6,1fr);gap:6px;aspect-ratio:1;width:min(90%,400px);margin:20px auto;background:repeating-linear-gradient(0deg,transparent,transparent 16%,#68768d33 16.6%),#253044;border:8px solid #455267;border-right-color:#85c9a5;border-radius:12px;padding:5px}.traffic-fallback button{border:0;border-radius:8px;color:#152132;font-weight:700}.traffic-fallback button[aria-pressed=true]{outline:3px solid #fff1bf;outline-offset:1px}@keyframes traffic-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.catalog-grid .game-card{flex-wrap:wrap;gap:22px;padding:28px}.catalog-grid .game-card .button{width:100%;margin-left:0}.game-card.traffic-card{border-color:#645333;background:linear-gradient(120deg,#30291f,#161d27)}.traffic-card .card-symbol{background:#423627;border-color:#826c48;color:#f2c574}.traffic-card .button{background:#f2c574;border-color:#f2c574;color:#302819}.collection-count{font-variant-numeric:tabular-nums}.puzzle-item[data-game=atascos][aria-current]{border-color:#806744;background:linear-gradient(110deg,#3a3025,#202128)}.puzzle-item[data-game=atascos] .puzzle-symbol{color:#edc479}
@media(max-width:1200px){.traffic-layout{grid-template-columns:minmax(0,1fr) 265px;gap:18px}.traffic-controller,.traffic-levels{padding:18px}.traffic-level-heading{padding:20px 20px 0}.traffic-stage{height:420px}.traffic-board-caption{padding:0 18px 20px}.catalog-grid{grid-template-columns:1fr}.catalog-grid .game-card{flex-wrap:nowrap}.catalog-grid .game-card .button{width:auto;margin-left:auto}}
@media(max-width:730px){.traffic-layout{grid-template-columns:1fr;gap:18px}.traffic-level-heading{padding:20px 18px 0}.traffic-level-heading h2{font-size:20px}.traffic-stage{height:355px}.traffic-board-caption{font-size:12px}.traffic-toolbar{padding:16px 18px}.traffic-side{grid-template-columns:1fr}.traffic-controller,.traffic-levels{padding:22px}.traffic-car-pick{width:38px;height:38px;font-size:14px}.traffic-drive-buttons .button{min-height:44px}.traffic-keyboard{font-size:12px}.traffic-level-button{height:45px;font-size:14px}.traffic-level-group h3{font-size:12px}.traffic-victory{order:-1}.catalog-grid .game-card{flex-wrap:wrap}.catalog-grid .game-card .button{width:100%;margin:0}.traffic-range-label{font-size:12px}.traffic-range-label>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.traffic-victory{animation:none}.traffic-play{transition:none}}
/* La siguiente acción queda junto al aviso de victoria, dentro del tablero. */
.traffic-scene-wrap{position:relative}
.traffic-win-banner{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;width:max-content;max-width:calc(100% - 32px);padding:14px 18px;border:1px solid #91d7af;border-radius:18px;background:#1c3d30f5;color:#c7f6da;box-shadow:0 8px 30px #0005}
.traffic-win-heading{display:flex;align-items:center;justify-content:center;gap:9px;font-family:"Space Grotesk",sans-serif;font-size:21px;white-space:nowrap}
.traffic-win-heading .lucide{width:23px;height:23px}
.traffic-win-banner .button{min-height:44px;white-space:nowrap}
@media(max-width:1000px){.traffic-win-banner{flex-direction:column;gap:12px;width:280px}.traffic-win-banner .button{width:100%;justify-content:center}}

/* Pistas graduales y marcas separadas por tipo de intento. */
.traffic-attempt{display:inline-block;margin-top:9px;font-size:9px;letter-spacing:1.2px;color:#a5d8c0}
.traffic-attempt.assisted{color:#f1c980}
.traffic-hint-panel{padding:20px 24px;border-top:1px solid #35455c;background:#111c2b}
.traffic-hint-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.traffic-hint-top h2{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500}
.traffic-hint-top h2 .lucide{width:18px;color:#f2c574;flex-shrink:0}
.traffic-hint-panel p{font-size:12px;line-height:1.7;color:#b2bfd1;margin-top:12px;max-width:62ch}
.traffic-hint-panel .button{min-height:44px}
.traffic-hint-actions{display:flex;flex-wrap:wrap;gap:10px}
.traffic-hint-actions .button{margin-top:14px}
.traffic-records{border:1px solid var(--line);background:linear-gradient(130deg,#202536,#131b28);border-radius:18px;padding:21px}
.traffic-record-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.traffic-record-grid>div{padding:13px 10px;border:1px solid #364459;border-radius:10px;background:#0e162180}
.traffic-record-grid span{display:block;color:#a5b5ca;font-size:11px}
.traffic-record-grid strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:500;color:#efcd8d;margin-top:7px}
.traffic-records>p{font-size:11px;line-height:1.7;color:#8fa1ba;margin-top:12px}
.traffic-win-message{display:grid;gap:6px}
.traffic-result-summary{display:block;max-width:260px;text-align:center;font-size:11px;line-height:1.6;color:#bce0cc}
@media(max-width:730px){.traffic-hint-panel{padding:18px}.traffic-hint-top{flex-wrap:wrap}.traffic-hint-top .button{flex:1}.traffic-hint-panel p{font-size:13px}.traffic-records{padding:22px}.traffic-records>p{font-size:12px}.traffic-hint-actions .button{width:100%;justify-content:center}}