* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { font-family: Arial, Helvetica, sans-serif; cursor: none; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; overflow: hidden; }
#tickerWrap { width: 100%; overflow: hidden; white-space: nowrap; }
#ticker { display: inline-block; font-weight: 800; line-height: 1.1; will-change: transform; }
#staticText { width: 100%; max-height: 100%; padding: 5vw; text-align: center; font-weight: 800; line-height: 1.1; white-space: pre-wrap; overflow-wrap: anywhere; }
#neon { position: absolute; inset: 0; overflow: hidden; background: black; }
#dvdLayer { position: absolute; inset: 0; pointer-events: none; }
#dvdLogo { position: absolute; top: 0; left: 0; width: var(--dvd-width); height: var(--dvd-height); opacity: .65; will-change: transform; }
/* Bounce against the visible capsule, excluding the original canvas margins. */
#dvdLogo .neon-canvas { left: 0; top: 0; transform-origin: top left; transform: scale(var(--dvd-scale)) translate(-155px, -192px); }
#stage.dvd-mode #staticText { position: relative; z-index: 1; text-shadow: 0 2px 16px #0009; }
.hidden { display: none !important; }
#connection { position: fixed; right: 18px; bottom: 14px; font: 12px/1.4 Arial, sans-serif; color: #b9bbc4; }
#connection.online { opacity: 0; }
#fullscreen { position: fixed; right: 18px; top: 18px; background: #191a24; color: #fff; border: 1px solid #444755; border-radius: 12px; padding: 12px 16px; opacity: 0; cursor: pointer; transition: opacity .2s; }
body.controls { cursor: auto; }
body.controls #fullscreen, #fullscreen:focus-visible { opacity: 1; }