.citysim-main { padding-bottom: 3rem; }
.citysim-hero { margin-bottom: 1.25rem; }
.citysim-hero h1 { margin-bottom: .5rem; }
.citysim-app { padding: clamp(.85rem, 2.4vw, 1.3rem); }
.citysim-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; align-items:end; margin-bottom:1rem; }
.citysim-field { display:grid; gap:.38rem; min-width:0; }
.citysim-field label { color:var(--text-muted, #aab8c8); font-size:.78rem; font-weight:750; }
.citysim-field select { display:block; width:100%; min-width:0; max-width:100%; text-overflow:ellipsis; color:var(--text, #f3f7fb); background:rgba(10,20,34,.88); border:1px solid rgba(190,211,232,.22); border-radius:10px; padding:.72rem .78rem; font:inherit; }
.citysim-check { display:flex; align-items:center; gap:.55rem; min-height:44px; color:var(--text, #f3f7fb); font-size:.9rem; }
.citysim-check input { width:18px; height:18px; accent-color:#8fd3bd; }
.citysim-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.citysim-actions button { min-height:44px; }
.citysim-scene { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(190,211,232,.22); border-radius:14px; background:#18302b; }
.citysim-fallback, .citysim-scene canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.citysim-scene canvas { visibility:hidden; touch-action:manipulation; }
.citysim-scene.is-running canvas { visibility:visible; }
.citysim-scene.is-running .citysim-fallback { display:none; }
.citysim-hud { position:absolute; z-index:2; top:clamp(7px,1.3vw,14px); left:clamp(7px,1.3vw,14px); display:flex; flex-wrap:wrap; gap:6px; max-width:calc(100% - 14px); pointer-events:none; }
.citysim-pill { display:inline-flex; align-items:center; min-height:29px; padding:.35rem .6rem; border:1px solid rgba(208,228,220,.46); border-radius:99px; background:rgba(10,20,24,.88); color:#eef5f4; font-size:clamp(.62rem,1.6vw,.8rem); line-height:1.15; box-shadow:0 3px 12px rgba(0,0,0,.22); }
.citysim-signal-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.8rem; padding:.75rem .85rem; border:1px solid rgba(190,211,232,.18); border-radius:12px; background:rgba(8,18,30,.52); }
.citysim-signal-label { display:flex; align-items:baseline; flex-wrap:wrap; gap:.8rem; }
.citysim-signal-label strong { color:var(--text, #f3f7fb); }
.citysim-signal-label span { color:var(--text-muted, #aab8c8); font-size:.88rem; }
.citysim-lamps { display:flex; align-items:center; gap:.45rem; }
.citysim-lamp { display:block; width:17px; height:17px; border-radius:50%; background:#3a4644; border:2px solid #718079; opacity:.45; }
.citysim-lamp.on.red { background:#ff4d47; opacity:1; box-shadow:0 0 12px #ff4d47; border-color:#ffaaa3; }
.citysim-lamp.on.yellow { background:#ffd354; opacity:1; box-shadow:0 0 12px #ffd354; border-color:#fff0a8; }
.citysim-lamp.on.green { background:#56db88; opacity:1; box-shadow:0 0 12px #56db88; border-color:#bdffd0; }
.citysim-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; margin:.85rem .2rem 0; color:var(--text-muted, #aab8c8); font-size:.82rem; }
.citysim-legend span { display:inline-flex; align-items:center; gap:.42rem; }
.citysim-dot { width:10px; height:10px; border-radius:50%; }
.citysim-dot.ns { background:#f5bd68; }
.citysim-dot.ew { background:#84c8ef; }
.citysim-note { margin:.8rem .2rem 0; color:var(--text-muted, #aab8c8); font-size:.86rem; }
@media (max-width:760px) {
  .citysim-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .citysim-controls { grid-template-columns:minmax(0,1fr); }
  .citysim-scene { aspect-ratio:4/3; }
  .citysim-pill { padding:.3rem .48rem; }
  .citysim-signal-row { align-items:flex-start; }
}