*{margin:0;padding:0;box-sizing:border-box}
:root{--w:#fff;--muted:rgba(255,255,255,.6);--line:rgba(255,255,255,.12)}
html,body{height:100%}
body{background:#040405;color:#fff;font-family:'Space Grotesk',system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
.hidden{display:none!important}

/* TŁO */
#bgVideo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-4}
#bgFallback{position:fixed;inset:0;background:radial-gradient(ellipse at 30% 20%,#1b1030,#040405 70%);z-index:-4}
#bgDark{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.8));z-index:-3}
#fx{position:fixed;inset:0;z-index:-2;pointer-events:none}
#grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* GATE */
#gate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);transition:opacity .5s}
#gate.gone{opacity:0;pointer-events:none}
#clickMe{font-family:inherit;font-size:22px;font-weight:700;letter-spacing:4px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:18px 64px;cursor:pointer;box-shadow:0 0 30px rgba(255,255,255,.15),inset 0 0 20px rgba(255,255,255,.05);transition:.25s;animation:gatePulse 2s infinite}
#clickMe:hover{transform:scale(1.07);background:#fff;color:#000;box-shadow:0 0 60px rgba(255,255,255,.5)}
@keyframes gatePulse{50%{box-shadow:0 0 50px rgba(255,255,255,.3)}}
.gate-sub{color:var(--muted);letter-spacing:6px;font-size:12px}

/* BOOT */
#boot{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:#020203;transition:opacity .5s}
#boot.gone{opacity:0;pointer-events:none}
#terminal{width:min(640px,90vw);background:#060607;border:1px solid #1c1c20;border-radius:12px;padding:22px;font-family:'JetBrains Mono',monospace;box-shadow:0 0 80px rgba(0,255,140,.07)}
#termLines{white-space:pre-wrap;font-size:14px;line-height:1.8;color:#c8ffd9;min-height:220px}
#termLines .g{color:#00ff88}#termLines .r{color:#ff5470}#termLines .y{color:#ffe66d}#termLines .d{color:#555}

/* STAGE */
#stage{width:min(1100px,94vw);margin:0 auto;padding:60px 0 90px;transition:opacity .3s}
.hidden-main{opacity:0;pointer-events:none}
#stage.enter{animation:enterIn .9s cubic-bezier(.2,1.4,.3,1) both}
@keyframes enterIn{from{opacity:0;filter:blur(14px);transform:translateY(30px) scale(.96)}to{opacity:1;filter:blur(0);transform:none}}
.layout{display:grid;grid-template-columns:220px 1fr 220px;gap:18px;align-items:start}
.center{display:flex;flex-direction:column;gap:14px;min-width:0}
.side{display:flex;flex-direction:column;gap:14px}

/* KARTA / TILT */
.tilt{perspective:900px}
.card{position:relative;background:rgba(12,12,17,.78);border:1px solid var(--line);border-radius:22px;padding:0 0 16px;overflow:hidden;backdrop-filter:blur(18px);transition:transform .15s ease-out,box-shadow .3s;transform-style:preserve-3d;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.card.glass{background:rgba(255,255,255,.07);backdrop-filter:blur(28px) saturate(1.4);border-color:rgba(255,255,255,.25)}
#glare{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.14),transparent 60%);opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}
#banner{height:120px;background:linear-gradient(120deg,#2b1055,#7597de);background-size:cover;background-position:center}
.prof-row{display:flex;align-items:center;gap:14px;padding:0 18px;margin-top:-30px}
.pfp-wrap{position:relative;flex-shrink:0}
.pfp-wrap img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid #0c0c11;background:#222}
#statusDot{position:absolute;right:2px;bottom:4px;width:20px;height:20px;border-radius:50%;border:4px solid #0c0c11;background:#747f8d}
#statusDot.online{background:#3ba55d}#statusDot.idle{background:#faa81a}#statusDot.dnd{background:#ed4245}
.prof-meta{flex:1;min-width:0}
.prof-meta h1{font-size:24px;text-shadow:0 0 18px rgba(255,255,255,.4)}
#usub{color:var(--muted);font-size:13px;margin-top:2px}
.views{font-weight:700;font-size:15px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:6px 12px;white-space:nowrap}
#msgBox{margin:12px 18px 0;min-height:44px;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-family:'JetBrains Mono',monospace;font-size:13px;color:#d8ffe9}
.caret{animation:blink 1s steps(1) infinite;color:#00ff88}
@keyframes blink{50%{opacity:0}}
#emotes{display:flex;flex-wrap:wrap;gap:10px;padding:12px 18px 0}
#emotes button{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;border-radius:12px;padding:8px 13px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.2s}
#emotes button:hover{transform:translateY(-3px);background:#fff;color:#000;box-shadow:0 0 16px rgba(255,255,255,.5)}
#emotes img{width:18px;height:18px;border-radius:4px}

/* SERWERY */
.server{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(12,12,17,.7);backdrop-filter:blur(14px);transition:.2s}
.server:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3)}
.server .sbanner{height:64px;background:linear-gradient(120deg,#222,#444);background-size:cover;background-position:center}
.server.main .sbanner{height:90px}
.server .sbody{padding:0 12px 12px}
.server img.sicon{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid #101016;margin-top:-26px;background:#222}
.server b{display:block;font-size:14px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server .smeta{font-size:11.5px;color:var(--muted);margin:3px 0 9px}
.dot-g{color:#3bff7a}
.join-btn{width:100%;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:12px;padding:8px;font-family:inherit;font-weight:700;cursor:pointer;transition:.2s}
.join-btn:hover{background:#fff;color:#000;box-shadow:0 0 16px rgba(255,255,255,.5)}
#srvMain .server{max-width:460px;margin:0 auto}

/* PLAYER */
#player{display:flex;align-items:center;gap:12px;padding:12px 16px}
#songIcon{width:46px;height:46px;border-radius:12px;object-fit:cover;background:#222;flex-shrink:0}
.p-main{flex:1;min-width:0}
#songTitle{font-size:13px;font-weight:600;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-row{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
#progress{flex:1;height:5px;background:rgba(255,255,255,.14);border-radius:99px;position:relative;cursor:pointer}
#bar{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:99px;box-shadow:0 0 8px #fff}
#dot{position:absolute;top:50%;width:12px;height:12px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);left:0;box-shadow:0 0 10px #fff}
.p-btns{display:flex;gap:6px}
.p-btns button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:15px;cursor:pointer}
.p-btns button:hover{background:#fff;color:#000}
#ytHole{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* POWERED */
#powered{position:fixed;right:16px;bottom:12px;font-size:12px;color:var(--muted);z-index:40}
#powered b{color:#fff}

/* EDYTOR */
#editor{position:fixed;inset:0;z-index:200;background:#08080b;overflow-y:auto;padding:26px 16px}
.ed-wrap{max-width:760px;margin:0 auto;padding-bottom:80px}
.ed-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.ed-head h2{font-size:20px}.dim{color:#555;font-size:13px}
#editor h3{margin:22px 0 10px;font-size:15px;color:#9df5c8}
#editor label{display:block;font-size:13px;color:#bbb;margin:8px 0}
#editor input,#editor textarea,#editor select{width:100%;margin-top:5px;background:#141417;border:1px solid #2a2a30;color:#fff;border-radius:8px;padding:9px;font-family:inherit;font-size:13px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.mini{font-size:11px;color:#777;margin:6px 0}
.btn{display:inline-block;background:#1c1c22;border:1px solid #333;color:#fff;border-radius:9px;padding:9px 14px;cursor:pointer;margin:6px 6px 0 0;font-family:inherit;font-size:13px;text-decoration:none}
.btn.primary{background:#fff;color:#000;font-weight:700}
.btn.danger{border-color:#5a2020;color:#ff8080}
.row{margin-top:14px}
.srv-edit{background:#101014;border:1px solid #26262c;border-radius:10px;padding:10px;margin:8px 0}
.srv-edit b{font-size:13px}
#toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(20px);background:#fff;color:#000;padding:9px 20px;border-radius:99px;font-size:13px;font-weight:700;z-index:300;opacity:0;transition:.3s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%)}
#gearBtn{position:fixed;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(10px);z-index:150;transition:.2s}
#gearBtn:hover{transform:rotate(40deg) scale(1.1);background:#fff;color:#000}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap}
  .side .server{flex:1 1 45%;min-width:160px}
  .grid{grid-template-columns:1fr}
}