@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--magic: #00ff2f;--glow: #7fff5e;--deep: #009a1c;--green: #00ff2f;--bg: #060a06;--bg2: #0a100a;--bg3: #0f1a0f;--text: #d0e8d0;--dim: #464646;--font: "Press Start 2P", monospace;--font-mono: "Courier New", Courier, monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}#loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .8s ease}#loading-screen.fade-out{opacity:0;pointer-events:none}#loading-wizard{width:256px;height:256px;filter:drop-shadow(0 0 20px rgba(0,255,47,.5)) drop-shadow(0 0 40px rgba(0,255,47,.25));animation:loadingBounce 1.2s ease-in-out infinite}@keyframes loadingBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.loading-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:260px}.loading-bar-track{width:100%;height:6px;background:#46464666;border:1px solid var(--dim);overflow:hidden}.loading-bar-fill{height:100%;width:0%;background:var(--magic);box-shadow:0 0 8px var(--magic);transition:width .15s linear}.loading-pct{font-family:var(--font);font-size:10px;color:var(--magic);letter-spacing:4px;text-shadow:0 0 8px var(--magic)}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:13px;line-height:1.6}a{color:var(--magic);text-decoration:none}a:hover{color:var(--glow)}.flying-wizards-bg,.flying-wizards-fg{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.flying-wizards-bg{z-index:1}.flying-wizards-fg{z-index:999}.flying-wizard{position:absolute;top:0;left:0;image-rendering:auto;will-change:transform;object-fit:contain;filter:drop-shadow(0 0 6px rgba(0,255,47,.25))}.flying-wizard--fg{filter:drop-shadow(0 0 14px rgba(255,255,255,.5)) drop-shadow(0 0 24px rgba(0,255,47,.4))}#app{position:relative;z-index:10;display:flex;flex-direction:column;min-height:100vh}header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:#060a06d9;border-bottom:1px solid var(--deep);box-shadow:0 1px 8px #00ff2f26;gap:12px;position:sticky;top:0;z-index:100;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-left{display:flex;align-items:center;gap:10px}.header-logo{width:28px;height:28px}.site-logo{width:40px;height:40px;overflow:visible}.site-logo .o{fill:#000;filter:drop-shadow(0 0 .5px rgba(0,255,47,.3));animation:outlineGlow 16s ease-in-out infinite}.site-logo .b{fill:#464646;animation:bodyPulse 20s ease-in-out infinite}.site-logo .m{fill:#00ff2f;filter:drop-shadow(0 0 2px #00ff2f);animation:magicGlow 10s ease-in-out infinite}@keyframes outlineGlow{0%,to{fill:#000;filter:drop-shadow(0 0 .5px rgba(0,255,47,.3))}50%{fill:#111;filter:drop-shadow(0 0 1.5px rgba(0,154,28,.5))}}@keyframes bodyPulse{0%,to{fill:#464646}33%{fill:#3e5243}66%{fill:#4a5246}}@keyframes magicGlow{0%,to{fill:#00ff2f;filter:drop-shadow(0 0 2px #00ff2f)}50%{fill:#7fff5e;filter:drop-shadow(0 0 6px #00ff2f) drop-shadow(0 0 12px #00ff7f)}}#site-title{font-family:var(--font);font-size:clamp(10px,2vw,16px);color:var(--magic);letter-spacing:3px;text-shadow:0 0 8px var(--magic),0 0 16px var(--magic);animation:glitchTitle 4s infinite;position:relative}@keyframes glitchTitle{0%,94%,to{text-shadow:0 0 10px var(--magic),0 0 20px var(--magic),0 0 40px var(--magic);transform:translate(0)}95%{text-shadow:-3px 0 var(--glow),3px 0 var(--deep),0 0 20px var(--magic);transform:translate(-2px,1px) skew(-3deg)}96%{text-shadow:3px 0 var(--glow),-3px 0 var(--deep),0 0 20px var(--magic);transform:translate(2px,-1px) skew(3deg)}97%{text-shadow:0 0 10px var(--magic),0 0 20px var(--magic);transform:translate(0)}98%{text-shadow:-4px 0 var(--deep),4px 0 var(--glow),0 0 30px var(--magic);transform:translate(-1px,2px)}}nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}nav a{font-family:var(--font);font-size:8px;padding:6px 10px;border:1px solid var(--dim);color:var(--dim);letter-spacing:1px;transition:all .2s;background:transparent;cursor:pointer;text-decoration:none}nav a:hover{border-color:var(--magic);color:var(--magic);box-shadow:0 0 8px var(--magic)}.header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#login-panel{display:flex;gap:6px;flex-wrap:wrap}.social-login-btn{font-family:var(--font);font-size:7px;padding:7px 10px;border:2px solid;cursor:pointer;letter-spacing:1px;transition:all .15s;background:transparent;position:relative;overflow:hidden}.social-login-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:currentColor;opacity:0;transition:opacity .15s}.social-login-btn:hover:before{opacity:.12}.social-login-btn:hover{transform:translateY(-1px);filter:brightness(1.3)}.social-login-btn[data-platform=twitch]{color:var(--glow);border-color:var(--deep);box-shadow:0 0 6px #009a1c66}.social-login-btn[data-platform=youtube]{color:var(--magic);border-color:var(--magic);box-shadow:0 0 6px #00ff2f66}#user-display{display:none;align-items:center;gap:10px;font-family:var(--font);font-size:8px;color:var(--green)}.user-avatar{width:22px;height:22px;border-radius:50%;border:1px solid var(--green);object-fit:cover}#logout-btn{background:transparent;border:1px solid var(--dim);color:var(--dim);font-family:var(--font);font-size:7px;padding:5px 8px;cursor:pointer}#logout-btn:hover{border-color:var(--glow);color:var(--glow)}.scene-bg{position:fixed;top:-20%;right:-20%;bottom:-20%;left:-20%;z-index:-1;background-size:cover;background-position:center;background-repeat:no-repeat;image-rendering:pixelated;opacity:0;pointer-events:none}.scene-bg--cave{background-image:url(/assets/cave-bg-XOXzN37v.png);opacity:0;animation:sceneCave 60s ease-in-out infinite,panCave 90s ease-in-out infinite}.scene-bg--tavern{background-image:url(/assets/tavern-bg-DrAwrUcQ.png);opacity:0;animation:sceneTavern 60s ease-in-out infinite,panTavern 90s ease-in-out infinite}@keyframes sceneCave{0%{opacity:.25}15%{opacity:.35}35%{opacity:.3}42%{opacity:0}92%{opacity:0}to{opacity:.25}}@keyframes sceneTavern{0%{opacity:0}42%{opacity:0}50%{opacity:.25}65%{opacity:.35}85%{opacity:.3}92%{opacity:0}to{opacity:0}}@keyframes panCave{0%{transform:translate(0) scale(1.15)}25%{transform:translate(5%,-3%) scale(1.2)}50%{transform:translate(-3%,4%) scale(1.15)}75%{transform:translate(4%,2%) scale(1.2)}to{transform:translate(0) scale(1.15)}}@keyframes panTavern{0%{transform:translate(0) scale(1.2)}25%{transform:translate(-4%,3%) scale(1.15)}50%{transform:translate(5%,-2%) scale(1.2)}75%{transform:translate(-3%,-4%) scale(1.15)}to{transform:translate(0) scale(1.2)}}main{display:flex;gap:16px;padding:12px;flex:1;min-height:0;justify-content:center;align-items:center}@media (min-width: 768px){main{padding:24px 32px}}@media (min-width: 1280px){main{padding:28px 48px}}.stream-column{flex:0 1 auto;width:100%;max-width:calc(85vh * 16 / 9);min-width:0;display:flex;flex-direction:column;gap:8px}.stream-tabs{display:flex;gap:6px;border-bottom:1px solid var(--dim);padding-bottom:8px}.stream-tab-btn{font-family:var(--font);font-size:8px;padding:8px 14px;background:transparent;border:1px solid var(--dim);color:var(--dim);cursor:pointer;letter-spacing:1px;transition:all .2s}.stream-tab-btn.active,.stream-tab-btn:hover{border-color:var(--magic);color:var(--magic);box-shadow:0 0 10px #00ff2f4d}.stream-tab-btn.active{background:#00ff2f0d}.player-wrapper{position:relative;width:100%;height:calc(100vh - 120px);max-height:75vh;background:#000;border:2px solid var(--magic);box-shadow:0 0 20px #00ff2f33,inset 0 0 20px #00000080;animation:neonPulse 12s ease-in-out infinite;overflow:hidden}@keyframes neonPulse{0%,to{box-shadow:0 0 20px #00ff2f33,inset 0 0 20px #00000080}50%{box-shadow:0 0 35px #00ff2f80,inset 0 0 20px #00000080}}.stream-panel{position:absolute;top:0;right:0;bottom:0;left:0}.stream-panel iframe,.stream-panel video{width:100%;height:100%;border:none;display:block}#owncast-video{background:#000;object-fit:contain}#stream-offline{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#000c;z-index:5}.offline-icon{font-size:48px;animation:flicker 2s infinite}@keyframes flicker{0%,90%,to{opacity:1}91%,93%,95%{opacity:.2}}.offline-text{font-family:var(--font);font-size:12px;color:var(--glow);text-shadow:0 0 12px var(--glow);letter-spacing:3px}.offline-sub{font-size:10px;color:var(--dim);letter-spacing:1px}.stream-info{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--bg2);border:1px solid var(--dim);border-top:2px solid var(--magic);font-size:11px}.live-badge{font-family:var(--font);font-size:7px;padding:4px 8px;letter-spacing:2px}.live-badge--offline{background:#c00;color:#fff}.live-badge--live{background:var(--magic);color:#000;animation:livePulse 1.72s ease-in-out infinite}@keyframes livePulse{0%,to{opacity:.85}50%{opacity:1}}.stream-url{color:var(--dim);font-size:10px;word-break:break-all}.viewer-count{font-family:var(--font);font-size:8px;color:var(--dim);letter-spacing:1px}.chat-column{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg2);border:2px solid var(--deep);box-shadow:0 0 20px #009a1c26;overflow:hidden}.chat-header{padding:10px 12px;background:#009a1c1a;border-bottom:1px solid var(--deep)}.chat-title{font-family:var(--font);font-size:9px;color:var(--magic);text-shadow:0 0 8px var(--magic);letter-spacing:2px;margin-bottom:8px}.chat-tabs{display:flex;gap:4px}.chat-tab-btn{font-family:var(--font);font-size:7px;padding:5px 8px;background:transparent;border:1px solid var(--dim);color:var(--dim);cursor:pointer;letter-spacing:1px;transition:all .2s}.chat-tab-btn.active,.chat-tab-btn:hover{border-color:var(--magic);color:var(--magic);box-shadow:0 0 6px #00ff2f66}.chat-tab-btn.active{background:#00ff2f1a}.chat-body{flex:1;position:relative;overflow:hidden}.chat-feed{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:var(--deep) var(--bg)}.chat-feed::-webkit-scrollbar{width:4px}.chat-feed::-webkit-scrollbar-track{background:var(--bg)}.chat-feed::-webkit-scrollbar-thumb{background:var(--deep)}.chat-feed iframe{width:100%;height:100%;border:none;display:block;position:absolute;top:0;right:0;bottom:0;left:0}.chat-message{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;padding:5px 8px;background:#ffffff05;border-left:2px solid transparent;font-size:11px;line-height:1.5;animation:msgSlide .2s ease-out}@keyframes msgSlide{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}.chat-message:hover{background:#ffffff0d}.chat-badge{font-family:var(--font);font-size:6px;padding:2px 4px;border:1px solid;letter-spacing:1px;flex-shrink:0}.chat-time{color:var(--dim);font-size:10px;flex-shrink:0}.chat-user{font-weight:700;flex-shrink:0}.chat-sep{color:var(--dim)}.chat-text{flex:1;min-width:0;word-break:break-word;color:var(--text)}.chat-footer{border-top:1px solid var(--deep);padding:10px;background:#009a1c0d}.chat-login-prompt{font-family:var(--font);font-size:7px;color:var(--dim);text-align:center;padding:8px;letter-spacing:1px}.chat-login-prompt span{color:var(--magic)}.chat-input-row{display:flex;gap:6px}.chat-input{flex:1;background:var(--bg);border:1px solid var(--deep);color:var(--text);padding:8px;font-family:var(--font-mono);font-size:12px;outline:none;transition:border-color .2s}.chat-input:focus{border-color:var(--magic);box-shadow:0 0 6px #00ff2f4d}.chat-send-btn{font-family:var(--font);font-size:7px;padding:8px 12px;background:var(--deep);border:none;color:#fff;cursor:pointer;letter-spacing:1px;transition:all .2s}.chat-send-btn:hover{background:var(--magic);box-shadow:0 0 10px var(--magic);color:#000}#auth-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;background:#000c;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#auth-modal.active{display:flex}.modal-box{background:var(--bg2);border:2px solid var(--magic);box-shadow:0 0 40px #00ff2f4d;padding:40px;max-width:400px;width:90%;position:relative;text-align:center;animation:modalIn .2s ease-out}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-close{position:absolute;top:12px;right:12px;background:transparent;border:1px solid var(--dim);color:var(--dim);font-size:16px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.modal-close:hover{border-color:var(--glow);color:var(--glow)}.modal-icon{font-size:40px;margin-bottom:16px}.modal-title{font-family:var(--font);font-size:12px;color:var(--magic);letter-spacing:2px;margin-bottom:16px;text-shadow:0 0 12px var(--magic)}.modal-text{color:var(--text);margin-bottom:12px;line-height:1.7}.modal-sub{color:var(--dim);font-size:11px;line-height:1.8}.modal-sub code{color:var(--green);background:#00ff411a;padding:1px 4px}footer{padding:6px 16px;background:#060a06d9;border-top:1px solid var(--deep);display:flex;align-items:center;justify-content:center;gap:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex-wrap:wrap}@media (max-width: 599px){footer{flex-direction:column;gap:6px;padding:8px 12px}.footer-links{order:1}.footer-brand{order:2}}@media (min-width: 600px){footer{justify-content:center;position:relative}.footer-brand{position:absolute;right:16px}}.footer-brand{font-family:var(--font);font-size:8px;color:var(--dim);text-shadow:0 0 8px rgba(70,70,70,.5);letter-spacing:2px}.footer-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}.footer-btn{font-family:var(--font);font-size:8px;padding:6px 12px;border:1px solid var(--magic);color:var(--magic);letter-spacing:1px;background:#00ff2f0f;cursor:pointer;transition:all .2s;text-shadow:0 0 6px rgba(0,255,47,.4)}.footer-btn:hover{border-color:var(--glow);color:var(--glow);background:#00ff2f1f;box-shadow:0 0 10px var(--magic),inset 0 0 6px #00ff2f1a;text-shadow:0 0 8px var(--magic)}#screensaver-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#060a0659;opacity:0;pointer-events:none;transition:opacity .6s ease}#screensaver-overlay.active{opacity:1;pointer-events:auto;cursor:pointer}.screensaver-logo{display:flex;flex-direction:column;align-items:center;gap:24px;animation:screensaverFloat 8s ease-in-out infinite}.screensaver-wizard{width:200px;height:200px;image-rendering:pixelated;filter:drop-shadow(0 0 30px rgba(0,255,47,.6)) drop-shadow(0 0 60px rgba(0,255,47,.3))}.screensaver-title{font-family:var(--font);font-size:clamp(16px,4vw,36px);color:var(--magic);letter-spacing:8px;text-shadow:0 0 20px var(--magic),0 0 40px var(--magic),0 0 80px var(--magic);animation:glitchTitle 4s infinite}@keyframes screensaverFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}#app.screensaver-active{opacity:0;pointer-events:none;transition:opacity .4s ease}.status-indicators{display:flex;gap:12px;align-items:center}.status-dot{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:7px;color:var(--dim)}.status-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dim)}.status-dot.online{color:var(--green)}.status-dot.online:before{background:var(--green);box-shadow:0 0 6px var(--green);animation:statusPulse 8s infinite}@keyframes statusPulse{0%,to{box-shadow:0 0 4px var(--green)}50%{box-shadow:0 0 12px var(--green)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--deep);border-radius:3px}*{scrollbar-width:thin;scrollbar-color:var(--deep) var(--bg)}.neon-border-cyan{border:1px solid var(--magic);box-shadow:0 0 8px #00ff2f4d}.neon-border-pink{border:1px solid var(--glow);box-shadow:0 0 8px #7fff5e4d}.section-label{font-family:var(--font);font-size:8px;letter-spacing:2px;padding:4px 8px;display:inline-block;margin-bottom:8px}.offline-sprite{width:128px;height:128px;image-rendering:auto;filter:drop-shadow(0 0 12px rgba(0,255,47,.4));animation:offlineBob 3s ease-in-out infinite}.offline-sprite-sheet{background-repeat:no-repeat;background-size:128px auto;background-position:0 0}@keyframes offlineBob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}#owncast-video::-webkit-media-controls-fullscreen-button{display:none!important}#owncast-video::-webkit-media-controls-picture-in-picture-button{display:none!important}.exit-fullscreen-btn{display:none;position:absolute;top:12px;right:12px;z-index:20;font-family:var(--font);font-size:8px;padding:8px 14px;background:#000000b3;border:1px solid var(--magic);color:var(--magic);letter-spacing:2px;cursor:pointer;transition:all .2s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.exit-fullscreen-btn:hover{background:#00ff2f26;box-shadow:0 0 10px var(--magic)}:fullscreen .exit-fullscreen-btn{display:block}:-webkit-full-screen .exit-fullscreen-btn{display:block}:fullscreen .player-wrapper{height:100vh;max-height:100vh;border:none;box-shadow:none;animation:none}:-webkit-full-screen .player-wrapper{height:100vh;max-height:100vh;border:none;box-shadow:none;animation:none}@media (max-width: 900px){main{flex-direction:column;padding:10px}.stream-column{flex:none;width:100%;max-width:none}.player-wrapper{height:60vh;max-height:60vh}.chat-column{height:450px}}@media (max-width: 600px){header{padding:6px 10px;justify-content:center}#site-title{font-size:11px;letter-spacing:2px}.header-tagline{display:none}.social-login-btn{font-size:6px;padding:6px 7px}.stream-tabs{overflow-x:auto;padding-bottom:4px}.stream-tab-btn{white-space:nowrap}.player-wrapper{height:50vh;max-height:50vh}footer{flex-direction:column;align-items:flex-start}}::selection{background:var(--deep);color:#fff}#visualizer-canvas{position:fixed;bottom:0;left:0;width:100%;height:30vh;pointer-events:none;z-index:60;opacity:.7}:fullscreen #visualizer-canvas{display:none}:-webkit-full-screen #visualizer-canvas{display:none}:fullscreen #app.screensaver-active~#visualizer-canvas{display:block;bottom:16px;left:16px;width:calc(100% - 32px)}:-webkit-full-screen #app.screensaver-active~#visualizer-canvas{display:block;bottom:16px;left:16px;width:calc(100% - 32px)}