:root{
  --bg:#0d0f12;--card:#171b21d9;--line:#252b34;
  --text:#eef1f5;--muted:#8a97a6;--yellow:#ffc21a;--yellow2:#ffd84d;
  --r:16px;--gap:clamp(10px,1.4vh,18px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.45 Inter,system-ui,sans-serif;overflow:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url(/img/hero.jpg) center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#0d0f12eb 0%,#0d0f12d9 40%,#0d0f12f2 100%)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{font-family:"JetBrains Mono",monospace}
.muted{color:var(--muted)}

.app{height:100svh;display:grid;grid-template-rows:auto 1fr auto;gap:var(--gap);padding:var(--gap) clamp(12px,2.5vw,40px);max-width:1600px;margin:0 auto}

.top{display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font:800 18px Unbounded,sans-serif;letter-spacing:-.3px}
.brand img{border-radius:50%;border:2px solid var(--yellow);object-fit:cover}
.brand b{color:var(--yellow)}
.top__stats{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.pill{display:flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);backdrop-filter:blur(8px);font-size:13px}
.pill b{color:var(--yellow);font-family:"JetBrains Mono",monospace}
.pill--muted{color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.quack{width:42px;height:42px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;transition:.2s}
.quack svg{width:30px;height:25px;color:var(--yellow)}
.quack:hover{transform:rotate(-8deg) scale(1.08);border-color:var(--yellow)}

.grid{min-height:0;display:grid;gap:var(--gap);grid-template-columns:1fr 1.25fr;grid-template-rows:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"servers servers" "ts tabs"}
.servers{grid-area:servers;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);min-height:0}
.ts{grid-area:ts}.tabs{grid-area:tabs}

.card,.panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(10px);min-height:0;overflow:hidden}
.card{padding:clamp(12px,1.8vh,18px);display:flex;flex-direction:column;gap:clamp(8px,1.2vh,12px);transition:border-color .2s,transform .2s}
.card:hover{border-color:#ffc21a66;transform:translateY(-2px)}
.card--off{opacity:.65}
.sk{background:linear-gradient(90deg,#171b21 0%,#1e232b 50%,#171b21 100%);background-size:200% 100%;animation:sk 1.4s infinite}
@keyframes sk{to{background-position:-200% 0}}

.card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card__game{font:600 11px "JetBrains Mono",monospace;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.card__name{font:600 clamp(14px,1.9vh,18px)/1.25 Unbounded,sans-serif;margin-top:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.status{flex:none;font:600 11px "JetBrains Mono",monospace;padding:4px 10px;border-radius:99px;display:flex;align-items:center;gap:6px}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status--on{color:var(--yellow);background:#ffc21a1a}
.status--off{color:#ff6b6b;background:#ff6b6b1a}

.map{position:relative;flex:1;min-height:90px;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:
    radial-gradient(circle at 20% 20%,#ffc21a14,transparent 50%),
    repeating-linear-gradient(45deg,#1b2028 0 12px,#191d24 12px 24px)}
.map__img{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.1) contrast(1.05);transform:scale(1.02);transition:transform .6s}
.card:hover .map__img{transform:scale(1.08)}
.map::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0d0f1200 30%,#0d0f12e6 100%)}
.map__name{position:absolute;left:12px;bottom:10px;z-index:1;font:600 clamp(14px,2.2vh,20px) "JetBrains Mono",monospace;text-shadow:0 2px 8px #000}
.map__ping{position:absolute;right:10px;top:10px;z-index:1;padding:3px 8px;border-radius:8px;background:#0d0f12cc;font:600 11px "JetBrains Mono",monospace;color:var(--muted)}
.map__ping b{color:#3ddc84}
.map .duck{position:absolute;right:12px;bottom:6px;z-index:1;width:clamp(40px,6vh,58px);height:clamp(34px,5vh,48px);color:var(--yellow);filter:drop-shadow(0 3px 6px #0008)}
.duck--swim{animation:swim 2.4s ease-in-out infinite}
.duck--sleep{color:#6b7380!important;filter:grayscale(1)!important;transform:rotate(8deg)}
@keyframes swim{50%{transform:translateY(-4px) rotate(-5deg)}}
.zzz{position:absolute;right:16px;bottom:52px;z-index:1;font:600 12px "JetBrains Mono",monospace;color:var(--muted)}

.card__big{display:flex;align-items:baseline;gap:6px}
.card__big b{font:800 clamp(24px,4vh,36px)/1 Unbounded,sans-serif;color:var(--yellow)}
.card__big span{color:var(--muted);font-family:"JetBrains Mono",monospace}
.bar{height:6px;background:#252b34;border-radius:99px;overflow:hidden}
.bar__fill{height:100%;background:linear-gradient(90deg,var(--yellow),var(--yellow2));border-radius:99px;transition:width .6s}
.card--off .bar__fill{background:#ff6b6b55}
.card__ip{display:flex;gap:8px}
.card__ip code{flex:1;min-width:0;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#0d0f1299;font-size:12px;white-space:nowrap;overflow:hidden}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;transition:.2s;white-space:nowrap}
.btn--sm{padding:8px 12px;font-size:13px;border-radius:10px}
.btn--primary{background:var(--yellow);color:#111;box-shadow:0 6px 20px #ffc21a33}
.btn--primary:hover{background:var(--yellow2);transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line);background:#ffffff08}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow)}

.panel{padding:clamp(12px,2vh,20px);display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px)}
.panel__head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.panel__head h2{font:800 clamp(16px,2.4vh,22px) Unbounded,sans-serif}
.panel__head code{color:var(--muted);font-size:12px}

.ts__body{display:flex;align-items:center;gap:16px}
.ts__duck{width:clamp(52px,8vh,72px);height:clamp(44px,6.6vh,60px);color:var(--yellow);flex:none;animation:swim 3s ease-in-out infinite}
.ts__count{display:flex;align-items:baseline;gap:6px}
.ts__count b{font:800 clamp(28px,5vh,44px)/1 Unbounded,sans-serif;color:var(--yellow)}
.ts__count span{font:600 18px Unbounded,sans-serif;color:var(--muted)}
.ts__count i{font-style:normal}
.ts__channels{list-style:none;display:flex;flex-wrap:wrap;gap:6px;min-height:0;overflow:auto;flex:1;align-content:flex-start}
.ts__channels li{padding:5px 10px;border:1px solid var(--line);border-radius:8px;font:12px "JetBrains Mono",monospace;background:#0d0f1299}
.ts__channels li b{color:var(--yellow);margin-left:8px}
.ts__btns{display:flex;gap:8px}
.ts__btns .btn{flex:1}

.tabs__nav{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#0d0f1299}
.tab{padding:7px 14px;border-radius:9px;font-weight:600;font-size:13px;color:var(--muted);transition:.2s}
.tab.is-active{background:var(--yellow);color:#111}
.tab__pane{display:none;min-height:0;overflow:auto;flex:1}
.tab__pane.is-active{display:block}

.rules{list-style:none;counter-reset:r;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:1fr 1fr;gap:var(--gap)}
.rules li{counter-increment:r;position:relative;padding:14px 14px 14px 54px;border:1px solid var(--line);border-radius:14px;background:#0d0f1266}
.rules li::before{content:counter(r);position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:8px;background:var(--yellow);color:#111;font:800 13px/28px Unbounded,sans-serif;text-align:center}
.rules b{display:block;color:var(--text);font-weight:700;margin-bottom:2px}
.rules span{color:var(--muted);font-size:13px}
.soon{height:100%;display:flex;align-items:center;gap:14px;padding:16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.soon svg{width:52px;height:44px;color:#3a414c;flex:none}

.foot{text-align:center;color:var(--muted);font-size:12px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;padding:10px 16px;border-radius:12px;background:var(--yellow);color:#111;font-weight:700;transition:.25s;pointer-events:none;z-index:10}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:980px),(max-height:620px){
  body{overflow:auto}
  .app{height:auto;min-height:100svh}
  .grid{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"servers" "ts" "tabs"}
  .servers{grid-template-columns:1fr}
  .map{min-height:150px}
  .rules{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
  .top__stats .pill--muted{display:none}
}
@media (max-width:560px){.brand span{font-size:14px}.top__stats{display:none}}
.map__img{filter:blur(2.5px) saturate(1.25) brightness(.8);transform:scale(1.1)}
.card:hover .map__img{transform:scale(1.15);filter:blur(1.5px) saturate(1.25) brightness(.9)}
.map::after{background:radial-gradient(ellipse at center,#0d0f1200 40%,#0d0f1299 100%),linear-gradient(180deg,#0d0f1200 35%,#0d0f12e6 100%)}