/* One layout for the production livestream page. */
:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,sans-serif;color:#fff;--brand-width:112px;--brand-height:56px;--watch-gap:10px}
*{box-sizing:border-box}
html{height:100%;background:#080611}
body{margin:0}
a{color:inherit;text-decoration:none}
body.is-watch-screen{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;height:var(--watch-viewport-height,100dvh);min-height:0;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#080611}
body.is-watch-screen:before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:#080611 url('/assets/arcade-cabinet-brand-2026.webp') right top/max(100vw,192svh) auto no-repeat;filter:brightness(1.05) saturate(1.12) contrast(1.03)}
.skip-link{position:fixed;top:-100px;left:12px;z-index:99;background:white;color:black;padding:10px}
.skip-link:focus{top:12px}
.site-header{position:relative;flex:0 0 68px;width:calc(100% - 24px);max-width:1440px;margin:10px auto 0;padding:0 18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;border:1px solid #ffffff57;border-radius:22px;background:linear-gradient(112deg,#0d0a1617,#15101f12 36%,#0c09140b 70%,#0d0a1612);box-shadow:0 14px 42px #0003,inset 0 1px #ffffff5c,inset 0 -1px #ffffff0f;backdrop-filter:blur(3px) saturate(150%);-webkit-backdrop-filter:blur(3px) saturate(150%)}
.brand-logo{display:flex;line-height:0;justify-self:start}
.brand-logo img,.watch-footer img{display:block;width:var(--brand-width);height:var(--brand-height);object-fit:contain;filter:none;opacity:1;mix-blend-mode:normal}
.now-playing{margin:0;font-size:11px;letter-spacing:.2em;font-weight:700;white-space:nowrap}
.header-actions{justify-self:end}
.stream-status{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;white-space:nowrap;border:1px solid #ffffff29;border-radius:99px;background:#0a091161;color:#eee;font-size:9px;font-weight:700;letter-spacing:.08em}
.stream-status i{display:block;width:6px;height:6px;flex:none;border-radius:50%}
.stream-status.is-unknown i{background:#f1c66f;box-shadow:0 0 10px #ffcd6e73}
.stream-status.is-offline i{background:#ff5577;box-shadow:0 0 10px #ff477794}
.stream-status.is-live{border-color:#47ff8f80;background:#156b393d}
.stream-status.is-live i{background:#47ff8f;animation:broadcast-beacon 1.4s ease-in-out infinite}
@keyframes broadcast-beacon{0%,100%{opacity:1;box-shadow:0 0 5px #47ff8f,0 0 13px #47ff8f}50%{opacity:.45;box-shadow:0 0 3px #47ff8f}}
main{flex:1 1 0;min-height:0;width:100%;padding:14px 12px 12px;display:grid;place-items:center}
#app{width:100%;height:100%;min-height:0;display:grid;place-items:center}
.watch-screen{display:grid;justify-items:center;align-content:center;gap:var(--watch-gap);width:min(96vw,1480px,var(--watch-player-width,88vw));max-width:100%;margin:0 auto}
.stream-player{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border:1px solid #ffffff38;border-radius:16px;background:#080611;box-shadow:inset 0 0 0 1px #36e8ff38,0 12px 40px #0003}
.stream-placeholder,.stream-embed,.stream-player iframe{position:absolute;inset:0;width:100%;height:100%}
.stream-embed[hidden],.stream-placeholder[hidden],.offline-copy[hidden]{display:none}
.stream-player iframe{border:0}
.offline-machine{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;filter:saturate(1.04);transform:scale(1.012)}
.offline-copy{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:12px;background:radial-gradient(ellipse at center,#05040c80,transparent 54%);color:#fff;text-shadow:0 2px 20px #000}
.offline-copy strong{white-space:nowrap;font-size:clamp(13px,3.6vw,22px);line-height:1.15;font-weight:700}
.player-channel-links{position:absolute;z-index:3;right:10px;bottom:10px;display:flex;align-items:center;gap:4px}
.player-channel-link{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;background:transparent;border:0;padding:0}
.player-channel-link img{display:block;object-fit:contain;max-width:none;filter:none;opacity:1}
.youtube-channel img{width:28px;height:20px}
.twitch-channel img{width:20px;height:24px}
.player-channel-link:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.watch-footer{position:static;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:0;padding:0;color:#fff;opacity:1;text-align:center}
.watch-footer .footer-brand-name{font-weight:600;letter-spacing:.02em}
.watch-footer p{margin:0;color:#fff;font-size:6px;font-weight:500;line-height:1.15;letter-spacing:.02em;white-space:nowrap}
@media(max-width:560px){.site-header{height:60px;flex-basis:60px;padding:0 10px;gap:5px}.now-playing{font-size:9px;letter-spacing:.15em}.stream-status{font-size:7px;min-height:27px;padding:0 7px;gap:5px}:root{--brand-width:104px;--brand-height:52px}body.is-watch-screen:before{background-position:78% top;background-size:max(100vw,195.56svh) auto}}
body.is-landscape{--brand-width:80px;--brand-height:40px}
body.is-landscape .site-header{flex-basis:42px;height:42px;margin-top:4px;padding:0 10px;border-radius:14px}
body.is-landscape .now-playing{font-size:9px}
body.is-landscape .stream-status{min-height:25px;font-size:7px}
body.is-landscape main{padding:8px 10px 6px}
body.is-landscape:before{background-position:right top;background-size:max(100vw,217.78svh) auto}
body.is-landscape .stream-player{border-radius:12px}
@media(prefers-reduced-motion:reduce){.stream-status.is-live i{animation:none}}

/* Footer artwork keeps the same dimensions through rotation. */
.watch-footer img{width:64px;height:32px}

/* Matching neon text treatment in both orientations. */
.watch-footer p{color:#68dcff;background:linear-gradient(105deg,#56e5ff 0%,#8acbff 35%,#d88cff 65%,#ff61ce 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 2px #9e5cff55)}