:root{
  --night:#1a1c2c; --slate:#333c57; --grey:#566c86; --mist:#94b0c2;
  --cream:#ffcd75; --orange:#ef7d57; --rust:#b13e53; --lime:#a7f070; --white:#f4f4f4;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--night); color:var(--white);
  font-family:"Silkscreen","Courier New",monospace;
  display:flex; align-items:center; justify-content:center;
  -webkit-font-smoothing:none;
}
.app{
  width:100%; max-width:430px; height:100%; max-height:920px;
  display:flex; flex-direction:column;
  background:var(--night); position:relative; overflow:hidden;
}

.stage{flex:0 0 auto; background:#000; position:relative}
canvas{display:block; margin:0 auto; image-rendering:pixelated}
.hud{
  position:absolute; top:6px; left:8px; right:8px;
  display:flex; justify-content:space-between;
  font-size:8px; text-shadow:1px 1px 0 var(--night); pointer-events:none;
}

.panel{flex:1 1 auto; display:flex; flex-direction:column; min-height:0;
       padding:14px 16px; border-top:4px solid var(--grey)}
.clockrow{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px}
.time{font-size:24px}
.time small{font-size:10px; color:var(--mist); margin-left:5px}
.streets{font-size:9px; color:var(--mist); text-align:right; line-height:1.7}
.event{font-size:12px; line-height:1.7; color:var(--cream); min-height:3.4em; margin:0 0 8px}
.event.quiet{color:var(--mist)}
.log{font-size:8px; line-height:1.9; color:var(--grey); min-height:2em; margin:0 0 10px}
.actions{margin-top:auto}

.btn{
  display:block; width:100%; padding:14px 10px; border:0; cursor:pointer;
  font-family:inherit; font-size:12px;
  background:var(--orange); color:var(--night);
  box-shadow:inset -4px -4px 0 var(--rust), inset 4px 4px 0 var(--cream);
}
.btn:active{box-shadow:inset 4px 4px 0 var(--rust), inset -4px -4px 0 var(--cream)}
.btn[disabled]{
  background:var(--grey); color:var(--slate); cursor:default;
  box-shadow:inset -4px -4px 0 var(--slate), inset 4px 4px 0 var(--mist);
}
.btn:focus-visible,.ghost:focus-visible,.dev button:focus-visible{outline:3px solid var(--lime); outline-offset:2px}
.ghost{
  display:block; width:100%; margin-top:8px; padding:8px;
  background:none; border:0; font-family:inherit; font-size:9px;
  color:var(--mist); cursor:pointer;
}
.ghost:hover{color:var(--cream)}

.dev{padding:8px 14px 12px; border-top:1px solid var(--slate)}
.dev .row{display:flex; gap:5px; margin-bottom:6px}
.dev .lbl{font-size:8px; color:var(--grey); margin:0 0 4px}
.dev button{
  flex:1; padding:7px 3px; font-family:inherit; font-size:8px; cursor:pointer;
  background:transparent; color:var(--mist); border:2px solid var(--slate);
}
.dev button.on{background:var(--slate); color:var(--cream); border-color:var(--grey)}
.status{font-size:8px; color:var(--grey); line-height:1.7; margin:4px 0 0}
.status b{color:var(--lime); font-weight:400}
.status i{color:var(--rust); font-style:normal}