:root {
  --red: #e5202b;
  --red2: #ff3b47;
  --blue: #1f6cff;
  --cyan: #7ee7ff;
  --ink: rgba(6, 10, 18, 0.78);
  --ink2: rgba(10, 14, 24, 0.62);
  --line: rgba(255, 255, 255, 0.16);
  --text: #eef3f8;
  --muted: rgba(230, 238, 246, 0.62);
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  --feedW: clamp(200px, 21vw, 420px);
  --pad: clamp(12px, 1.6vw, 26px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #04060a; overflow: hidden; }
body { font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#hud { position: fixed; inset: 0; pointer-events: none; user-select: none; text-transform: uppercase; }
#hud small { font-weight: 500; }

/* ---------- top bar ---------- */
#topbar {
  position: absolute; left: var(--pad); right: var(--pad); top: var(--pad);
  display: flex; justify-content: space-between; align-items: flex-start;
}
#topbar .left { display: flex; align-items: center; gap: 10px; }
.logo { display: flex; align-items: center; gap: 8px; background: var(--ink); padding: 6px 12px 6px 6px; border-left: 4px solid var(--red); }
.logo-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0, #d9dee6 35%, #8a94a6 100%);
  display: grid; place-items: center; color: #0b1020; font-weight: 900; font-size: 22px; letter-spacing: -1px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15), inset 0 -4px 8px rgba(0,0,0,0.25);
}
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text b { font-size: 20px; font-weight: 900; letter-spacing: 1px; }
.logo-text small { font-size: 10px; letter-spacing: 3px; color: var(--muted); margin-top: 3px; }

.live-badge {
  display: flex; align-items: center; gap: 7px; background: var(--red); color: #fff;
  font-weight: 900; font-size: 15px; letter-spacing: 2px; padding: 9px 12px 9px 10px;
  box-shadow: 0 0 18px rgba(229, 32, 43, 0.55);
}
.live-badge .dot, .feed-live .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: blink 1s steps(2, start) infinite; }
.breaking-badge { background: #fff; color: #b3101a; font-weight: 900; font-size: 13px; letter-spacing: 2px; padding: 10px 12px; }
.eas-badge { background: var(--ink2); color: #ffd35c; font-weight: 700; font-size: 11px; letter-spacing: 2px; padding: 11px 12px; border: 1px solid rgba(255, 211, 92, 0.35); animation: easPulse 2.4s ease-in-out infinite; }

#topbar .right { display: flex; align-items: flex-start; gap: 14px; text-align: right; }
.clock { font-family: var(--mono); font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: 1px; background: var(--ink); padding: 4px 12px; line-height: 1.15; border-right: 4px solid var(--cyan); }
.meta { font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--muted); background: var(--ink2); padding: 6px 10px; }
.meta div:first-child { color: var(--text); font-weight: 700; }

/* ---------- rec / timecode ---------- */
#rec {
  position: absolute; left: var(--pad); top: calc(var(--pad) + 62px);
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: #ffd8d8; display: flex; align-items: center; gap: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red2); box-shadow: 0 0 8px var(--red2); animation: blink 1.2s steps(2, start) infinite; }
.signal { display: inline-flex; align-items: flex-end; gap: 2px; margin-left: 6px; height: 12px; }
.signal i { display: block; width: 3px; background: #9be7ff; opacity: 0.9; }
.signal i:nth-child(1) { height: 4px; } .signal i:nth-child(2) { height: 7px; } .signal i:nth-child(3) { height: 10px; } .signal i:nth-child(4) { height: 12px; animation: sigFlick 3.3s steps(1) infinite; }

/* ---------- main cam label ---------- */
#maincam {
  position: absolute; left: var(--pad); bottom: calc(var(--pad) + 150px);
  display: flex; align-items: stretch; font-size: 12px; letter-spacing: 1.5px; font-weight: 700;
}
.cam-id { background: #fff; color: #0b1020; padding: 5px 8px; font-weight: 900; }
#maincam .cam-name { background: var(--ink); padding: 5px 10px; color: var(--text); }

/* ---------- incident log ---------- */
#log {
  position: absolute; left: var(--pad); top: calc(var(--pad) + 96px); width: clamp(220px, 22vw, 360px);
  bottom: calc(var(--pad) + 190px);
  background: linear-gradient(180deg, var(--ink) 0%, rgba(6,10,18,0.55) 100%);
  border-top: 3px solid var(--red); padding: 8px 10px 10px; overflow: hidden;
}
.panel-title { font-size: 12px; font-weight: 900; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.panel-title small { margin-left: auto; font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }
.dot-red { width: 8px; height: 8px; border-radius: 50%; background: var(--red2); box-shadow: 0 0 8px var(--red2); animation: blink 1s steps(2,start) infinite; }
#log-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 11.5px; line-height: 1.35; text-transform: none; }
#log-list li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,0.07); animation: logIn 0.5s ease-out; }
#log-list li:first-child { background: rgba(255, 59, 71, 0.12); }
#log-list li time { font-family: var(--mono); font-size: 11px; color: var(--cyan); }
#log-list li.alert { color: #ffb4b8; }
#log-list li.alert time { color: #ff7d86; }
#log-list li.warn { color: #ffe08a; }
#log-list li.ok { color: #b6f5c0; }
#log-list li span b { color: #fff; }

/* ---------- secondary feeds ---------- */
#feeds {
  position: absolute; right: var(--pad); top: calc(var(--pad) + 96px);
  display: flex; flex-direction: column; gap: 12px;
}
.feed {
  position: relative; width: var(--feedW); aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 0 0 3px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.5);
  background: transparent;
}
.feed-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; font-size: 10px; letter-spacing: 1.5px; }
.feed-top .cam-id { padding: 3px 6px; font-size: 10px; }
.feed-live { display: flex; align-items: center; gap: 5px; background: var(--red); color: #fff; font-weight: 900; padding: 3px 7px 3px 6px; }
.feed-live .dot { width: 6px; height: 6px; }
.feed-label { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(6,10,18,0.35) 100%); font-size: 10px; letter-spacing: 1px; font-weight: 700; padding: 4px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed.cut .feed-label { animation: labelIn 0.4s ease-out; }

/* ---------- lower third + ticker ---------- */
#lower { position: absolute; left: 0; right: 0; bottom: 0; }
.lower-third { position: absolute; left: var(--pad); right: var(--pad); bottom: 46px; display: flex; align-items: stretch; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6)); }
.lower-third .tag { background: var(--red); color: #fff; font-weight: 900; letter-spacing: 3px; font-size: clamp(12px, 1.2vw, 16px); padding: 0 16px; display: grid; place-items: center; writing-mode: horizontal-tb; border-right: 2px solid #ffb3b7; }
.lower-third .headline { flex: 1; display: flex; flex-direction: column; }
.lower-third .h1 { background: rgba(255,255,255,0.96); color: #0b1020; font-weight: 900; font-size: clamp(16px, 1.9vw, 30px); letter-spacing: 0.5px; padding: 7px 14px; line-height: 1.1; }
.lower-third .h2 { background: var(--ink); color: var(--text); font-size: clamp(10px, 1vw, 14px); font-weight: 600; padding: 6px 14px; letter-spacing: 0.4px; text-transform: none; }
.ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: #0a0d14; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: stretch; }
.ticker-tag { background: var(--red); color: #fff; font-weight: 900; letter-spacing: 3px; padding: 0 16px; display: grid; place-items: center; font-size: 13px; z-index: 2; }
.ticker-track { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-text { position: absolute; left: 0; white-space: nowrap; font-family: var(--font); font-weight: 600; font-size: 14px; letter-spacing: 0.6px; color: #e9eef5; animation: ticker 90s linear infinite; padding-left: 24px; }
.ticker-text b { color: #ff8b93; }

#alert-flash { position: absolute; inset: 0; background: rgba(255, 40, 60, 0); pointer-events: none; transition: background 0.1s; }
#alert-flash.on { background: rgba(255, 40, 60, 0.12); }

#fallback { position: fixed; inset: 0; display: grid; place-items: center; color: #fff; font-family: var(--font); background: #04060a; }
#fallback[hidden] { display: none; }

@keyframes blink { 50% { opacity: 0.15; } }
@keyframes easPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 211, 92, 0); } 50% { box-shadow: 0 0 14px rgba(255, 211, 92, 0.45); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes logIn { from { transform: translateX(-12px); opacity: 0; background: rgba(255,59,71,0.4); } to { transform: none; opacity: 1; } }
@keyframes labelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sigFlick { 0%, 60%, 100% { opacity: 0.9; } 62%, 70% { opacity: 0.15; } 80% { opacity: 0.9; } 84% { opacity: 0.2; } }

@media (max-height: 640px) {
  #log { display: none; }
}