/* =========================================================
   DARK RPG UI + INNER FRAME + TABS + ICONS (CSS-only)
   ========================================================= */

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }

:root{
  --ink:#eadfcb;
  --muted:#cdbf9f;

  --gold1:#f0d98a;
  --gold2:#caa24a;
  --gold3:#7b5a1b;

  --line: rgba(240,217,138,.26);
  --line2: rgba(240,217,138,.16);

  --dark1:#1b140d;
  --dark2:#0f0c08;
  --panelA: rgba(32,23,15,.70);
  --panelB: rgba(18,13,9,.78);
}

body{
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size:13px;
  color:var(--ink);

  background:
    radial-gradient(circle at 50% 20%, rgba(240,217,138,.08), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 50% 95%, rgba(0,0,0,.55), rgba(0,0,0,.88)),
    linear-gradient(#13100b, #0a0805);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

a{ color:var(--gold1); text-decoration:none; }
a:hover{ color:#fff2bf; text-decoration:none; }

/* =========================
   PORTAL FRAME
========================= */
#portal{
  width:1000px;
  margin:28px auto;
  background: linear-gradient(rgba(20,16,11,.92), rgba(12,10,7,.94));
  border:1px solid rgba(123,90,27,.68);
  box-shadow: 0 18px 55px rgba(0,0,0,.70);
  position:relative;
}

#portal:before{
  content:"";
  position:absolute;
  left:8px; right:8px; top:8px; bottom:8px;
  border:1px solid rgba(240,217,138,.22);
  pointer-events:none;
}

/* =========================
   HEADER
========================= */
.topbar{
  height:112px;
  background:
    radial-gradient(circle at 25% 30%, rgba(240,217,138,.10), rgba(240,217,138,0) 55%),
    linear-gradient(var(--dark1), var(--dark2));
  border-bottom:1px solid rgba(0,0,0,.75);
  position:relative;
}

.topbar:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: rgba(240,217,138,.12);
}

.topbar:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background: linear-gradient(90deg, var(--gold3), var(--gold1), var(--gold3));
  opacity:.95;
}

.topbar-inner{ padding:18px 22px; position:relative; }

.logo{
  font-size:28px;
  font-weight:bold;
  letter-spacing:1px;
  color:var(--ink);
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}
.logo strong{
  color:var(--gold1);
  text-shadow: 0 0 12px rgba(240,217,138,.18);
}

/* LOGIN */
.topbar-login{
  position:absolute;
  right:18px;
  top:20px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.topbar-login .lbl{
  color:rgba(234,223,203,.85);
  font-weight:bold;
  margin-left:6px;
}
.topbar-login .lbl:first-child{ margin-left:0; }

.topbar-login input{
  height:22px;
  width:130px;
  font-size:11px;
  padding:2px 6px;
  margin:0 6px 0 4px;
  border:1px solid rgba(240,217,138,.22);
  background: linear-gradient(#2a2015, #16110b);
  color:var(--ink);
  outline:none;
  border-radius:8px;
}
.topbar-login input:focus{
  border-color: rgba(240,217,138,.55);
  box-shadow: 0 0 0 2px rgba(240,217,138,.10);
}

.topbar-login button{
  height:22px;
  width:26px;
  font-size:11px;
  padding:0;
  cursor:pointer;
  border:1px solid rgba(202,162,74,.85);
  border-radius:8px;
  background: linear-gradient(var(--gold1), var(--gold2));
  color:#241a0e;
  font-weight:bold;
}
.topbar-login button:hover{
  background: linear-gradient(#fff2bf, #d6ad4c);
}

/* =========================
   NAV (TABS + SEARCH RIGHT)  ? FIX (no flex conflict)
========================= */
.nav{
  height:46px;
  background: linear-gradient(#18120b, #0d0a06);
  border-bottom:1px solid rgba(0,0,0,.75);
  position:relative;
  padding-top:8px;
}

.nav:before{
  content:"";
  position:absolute;
  left:10px; right:10px; top:0;
  height:1px;
  background: rgba(240,217,138,.10);
}

.nav:after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:0;
  height:2px;
  background: linear-gradient(90deg, rgba(240,217,138,.05), rgba(240,217,138,.22), rgba(240,217,138,.05));
}

.nav-tabs{
  text-align:center;
}

.nav a{
  position:relative;
  display:inline-block;
  height:28px;
  line-height:28px;
  margin:0 6px;
  padding:0 16px;
  color:var(--muted);
  font-weight:bold;
  font-size:12px;
  letter-spacing:.5px;
  border:1px solid rgba(240,217,138,.16);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background: linear-gradient(rgba(40,30,20,.55), rgba(18,13,9,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.nav a:hover{
  color:#fff2bf;
  background: linear-gradient(rgba(60,45,28,.70), rgba(18,13,9,.70));
  border-color: rgba(240,217,138,.28);
}

.nav a.active{
  color:#241a0e;
  border-color: rgba(202,162,74,.95);
  background: linear-gradient(var(--gold1), var(--gold2));
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 -1px 0 rgba(202,162,74,.25);
}

.nav a.active:after{
  content:"";
  position:absolute;
  left:6px; right:6px;
  height:2px;
  bottom:-2px;
  background: linear-gradient(90deg, var(--gold3), #fff2bf, var(--gold3));
  opacity:.9;
}

/* search po prawej — NIE przesuwa zakładek */
.nav-search{
  position:absolute;
  right:10px;
  bottom:8px;
}

.nav-search form{
  display:flex;
  gap:6px;
  align-items:center;
}

.nav-search input{
  width:240px;
  height:28px;
  padding:4px 10px;
  border-radius:10px;
  border:1px solid rgba(240,217,138,.22);
  background: rgba(0,0,0,.18);
  color: var(--ink);
  outline:none;
}

.nav-search input:focus{
  border-color: rgba(240,217,138,.55);
  box-shadow: 0 0 0 2px rgba(240,217,138,.10);
}

.nav-search button{
  width:38px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(202,162,74,.85);
  background: linear-gradient(var(--gold1), var(--gold2));
  color:#241a0e;
  cursor:pointer;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav-search button:hover{
  background: linear-gradient(#fff2bf, #d6ad4c);
}

/* =========================
   CONTENT = INNER FRAME
========================= */
#portal-content{
  margin:12px;
  padding:12px;

  border:1px solid rgba(240,217,138,.22);
  background:
    radial-gradient(circle at 12px 12px, rgba(240,217,138,.45) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at calc(100% - 12px) 12px, rgba(240,217,138,.45) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 12px calc(100% - 12px), rgba(240,217,138,.45) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), rgba(240,217,138,.45) 0 2px, rgba(0,0,0,0) 3px),

    linear-gradient(90deg, rgba(240,217,138,.18), rgba(240,217,138,0) 35%) top left / 140px 1px no-repeat,
    linear-gradient(180deg, rgba(240,217,138,.18), rgba(240,217,138,0) 35%) top left / 1px 140px no-repeat,

    linear-gradient(270deg, rgba(240,217,138,.18), rgba(240,217,138,0) 35%) top right / 140px 1px no-repeat,
    linear-gradient(180deg, rgba(240,217,138,.18), rgba(240,217,138,0) 35%) top right / 1px 140px no-repeat,

    linear-gradient(90deg, rgba(240,217,138,.18), rgba(240,217,138,0) 35%) bottom left / 140px 1px no-repeat,
    linear-gradient(0deg, rgba(240,217,138,.18), rgba(240,217,138,0) 35%) bottom left / 1px 140px no-repeat,

    linear-gradient(270deg, rgba(240,217,138,.18), rgba(240,217,138,0) 35%) bottom right / 140px 1px no-repeat,
    linear-gradient(0deg, rgba(240,217,138,.18), rgba(240,217,138,0) 35%) bottom right / 1px 140px no-repeat,

    linear-gradient(rgba(14,10,7,.55), rgba(14,10,7,.55));

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 10px 26px rgba(0,0,0,.55);
}

/* =========================
   PANELS / SECTIONS
========================= */
.section{
  border:1px solid rgba(240,217,138,.22);
  background: linear-gradient(var(--panelA), var(--panelB));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:10px;
}

.section h1,
.section h2{
  margin:0;
  height:30px;
  line-height:30px;
  padding-left:10px;
  font-size:12px;
  font-weight:bold;
  letter-spacing:.5px;
  color:var(--ink);
  background: linear-gradient(#241a10, #120d08);
  border-bottom:1px solid rgba(0,0,0,.75);
  position:relative;
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
}

.section h1:after,
.section h2:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: linear-gradient(90deg, var(--gold3), var(--gold1), var(--gold3));
  opacity:.85;
}

.section p{ padding:10px; color:var(--muted); }

.subtitle{
  padding:8px 10px;
  border-bottom:1px solid rgba(240,217,138,.14);
  background: linear-gradient(rgba(42,32,21,.65), rgba(24,17,11,.72));
  color:var(--muted);
}

/* =========================
   TOP PANEL
========================= */
.top-panel{
  display:table;
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  border:1px solid rgba(240,217,138,.22);
  background: linear-gradient(var(--panelA), var(--panelB));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:10px;
}

.top-panel .box{
  display:table-cell;
  vertical-align:top;
  border-left:1px solid rgba(240,217,138,.14);
  padding:8px 10px;
  position:relative;
}
.top-panel .box:first-child{ border-left:0; }

.top-panel .box h3{
  height:24px;
  line-height:24px;
  margin:-8px -10px 8px -10px;
  padding-left:10px;
  font-size:12px;
  font-weight:bold;
  letter-spacing:.4px;
  color:var(--ink);
  background: linear-gradient(#241a10, #120d08);
  border-bottom:1px solid rgba(0,0,0,.75);
  position:relative;
}
.top-panel .box h3:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: linear-gradient(90deg, var(--gold3), var(--gold1), var(--gold3));
  opacity:.85;
}

.box-meta{
  margin-top:6px;
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}

.top-panel .box.promoted{
  border:1px solid rgba(202,162,74,.75);
  background:
    radial-gradient(circle at 30% 20%, rgba(240,217,138,.16), rgba(240,217,138,0) 60%),
    linear-gradient(rgba(45,33,20,.85), rgba(20,14,9,.90));
  box-shadow:
    inset 0 0 0 1px rgba(240,217,138,.10),
    0 0 18px rgba(240,217,138,.10);
}
.top-panel .box.promoted:after{
  content:"FEATURED";
  position:absolute;
  right:8px;
  top:6px;
  font-size:10px;
  font-weight:bold;
  letter-spacing:.6px;
  padding:1px 6px;
  border:1px solid rgba(202,162,74,.85);
  border-radius:8px;
  background: linear-gradient(var(--gold1), var(--gold2));
  color:#241a0e;
}

.stats-list{
  list-style:none;
  padding:0;
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}
.stats-list li{ padding:2px 0; }

.ad-placeholder{
  border:1px dashed rgba(240,217,138,.22);
  background: rgba(0,0,0,.18);
  color:var(--muted);
  text-align:center;
  padding:18px 10px;
  font-size:12px;
  border-radius:10px;
}

/* =========================
   TABLE (ranking)
========================= */
.ranking{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.ranking thead th{
  background: linear-gradient(rgba(42,32,21,.80), rgba(24,17,11,.90));
  border:1px solid rgba(240,217,138,.18);
  height:24px;
  padding:0;
  color:var(--ink);
  font-weight:bold;
  white-space:nowrap;
  text-align:left;
  -webkit-user-select:none;
  user-select:none;
}

.ranking thead th a{
  display:block;
  width:100%;
  height:24px;
  line-height:20px;
  padding:2px 6px;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
}
.ranking thead th a:hover{ background: rgba(240,217,138,.10); }

.ranking tbody td{
  border:1px solid rgba(240,217,138,.12);
  padding:3px 6px;
  vertical-align:middle;
  background: rgba(0,0,0,.14);
  color:var(--muted);
}
.ranking tbody tr:nth-child(even) td{ background: rgba(0,0,0,.10); }

.ranking tbody tr:hover td{
  background: rgba(240,217,138,.10);
  color:#fff2bf;
}

.ranking tr.featured td{
  background:
    radial-gradient(circle at 25% 20%, rgba(240,217,138,.14), rgba(240,217,138,0) 60%),
    rgba(30,22,14,.55) !important;
  border-top-color: rgba(202,162,74,.35);
  border-bottom-color: rgba(202,162,74,.35);
  box-shadow: inset 0 0 0 1px rgba(240,217,138,.10);
  color:#fff2bf;
}

.server-col{ padding-top:2px; padding-bottom:2px; }
.server-title a{ font-weight:bold; color:var(--gold1); }
.server-title a:hover{ color:#fff2bf; }

.server-sub{
  margin-top:2px;
  font-size:11px;
  color:rgba(234,223,203,.85);
}
.server-sub .sub-item + .sub-item:before{
  content:" • ";
  color:rgba(240,217,138,.60);
}

/* online bar */
.online-bar{
  width:100%;
  height:8px;
  border:1px solid rgba(240,217,138,.18);
  background: rgba(0,0,0,.22);
  margin-bottom:2px;
  overflow:hidden;
  border-radius:3px;
}
.online-bar .fill{ height:100%; }
.online-bar .fill.low{ background: linear-gradient(#b84a3a, #8f2f22); }
.online-bar .fill.medium{ background: linear-gradient(#d09a2d, #b17315); }
.online-bar .fill.high{ background: linear-gradient(#3e8b3e, #2f5e2f); }

.ranking td small{
  display:block;
  margin-top:1px;
  font-size:11px;
  color:rgba(234,223,203,.85);
}

.exp-badge{
  display:inline-block;
  padding:1px 6px;
  border:1px solid rgba(240,217,138,.22);
  background: rgba(0,0,0,.18);
  font-size:11px;
  font-weight:bold;
  color:#fff2bf;
  border-radius:8px;
}

/* ===== ICONS in /servers header (Bootstrap Icons, no emoji) ===== */
.ranking-servers thead th a{ padding-left:22px; position:relative; }
.ranking-servers thead th a:before{
  position:absolute;
  left:6px;
  top:2px;
  opacity:.95;
  font-size:12px;
  font-family: "bootstrap-icons";
  font-weight: normal;
  speak: none;
}

/* columns: #, IP, Name, Players/Max, Uptime, Pkt, EXP, Type, Status */
.ranking-servers thead th:nth-child(2) a:before{ content:"\F5D1"; } /* bi-hdd-network */
.ranking-servers thead th:nth-child(3) a:before{ content:"\F4C9"; } /* bi-fonts */
.ranking-servers thead th:nth-child(4) a:before{ content:"\F4CF"; } /* bi-people */
.ranking-servers thead th:nth-child(5) a:before{ content:"\F293"; } /* bi-clock */
.ranking-servers thead th:nth-child(6) a:before{ content:"\F586"; } /* bi-star */
.ranking-servers thead th:nth-child(7) a:before{ content:"\F46C"; } /* bi-lightning */
.ranking-servers thead th:nth-child(8) a:before{ content:"\F5DD"; } /* bi-shield */
.ranking-servers thead th:nth-child(9) a:before{ content:"\F26E"; } /* bi-circle-fill */

/* =========================
   BUTTONS / BADGES
========================= */
.btn{
  display:inline-block;
  padding:6px 10px;
  font-size:12px;
  line-height:1;
  font-weight:bold;
  border-radius:8px;
  border:1px solid rgba(240,217,138,.22);
  background: rgba(0,0,0,.18);
  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{
  background: rgba(240,217,138,.10);
  color:#fff2bf;
  text-decoration:none;
}
.btn.small{ padding:4px 8px; font-size:11px; }

.btn.primary{
  border-color: rgba(202,162,74,.85);
  background: linear-gradient(var(--gold1), var(--gold2));
  color:#241a0e;
  text-shadow: 0 1px 0 rgba(255,255,255,.20);
}
.btn.primary:hover{
  background: linear-gradient(#fff2bf, #d6ad4c);
  color:#241a0e;
}

.btn.outline{
  background: transparent;
  border-color: rgba(202,162,74,.55);
  color:var(--gold1);
}
.btn.outline:hover{ background: rgba(240,217,138,.10); }

.badge{
  display:inline-block;
  padding:1px 6px;
  font-size:11px;
  border-radius:8px;
  border:1px solid rgba(240,217,138,.22);
  background: rgba(0,0,0,.18);
  color:var(--muted);
}
.badge.online{
  border-color: rgba(62,139,62,.65);
  background: rgba(62,139,62,.18);
  color:#cfeccb;
}
.badge.featured{
  border-color: rgba(202,162,74,.85);
  background: rgba(240,217,138,.18);
  color:#fff2bf;
}

/* =========================
   CARDS (if used)
========================= */
.server-list{ padding:10px; }
.server-card{
  display:block;
  padding:10px;
  margin:8px 0;
  border:1px solid rgba(240,217,138,.18);
  background: rgba(0,0,0,.14);
  border-radius:10px;
  color:var(--muted);
  text-decoration:none;
}
.server-card:hover{
  background: rgba(240,217,138,.10);
  color:#fff2bf;
  text-decoration:none;
}
.server-card.featured{
  border-color: rgba(202,162,74,.65);
  box-shadow: 0 0 14px rgba(240,217,138,.10);
}
.server-card strong{ color:var(--gold1); }
.server-card .meta{ margin-top:6px; font-size:12px; color:rgba(234,223,203,.85); }

/* =========================
   FORMS
========================= */
input[type="text"], input[type="number"], input[type="password"], textarea, select{
  border:1px solid rgba(240,217,138,.22);
  background: rgba(0,0,0,.18);
  color:var(--ink);
  padding:6px 8px;
  border-radius:10px;
  font-size:12px;
  outline:none;
}
textarea{ width:100%; }
input:focus, textarea:focus, select:focus{
  border-color: rgba(240,217,138,.55);
  box-shadow: 0 0 0 2px rgba(240,217,138,.10);
}

/* =========================
   FOOTER
========================= */
.footer{
  height:36px;
  line-height:36px;
  color:var(--muted);
  font-size:12px;
  background: linear-gradient(#1c160f, #0f0c08);
  border-top:1px solid rgba(0,0,0,.75);
  position:relative;
}
.footer:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg, var(--gold3), var(--gold1), var(--gold3));
  opacity:.85;
}
.footer-inner{ padding:0 15px; }
.footer-links{ float:right; }
.footer a{ color:var(--muted); }
.footer a:hover{ color:#fff2bf; }