* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #b9d3e6; }
body { font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif; color: #24323f; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.label {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  font-weight: 700; letter-spacing: .02em; color: #2b3a47;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}
.label.s0 { font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
.label.s1 { font-size: 15px; }
.label.s2 { font-size: 12px; color: #2f6b3c; }
.label.s3 { font-size: 13px; font-style: italic; color: #2a6c96; }
.label.s4 { font-size: 11px; font-weight: 600; color: #5a5148; }
body.night .label { color: #e7edf5; text-shadow: 0 0 3px #0b1522, 0 0 3px #0b1522, 0 0 6px #0b1522; }
body.night .label.s2 { color: #a9d8b0; }
body.night .label.s3 { color: #9fd0f2; }
body.night .label.s4 { color: #cfc6b8; }

header { position: fixed; top: 14px; left: 18px; pointer-events: none; }
header h1 {
  margin: 0; font-size: 30px; font-style: italic; font-weight: 800; color: #c8452f;
  text-shadow: 0 2px 0 #fff, 0 3px 8px rgba(0,0,0,.18);
}
header h1 span { color: #24323f; }
header p { margin: 2px 0 0; font-size: 12px; opacity: .75; }
body.night header h1 { text-shadow: 0 2px 0 #0b1522, 0 3px 8px rgba(0,0,0,.5); }
body.night header h1 span, body.night header p { color: #e7edf5; }

#controls { position: fixed; right: 16px; bottom: 54px; display: flex; flex-direction: column; gap: 6px; }
#controls button {
  min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: #24323f;
  background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
#controls button:hover { background: #fff; }
body.night #controls button { background: rgba(24,36,52,.9); color: #e7edf5; }

footer {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 16px; font-size: 11px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(transparent, rgba(255,255,255,.75));
}
footer a { color: inherit; }
body.night footer { color: #dfe7f0; background: linear-gradient(transparent, rgba(8,14,24,.75)); }

#loading {
  position: fixed; inset: 0; display: grid; place-items: center; font-size: 15px;
  background: linear-gradient(#a9c6e0, #e8ece6); transition: opacity .5s;
}
#loading.done { opacity: 0; pointer-events: none; }