:root{--bg-deep: #06030f;--bg-mid: #0d0520;--bg-panel: rgba(15, 5, 30, .85);--accent-purple: #8020a0;--accent-purple-light: #cc44ff;--accent-red: #cc2222;--accent-red-bright: #ff3333;--accent-orange: #ff6600;--accent-gold: #ffcc44;--text-primary: #e8d5ff;--text-secondary: #9977bb;--text-muted: #4a3a6a;--hp-normal: #cc1111;--hp-mid: #cc6600;--hp-low: #ff2200;--hp-track: #1a0510;--border-glow: rgba(128, 32, 160, .5);--feed-width: 320px;--hp-height: 72px;--ranking-height: 52px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-deep);font-family:Rajdhani,Segoe UI,sans-serif;color:var(--text-primary);-webkit-user-select:none;user-select:none}#bg-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}#hp-bar-container{position:fixed;top:0;left:0;right:0;height:var(--hp-height);z-index:100;background:linear-gradient(180deg,#06030ffa,#0a0314f2);border-bottom:2px solid var(--border-glow);box-shadow:0 4px 30px #8020a04d,inset 0 -1px #8020a033;padding:8px 16px;display:flex;flex-direction:column;justify-content:center;gap:4px}#hp-bar-track{position:relative;height:24px;background:var(--hp-track);border-radius:3px;overflow:hidden;border:1px solid rgba(100,20,120,.6);box-shadow:inset 0 0 12px #000c,0 0 8px #c8141433}#hp-bar-fill{position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,#8b0000,#c11 40%,#d22,#c11,#8b0000);transition:width .12s ease-out,background .4s ease;border-radius:3px;box-shadow:inset 0 1px #ff64644d,0 0 15px #c8000080}#hp-bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,180,180,.15) 0%,transparent 100%);border-radius:3px 3px 0 0}#hp-bar-fill.hp-mid{background:linear-gradient(90deg,#7a3000,#c60,#d70,#c60,#7a3000);animation:pulse-orange 2s ease-in-out infinite}#hp-bar-fill.hp-low{background:linear-gradient(90deg,#800,#f20,#f40,#f20,#800);animation:pulse-red .8s ease-in-out infinite}#hp-bar-damage-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;border-radius:3px;pointer-events:none}#hp-bar-damage-flash.flash{animation:damage-flash-anim .12s ease-out forwards}#hp-bar-info{display:flex;align-items:center;gap:12px;padding:0 2px}#boss-name-display{font-family:Cinzel,serif;font-weight:700;font-size:13px;color:var(--text-primary);letter-spacing:2px;text-shadow:0 0 10px rgba(200,100,255,.6);flex:1}#hp-text-display{font-family:Rajdhani,sans-serif;font-weight:600;font-size:14px;color:#f99;letter-spacing:1px;font-variant-numeric:tabular-nums}#hp-pct-display{font-family:Rajdhani,sans-serif;font-weight:700;font-size:13px;color:var(--text-secondary);min-width:42px;text-align:right}#ws-status{position:absolute;top:8px;right:12px;font-size:10px;transition:color .3s}.ws-connecting{color:#888;animation:blink 1s infinite}.ws-connected{color:#4f8}.ws-disconnected{color:#f44;animation:blink .5s infinite}#arena{position:fixed;top:var(--hp-height);left:0;right:0;bottom:var(--ranking-height);z-index:1;display:flex}#boss-section{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}#boss-wrapper{position:relative;display:flex;align-items:center;justify-content:center;animation:boss-float 4s ease-in-out infinite}#boss-aura-outer{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(128,0,180,.12) 0%,transparent 70%);animation:aura-pulse 3s ease-in-out infinite;pointer-events:none}#boss-aura-inner{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(180,0,80,.15) 0%,transparent 65%);animation:aura-pulse 2s ease-in-out infinite reverse;pointer-events:none}#boss-visual{position:relative;z-index:2;animation:boss-breathe 4s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(128,0,180,.4)) drop-shadow(0 0 40px rgba(100,0,50,.3));transition:filter .1s}#boss-visual.hit{filter:drop-shadow(0 0 30px rgba(255,255,255,.8)) drop-shadow(0 0 60px rgba(255,50,50,.9)) brightness(1.5)}#boss-visual.crit-hit{filter:drop-shadow(0 0 50px rgba(255,50,0,1)) drop-shadow(0 0 100px rgba(255,0,0,.8)) brightness(2);transform:scale(.95)}#boss-svg{width:280px;height:300px}.boss-eye-glow{animation:eye-pulse 2s ease-in-out infinite}.boss-pupil{animation:pupil-slit 3s ease-in-out infinite}#boss-hit-flash{position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,100,100,.5) 40%,transparent 70%);opacity:0;pointer-events:none;z-index:10}#boss-hit-flash.flash{animation:hit-flash-anim 80ms ease-out forwards}#boss-hit-flash.crit-flash{animation:crit-flash-anim .2s ease-out forwards}#damage-numbers-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:20;overflow:visible}#phase-indicator{position:absolute;bottom:20px;font-family:Cinzel,serif;font-size:11px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase}.damage-number{position:absolute;font-family:Rajdhani,sans-serif;font-weight:700;pointer-events:none;white-space:nowrap;transform-origin:center bottom;will-change:transform,opacity}.damage-number.normal{font-size:22px;color:#ffe8aa;text-shadow:0 0 8px rgba(255,220,100,.8),0 2px 4px rgba(0,0,0,.8)}.damage-number.crit{font-size:32px;color:#f42;text-shadow:0 0 12px rgba(255,80,20,1),0 0 25px rgba(255,0,0,.7),0 2px 4px rgba(0,0,0,.9);animation:crit-shake .15s ease-in-out 2}.damage-number.combo{font-size:26px;color:#c4f;text-shadow:0 0 12px rgba(200,80,255,1),0 0 25px rgba(150,0,255,.7)}#damage-feed{width:var(--feed-width);height:100%;background:linear-gradient(180deg,#0a0319eb,#080212e0);border-left:1px solid var(--border-glow);display:flex;flex-direction:column;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);flex-shrink:0}#feed-header{padding:10px 14px;font-family:Cinzel,serif;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--text-secondary);border-bottom:1px solid rgba(100,20,120,.3);display:flex;align-items:center;gap:8px;background:#14052880}.feed-icon{color:var(--accent-purple-light)}#feed-count{margin-left:auto;font-family:Rajdhani,sans-serif;font-size:11px;color:var(--text-muted);font-weight:400;letter-spacing:0}#feed-list{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column-reverse;padding:4px 0;scrollbar-width:thin;scrollbar-color:rgba(128,32,160,.3) transparent}#feed-list::-webkit-scrollbar{width:3px}#feed-list::-webkit-scrollbar-thumb{background:#8020a066;border-radius:2px}.feed-item{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid rgba(50,10,70,.3);animation:feed-slide-in .25s ease-out forwards;background:transparent;transition:background .2s;position:relative}.feed-item:first-child{background:#8020a014;border-left:2px solid var(--accent-purple)}.feed-item.is-crit{background:#b414141a;border-left:2px solid var(--accent-red-bright)}.feed-item.is-crit .feed-damage{color:#f53;text-shadow:0 0 6px rgba(255,50,20,.6)}.feed-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(128,32,160,.2) 0%,transparent 50%);opacity:0;animation:feed-glow-anim .6s ease-out forwards;pointer-events:none}.feed-avatar{width:28px;height:28px;border-radius:50%;border:1px solid rgba(128,32,160,.4);object-fit:cover;flex-shrink:0;background:var(--bg-mid)}.feed-avatar-placeholder{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#2d0a4e,#1a0530);border:1px solid rgba(128,32,160,.4);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;color:var(--accent-purple-light)}.feed-info{flex:1;min-width:0}.feed-username{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.feed-meta{font-size:11px;color:var(--text-muted);line-height:1.2}.feed-damage{font-family:Rajdhani,sans-serif;font-weight:700;font-size:16px;color:var(--accent-gold);flex-shrink:0;letter-spacing:.5px}.feed-crit-badge{background:var(--accent-red);color:#fff;font-size:9px;font-weight:700;padding:1px 4px;border-radius:2px;letter-spacing:1px;flex-shrink:0}#ranking-bar{position:fixed;bottom:0;left:0;right:0;height:var(--ranking-height);z-index:100;background:linear-gradient(0deg,#06030ffa,#0a0314f2);border-top:1px solid var(--border-glow);display:flex;align-items:center;padding:0 16px;gap:16px;overflow:hidden}#ranking-title{font-family:Cinzel,serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--text-muted);white-space:nowrap;flex-shrink:0}#ranking-list{display:flex;gap:8px;overflow:hidden;flex:1}.ranking-item{display:flex;align-items:center;gap:6px;background:#14052899;border:1px solid rgba(100,20,120,.3);border-radius:4px;padding:4px 10px;flex-shrink:0;white-space:nowrap}.ranking-medal{font-size:14px}.ranking-username{font-size:13px;font-weight:600;color:var(--text-primary)}.ranking-damage{font-family:Rajdhani,sans-serif;font-size:13px;font-weight:700;color:var(--accent-gold)}#login-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center}.overlay-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#06030fd9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#login-card{position:relative;z-index:1;background:linear-gradient(135deg,#140528f2,#0a0314fa);border:1px solid rgba(128,32,160,.5);border-radius:8px;padding:48px 56px;text-align:center;box-shadow:0 0 60px #8020a04d,0 0 120px #64003233;max-width:420px;width:90%}#login-logo{margin-bottom:20px;filter:drop-shadow(0 0 20px rgba(128,32,160,.8))}#login-title{font-family:Cinzel Decorative,Cinzel,serif;font-size:36px;font-weight:700;letter-spacing:6px;color:var(--text-primary);text-shadow:0 0 20px rgba(200,100,255,.5);margin-bottom:12px;line-height:1.1}#login-subtitle{font-size:15px;color:var(--text-secondary);margin-bottom:32px;line-height:1.8}#github-login-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#2d0a4e,#4a1070);color:var(--text-primary);border:1px solid rgba(128,32,160,.6);border-radius:6px;padding:14px 28px;font-family:Rajdhani,sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;text-decoration:none;cursor:pointer;transition:all .2s;box-shadow:0 0 20px #8020a04d;margin-bottom:16px}#github-login-btn:hover{background:linear-gradient(135deg,#3d1464,#6a2090);box-shadow:0 0 30px #8020a080;border-color:#b450dccc;transform:translateY(-1px)}#login-watching{font-size:13px;color:var(--text-muted)}#watch-btn{background:none;border:none;color:var(--accent-purple-light);cursor:pointer;font-size:13px;font-family:Rajdhani,sans-serif;padding:0;text-decoration:underline;text-underline-offset:2px}#watch-btn:hover{color:var(--text-primary)}#defeated-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:center;justify-content:center;background:#0000;transition:background 1s ease}#defeated-overlay:not(.hidden){background:#000000d9}#defeated-overlay.hidden{display:none}#defeated-content{text-align:center;animation:defeated-appear 1s ease-out forwards}#defeated-explosion{width:200px;height:200px;margin:0 auto 20px;border-radius:50%;background:radial-gradient(circle,white 0%,#ff4400 30%,#aa0000 60%,transparent 80%);animation:explosion-anim 1.5s ease-out forwards}#defeated-title{font-family:Cinzel Decorative,serif;font-size:56px;font-weight:700;letter-spacing:8px;color:var(--accent-gold);text-shadow:0 0 30px rgba(255,200,50,.8),0 0 60px rgba(255,150,0,.5);margin-bottom:12px;animation:text-glow-pulse 1s ease-in-out infinite}#defeated-subtitle{font-size:18px;color:var(--text-secondary);margin-bottom:32px;letter-spacing:2px}#defeated-ranking{display:flex;flex-direction:column;gap:8px;margin-bottom:32px}#new-boss-btn{font-family:Cinzel,serif;font-size:14px;letter-spacing:3px;padding:12px 32px;background:transparent;border:1px solid var(--accent-gold);color:var(--accent-gold);cursor:pointer;border-radius:4px;transition:all .3s}#new-boss-btn:hover{background:#ffc8321a;box-shadow:0 0 20px #ffc8324d}#demo-controls{position:fixed;bottom:calc(var(--ranking-height) + 12px);left:12px;z-index:90;display:flex;gap:8px}#demo-controls.hidden{display:none}#demo-controls button{font-family:Rajdhani,sans-serif;font-size:13px;font-weight:600;padding:6px 14px;background:#140528cc;border:1px solid rgba(128,32,160,.5);color:var(--text-secondary);border-radius:4px;cursor:pointer;transition:all .2s;letter-spacing:.5px}#demo-controls button:hover{background:#280a46e6;color:var(--text-primary);border-color:var(--accent-purple-light)}#demo-controls button:active{transform:scale(.97)}@keyframes boss-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes boss-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes aura-pulse{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes eye-pulse{0%,to{opacity:.3}50%{opacity:.7}}@keyframes pupil-slit{0%,80%,to{ry:5}40%{ry:7}}@keyframes hit-flash-anim{0%{opacity:.9}to{opacity:0}}@keyframes crit-flash-anim{0%{opacity:1;transform:scale(1.3)}50%{opacity:.8;transform:scale(1.1)}to{opacity:0;transform:scale(1)}}@keyframes damage-flash-anim{0%{opacity:.7}to{opacity:0}}@keyframes pulse-orange{0%,to{box-shadow:0 0 15px #c8640080}50%{box-shadow:0 0 25px #ff9600cc}}@keyframes pulse-red{0%,to{box-shadow:0 0 15px #ff1e0080}50%{box-shadow:0 0 35px #ff5000e6}}@keyframes feed-slide-in{0%{transform:translate(40px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes feed-glow-anim{0%{opacity:1}to{opacity:0}}@keyframes crit-shake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-1deg)}75%{transform:translate(2px,-1px) rotate(1deg)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}@keyframes explosion-anim{0%{transform:scale(0);opacity:1}50%{transform:scale(1.5);opacity:.8}to{transform:scale(3);opacity:0}}@keyframes defeated-appear{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes text-glow-pulse{0%,to{text-shadow:0 0 30px rgba(255,200,50,.8),0 0 60px rgba(255,150,0,.5)}50%{text-shadow:0 0 50px rgba(255,220,80,1),0 0 100px rgba(255,180,0,.8)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media (max-width: 768px){:root{--feed-width: 200px}#boss-svg{width:200px;height:210px}#login-card{padding:32px 24px}#login-title{font-size:26px}}@media (max-width: 480px){#damage-feed{display:none}}.hidden{display:none!important}.shake{animation:hp-shake .1s ease-in-out!important}@keyframes hp-shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}