/* The SpotlightX overlay (scene.html): one canvas for the game, a thin HUD on top.
   Sizes are in vh so the HUD is the same share of the picture at 720p and 1080p. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #05040b; }
body.preview { background: #05040b; }
#cv { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #fff; }

#pill { position: absolute; top: 2.6vh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.6vh;
  padding: 1.1vh 2.4vh 1.1vh 1.4vh; border-radius: 99px; background: rgba(12, 8, 24, 0.82); border: 0.25vh solid rgba(255, 79, 163, 0.75);
  box-shadow: 0 0 3vh rgba(255, 79, 163, 0.35); font-size: 2.6vh; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
  transition: opacity .3s; }
#pill .logo { display: flex; align-items: center; gap: .8vh; color: #ff7cc0; text-transform: uppercase; letter-spacing: .12em; font-size: 2.2vh; }
#pill .logo i { width: 2.4vh; height: 2.4vh; border-radius: 50%; background: radial-gradient(circle, #fffbe6 0 30%, #ff4fa3 31% 60%, transparent 62%); }
#pill kbd { font: inherit; font-size: 3vh; color: #1a0a14; background: #ff4fa3; padding: .3vh 1.3vh; border-radius: 1vh; box-shadow: 0 .4vh 0 #b8236c; }
#pill .n { color: #ffe37a; }
#pill .clock { font-variant-numeric: tabular-nums; color: #b9f3ff; min-width: 6.5vh; text-align: right; }
#pill.urgent .clock { color: #ff8a8a; }

#toasts { position: absolute; left: 2.4vh; bottom: 2.6vh; display: flex; flex-direction: column-reverse; gap: .9vh; }
.toast { display: flex; align-items: center; gap: 1vh; padding: .8vh 1.6vh .8vh 1vh; border-radius: 99px; background: rgba(12, 8, 24, 0.8);
  font-size: 2.2vh; font-weight: 700; animation: tin .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.toast.out { animation: tout .4s ease-in both; }
.toast b { width: 1.8vh; height: 1.8vh; border-radius: 50%; display: inline-block; }
@keyframes tin { from { transform: translateX(-4vh) scale(.8); opacity: 0; } }
@keyframes tout { to { transform: translateX(-3vh); opacity: 0; } }

#mark { position: absolute; right: 1.6vh; bottom: 1.4vh; font-size: 1.6vh; font-weight: 800; opacity: .55; letter-spacing: .1em; text-transform: uppercase; }
#bad { position: absolute; inset: auto 0 45vh; text-align: center; font-size: 3vh; font-weight: 700; opacity: .8; }