*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;font-family:Arial,sans-serif;background:#111;color:#eee;display:flex;flex-direction:column;height:calc(100vh - 35px)}#main-content{flex:1 1 auto;display:flex;flex-direction:row;overflow:hidden;padding:10px;max-width:1200px;margin:0 auto;gap:10px}#video-container{flex:0 0 80%;max-width:100%;overflow:hidden;position:relative;margin-top:50px}#channel-name{font-size:2rem;font-weight:700;margin-bottom:10px;text-align:center;background:linear-gradient(90deg,#00bfff,#00ff9d,#00bfff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 10px rgba(0,191,255,.3);letter-spacing:.5px}#channel-name.loading{background:linear-gradient(90deg,#00bfff,#00ff9d,#00bfff,#00ff9d,#00bfff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 2s linear infinite}@keyframes shimmer{to{background-position:200% center}}#videoWrapper{width:100%;height:max-content;aspect-ratio:16 / 9;background:#000;border-radius:8px;overflow:hidden;position:relative}#videoWrapper iframe,#videoWrapper video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:#000;display:block}#channel-name,.channel span,footer,#qualitySelector,#unmuteBtn{transition:all .3s cubic-bezier(.4,0,.2,1)}.custom-time-display{position:absolute;bottom:50px;right:10px;background:#000000b3;color:#fff;padding:5px 10px;border-radius:4px;font-size:14px;z-index:1000;display:none}video:focus+.custom-time-display,.video-wrapper:hover .custom-time-display{display:block}#videoWrapper{position:relative}.shaka-video::-webkit-media-controls-timeline,.shaka-video::-webkit-media-controls-current-time-display,.shaka-video::-webkit-media-controls-time-remaining-display{display:none!important}.shaka-video::-moz-range-track{display:none}#custom-time-display{font-family:Arial,sans-serif;text-shadow:1px 1px 2px rgba(0,0,0,.8)}#live-stream-controls{opacity:0;transition:opacity .3s ease}Fullscreen styles #videoWrapper:fullscreen{width:100vw;height:100vh;background:#000}#videoWrapper:fullscreen video{width:100%;height:100%;object-fit:contain}#custom-controls{position:absolute;bottom:20px;right:20px;display:flex;align-items:center;gap:10px;z-index:1000;pointer-events:none;transition:all .3s ease;opacity:20}video:focus{outline:2px solid #fff;outline-offset:2px}#qualitySelector{position:absolute;right:12px;top:12px;z-index:8;background:#0009;color:#fff;border:1px solid #666;border-radius:6px;padding:4px;font-size:.9rem;display:none!important}#channel-list{flex:0 0 20%;max-width:20%;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;background:#222;border-radius:8px;overflow-y:auto;max-height:calc(90vh - 20px);margin-top:2%}#channel-list::-webkit-scrollbar{width:8px}#channel-list::-webkit-scrollbar-track{background:#111;border-radius:4px}#channel-list::-webkit-scrollbar-thumb{background:#00bfff;border-radius:4px}#channel-list{scrollbar-width:thin;scrollbar-color:#00bfff #111}.channel{width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;border:2px solid transparent;background:#333;transition:transform .2s ease,border-color .2s ease,background .2s ease}.channel img{width:90%;height:90%;object-fit:contain;border-radius:6px;filter:brightness(.85);transition:filter .3s ease}.channel span{display:block;font-size:11px;margin-top:2px;color:#ddd;text-align:center}.channel:hover img{filter:brightness(1)}.channel.active{border-color:#00bfff;transform:scale(1.06);background:#005f9e}.channel.active img{filter:brightness(1)}.channel.active span{color:#00ff9d;font-weight:700;text-shadow:0 0 10px rgba(0,255,157,.5)}.channel span{display:block;font-size:11px;margin-top:2px;color:#b0b0b0;text-align:center;transition:color .3s ease,text-shadow .3s ease}.channel:hover span{color:#00bfff}footer{flex-shrink:0;background:#111;color:#666;font-size:.85rem;text-align:center;padding:12px 15px;border-top:1px solid #222;-webkit-user-select:none;user-select:none}@media (max-width: 900px){#main-content{flex-direction:column}#video-container{flex:0 0 auto;width:100%;max-width:100%;margin-bottom:6px;margin-block-start:0%}#videoWrapper{width:100%;max-width:100%;aspect-ratio:16 / 9}#channel-list{flex:0 0 auto;width:75%;max-width:75%;margin:0 auto;justify-items:center;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;overflow-x:hidden;overflow-y:auto;max-height:335px;scroll-snap-type:none}#channel-list .channel{width:100%;aspect-ratio:1;max-height:none;transition:opacity .3s ease,transform .3s ease}#channel-list .channel img{width:80%;height:80%}#channel-list.has-active .channel{opacity:.35}#channel-list .channel.active{opacity:1;transform:scale(1.05);z-index:2}.channel span{font-size:10px;margin-top:4px}#channel-name{font-size:1.5rem}}.btn{display:flex;justify-content:center;align-items:center;width:100%;max-width:fit-content;height:fit-content;margin:20px auto;overflow:hidden;cursor:pointer;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);border-radius:5rem;transition:.5s;animation:gradient_301 5s ease infinite;border:double 4px transparent;background-image:linear-gradient(#212121,#212121),linear-gradient(137.48deg,#ffdb3b 10%,#fe53bb 45%,#8f51ea 67%,#04f 87%);background-origin:border-box;background-clip:content-box,border-box}.btn #container-stars{position:absolute;z-index:-1;width:100%;height:100%;overflow:hidden;transition:.5s;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);border-radius:5rem}.btn strong{z-index:2;font-size:12px;letter-spacing:3px;color:#fff;text-shadow:0 0 4px white}.btn #glow{position:absolute;display:flex;width:12rem}.btn .circle{width:100%;height:30px;filter:blur(2rem);animation:pulse_3011 4s infinite;z-index:-1}.btn .circle:nth-of-type(1){background:#fe53baa2}.btn .circle:nth-of-type(2){background:#8e51eab4}.btn:hover #container-stars{z-index:1;background-color:#212121}.btn:hover{transform:scale(1.05)}.btn:active{border:double 4px #fe53bb;animation:none}.btn:active .circle{background:#fe53bb}.btn #stars{position:relative;width:200rem;height:200rem}.btn #stars:after,.btn #stars:before{content:"";position:absolute;background-image:radial-gradient(#ffffff 1px,transparent 1%);background-size:50px 50px}.btn #stars:after{top:-10rem;left:-100rem;width:100%;height:100%;animation:animStarRotate 90s linear infinite}.btn #stars:before{top:0;left:-50%;width:170%;height:500%;animation:animStar 60s linear infinite;opacity:.5}@keyframes animStar{0%{transform:translateY(0)}to{transform:translateY(-135rem)}}@keyframes animStarRotate{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes gradient_301{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes pulse_3011{0%{transform:scale(.75);box-shadow:0 0 #000000b3}70%{transform:scale(1);box-shadow:0 0 0 10px #0000}to{transform:scale(.75);box-shadow:0 0 #0000}}#overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;z-index:9999;justify-content:center;align-items:center}#overlay.show{display:flex}#overlayContent{display:flex;flex-direction:column;align-items:center;gap:30px;padding:40px;max-width:600px;text-align:center}#overlayText{font-size:1.5rem;color:#fff;line-height:1.6}.spinner{width:50px;height:50px;border:5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.overlay-reconnect-btn{display:none;padding:15px 40px;font-size:1.2rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid rgba(255,255,255,.3);border-radius:50px;cursor:pointer;box-shadow:0 10px 30px #667eea66;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;z-index:10000}.overlay-reconnect-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 15px 40px #667eea99;background:linear-gradient(135deg,#764ba2,#667eea);border-color:#ffffff80}.overlay-reconnect-btn:active{transform:translateY(-1px) scale(1.02)}body.locked{pointer-events:none;-webkit-user-select:none;user-select:none;overflow:hidden}body.locked #overlay{pointer-events:auto}@media (max-width: 768px){#overlayContent{padding:20px}#overlayText{font-size:1.2rem}.overlay-reconnect-btn{padding:12px 30px;font-size:1rem;width:90%;max-width:300px}}