@font-face{font-family:Eurostile Bold;src:url(/fonts/eurostile-bol.otf) format("opentype");font-display:swap}@font-face{font-family:Eurostile;src:url(/fonts/eurostile-reg.otf) format("opentype");font-display:swap}@font-face{font-family:Eurostile Ext;src:url(/fonts/eurostileext-med.otf) format("opentype");font-display:swap}@font-face{font-family:Blizzard Global;src:url(/fonts/blizzard-global.ttf) format("truetype");font-display:swap}:root{color-scheme:dark;--accent: rgb(51 168 240);--lobby-link: rgb(255 184 77);--notice: rgb(107 194 242);--error: rgb(242 112 92);--text: rgb(214 224 240);--muted: rgb(125 143 168);--panel: rgb(11 18 26);--panel-header: rgb(9 16 22);--panel-separator: rgb(19 62 91 / 65%);--surface: rgb(6 10 15);--tab: rgb(8 12 18);--border: rgb(19 62 91);--nav-text: rgb(65 93 125);--nav-selected-text: rgb(230 249 255);--chat-surface: rgb(4 7 11 / 78%);--connected: rgb(71 209 133);--away: rgb(255 168 31);--busy: rgb(242 87 56);--in-game: rgb(224 46 36);--font-nav: "Eurostile Ext", "Avenir Next Condensed", sans-serif;--font-heading: "Eurostile Bold", "Avenir Next", sans-serif;--font-interface: "Eurostile", "Avenir Next", sans-serif;--font-body: "Blizzard Global", "Avenir Next", sans-serif;--header-height: 40px;--margin: 22px;--roster-width: 300px;--panel-header-height: 42px;--person-row-height: 52px;--channel-crossfade: .32s}*{box-sizing:border-box}body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow:hidden}.viewer{height:100vh;display:flex;flex-direction:column;background:var(--tab)}.tabbar{height:var(--header-height);flex:none;position:relative;display:flex;align-items:flex-end;background:var(--tab) url(/ui/top-nav-background.png) repeat-x bottom / 1px 36px;user-select:none}.tabs{display:flex;align-items:flex-end;height:36px;margin-left:14px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{position:relative;height:36px;flex:none;appearance:none;background:none;border:none;padding:0;color:var(--nav-text);font-family:var(--font-nav);font-size:12.5px;text-transform:uppercase;overflow:hidden;cursor:pointer}.tab-clip{position:absolute;inset:0 38px;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}.tab.tab-overflow .tab-clip{inset:0 38px 0 14px;justify-content:flex-start}.tab-name{white-space:nowrap;will-change:transform}.tab.unread{color:var(--notice)}.tab+.tab:before{content:"";position:absolute;left:0;bottom:2px;width:1px;height:32px;background:url(/ui/top-nav-divider.png) center / 1px 32px no-repeat}.tab:active{background:url(/ui/top-nav-hover.png) center / 100% 100% no-repeat}.tab.selected{color:var(--nav-selected-text);background:url(/ui/top-nav-selected.png) center bottom / calc(100% - 10px) 35px no-repeat,url(/ui/top-nav-hover.png) center / 100% 100% no-repeat}.tab.selected:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:url(/ui/top-nav-selected-line-glow.png) center / 100% 100% no-repeat,url(/ui/top-nav-selected-line.png) center / 100% 100% no-repeat;pointer-events:none}.tabbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;padding-right:14px;height:100%}.tabbar-status{display:flex;align-items:center;gap:7px;font-family:var(--font-nav);font-size:10px;letter-spacing:.12em;color:var(--nav-text)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.status-dot.live{background:var(--connected);box-shadow:0 0 6px #47d185cc;animation:live-pulse 2.4s ease-in-out infinite}@keyframes live-pulse{50%{box-shadow:0 0 2px #47d1854d}}.tabbar-portrait{position:relative;width:30px;height:30px;background:url(/ui/friend-placeholder.png) center / cover no-repeat}.tabbar-portrait:after{content:"";position:absolute;inset:-4px;background:url(/ui/portrait-frame.png) center / 100% 100% no-repeat}.stage{flex:1;display:flex;gap:var(--margin);min-height:0;padding:var(--margin);transition:opacity calc(var(--channel-crossfade) / 2) ease}.stage.switching{opacity:0}.transcript-panel,.roster{background:var(--panel);border:1px solid var(--border);border-radius:5px}.transcript-panel{flex:1;min-width:0;position:relative}.transcript-scene{position:absolute;inset:4px;border-radius:3px;background:url(/ui/deep-nebula.png) center / 100% 100% no-repeat}.transcript-scene:after{content:"";position:absolute;inset:0;background:var(--chat-surface)}.transcript{position:absolute;inset:4px;overflow-y:auto;padding:12px 14px}.entry{font-family:var(--font-body);font-size:13px;line-height:1.45;margin-bottom:5px;overflow-wrap:anywhere}.entry.reveal{animation:entry-reveal .22s ease}@keyframes entry-reveal{0%{opacity:0}}.entry .stamp{font-family:var(--font-interface);font-size:12px;color:var(--muted)}.entry .sender{font-family:var(--font-heading);font-size:13px;color:var(--accent)}.entry .colon{color:var(--muted)}.entry .body .lobby-link{font-family:var(--font-heading);color:var(--lobby-link);text-decoration:underline}.entry.notice{color:var(--notice)}.entry.membership{color:var(--muted)}.entry.membership .bullet{font-family:var(--font-heading);color:var(--connected)}.entry.error{color:var(--error)}.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-nav);font-size:11px;letter-spacing:.14em;color:var(--muted)}.roster{width:var(--roster-width);flex:none;position:relative}.roster-header{position:absolute;top:0;left:5px;right:5px;height:calc(var(--panel-header-height) - 5px);display:flex;align-items:center;justify-content:space-between;padding:0 9px;background:var(--panel-header)}.roster-header:after{content:"";position:absolute;left:0;right:0;top:var(--panel-header-height);margin-top:-5px;height:1px;background:var(--panel-separator)}.roster-title{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.roster-count{font-family:var(--font-body);font-size:12px;color:var(--muted);flex:none;margin-left:8px}.roster-rows{position:absolute;inset:calc(var(--panel-header-height) + 6px) 6px 6px 6px;overflow-y:auto;background:var(--surface);border-radius:3px}.roster-row{position:relative;height:var(--person-row-height)}.roster-row:hover:before{content:"";position:absolute;inset:1px 4px;background:#12305ef5;border:1.5px solid rgb(61 156 230);box-shadow:0 0 8px #3d9ce659}.portrait{position:absolute;left:12px;top:7px;width:38px;height:38px;background:url(/ui/friend-placeholder.png) center / cover no-repeat}.portrait:after{content:"";position:absolute;left:-4px;top:-4px;width:46px;height:46px;background:url(/ui/portrait-frame.png) center / 100% 100% no-repeat}.roster-name{position:absolute;left:62px;top:10px;right:10px;height:16px;font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.roster-presence{position:absolute;left:62px;top:29px;display:flex;align-items:center}.roster-presence img,.roster-presence .in-game-icon{width:14px;height:14px}.roster-presence .in-game-icon{background-color:var(--in-game);mask:url(/ui/status-in-game.png) center / contain no-repeat;-webkit-mask:url(/ui/status-in-game.png) center / contain no-repeat}.roster-presence span{margin-left:4px;font-family:var(--font-interface);font-size:11.5px;color:var(--muted)}.roster-offline{padding:22px 14px;text-align:center;font-family:var(--font-nav);font-size:10.5px;letter-spacing:.12em;color:var(--nav-text)}.landing-nav{height:var(--header-height);display:flex;align-items:center;gap:10px;padding:0 22px;background:var(--tab) url(/ui/top-nav-background.png) repeat-x bottom / 1px 36px}.landing-nav img{width:24px;height:24px}.landing-nav .wordmark{font-family:var(--font-heading);font-size:14px;letter-spacing:.16em;color:var(--notice)}.landing{min-height:calc(100vh - var(--header-height));display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(#04070bb3,#04070bc7),url(/ui/deep-nebula.png) center / cover no-repeat}.landing-card{max-width:560px;width:100%;background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:30px 34px}.landing-card h1{margin:0 0 10px;font-family:var(--font-heading);font-size:18px;letter-spacing:.1em;color:var(--notice)}.landing-card p{margin:0 0 20px;line-height:1.6;font-size:13px;color:var(--muted)}.landing-form{display:flex;gap:10px}.landing-form input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:2px;color:var(--text);padding:9px 12px;font-size:13px;font-family:var(--font-body)}.landing-form input::placeholder{color:#5e8291}.landing-form input:focus{outline:none;border-color:var(--accent)}.landing-form button{border:18px solid transparent;border-image:url(/ui/button-idle.png) 36 fill / 18px stretch;background:none;color:#ffe8ab;font-family:var(--font-nav);font-size:11.5px;letter-spacing:.1em;padding:0 6px;cursor:pointer}.landing-form button:active{border-image-source:url(/ui/button-active.png)}@media(max-width:760px){.roster{display:none}}