:root{
  --bg:#070A12;
  --bg2:#0B1020;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.88);
  --muted:rgba(255,255,255,.62);
  --red:#ff2d55;
  --red2:#ff3b30;
  --green:#22c55e;
  --yellow:#fbbf24;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 22px;
  --radius2: 28px;
  --max: 1180px;
  --pad: 18px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(255,45,85,.28), transparent 55%),
    radial-gradient(900px 600px at 90% 0%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(34,197,94,.16), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
	background-attachment: fixed;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.small{font-size:12px;color:var(--muted)}
.hr{height:1px;background:var(--stroke);margin:16px 0}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--stroke);
  border-radius:999px;background:rgba(0,0,0,.25);
  font-size:12px;color:var(--muted);
  backdrop-filter: blur(10px);
}
.badge::before{content:"";width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.28)}
.badge.red::before{background:var(--red)}
.badge.green::before{background:var(--green)}
.badge.yellow::before{background:var(--yellow)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:14px;border:1px solid var(--stroke);
  background:rgba(0,0,0,.25); color:var(--text);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18)}
.btn.primary{
  background: linear-gradient(135deg, rgba(255,45,85,.95), rgba(255,59,48,.70));
  border-color: rgba(255,45,85,.35);
  box-shadow: 0 10px 28px rgba(255,45,85,.18);
}
.btn.primary:hover{background: linear-gradient(135deg, rgba(255,45,85,1), rgba(255,59,48,.80))}

input, select, textarea{
  width:100%;
  padding:12px 14px;border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(255,45,85,.35); box-shadow: 0 0 0 4px rgba(255,45,85,.12)}

.card{
  border-radius:var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.cardPad{padding:var(--pad)}
.grid2{display:grid;grid-template-columns: 1.35fr .65fr; gap:14px}
@media(max-width: 980px){.grid2{grid-template-columns:1fr}}
.grid3{display:grid;grid-template-columns: repeat(3, 1fr); gap:14px}
@media(max-width: 980px){.grid3{grid-template-columns:1fr}}

.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(7,10,18,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.navLeft{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brandMark{
  width:34px;height:34px;border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,45,85,.55), rgba(0,0,0,.25));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 40px rgba(255,45,85,.18);
}
.brandText{font-weight:950; letter-spacing:.6px}
.brandText .redGlow{color: #ff3b30; text-shadow: 0 0 14px rgba(255,45,85,.35)}
.navLinks{display:flex; gap:10px; flex-wrap:wrap}
.navLinks a{padding:10px 12px;border-radius:12px;border:1px solid transparent;color:var(--muted)}
.navLinks a:hover{border-color:rgba(255,255,255,.12); color:var(--text); background: rgba(255,255,255,.05)}
.navRight{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.hero{padding:34px 0 18px 0}
.heroInner{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:stretch}
@media(max-width: 980px){.heroInner{grid-template-columns:1fr}}
.heroCard{position:relative; overflow:hidden; border-radius: var(--radius2)}
.heroCard::before{
  content:""; position:absolute; inset:-2px;
  background:
    radial-gradient(800px 300px at 10% 10%, rgba(255,45,85,.25), transparent 55%),
    radial-gradient(700px 260px at 90% 20%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(700px 320px at 50% 100%, rgba(34,197,94,.12), transparent 60%);
  filter: blur(2px);
}
.heroContent{position:relative; padding:22px}
.hTitle{font-size:42px;line-height:1.05;margin:0;font-weight:980}
.hTitle .redGlow{color:#ff3b30; text-shadow: 0 0 18px rgba(255,45,85,.35)}
.hSub{margin-top:10px;color:var(--muted); max-width:62ch}
.heroActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:18px}
@media(max-width:720px){.kpis{grid-template-columns:1fr}}
.kpi{border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.20); padding:12px}
.kpi .v{font-weight:950;font-size:20px}
.kpi .l{font-size:12px;color:var(--muted); margin-top:4px}

.list{display:grid; gap:10px; margin-top:12px}
.item{border-radius: 18px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); padding:12px}
.item:hover{border-color: rgba(255,255,255,.16)}
.row{display:flex;justify-content:space-between;gap:10px;align-items:center; flex-wrap:wrap}

.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-size:12px;color:var(--muted); text-align:left; padding:0 10px}
.table td{padding:12px 10px; background:rgba(0,0,0,.18); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)}
.table tr td:first-child{border-left:1px solid rgba(255,255,255,.08); border-top-left-radius:16px;border-bottom-left-radius:16px}
.table tr td:last-child{border-right:1px solid rgba(255,255,255,.08); border-top-right-radius:16px;border-bottom-right-radius:16px}

.newsGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:12px}
@media(max-width:980px){.newsGrid{grid-template-columns:1fr}}
.newsCard{overflow:hidden}
.newsImg{
  height:160px;border-radius:18px;
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,45,85,.25), transparent 60%),
    radial-gradient(220px 120px at 80% 30%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.05));
  border:1px solid rgba(255,255,255,.10);
}
.newsBody{margin-top:10px}
.newsTitle{font-weight:950}
.notice{padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22)}
.footer{padding:24px 0;color:var(--muted);font-size:12px}


/* v5 UI */
.sectionTitle{font-size:28px;font-weight:980;margin:0}
.sectionRow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.78);
  font-size:13px;
}

.newsGridV5{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
@media(max-width:1100px){.newsGridV5{grid-template-columns:1fr}}
.newsCardV5{
  display:block;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.newsCardV5:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07)}
.newsMedia{
  height:190px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.newsMedia::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.42) 70%, rgba(0,0,0,.70));
}
.newsTag{
  position:absolute; left:14px; top:14px;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(104, 255, 196, .20);
  border:1px solid rgba(104,255,196,.35);
  color: rgba(160,255,220,.95);
  font-weight:900;
  font-size:13px;
  z-index:2;
}
.newsBodyV5{padding:16px 16px 18px 16px}
.newsMeta{display:flex;gap:14px;align-items:center;color:rgba(255,255,255,.62);font-size:13px;margin-top:2px;flex-wrap:wrap}
.newsTitleV5{font-size:20px;font-weight:980;margin-top:10px}
.newsExcerpt{color:rgba(255,255,255,.62);margin-top:10px;line-height:1.45}
.newsMore{margin-top:14px;display:inline-flex;gap:10px;align-items:center;color:#7aa7ff;font-weight:900}
.newsMore:hover{color:#a8c3ff}

.hscroll{
  display:flex; gap:14px; overflow:auto; padding-bottom:8px;
  scroll-snap-type:x mandatory;
}
.hscroll::-webkit-scrollbar{height:8px}
.hscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:999px}
.serverCard{
  min-width:260px;
  scroll-snap-align:start;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.50);
  padding:14px;
}
.serverTop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rank{
  width:30px;height:30px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.30);
  color: rgba(170,255,210,.95);
  font-weight:980;
}
.iconBtn{
  width:34px;height:34px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  cursor:pointer;
}
.iconBtn:hover{border-color:rgba(255,255,255,.18); background: rgba(255,255,255,.06)}
.serverName{font-weight:980;margin-top:12px}
.serverPlayers{color:rgba(255,255,255,.62);font-size:13px;margin-top:8px;display:flex;gap:10px;align-items:center}
.progress{
  height:8px;border-radius:999px;background: rgba(255,255,255,.08); overflow:hidden; margin-top:10px;
}
.progress > div{
  height:100%;
  background: linear-gradient(90deg, rgba(99,102,241,.90), rgba(59,130,246,.75));
}
.serverMap{color:rgba(255,255,255,.42);font-size:12px;margin-top:10px}

.livePill{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,59,48,.25);
  background: rgba(255,59,48,.12);
  color: rgba(255,210,210,.95);
  font-size:13px;
}
.livePill::before{content:"";width:8px;height:8px;border-radius:99px;background: rgba(255,59,48,.9)}

/* v6 layout tweaks */
.chatPanel #chatBox{height:260px}
@media(max-width:980px){.chatPanel #chatBox{height:320px}}

.reportRow{
  display:flex;justify-content:space-between;gap:10px;align-items:flex-start;
}
.reportMeta{color:rgba(255,255,255,.55);font-size:12px;margin-top:6px}

.chatNameLink{color:rgba(255,255,255,.92); font-weight:900}
.chatNameLink:hover{color:#a8c3ff; text-decoration:underline}


.serverMapBg{background-size:cover;background-position:center;position:relative}
.serverMapBg::before{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.86));z-index:0}
.serverMapBg>*{position:relative;z-index:1}

/* User dropdown + badge + online */
.userMenu { position: relative; display: inline-flex; }

.userBtn{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: inherit;
  cursor: pointer;
}

.userAvatarWrap{ position: relative; display:inline-flex; }
.userAvatar{
  width: 28px; height: 28px;
  border-radius: 999px;
  object-fit: cover;
}

.statusDot{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:10px;
  height:10px;
  border-radius:999px;
  border:2px solid rgba(15,18,25,.92);
  box-shadow: 0 0 10px rgba(0,0,0,.35);
}
.statusDot.on{ background:#33d17a; }
.statusDot.off{ background:#777; }

.userNameRow{ display:flex; align-items:center; gap:8px; }
.userName{ font-weight: 600; font-size: 14px; opacity:.95; }
.userChevron{ opacity:.75; }

.roleBadge{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  opacity: .95;
}

.roleBadge.admin{
  background: rgba(255, 59, 88, .14);
  border-color: rgba(255, 59, 88, .35);
}
.roleBadge.mod{
  background: rgba(88, 160, 255, .14);
  border-color: rgba(88, 160, 255, .35);
}
.roleBadge.handler{
  background: rgba(168, 88, 255, .14);
  border-color: rgba(168, 88, 255, .35);
}
.roleBadge.vip{
  background: rgba(255, 198, 66, .14);
  border-color: rgba(255, 198, 66, .35);
}
.roleBadge.member{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

.userDropdown{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 240px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(15,18,25,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: none;
  z-index: 9999;
}
.userDropdown.open{ display:block; }

.userItem{
  display:flex;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
}
.userItem:hover{ background: rgba(255,255,255,.06); }

.userSep{
  height: 1px;
  margin: 8px 4px;
  background: rgba(255,255,255,.10);
}

.userItem.danger{ color: #ff6b6b; }
.userItem.danger:hover{ background: rgba(255,107,107,.12); }

/* ===== SERVERS GRID (Hypen-like) ===== */
.serversGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1100px){
  .serversGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .serversGrid{ grid-template-columns: 1fr; }
}

.srvCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  min-height: 280px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}

.srvTop{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 14px 14px 10px 14px;
}

.srvLeftTop{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.srvDot{
  width: 9px; height: 9px; border-radius: 999px;
  box-shadow: 0 0 14px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.20);
}
.srvDot.on{ background: #33d17a; }
.srvDot.off{ background: #777; }

.srvTitle{
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srvPill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(90,120,255,.14);
  border: 1px solid rgba(90,120,255,.35);
  color: rgba(220,230,255,.95);
  max-width: 42%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srvMid{
  padding: 32px 14px 22px 14px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}

.srvBig{
  display:flex;
  align-items:center;
  gap: 10px;
  border-radius: 16px;
  padding: 14px 18px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.srvBigNum{
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}
.srvBigNum.alt{
  opacity: .95;
}

.srvBigSep{
  font-size: 22px;
  opacity: .55;
  font-weight: 700;
}

.srvBigSub{
  margin-top: 10px;
  font-size: 12px;
  opacity: .75;
}

.srvBottom{
  padding: 12px 14px 14px 14px;
}

.srvPlayersRow{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}

.srvPlayersText{
  font-size: 12px;
  opacity: .9;
  min-width: 90px;
}

.srvProg{
  flex:1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.srvProg > div{
  height: 100%;
  background: rgba(90,120,255,.95);
  border-radius: 999px;
}

.srvActions{
  display:flex;
  gap: 10px;
}

.srvIpBtn{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}
.srvIpBtn span{
  font-weight: 700;
  font-size: 12px;
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srvJoinBtn{
  min-width: 132px;
  text-align:center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(90,120,255,.92);
  border: 1px solid rgba(90,120,255,.35);
  color: white;
  font-weight: 800;
  text-decoration:none;
}
.srvJoinBtn:hover{
  filter: brightness(1.06);
}

.livePill.bad{
  background: rgba(255,90,90,.14);
  border: 1px solid rgba(255,90,90,.35);
  color: rgba(255,210,210,.95);
}

/* Len pre Najhranejšie servery na indexe */
#topServers .serverContent { position: relative; z-index: 2; }
#topServers .serverBg { position:absolute; inset:0; z-index:1; }

/* Upravíme server karty, aby mali zaoblené rohy */
#topServers .serverCard {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 220px;
  border-radius: 8px; /* Tento border radius sa postará o zaoblenie rohov */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Rovnako aj pri hover efektoch */
#topServers .serverCard:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
  border-radius: 8px; /* Ak sa hover efekt stratí, tak tu opäť zaoblenie */
}

/* Ak je to nevyhnutné pre inú sekciu, pridaj tento štýl aj pre ostatné */
#topServers .serverCard .serverContent {
  position: relative;
  z-index: 2;
  border-radius: 8px; /* To isté pre obsah */
}


/* Progress bar – aby bol viditeľný aj na zapnutých serveroch */
#topServers .topSrvProg{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
  margin-top: 10px;
}
#topServers .topSrvProgFill{
  height: 100%;
  border-radius: 999px;
  background: rgba(90,140,255,.9); /* môžeš zmeniť */
}

/* Spodný riadok: badge + mapa */
#topServers .serverBottomRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top: 10px;
}

/* Badge štýl */
#topServers .modeBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  background: rgba(255,165,0,.18);
  border: 1px solid rgba(255,165,0,.35);
  color: rgba(255,200,120,.95);
  white-space: nowrap;
}

/* konkrétne farby podľa typu (môžeš doplniť) */
#topServers .mode-public{
  background: rgba(255,165,0,.18);
  border-color: rgba(255,165,0,.35);
  color: rgba(255,200,120,.95);
}
#topServers .mode-retake{
  background: rgba(120,200,255,.16);
  border-color: rgba(120,200,255,.32);
  color: rgba(180,230,255,.95);
}
#topServers .mode-jailbreak{
  background: rgba(120,255,160,.14);
  border-color: rgba(120,255,160,.28);
  color: rgba(180,255,210,.95);
}
#topServers .mode-ttt{
  background: rgba(255,120,200,.14);
  border-color: rgba(255,120,200,.28);
  color: rgba(255,190,230,.95);
}

/* ===============================
   SERVER DETAIL MODAL (ISOLATED)
   =============================== */

#srvDetailModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-family: inherit;
}

#srvDetailModal[hidden] {
  display: none;
}

#srvDetailModal .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}

#srvDetailModal .modal {
  position: relative;
  width: 640px;
  max-width: calc(100vw - 32px);
  background: #0e111a;
  color: #fff;
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

#srvDetailModal h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
}

#srvDetailModal .close {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 22px;
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
}

#srvDetailModal .close:hover {
  color: #fff;
}


#srvDetailModal .players .empty {
  text-align: center;
  font-size: 14px;
  color: #bbb;
  line-height: 1.4;
}

#srvDetailModal .actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

#srvDetailModal .modal button {
  background-color: #ff6600;
  color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
}

#srvDetailModal .modal button:hover {
  background-color: #ff4500;
}

/* ===============================
   DETAIL BUTTON (SERVER CARD)
   =============================== */

.serverCard .iconBtn.detail {
  background: rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.serverCard .iconBtn.detail:hover {
  background: rgba(255,255,255,.2);
}

/* ===== SERVER DETAIL BUTTON – SAFE FIX ===== */
.serverCard .serverContent .srvDetailBtn {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, rgba(255,45,85,.95), rgba(255,59,48,.70));
  color: #ffff;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}

.serverCard .serverContent .srvDetailBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  opacity: .95;
}

.serverCard .serverContent .srvDetailBtn:active {
  transform: translateY(0);
}

#srvDetailModal .players {
  max-height: 600px; /* alebo iná hodnota podľa potreby */
  overflow-y: auto; /* povolí scroll len ak bude potrebný */
  scrollbar-gutter: stable;
  padding-right: 12px; /* miesto pre scrollbar */
}

#srvDetailModal .players .hdr, 
#srvDetailModal .players .row {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
}

#srvDetailModal .players .hdr {
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .06);
  margin-bottom: 8px;
}

#srvDetailModal .players .row {
  background: rgba(255, 255, 255, .03);
  margin-bottom: 8px;
}

#srvDetailModal .players .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#srvDetailModal .players .score,
#srvDetailModal .players .time {
  text-align: right;
  color: rgba(255, 255, 255, .85);
}
#srvDetailModal .players{
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Firefox */
#srvDetailModal .players{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,90,90,.75) rgba(255,255,255,.06);
}

/* Chrome / Edge / Safari */
#srvDetailModal .players::-webkit-scrollbar{
  width: 10px;
}

#srvShots .srvShotsGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#srvShots .srvShot{
  position: relative;
  display:block;
  width:100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

#srvShots .srvShotOverlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.60));
  opacity:.9;
  transition: opacity .15s ease, transform .15s ease;
}

#srvShots .srvShot:hover .srvShotOverlay{
  opacity:.55;
  transform: scale(1.02);
}


#srvDetailModal .players::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

#srvDetailModal .players::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,80,80,.95), rgba(255,130,60,.85));
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  border: 2px solid rgba(0,0,0,.35); /* aby to sedelo na tmavom pozadí */
}

#srvDetailModal .players::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(255,110,110,1), rgba(255,160,80,.95));
}

#srvDetailModal .players::-webkit-scrollbar-thumb:active{
  background: linear-gradient(180deg, rgba(255,70,70,1), rgba(255,120,60,1));
}

/* ====== TEAM PAGE (isolated) ====== */
#teamPage .teamHeader{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

#teamPage .teamGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}

#teamPage .teamCard{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  text-decoration:none;
}

#teamPage .teamCard:hover{
  border-color: rgba(255,90,90,.35);
  background: rgba(255,255,255,.045);
}

#teamPage .teamAvatar{
  width:46px;
  height:46px;
  border-radius:14px;
  overflow:hidden;
  flex: 0 0 auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

#teamPage .teamAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#teamPage .teamAvatarPh{
  font-weight:800;
  color: rgba(255,255,255,.9);
}

#teamPage .teamInfo{ min-width:0; }
#teamPage .teamName{
  font-weight:700;
  color: rgba(255,255,255,.95);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#teamPage .teamMeta{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:10px;
}

#teamPage .teamHint{
  font-size:12px;
  color: rgba(255,255,255,.55);
}

#teamPage .teamRoleBadge{
  font-size:12px;
  font-weight:800;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

#teamPage .teamRoleBadge.role-admin{
  border-color: rgba(255,90,90,.35);
  background: rgba(255,90,90,.12);
}
#teamPage .teamRoleBadge.role-moderator{
  border-color: rgba(255,180,80,.35);
  background: rgba(255,180,80,.12);
}

.adminReportsList .adminScroll{
  max-height: calc(100vh - 160px);
  overflow: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

/* Firefox */
.adminReportsList .adminScroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,90,90,.75) rgba(255,255,255,.06);
}

/* iba admin report list */
.adminScroll{ scrollbar-width: thin; scrollbar-color: rgba(255,90,90,.75) rgba(255,255,255,.06); }
.adminScroll::-webkit-scrollbar{ width: 10px; }
.adminScroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.adminScroll::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,80,80,.95), rgba(255,130,60,.85));
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  border: 2px solid rgba(0,0,0,.35);
}
.adminScroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(255,110,110,1), rgba(255,160,80,.95));
}


/* Chrome/Edge */
.adminReportsList .adminScroll::-webkit-scrollbar{ width: 10px; }
.adminReportsList .adminScroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.adminReportsList .adminScroll::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,80,80,.95), rgba(255,130,60,.85));
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  border: 2px solid rgba(0,0,0,.35);
}
.adminReportsList .adminScroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(255,110,110,1), rgba(255,160,80,.95));
}