@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Bebas+Neue&family=Press+Start+2P&display=swap");:root{--bg-color:#fff;--text-color:#333;--accent-color:#f9c;--card-bg:#f5f5f5;--header-bg:#f0f0f0;--footer-bg:var(--bg-color);--preview-width:100%}body{background-color:var(--bg-color);background-image:url(images/paper-texture.png);background-repeat:repeat;background-size:cover;color:var(--text-color);display:flex;flex-direction:column;font-family:Inter,Arial,sans-serif;margin:0;min-height:100vh}*,:after,:before{box-sizing:border-box}.page-wrapper{flex:1}.container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:768px;padding-left:1rem;padding-right:1rem;width:100%}body.dark{--bg-color:#1a0033;--card-bg:#1e1e1e;--text-color:#f0f0f0;--header-bg:#1a0033;--footer-bg:var(--bg-color)}.header{align-items:center;background-color:var(--header-bg);border-bottom:4px solid var(--accent-color);display:flex;height:3rem;justify-content:space-between;padding:0 1rem;position:sticky;top:0;transition:box-shadow .3s;z-index:1000}.header.scrolled{box-shadow:0 2px 4px rgba(0,0,0,.2)}.header .logo{align-items:center;color:var(--text-color);display:flex;font-size:1.25rem;font-weight:700;gap:.5rem;height:100%;text-decoration:none}.header .logo img{height:100%;height:1.5rem}.nav-links{display:flex;gap:1rem}.nav-links a{border-radius:4px;color:var(--text-color);padding:.25rem .5rem;text-decoration:none}.nav-links a.active{background-color:rgba(122,50,255,.1);color:var(--accent-color);font-weight:700}.nav-links a:hover{background-color:rgba(0,0,0,.05);color:var(--accent-color)}.menu-toggle,.theme-toggle{background:none;border:none;border-radius:4px;color:var(--text-color);cursor:pointer;padding:.5rem}.menu-toggle:hover,.theme-toggle:hover{background-color:rgba(0,0,0,.05)}.theme-toggle i,.theme-toggle svg{height:20px;width:20px;fill:currentColor;font-size:20px}.menu-toggle{display:none;flex-direction:column;gap:4px}.menu-toggle span{background-color:currentColor;display:block;height:2px;width:20px}@media (max-width:768px){.header{padding-left:0;padding-right:0}.nav-links{background-color:var(--header-bg);display:flex;flex-direction:column;height:100vh;padding:1rem;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .3s ease;width:240px;z-index:1000}.nav-links.open{transform:translateX(0)}.menu-toggle{display:flex}.theme-toggle{margin-left:auto;margin-right:.25rem}.social-footer{justify-content:center;margin-left:0}}.about-section,.content,.features-section{padding:2rem 1rem}.hero{background:linear-gradient(180deg,#1a0033,#29004d);overflow:hidden;padding:4rem 0;position:relative;text-align:center}.hero-title{color:var(--accent-color);font-family:Bebas Neue,cursive;font-size:4rem;margin:0;text-shadow:2px 2px 2px rgba(0,0,0,.5)}.glitch{display:inline-block;margin-left:auto;margin-right:auto;position:relative}.glitch:after,.glitch:before{content:attr(data-text);left:0;position:absolute;top:0}.glitch:before{animation:glitchTop 1s linear infinite alternate-reverse;clip-path:polygon(0 0,100% 0,100% 45%,0 45%);text-shadow:-2px 0 hotpink}.glitch:after{animation:glitchBottom 1s linear infinite alternate-reverse;clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);text-shadow:-2px 0 lime}@keyframes glitchTop{0%{transform:translate(0)}20%{transform:translate(-2px,-2px)}40%{transform:translate(-2px,2px)}60%{transform:translate(2px,-2px)}80%{transform:translate(2px,2px)}to{transform:translate(0)}}@keyframes glitchBottom{0%{transform:translate(0)}20%{transform:translate(2px,2px)}40%{transform:translate(2px,-2px)}60%{transform:translate(-2px,2px)}80%{transform:translate(-2px,-2px)}to{transform:translate(0)}}.hero-subtitle{color:var(--text-color);font-family:Press Start\ 2P,cursive;font-size:1rem;margin-bottom:2rem;margin-top:.5rem}.hero-image{bottom:0;position:absolute;right:10%;width:200px}.container>h2,.container>h3,.content h2{font-family:Bebas Neue,cursive;font-size:2.25rem;letter-spacing:1px;margin-bottom:1.5rem;margin-top:0;text-align:left}.container>h3{font-family:Press Start\ 2P,cursive;font-size:1.5rem}.footer{background-color:transparent;color:var(--text-color);font-size:.875rem;margin-top:.75rem;padding:1.25rem 1rem}.footer .container{align-items:center;display:flex;gap:.75rem;justify-content:space-between}.social-links{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:2rem auto;max-width:720px}.social-links a{align-items:center;border-radius:8px;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:1rem;position:relative;text-decoration:none}.social-links a span{left:50%;opacity:0;pointer-events:none;position:absolute;top:calc(100% + .25rem);transform:translate(-50%,.25rem);transition:opacity .2s,transform .2s;white-space:nowrap}.social-links a i{font-size:2rem;transition:transform .2s}.social-links a img,.social-links a svg{height:2rem;transition:transform .2s;width:2rem}.social-links a svg{fill:currentColor}.social-links a:hover i,.social-links a:hover img,.social-links a:hover svg{transform:translateY(-.25rem)}.social-links a:hover span{opacity:1;transform:translate(-50%)}.social-links .twitch{background-color:#9146ff}.social-links .youtube{background-color:red}.social-links .telegram{background-color:#2aabee}.social-links .discord{background-color:#5865f2}.social-links .boosty{background-color:#ff7220}.feature-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:1rem}.feature-card{background-color:var(--card-bg);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);color:var(--text-color);display:flex;flex-direction:column;padding:1rem;text-decoration:none;transition:box-shadow .3s,transform .3s}.feature-card:hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-4px)}.feature-card .icon{align-items:center;border-radius:.5rem;color:#222;display:flex;height:2.25rem;justify-content:center;margin-bottom:.5rem;width:2.25rem}.feature-card i{color:#222}.feature-title{font-family:Bebas Neue,cursive;font-weight:600;margin-bottom:.25rem}.icon-yellow{background-color:#fef3c7}.icon-red{background-color:#fee2e2}.icon-green{background-color:#d1fae5}.icon-stone{background-color:#e7e5e4}.icon-purple{background-color:#ede9fe}.icon-neutral{background-color:#f5f5f5}.social-footer{display:flex;gap:1rem;justify-content:flex-end;margin-bottom:.5rem;margin-left:auto}.social-footer a{color:var(--text-color);font-size:1.5rem;text-decoration:none;transition:transform .2s}.social-footer a svg{height:1.5rem;width:1.5rem;fill:currentColor}.social-footer a:hover{color:var(--accent-color);transform:scale(1.2)}.footer p{margin:0}.extensions-grid{display:grid;gap:6rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));justify-content:center;margin-top:1rem}.extension-card{align-items:flex-start;background-color:var(--card-bg);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);color:var(--text-color);display:flex;flex-direction:column;justify-content:flex-start;min-height:200px;padding:.75rem;text-decoration:none;transition:background-color .3s,transform .3s;width:100%}.extension-logo{align-items:center;border-radius:.5rem;display:flex;height:2.25rem;justify-content:center;margin-bottom:.5rem;width:2.25rem}.extension-logo svg{height:auto;width:70%}.logo-7tv{background-color:#3b82f6}.logo-bttv{background-color:#ef4444}.logo-ffz{background-color:#b45309}.extension-card:hover{background-color:rgba(122,50,255,.1);transform:translateY(-4px)}.extension-card span{font-weight:600;margin-bottom:.25rem}.extension-card p{font-size:.875rem;margin:.5rem 0;text-align:left}.browser-buttons{display:flex;flex-direction:column;gap:.5rem;margin-top:auto;width:100%}.browser-buttons a{align-items:center;background-color:var(--accent-color);border-radius:4px;color:#fff;display:flex;font-size:.75rem;gap:.25rem;justify-content:center;padding:.5rem;text-decoration:none;width:100%}.browser-buttons a svg{height:1rem;width:1rem}.browser-buttons a:hover{background-color:#532684}.browser-buttons button{background-color:var(--accent-color);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.75rem;padding:.25rem .75rem}.browser-buttons button:hover{background-color:#532684}.rules-nav{display:flex;gap:.5rem;margin-bottom:1rem}.rules-btn{align-items:center;background-color:var(--accent-color);border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;gap:.25rem;padding:.5rem 1rem}.rules-btn.active{background-color:#532684}.rules-content{display:none}.rules-content.active{display:block}#track-list{list-style:none;margin:0;padding:0}.track-item{align-items:flex-start;background-color:var(--card-bg);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;gap:.75rem;margin-bottom:.5rem;padding:.5rem;transition:background-color .3s,transform .3s}.track-item:hover{background-color:rgba(122,50,255,.1);transform:translateY(-2px)}.track-num{font-weight:700;margin-right:.5rem}.track-item img{aspect-ratio:16/9;border-radius:4px;height:161px;object-fit:cover;width:287px}.preview-sm{--preview-width:120px}.track-info{display:flex;flex-direction:column}.track-info .title{font-size:1.25rem;font-weight:600}.track-info .time{color:#555;font-size:.875rem}.music-desc{line-height:1.4;margin-bottom:1rem}.overlay-body{background:transparent;margin:0;overflow:hidden}.overlay-track{color:#fff;font-size:1.25rem}.admin-layout{align-items:flex-start;display:flex;flex-wrap:wrap;gap:1rem}.player-side{display:flex;flex:1 1 320px;flex-direction:column;gap:.5rem;max-width:320px}#admin-track-list{flex:1;list-style:none;margin:0;max-height:50vh;overflow-y:auto;padding:0}#admin-track-list li{background-color:var(--card-bg);border-radius:4px;cursor:pointer;margin-bottom:.25rem;padding:.5rem;transition:background-color .3s}#admin-track-list li:hover{background-color:rgba(122,50,255,.1)}@media (max-width:768px){.admin-layout{flex-direction:column}.player-side{max-width:none;width:100%}}.header,body,html{box-sizing:border-box;width:100%}.header{max-width:100%}.header .logo img{height:auto;max-height:1.5rem;max-width:100%;width:auto}.social-links{box-sizing:border-box;padding-left:1rem;padding-right:1rem;width:100%}.social-links a{box-sizing:border-box;min-width:0}.news-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));justify-content:center;margin-top:1rem}.news-item{align-items:flex-start;background-color:var(--card-bg);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:flex-start;min-height:200px;padding:.75rem;width:100%}.news-item h3{margin-top:0}.news-item .date{color:#555;font-size:.875rem;margin:.25rem 0 .5rem}.news-item img{height:auto;margin-bottom:.5rem;max-width:100%}.login-button{background-color:var(--accent-color);border-radius:4px;color:#fff;display:inline-block;font-weight:700;padding:.75rem 1.5rem;text-decoration:none}.login-button:hover{background-color:#532684}.copy-button{position:relative}.copy-button .copied{left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s}.copy-button.copied .default{opacity:0}.copy-button.copied .copied{opacity:1}.warning-icon{margin:1rem 0;text-align:center}.news-editor{background-color:var(--card-bg);border-radius:8px;display:flex;flex-direction:column;gap:.5rem;padding:1rem;position:relative}.news-editor input[type=text],.news-editor textarea{border:1px solid #ccc;border-radius:4px;font:inherit;padding:.5rem;width:100%}.news-editor textarea{min-height:150px;resize:vertical}.file-attach{bottom:1rem;color:#4caf50;cursor:pointer;font-size:1.25rem;position:absolute;right:1rem}.file-attach input[type=file]{display:none}.file-attach.red{color:#e53935}.file-attach.green{color:#4caf50}.news-editor .login-button{align-self:flex-start;margin-top:.5rem}.status-indicator{align-items:center;display:flex;font-weight:600;gap:.5rem;margin-bottom:1rem}.status-indicator .dot{border-radius:50%;height:.75rem;width:.75rem}.status-indicator.red .dot{background:#e53935}.status-indicator.green .dot{background:#4caf50}.status-indicator.gray .dot{background:#9e9e9e}@media (max-width:480px){.track-item{display:grid;grid-template-areas:"img img" "num info";grid-template-columns:auto 1fr}.track-item img{grid-area:img;height:auto;width:100%}.track-num{grid-area:num}.track-info{align-items:flex-start;grid-area:info;margin-top:0;text-align:left}}@media (min-width:1024px){.container{max-width:1200px}}.code-overlay-body{background:transparent;height:1080px;margin:0;overflow:hidden;position:relative;width:1920px}.code-figure{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;color:#fff;display:flex;font-size:2rem;font-weight:700;height:200px;justify-content:center;position:absolute;text-shadow:0 0 5px #000;width:200px}.rules-intro{background-color:#1a1a1a;border-radius:8px;color:#ccc;margin-bottom:24px;padding:16px}body:not(.index-page) ul{list-style-type:disc;padding-left:20px}body:not(.index-page) ul li{font-size:16px;line-height:1.6;margin-bottom:12px}.rules-container{margin:0 auto;max-width:800px;padding:20px;word-wrap:break-word;color:var(--text-color);font-size:16px;line-height:1.6;white-space:normal}.rules-container ul{list-style-type:disc;padding-left:20px}.rules-container li{margin-bottom:12px;word-break:break-word}.stickers,.win98-elements{inset:0;pointer-events:none;position:fixed;z-index:-1}.sticker,.win98-window{max-width:200px;position:absolute}.comic-border{border:4px solid #000;border-radius:8px;box-shadow:4px 4px 0 #000}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}.hover-shake:hover{animation:shake .3s linear both}.hover-hue:hover{filter:hue-rotate(90deg)}.hover-glitch:hover{position:relative}.hover-glitch:hover:after,.hover-glitch:hover:before{content:attr(data-text);left:0;position:absolute;top:0}.hover-glitch:hover:before{animation:glitchTop .5s linear infinite alternate-reverse;clip-path:polygon(0 0,100% 0,100% 45%,0 45%);text-shadow:-2px 0 hotpink}.hover-glitch:hover:after{animation:glitchBottom .5s linear infinite alternate-reverse;clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);text-shadow:-2px 0 lime}