/* =====================================================================
   GhostTown MU — szablon WebEngine 1.2.6  (projekt 1:1 z naszego React CMS)
   ===================================================================== */

:root{
  --bg:#070d16; --bg2:#0a1320; --panel:#0e1a28; --panel2:#0b1622;
  --line:#1c3a52; --line2:#2f6f9e;
  --accent:#39b6e6; --accent2:#7fe3ff; --grad:linear-gradient(180deg,#7fe3ff,#39b6e6);
  --txt:#cfe2f1; --muted:#7d93a8; --head:#dff1ff; --gold:#c8a87a;
  --online:#3ddc84; --offline:#e0556b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'PT Sans',system-ui,Arial,sans-serif;
  font-size:14px; line-height:1.5;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent2)}
h1,h2,h3,h4{font-family:'Cinzel',serif;color:var(--head);margin:0}
sup{font-size:9px;color:var(--gold)}

/* hide WebEngine default chrome if any leaks */
.global-top-bar,.header-info-container,#navbar,#header{display:none!important}

/* ======================= HEADER ======================= */
.gt-header{
  position:sticky;top:0;z-index:200;
  background:rgba(7,13,22,.86);
  border-bottom:1px solid rgba(28,58,82,.6);
  backdrop-filter:blur(10px);
}
.gt-header-in{
  max-width:1360px;margin:0 auto;padding:0 26px;height:68px;
  display:flex;align-items:center;gap:30px;
}
.gt-brand{
  font-family:'Cinzel',serif;font-weight:900;font-size:24px;letter-spacing:.06em;
  color:#fff;white-space:nowrap;
}
.gt-brand span{color:var(--accent)}
.gt-nav{flex:1}
.gt-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.gt-nav a{
  color:#cdddec;font-family:'Cinzel',serif;font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 0;
  border-bottom:2px solid transparent;
}
.gt-nav a:hover{color:var(--accent2);border-bottom-color:var(--accent)}
.gt-actions{display:flex;align-items:center;gap:14px;white-space:nowrap}
.gt-online{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:7px}
.gt-dot{width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 8px var(--online);display:inline-block}
.gt-user{color:var(--head);font-weight:700}
.gt-btn{
  display:inline-block;padding:9px 18px;border-radius:6px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;font-family:'Cinzel',serif;
}
.gt-btn-ghost{border:1px solid var(--line);color:#cfe2f1!important}
.gt-btn-ghost:hover{border-color:var(--accent);color:var(--accent2)!important}
.gt-btn-primary{background:var(--grad);color:#04121d!important;box-shadow:0 3px 14px rgba(57,182,230,.4)}
.gt-btn-primary:hover{filter:brightness(1.08);color:#04121d!important}
/* language */
.gt-lang{position:relative}
.gt-lang-btn{background:transparent;border:1px solid var(--line);color:#cfe2f1;border-radius:6px;padding:8px 12px;font-size:12px;cursor:pointer}
.gt-lang-menu{display:none;position:absolute;right:0;top:110%;min-width:140px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;list-style:none;margin:0;z-index:50;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.gt-lang.open .gt-lang-menu{display:block}
.gt-lang-menu a{display:block;padding:8px 10px;border-radius:5px;color:#cfe2f1}
.gt-lang-menu a:hover{background:rgba(57,182,230,.1);color:var(--accent2)}

/* ======================= HERO ======================= */
.gt-hero{
  position:relative;height:380px;margin-top:-68px;padding-top:68px;
  background:url('../img/gt/home/bg.jpg') center top/cover no-repeat,var(--bg2);
  display:flex;align-items:center;justify-content:center;
}
.gt-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(180deg,transparent,var(--bg));
}
.gt-hero-logo{position:relative;z-index:2;max-height:150px;width:auto;
  filter:drop-shadow(0 6px 26px rgba(57,182,230,.55))}
.gt-inner .gt-hero{height:210px}

/* ======================= 3-COLUMN SHELL ======================= */
.gt-wrap{max-width:1360px;margin:0 auto;padding:0 26px 70px;position:relative;z-index:5}
.gt-shell{
  margin-top:-120px;
  display:grid;grid-template-columns:330px minmax(0,1fr) 330px;gap:24px;align-items:start;
}
.gt-col{display:flex;flex-direction:column;gap:24px;min-width:0}
@media(max-width:1180px){
  .gt-shell{grid-template-columns:1fr}
  .gt-center{order:-1}
}

/* ======================= BOX (crown frame) ======================= */
.gt-box{
  position:relative;
  background:linear-gradient(180deg,rgba(16,30,46,.96),rgba(9,18,30,.96));
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(127,227,255,.06);
}
.gt-box--crown::before,
.gt-box--crown::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:60%;height:14px;pointer-events:none;
}
.gt-box--crown::before{
  top:-1px;
  background:
    radial-gradient(circle at 50% 0,var(--accent) 0,transparent 60%) center/14px 14px no-repeat,
    linear-gradient(90deg,transparent,var(--line2),transparent);
  opacity:.9;
}
.gt-box--crown::after{
  bottom:-1px;
  background:linear-gradient(90deg,transparent,var(--line2),transparent);
  opacity:.6;
}
.gt-box-bd{padding:22px 22px 24px}
.gt-box-title{
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--head);
  padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid rgba(57,182,230,.28);
  position:relative;
}
.gt-box-title::before{
  content:'';position:absolute;left:0;top:1px;width:3px;height:15px;background:var(--accent);
  box-shadow:0 0 8px var(--accent);border-radius:2px;
}
.gt-box-head{display:flex;align-items:flex-end;justify-content:space-between;
  border-bottom:1px solid rgba(57,182,230,.28);margin-bottom:12px;padding-bottom:10px}
.gt-box-head .gt-box-title{border:0;padding:0;margin:0}
.gt-box-more{font-size:12px;color:var(--accent);font-family:'PT Sans',sans-serif}

/* ======================= LEFT: login / ucp ======================= */
.gt-login{display:flex;flex-direction:column;gap:8px}
.gt-login label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.gt-login input{
  width:100%;background:var(--panel2);border:1px solid var(--line);color:#eaf4fb;
  border-radius:7px;padding:11px 13px;font-size:14px;
}
.gt-login input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(57,182,230,.18)}
.gt-login-foot{display:flex;justify-content:space-between;font-size:12px;margin-top:4px}
.gt-login-foot a{color:var(--muted)}
.gt-login-foot a:hover{color:var(--accent)}
.gt-btn-wide{
  display:block;width:100%;margin-top:14px;padding:13px;border:0;border-radius:8px;cursor:pointer;
  background:var(--grad);color:#04121d;font-family:'Cinzel',serif;font-weight:800;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  box-shadow:0 5px 18px rgba(57,182,230,.42);
}
.gt-btn-wide:hover{filter:brightness(1.08);color:#04121d}

/* UserCP menu */
.gt-ucp ul{list-style:none;margin:0;padding:0}
.gt-ucp li{margin:3px 0}
.gt-ucp a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:7px;
  color:#cfe2f1;font-weight:600;border:1px solid transparent}
.gt-ucp a::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);
  opacity:.85;flex:0 0 auto;box-shadow:0 0 6px var(--accent)}
.gt-ucp a:hover{background:rgba(57,182,230,.08);color:var(--accent2)}
.gt-ucp li.active a,.gt-ucp a.active{background:rgba(57,182,230,.14);color:var(--accent2);border-color:rgba(57,182,230,.3)}

/* ======================= RANK TABLES ======================= */
.gt-rank{width:100%;border-collapse:collapse;font-size:13px}
.gt-rank th{
  text-align:left;color:var(--muted);font-family:'PT Sans',sans-serif;font-weight:600;
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  padding:0 6px 9px;border-bottom:1px solid rgba(28,58,82,.5);
}
.gt-rank th.r{text-align:right}
.gt-rank td{padding:8px 6px;border-bottom:1px solid rgba(28,58,82,.28)}
.gt-rank tr:last-child td{border-bottom:0}
.gt-rank td.p{color:var(--gold);font-family:'Cinzel',serif;font-weight:700;width:22px}
.gt-rank td.c{font-weight:700;font-size:12px}
.gt-rank td.r{text-align:right;color:var(--accent2);font-weight:700;white-space:nowrap}
.gt-rank td.n a{color:#eaf4fb}
.gt-rank td.n a:hover{color:var(--accent2)}
.gt-rank td.m img{border-radius:4px;border:1px solid var(--line)}
.gt-rank .empty{color:var(--muted);text-align:center;font-style:italic;padding:18px}

/* ======================= RIGHT: join / server ======================= */
.gt-joinus{position:relative;display:block;min-height:210px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);
  background:url('../img/gt/home/joinus.png') center/cover no-repeat,var(--panel)}
.gt-joinus-title{position:absolute;top:22px;left:24px;color:var(--gold);font-family:'Cinzel',serif;
  font-size:20px;line-height:1.15;text-transform:uppercase;font-weight:800;
  text-shadow:0 2px 12px rgba(0,0,0,.85)}
.gt-joinus-btn{position:absolute;bottom:22px;left:24px;max-width:62%;
  filter:drop-shadow(0 4px 12px rgba(57,182,230,.45))}

.gt-srv-row{display:flex;align-items:center;gap:10px;padding:11px 13px;margin-bottom:12px;
  background:rgba(11,22,34,.6);border:1px solid var(--line);border-radius:8px}
.gt-srv-name{color:var(--head);font-weight:700}
.gt-srv-on{margin-left:auto;color:var(--online);font-weight:700;font-size:13px}
.gt-srv-table{width:100%;border-collapse:collapse}
.gt-srv-table td{padding:10px 4px;color:var(--muted);border-bottom:1px solid rgba(28,58,82,.32);font-size:13px}
.gt-srv-table tr:last-child td{border-bottom:0}
.gt-srv-table td.v{text-align:right;color:#eaf4fb;font-weight:700}
.gt-srv-table td.v.on{color:var(--online)}

.gt-clock{font-family:'Cinzel',serif;font-size:30px;color:var(--accent2);text-align:center;
  letter-spacing:.05em;text-shadow:0 0 16px rgba(57,182,230,.45);margin-bottom:14px}
.gt-events{list-style:none;margin:0;padding:0}
.gt-events li{display:flex;justify-content:space-between;padding:9px 2px;
  border-bottom:1px solid rgba(28,58,82,.3);font-size:13px}
.gt-events li:last-child{border-bottom:0}
.gt-events span{color:var(--muted)}
.gt-events time{color:var(--gold);font-weight:700}

/* ======================= CENTER: slider + news ======================= */
.gt-center{gap:24px}
.gt-slider{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  min-height:300px;background:var(--panel)}
.gt-slide{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;
  background:url('../img/gt/home/bg.jpg') center/cover no-repeat}
.gt-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gt-slide-cap{position:relative;z-index:2;text-align:center;padding:30px}
.gt-slide-cap h2{font-size:48px;font-weight:900;color:#fff;text-shadow:0 4px 22px rgba(0,0,0,.8);letter-spacing:.04em}
.gt-slide-cap h2 span{color:var(--accent2)}
.gt-slide-cap p{margin:10px 0 0;color:#cfe2f1;letter-spacing:.22em;text-transform:uppercase;font-size:13px}

.gt-news{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(16,30,46,.96),rgba(9,18,30,.96))}
.gt-news-head{display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;background:linear-gradient(180deg,#112030,#0e1a28);
  border-bottom:1px solid var(--line)}
.gt-news-head h2{font-size:17px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.gt-news-head h2::before{content:'';width:4px;height:18px;background:var(--accent);box-shadow:0 0 12px var(--accent);border-radius:2px}
.gt-news-head a{font-size:13px;color:var(--accent);font-family:'PT Sans',sans-serif}
.gt-news-row{display:grid;grid-template-columns:78px 1fr 96px;align-items:center;gap:16px;
  padding:16px 24px;border-bottom:1px solid rgba(28,58,82,.3);color:#cfe2f1}
.gt-news-row:last-child{border-bottom:0}
.gt-news-row:hover{background:rgba(57,182,230,.06)}
.gt-news-tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(200,168,122,.4);border-radius:4px;padding:4px 0;text-align:center}
.gt-news-title{color:var(--head);font-weight:600}
.gt-news-row:hover .gt-news-title{color:var(--accent2)}
.gt-news-date{color:var(--muted);font-size:12px;text-align:right}
.gt-news-empty{padding:40px;text-align:center;color:var(--muted);font-style:italic}

/* ======================= CENTER: module content ======================= */
.gt-module{
  background:linear-gradient(180deg,rgba(16,30,46,.96),rgba(9,18,30,.96));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:420px;
}
.gt-module .page-title,.gt-module h2.title,.gt-module .module-title{
  margin:0!important;padding:20px 26px!important;
  background:linear-gradient(180deg,#112030,#0e1a28)!important;color:var(--head)!important;
  font-family:'Cinzel',serif!important;font-size:17px!important;letter-spacing:.12em!important;
  text-transform:uppercase!important;border-bottom:1px solid var(--line)!important;
}
.gt-module .panel,.gt-module .panel-sidebar,.gt-module .panel-news,.gt-module .panel-general,
.gt-module .panel-usercp,.gt-module .panel-downloads,.gt-module .home-news-block{
  background:rgba(11,22,34,.5)!important;border:1px solid rgba(28,58,82,.5)!important;
  border-radius:8px!important;box-shadow:none!important;margin:16px!important;
}
.gt-module .panel-heading{background:linear-gradient(180deg,#112030,#0e1a28)!important;
  border-bottom:1px solid var(--line)!important;border-radius:8px 8px 0 0!important;padding:13px 16px!important}
.gt-module .panel-title,.gt-module .panel-heading h3{color:var(--head)!important;
  font-family:'Cinzel',serif!important;text-transform:uppercase!important;font-size:14px!important;letter-spacing:.08em!important;margin:0!important}
.gt-module .panel-body{padding:16px!important;color:#cfe2f1}
.gt-module table{width:100%;border-collapse:collapse;color:#eaf4fb}
.gt-module th{background:transparent!important;color:var(--muted)!important;font-family:'Cinzel',serif;
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:12px 14px!important;
  border-bottom:1px solid var(--line)!important;text-align:left}
.gt-module td{padding:11px 14px!important;border-bottom:1px solid rgba(28,58,82,.3)!important}
.gt-module tr:hover td{background:rgba(57,182,230,.05)!important}
.gt-module input[type=text],.gt-module input[type=password],.gt-module input[type=email],
.gt-module input[type=number],.gt-module select,.gt-module textarea{
  background:var(--panel2)!important;border:1px solid var(--line)!important;color:#eaf4fb!important;
  border-radius:7px!important;padding:11px 13px!important}
.gt-module .btn,.gt-module button,.gt-module input[type=submit],.gt-module .btn-primary{
  background:var(--grad)!important;color:#04121d!important;border:0!important;border-radius:7px!important;
  padding:10px 18px!important;font-family:'Cinzel',serif!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:.05em!important;box-shadow:0 3px 12px rgba(57,182,230,.35)!important}
.gt-module .btn:hover,.gt-module button:hover{filter:brightness(1.08)}
.gt-module .btn-xs{padding:5px 10px!important;font-size:11px!important}
.gt-module .row{margin:0!important}
.gt-module .row::before,.gt-module .row::after{display:none!important}

/* ======================= FOOTER ======================= */
.gt-footer{background:rgba(5,9,16,.95);border-top:1px solid var(--line);margin-top:50px}
.gt-footer-in{max-width:1360px;margin:0 auto;padding:24px 26px;display:flex;justify-content:space-between;
  color:var(--muted);font-size:13px;flex-wrap:wrap;gap:10px}
.gt-footer-powered{color:var(--muted)}

/* =====================================================================
   v11 — RAMKI KORON PNG (1:1 z React IceBox) + szerokosci kolumn
   ===================================================================== */

/* kolumny dokladnie jak React: 346 / 1fr / 346, gap 20 */
.gt-shell{grid-template-columns:346px minmax(0,1fr) 346px;gap:20px;margin-top:-130px}

/* ramka = pelny PNG (korona + ornamenty), rozciagany 100% 100% jak w React */
.gt-box--frame{
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  background-repeat:no-repeat!important;background-position:center!important;background-size:100% 100%!important;
}
.gt-box--frame::before,.gt-box--frame::after{display:none!important}
.gt-box--userpanel{background-image:url('../img/gt/home/box-userpanel.png')!important}
.gt-box--top{background-image:url('../img/gt/home/box-top.png')!important}
.gt-box--status{background-image:url('../img/gt/home/box-status.png')!important}
.gt-box--time{background-image:url('../img/gt/home/box-servertime.png')!important}

/* padding wewnatrz ramki — odsuwa tresc od korony (gora) i ornamentow (dol/boki) */
.gt-box--frame .gt-box-bd{padding:48px 34px 50px}

/* tytul w ramce — jak React ice-box-head */
.gt-box--frame .gt-box-title,
.gt-box--frame .gt-box-head{border-bottom:1px solid rgba(95,160,205,.22)}

/* Join now — ramka tez ma korone? Nie; zostaje obrazek joinus.png */

/* =====================================================================
   v12 — UserCP menu (male ikony), Castle Siege box, profil/moduly oddech
   ===================================================================== */

/* UserCP menu: realna struktura <li><img><a> */
.gt-ucp ul{list-style:none;margin:0;padding:0}
.gt-ucp li{display:flex;align-items:center;gap:12px;margin:4px 0;padding:9px 12px;border-radius:8px;
  border:1px solid transparent;transition:all .15s}
.gt-ucp li:hover{background:rgba(57,182,230,.08);border-color:rgba(57,182,230,.25)}
.gt-ucp li img{width:26px;height:26px;object-fit:contain;border-radius:6px;flex:0 0 auto;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.gt-ucp li a{color:#cfe2f1;font-weight:600;font-size:14px;flex:1}
.gt-ucp li a::before{display:none}
.gt-ucp li:hover a{color:var(--accent2)}

/* Castle Siege widget w lewej kolumnie */
.gt-castle{font-size:13px;color:#cfe2f1}
.gt-castle .panel,.gt-castle .panel-body,.gt-castle .panel-heading{
  background:transparent!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important}
.gt-castle .panel-title{display:none}
.gt-castle img{margin:0 auto 10px;border:1px solid var(--line);border-radius:8px}
.gt-castle .alt,.gt-castle .label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;margin-top:10px}
.gt-castle a{color:var(--accent2);font-weight:700}
.gt-castle .row{margin:0!important;text-align:center}
.gt-castle .btn,.gt-castle .btn-castlewidget{margin-top:14px;display:inline-block}

/* profil/moduly: lekki oddech + nie obcinamy */
.gt-module{padding-bottom:8px}
.we-prof-shell,.we-rnk-shell{padding:18px!important}

/* =====================================================================
   v13 — poprawki z listy: hero, menu center, castle, players, footer
   ===================================================================== */

/* 7. MENU wysrodkowane */
.gt-header-in{gap:24px}
.gt-nav{flex:1;display:flex;justify-content:center}
.gt-nav ul{justify-content:center;gap:34px}

/* 1. HERO — wyzszy, pelna scena (nie splaszczony) */
.gt-hero{height:560px;background-position:center 20%}
.gt-hero-logo{max-height:170px}
.gt-inner .gt-hero{height:300px}
/* shell wjezdza mocniej na hero, jak React */
.gt-shell{margin-top:-150px}

/* 2. CASTLE SIEGE — kompaktowy (byl za wysoki) */
.gt-box--userpanel.gt-castlebox .gt-box-bd{padding:44px 30px 40px}
.gt-castle .row{margin-bottom:6px!important}
.gt-castle .alt,.gt-castle .label{margin-top:8px;font-size:10px}
.gt-castle img{width:64px!important;height:64px!important}
.gt-castle .btn,.gt-castle .btn-castlewidget{margin-top:12px;padding:9px 16px!important;font-size:11px!important}

/* 8. TOP PLAYERS — czytelna tabela (rowne kolumny, wyrownanie) */
.gt-box--top .gt-box-bd{padding:46px 26px 44px}
.gt-rank{table-layout:fixed}
.gt-rank th,.gt-rank td{padding:9px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-rank th:nth-child(1),.gt-rank td.p{width:26px;text-align:left}
.gt-rank td.n{font-weight:600}
.gt-rank td.n a{color:#eaf4fb}
.gt-rank td.c{width:54px;text-align:left}
.gt-rank th.r,.gt-rank td.r{width:70px;text-align:right}
.gt-rank thead th{font-size:10px;color:var(--muted)}

/* 5+6. FOOTER 3-kolumnowy (jak React) + zamkniecie strony */
.gt-footer{background:linear-gradient(180deg,rgba(5,9,16,.6),rgba(5,9,16,.98));
  border-top:1px solid var(--line);margin-top:70px;padding:0}
.gt-footer-in{max-width:1360px;margin:0 auto;padding:46px 26px 30px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.gt-foot-brand .gt-brand{font-size:22px;display:inline-block;margin-bottom:14px}
.gt-foot-brand p{color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 10px}
.gt-foot-copy{opacity:.7}
.gt-foot-col h4{font-family:'Cinzel',serif;color:var(--head);font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid rgba(57,182,230,.25)}
.gt-foot-col a{display:block;color:var(--muted);font-size:14px;padding:7px 0}
.gt-foot-col a:hover{color:var(--accent2)}
.gt-footer-bottom{border-top:1px solid rgba(28,58,82,.4);text-align:center;padding:18px;
  color:var(--muted);font-size:12px}
@media(max-width:1024px){.gt-footer-in{grid-template-columns:1fr;gap:24px}}

/* =====================================================================
   v14 — LOGIN MODAL (popup jak React)
   ===================================================================== */
.gt-modal{position:fixed;inset:0;z-index:1000;display:none}
.gt-modal.open{display:block}
.gt-modal-overlay{position:absolute;inset:0;background:rgba(3,7,13,.82);backdrop-filter:blur(4px)}
.gt-modal-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(940px,94vw);max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(180deg,#0e1a28,#0a1320);border:1px solid var(--line2);border-radius:16px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);overflow:hidden}
.gt-modal-x{position:absolute;top:14px;right:18px;z-index:3;background:transparent;border:0;color:#cfe2f1;
  font-size:28px;line-height:1;cursor:pointer;opacity:.8}
.gt-modal-x:hover{opacity:1;color:var(--accent2)}
.gt-modal-left{position:relative;padding:40px 34px;
  background:linear-gradient(180deg,rgba(10,19,32,.4),rgba(10,19,32,.85)),url('../img/gt/home/joinus.png') center/cover}
.gt-modal-left .gt-brand{font-size:22px}
.gt-modal-live{margin:16px 0 18px;color:var(--online);font-size:12px;font-weight:700;letter-spacing:.12em;display:flex;align-items:center;gap:8px}
.gt-modal-h{font-size:32px;line-height:1.1;color:#fff;margin:0 0 14px}
.gt-modal-left p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 22px}
.gt-modal-feats{list-style:none;margin:0;padding:0}
.gt-modal-feats li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid rgba(28,58,82,.4)}
.gt-modal-feats b{color:var(--head);font-size:14px}
.gt-modal-feats span{color:var(--muted);font-size:12px}
.gt-modal-right{padding:46px 40px}
.gt-modal-welcome{font-size:26px;color:#fff;margin:0 0 6px}
.gt-modal-sub{color:var(--muted);margin:0 0 24px;font-size:14px}
.gt-modal-form label{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 6px}
.gt-modal-form input[type=text],.gt-modal-form input[type=password]{width:100%;background:var(--panel2);
  border:1px solid var(--line);color:#eaf4fb;border-radius:8px;padding:13px 14px;font-size:14px}
.gt-modal-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(57,182,230,.2)}
.gt-modal-row{display:flex;justify-content:space-between;align-items:center;margin:16px 0;font-size:13px}
.gt-modal-remember{color:var(--muted);display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;margin:0}
.gt-modal-row a{color:var(--accent)}
.gt-modal-foot{text-align:center;color:var(--muted);margin:20px 0 0;font-size:14px}
.gt-modal-foot a{color:var(--accent2);font-weight:700}
@media(max-width:760px){.gt-modal-box{grid-template-columns:1fr}.gt-modal-left{display:none}}

/* =====================================================================
   v15 — TŁO CAŁEJ STRONY (jak React 'site'): bg.jpg fixed cover + gradient
   ===================================================================== */
body{
  background:
    linear-gradient(180deg, rgba(10,16,24,0.72), rgba(10,16,24,0.92)),
    url('../img/gt/home/bg.jpg') center top / cover fixed no-repeat,
    var(--bg) !important;
}
/* hero = przezroczysty odstęp (tło daje body), bez własnego obrazka i przyciecia */
.gt-hero{
  background:none !important;
  height:300px !important;
  margin-top:-68px;padding-top:68px;
}
.gt-hero::after{display:none !important}
.gt-inner .gt-hero{height:150px !important}
/* shell mniej wjeżdża, bo nie ma jasnego paska do zakrycia */
.gt-shell{margin-top:0 !important}

/* =====================================================================
   v16 — sekcja "Co nas wyroznia" + Play now (jak React FeaturesCta)
   ===================================================================== */
.gt-features{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:46px;align-items:stretch}
.gt-feat-left{background:rgba(11,22,34,.55);border:1px solid var(--line);border-radius:12px;padding:28px}
.gt-feat-h{font-size:20px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 20px;color:var(--head)}
.gt-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gt-feat-card{background:rgba(8,16,26,.6);border:1px solid rgba(28,58,82,.5);border-radius:10px;padding:18px}
.gt-feat-check{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;background:rgba(57,182,230,.15);border:1px solid rgba(57,182,230,.4);color:var(--accent2);
  font-size:16px;margin-bottom:12px}
.gt-feat-card h4{font-size:15px;letter-spacing:.05em;text-transform:uppercase;margin:0 0 6px;color:var(--head)}
.gt-feat-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.gt-feat-cta{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:40px;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none!important;
  background:linear-gradient(90deg,rgba(10,19,32,.92),rgba(10,19,32,.55)),url('../img/gt/home/joinus.png') right center/cover no-repeat}
.gt-feat-cta h3{font-size:26px;color:#fff;margin:0;letter-spacing:.04em;line-height:1.15}
.gt-feat-cta p{color:var(--muted);margin:0;font-size:15px}
.gt-feat-cta .gt-btn{align-self:flex-start;padding:13px 26px;font-size:13px;margin-top:6px}
@media(max-width:980px){.gt-features{grid-template-columns:1fr}.gt-feat-grid{grid-template-columns:1fr}}

/* =====================================================================
   v17 — newsy w stylu React (miniatura + excerpt + Read more)
   ===================================================================== */
.gt-news-list{padding:6px 0}
.gt-news-item{padding:22px 24px;border-bottom:1px solid rgba(28,58,82,.3)}
.gt-news-item:last-child{border-bottom:0}
.gt-news-h{font-family:'Cinzel',serif;font-size:19px;letter-spacing:.03em;margin:0 0 14px}
.gt-news-h a{color:var(--head)}
.gt-news-h a:hover{color:var(--accent2)}
.gt-news-thumb{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin:0 0 14px}
.gt-news-thumb img{width:100%;height:auto;display:block;transition:transform .3s}
.gt-news-thumb:hover img{transform:scale(1.03)}
.gt-news-excerpt{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 14px}
.gt-news-meta{display:flex;align-items:center;justify-content:space-between}
.gt-news-meta .gt-news-date{color:var(--muted);font-size:12px;letter-spacing:.05em}
.gt-news-more{display:inline-block;padding:9px 18px;border:1px solid var(--line);border-radius:6px;
  font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#cfe2f1!important}
.gt-news-more:hover{border-color:var(--accent);color:var(--accent2)!important;background:rgba(57,182,230,.06)}

/* =====================================================================
   v18 — TŁO 1:1 JAK REACT: bg.jpg 100% auto od góry, bez fixed/gradientu
   (React body: background-size:100% auto; position:top center; no-repeat)
   ===================================================================== */
body{
  background:#01121a !important;
  background-image:url('../img/gt/home/bg.jpg') !important;
  background-position:top center !important;
  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
}
/* header: gradient top-fade jak React (ciemny u góry -> przezroczysty) */
.gt-header{
  background:linear-gradient(180deg, rgba(6,18,29,.96) 0%, rgba(6,18,29,.68) 55%, rgba(6,18,29,.08) 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  backdrop-filter:blur(3px) !important;
}
/* hero = przezroczysty odstęp; bg.jpg (z logo) widać za nim. Wysokość jak w React */
.gt-hero{ background:none !important; height:540px !important; margin:0 !important; padding:0 !important; }
.gt-hero::after{ display:none !important; }
.gt-inner .gt-hero{ height:60px !important; }
.gt-shell{ margin-top:0 !important; }
/* boxy nieco bardziej matowe, żeby zakryć tło pod hero (jak React panele) */
.gt-content-wrap,.gt-module,.gt-news,.gt-features,.gt-feat-left{background-color:rgba(6,14,24,.92) !important}

/* =====================================================================
   v19 — TYPOGRAFIA + PRZYCISKI 1:1 z React
   Tokeny (realne, wyciągnięte z localhost:5173):
   body/nav/paragrafy/przyciski = Inter ; brand + nagłówki + box-title = Cinzel
   accent #39b6e6 ; btn primary grad #5fd0ff->#2f9fd0 tekst #04121d ;
   btn ghost bg rgba(11,24,37,.55) border rgba(127,227,255,.4) ; radius 4px
   ===================================================================== */
body{
  font-family:'Inter',system-ui,Arial,sans-serif !important;
  color:#dce8f2 !important; font-size:14px !important; line-height:20px !important;
}
p,.gt-castle,.gt-events,.gt-srv-table,.gt-rank,.gt-news-excerpt,.gt-modal-left p,.gt-modal-sub{
  font-family:'Inter',system-ui,sans-serif !important;
}
/* --- Cinzel: marka, nagłówki, tytuły kart --- */
.gt-brand,.gt-foot-brand .gt-brand{
  font-family:'Cinzel',Georgia,serif !important; font-weight:900 !important; letter-spacing:1.4px !important;
}
h1,h2,h3,h4,.gt-slide-cap h2,.gt-news-h,.gt-foot-col h4,.gt-feat-h,.gt-feat-card h4,
.gt-modal-h,.gt-modal-welcome,.gt-clock,.gt-news-head h2,.gt-module .page-title{
  font-family:'Cinzel',Georgia,serif !important;
}
/* tytuł karty dokładnie jak React: Cinzel 700 15px ls1.2px biały */
.gt-box-title{
  font-family:'Cinzel',Georgia,serif !important; font-weight:700 !important; font-size:15px !important;
  letter-spacing:1.2px !important; color:#fff !important; text-transform:uppercase !important;
}
/* --- NAV = Inter 600 15px uppercase rgba(255,255,255,.9), podkreślenie hover jako kolor --- */
.gt-nav a{
  font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important; font-size:15px !important;
  letter-spacing:.4px !important; text-transform:uppercase !important; color:rgba(255,255,255,.9) !important;
  border-bottom:0 !important; padding:6px 0 !important;
}
.gt-nav a:hover{ color:#7fe3ff !important; }
.gt-nav ul{ gap:30px !important; }
/* online: jaśniejszy tekst, zielona kropka (jak React) */
.gt-online{ color:rgba(255,255,255,.85) !important; font-size:14px !important; }
.gt-dot{ background:#3ddc84 !important; box-shadow:0 0 8px #3ddc84 !important; }
/* --- PRZYCISKI (header) = Inter, radius 4px, dokładne tła React --- */
.gt-btn{
  font-family:'Inter',system-ui,sans-serif !important; border-radius:4px !important;
  text-transform:none !important; letter-spacing:.2px !important; padding:9px 18px !important; font-size:14px !important;
}
.gt-btn-ghost{
  background:rgba(11,24,37,.55) !important; border:1px solid rgba(127,227,255,.4) !important;
  color:#fff !important; font-weight:600 !important;
}
.gt-btn-ghost:hover{ border-color:rgba(127,227,255,.7) !important; color:#fff !important; }
.gt-btn-primary{
  background:linear-gradient(180deg,#5fd0ff,#2f9fd0) !important; border:1px solid rgba(127,227,255,.55) !important;
  color:#04121d !important; font-weight:700 !important; box-shadow:none !important;
}
.gt-btn-primary:hover{ filter:brightness(1.06) !important; color:#04121d !important; }
/* --- pozostałe przyciski (wide/modal/module/news-more) też Inter, radius 4px --- */
.gt-btn-wide,.gt-news-more,.gt-module .btn,.gt-module button,.gt-module input[type=submit]{
  font-family:'Inter',system-ui,sans-serif !important; border-radius:4px !important;
}
.gt-btn-wide{ font-weight:700 !important; letter-spacing:.4px !important; }
.gt-news-more{ text-transform:none !important; letter-spacing:.2px !important; }
/* language button spójny z ghost */
.gt-lang-btn{ font-family:'Inter',system-ui,sans-serif !important; border-radius:4px !important; }
/* module: nagłówki tabel Inter (data-table look jak React), page-title zostaje Cinzel */
.gt-module th{ font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important; }
.gt-rank th{ font-family:'Inter',system-ui,sans-serif !important; font-weight:600 !important; }
.gt-box-more,.gt-news-head a,.gt-news-date,.gt-footer-in{ font-family:'Inter',system-ui,sans-serif !important; }

/* =====================================================================
   v20 — detale 1:1: etykiety Castle cyan, strzałki slidera,
   ozdobny przycisk READ MORE (btn-empty.png), marka gildii inline
   ===================================================================== */
/* Castle Siege — etykiety w kolorze akcentu (jak React: CASTLE OWNER/GUILD MASTER/STAGE cyan) */
.gt-castle .alt,.gt-castle .label,.gt-castle small,.gt-castle .castle-label,.gt-castle dt{
  color:#39b6e6 !important; font-weight:600 !important;
}
.gt-castle .gt-castle-val,.gt-castle b,.gt-castle strong,.gt-castle dd{ color:#eaf4fb !important; }
/* Slider — strzałki nawigacji jak React */
.gt-slide-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  color:rgba(255,255,255,.72);font-size:40px;line-height:1;cursor:pointer;user-select:none;
  padding:0 8px;text-shadow:0 2px 10px rgba(0,0,0,.65);transition:color .15s; }
.gt-slide-arrow:hover{ color:#7fe3ff; }
.gt-slide-prev{ left:12px; }
.gt-slide-next{ right:12px; }
/* READ MORE — ozdobny przycisk na ramce ice (btn-empty.png), tekst cyan-biały */
.gt-news-more{
  background:url('../img/gt/home/btn-empty.png') center/100% 100% no-repeat !important;
  border:0 !important; color:#dbeeff !important; padding:13px 34px !important; min-width:158px !important;
  text-align:center !important; font-weight:700 !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; text-shadow:0 1px 6px rgba(0,0,0,.6) !important;
}
.gt-news-more:hover{ color:#fff !important; filter:brightness(1.12) !important; background:url('../img/gt/home/btn-empty.png') center/100% 100% no-repeat !important; }
/* marka gildii inline w kolumnie Guild (jak React) */
.gt-gmark{ display:inline-block;vertical-align:middle;margin-right:8px;line-height:0; }
.gt-gmark img,.gt-gmark canvas{ width:16px;height:16px;border-radius:3px;border:1px solid var(--line);display:inline-block;vertical-align:middle; }
.gt-rank-guilds td.n{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.gt-rank-guilds td.c{ width:44px;text-align:center;color:var(--muted); }

/* =====================================================================
   v21 — MODUŁ RANKINGS: styl cyan/React (zamiast złotego equalizer)
   zakładki=pills cyan, filtry klas=pills, search=cyan, tabela=gt
   ===================================================================== */
.rnk-shell{ font-family:'Inter',system-ui,sans-serif !important; color:#cfe2f1 !important; font-size:14px !important; }
.rnk-title{ text-align:left !important; margin:0 0 18px !important; }
.rnk-title h1{ display:block !important; padding:0 !important; background:none !important; border:0 !important;
  font-family:'Cinzel',Georgia,serif !important; font-size:20px !important; font-weight:800 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important; color:#fff !important; }
/* zakładki = poziome cyan pills (nie grid złoty) */
.rnk-tabs{ display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  grid-template-columns:none !important; margin:0 0 12px !important; }
.rnk-tab{ padding:10px 18px !important; border-radius:4px !important; font-family:'Inter',sans-serif !important;
  font-size:13px !important; font-weight:600 !important; letter-spacing:.01em !important; text-transform:none !important;
  color:#cfe2f1 !important; background:rgba(11,24,37,.55) !important; border:1px solid rgba(28,58,82,.6) !important;
  box-shadow:none !important; }
.rnk-tab:hover{ color:#fff !important; border-color:rgba(127,227,255,.5) !important; background:rgba(16,32,48,.7) !important; }
.rnk-tab.active{ color:#04121d !important; background:linear-gradient(180deg,#5fd0ff,#2f9fd0) !important;
  border-color:rgba(127,227,255,.55) !important; box-shadow:none !important; }
/* filtry klas = pills */
.rnk-filter{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin:0 0 14px !important;
  padding:0 !important; background:none !important; border:0 !important; }
.rnk-filter a,.rnk-filter .rnk-class-btn{ display:inline-block !important; padding:7px 14px !important; border-radius:4px !important;
  font-family:'Inter',sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important;
  color:#9fb6c9 !important; background:rgba(11,22,34,.6) !important; border:1px solid rgba(28,58,82,.5) !important; }
.rnk-filter a:hover,.rnk-filter a.active,
.rnk-filter .rnk-class-btn:hover,.rnk-filter .rnk-class-btn.active{
  color:#04121d !important; background:linear-gradient(180deg,#5fd0ff,#2f9fd0) !important;
  border-color:rgba(127,227,255,.55) !important; }
/* search */
.rnk-search{ display:flex !important; gap:10px !important; padding:0 !important; background:none !important;
  border:0 !important; margin:0 0 16px !important; }
.rnk-search input{ flex:1 !important; background:var(--panel2) !important; border:1px solid var(--line) !important;
  color:#eaf4fb !important; border-radius:4px !important; padding:12px 14px !important;
  font-family:'Inter',sans-serif !important; font-size:14px !important; }
.rnk-search input:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(57,182,230,.18) !important; }
.rnk-search input::placeholder{ color:#5f7183 !important; }
.rnk-search button{ background:linear-gradient(180deg,#5fd0ff,#2f9fd0) !important; border:1px solid rgba(127,227,255,.55) !important;
  color:#04121d !important; border-radius:4px !important; padding:0 26px !important; font-family:'Inter',sans-serif !important;
  font-weight:700 !important; text-transform:none !important; letter-spacing:.01em !important; cursor:pointer !important; }
.rnk-search button:hover{ filter:brightness(1.06) !important; color:#04121d !important; }
/* tabela */
.rnk-table{ background:transparent !important; border:0 !important; }
.rnk-table thead tr{ background:transparent !important; border-bottom:1px solid var(--line) !important; }
.rnk-table thead th{ color:var(--muted) !important; font-family:'Inter',sans-serif !important; font-weight:600 !important;
  font-size:11px !important; letter-spacing:.06em !important; padding:12px 14px !important; }
.rnk-table thead th.center,.rnk-table td.center{ text-align:center !important; }
.rnk-table tbody tr{ border-bottom:1px solid rgba(28,58,82,.28) !important; }
.rnk-table tbody tr:nth-child(even){ background:rgba(11,22,34,.25) !important; }
.rnk-table tbody tr:hover,.rnk-table tbody tr:nth-child(even):hover{ background:rgba(57,182,230,.06) !important; }
.rnk-table tbody td{ color:#c3d3e2 !important; font-family:'Inter',sans-serif !important; font-size:13px !important;
  padding:10px 14px !important; }
.rnk-table a{ color:#eaf4fb !important; font-weight:600 !important; }
.rnk-table a:hover{ color:#7fe3ff !important; text-decoration:none !important; }
.rnk-place{ color:#5f7183 !important; text-align:center !important; }
.rnk-place-1{ color:#ffd700 !important; } .rnk-place-2{ color:#ccd6e0 !important; } .rnk-place-3{ color:#cd7f32 !important; }
.rnk-class-img{ width:26px !important; height:26px !important; border-radius:4px !important; vertical-align:middle !important; }
.rnk-guild-mark{ width:24px !important; height:24px !important; vertical-align:middle !important; }
.rnk-online{ color:#3ddc84 !important; font-weight:600 !important; } .rnk-offline{ color:#5a6b7a !important; }
.rnk-update-time{ color:#5f7183 !important; }

/* =====================================================================
   v23 — Server Status (Total Online box + wartosci cyan), Auth modal zakladki
   ===================================================================== */
.gt-srv-ico{ width:20px; height:20px; object-fit:contain; }
.gt-srv-table td.v{ color:#7fe3ff !important; }
.gt-srv-total{ display:flex; align-items:center; justify-content:space-between; margin-top:12px;
  padding:11px 14px; background:rgba(11,24,37,.6); border:1px solid rgba(28,58,82,.6); border-radius:8px; }
.gt-srv-total > span:first-child{ color:#cfe2f1; font-weight:700; font-size:13px; }
.gt-srv-total-v{ color:#7fe3ff; font-weight:800; font-family:'Cinzel',Georgia,serif; font-size:15px; }
/* Auth modal — zakladki Sign in / Register */
.gt-auth-tabs{ display:flex; border:1px solid rgba(28,58,82,.7); border-radius:6px; overflow:hidden; margin-bottom:22px; }
.gt-auth-tab{ flex:1; padding:12px 0; background:transparent; border:0; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:14px; color:#9fb4c6; transition:all .15s; }
.gt-auth-tab:hover{ color:#cfe2f1; }
.gt-auth-tab.active{ background:linear-gradient(180deg,#5fd0ff,#2f9fd0); color:#04121d; }
.gt-auth-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* zegar Server Time bialy (jak React), eventy zostaja zlote */
.gt-clock{ color:#ffffff !important; text-shadow:0 2px 10px rgba(0,0,0,.5) !important; }

/* =====================================================================
   v25 — DUZY PAKIET 1:1 z React:
   header 80px/1320px, panel+bar-head jak React, rankingi (tabs/filtry/
   search/tabela/paginacja), downloads (4 sekcje), profil gracza,
   profil gildii. Tokeny: surface #0e1a28, border #1e3a52,
   bar-head grad #163a55->#0d2235, tab-active grad #5fd0ff->#2f9fd0.
   ===================================================================== */

/* ── HEADER: 80px wysokosci, kontener 1320px (React h-20 / max-w-[1320px]) ── */
.gt-header-in{ height:80px !important; max-width:1320px !important; padding:0 16px !important; gap:16px !important; }
.gt-brand{ font-size:26px !important; }
.gt-nav ul{ gap:8px !important; }
.gt-nav a{ padding:8px 14px !important; border-radius:4px !important; }
.gt-wrap{ max-width:1320px !important; padding:0 16px 70px !important; }

/* ── PANEL React (.panel): rounded-md, border #1e3a52, bg #0e1a28/85 ── */
.gt-module{
  background:rgba(14,26,40,.85) !important; border:1px solid #1e3a52 !important;
  border-radius:6px !important; backdrop-filter:blur(4px);
  overflow:hidden !important; min-height:0 !important; padding-bottom:0 !important;
}
/* bar-head (React .bar-head): gradient + tytul Cinzel 15px bialy */
.gt-barhead{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 16px;
  background:linear-gradient(180deg,#163a55,#0d2235);
  border:1px solid rgba(95,160,205,.25); border-left:0; border-right:0; border-top:0;
}
.gt-barhead .t{
  font-family:'Cinzel',Georgia,serif; font-weight:700; letter-spacing:.08em;
  color:#fff; font-size:15px; text-transform:uppercase;
}
.gt-barhead a{ font-size:12px; color:#39b6e6; font-family:'Inter',sans-serif; font-weight:600; }
.gt-barhead a:hover{ color:#7fe3ff; }

/* ── RANKINGS: shell bez paddingu, bar-head na gorze, body z paddingiem ── */
.we-rnk-shell{ padding:0 !important; }
.rnk-shell{ padding:0 !important; }
.rnk-title{ margin:0 !important; }
.rnk-title h1{
  display:flex !important; align-items:center !important; margin:0 !important;
  padding:10px 16px !important; width:100% !important; box-sizing:border-box !important;
  background:linear-gradient(180deg,#163a55,#0d2235) !important;
  border:0 !important; border-bottom:1px solid rgba(95,160,205,.25) !important;
  font-family:'Cinzel',Georgia,serif !important; font-weight:700 !important;
  font-size:15px !important; letter-spacing:.08em !important; color:#fff !important;
  text-transform:uppercase !important;
}
.rnk-body{ padding:20px 20px 24px; }
/* zakladki: wycentrowane, jak React .tab */
.rnk-tabs{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important;
  gap:8px !important; margin:12px 0 0 !important; }
.rnk-tab{
  padding:8px 16px !important; border-radius:4px !important;
  font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:14px !important;
  text-transform:none !important; letter-spacing:0 !important;
  color:#aac3d6 !important; background:rgba(11,24,37,.5) !important;
  border:1px solid rgba(95,160,205,.22) !important; box-shadow:none !important; cursor:pointer;
}
.rnk-tab:hover{ color:#7fe3ff !important; border-color:rgba(57,182,230,.5) !important; background:rgba(11,24,37,.5) !important; }
.rnk-tab.active{
  color:#04121d !important; background:linear-gradient(180deg,#5fd0ff,#2f9fd0) !important;
  border-color:rgba(127,227,255,.6) !important; box-shadow:0 2px 12px rgba(57,182,230,.3) !important;
}
/* dropdown Events */
.rnk-ev{ position:relative; display:inline-block; }
.rnk-ev-menu{ display:none; position:absolute; z-index:20; left:0; top:110%; min-width:160px;
  background:#0a1722; border:1px solid #1e3a52; border-radius:6px; padding:4px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.5); }
.rnk-ev:hover .rnk-ev-menu{ display:block; }
.rnk-ev-menu a{ display:block; padding:8px 16px; font-size:13px; color:#cfe2f0;
  font-family:'Inter',sans-serif; }
.rnk-ev-menu a:hover{ background:#13243a; color:#7fe3ff; }
/* filtry klas: wycentrowane male pills */
.rnk-filter{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important;
  gap:6px !important; margin:22px 0 12px !important; padding:0 !important; background:none !important; border:0 !important; }
.rnk-filter a,.rnk-filter .rnk-class-btn{
  display:inline-block !important; padding:6px 12px !important; border-radius:4px !important;
  font-family:'Inter',sans-serif !important; font-size:12px !important; font-weight:600 !important;
  color:#aac3d6 !important; background:rgba(11,24,37,.5) !important;
  border:1px solid rgba(95,160,205,.22) !important; letter-spacing:0 !important;
}
.rnk-filter a:hover,.rnk-filter .rnk-class-btn:hover{ color:#7fe3ff !important; border-color:rgba(57,182,230,.5) !important;
  background:rgba(11,24,37,.5) !important; }
.rnk-filter a.active,.rnk-filter .rnk-class-btn.active{
  color:#04121d !important; background:linear-gradient(180deg,#5fd0ff,#2f9fd0) !important;
  border-color:rgba(127,227,255,.6) !important; }
/* search: wycentrowany, waski input jak React max-w-xs */
.rnk-search{ display:flex !important; justify-content:center !important; gap:8px !important;
  margin:0 0 16px !important; padding:0 !important; background:none !important; border:0 !important; }
.rnk-search input{ flex:0 1 320px !important; max-width:320px !important; }
/* tabela: React style */
.rnk-table{ width:100%; }
.rnk-table thead th{ font-size:11px !important; padding:0 14px 8px !important; border-bottom:1px solid rgba(28,58,82,.6) !important; }
.rnk-table tbody tr{ border-bottom:1px solid rgba(28,58,82,.3) !important; }
.rnk-table tbody tr:nth-child(even){ background:transparent !important; }
.rnk-table tbody tr:hover,.rnk-table tbody tr:nth-child(even):hover{ background:rgba(19,36,58,.4) !important; }
.rnk-table tbody td{ padding:8px 14px !important; }
/* skrot klasy w kolorze */
.rnk-cls{ font-weight:600; white-space:nowrap; }
.rnk-cls.sky{ color:#7dd3fc; } .rnk-cls.emerald{ color:#6ee7b7; } .rnk-cls.amber{ color:#fcd34d; }
.rnk-cls.rose{ color:#fda4af; } .rnk-cls.orange{ color:#fdba74; } .rnk-cls.fuchsia{ color:#f0abfc; }
.rnk-cls.cyan{ color:#67e8f9; }
/* status: kropka */
.rnk-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; }
.rnk-dot.on{ background:#3ddc84; box-shadow:0 0 6px rgba(61,220,132,.7); }
.rnk-dot.off{ background:#e0556b; box-shadow:0 0 6px rgba(224,85,107,.6); }
/* nazwa gildii w tabeli: amber */
.rnk-guild-a{ color:#fcd34d !important; font-weight:400 !important; }
.rnk-guild-a:hover{ color:#7fe3ff !important; }
/* GR bialy, Resets cyan, poziom z sup */
.rnk-gr{ color:#fff; font-weight:600; } .rnk-res{ color:#7fe3ff; font-weight:600; }
.rnk-lvl sup{ font-size:9px; color:#39b6e6; margin-left:2px; }
/* paginacja: kafelki page-num.png (jak React) */
.rnk-pages{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; }
.rnk-page{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  color:#cfe2f0; font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif;
  background:url('../img/gt/home/page-num.png') center/100% 100% no-repeat;
  border:1px solid rgba(95,160,205,.25); border-radius:3px; user-select:none;
}
.rnk-page:hover{ color:#7fe3ff; border-color:rgba(57,182,230,.5); }
.rnk-page.active{ color:#7fe3ff; border-color:rgba(57,182,230,.8); box-shadow:0 0 8px rgba(57,182,230,.4); }
.rnk-page.dis{ opacity:.4; pointer-events:none; }

/* ── DOWNLOADS 1:1 (Game Client / System Req / Drivers / Game Stats) ── */
.dl-stack{ display:flex; flex-direction:column; gap:20px; }
.dl-panel{ background:rgba(14,26,40,.85); border:1px solid #1e3a52; border-radius:6px; overflow:hidden; }
.dl-body{ padding:20px; }
.dl-entry{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px 0; border-bottom:1px solid rgba(28,58,82,.5); }
.dl-entry:first-child{ padding-top:0; } .dl-entry:last-child{ border-bottom:0; padding-bottom:0; }
.dl-info h4{ font-family:'Cinzel',Georgia,serif; font-weight:700; color:#fff; font-size:18px; margin:0; }
.dl-meta{ color:#7d93a8; font-size:12px; margin-top:4px; }
.dl-meta b{ color:#7fe3ff; font-weight:600; }
.dl-mirrors{ display:flex; flex-direction:column; gap:8px; }
.dl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:9px 16px; border-radius:4px; font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  color:#04121d !important; background:linear-gradient(180deg,#5fd0ff,#2f9fd0);
  border:1px solid rgba(127,227,255,.55); box-shadow:0 2px 12px rgba(57,182,230,.3);
}
.dl-btn:hover{ background:linear-gradient(180deg,#7fe3ff,#39b6e6); color:#04121d !important; }
.dl-btn svg{ width:16px; height:16px; }
.dl-sysreq{ width:100%; border-collapse:collapse; font-size:14px; font-family:'Inter',sans-serif; }
.dl-sysreq th{ text-align:left; font-size:11px; text-transform:uppercase; color:#7d93a8; font-weight:500; padding:0 0 8px; }
.dl-sysreq td{ padding:10px 0; border-top:1px solid rgba(28,58,82,.4); }
.dl-sysreq td:first-child{ color:#fff; font-weight:600; }
.dl-sysreq td:nth-child(2){ color:#9fb4c6; }
.dl-sysreq td:nth-child(3){ color:#7fe3ff; }
.dl-drv-note{ color:#9fb4c6; font-size:13px; margin:0 0 16px; }
.dl-drivers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dl-drv{
  display:flex; align-items:center; gap:12px; border-radius:6px;
  background:rgba(11,24,37,.7); border:1px solid rgba(28,58,82,.7); padding:12px; transition:border-color .15s;
}
.dl-drv:hover{ border-color:#2f6f9e; }
.dl-drv-tag{
  width:44px; height:44px; border-radius:4px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:#06121d; border:1px solid #1e3a52; color:#7fe3ff;
  font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:12px;
}
.dl-drv-name{ display:block; color:#fff; font-weight:600; font-size:15px; }
.dl-drv-go{ display:block; color:#39b6e6; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.dl-stats{
  position:relative; overflow:hidden; padding:24px; border-radius:6px; border:1px solid #1e3a52;
  background:linear-gradient(120deg,rgba(57,182,230,.14),rgba(8,21,31,.55));
}
.dl-stats-badge{ display:inline-block; background:#39b6e6; color:#06121d; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:4px 12px; border-radius:4px; }
.dl-stats h3{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:24px; color:#fff; margin:12px 0 0; }
.dl-stats form{ margin-top:16px; display:flex; gap:8px; }
.dl-stats input{ flex:1; background:rgba(11,24,37,.8); border:1px solid #1e3a52; border-radius:4px;
  padding:9px 12px; color:#dce8f2; font-family:'Inter',sans-serif; font-size:14px; outline:none; }
.dl-stats input:focus{ border-color:#39b6e6; box-shadow:0 0 0 3px rgba(57,182,230,.18); }
@media(max-width:760px){ .dl-entry{grid-template-columns:1fr} .dl-drivers{grid-template-columns:1fr} }

/* ── PROFIL GRACZA 1:1 (panel React) ── */
.prf-shell{ font-family:'Inter',system-ui,sans-serif; color:#dce8f2; font-size:14px; }
.prf-body{ padding:16px 20px 20px; }
.prf-grid{ display:grid; grid-template-columns:180px 1fr; gap:20px; padding-top:4px; }
@media(max-width:700px){ .prf-grid{grid-template-columns:1fr} }
.prf-left{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.prf-ava{
  width:150px; height:150px; border-radius:6px; border:1px solid #2f6f9e; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#13243a,#08151f);
}
.prf-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.prf-class-badge{
  padding:4px 12px; border-radius:4px; background:#0b1825; border:1px solid #1e3a52;
  font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#7fe3ff; font-weight:600; text-align:center;
}
.prf-online{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.prf-online .dot{ width:8px; height:8px; border-radius:50%; }
.prf-online.on{ color:#3ddc84; } .prf-online.on .dot{ background:#3ddc84; }
.prf-online.off{ color:#7d93a8; } .prf-online.off .dot{ background:#e0556b; }
.prf-subhead{
  font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:.1em; margin:0 0 8px; color:#7fe3ff;
}
.prf-row{ display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(28,58,82,.4); padding:6px 0; font-size:13px; }
.prf-row:last-child{ border-bottom:0; }
.prf-row .l{ color:#9fb4c6; }
.prf-row .v{ color:#fff; font-weight:600; }
.prf-row .v.cyan{ color:#7fe3ff; } .prf-row .v.gold{ color:#C8A87A; }
.prf-row .v.amber a{ color:#fcd34d; } .prf-row .v.amber a:hover{ color:#7fe3ff; }
.prf-sep{ border-top:1px solid rgba(28,58,82,.5); margin-top:24px; padding-top:20px; }
.prf-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:600px){ .prf-cards{grid-template-columns:1fr} }
.prf-card{ border-radius:6px; background:rgba(11,24,37,.7); border:1px solid rgba(28,58,82,.7);
  padding:16px; text-align:center; }
.prf-card .l{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#7d93a8; }
.prf-card .v{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:24px; margin-top:4px; }
.prf-card .v.green{ color:#3ddc84; } .prf-card .v.red{ color:#e0556b; } .prf-card .v.cyan{ color:#7fe3ff; }
.prf-chars{ display:flex; flex-wrap:wrap; gap:8px; }
.prf-char{
  padding:6px 12px; border-radius:4px; font-size:14px; font-family:'Inter',sans-serif;
  background:#0b1825; border:1px solid #1e3a52; color:#cfe2f0;
}
.prf-char:hover{ border-color:#2f6f9e; color:#7fe3ff; }
.prf-char.cur{ background:rgba(57,182,230,.15); border-color:rgba(57,182,230,.5); color:#7fe3ff; font-weight:600; }
.prf-char .c{ font-size:11px; color:#7d93a8; margin-left:4px; }
/* ekwipunek: siatka 5 kolumn jak React */
.prf-eqwrap{ border-radius:6px; background:rgba(10,22,35,.6); border:1px solid #16293c; padding:16px; }
.prf-eqgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px 12px; max-width:560px; margin:0 auto; }
.prf-eqcell{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.prf-eqlbl{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:rgba(252,211,77,.8); font-weight:600; }
.prf-eqslot{
  width:100%; height:84px; border-radius:4px; overflow:hidden; position:relative;
  background:rgba(6,15,25,.6); border:1px solid rgba(28,58,82,.55);
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.prf-eqslot.sm{ height:60px; width:70%; }
.prf-eqslot.has{ cursor:pointer; }
.prf-eqslot.has:hover{ border-color:#39b6e6; box-shadow:0 0 10px rgba(57,182,230,.35); }
.prf-eqslot.exc{ border-color:rgba(61,220,132,.45); }
.prf-eqslot img{ max-width:92%; max-height:92%; object-fit:contain; image-rendering:pixelated; }
/* PK history React */
.prf-pk{ width:100%; border-collapse:collapse; font-size:12px; font-family:'Inter',sans-serif; }
.prf-pk th{ text-align:left; font-size:10px; text-transform:uppercase; color:#7d93a8; font-weight:500;
  padding:0 12px 8px 0; border-bottom:1px solid rgba(28,58,82,.6); }
.prf-pk td{ padding:6px 12px 6px 0; border-bottom:1px solid rgba(28,58,82,.3); }
.prf-pk a{ color:#fff; } .prf-pk a:hover{ color:#7fe3ff; }
.prf-pk .mut{ color:#7d93a8; } .prf-pk .vic a{ color:#9fb4c6; }
.prf-pk-pages{ display:flex; justify-content:center; gap:8px; margin-top:14px; }

/* ── PROFIL GILDII 1:1 ── */
.gld-info{ display:flex; gap:20px; padding-top:8px; }
@media(max-width:640px){ .gld-info{flex-direction:column;align-items:center} }
.gld-mark{ flex:0 0 auto; }
.gld-mark img,.gld-mark canvas{ width:72px; height:72px; border-radius:4px; border:2px solid #2f6f9e; image-rendering:pixelated; display:block; }
.gld-rows{ flex:1; max-width:448px; }
.gld-members-h{
  font-family:'Cinzel',Georgia,serif; font-weight:700; color:#fff; font-size:15px;
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px;
}
.gld-tbl{ width:100%; border-collapse:collapse; font-size:13px; font-family:'Inter',sans-serif; }
.gld-tbl th{ font-size:11px; text-transform:uppercase; color:#7d93a8; font-weight:500; text-align:left;
  padding:0 12px 8px 0; border-bottom:1px solid rgba(28,58,82,.6); }
.gld-tbl th.c,.gld-tbl td.c{ text-align:center; }
.gld-tbl td{ padding:8px 12px 8px 0; border-bottom:1px solid rgba(28,58,82,.3); }
.gld-tbl tbody tr:hover{ background:rgba(19,36,58,.4); }
.gld-tbl a{ color:#fff; } .gld-tbl a:hover{ color:#7fe3ff; }
.gld-num{ color:#7d93a8; }
.gld-res{ color:#7fe3ff; font-weight:600; }
.gld-pos-gm{ color:#C8A87A; font-weight:600; } .gld-pos-agm{ color:#7fe3ff; font-weight:600; }
.gld-pos-bm{ color:#6ee7b7; font-weight:600; } .gld-pos-m{ color:#7d93a8; }
.gld-st{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; }
.gld-st .dot{ width:6px; height:6px; border-radius:50%; }
.gld-st.on{ color:#3ddc84; } .gld-st.on .dot{ background:#3ddc84; }
.gld-st.off{ color:#7d93a8; } .gld-st.off .dot{ background:#e0556b; }
.gld-alliance a{ color:#C8A87A; } .gld-alliance a:hover{ color:#7fe3ff; }

/* =====================================================================
   v26 — 1) tlo z logo widoczne na KAZDEJ podstronie (start tresci jak
   na stronie glownej), 2) fix wyrownania przycisku Events,
   3) Equipment 1:1 z React (kwadratowe sloty, badge +lvl, tooltip MU)
   ===================================================================== */

/* 1) podstrony zaczynaja sie na tej samej wysokosci co home — pelna scena z logo */
.gt-inner .gt-hero{ height:540px !important; }

/* 2) Events — dropdown pill wyrownany z reszta zakladek */
.rnk-tabs{ align-items:center !important; }
.rnk-ev{ display:inline-flex !important; align-items:center !important; }
.rnk-ev > .rnk-tab{ display:inline-flex !important; align-items:center !important; gap:4px !important; }

/* 3) EQUIPMENT — sloty jak React EquipSlot (kwadrat, badge +lvl, EMPTY) */
.prf-eqslot{
  height:auto !important; aspect-ratio:1/1; border-radius:6px !important;
  background:#0b1825 !important; border:1px solid #1c3a52 !important;
}
.prf-eqslot.sm{ width:56% !important; height:auto !important; }
.prf-eqslot.empty-s{ background:#0a121c !important; border-color:#16293c !important; }
.prf-eqslot .emp{ font-size:7px; text-transform:uppercase; letter-spacing:.06em; color:#2f4256; user-select:none; }
.prf-eqslot.has:hover{ border-color:#39b6e6 !important; box-shadow:none !important; }
.prf-eqslot.exc{ border-color:#1c3a52 !important; } /* React nie wyroznia exc ramka */
.prf-eqslot img{ position:absolute; inset:0; width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important; object-fit:contain; padding:6px; }
.prf-eqslot .lvlb{
  position:absolute; bottom:2px; right:2px; z-index:2;
  font-size:10px; font-weight:700; color:#fff; line-height:1;
  background:#059669; border:1px solid rgba(110,231,183,.4);
  padding:2px 4px; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.5);
  font-family:'Inter',sans-serif;
}

/* TOOLTIP itemu — 1:1 z React ItemTooltipPortal (270px, zlota ramka, centrowany) */
.gtt{
  position:fixed; z-index:9999; width:270px; pointer-events:none;
  border-radius:8px; border:1px solid rgba(200,168,122,.7);
  background:linear-gradient(180deg,rgba(9,15,22,.98),rgba(4,7,11,.98));
  box-shadow:0 10px 40px rgba(0,0,0,.7);
  padding:12px; text-align:center; font-family:'Inter',system-ui,sans-serif;
  backdrop-filter:blur(4px);
}
.gtt-img{ display:flex; justify-content:center; margin-bottom:6px; }
.gtt-img img{ width:48px; height:48px; object-fit:contain; }
.gtt-name{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:14px; }
.gtt-badges{ font-size:11px; color:#3ddc84; margin-top:2px; }
.gtt-base{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(28,58,82,.7); }
.gtt-base div{ font-size:11px; color:rgba(255,255,255,.9); padding:1px 0; }
.gtt-req{ margin-top:6px; }
.gtt-req div{ font-size:11px; color:#9fb4c6; padding:1px 0; }
.gtt-cls{ margin-top:6px; font-size:11px; color:#fb7185; }
.gtt-opts{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(28,58,82,.7); }
.gtt-opts div{ font-size:11px; padding:1px 0; }
.gtt-o-exc{ color:#34d399; }     /* excellent/luck/skill — emerald */
.gtt-o-add{ color:#38bdf8; }     /* additional (JoL) — sky */
.gtt-o-joh{ color:#fde047; font-weight:600; }  /* harmony (JoH) — yellow */
.gtt-o-anc{ color:#C8A87A; font-weight:600; }  /* ancient set — gold */
.gtt-o-anc2{ color:#e8d5b0; }

/* =====================================================================
   v27 — Equipment: mniejsze boxy, responsywne skalowanie,
   intuicyjniejszy podglad (zoom itemu na hover, tooltip z fade-in),
   badge poziomu bez "+"
   ===================================================================== */
/* siatka mniejsza i plynnie skalujaca sie z rozdzielczoscia */
.prf-eqgrid{ max-width:440px !important; width:100%; gap:10px 10px !important; }
.prf-eqlbl{ font-size:9px !important; }
/* item lepiej wypelnia slot; na hover delikatny zoom = czytelny podglad */
.prf-eqslot img{ padding:3px !important; transition:transform .15s ease; }
.prf-eqslot.has:hover img{ transform:scale(1.12); }
.prf-eqslot.has:hover{ border-color:#39b6e6 !important; box-shadow:0 0 12px rgba(57,182,230,.35) !important; }
/* badge poziomu — mniejszy, bez plusa */
.prf-eqslot .lvlb{ font-size:9px !important; padding:1px 3px !important; }
/* tooltip: plynne pojawienie */
.gtt{ animation:gttIn .12s ease-out; }
@keyframes gttIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
/* male ekrany: siatka dalej 5 kolumn, ale ciasniejsza */
@media(max-width:640px){
  .prf-eqgrid{ max-width:100% !important; gap:6px !important; }
  .prf-eqlbl{ font-size:8px !important; }
}

/* =====================================================================
   v28 — event rankings: naglowek eventu w stylu "Latest News"
   (cyan pasek + Cinzel uppercase), ~20px odstepu od zakladek
   ===================================================================== */
.rnk-evt-head{ margin:0 0 14px; } /* v30: odstep od zakladek daje .rnk-tabs (50px) */
.rnk-evt-head h2{
  display:flex; align-items:center; gap:12px; margin:0;
  font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:17px;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
}
.rnk-evt-head h2::before{
  content:''; width:4px; height:18px; border-radius:2px;
  background:#39b6e6; box-shadow:0 0 12px #39b6e6;
}

/* =====================================================================
   v29 — 20px odstepu po zakladkach rankingow (wszedzie),
   tooltip: wiekszy obrazek itemu (72px), mniejsze napisy w srodku
   ===================================================================== */
.rnk-tabs{ margin-bottom:50px !important; } /* v30: 50px odstepu miedzy zakladkami a trescia (guilds/eventy/players) */
/* tooltip: obrazek wiekszy i czytelniejszy */
.gtt-img img{ width:72px !important; height:72px !important; }
/* napisy w srodku odrobine mniejsze (czytelne) */
.gtt-badges{ font-size:10px !important; }
.gtt-base div{ font-size:10px !important; }
.gtt-req div{ font-size:10px !important; }
.gtt-cls{ font-size:10px !important; }
.gtt-opts div{ font-size:10px !important; }

/* =====================================================================
   v30 — UserCP (Reset/Grand Reset/Activity Log), Castle Siege, Guides
   Wspolna paleta: surface #0e1a28, border #1e3a52, akcent #39b6e6/#7fe3ff
   ===================================================================== */

/* ── RESET / GRAND RESET (.rst-*) ── */
.rst-vip{ padding:9px 14px; margin-bottom:14px; border-radius:6px; font-size:12px;
  background:rgba(57,182,230,.1); border:1px solid rgba(57,182,230,.35); color:#7fe3ff; }
.rst-card{ background:rgba(11,24,37,.55); border:1px solid rgba(28,58,82,.6); border-radius:6px;
  padding:16px; margin-bottom:14px; }
.rst-top{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.rst-ava img{ width:72px; height:72px; object-fit:cover; border-radius:6px;
  border:1px solid #2f6f9e; display:block; }
.rst-name{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:18px; color:#fff; }
.rst-acc{ font-size:11px; color:#7d93a8; }
.rst-acc.on{ color:#e0556b; font-weight:600; }
.rst-rows .prf-row{ padding:7px 0; }
.rst-step{ font-size:11px; color:#7d93a8; font-weight:400; margin-left:6px; }
.rst-req{ text-align:right; font-weight:400 !important; color:#c3d3e2 !important;
  font-size:12px; line-height:1.7; }
.rst-badge{ display:inline-block; padding:4px 10px; border-radius:4px; font-size:11px; font-weight:600;
  background:rgba(11,24,37,.8); border:1px solid rgba(28,58,82,.6); color:#9fb4c6; }
.rst-badge.ready{ background:rgba(61,220,132,.12); border-color:rgba(61,220,132,.4); color:#3ddc84; }
.rst-badge.wait{ background:rgba(224,85,107,.1); border-color:rgba(224,85,107,.35); color:#e0556b; }
.rst-badge.gold{ background:rgba(255,215,0,.1); border-color:rgba(255,215,0,.35); color:#ffd700; }
a.rst-badge:hover{ filter:brightness(1.15); }
.rst-action{ margin-top:16px; text-align:center; }
.rst-action-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#7d93a8; margin-bottom:8px; }
.rst-btn{ display:inline-block; min-width:220px; padding:12px 32px; border-radius:4px; cursor:pointer;
  background:linear-gradient(180deg,#5fd0ff,#2f9fd0); border:1px solid rgba(127,227,255,.55);
  color:#04121d; font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.06em; transition:filter .15s; }
.rst-btn:hover{ filter:brightness(1.08); }
.rst-btn:disabled{ background:rgba(11,24,37,.6); border-color:rgba(28,58,82,.5);
  color:#5f7183; cursor:not-allowed; }
.rst-foot{ margin-top:6px; font-size:12px; color:#7d93a8; line-height:1.9; text-align:center; }
.rst-foot b{ color:#7fe3ff; font-weight:600; }
.rst-lead{ color:#9fb4c6; font-size:13px; line-height:1.7; margin:4px 0 16px; }
.rst-note{ color:#7d93a8; font-size:11px; line-height:1.6; margin:12px 0 0; }
.rst-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:760px){ .rst-grid2{ grid-template-columns:1fr; } }
/* licznik cooldownu (reset.js podmienia tekst) */
.we-reset-countdown{ color:#7fe3ff; font-weight:600; }

/* ── ACTIVITY LOG (.alog-*) ── */
.alog-meta{ font-size:12px; color:#7d93a8; margin-bottom:12px; }
.alog-badge{ display:inline-block; padding:3px 10px; border-radius:4px; font-size:11px; font-weight:600;
  white-space:nowrap; background:rgba(11,24,37,.8); border:1px solid rgba(28,58,82,.6); color:#9fb4c6; }
.alog-reset{ background:rgba(57,182,230,.12); border-color:rgba(57,182,230,.4); color:#7fe3ff; }
.alog-workshop{ background:rgba(252,211,77,.1); border-color:rgba(252,211,77,.35); color:#fcd34d; }
.alog-reward{ background:rgba(61,220,132,.12); border-color:rgba(61,220,132,.4); color:#3ddc84; }
.alog-credits{ background:rgba(240,171,252,.1); border-color:rgba(240,171,252,.35); color:#f0abfc; }

/* ── CASTLE SIEGE (.csx-*) ── */
.csx-owner{ text-align:center; padding-top:0; }
.csx-owner-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#39b6e6; }
.csx-owner-mark{ display:flex; justify-content:center; margin-top:10px; }
.csx-owner-mark img,.csx-owner-mark canvas{ width:48px; height:48px; border-radius:4px;
  border:2px solid #2f6f9e; image-rendering:pixelated; display:block; }
.csx-owner-name{ margin-top:8px; font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:24px; }
.csx-owner-name a{ color:#fff !important; } .csx-owner-name a:hover{ color:#7fe3ff !important; }
.csx-guides{ display:inline-block; margin-top:6px; font-size:13px; color:#39b6e6; }
.csx-guides:hover{ color:#7fe3ff; }
.csx-sep{ border-top:1px solid rgba(28,58,82,.5); margin-top:24px; padding-top:18px; }
.csx-h{ font-family:'Cinzel',Georgia,serif; font-weight:700; color:#fff; font-size:16px; margin:0 0 12px; }
.csx-empty{ color:#7d93a8; text-align:center; padding:20px 0; }

/* ── GUIDES (.gds-*) ── */
.gds-stack{ display:flex; flex-direction:column; gap:20px; }
.gds-welcome{ text-align:center; }
.gds-book{ width:150px; height:190px; margin:6px auto 18px; border-radius:8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(160deg,#13243a,#08151f);
  border:1px solid #2f6f9e; box-shadow:0 0 30px rgba(57,182,230,.18), inset 0 0 40px rgba(0,0,0,.5); }
.gds-book-t{ font-family:'Cinzel',Georgia,serif; font-weight:900; font-size:22px; color:#7fe3ff;
  letter-spacing:.1em; text-shadow:0 0 14px rgba(57,182,230,.6); }
.gds-book-s{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#7d93a8; }
.gds-lead{ color:#dce8f2; font-size:14px; line-height:1.7; margin:0 auto 6px; max-width:520px; }
.gds-p{ color:#9fb4c6; font-size:13px; line-height:1.7; margin:0 auto 4px; max-width:520px; }
.gds-cta{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.gds-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:900px){ .gds-cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .gds-cards{ grid-template-columns:1fr; } }
.gds-card{ display:block; padding:18px; min-height:120px; border-radius:8px;
  background:linear-gradient(145deg,rgba(16,32,48,.85),rgba(8,16,26,.92));
  border:1px solid rgba(28,58,82,.7); box-shadow:inset 0 0 24px rgba(0,0,0,.35);
  transition:transform .15s, border-color .15s, box-shadow .15s; }
.gds-card:hover{ transform:translateY(-3px); border-color:rgba(57,182,230,.6);
  box-shadow:0 0 22px rgba(57,182,230,.2), inset 0 0 24px rgba(0,0,0,.35); }
.gds-card h3{ margin:0 0 6px; font-family:'Cinzel',Georgia,serif; font-size:15px; color:#fff;
  text-transform:uppercase; letter-spacing:.05em; }
.gds-card p{ margin:0 0 10px; color:#7d93a8; font-size:12px; }
.gds-card span{ color:#39b6e6; font-size:12px; font-weight:600; }
.gds-acc{ border:1px solid rgba(28,58,82,.6); border-radius:6px; background:rgba(11,24,37,.5);
  margin-bottom:8px; overflow:hidden; }
.gds-acc summary{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; cursor:pointer; list-style:none; user-select:none; }
.gds-acc summary::-webkit-details-marker{ display:none; }
.gds-acc summary::after{ content:'\25BE'; color:#39b6e6; font-size:12px; transition:transform .15s; }
.gds-acc[open] summary::after{ transform:rotate(180deg); }
.gds-acc-t{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:14px; color:#fff;
  text-transform:uppercase; letter-spacing:.05em; }
.gds-acc-c{ margin-left:auto; font-size:11px; color:#7d93a8; }
.gds-acc summary:hover .gds-acc-t{ color:#7fe3ff; }
.gds-links{ padding:4px 16px 12px; display:grid; grid-template-columns:1fr 1fr; gap:2px 20px; }
@media(max-width:560px){ .gds-links{ grid-template-columns:1fr; } }
.gds-links a{ display:block; padding:6px 0 6px 12px; font-size:13px; color:#c3d3e2;
  border-left:2px solid rgba(28,58,82,.6); transition:all .12s; }
.gds-links a:hover{ color:#7fe3ff; border-left-color:#39b6e6; padding-left:16px; }
.gds-content{ color:#c3d3e2; font-size:14px; line-height:1.8; }
.gds-content h1,.gds-content h2,.gds-content h3{ color:#fff; font-family:'Cinzel',Georgia,serif; }
.gds-content a{ color:#39b6e6; }

/* =====================================================================
   v31 — 1) UserCP menu 1:1 z React (ikony SVG cyan, aktywna pozycja),
   2) Guides: bez bocznych paneli, sidebar kategorii + tresc (30px gap)
   ===================================================================== */

/* ── USER CONTROL PANEL (.gt-ucp2) ── */
.gt-ucp2{ display:flex; flex-direction:column; gap:2px; }
.gt-ucp2 a{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:6px;
  border:1px solid transparent;
  color:#cfe2f0; font-family:'Inter',system-ui,sans-serif;
  font-size:13px; font-weight:600;
  transition:background .15s, color .15s, border-color .15s;
}
.gt-ucp2 a svg{ width:16px; height:16px; flex:0 0 auto; color:#39b6e6; }
.gt-ucp2 a:hover{ background:rgba(19,36,58,.7); color:#7fe3ff; }
.gt-ucp2 a.active{
  background:rgba(57,182,230,.15); color:#7fe3ff;
  border-color:rgba(57,182,230,.4);
}
/* Log Out pod menu — odstep */
.gt-ucp2 + .gt-btn-wide{ margin-top:14px; }

/* ── GUIDES: ukryj boczne kolumny, pelna szerokosc ── */
.gt-page-guides .gt-left,
.gt-page-guides .gt-right{ display:none !important; }
.gt-page-guides .gt-shell{ grid-template-columns:minmax(0,1fr) !important; }

/* uklad: sidebar (ile potrzeba) + 30px odstepu + tresc */
.gds-layout{
  display:grid; grid-template-columns:minmax(220px,260px) minmax(0,1fr);
  gap:30px; align-items:start;
}
@media(max-width:820px){ .gds-layout{ grid-template-columns:1fr; } }
/* .gds-side jest w .gt-module{overflow:hidden} => sticky "parkowal" 96px w dol,
   przez co GUIDE CATEGORIES zaczynalo sie nizej niz naglowek tresci. Static
   wyrownuje gore obu kolumn (tresc po prawej i tak rosnie w dol niezaleznie). */
.gds-side{ position:static; }
.gds-main{ display:flex; flex-direction:column; gap:20px; min-width:0; }

/* nawigacja kategorii w sidebarze — AKORDEON (kategoria -> tematy) */
.gds-nav{ display:flex; flex-direction:column; padding:8px; gap:2px; }
/* pigulki najwyzszego poziomu: link "Welcome" oraz naglowki kategorii (summary) */
.gds-nav > a,
.gds-nav > .gds-cat > summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:6px; cursor:pointer; list-style:none;
  border:1px solid transparent; border-left:2px solid rgba(28,58,82,.6);
  color:#c3d3e2; font-family:'Inter',system-ui,sans-serif;
  font-size:13px; font-weight:600; transition:all .12s;
}
.gds-nav > a:hover,
.gds-nav > .gds-cat > summary:hover{ background:rgba(19,36,58,.7); color:#7fe3ff; border-left-color:#39b6e6; }
.gds-nav > a.active,
.gds-nav > .gds-cat > summary.active{
  background:rgba(57,182,230,.13); color:#7fe3ff;
  border-color:rgba(57,182,230,.35); border-left:2px solid #39b6e6;
}
/* akordeon: strzalka + rozwijane tematy */
.gds-cat{ margin:0; }
.gds-cat > summary::-webkit-details-marker{ display:none; }
.gds-cat > summary::after{ content:'\25BE'; font-size:11px; color:#39b6e6; margin-left:4px;
  flex:0 0 auto; transition:transform .18s; }
.gds-cat[open] > summary::after{ transform:rotate(180deg); }
.gds-cat-links{ display:flex; flex-direction:column; gap:1px; padding:4px 4px 8px 10px; }
.gds-cat-links a{
  display:block; padding:6px 10px 6px 14px; font-size:12.5px;
  color:#9fb4c6; border-left:2px solid rgba(28,58,82,.5);
  border-radius:0 4px 4px 0; transition:all .12s; text-decoration:none;
}
.gds-cat-links a:hover{ color:#7fe3ff; background:rgba(19,36,58,.55); border-left-color:#39b6e6; padding-left:18px; }
.gds-cat-links a.cur{ color:#7fe3ff; background:rgba(57,182,230,.1); border-left-color:#39b6e6; font-weight:600; }
.gds-nav-t{ white-space:nowrap; }
.gds-nav-c{
  font-size:11px; color:#7d93a8; font-weight:600;
  background:rgba(11,24,37,.8); border:1px solid rgba(28,58,82,.6);
  border-radius:10px; padding:1px 8px; flex:0 0 auto;
}
.gds-nav a.active .gds-nav-c{ color:#7fe3ff; border-color:rgba(57,182,230,.4); }
/* karty w ukladzie pelnej szerokosci — 3 kolumny juz sa (.gds-cards) */

/* =====================================================================
   v32 — ITEM WORKSHOP: uklad 1:1 z React (postac -> equipment jak profil
   -> inventory Main/Extended -> osobny Warehouse), depozyty jako
   responsywny CSS-grid (skaluja sie z szerokoscia), panel Item Upgrade
   ===================================================================== */
/* saldo JoX w bar-head */
.xws-jox{ font-family:'Inter',sans-serif; font-size:13px; color:#9fb4c6; }
.xws-jox b{ color:#ffd700; font-weight:700; }

/* naglowek Inventory + zakladki Main/Extended */
.xws-inv-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:0 0 10px; }
.xws-invtabs{ display:flex; gap:6px; margin:0 !important; }
.xws-invtabs .rnk-tab{ padding:6px 14px !important; font-size:12px !important; }

/* DEPOZYT — responsywny grid: kolumny/wiersze 1fr, aspect-ratio trzyma
   kwadratowe komorki; siatka rysowana gradientem wg --xwc/--xwr */
.xws-bag{
  display:grid; width:100%; max-width:560px; margin-bottom:6px;
  background-color:rgba(6,15,25,.6);
  background-image:
    linear-gradient(rgba(28,58,82,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,58,82,.35) 1px, transparent 1px);
  background-size:calc(100% / var(--xwc)) calc(100% / var(--xwr));
  border:1px solid #16293c; border-radius:6px; overflow:hidden;
}
.xws-item{
  position:relative; display:flex; align-items:center; justify-content:center;
  margin:1px; border-radius:3px;
  background:rgba(11,24,37,.85); border:1px solid #1c3a52;
  transition:border-color .12s, box-shadow .12s; z-index:1;
}
.xws-item img{ max-width:92%; max-height:92%; object-fit:contain; image-rendering:pixelated; }
.xws-item.is-exc{ border-color:rgba(61,220,132,.35); }
.xws-item.clickable{ cursor:pointer; }
.xws-item.clickable:hover{ border-color:#39b6e6; box-shadow:0 0 10px rgba(57,182,230,.4); z-index:2; }
.xws-item .lvlb{
  position:absolute; bottom:1px; right:1px; z-index:2;
  font-size:9px; font-weight:700; color:#fff; line-height:1;
  background:#059669; border:1px solid rgba(110,231,183,.4);
  padding:1px 3px; border-radius:3px; font-family:'Inter',sans-serif;
}
/* zaznaczony item (equipment i depozyt) */
.xws-item.is-sel, .prf-eqslot.is-sel{
  border-color:#7fe3ff !important; box-shadow:0 0 12px rgba(127,227,255,.55) !important;
}
.prf-eqslot.clickable{ cursor:pointer; }

/* PANEL ITEM UPGRADE */
.xws-upgwrap{ margin-top:20px; }
.xw-upg-box{ background:rgba(14,26,40,.9); border:1px solid #1e3a52; border-top:0;
  border-radius:0 0 6px 6px; }
.xw-upg-body{ padding:16px 18px; font-family:'Inter',sans-serif; }
.xw-lvl-row{ display:flex; align-items:center; gap:12px; padding-bottom:12px;
  border-bottom:1px solid rgba(28,58,82,.5); }
.xw-lvl-lbl{ color:#9fb4c6; font-size:13px; font-weight:600; }
.xw-lvl-val{ color:#fff; font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:18px; }
.xw-btn-plus{
  width:30px; height:30px; border-radius:4px; cursor:pointer;
  background:linear-gradient(180deg,#5fd0ff,#2f9fd0); border:1px solid rgba(127,227,255,.55);
  color:#04121d; font-weight:800; font-size:16px; line-height:1;
}
.xw-btn-plus:hover{ filter:brightness(1.1); }
.xw-cost{ color:#ffd700; font-size:12px; font-weight:600; }
.xw-cap{ color:#7d93a8; font-size:12px; }
.xw-exc-title{ margin:14px 0 8px; color:#7fe3ff; font-family:'Cinzel',Georgia,serif;
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.xw-exc-max{ color:#7d93a8; font-family:'Inter',sans-serif; font-weight:400;
  font-size:11px; text-transform:none; letter-spacing:0; }
.xw-opt-row{ display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid rgba(28,58,82,.3); font-size:13px; }
.xw-opt-row:last-child{ border-bottom:0; }
.xw-opt-sq-w{ width:26px; flex:0 0 auto; }
.xw-opt-sq{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:4px;
  border:1px solid #1e3a52; background:rgba(11,24,37,.8);
  color:#3ddc84; font-size:13px;
}
.xw-opt-sq.is-on{ border-color:rgba(61,220,132,.5); background:rgba(61,220,132,.12); }
button.xw-opt-sq.is-off{ cursor:pointer; }
button.xw-opt-sq.is-off:hover{ border-color:#39b6e6; box-shadow:0 0 8px rgba(57,182,230,.4); }
button.xw-opt-sq.is-off:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.xw-opt-sq.is-locked{ opacity:.3; }
.xw-opt-name{ flex:1; color:#c3d3e2; }
.xw-opt-row.xw-opt-on .xw-opt-name{ color:#3ddc84; }
.xw-opt-added{ color:#3ddc84; font-size:12px; font-weight:600; white-space:nowrap; }
.xw-opt-cost{ color:#ffd700; font-size:12px; font-weight:600; white-space:nowrap; }
.xw-exc-blocked{ margin-top:12px; padding:10px 12px; border-radius:6px;
  background:rgba(224,85,107,.08); border:1px solid rgba(224,85,107,.3);
  color:#e0556b; font-size:12px; }

/* =====================================================================
   v33 — Workshop up: depo mniejsze (-40%) + akordeony (rozwijane),
   karty opcji z ✓, karta levelu, toast sukces/blad
   ===================================================================== */
/* depo mniejsze o ~40% (bylo 560 -> 340) */
.xws-bag{ max-width:340px !important; }
.xws-acc-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.xws-acc-2 .xws-bag{ max-width:100% !important; }
.xws-acc-wide .xws-bag{ max-width:340px !important; }
@media(max-width:640px){ .xws-acc-2{ grid-template-columns:1fr; } }
.xws-sub{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#7d93a8; margin:0 0 6px; }

/* AKORDEON Inventory / Extended / Warehouse (rozwija sie po kliknieciu) */
.xws-acc{ border:1px solid rgba(28,58,82,.6); border-radius:6px; background:rgba(11,24,37,.4);
  margin-bottom:10px; overflow:hidden; }
.xws-acc summary{ display:flex; align-items:center; gap:12px; padding:12px 16px;
  cursor:pointer; list-style:none; user-select:none;
  background:linear-gradient(180deg,#163a55,#0d2235);
  border-bottom:1px solid rgba(95,160,205,.25); }
.xws-acc summary::-webkit-details-marker{ display:none; }
.xws-acc summary::after{ content:'\25BE'; margin-left:auto; color:#39b6e6; font-size:12px; transition:transform .15s; }
.xws-acc[open] summary::after{ transform:rotate(180deg); }
.xws-acc summary .t{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:14px; color:#fff;
  text-transform:uppercase; letter-spacing:.06em; }
.xws-acc summary .c{ font-size:11px; color:#9fb4c6; }
.xws-acc summary:hover .t{ color:#7fe3ff; }
.xws-acc-bd{ padding:16px; }

/* KARTA LEVELU */
.xw-lvlcard{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 16px; border-radius:8px; background:rgba(11,24,37,.7); border:1px solid rgba(28,58,82,.6); }
.xw-lvlcard-l{ display:flex; align-items:center; gap:12px; }
.xw-lvl-lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#9fb4c6; }
.xw-lvl-val{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:24px; color:#fff; }
.xw-lvlcard-r{ display:flex; align-items:center; gap:12px; margin:0; }
.xw-lvl-next{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:16px; color:#7fe3ff; }
.xw-btn-plus{ display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 18px; border-radius:6px; cursor:pointer; line-height:1.1;
  background:linear-gradient(180deg,#5fd0ff,#2f9fd0); border:1px solid rgba(127,227,255,.55);
  color:#04121d; font-family:'Inter',sans-serif; font-weight:800; font-size:13px;
  width:auto; height:auto; }
.xw-btn-plus:hover{ filter:brightness(1.08); }
.xw-btn-cost{ font-size:10px; font-weight:700; opacity:.85; }
.xw-cap{ color:#7d93a8; font-size:12px; font-style:italic; }

/* OPCJE — karty w gridzie 2 kolumny, box z ✓ gdy aktywne */
.xw-exc-title{ margin:16px 0 10px; color:#7fe3ff; font-family:'Cinzel',Georgia,serif;
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.xw-exc-max{ color:#7d93a8; font-family:'Inter',sans-serif; font-weight:400; font-size:12px;
  text-transform:none; letter-spacing:0; margin-left:6px;
  background:rgba(11,24,37,.8); border:1px solid rgba(28,58,82,.6); border-radius:10px; padding:2px 10px; }
.xw-optgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:640px){ .xw-optgrid{ grid-template-columns:1fr; } }
.xw-optcard, .xw-optcard-btn{ display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border-radius:6px; text-align:left; margin:0;
  background:rgba(11,24,37,.6); border:1px solid rgba(28,58,82,.6);
  color:#c3d3e2; font-family:'Inter',sans-serif; font-size:13px; }
.xw-optcard.add{ padding:0; border:0; background:none; }
.xw-optcard-btn{ cursor:pointer; transition:border-color .12s, box-shadow .12s, background .12s; }
.xw-optcard-btn:hover{ border-color:#39b6e6; box-shadow:0 0 10px rgba(57,182,230,.3); background:rgba(16,32,48,.8); }
.xw-optcard-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; border-color:rgba(28,58,82,.6); }
.xw-optcard.on{ background:rgba(61,220,132,.1); border-color:rgba(61,220,132,.4); }
.xw-optcard.locked{ opacity:.5; }
.xw-optbox{ flex:0 0 auto; width:22px; height:22px; border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(6,15,25,.8); border:1px solid #1e3a52; }
.xw-optcard.on .xw-optbox{ background:rgba(61,220,132,.18); border-color:rgba(61,220,132,.5); }
.xw-optcard-btn:hover .xw-optbox{ border-color:#39b6e6; }
.xw-optx{ color:#3ddc84; font-size:13px; font-weight:700; }
.xw-optplus{ color:#7fe3ff; font-size:15px; font-weight:700; line-height:1; }
.xw-optname{ flex:1; min-width:0; }
.xw-optcard.on .xw-optname{ color:#3ddc84; }
.xw-optstat{ flex:0 0 auto; font-size:12px; font-weight:600; white-space:nowrap; }
.xw-optstat.added{ color:#3ddc84; }
.xw-optstat.cost{ color:#ffd700; }

/* TOAST sukces / blad */
.xw-toast{ position:fixed; top:20px; left:50%; transform:translateX(-50%);
  z-index:10000; display:flex; align-items:center; gap:14px; min-width:320px; max-width:min(560px,92vw);
  padding:14px 18px; border-radius:10px; box-shadow:0 16px 50px rgba(0,0,0,.6);
  font-family:'Inter',system-ui,sans-serif; backdrop-filter:blur(6px);
  animation:xwToastIn .28s cubic-bezier(.2,.9,.3,1.3); }
.xw-toast.ok{ background:linear-gradient(180deg,rgba(12,40,28,.98),rgba(6,20,14,.98)); border:1px solid rgba(61,220,132,.5); }
.xw-toast.err{ background:linear-gradient(180deg,rgba(40,14,18,.98),rgba(20,8,10,.98)); border:1px solid rgba(224,85,107,.5); }
.xw-toast-hide{ opacity:0; transform:translateX(-50%) translateY(-14px); transition:all .5s ease; }
@keyframes xwToastIn{ from{ opacity:0; transform:translateX(-50%) translateY(-18px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
.xw-toast-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:20px; font-weight:700; }
.xw-toast.ok .xw-toast-ic{ background:rgba(61,220,132,.18); color:#3ddc84; border:1px solid rgba(61,220,132,.5); }
.xw-toast.err .xw-toast-ic{ background:rgba(224,85,107,.18); color:#e0556b; border:1px solid rgba(224,85,107,.5); }
.xw-toast-tx{ flex:1; min-width:0; }
.xw-toast-t{ font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:15px; color:#fff; }
.xw-toast-d{ font-size:13px; color:#c3d3e2; margin-top:2px; }
.xw-toast-d b{ color:#7fe3ff; }
.xw-toast-x{ flex:0 0 auto; background:none; border:0; color:rgba(255,255,255,.6);
  font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }
.xw-toast-x:hover{ color:#fff; }

/* =====================================================================
   v24 — boxy 1:1 z React IceBox (padding 40/36/36, bez niebieskiego paska),
   input email, Read more ciemny, banner Join Now proporcje React
   ===================================================================== */
/* padding boxow jak React (.ice-box-inner: px-9 pt-10 pb-9 = 36/40/36) — kompaktowo */
.gt-box--frame .gt-box-bd,
.gt-box--userpanel .gt-box-bd,
.gt-box--userpanel.gt-castlebox .gt-box-bd,
.gt-box--top .gt-box-bd,
.gt-box--status .gt-box-bd,
.gt-box--time .gt-box-bd{ padding:40px 34px 34px !important; }
/* usun niebieski pasek przy tytule (React IceBox go nie ma) */
.gt-box-title::before{ display:none !important; }
.gt-box-title{ padding-left:0 !important; }
/* Castle Siege — kompaktowe odstepy (bylo za wysokie/rozstrzelone) */
.gt-castlebox .gt-castle .row{ margin-bottom:2px !important; }
.gt-castlebox .gt-castle br{ display:block; content:""; margin-top:2px; line-height:1.15; }
.gt-castlebox .gt-castle img{ width:56px !important; height:56px !important; margin-bottom:6px !important; }
.gt-castlebox .gt-castle .btn,.gt-castlebox .gt-castle .btn-castlewidget{ margin-top:10px !important; }
/* input EMAIL w modalu (bylo biale, teraz jak Username) */
.gt-modal-form input[type=email]{
  width:100% !important; background:var(--panel2) !important; border:1px solid var(--line) !important;
  color:#eaf4fb !important; border-radius:8px !important; padding:13px 14px !important;
  font-size:14px !important; font-family:'Inter',system-ui,sans-serif !important;
}
.gt-modal-form input[type=email]:focus{ outline:none !important; border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(57,182,230,.2) !important; }
/* Read more — ciemny tekst na ramce ice (jak React btn-empty #06222f) */
.gt-news-more{ color:#06222f !important; text-shadow:0 1px 0 rgba(255,255,255,.45) !important; }
.gt-news-more:hover{ color:#02141d !important; }
/* Join Now banner — proporcje 320/142 + gradient jak React, tytul bialy mixed-case */
.gt-joinus{
  min-height:0 !important; aspect-ratio:320 / 142 !important;
  background:linear-gradient(90deg,rgba(4,16,27,.85) 30%,rgba(4,16,27,0) 75%),
    url('../img/gt/home/joinus.png') center/cover no-repeat, var(--panel) !important;
}
.gt-joinus-title{ color:#fff !important; font-size:17px !important; text-transform:none !important; top:16px !important; left:18px !important; }
.gt-joinus-btn{ bottom:16px !important; left:18px !important; max-width:150px !important; }
/* Discord ikona w menu */
.gt-discord-ico{ width:16px; height:13px; vertical-align:-1px; margin-right:6px; }

/* =====================================================================
   v34 — My Account: karta postaci (avatar klasy) w stylu cyan/navy.
   Reorder flex: nazwa -> avatar -> level (pill na dole avatara) -> lokacja.
   Scope: .gt-page-usercp (tylko strona konta uzywa .row.text-center z tymi klasami)
   ===================================================================== */
.gt-page-usercp .row.text-center{
  display:flex; flex-wrap:wrap; gap:18px 16px;
  justify-content:flex-start; margin:6px 0 4px;
}
.gt-page-usercp .row.text-center > .col-xs-3{
  width:auto; float:none; padding:0;
  display:flex; flex-direction:column; align-items:center;
}
/* nazwa postaci + wskaznik online */
.gt-page-usercp .myaccount-character-name{
  order:0; margin-bottom:9px;
  display:flex; align-items:center; gap:6px; justify-content:center;
  font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:13px;
}
.gt-page-usercp .myaccount-character-name a{ color:#7fe3ff; text-decoration:none; }
.gt-page-usercp .myaccount-character-name a:hover{ color:#bff0ff; }
.gt-page-usercp .online-status-indicator{ width:9px; height:9px; }
/* ramka avatara */
.gt-page-usercp .myaccount-character-block{
  order:1; position:relative;
  width:158px; height:158px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 12%, rgba(30,64,92,.55), rgba(5,14,22,.92));
  border:1px solid rgba(57,182,230,.35);
  border-radius:12px; overflow:hidden;
  box-shadow:inset 0 0 34px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.4);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.gt-page-usercp .myaccount-character-block::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 52%, rgba(1,18,26,.9));
}
.gt-page-usercp .myaccount-character-block:hover{
  border-color:rgba(127,227,255,.7); transform:translateY(-3px);
  box-shadow:inset 0 0 34px rgba(0,0,0,.55), 0 10px 26px rgba(57,182,230,.28);
}
.gt-page-usercp .myaccount-character-block a{
  display:flex; width:100%; height:100%; align-items:center; justify-content:center;
}
.gt-page-usercp .myaccount-character-block img{
  max-width:86%; max-height:86%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.65));
}
/* level — pill nachodzacy na dol ramki avatara */
.gt-page-usercp .myaccount-character-block-level{
  order:2; position:relative; z-index:2; margin-top:-15px;
  display:inline-block; padding:3px 13px;
  background:linear-gradient(180deg,#5fd0ff,#2f9fd0); color:#04121d;
  font-family:'Inter',system-ui,sans-serif; font-weight:800; font-size:12px;
  line-height:1.2; border-radius:999px; border:1px solid rgba(127,227,255,.65);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
/* lokalizacja pod spodem */
.gt-page-usercp .myaccount-character-block-location{
  order:3; margin-top:9px;
  font-family:'Inter',system-ui,sans-serif; font-size:11px;
  color:#7d93a8; line-height:1.5; text-align:center;
}

/* komunikat bledu logowania w modalu (po nieudanym POST /login) */
.gt-auth-msg{
  margin:0 0 14px; padding:9px 12px;
  background:rgba(224,85,107,.12); border:1px solid rgba(224,85,107,.5);
  border-left:3px solid #e0556b; border-radius:5px;
  color:#f0909e; font-family:'Inter',system-ui,sans-serif; font-size:12px;
}

/* v37 — licznik online jest teraz linkiem do listy graczy online */
a.gt-online{ text-decoration:none; cursor:pointer; transition:color .15s; }
a.gt-online:hover{ color:#7fe3ff; }
a.gt-online:hover .gt-dot{ box-shadow:0 0 8px #3ddc84; }

/* =====================================================================
   v38 — WERSJA MOBILNA (responsywnosc)
   Bloki wyzej (uklad 1:1 z React) ustawiaja sztywne desktopowe wymiary bez
   media-query, wiec tutaj nadpisujemy z !important. Umieszczone na koncu pliku,
   zeby wygrywac kolejnoscia zrodla.
   ===================================================================== */

/* Hamburger — domyslnie ukryty (desktop) */
.gt-burger{ display:none; width:42px; height:38px; flex:0 0 auto; padding:0;
  background:transparent; border:1px solid rgba(28,58,82,.7); border-radius:7px;
  cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.gt-burger span{ display:block; width:20px; height:2px; background:#cfe2f1; border-radius:2px; transition:.2s; }
.gt-header.gt-open .gt-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.gt-header.gt-open .gt-burger span:nth-child(2){ opacity:0; }
.gt-header.gt-open .gt-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── SHELL (tresc): jedna kolumna, bez ujemnego marginesu ── */
@media (max-width: 1180px){
  .gt-shell{ grid-template-columns:1fr !important; gap:20px !important; margin-top:0 !important; }
  .gt-center{ order:-1 !important; }
  .gt-wrap{ padding:0 16px 50px !important; max-width:100% !important; }
  .gt-hero{ margin-top:0 !important; padding-top:0 !important; height:260px !important; }
  .gt-inner .gt-hero{ height:170px !important; }
  .gt-hero-logo{ max-height:120px !important; }
}

/* ── HEADER: hamburger + rozwijane menu ── */
@media (max-width: 900px){
  .gt-burger{ display:flex; order:2; margin-left:auto; }
  .gt-header-in{ flex-wrap:wrap !important; height:auto !important; min-height:58px !important;
    padding:10px 14px !important; gap:12px !important; row-gap:0 !important; }
  .gt-brand{ font-size:20px !important; order:1; }
  .gt-nav{ order:4 !important; flex:0 0 100% !important; display:none !important; }
  .gt-actions{ order:5 !important; flex:0 0 100% !important; display:none !important;
    flex-wrap:wrap !important; gap:10px !important; padding:12px 0 4px !important;
    margin-top:8px !important; border-top:1px solid rgba(28,58,82,.45) !important; white-space:normal !important; }
  .gt-header.gt-open .gt-nav{ display:block !important; }
  .gt-header.gt-open .gt-actions{ display:flex !important; }
  .gt-nav ul{ flex-direction:column !important; gap:0 !important; }
  .gt-nav a{ display:block !important; padding:13px 2px !important; font-size:14px !important;
    border-bottom:1px solid rgba(28,58,82,.4) !important; }
  .gt-actions .gt-online{ flex:0 0 100%; justify-content:flex-start; }
  .gt-lang{ flex:0 0 100%; }
  .gt-lang-btn{ width:100%; text-align:left; }
  .gt-lang-menu{ position:static !important; box-shadow:none; margin-top:6px; }
  .gt-actions .gt-btn{ flex:1 1 auto; text-align:center; }
  .gt-actions .gt-user{ flex:0 0 100%; }
  /* hero nizszy pod solidnym paskiem */
  .gt-hero{ height:220px !important; }
}

/* ── Male ekrany (telefony) ── */
@media (max-width: 560px){
  .gt-brand{ font-size:18px !important; }
  .gt-hero{ height:180px !important; }
  .gt-hero-logo{ max-height:96px !important; }
  .gt-shell{ gap:16px !important; }
  .gt-col{ gap:16px !important; }
  .gt-wrap{ padding:0 12px 40px !important; }
}

/* =====================================================================
   v40 — mobile: DUZY hero (banner z logo GhostTownMU + postac), ~3x,
   moze byc przyciety w poziomie. Slider "Season 6" UKRYTY na mobile.
   ===================================================================== */
@media (max-width: 900px){
  .gt-hero{ height:420px !important; }
  .gt-slider{ display:none !important; }   /* Season 6 baner — schowany na mobile */
}
@media (max-width: 560px){
  .gt-hero{ height:380px !important; }
}