/* Tibia.CITY – RPG Bright (v9) */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap");

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

:root{
  --ink:#f6f0e2; --muted:#ead9b8;

  --gold1:#ffe7a6; --gold2:#d9b45f; --gold3:#8a6721;

  --dark1:#2f2318; --dark2:#160f0a;

  --panelA:rgba(120,94,66,.86); --panelB:rgba(66,50,34,.92);

  --paperA:rgba(255,250,242,.92);
  --paperB:rgba(241,224,194,.94);
  --paperC:rgba(232,209,170,.96);
  --paperInk:#2b1d12;
  --paperMuted:#4b3625;
  --paperLine2:rgba(138,103,33,.22);

  --tblHeadA:rgba(78,54,32,.92);
  --tblHeadB:rgba(34,23,14,.98);

  --tblCellA:rgba(255,250,242,.82);
  --tblCellB:rgba(241,224,194,.70);

  --tblHover:rgba(255,252,246,.88);
  --tblHoverLine:rgba(138,103,33,.42);

  --bronzeA:rgba(154,105,60,.90);
  --bronzeB:rgba(88,58,34,.94);
  --bronzeHoverA:rgba(182,128,76,.92);
  --bronzeHoverB:rgba(110,74,44,.96);
}

body{
  font-family:
  Tahoma, Verdana, Arial,
  "Segoe UI Symbol", "Apple Symbols",
  "Noto Sans Symbols", "Noto Sans Symbols 2",
  "Noto Color Emoji", "Apple Color Emoji",
  sans-serif;
  font-size:13px;
  color:var(--ink);

	button, input, select, textarea{
  	font-family: inherit;
	}

  /* tło: ciemniejsza poświata (~+40%) + minimalnie szersza + subtelna tekstura */
  background:
    radial-gradient(circle at 50% 20%, rgba(255,231,166,.14), rgba(0,0,0,0) 60%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.42), rgba(0,0,0,0) 68%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 32%, rgba(0,0,0,.54) 82%, rgba(0,0,0,.74) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, rgba(0,0,0,0) 1px 7px),
    linear-gradient(#f0dcc0,#d4ad7c);
  background-attachment:fixed;
}

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

/* ===== Portal frame ===== */
#portal{
  width:1000px;
  max-width:calc(100% - 24px);
  margin:28px auto;
  background:linear-gradient(rgba(92,70,48,.94),rgba(28,20,14,.94));
  border:1px solid rgba(138,103,33,.86);
  box-shadow:0 26px 90px rgba(0,0,0,.50);
  position:relative;
}
#portal:before{
  content:"";
  position:absolute;left:8px;right:8px;top:8px;bottom:8px;
  border:1px solid rgba(255,231,166,.26);
  pointer-events:none;
}

/* ===== Header ===== */
.topbar{
  height:112px;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,231,166,.22), rgba(255,231,166,0) 60%),
    linear-gradient(var(--dark1),var(--dark2));
  border-bottom:1px solid rgba(0,0,0,.70);
  position:relative;
}
.topbar:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(255,231,166,.14);
}
.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;
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
}
.logo{
  font-size:28px;font-weight:bold;letter-spacing:1px;
  color:var(--ink);text-shadow:0 2px 0 rgba(0,0,0,.55);
  white-space:nowrap;
}
.logo strong{color:var(--gold1);text-shadow:0 0 14px rgba(255,231,166,.22)}

/* login */
.topbar-login{margin-left:auto;font-size:12px;color:rgba(246,240,226,.92);white-space:nowrap;padding-top:2px}
.topbar-login .lbl{color:rgba(246,240,226,.92);font-weight:bold;margin-left:6px}
.topbar-login .lbl:first-child{margin-left:0}
.topbar-login input{
  height:24px;width:140px;font-size:11px;
  padding:2px 8px;margin:0 6px 0 4px;
  border:1px solid rgba(255,231,166,.30);
  background:linear-gradient(#4b3825,#261b11);
  color:var(--ink);outline:none;border-radius:10px;
}
.topbar-login input:focus{border-color:rgba(255,231,166,.70);box-shadow:0 0 0 2px rgba(255,231,166,.14)}
.topbar-login button{
  height:24px;width:30px;font-size:11px;cursor:pointer;
  border:1px solid rgba(217,180,95,.98);
  border-radius:10px;
  background:linear-gradient(var(--gold1),var(--gold2));
  color:#241a0e;font-weight:bold;
}
.topbar-login button:hover{background:linear-gradient(#fff6d6,#d9b25b)}

/* ===== Nav ===== */
.nav{
  min-height:46px;height:auto;
  background:linear-gradient(#2b2016,#120e09);
  border-bottom:1px solid rgba(0,0,0,.70);
  position:relative;
  padding:8px 12px 10px;
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
}
.nav:before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:rgba(255,231,166,.14)}
.nav:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:linear-gradient(90deg,rgba(255,231,166,.08),rgba(255,231,166,.26),rgba(255,231,166,.08))}
.nav-tabs{text-align:center;flex:1 1 560px}

.nav a{
  display:inline-block;position:relative;
  height:28px;line-height:28px;
  margin:0 6px;padding:0 16px;
  color:rgba(246,240,226,.86);
  font-weight:bold;font-size:12px;letter-spacing:.5px;
  border:1px solid rgba(255,231,166,.22);
  border-bottom:0;border-radius:10px 10px 0 0;
  background:linear-gradient(rgba(92,70,48,.70),rgba(26,19,13,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.nav a:hover{color:#fff6d6;background:linear-gradient(rgba(118,90,58,.80),rgba(26,19,13,.84));border-color:rgba(255,231,166,.34)}
.nav a.active{
  color:#241a0e;
  border-color:rgba(217,180,95,.98);
  background:linear-gradient(var(--gold1),var(--gold2));
  text-shadow:0 1px 0 rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50),0 -1px 0 rgba(217,180,95,.25);
}
.nav a.active:after{
  content:"";position:absolute;left:6px;right:6px;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--gold3),#fff6d6,var(--gold3));opacity:.95;
}

/* search */
.nav-search{margin-left:auto}
.nav-search form{display:flex;gap:6px;align-items:center}
.nav-search input{
  width:240px;height:28px;padding:4px 10px;border-radius:12px;
  border:1px solid rgba(255,231,166,.30);
  background:rgba(0,0,0,.10);
  color:var(--ink);outline:none;
}
.nav-search input:focus{border-color:rgba(255,231,166,.70);box-shadow:0 0 0 2px rgba(255,231,166,.14)}
.nav-search button{
  width:38px;height:28px;border-radius:12px;
  border:1px solid rgba(217,180,95,.98);
  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(#fff6d6,#d9b25b)}

/* ===== Content frame ===== */
#portal-content{
  margin:12px;padding:12px;
  border:1px solid rgba(255,231,166,.28);
  background:
    radial-gradient(circle at 12px 12px, rgba(255,231,166,.60) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at calc(100% - 12px) 12px, rgba(255,231,166,.60) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at 12px calc(100% - 12px), rgba(255,231,166,.60) 0 2px, rgba(0,0,0,0) 3px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), rgba(255,231,166,.60) 0 2px, rgba(0,0,0,0) 3px),
    linear-gradient(rgba(128,98,66,.52),rgba(66,50,34,.62));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.40),0 10px 26px rgba(0,0,0,.34);
}

/* ===== Sections ===== */
.section{
  border:1px solid rgba(255,231,166,.28);
  background:linear-gradient(var(--panelA),var(--panelB));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  margin-bottom:10px;
}
.section h1,.section h2{
  height:30px;line-height:30px;
  padding-left:10px;
  font-size:12px;font-weight:bold;letter-spacing:.5px;
  color:var(--ink);
  background:linear-gradient(#4c3721,#21150c);
  border-bottom:1px solid rgba(0,0,0,.70);
  position:relative;
  text-shadow:0 1px 0 rgba(0,0,0,.70);
}
.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:.88;
}
.section p{padding:10px;color:var(--muted)}
.subtitle{
  padding:8px 10px;
  border-bottom:1px solid rgba(255,231,166,.18);
  background:linear-gradient(rgba(140,106,72,.50),rgba(66,50,34,.60));
  color:var(--muted);
}

/* ===== Top panel (pergamin) ===== */
.top-panel{
  display:table;width:100%;table-layout:fixed;border-collapse:collapse;
  border:1px solid rgba(217,180,95,.70);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,231,166,.20), rgba(0,0,0,0) 60%),
    linear-gradient(rgba(255,250,242,.62), rgba(241,224,194,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px rgba(0,0,0,.22);
  margin-bottom:10px;
}
.top-panel .box{
  display:table-cell;vertical-align:top;padding:10px 12px;position:relative;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,231,166,.22), rgba(0,0,0,0) 58%),
    linear-gradient(var(--paperA),var(--paperB));
  color:var(--paperInk);
  border-left:1px solid var(--paperLine2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70),inset 0 0 0 1px rgba(0,0,0,.04);
}
.top-panel .box:first-child{border-left:0}

/* wymuszone proporcje (zawsze 3 kolumny) */
.top-panel .box.promoted{width:42%}
.top-panel .box.stats{width:28%}
.top-panel .box.sponsor{width:30%}
/* kompatybilność jeśli gdzieś zostanie stara klasa */
.top-panel .box.ad{width:30%}

.top-panel .box h3{
  height:24px;line-height:24px;
  margin:-10px -12px 10px -12px;padding-left:10px;
  font-size:12px;font-weight:bold;letter-spacing:.4px;
  color:var(--paperInk);
  background:linear-gradient(var(--paperA),var(--paperC));
  border-bottom:1px solid var(--paperLine2);
  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:.95;
}
.box-meta{margin-top:6px;font-size:12px;line-height:1.35;color:var(--paperMuted)}
.stats-list{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.45;color:var(--paperMuted)}
.stats-list li{padding:2px 0}
.top-panel a{color:#6f4b1a;font-weight:bold}
.top-panel a:hover{color:#2b1d12;text-decoration:underline}
.top-panel .box.promoted{
  border:1px solid rgba(217,180,95,.95);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,231,166,.35), rgba(0,0,0,0) 62%),
    linear-gradient(rgba(255,252,246,.92), rgba(240,220,178,.96));
  box-shadow:inset 0 0 0 1px rgba(255,231,166,.22),0 0 18px rgba(255,231,166,.12);
}
.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(217,180,95,.98);
  border-radius:10px;background:linear-gradient(var(--gold1),var(--gold2));
  color:#241a0e;
}

/* Sponsor placeholder (nowe) + kompatybilność dla starego .ad-placeholder */
.sponsor-placeholder,
.ad-placeholder{
  border:1px dashed rgba(138,103,33,.45);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,231,166,.22), rgba(0,0,0,0) 58%),
    linear-gradient(rgba(255,252,246,.82), rgba(241,224,194,.86));
  color:var(--paperMuted);
  text-align:center;padding:18px 10px;font-size:12px;border-radius:12px;
}

/* ===== Ranking table ===== */
.ranking{width:100%;border-collapse:collapse;font-size:12px}

/* header: twardszy + złote linie */
.ranking thead th{
  background:linear-gradient(var(--tblHeadA),var(--tblHeadB));
  border:1px solid rgba(255,231,166,.30);
  height:26px;padding:0;
  color:#fff6d6;font-weight:bold;white-space:nowrap;text-align:left;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(255,231,166,.18);
}
.ranking thead th:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,rgba(255,231,166,.08),rgba(255,231,166,.32),rgba(255,231,166,.08));
}
.ranking thead th a{
  display:block;width:100%;height:26px;line-height:22px;
  padding:2px 8px;color:#fff6d6;text-decoration:none;cursor:pointer;
}
.ranking thead th a:hover{background:rgba(255,231,166,.14)}

/* rows */
.ranking tbody td{
  border:1px solid rgba(138,103,33,.22);
  padding:5px 8px;vertical-align:middle;
  background:var(--tblCellA);color:var(--paperInk);
}
.ranking tbody tr:nth-child(even) td{background:var(--tblCellB)}
.ranking tbody tr:hover td{
  background:var(--tblHover);
  color:var(--paperInk);
  box-shadow:inset 0 0 0 1px var(--tblHoverLine), inset 0 10px 16px rgba(255,255,255,.10);
}

/* ukryj ewentualne ikonki/badge featured przy nazwie */
.ranking .badge.featured,
.ranking .featured-badge,
.ranking .featured-tag,
.ranking .tag-featured{display:none!important}

/* FEATURED – “WOW” */
.ranking tr.featured td{
  background:
    radial-gradient(circle at 22% 18%, rgba(255,231,166,.32), rgba(0,0,0,0) 62%),
    linear-gradient(var(--bronzeA),var(--bronzeB)) !important;

  color:var(--gold1) !important;
  border-top:2px solid rgba(217,180,95,.96) !important;
  border-bottom:2px solid rgba(217,180,95,.96) !important;
  border-left:1px solid rgba(217,180,95,.66) !important;
  border-right:1px solid rgba(217,180,95,.44) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,231,166,.34),
    inset 0 14px 18px rgba(255,255,255,.06),
    0 0 38px rgba(255,231,166,.18);
  position:relative;
}
.ranking tr.featured td:after{
  content:"";
  position:absolute;left:4px;right:4px;top:3px;bottom:3px;
  border:1px solid rgba(255,231,166,.30);
  border-radius:6px;
  pointer-events:none;
}
.ranking tr.featured:hover td{
  background:
    radial-gradient(circle at 22% 18%, rgba(255,231,166,.36), rgba(0,0,0,0) 62%),
    linear-gradient(var(--bronzeHoverA),var(--bronzeHoverB)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,231,166,.40),
    inset 0 14px 18px rgba(255,255,255,.07),
    0 0 48px rgba(255,231,166,.20);
}
.ranking tr.featured td:first-child:before{
  content:"";
  position:absolute;left:-2px;top:-2px;bottom:-2px;width:10px;
  background:linear-gradient(#fff6d6,var(--gold2),var(--gold3));
  box-shadow:0 0 18px rgba(255,231,166,.24);
}

/* złote linki/tekst w featured */
.ranking tr.featured a{color:var(--gold1)!important;text-shadow:0 1px 0 rgba(0,0,0,.45)}
.ranking tr.featured a:hover{color:#fff6d6!important;text-decoration:underline}
.ranking tr.featured .server-sub,
.ranking tr.featured td small{color:rgba(255,246,214,.94)!important}
.ranking tr.featured .badge{
  border-color:rgba(255,231,166,.40)!important;
  box-shadow:0 0 0 1px rgba(255,231,166,.14), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Server column */
.server-col{padding-top:2px;padding-bottom:2px}
.server-title a{font-weight:bold;color:#5b3a18}
.server-title a:hover{color:var(--gold3);text-decoration:underline}
.server-sub{margin-top:2px;font-size:11px;color:var(--paperMuted)}
.server-sub .sub-item + .sub-item:before{content:" • ";color:rgba(138,103,33,.70)}

/* online bar */
.online-bar{
  width:100%;height:8px;
  border:1px solid rgba(138,103,33,.28);
  background:rgba(0,0,0,.06);
  margin-bottom:2px;overflow:hidden;border-radius:4px;
}
.online-bar .fill{height:100%}
.online-bar .fill.low{background:linear-gradient(#c45a49,#8f2f22)}
.online-bar .fill.medium{background:linear-gradient(#d7a13b,#b17315)}
.online-bar .fill.high{background:linear-gradient(#49a049,#2f5e2f)}

.ranking td small{display:block;margin-top:1px;font-size:11px;color:rgba(75,54,37,.92)}

.exp-badge{
  display:inline-block;padding:1px 6px;border-radius:10px;
  border:1px solid rgba(138,103,33,.32);
  background:rgba(0,0,0,.08);
  font-size:11px;font-weight:bold;color:#2b1d12;
}

/* buttons/badges/forms (bezpiecznie, używane na innych podstronach) */
.btn{
  display:inline-block;padding:6px 10px;font-size:12px;line-height:1;font-weight:bold;
  border-radius:10px;border:1px solid rgba(255,231,166,.26);
  background:rgba(0,0,0,.08);color:var(--ink);cursor:pointer;text-decoration:none;
}
.btn:hover{background:rgba(255,231,166,.16);color:#fff6d6}
.btn.small{padding:4px 8px;font-size:11px}
.btn.primary{
  border-color:rgba(217,180,95,.98);
  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(#fff6d6,#d9b25b);color:#241a0e}
.btn.outline{background:transparent;border-color:rgba(217,180,95,.70);color:var(--gold1)}
.btn.outline:hover{background:rgba(255,231,166,.16)}

.badge{
  display:inline-block;padding:1px 6px;font-size:11px;border-radius:10px;
  border:1px solid rgba(255,231,166,.26);
  background:rgba(0,0,0,.08);
  color:rgba(246,240,226,.86);
}
.badge.online{border-color:rgba(73,160,73,.70);background:rgba(73,160,73,.18);color:#d6f2d0}

input[type="text"],input[type="number"],input[type="password"],textarea,select{
  border:1px solid rgba(255,231,166,.26);
  background:rgba(0,0,0,.08);
  color:var(--ink);
  padding:6px 8px;border-radius:12px;font-size:12px;outline:none;
}
textarea{width:100%}
input:focus,textarea:focus,select:focus{border-color:rgba(255,231,166,.70);box-shadow:0 0 0 2px rgba(255,231,166,.14)}

/* footer */
.footer{
  height:36px;line-height:36px;
  color:rgba(246,240,226,.86);
  font-size:12px;
  background:linear-gradient(#2b2016,#120e09);
  border-top:1px solid rgba(0,0,0,.70);
  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:.88;
}
.footer-inner{padding:0 15px}
.footer-links{float:right}
.footer a{color:rgba(246,240,226,.82)}
.footer a:hover{color:#fff6d6}

/* Force the same font stack everywhere (including icons in ::before/::after) */
body * ,
body *::before,
body *::after{
  font-family: inherit !important;
}