body[data-app="traffic-lights"] {
  --paper: #f1efe9;
  --surface: #fffdfa;
  --ink: #222e32;
  --muted: #536066;
  --line: #d7d8d0;
  --accent: #205746;
  --wash: #e3eee5;
  --console: #222e32;
  --console-ink: #fffdf3;
  --console-muted: #c5d0cb;
  --signal-green: #aee4b3;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}

.traffic-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 12px;
}

.traffic-area,
.traffic-console,
.traffic-side {
  border-radius: 15px;
}

.traffic-area {
  box-shadow: 0 8px 24px #202c3020;
}

.traffic-hud {
  padding: 12px 16px;
}

.traffic-timer strong,
.traffic-stats dd {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.traffic-timer strong {
  color: var(--console-ink);
}

.traffic-stats {
  text-align: left;
  gap: clamp(10px, 3vw, 22px);
}

.traffic-stats > div {
  border-left: 1px solid #516062;
  padding-left: clamp(8px, 2.6vw, 16px);
}

.shift-progress {
  height: 3px;
}

.shift-progress::-webkit-progress-bar {
  background: #46565a;
}

.junction-view {
  background: #a29a80;
}

#junction {
  max-width: none;
}

.current-signal,
.intersection-alert {
  position: absolute;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: .73rem;
  font-weight: 750;
  pointer-events: none;
}

.current-signal {
  --lamp: #b0e3ae;
  left: 10px;
  bottom: 10px;
  color: #fffdf5;
  background: #202c30;
  border-color: #697678;
}

.current-signal::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lamp);
  margin-right: 6px;
  vertical-align: 1px;
}

.traffic-area[data-signal="amber"] .current-signal { --lamp: #ffd281; }
.traffic-area[data-signal="all-red"] .current-signal { --lamp: #ffa18d; }
.traffic-area[data-phase="ready"] .current-signal { --lamp: #a8b7ba; }

.intersection-alert {
  top: 10px;
  left: 10px;
  color: #4c2b13;
  background: #ffdeb0;
  border: 1px solid #b5804e;
}

.traffic-console {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.console-title {
  margin: 14px 14px 0;
  font-size: .94rem;
}

.signal-controls {
  gap: 8px;
  padding: 10px 13px 8px;
}

.signal-controls button {
  grid-template-columns: 30px minmax(0,1fr) 17px;
  min-height: 61px;
  padding: 6px 8px;
  border: 1px solid #cbd3cf;
  border-bottom: 3px solid #bbc7c0;
  border-radius: 9px;
  background: #f4f7f2;
  color: #263b36;
  touch-action: manipulation;
}

.signal-controls button:disabled {
  opacity: .77;
}

.signal-controls button[aria-pressed="true"] {
  opacity: 1;
  background: #215b46;
  border-color: #1b4b3a;
  color: #fffef4;
}

.signal-controls button[data-requested] {
  background: #f8edd3;
  border-color: #be9a58;
}

.signal-controls small {
  font-size: .7rem;
  color: #4e625a;
}

.signal-controls button[aria-pressed="true"] small,
.signal-controls button[aria-pressed="true"] kbd {
  color: #e4efe2;
}

.signal-controls [data-urgent] small {
  color: #934219;
}

.signal-controls [aria-pressed="true"][data-urgent] small {
  color: #ffdda7;
}

.signal-controls kbd {
  color: #546863;
  border-color: #82908b;
}

.signal-direction {
  color: inherit;
  background: #dce7de;
}

[aria-pressed="true"] .signal-direction {
  background: #ffffff1c;
}

.walk-control {
  grid-column: 1 / -1;
}

.walk-symbol {
  position: relative;
}

.walk-symbol::before,
.walk-symbol::after,
.walk-symbol i,
.walk-symbol i::before,
.walk-symbol i::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 3px;
}

.walk-symbol::before { width: 4px; height: 4px; top: 5px; left: 13px; }
.walk-symbol::after { width: 3px; height: 8px; top: 10px; left: 12px; transform: rotate(16deg); }
.walk-symbol i { width: 9px; height: 2px; top: 13px; left: 10px; transform: rotate(18deg); }
.walk-symbol i::before { width: 3px; height: 8px; top: 3px; left: 2px; transform: rotate(20deg); }
.walk-symbol i::after { width: 3px; height: 8px; top: 2px; left: 5px; transform: rotate(-42deg); }

.traffic-console .game-panel-footer { padding: 0 13px 13px; }
.traffic-console .game-status { color: var(--muted); }
.traffic-console .game-actions button { color: var(--ink); background: #f4f4ed; border-color: var(--line); }
.traffic-console .game-actions button.primary { color: #fffdf3; background: #215b46; border-color: #215b46; }
.traffic-console :focus-visible { outline: 3px solid #1b6854; outline-offset: 2px; }

.traffic-side .aside-note {
  padding-top: 8px;
  margin-top: 9px;
}

.traffic-side .aside-note + .aside-note {
  border-top: 1px solid var(--line);
}

@media (min-width: 731px) {
  body[data-app="traffic-lights"] .street-wrap { max-width: 940px; }
  .street-wrap .intro { padding: 15px 0; }
  .street-wrap .intro h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
  .street-wrap .intro p { margin: 7px 0 0; }
  .traffic-layout { grid-template-columns: minmax(0, min(560px, max(365px, calc(100svh - 265px)))) minmax(0, 1fr); }
}
@media (max-width: 730px) {
  .traffic-layout { grid-template-columns: minmax(0,1fr); }
  .traffic-area { border-radius: 13px 13px 0 0; }
  .traffic-console { margin-top: -12px; border-radius: 0 0 13px 13px; }
  .traffic-hud { padding: 8px 10px; }
  .console-title { display: none; }
  .signal-controls { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 8px; gap: 5px; }
  .signal-controls button { grid-template-columns: 25px minmax(0,1fr); min-height: 54px; gap: 4px; padding-inline: 4px; }
  .signal-controls b { font-size: .79rem; }
  .signal-controls small { font-size: .64rem; }
  .signal-direction { width: 25px; }
  .walk-control { grid-column: auto; }
  .walk-symbol::before { left: 12px; }
  .walk-symbol::after { left: 11px; }
  .walk-symbol i { left: 9px; }
  .traffic-console .game-panel-footer { padding-inline: 8px; }
}

@media (max-width: 355px) {
  .signal-controls button { grid-template-columns: minmax(0,1fr); text-align: center; }
  .signal-controls .signal-direction { display: none; }
}

.queues .queue-track span { transition: width 190ms ease-out; }
.signal-controls button { transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out; }

.intersection-alert:not([hidden]) { animation: traffic-alert-in 260ms ease-out both; }
@keyframes traffic-alert-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .queues .queue-track span, .signal-controls button { transition: none; }
  .intersection-alert:not([hidden]) { animation: none; }
}