/* Hallmark · shape: app screen · theme: Console, Union brand assets · genre: modern-minimal · surface: absolute · signature: transparent Union banner · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, separated identity from the official logo */
/* Hallmark · waive 7b · supplied Union brand guide requires black · Official Union logo backgrounds retain the exact brand value */
:root {
  --overlay-colour: #8CE5FF; --overlay-secondary: #E8801F; --overlay-panel: #000000;
  --overlay-ink: #F4F5F7; --overlay-muted: #B6B9C3; --overlay-rule: #34363E;
  --overlay-font: 'BruceForever', 'Arial', sans-serif; --overlay-font-body: 'Arial', sans-serif;
  --overlay-transparent: transparent; --overlay-backdrop: rgba(0, 0, 0, .94);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow-x: clip; background: var(--overlay-transparent); }
body { overflow-y: clip; color: var(--overlay-ink); font-family: var(--overlay-font-body); }
#overlay { position: absolute; inset: 0; width: 1920px; height: 1080px; transform-origin: top left; }
.broadcast { position: absolute; inset: 0; }
.stream-banner { position: absolute; bottom: 56px; left: 56px; right: 56px; min-height: 132px; transform-origin: bottom left; }
.banner-surface { min-height: 132px; display: flex; align-items: center; gap: 28px; padding: 24px 32px; background: var(--overlay-backdrop); border-bottom: 3px solid var(--overlay-colour); border-left: 1px solid var(--overlay-colour); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.avatar { width: 82px; height: 82px; flex: 0 0 82px; display: grid; place-items: center; background: var(--overlay-panel); border: 1px solid var(--overlay-colour); color: var(--overlay-colour); font: 700 30px/1 var(--overlay-font); }
.avatar img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.identity { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.stream-name { margin: 0; font: 700 38px/1.1 var(--overlay-font); text-transform: uppercase; letter-spacing: -.025em; overflow-wrap: break-word; min-width: 0; max-width: 100%; }
.stream-subtitle { font-size: 17px; line-height: 1.3; color: var(--overlay-muted); overflow-wrap: break-word; }
.stream-handle { font-size: 18px; line-height: 1.3; color: var(--overlay-colour); max-width: 300px; overflow-wrap: break-word; }
.brand-lockup { display: flex; align-items: center; gap: 24px; padding-left: 28px; border-left: 1px solid var(--overlay-rule); }
.brand-lockup img { background: var(--overlay-panel); padding: 8px; display: block; width: 106px; height: 88px; object-fit: contain; }
.brand-caption { display: flex; flex-direction: column; gap: 8px; color: var(--overlay-ink); font-size: 18px; font-weight: 700; }
.brand-caption small { color: var(--overlay-muted); font-size: 14px; font-weight: 400; }
.secondary-line { position: absolute; bottom: 0; right: 0; width: 180px; height: 3px; background: var(--overlay-secondary); }
.broadcast[data-layout="top"] .stream-banner { bottom: auto; top: 36px; left: 36px; right: 36px; transform-origin: top left; }
.broadcast[data-layout="top"] .banner-surface { min-height: 112px; border-bottom-width: 2px; padding-top: 16px; padding-bottom: 16px; }
.broadcast[data-layout="top"] .avatar { width: 70px; height: 70px; flex-basis: 70px; }
.broadcast[data-layout="top"] .brand-lockup img { width: 88px; height: 76px; }
.broadcast[data-layout="compact"] .stream-banner { right: auto; width: 630px; }
.broadcast[data-layout="compact"] .banner-surface { gap: 24px; padding: 20px 24px; min-height: 124px; }
.broadcast[data-layout="compact"] .brand-caption, .broadcast[data-layout="compact"] .stream-handle { display: none; }
.broadcast[data-layout="compact"] .brand-lockup { padding-left: 20px; }
.broadcast[data-layout="compact"] .brand-lockup img { width: 74px; height: 74px; }
.broadcast[data-layout="compact"] .stream-name { font-size: 30px; }
.broadcast[data-layout="compact"][data-position="right"] .stream-banner { left: auto; right: 56px; transform-origin: bottom right; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }