/* Calm scene chrome: a scrim behind the title, one collapsible weather pill at the top,
   one bottom toolbar (film, street pause, camera). Loaded last, overrides older layers. */
:root{--bar:#22372cd9;--bar-hover:#2f4b3d;--bar-ink:#f3f4e8;--bar-line:#ffffff2e}

/* Title stays readable over bright facades in daylight and over dark streets at night. */
.world::before{content:"";position:absolute;inset:0 auto 0 0;width:min(560px,70%);z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#f4f2e8f0 0,#f4f2e8c4 38%,#f4f2e800 100%);transition:opacity .6s}
body.evening .world::before{background:linear-gradient(90deg,#101b22e6 0,#101b22a8 40%,#101b2200 100%)}
.intro{text-shadow:none}
body.detail-view .world::before{opacity:0}

/* Weather and time: a compact pill that opens into the existing panel. */
.atmosphere{width:auto;min-width:0;top:20px;right:20px}
.atmosphere>summary{gap:10px;padding:10px 14px;font-size:12px}
.atmosphere[open]{width:315px}
.atmosphere:not([open]){border-radius:22px}
.atmosphere>summary span{font-size:16px;transition:transform .2s}

/* One toolbar along the bottom edge. */
.scene-bottom{left:20px!important;right:20px!important;bottom:16px!important;display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap}
.film-controls{position:relative!important;inset:auto!important;min-width:0!important;width:auto!important;padding:0 6px!important;height:40px;display:flex;align-items:center;
  background:var(--bar)!important;border:1px solid var(--bar-line);border-radius:8px;box-shadow:none;backdrop-filter:blur(6px)}
.film-actions{gap:4px!important}
.film-actions button{height:38px;padding:0 10px!important;border-radius:6px;font-size:12px!important;white-space:nowrap}
.film-actions button:hover:not(:disabled){background:var(--bar-hover)!important}
#film-stop{width:32px;padding:0!important}#film-stop:disabled{display:none}
.film-controls progress{position:absolute;left:8px;right:8px;bottom:4px;width:auto!important;margin:0!important;height:2px}
.film-controls:not(:has(#film-stop:not(:disabled))) progress{display:none}
#film-shot{position:absolute;left:0;bottom:calc(100% + 8px);white-space:nowrap;font-size:11px!important;padding:5px 10px;border-radius:14px;background:var(--bar);color:var(--bar-ink)!important}
.film-controls:not(:has(#film-play[aria-pressed=true])) #film-shot{display:none}

.traffic-controls{margin-left:0!important;padding:0!important;height:40px;background:var(--bar)!important;border:1px solid var(--bar-line);border-radius:8px;flex-direction:row!important;align-items:center!important;gap:0!important}
.traffic-controls button,body.evening .traffic-controls button{height:38px;min-height:0;min-width:0;padding:0 12px;border-radius:6px;font-size:12px}
.traffic-controls button:hover{background:var(--bar-hover)!important}
.street-readout{font-size:11px!important;padding:0 12px 0 2px!important;max-width:240px}

.gesture{margin-left:auto!important;background:none!important;color:#f3f4e8;text-shadow:0 1px 6px #0008;padding:0!important}
body:not(.evening) .gesture{color:#33483e;text-shadow:0 1px 6px #fff9}
.camera-controls{height:40px;flex:none;border-radius:8px}
.camera-controls button{height:38px!important}

@media(max-width:1100px){.gesture{display:none!important}.camera-controls{margin-left:auto}}
@media(max-width:1000px){.street-readout{display:none!important}}

@media(max-width:720px){
  .world::before{width:100%;height:46%;inset:0 0 auto 0;background:linear-gradient(180deg,#f4f2e8eb 0,#f4f2e8b0 55%,#f4f2e800 100%)}
  body.evening .world::before{background:linear-gradient(180deg,#101b22e0 0,#101b2299 55%,#101b2200 100%)}
  .intro{left:16px!important;top:16px!important;max-width:60%!important}
  .intro h1{font-size:26px!important}
  .intro-copy{display:none}
  .atmosphere,.atmosphere[open]{top:14px!important;bottom:auto!important;right:12px!important;left:auto!important}
  .atmosphere:not([open]){width:auto!important;max-width:none!important}
  .atmosphere[open]{left:12px!important;width:auto!important;max-width:none!important;z-index:6}
  .scene-bottom{left:10px!important;right:10px!important;bottom:10px!important;gap:6px;display:flex!important}
  .film-controls{padding:0 2px!important}
  .film-actions button{padding:0 8px!important;font-size:11px!important}
  .traffic-controls button{padding:0 10px;font-size:11px}
  #traffic-text{display:none}
  .camera-controls button{width:34px!important}
}
@media(prefers-reduced-motion:reduce){.world::before{transition:none}}
/* Scene labels: explicit ink so they stay readable in both lights. */
.scene-label{color:#203a32;background:#fbfcfaf2;transition:opacity .2s}
body.evening .scene-label{color:#eef0e6;background:#233e49f2}