*{box-sizing:border-box}
:root{--gold:#d6ad61;--gold2:#ffe2a2;--line:#76552a;--line2:#a47839;--red:#ff4c35;--green:#6eff55}
html,body{min-height:100%}
body{margin:0;background:#05070c;color:#ddd;font-family:Arial,Helvetica,sans-serif;font-size:15px}
a{text-decoration:none;color:#e9bf73}
.bg{position:fixed;inset:0;z-index:-3;background:linear-gradient(rgba(0,0,0,.02),rgba(0,0,0,.42)),url('../img/l2knight_background.jpg') center top/cover no-repeat fixed}
.bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.01) 33%,rgba(0,0,0,.01) 67%,rgba(0,0,0,.28)),linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.25) 88%)}

.topbar{height:34px;background:rgba(3,4,6,.88);border-bottom:1px solid #3e2c18}
.topbar-inner{max-width:1500px;margin:0 auto;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.welcome strong{color:#ff4937}.socials{display:flex;align-items:center;gap:15px}
.social{font-weight:bold;font-size:18px}.fb{color:#8dadff}.dc{color:#879cff}.yt{color:#e33}.login-link{color:#eee;border-left:1px solid #3a2a16;padding-left:16px}

.main-nav{max-width:1500px;margin:0 auto;height:58px;display:flex;justify-content:center;background:linear-gradient(180deg,rgba(10,11,13,.98),rgba(4,5,7,.98));border:1px solid #553a1e;box-shadow:0 10px 35px #000}
.main-nav a{position:relative;padding:20px 22px;color:#eee;border-right:1px solid #2a2119;font-size:14px;white-space:nowrap;letter-spacing:.35px}
.main-nav a.active,.main-nav a:hover{color:#ffd987;background:linear-gradient(180deg,rgba(142,94,34,.23),rgba(35,20,10,.1))}
.main-nav a.active:after{content:"";position:absolute;left:35px;right:35px;bottom:0;height:2px;background:#ffd987;box-shadow:0 0 14px #ffbd4d}

.hero{max-width:1500px;margin:0 auto;height:285px;display:grid;grid-template-columns:1fr 370px;align-items:center;gap:35px;padding:0 48px}
.brand{text-align:left;padding-left:110px;text-shadow:0 7px 28px #000,0 0 18px rgba(0,0,0,.9)}
.brand-l2{font-family:Georgia,serif;font-size:54px;line-height:.8;margin-left:112px;color:#eee}
.brand-main{font-family:Georgia,serif;font-size:96px;line-height:.92;letter-spacing:6px;color:#f2f2f2}
.brand-sub{letter-spacing:18px;color:#d8b36b;margin-left:92px}

.frame{position:relative;border:1px solid var(--line2)!important}
.frame:before{content:"";position:absolute;inset:5px;border:1px solid rgba(215,173,96,.13);pointer-events:none}
.frame:after{content:"";position:absolute;inset:-1px;pointer-events:none;background:
linear-gradient(90deg,var(--gold),var(--gold)) left 8px top/40px 1px no-repeat,
linear-gradient(90deg,var(--gold),var(--gold)) right 8px top/40px 1px no-repeat,
linear-gradient(90deg,var(--gold),var(--gold)) left 8px bottom/40px 1px no-repeat,
linear-gradient(90deg,var(--gold),var(--gold)) right 8px bottom/40px 1px no-repeat,
linear-gradient(var(--gold),var(--gold)) left top 8px/1px 40px no-repeat,
linear-gradient(var(--gold),var(--gold)) right top 8px/1px 40px no-repeat,
linear-gradient(var(--gold),var(--gold)) left bottom 8px/1px 40px no-repeat,
linear-gradient(var(--gold),var(--gold)) right bottom 8px/1px 40px no-repeat;opacity:.55}

.status-box{justify-self:center;width:360px;padding:24px;text-align:center;background:linear-gradient(180deg,rgba(13,14,16,.90),rgba(4,5,7,.90));box-shadow:0 0 0 2px #080706,0 14px 40px #000,inset 0 0 24px #000}
.status-caption{letter-spacing:2px;color:#d7bd84;font-size:13px}.online,.offline{font-family:Georgia,serif;font-size:42px;margin:7px 0}.online{color:var(--green);text-shadow:0 0 12px rgba(109,255,85,.5)}.offline{color:#ff4444}.players{font-size:17px}.small-btn{display:inline-block;margin-top:16px;padding:9px 38px;border:1px solid #75532a;background:rgba(20,12,8,.72)}

.container{max-width:1500px;margin:0 auto;padding:22px 34px 36px}
.main-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0 70px 20px}
.main-button{min-height:78px;display:grid;grid-template-columns:58px 1fr;grid-template-rows:1fr 1fr;align-items:center;background:linear-gradient(180deg,rgba(14,15,17,.88),rgba(5,6,8,.88));box-shadow:inset 0 0 24px #000,0 8px 26px rgba(0,0,0,.55);padding:13px 18px}
.main-button.red{background:linear-gradient(180deg,rgba(61,21,13,.9),rgba(12,7,6,.88))}
.icon{grid-row:1/3;font-size:41px;color:#d7ad60;text-align:center;font-family:Georgia,serif;filter:drop-shadow(0 0 6px #000)}.icon.circle{font-size:34px}
.main-button b{font-family:Georgia,serif;font-size:26px;color:#ffe3a5;letter-spacing:.5px}.main-button em{font-style:normal;color:#bbb;margin-top:-8px}

.grid{display:grid;grid-template-columns:1.05fr 1.05fr 1.15fr 1.25fr;gap:18px;align-items:start}
.panel{background:linear-gradient(180deg,rgba(8,9,11,.86),rgba(4,5,6,.86));box-shadow:inset 0 0 28px #000,0 12px 32px rgba(0,0,0,.58);padding:22px;min-height:250px}
.panel h1,.panel h2{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(215,173,96,.22);font-family:Georgia,serif;color:#ffd98c;text-align:center;font-weight:400;letter-spacing:.8px}
.rank{display:grid;grid-template-columns:28px 1fr 70px;gap:10px;border-bottom:1px solid #292119;padding:7px 0;font-size:15px}.rank em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank b{color:var(--red);text-align:right}.rank.clan b{color:#f2c479}
.stat{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #292119;padding:8px 0;font-size:15px}.stat i{color:#d6ad61;font-style:normal;margin-right:7px}.stat b{color:#f3c982}.alive{color:var(--green)!important}.dead{color:#ff4d40!important}
.panel-btn{display:block;margin:18px auto 0;text-align:center;width:75%;padding:10px;border:1px solid #75532a;background:rgba(20,12,8,.72)}
.news article{display:grid;grid-template-columns:84px 1fr;gap:13px;border-bottom:1px solid #382818;padding:10px 0}.thumb{height:82px;border:1px solid #60441e;background:linear-gradient(135deg,#4b2f1a,#120f0c);overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}.news h3{margin:0;color:#ffd27b;font-size:16px}.news small{color:#8e826b}.news p{margin:6px 0 6px;line-height:1.35}
.hero-card{display:flex;gap:16px;align-items:center}.portrait{width:150px;height:100px;border:1px solid #60441e;background:linear-gradient(135deg,#38281d,#090909)}.dots{text-align:center;margin-top:14px}.dots span{display:inline-block;width:9px;height:9px;border-radius:50%;background:#8f7442;margin:0 5px}
.right-stack{display:grid;gap:14px}.server-time{text-align:center;min-height:112px}.clock{font-size:34px;color:#eee}.discord{min-height:120px}.discord-row{display:flex;align-items:center;gap:16px}.discord-icon{font-size:46px;color:#8192ff}.discord h2{text-align:left;padding:0;margin:0;border:0}
.subgrid{display:grid;grid-template-columns:300px 1fr 300px;gap:24px}.form-panel label{display:block;margin:12px 0;color:#d6b16d}.form-panel input{width:100%;padding:14px;background:#090909;border:1px solid #61451f;color:#eee;margin-top:6px}.form-panel button{width:100%;padding:15px;margin-top:14px;background:linear-gradient(#3b180d,#150b07);border:1px solid #8a662d;color:#f4ca78;cursor:pointer;font-weight:bold;letter-spacing:1px}.checkbox{display:flex!important;gap:10px}.checkbox input{width:auto!important}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:22px}.page-panel{max-width:900px;margin:0 auto}.footer{max-width:1500px;margin:0 auto;padding:22px 34px;border-top:1px solid #3d2b16;background:rgba(5,5,5,.78);display:flex;justify-content:space-between;color:#999}
@media(max-width:1250px){.hero{height:auto;grid-template-columns:1fr;padding:36px 20px}.brand{text-align:center;padding-left:0}.brand-l2,.brand-sub{margin-left:0}.status-box{justify-self:center}.main-nav{flex-wrap:wrap}.main-nav a{flex:1 1 auto;text-align:center}.main-buttons{margin:0 0 18px}.grid{grid-template-columns:repeat(2,1fr)}.subgrid{grid-template-columns:1fr}.side-info{display:none}}
@media(max-width:720px){.topbar{height:auto}.topbar-inner{height:auto;display:block;text-align:center;padding:9px 12px;line-height:1.4}.socials{justify-content:center;margin-top:5px;flex-wrap:wrap}.brand-main{font-size:46px}.brand-l2{font-size:34px}.brand-sub{letter-spacing:8px}.status-box{width:94%;padding:18px}.online,.offline{font-size:34px}.main-nav a{flex:1 1 50%;padding:13px 8px;font-size:12px}.container{padding:12px}.main-buttons,.grid,.twocol{grid-template-columns:1fr}.main-button{grid-template-columns:45px 1fr}.panel{min-height:auto;padding:18px}.footer{display:block;text-align:center}.news article{grid-template-columns:1fr}.thumb{display:none}}


/* =========================================================
   GOTHIC / FANTASY FRAME UPGRADE
   Tło, układ i PHP zostają bez zmian.
   Zmieniamy tylko ramki, narożniki i ornamenty.
========================================================= */

.frame{
  position:relative!important;
  border:1px solid rgba(190,137,62,.92)!important;
  background-clip:padding-box!important;
  box-shadow:
    inset 0 0 32px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(255,221,146,.06),
    0 12px 34px rgba(0,0,0,.72)!important;
}

.frame::before{
  content:""!important;
  position:absolute!important;
  inset:7px!important;
  border:1px solid rgba(213,166,89,.18)!important;
  clip-path:polygon(
    14px 0, calc(100% - 14px) 0,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0 calc(100% - 14px), 0 14px
  )!important;
  pointer-events:none!important;
  z-index:2!important;
}

.frame::after{
  content:""!important;
  position:absolute!important;
  inset:-3px!important;
  pointer-events:none!important;
  z-index:3!important;
  background:
    /* corner diamonds */
    radial-gradient(circle at 0 0, transparent 0 12px, rgba(255,218,130,.45) 13px 14px, transparent 15px) left top/38px 38px no-repeat,
    radial-gradient(circle at 100% 0, transparent 0 12px, rgba(255,218,130,.45) 13px 14px, transparent 15px) right top/38px 38px no-repeat,
    radial-gradient(circle at 0 100%, transparent 0 12px, rgba(255,218,130,.45) 13px 14px, transparent 15px) left bottom/38px 38px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 0 12px, rgba(255,218,130,.45) 13px 14px, transparent 15px) right bottom/38px 38px no-repeat,

    /* long gothic corner strokes */
    linear-gradient(135deg, transparent 0 11px, rgba(232,180,87,.85) 12px 13px, transparent 14px) left top/58px 58px no-repeat,
    linear-gradient(225deg, transparent 0 11px, rgba(232,180,87,.85) 12px 13px, transparent 14px) right top/58px 58px no-repeat,
    linear-gradient(45deg, transparent 0 11px, rgba(232,180,87,.85) 12px 13px, transparent 14px) left bottom/58px 58px no-repeat,
    linear-gradient(315deg, transparent 0 11px, rgba(232,180,87,.85) 12px 13px, transparent 14px) right bottom/58px 58px no-repeat,

    /* ornamental side caps */
    linear-gradient(90deg, transparent, rgba(221,166,77,.7), transparent) center top/42% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(221,166,77,.55), transparent) center bottom/42% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(221,166,77,.45), transparent) left center/1px 50% no-repeat,
    linear-gradient(180deg, transparent, rgba(221,166,77,.45), transparent) right center/1px 50% no-repeat;
}

/* małe gotyckie groty pośrodku górnej i dolnej krawędzi */
.panel.frame > h2::before,
.panel.frame > h1::before{
  content:"◆";
  color:rgba(214,173,97,.45);
  margin-right:10px;
  font-size:11px;
  vertical-align:middle;
}

.panel.frame > h2::after,
.panel.frame > h1::after{
  content:"◆";
  color:rgba(214,173,97,.45);
  margin-left:10px;
  font-size:11px;
  vertical-align:middle;
}

/* panele bardziej fantasy-metal, mniej prostokątne */
.panel.frame{
  background:
    linear-gradient(180deg, rgba(16,17,19,.88), rgba(4,5,7,.90)),
    radial-gradient(circle at 50% 0, rgba(184,122,46,.09), transparent 42%)!important;
  border-radius:0!important;
  clip-path:polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px),
    0 12px
  );
}

/* status jak ozdobna tablica */
.status-box.frame{
  clip-path:polygon(
    18px 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    18px 100%,
    0 calc(100% - 18px),
    0 18px
  );
  background:
    linear-gradient(180deg,rgba(17,18,20,.92),rgba(4,5,7,.94)),
    radial-gradient(circle at 50% 0,rgba(210,152,68,.12),transparent 44%)!important;
}

/* główne przyciski: bardziej jak fantasy plaque, nie zwykły prostokąt */
.main-button.frame{
  min-height:86px!important;
  clip-path:polygon(
    20px 0,
    calc(100% - 20px) 0,
    100% 18px,
    calc(100% - 8px) 50%,
    100% calc(100% - 18px),
    calc(100% - 20px) 100%,
    20px 100%,
    0 calc(100% - 18px),
    8px 50%,
    0 18px
  );
  background:
    linear-gradient(180deg,rgba(18,19,22,.92),rgba(4,5,7,.94)),
    radial-gradient(circle at 50% 0,rgba(218,160,73,.13),transparent 48%)!important;
}

.main-button.frame.red{
  background:
    linear-gradient(180deg,rgba(68,24,15,.94),rgba(10,5,5,.95)),
    radial-gradient(circle at 50% 0,rgba(255,92,36,.13),transparent 48%)!important;
}

/* przyciski ZOBACZ WIĘCEJ też fantasy */
.panel-btn,
.small-btn{
  position:relative;
  clip-path:polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 50%,
    calc(100% - 12px) 100%,
    12px 100%,
    0 50%
  );
  background:
    linear-gradient(180deg,rgba(35,20,9,.92),rgba(8,5,4,.96))!important;
  border:1px solid rgba(170,121,55,.95)!important;
  box-shadow:inset 0 0 16px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.55)!important;
}

/* ozdobne linie w nagłówkach paneli */
.panel h1,
.panel h2{
  position:relative;
  border-bottom:none!important;
  padding-bottom:16px!important;
}

.panel h1::before,
.panel h2::before{
  text-shadow:0 0 8px rgba(0,0,0,.9);
}

.panel h1::after,
.panel h2::after{
  text-shadow:0 0 8px rgba(0,0,0,.9);
}

.panel h1,
.panel h2{
  background:
    linear-gradient(90deg, transparent, rgba(214,173,97,.38), transparent) center bottom/86% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(214,173,97,.12), transparent) center calc(100% - 5px)/60% 1px no-repeat;
}

/* mini panele newsów - dekoracyjniejsze */
.news article{
  position:relative;
  border-bottom:1px solid rgba(118,85,42,.65)!important;
}

.thumb{
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  box-shadow:inset 0 0 16px #000;
}

/* Discord i time jako osobne tablice */
.right-stack .panel.frame{
  min-height:auto!important;
}

/* delikatna animacja ramek */
.frame{
  transition:filter .18s ease, box-shadow .18s ease, transform .18s ease;
}
.frame:hover{
  filter:brightness(1.07);
  box-shadow:
    inset 0 0 32px rgba(0,0,0,.95),
    0 0 18px rgba(214,173,97,.16),
    0 14px 36px rgba(0,0,0,.76)!important;
}

.main-button.frame:hover{
  transform:translateY(-1px);
}


/* Registration messages */
.form-ok,.form-error{
  margin:12px 0 18px;
  padding:12px 14px;
  border-radius:3px;
  text-align:center;
  font-weight:bold;
}
.form-ok{color:#92ff86;border:1px solid rgba(100,255,90,.45);background:rgba(20,70,20,.35)}
.form-error{color:#ff9a8d;border:1px solid rgba(255,80,60,.45);background:rgba(80,20,15,.38)}


/* Murderer of the Month */
.portrait.murderer{
  background:
    radial-gradient(circle at 50% 35%, rgba(120,12,8,.45), transparent 45%),
    linear-gradient(135deg,#3a0907,#100707)!important;
}


/* Hero/Murderer portrait images only */
.hero-card .portrait{
  background:
    linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.18)),
    url('../img/hero_of_month.jpg') center center/cover no-repeat!important;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.88),
    0 0 18px rgba(74,145,255,.18)!important;
}

.hero-card .portrait.murderer{
  background:
    linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.22)),
    url('../img/murderer_of_month.jpg') center center/cover no-repeat!important;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.88),
    0 0 20px rgba(255,45,25,.20)!important;
}


/* REAL ARTWORK PORTRAITS */
.hero-card .portrait{
  background:url('../img/hero_of_month.jpg') center center/cover no-repeat!important;
  border:1px solid rgba(255,190,80,.45)!important;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.88),
    0 0 18px rgba(74,145,255,.22)!important;
}

.hero-card .portrait.murderer{
  background:url('../img/murderer_of_month.jpg') center center/cover no-repeat!important;
  border:1px solid rgba(190,45,25,.55)!important;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.88),
    0 0 22px rgba(255,45,25,.28)!important;
}


/* FORCE FIX: real artwork portraits, override every old placeholder */
body .panel .hero-card .portrait,
body .hero-card .portrait,
.hero-card div.portrait{
  width:150px!important;
  height:100px!important;
  min-width:150px!important;
  background-image:url('../img/hero_of_month.jpg?v=force2')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-color:transparent!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:-9999px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,190,80,.65)!important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.88),0 0 18px rgba(74,145,255,.25)!important;
}

body .panel .hero-card .portrait::before,
body .panel .hero-card .portrait::after,
body .hero-card .portrait::before,
body .hero-card .portrait::after{
  content:none!important;
  display:none!important;
}

body .panel .hero-card .portrait.murderer,
body .hero-card .portrait.murderer,
.hero-card div.portrait.murderer{
  background-image:url('../img/murderer_of_month.jpg?v=force2')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-color:transparent!important;
  border:1px solid rgba(205,45,28,.70)!important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.88),0 0 22px rgba(255,45,25,.32)!important;
}

.form-panel textarea{width:100%;min-height:95px;padding:14px;background:#090909;border:1px solid #61451f;color:#eee;margin-top:6px;resize:vertical}
.news-main-image{width:100%;max-height:360px;object-fit:cover;border:1px solid #76552a;margin:15px 0;box-shadow:0 10px 25px rgba(0,0,0,.45)}
.news-meta{color:#bca16b;text-align:center}.news-lead{color:#ffd98c;font-weight:bold}.news-content{line-height:1.7;color:#ddd}
.news .thumb img{width:100%;height:100%;object-fit:cover}
.form-ok,.form-error{margin:12px 0 18px;padding:12px 14px;text-align:center;font-weight:bold}
.form-ok{color:#92ff86;border:1px solid rgba(100,255,90,.45);background:rgba(20,70,20,.35)}
.form-error{color:#ff9a8d;border:1px solid rgba(255,80,60,.45);background:rgba(80,20,15,.38)}


/* =========================
   DISCORD + LOGIN FINAL FIX
========================= */

.discord-icon-img{
  width:42px;
  height:42px;
  object-fit:contain;
  flex:0 0 42px;
  filter:drop-shadow(0 0 8px rgba(88,101,242,.65));
}

.login-link.logged{
  color:#ffd98c!important;
}

.discord-row{
  display:flex;
  align-items:center;
  gap:16px;
}

.discord .panel-btn,
.lk-discord-mini .panel-btn{
  cursor:pointer;
}

/* =========================================================
   L2 KNIGHT - FINAL NAV + HOME BUTTON GRAPHICS
   Gotowy patch: górne menu + 4 duże guziki na stronie głównej.
   Bez zmiany HTML, linków, PHP, panelu gracza i admina.
========================================================= */

/* ---------- GÓRNE MENU ---------- */
.main-nav a{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  color:#f7e6bd!important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.96),
    0 0 9px rgba(0,0,0,.95),
    0 0 15px rgba(0,0,0,.85)!important;
  transition:filter .16s ease, color .16s ease, border-color .16s ease!important;
}

/* ciemna warstwa na grafice, żeby tekst menu nie ginął */
.main-nav a::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.52),rgba(0,0,0,.22),rgba(0,0,0,.52)),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.48))!important;
  pointer-events:none!important;
}

.main-nav a:hover,
.main-nav a.active{
  filter:brightness(1.18) saturate(1.08)!important;
  color:#ffe5a8!important;
}

/* aktywna kreska zostaje nad obrazkiem */
.main-nav a.active::after{
  z-index:4!important;
}

/* 1. STRONA GŁÓWNA */
.main-nav a:nth-child(1){
  background-image:url('../img/nav/nav_home_bg.jpg')!important;
}

/* 2. REJESTRACJA */
.main-nav a:nth-child(2){
  background-image:url('../img/nav/nav_register_bg.jpg')!important;
}

/* 3. POBIERZ GRĘ */
.main-nav a:nth-child(3){
  background-image:url('../img/nav/nav_download_bg.jpg')!important;
}

/* 4. RANKINGI */
.main-nav a:nth-child(4){
  background-image:url('../img/nav/nav_rankings_bg.jpg')!important;
}

/* 5. STATYSTYKI */
.main-nav a:nth-child(5){
  background-image:url('../img/nav/nav_stats_bg.jpg')!important;
}

/* 6. INFORMACJE */
.main-nav a:nth-child(6){
  background-image:url('../img/nav/nav_info_bg.jpg')!important;
}

/* 7. CASTLE SIEGE */
.main-nav a:nth-child(7){
  background-image:url('../img/nav/nav_siege_bg.jpg')!important;
}

/* 8. BOSSY */
.main-nav a:nth-child(8){
  background-image:url('../img/nav/nav_bosses_bg.jpg')!important;
}

/* 9. WSPARCIE */
.main-nav a:nth-child(9){
  background-image:url('../img/nav/nav_support_bg.jpg')!important;
}

/* ---------- 4 DUŻE GUZIKI NA STRONIE GŁÓWNEJ ---------- */
.main-buttons .main-button.frame,
.hero-buttons .main-button.frame,
.home-buttons .main-button.frame{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
}

/* usunięcie małych ikon/kwadratów obok napisów */
.main-buttons .main-button.frame .tile-icon,
.main-buttons .main-button.frame .main-button-icon,
.main-buttons .main-button.frame .button-icon,
.main-buttons .main-button.frame .icon,
.main-buttons .main-button.frame img,
.main-buttons .main-button.frame svg,
.hero-buttons .main-button.frame .tile-icon,
.hero-buttons .main-button.frame .main-button-icon,
.hero-buttons .main-button.frame .button-icon,
.hero-buttons .main-button.frame .icon,
.hero-buttons .main-button.frame img,
.hero-buttons .main-button.frame svg,
.home-buttons .main-button.frame .tile-icon,
.home-buttons .main-button.frame .main-button-icon,
.home-buttons .main-button.frame .button-icon,
.home-buttons .main-button.frame .icon,
.home-buttons .main-button.frame img,
.home-buttons .main-button.frame svg{
  display:none!important;
}

/* warstwa na dużych guzikach: lżej niż poprzednio, żeby obrazek było widać */
.main-buttons .main-button.frame::before,
.hero-buttons .main-button.frame::before,
.home-buttons .main-button.frame::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.36),rgba(0,0,0,.12),rgba(0,0,0,.30)),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.22))!important;
  pointer-events:none!important;
}

/* tekst nad tłem */
.main-buttons .main-button.frame > *,
.hero-buttons .main-button.frame > *,
.home-buttons .main-button.frame > *{
  position:relative!important;
  z-index:3!important;
}

.main-buttons .main-button.frame b,
.main-buttons .main-button.frame em,
.main-buttons .main-button.frame span,
.hero-buttons .main-button.frame b,
.hero-buttons .main-button.frame em,
.hero-buttons .main-button.frame span,
.home-buttons .main-button.frame b,
.home-buttons .main-button.frame em,
.home-buttons .main-button.frame span{
  margin-left:0!important;
  padding-left:0!important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.96),
    0 0 12px rgba(0,0,0,.94),
    0 0 18px rgba(75,35,0,.55)!important;
}

/* po usunięciu ikony przesuwamy napis ładnie w lewo, ale bez rozwalania układu */
.main-buttons .main-button.frame,
.hero-buttons .main-button.frame,
.home-buttons .main-button.frame{
  padding-left:34px!important;
}

/* 1. REJESTRACJA */
.main-buttons .main-button.frame:nth-child(1),
.hero-buttons .main-button.frame:nth-child(1),
.home-buttons .main-button.frame:nth-child(1){
  background-image:url('../img/home-buttons/home_register_bg.jpg')!important;
}

/* 2. POBIERZ GRĘ */
.main-buttons .main-button.frame:nth-child(2),
.hero-buttons .main-button.frame:nth-child(2),
.home-buttons .main-button.frame:nth-child(2){
  background-image:url('../img/home-buttons/home_download_bg.jpg')!important;
}

/* 3. PANEL GRACZA */
.main-buttons .main-button.frame:nth-child(3),
.hero-buttons .main-button.frame:nth-child(3),
.home-buttons .main-button.frame:nth-child(3){
  background-image:url('../img/home-buttons/home_account_bg.jpg')!important;
}

/* 4. RANKINGI */
.main-buttons .main-button.frame:nth-child(4),
.hero-buttons .main-button.frame:nth-child(4),
.home-buttons .main-button.frame:nth-child(4){
  background-image:url('../img/home-buttons/home_ranking_bg.jpg')!important;
}

.main-buttons .main-button.frame:hover,
.hero-buttons .main-button.frame:hover,
.home-buttons .main-button.frame:hover{
  filter:brightness(1.14) saturate(1.08)!important;
}

/* =========================================================
   L2 KNIGHT - MAIN BUTTON TEXT ALIGN FIX
   Poprawia wyrównanie tekstu w 4 głównych ramkach dla długich tłumaczeń.
   Napisy są centrowane, nie uciekają w bok i mieszczą się w ramce.
========================================================= */

.main-buttons .main-button.frame,
.hero-buttons .main-button.frame,
.home-buttons .main-button.frame{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:5px!important;
  padding:20px 18px!important;
  box-sizing:border-box!important;
}

.main-buttons .main-button.frame b,
.hero-buttons .main-button.frame b,
.home-buttons .main-button.frame b{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:0!important;
  text-align:center!important;
  line-height:1.12!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:auto!important;
  font-size:clamp(13px, 1.12vw, 20px)!important;
}

.main-buttons .main-button.frame em,
.hero-buttons .main-button.frame em,
.home-buttons .main-button.frame em{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:3px auto 0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1.18!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:auto!important;
  font-size:clamp(10px, .82vw, 13px)!important;
}

/* zabezpieczenie: ikony dalej ukryte */
.main-buttons .main-button.frame .tile-icon,
.main-buttons .main-button.frame .main-button-icon,
.main-buttons .main-button.frame .button-icon,
.main-buttons .main-button.frame .icon,
.main-buttons .main-button.frame img,
.main-buttons .main-button.frame svg,
.hero-buttons .main-button.frame .tile-icon,
.hero-buttons .main-button.frame .main-button-icon,
.hero-buttons .main-button.frame .button-icon,
.hero-buttons .main-button.frame .icon,
.hero-buttons .main-button.frame img,
.hero-buttons .main-button.frame svg,
.home-buttons .main-button.frame .tile-icon,
.home-buttons .main-button.frame .main-button-icon,
.home-buttons .main-button.frame .button-icon,
.home-buttons .main-button.frame .icon,
.home-buttons .main-button.frame img,
.home-buttons .main-button.frame svg{
  display:none!important;
}

/* =========================================================
   L2 KNIGHT - RANKINGS FRAME SMALLER FIX
   Zmniejsza ramki na podstronie RANKINGI, żeby nie były większe od reszty strony.
========================================================= */

.ranking-page{
  width:min(1180px, 96vw)!important;
  margin:0 auto 36px!important;
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  gap:18px!important;
  align-items:start!important;
}

.ranking-page .panel{
  min-height:0!important;
  max-height:610px!important;
  overflow-y:auto!important;
  padding:18px 18px 20px!important;
}

.ranking-page .panel h2{
  font-size:22px!important;
  margin-bottom:10px!important;
  padding-bottom:10px!important;
}

.ranking-page .rank{
  grid-template-columns:30px minmax(0,1fr) 74px!important;
  gap:8px!important;
  padding:5px 0!important;
  font-size:14px!important;
}

.ranking-page .rank span{
  color:#d6ad61!important;
  text-align:center!important;
}

.ranking-page .rank em{
  min-width:0!important;
}

.ranking-page .rank b{
  font-size:13px!important;
}

/* wariant TOP CLANY po wejściu z linku */
.clan-page-panel{
  max-width:720px!important;
  min-height:0!important;
  padding:18px 22px 22px!important;
}

.clan-page-panel .rank{
  max-width:600px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:5px 0!important;
  font-size:14px!important;
}

@media(max-width:1100px){
  .ranking-page{
    grid-template-columns:1fr!important;
    width:min(760px, 96vw)!important;
  }
  .ranking-page .panel{
    max-height:none!important;
    overflow:visible!important;
  }
}

/* =========================================================
   L2 KNIGHT - LOGO SUBTITLE PvP SOFT FIX
   Delikatniejszy napis PvP pod logo KNIGHT.
========================================================= */

.brand-sub{
  font-size:24px!important;
  line-height:1!important;
  letter-spacing:14px!important;
  font-weight:800!important;
  color:#e0b767!important;
  text-transform:uppercase!important;
  margin-top:7px!important;
  padding-left:14px!important;
  opacity:.92!important;
  filter:none!important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 7px rgba(224,183,103,.34),
    0 0 12px rgba(232,64,30,.18)!important;
}

@media(max-width:700px){
  .brand-sub{
    font-size:18px!important;
    letter-spacing:9px!important;
    padding-left:9px!important;
  }
}

/* =========================================================
   L2 KNIGHT - GLOBAL HOME BACKGROUND RESTORE
   Mocne przywrócenie tła strony, gdy przeglądarka/CSS zgubi background.
========================================================= */

html,
body{
  min-height:100%!important;
  background:#05070c url('../img/l2knight_background.jpg') center top/cover no-repeat fixed!important;
}

.bg{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:-999!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.42)),
    linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.01) 33%,rgba(0,0,0,.01) 67%,rgba(0,0,0,.28)),
    url('../img/l2knight_background.jpg') center top/cover no-repeat fixed!important;
}

.bg:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.01) 33%,rgba(0,0,0,.01) 67%,rgba(0,0,0,.28)),
    linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.25) 88%)!important;
}

/* =========================================================
   L2 KNIGHT - MAIN BUTTONS REAL GRID ALIGN FIX
   TYLKO wyrównanie 4 guzików do realnej sekcji .grid na stronie głównej.
   Rejestracja = TOP 10 PVP
   Pobierz grę = TOP 10 PK
   Panel gracza = Statystyki serwera
   Rankingi = Aktualności
========================================================= */

.container > .main-buttons{
  display:grid!important;
  grid-template-columns:1.05fr 1.05fr 1.15fr 1.25fr!important;
  gap:18px!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 20px 0!important;
  padding:0!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}

.container > .main-buttons > .main-button.frame{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  height:82px!important;
  min-height:82px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:18px!important;
}

/* Ta sekcja już istnieje jako .grid. Nie zmieniam treści, tylko pilnuję tych samych kolumn i gapu. */
.container > .grid{
  display:grid!important;
  grid-template-columns:1.05fr 1.05fr 1.15fr 1.25fr!important;
  gap:18px!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  align-items:start!important;
}

/* Ikony dalej ukryte w głównych guzikach */
.container > .main-buttons > .main-button.frame .icon-img,
.container > .main-buttons > .main-button.frame .tile-icon,
.container > .main-buttons > .main-button.frame .main-button-icon,
.container > .main-buttons > .main-button.frame .button-icon,
.container > .main-buttons > .main-button.frame .icon,
.container > .main-buttons > .main-button.frame img,
.container > .main-buttons > .main-button.frame svg{
  display:none!important;
}

@media(max-width:1100px){
  .container > .main-buttons,
  .container > .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }
}

@media(max-width:650px){
  .container > .main-buttons,
  .container > .grid{
    grid-template-columns:1fr!important;
  }

  .container > .main-buttons > .main-button.frame{
    height:76px!important;
    min-height:76px!important;
  }
}

/* =========================================================
   L2 KNIGHT - HERO LOGO IMAGE PATCH
   Wstawia graficzne logo L2 Knight PvP zamiast tekstowego L2 / KNIGHT / PvP.
========================================================= */

.brand.brand-image{
  padding-left:72px!important;
  text-align:left!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:210px!important;
}

.hero-logo-img{
  display:block!important;
  width:min(620px, 44vw)!important;
  max-width:100%!important;
  height:auto!important;
  filter:
    drop-shadow(0 8px 22px rgba(0,0,0,.92))
    drop-shadow(0 0 14px rgba(255,80,30,.18))!important;
  user-select:none!important;
  pointer-events:none!important;
}

@media(max-width:900px){
  .brand.brand-image{
    padding-left:20px!important;
    justify-content:center!important;
    min-height:160px!important;
  }

  .hero-logo-img{
    width:min(520px, 86vw)!important;
  }
}