body[data-app="traffic-lights"] {
  --paper:#e9ede8; --surface:#f6f8f4; --ink:#202d28; --muted:#505d55; --line:#cbd5cb; --accent:#24583d; --wash:#dcebdc;
  --console:#172923; --console-line:#41574b; --console-ink:#eef4e9; --console-muted:#b7c8b9; --signal-green:#a5dc85;
}
body[data-app="bus-seats"] {
  --paper:#e8eff3; --surface:#fcfdfe; --ink:#21384a; --muted:#485e6d; --line:#c5d4dd; --accent:#285773; --wash:#e2eff5;
}
body[data-app="hamster-delivery"] {
  --paper:#f1e8d8; --surface:#fffaf0; --ink:#3b2c23; --muted:#6d5545; --line:#ddcdb6; --accent:#87412b; --wash:#f5e1cd;
}
body:is([data-app="traffic-lights"],[data-app="bus-seats"],[data-app="hamster-delivery"]) {
  background:var(--paper); color:var(--ink); min-height:100vh;
}
.street-wrap { max-width:1020px; }
.street-wrap .intro { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:25px 0 22px; }
.street-wrap .intro h1 { margin:0; font-size:clamp(1.75rem,5vw,3.2rem); letter-spacing:-.055em; line-height:1.14; }
.street-wrap .intro p { max-width:58ch; color:var(--muted); line-height:1.52; word-break:keep-all; }
.intro-art { width:clamp(118px,16vw,182px); height:89px; object-fit:cover; border-radius:10px; border:1px solid var(--line); flex:none; }
.game-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr); align-items:start; gap:16px; }
.play-area,.play-side { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:17px; }
.play-area { overflow:hidden; }
.play-side { padding:17px; }
.board-head,.side-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.board-head { min-height:48px; padding:9px 15px; font-size:.89rem; font-weight:760; }
.board-head strong { color:var(--accent); }
.side-title h2 { margin:0; font-size:.97rem; letter-spacing:-.022em; }
.side-title > span,.side-title > strong { color:var(--accent); font-size:.79rem; font-weight:770; text-align:right; }
.play-area canvas { display:block; width:100%; height:auto; }
.game-panel-footer { padding:0 13px 13px; }
.game-actions { margin-top:8px; }
.game-actions button { min-height:45px; padding:7px 13px; }
.game-actions button.primary { flex:1; }
.game-status,.game-result { margin:0; font-size:.84rem; line-height:1.52; word-break:keep-all; }
.game-status { color:var(--muted); min-height:1.52em; }
.game-result { padding:12px 14px; margin-bottom:9px; border-radius:9px; background:var(--wash); }
.game-result strong { display:block; color:var(--accent); font-size:clamp(1.16rem,4vw,1.48rem); letter-spacing:-.032em; }
.game-result p { margin:3px 0 0; font-size:.79rem; }
.aside-help { margin:11px 0 0; font-size:.78rem; color:var(--muted); line-height:1.55; word-break:keep-all; }
.street-wrap .ad-zone { min-height:92px; }
.street-wrap .guide { margin-top:22px; }
.street-wrap .guide .action { min-height:42px; }
.guide kbd { font:700 .75rem ui-monospace,monospace; border:1px solid var(--line); border-radius:4px; padding:1px 4px; }

.traffic-layout { grid-template-areas:"board console" "board queue"; grid-template-rows:auto 1fr; }
.traffic-area { grid-area:board; }
.traffic-console { grid-area:console; }
.traffic-side { grid-area:queue; }
.traffic-area,.traffic-console { background:var(--console); color:var(--console-ink); border-color:var(--console); }
.traffic-hud { display:flex; align-items:center; justify-content:space-between; padding:11px 15px; gap:12px; }
.traffic-timer { display:grid; gap:2px; }
.traffic-timer > span,.traffic-stats dt { font-size:.7rem; color:var(--console-muted); }
.traffic-timer strong { font:800 1.7rem/1 ui-monospace,monospace; color:var(--signal-green); }
.traffic-timer small { font:700 .75rem system-ui,sans-serif; margin-left:3px; }
.traffic-stats { display:flex; gap:13px; margin:0; text-align:right; }
.traffic-stats dd { margin:2px 0 0; font:750 1.07rem/1.15 ui-monospace,monospace; }
.shift-progress { appearance:none; display:block; border:0; width:100%; height:4px; background:#33473a; color:var(--signal-green); }
.shift-progress::-webkit-progress-bar { background:#33473a; }
.shift-progress::-webkit-progress-value { background:var(--progress-color,var(--signal-green)); }
.shift-progress::-moz-progress-bar { background:var(--progress-color,var(--signal-green)); }
.traffic-area[data-phase="running"][data-urgent] .shift-progress { --progress-color:#f6c78f; }
.junction-view { position:relative; background:#344940; }
#junction { aspect-ratio:1; max-width:508px; margin:0 auto; }
.current-signal {
  position:absolute; bottom:9px; left:9px; padding:4px 8px; border-radius:4px;
  background:#12251fe8; border:1px solid #668275; color:#f5f8ef; font-size:.71rem; font-weight:750; pointer-events:none;
}
.signal-controls { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:9px 9px 8px; }
.signal-controls button {
  display:grid; grid-template-columns:31px 1fr 20px; align-items:center; gap:6px; text-align:left;
  min-height:49px; min-width:0; padding:5px 8px; color:var(--console-ink); background:#273c32; border-color:var(--console-line);
}
.signal-controls button:disabled { opacity:.68; }
.signal-controls small { display:block; color:var(--console-muted); font-size:.68rem; margin-top:2px; white-space:nowrap; }
.signal-direction { display:grid; place-items:center; width:28px; height:28px; background:#1b2e26; border-radius:6px; font-size:1.2rem; }
.signal-controls button[aria-pressed="true"] { border-color:var(--signal-green); color:var(--signal-green); background:#304b39; }
.signal-controls [data-urgent] small { color:#ffca9e; font-weight:750; }
.signal-controls kbd { border:1px solid #506357; border-radius:4px; text-align:center; font-size:.69rem; color:var(--console-muted); }
.traffic-console .game-panel-footer { padding-inline:9px; }
.traffic-console .game-status { color:var(--console-muted); padding-inline:3px; }
.traffic-console .game-actions button { color:var(--console-ink); background:#273c32; border-color:var(--console-line); }
.traffic-console .game-actions button.primary { background:var(--signal-green); border-color:var(--signal-green); color:#1a3022; }
.traffic-console :focus-visible { outline-color:#d9f4b9; }
.traffic-console .game-result { color:var(--ink); }
.queues { display:grid; margin:13px 0 0; gap:7px; }
.queues > div { display:grid; grid-template-columns:20px minmax(83px,1fr) minmax(30px,1.15fr); align-items:center; gap:5px; min-height:38px; border-bottom:1px solid var(--line); font-size:.8rem; }
.queues dt { font-weight:850; }
.queues dd { margin:0; }
.queue-track,.queue-track span { display:block; height:5px; border-radius:7px; }
.queue-track { background:var(--wash); }
.queue-track span { width:var(--load,0%); background:#59826b; }
.queues [data-urgent] { color:#8f3925; font-weight:740; }
.queues [data-urgent] .queue-track span { background:#ae5e3b; }
.aside-note { display:flex; align-items:center; justify-content:space-between; margin:14px 0 0; font-size:.8rem; }

.bus-head { border-bottom:1px solid var(--line); }
.stage-indicator { display:flex; align-items:center; gap:8px; color:var(--accent); font:750 .78rem ui-monospace,monospace; }
.stage-dots { display:flex; gap:3px; }
.stage-dots i { display:block; width:11px; height:5px; border-radius:6px; background:#cbdde6; }
.stage-dots i.is-current { background:var(--accent); }
.bus-platform { padding:12px; background:#e0e9ee; border-bottom:1px solid var(--line); }
.bus-area[data-round="1"] .bus-platform { background:#ebdfd0; }
.bus-area[data-round="2"] .bus-platform { background:#d9dee8; }
.bus-shell {
  --cabin:#b4c8d5; --aisle:#e9f0f3; max-width:404px; margin:0 auto; padding:7px 11px 8px;
  border:3px solid #597a90; border-radius:26px 26px 13px 13px;
  background:repeating-linear-gradient(0deg,#6e8e9f 0 1px,#9bb7c8 1px 15px,#c0d3de 15px 17px);
}
.bus-front {
  display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:34px; margin-bottom:6px; padding:4px 8px;
  color:#e9f3f8; background:#345369; font-size:.73rem; font-weight:740; border-radius:14px 14px 5px 5px;
}
.wheel { width:21px; height:21px; border:3px solid #b0c5d1; border-radius:50%; background:linear-gradient(transparent 43%,#b0c5d1 43% 56%,transparent 56%); }
.bus-door { width:27px; height:18px; background:repeating-linear-gradient(90deg,#c6dfe7 0 5px,#6e95a8 5px 7px); border-radius:3px; }
.seat-grid { display:grid; grid-template-columns:1fr 1fr minmax(15px,.44fr) 1fr 1fr; gap:5px; padding:5px; background:var(--aisle); border-radius:5px; }
.seat {
  display:grid; align-content:center; justify-items:center; min-height:49px; padding:2px; color:#24465a; background:#c9dfe9;
  border:1px solid #8ca9bc; border-bottom:4px solid #7598ad; border-radius:8px 8px 6px 6px; touch-action:manipulation;
}
.seat strong { font-size:1.05rem; line-height:1.1; }
.seat small { font:700 .67rem ui-monospace,monospace; color:#3b5767; }
.seat.blocked { opacity:1; color:#5b6f7a; background:repeating-linear-gradient(135deg,#dce5eb 0 6px,#cddbe5 6px 8px); }
.seat.occupied { color:#233949; background:var(--person); border-color:color-mix(in srgb,var(--person),#273a47 32%); }
.bus-area[data-selecting] .seat:not(.blocked) { border-color:#285773; }
.seat.occupied[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:1px; }
.peach { --person:#f6d0b8; }
.mint { --person:#c6e2c9; }
.blue { --person:#ccddf2; }
.lavender { --person:#e5d5f0; }
.bus-legend { display:flex; justify-content:space-between; gap:3px; margin:5px 1px 0; padding:4px 5px; background:#e8f0f3; border-radius:4px; font-size:.67rem; color:#345065; }
.boarding { padding:11px 13px; }
.passengers { margin-top:6px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.passenger { display:flex; align-items:center; gap:5px; min-height:50px; padding:5px; text-align:left; line-height:1.19; }
.person-mark { display:grid; place-items:center; flex:0 0 23px; height:23px; border-radius:50%; background:var(--person); color:#304857; font-weight:850; }
.passenger strong,.passenger small { display:block; }
.passenger small { color:var(--muted); font-size:.67rem; margin-top:2px; word-break:keep-all; }
.passenger.placed .seat-number { color:#255b68; font-weight:760; }
.ticket .side-title { padding-bottom:9px; border-bottom:1px dashed var(--line); }
.seat-requests { margin:6px 0 0; padding:0; list-style:none; }
.seat-requests li { display:flex; align-items:center; gap:7px; min-height:38px; border-bottom:1px solid var(--line); font-size:.82rem; }
.seat-requests li:last-child { border-bottom:0; }
.seat-requests li::before { content:""; width:6px; height:6px; border-radius:50%; background:#809da7; }
.seat-requests [data-met="true"] { color:#28633c; }
.seat-requests [data-met="true"]::before { background:#408153; }
.seat-requests [data-met="false"] { color:#864531; }
.seat-requests [data-met="false"]::before { background:#a96852; }

.delivery-map { position:relative; }
.map-area .board-head { background:#f7ecd9; }
.map-title { display:flex; align-items:center; gap:8px; }
.map-title img { object-fit:contain; }
.departure { color:var(--muted); font:730 .76rem ui-monospace,monospace; white-space:nowrap; }
#neighborhood { aspect-ratio:550/415; }
.markers { position:absolute; inset:0; pointer-events:none; }
.map-stop {
  position:absolute; display:grid; place-items:center; transform:translate(-50%,-50%); width:47px; min-height:44px; padding:2px;
  border:1px solid #90674a; border-bottom:3px solid #90674a; border-radius:9px; background:#fff9ea; color:#643f2b;
  font-size:.83rem; line-height:1.02; pointer-events:auto; touch-action:manipulation;
}
.map-stop small { font:700 .63rem ui-monospace,monospace; }
.map-stop[aria-pressed="true"] { background:#934a31; color:#fff9e9; border-color:#743a28; }
.map-stop[data-late] { background:#862f2a; color:#fff9e9; }
.map-stop.depot { color:#fff8e6; background:#576b45; border-color:#415332; }
.map-area[data-route="suggested"] .map-stop[aria-pressed="true"] { background:#3d674e; border-color:#2f513d; }
.map-area button.map-stop:disabled { opacity:1; }
.map-key { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:7px; font-size:.72rem; color:var(--muted); }
.map-key .congestion::before,.map-key .your-path::before { content:""; display:inline-block; width:12px; height:4px; margin-right:4px; vertical-align:middle; background:#da986b; }
.map-key .your-path::before { background:#ab5332; }
.map-area[data-route="suggested"] .your-path::before { background:#49785f; }
.route-strip { padding:9px 13px; border-top:1px solid var(--line); }
.route-strip p { margin:4px 0 0; font-size:.79rem; line-height:1.4; color:var(--muted); }
.route-list { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 0; padding:0; list-style:none; }
.route-list li { display:flex; align-items:center; gap:3px; padding:4px 6px; border-radius:5px; background:var(--wash); font-size:.72rem; }
.route-list li span { color:var(--accent); font-weight:820; }
.route-list [data-late] { color:#842b25; background:#f7ded6; }
.stop-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:9px 0; }
.stop-card { display:grid; text-align:left; align-content:center; gap:2px; min-height:49px; padding:5px 8px; }
.stop-card small { font-size:.71rem; color:var(--muted); }
.stop-card[data-late] small { color:#9b332d; }
.delivery-side .side-title { padding-bottom:7px; border-bottom:1px dashed var(--line); }
@media (max-width:730px) {
  .street-wrap .intro { padding:15px 0 12px; }
  .street-wrap .intro p { margin-top:6px; font-size:.86rem; }
  .intro-art { display:none; }
  .game-layout { grid-template-columns:minmax(0,1fr); gap:9px; }
  .play-area,.play-side { border-radius:13px; }
  .play-side { padding:12px; }
  .board-head { padding-inline:10px; }
  .traffic-layout { grid-template-areas:"board" "console" "queue"; grid-template-rows:auto; }
  .traffic-area { border-radius:13px 13px 0 0; }
  .traffic-console { margin-top:-9px; border-radius:0 0 13px 13px; border-top:0; }
  .traffic-hud { padding:8px 10px; }
  .traffic-timer strong { font-size:1.38rem; }
  .signal-controls button { grid-template-columns:28px 1fr; }
  .signal-controls kbd { display:none; }
  .queues { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .queues > div { grid-template-columns:15px minmax(54px,1fr) minmax(20px,.7fr); }
  .bus-platform { padding:8px; }
  .seat { min-height:44px; }
  .map-stop { width:44px; }
}
@media (max-width:355px) {
  .passengers { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .map-stop { width:42px; min-height:42px; }
}