/* Bus Stop styles.
   Layout: one full-bleed canvas at device resolution, the title top-left and the log bottom-right. Single night look by design.
   Pixelspace is drawn on a pixel grid, so font sizes stay on multiples of 8px. */
:root{
  --night:#07081a;
  --ink:#ece6ff;
  --dim:#9890c6;
  --amber:#ffcf7a;
  --panel:rgba(9,8,24,.8);
  --edge:rgba(170,160,240,.24);
  --font:"Pixelspace","Courier New",ui-monospace,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);overflow:hidden;font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:none;-webkit-tap-highlight-color:transparent}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--night);cursor:pointer}
.hud{position:fixed;inset:0;pointer-events:none;transition:opacity .5s}
.hud.off{opacity:0}
.hud.off *{pointer-events:none!important}
.title{position:absolute;left:calc(env(safe-area-inset-left,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 12px);display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--edge);padding:6px 12px}
.brand{margin:0;font-weight:400;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.clock{font-variant-numeric:tabular-nums}
.clock .colon.off{visibility:hidden}
@media (max-width:440px){.clock{display:none}}
.dock{position:absolute;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 12px);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
button{font-family:var(--font);font-size:16px;letter-spacing:.08em;text-transform:uppercase;background:var(--panel);color:var(--ink);border:1px solid var(--edge);padding:6px 12px;cursor:pointer;border-radius:0;pointer-events:auto}
button:hover{border-color:var(--amber);color:var(--amber)}
button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#logBtn.icon{padding:8px;line-height:0}
.panel{pointer-events:auto;background:var(--panel);border:1px solid var(--edge);padding:12px 16px 16px;width:min(560px,100%);max-height:58vh;overflow:auto;font-size:16px;line-height:1.5}
.stats,.foot{margin:0;color:var(--dim)}
.stats{margin-bottom:12px}
.stats b{color:var(--amber);font-weight:400;font-variant-numeric:tabular-nums}
.panel ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.panel li{display:grid;grid-template-columns:auto 1fr;gap:12px}
.panel li span{min-width:0}
.panel time{color:var(--dim);font-variant-numeric:tabular-nums}
.foot{margin-top:12px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.hud{transition:none}}
/* Embedded as a background on another site: just the scene. */
.embed .hud{display:none}
.embed #scene{cursor:default}