:root { color-scheme: dark; --gold:#d3af37; --gold-light:#f5d878; --ink:#0d0d0d; --surface:#1a1a1a; --line:#2e2e2e; --cream:#efeee0; --muted:#888880; font-family:"Courier New",ui-monospace,monospace; background:var(--ink); color:var(--cream); }
* { box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--gold) var(--surface); }
*::-webkit-scrollbar { width:4px; } *::-webkit-scrollbar-track { background:var(--surface); } *::-webkit-scrollbar-thumb { background:var(--gold); }
body { min-width:320px; margin:0; background:linear-gradient(rgba(211,175,55,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(211,175,55,.045) 1px,transparent 1px),var(--ink); background-size:32px 32px; }
main { width:min(100% - 32px, 920px); margin:auto; padding:24px 0 58px; }
.masthead { display:flex; align-items:center; justify-content:space-between; min-height:54px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; color:var(--cream); font-family:Impact,"Arial Black",sans-serif; font-size:13px; letter-spacing:2px; text-decoration:none; }.brand small { color:var(--gold); font:700 8px "Courier New",monospace; letter-spacing:1px; }.brand-mark { color:var(--gold); font-size:18px; }
.live-indicator { color:var(--muted); font-size:10px; letter-spacing:1px; }.live-indicator i { display:inline-block; width:7px; height:7px; margin-right:7px; background:#44ff88; box-shadow:0 0 8px #44ff88; }
.hero-copy { padding:52px 0 30px; max-width:650px; }.eyebrow { color:var(--gold); font-size:10px; letter-spacing:2px; margin:0 0 14px; }.hero-copy h1 { margin:0; font-family:Impact,"Arial Black",sans-serif; font-size:clamp(36px,9vw,78px); line-height:.88; letter-spacing:1px; }.hero-copy h1 em { color:var(--gold); font-style:normal; text-shadow:0 0 22px rgba(211,175,55,.2); }.cursor { display:inline-block; width:11px; height:36px; margin-left:7px; background:var(--gold); animation:blink 1s step-end infinite; }.hero-copy > p:last-child { max-width:455px; color:var(--muted); font-size:15px; line-height:1.6; }
.status-line { min-height:30px; border-left:2px solid var(--gold); padding:7px 11px; background:rgba(211,175,55,.06); color:var(--gold-light); font-size:12px; }
section { position:relative; margin-top:18px; padding:26px; border:1px solid var(--line); background:rgba(26,26,26,.94); box-shadow:0 0 0 1px rgba(211,175,55,.03); } section::before,section::after { content:""; position:absolute; width:12px; height:12px; border-color:var(--gold); pointer-events:none; } section::before { top:-2px; left:-2px; border-top:2px solid; border-left:2px solid; } section::after { right:-2px; bottom:-2px; border-right:2px solid; border-bottom:2px solid; }
[hidden] { display:none !important; } p { color:var(--muted); font-size:14px; line-height:1.7; }
.panel-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; }.panel-heading span { color:var(--ink); background:var(--gold); min-width:30px; padding:4px 6px; text-align:center; font-weight:700; font-size:11px; }.panel-heading h2,.stream-heading h2 { margin:0; color:var(--cream); font-family:Impact,"Arial Black",sans-serif; font-size:19px; letter-spacing:1px; }.stream-heading { margin-top:32px; }
label { display:block; margin:17px 0 4px; color:var(--cream); font-size:11px; letter-spacing:1px; text-transform:uppercase; } input { display:block; width:100%; margin-top:7px; border:1px solid var(--line); border-radius:0; outline:0; background:var(--ink); color:var(--cream); padding:14px; font:14px "Courier New",monospace; transition:border-color .15s,box-shadow .15s; } input:focus { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); } input::placeholder { color:#5d5d59; }
button { display:inline-block; margin:11px 6px 0 0; padding:13px 17px; border:1px solid var(--gold); border-radius:0; background:var(--gold); color:var(--ink); cursor:pointer; font:700 11px "Courier New",monospace; letter-spacing:.6px; text-transform:uppercase; transition:background .16s,transform .16s; } button:hover:not(:disabled) { background:var(--gold-light); transform:translate(-1px,-1px); box-shadow:3px 3px 0 #6e5820; } button:focus-visible,a:focus-visible { outline:2px solid var(--gold-light); outline-offset:3px; } button:disabled { cursor:not-allowed; opacity:.45; } form { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); } #copy,#stop { color:var(--cream); background:transparent; border-color:#555; } #copy:hover:not(:disabled),#stop:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); box-shadow:none; }
#invite { color:var(--gold-light); } #external a { color:var(--gold); font-size:13px; } #streams { display:flex; flex-wrap:wrap; gap:8px; } #streams button { margin:0; background:transparent; color:var(--cream); border-color:#50504a; } #streams button:hover:not(:disabled) { color:var(--gold); border-color:var(--gold); box-shadow:none; }
video { display:block; width:100%; max-height:65vh; margin-top:22px; border:1px solid var(--gold); border-radius:0; background:#000; box-shadow:0 0 28px rgba(211,175,55,.09); } footer { display:flex; justify-content:space-between; gap:16px; width:min(100% - 32px,920px); margin:auto; padding:18px 0 28px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; letter-spacing:1px; }
.player-shell { position:relative; aspect-ratio:16 / 9; margin-top:22px; overflow:hidden; border:1px solid var(--gold); background:#000; box-shadow:0 0 28px rgba(211,175,55,.14); }.player-shell video { width:100%; height:100%; max-height:none; margin:0; border:0; box-shadow:none; object-fit:contain; }.player-hud { position:absolute; right:0; left:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:12px 13px; color:var(--cream); background:linear-gradient(180deg,rgba(0,0,0,.76),transparent); font-size:10px; font-weight:700; letter-spacing:1px; pointer-events:none; }.player-hud-top { top:0; }.player-hud-bottom { bottom:0; background:linear-gradient(0deg,rgba(0,0,0,.82),transparent); align-items:flex-end; }.live-badge { color:#ff6565; }.live-badge i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#ff4545; box-shadow:0 0 9px #ff4545; animation:pulse 1.2s ease-in-out infinite; }.fullscreen { position:relative; z-index:2; margin:0; padding:8px 10px; color:var(--cream); border-color:rgba(239,238,224,.55); background:rgba(13,13,13,.62); font-size:9px; pointer-events:auto; }.fullscreen:hover:not(:disabled) { color:var(--ink); background:var(--gold); box-shadow:none; }.player-shell:fullscreen { width:100vw; height:100vh; max-width:none; border:0; background:#000; }.player-shell:fullscreen video { object-fit:contain; }.player-shell:fullscreen .player-hud { padding:20px 24px; }@keyframes pulse { 50% { opacity:.35; transform:scale(.8); } }
@keyframes blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } } @media (max-width:560px) { body { background-size:24px 24px; }.scanlines::after { opacity:.55; } main { width:min(100% - 24px,920px); padding:12px 0 32px; }.masthead { align-items:flex-start; min-height:46px; padding:8px 0; gap:12px; }.brand { gap:6px; font-size:12px; }.live-indicator { max-width:110px; padding-top:3px; text-align:right; font-size:8px; line-height:1.4; }.hero-copy { padding:26px 0 14px; }.hero-copy h1 { font-size:clamp(34px,12vw,52px); line-height:.9; }.hero-copy > p:last-child { margin:13px 0 0; font-size:13px; line-height:1.45; }.cursor { width:7px; height:23px; margin-left:4px; }.status-line { min-height:0; padding:8px 10px; font-size:10px; line-height:1.45; } section { margin-top:13px; padding:17px; }.panel-heading { gap:9px; margin-bottom:12px; }.panel-heading h2,.stream-heading h2 { font-size:17px; }.stream-heading { margin-top:25px; }.stream-heading .eyebrow { margin-bottom:8px; } p { font-size:13px; line-height:1.55; } label { margin-top:13px; } input { padding:12px; } button { min-height:42px; padding:11px 13px; font-size:10px; }.player-shell { width:calc(100% + 34px); margin:18px -17px 0; border-right:0; border-left:0; box-shadow:none; }.player-hud { padding:9px 10px; font-size:8px; }.player-hud-bottom { align-items:center; }.fullscreen { min-height:34px; padding:7px 9px; font-size:8px; }.player-shell:fullscreen .player-hud { padding:16px; }.player-shell:fullscreen .fullscreen { min-height:38px; font-size:9px; } footer { flex-direction:column; width:min(100% - 24px,920px); gap:8px; padding:14px 0 22px; font-size:8px; } }
@media (max-width:360px) { .hero-copy > p:last-child { display:none; }.hero-copy { padding-bottom:8px; } section { padding:14px; }.player-shell { width:calc(100% + 28px); margin-right:-14px; margin-left:-14px; } }
@media (max-height:520px) and (orientation:landscape) { main { width:min(100% - 32px,1100px); padding-top:8px; }.hero-copy { display:none; }.masthead { min-height:38px; }.player-shell { max-height:calc(100vh - 160px); margin-top:12px; }.player-shell video { object-fit:contain; } }
footer a,.legal a { color:var(--gold); text-decoration:none; } footer a:hover,.legal a:hover { color:var(--gold-light); text-decoration:underline; }.legal { padding:52px 0 24px; max-width:720px; }.legal h1 { margin:0 0 42px; font-family:Impact,"Arial Black",sans-serif; font-size:clamp(42px,9vw,76px); line-height:.88; letter-spacing:1px; }.legal h1 em { color:var(--gold); font-style:normal; }.legal h2 { margin:31px 0 7px; color:var(--cream); font-family:Impact,"Arial Black",sans-serif; font-size:22px; letter-spacing:.7px; }.legal p { max-width:680px; }.legal-back { margin-top:40px; font-weight:700; }
body.theater-open { overflow:hidden; }.player-shell.theater { position:fixed; z-index:60; inset:0; width:100vw; height:100vh; max-width:none; margin:0; border:0; background:#000; aspect-ratio:auto; }.player-shell.theater video { width:100%; height:100%; object-fit:contain; }.room-active .hero-copy { display:none; }.room-active main { padding-top:10px; }.room-active #room { margin-top:12px; padding:17px; }.activity-note { margin:0; font-size:12px; }.transmit-panel { margin-top:13px; border-top:1px solid var(--line); }.transmit-panel summary { padding:11px 0; color:var(--gold); cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }.transmit-panel summary::marker { content:""; }.transmit-panel[open] summary { color:var(--gold-light); }.transmit-panel label { margin-top:3px; }.transmit-panel button { margin-top:8px; }.transmit-panel p { margin:7px 0 0; }.room-active .stream-heading { margin-top:22px; }.room-active .player-shell { margin-top:14px; }@media (min-width:561px) { .room-active .player-shell { height:min(52vh,440px); max-height:none; aspect-ratio:auto; }.room-active section { padding:18px; }.room-active .panel-heading { margin-bottom:8px; }.room-active .stream-heading { margin-top:16px; }.room-active .stream-heading .eyebrow { margin-bottom:6px; }.room-active .player-hud { padding:9px 11px; } }
html:has(body.room-active),body.room-active { height:100%; overflow:hidden; }body.room-active main { display:grid; grid-template-rows:54px 1fr; width:100%; max-width:none; height:100dvh; padding:0; }.room-active .masthead { grid-row:1; min-height:0; padding:0 20px; background:rgba(13,13,13,.97); }.room-active .brand { font-size:12px; }.room-active #status { position:fixed; z-index:70; right:12px; bottom:12px; left:auto; min-height:0; max-width:min(420px,calc(100vw - 24px)); padding:7px 10px; border:1px solid var(--line); border-left:2px solid var(--gold); background:rgba(13,13,13,.9); font-size:9px; pointer-events:none; }.room-active #room { display:grid; grid-row:2; grid-template-rows:auto 1fr; width:100%; height:100%; min-height:0; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }.room-active #room::before,.room-active #room::after { display:none; }.workspace-bar { display:flex; align-items:center; justify-content:space-between; min-height:43px; padding:0 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(26,26,26,.88); }.workspace-bar > span { color:var(--muted); font-size:9px; letter-spacing:1px; }.workspace-bar > span i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#44ff88; box-shadow:0 0 8px #44ff88; }.room-active #streams { min-height:0; color:var(--gold-light); font-size:9px; font-weight:700; letter-spacing:1px; }.empty-state { display:flex; grid-row:2; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:0; padding:20px; text-align:center; }.empty-state p { margin:0; color:var(--cream); font-size:14px; }.empty-state button { min-height:38px; margin:0; padding:10px 17px; }.empty-state #external { max-width:100%; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.room-active .player-shell { display:block; grid-row:2; width:100%; height:100%; max-height:none; margin:0; border:0; box-shadow:none; aspect-ratio:auto; }.room-active .player-shell video { width:100%; height:100%; object-fit:contain; }.room-active .player-hud { padding:12px 16px; }.room-active .player-hud-bottom { padding-bottom:16px; }.room-active .fullscreen { min-height:34px; }.room-active footer { display:none; }@media (max-width:560px) { body.room-active main { grid-template-rows:46px 1fr; }.room-active .masthead { padding:0 12px; }.room-active .brand small { display:none; }.room-active .header-actions { gap:8px; }.room-active .vhs-toggle { min-height:25px; padding:5px 6px; font-size:7px; }.room-active .live-indicator { max-width:130px; font-size:7px; }.room-active .workspace-bar { min-height:38px; padding:0 12px; }.workspace-bar > span,.room-active #streams { font-size:8px; }.empty-state { gap:9px; padding:14px; }.empty-state p { font-size:13px; }.empty-state button { min-height:36px; padding:9px 13px; }.room-active .player-hud { padding:8px 10px; }.room-active .player-hud-bottom { padding-bottom:10px; }.room-active #status { right:8px; bottom:8px; max-width:calc(100vw - 16px); font-size:8px; }.room-active .player-shell.theater .player-hud { padding:14px; } }