:root {
  --bg: #0b0f14;
  --fg: #f7f8fa;
  --muted: #b7c0ca;
  --accent: #d5b16f;
  --panel: rgba(11, 15, 20, 0.82);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--bg); overflow: hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--fg); }

.player { position: relative; width: 100vw; height: 100vh; background: var(--bg); }
.stage { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms ease; pointer-events: none; }
.stage.active { opacity: 1; }

.media-fill { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.media-contain { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }

.message-slide {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 7vw; text-align: center; background:
    radial-gradient(circle at 16% 12%, rgba(213,177,111,.22), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(90,130,160,.15), transparent 32%),
    linear-gradient(135deg, #0b0f14, #121923 55%, #0b0f14);
}
.message-card { max-width: 1300px; }
.message-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: clamp(14px, 1.6vw, 30px); color: var(--accent); font-weight: 700; margin-bottom: 1.4rem; }
.message-title { font-size: clamp(44px, 6.4vw, 118px); line-height: .98; margin: 0 0 2rem; font-weight: 800; letter-spacing: -.04em; }
.message-body { font-size: clamp(22px, 2.6vw, 48px); line-height: 1.35; color: var(--muted); margin: 0 auto; max-width: 1100px; }
.message-cta { display: inline-block; margin-top: 2.4rem; padding: .8em 1.1em; border: 2px solid rgba(255,255,255,.22); border-radius: 999px; font-size: clamp(18px, 2vw, 38px); font-weight: 700; }

.empty-state { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 10vw; background: linear-gradient(135deg,#0b0f14,#141d27); }
.empty-state p { color: var(--muted); font-size: clamp(18px, 2vw, 34px); }
.brand-name { font-size: clamp(36px, 5vw, 86px); font-weight: 800; letter-spacing: -.03em; }
.tagline { margin-top: 1rem; color: var(--accent); font-size: clamp(18px, 2.2vw, 38px); }
.hidden { display: none !important; }

.status-dot { position: fixed; right: 10px; bottom: 10px; width: 9px; height: 9px; border-radius: 999px; background: #3fb950; opacity: .20; z-index: 20; }
.status-dot.warn { background: #f0a020; opacity: .65; }
.status-dot.error { background: #f85149; opacity: .8; }

.diagnostics { position: fixed; z-index: 50; right: 20px; bottom: 30px; width: min(680px, calc(100vw - 40px)); max-height: 72vh; overflow: auto; background: var(--panel); color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 20px; backdrop-filter: blur(15px); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.45; }
.diagnostics b { color: var(--accent); }