/* purecabal.com — styl strony (paleta z interfejsu klienta Cabal EP39). Bez stylów inline: ścisły CSP (style-src 'self'). */
/* czcionki z własnego serwera (bez Google — prywatność graczy i CSP font-src 'self') */
@font-face { font-family: "Cinzel"; font-weight: 600 800; font-display: swap; src: url(/static/fonts/cinzel-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cinzel"; font-weight: 600 800; font-display: swap; src: url(/static/fonts/cinzel-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-weight: 400 700; font-display: swap; src: url(/static/fonts/notosans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-weight: 400 700; font-display: swap; src: url(/static/fonts/notosans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: dark;
  --bg: #0a0c0f; --bg2: #0f1216; --panel: #14181d; --panel2: #191e24; --inset: #0d1014;
  --line: #242b32; --line2: #323b44; --line-hi: #4a5560;
  --bar1: #2c4252; --bar2: #17232c;
  --text: #d8d5ce; --muted: #8b8d8f; --dim: #62656a;
  --orange: #e8973c; --orange2: #c97a26; --yellow: #ffe17a; --ok: #6cc36c; --bad: #c95b4b;
  --capella: #d2675a; --procyon: #5f95c9;
  --serif: "Cinzel", "Trajan Pro", Georgia, serif; --sans: "Noto Sans", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans); overflow-x: hidden; }
a { color: var(--yellow); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.wrap { width: min(1200px, calc(100% - 32px)); margin: 0 auto; }

/* ---------- górny pasek ---------- */
.top { position: sticky; top: 0; z-index: 30; background: rgba(12, 15, 19, .88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line2); }
.top .wrap { display: flex; align-items: center; gap: 30px; height: 68px; }
.logo { display: block; width: 190px; flex: none; }
.logo svg, .logo img, .hero-logo img { width: 100%; height: auto; display: block; }
.nav { display: flex; gap: 24px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav a { position: relative; color: var(--muted); font-weight: 600; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 0; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -2px; height: 2px; background: var(--orange); transition: left .25s, right .25s; box-shadow: 0 0 8px var(--orange); }
.nav a:hover, .nav a.on { color: #f0ece3; text-decoration: none; }
.nav a:hover::after, .nav a.on::after { left: 0; right: 0; }
.akcje { display: flex; gap: 10px; flex: none; }

/* ---------- przyciski jak w grze ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 20px; border-radius: 3px;
  font: 600 12.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: #e9e6df;
  background: linear-gradient(#3a434c, #252b32); border: 1px solid #56616c; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 6px rgba(0,0,0,.4); transition: transform .15s, filter .15s; }
.btn:hover { text-decoration: none; filter: brightness(1.15); transform: translateY(-1px); }
.btn.main { color: #1d1306; background: linear-gradient(#f5bd6c, #d4842d 55%, #b8691c); border-color: #ffd08e; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(0,0,0,.4), 0 4px 18px rgba(232,151,60,.25); }
.btn.main::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: blysk 4.5s infinite; }
@keyframes blysk { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn.duzy { height: 48px; padding: 0 30px; font-size: 14px; }
.btn.full { width: 100%; }

/* ---------- hero z pokazem grafik ---------- */
.hero { position: relative; height: min(720px, 88vh); min-height: 560px; overflow: hidden; border-bottom: 1px solid var(--line2); }
.slajd { position: absolute; inset: -4%; background-size: cover; background-position: center 30%; opacity: 0; transition: opacity 1.6s ease; }
.slajd.on { opacity: 1; animation: kenburns 14s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.08) translate(1%, 0); } to { transform: scale(1) translate(-1%, -1%); } }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 70% 40%, transparent 30%, rgba(10,12,15,.65) 80%),
              linear-gradient(90deg, rgba(10,12,15,.97) 0%, rgba(10,12,15,.78) 38%, rgba(10,12,15,.1) 75%),
              linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
#iskry { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero-logo { width: min(520px, 90%); margin: 0 0 18px -10px; filter: drop-shadow(0 6px 30px rgba(0,0,0,.8)); animation: wejscie 1.2s ease both; }
.hero h1 { font: 700 clamp(26px, 3.4vw, 40px)/1.15 var(--serif); margin: 0 0 14px; color: #f3ead6; letter-spacing: .02em; max-width: 620px; text-shadow: 0 3px 20px rgba(0,0,0,.9); animation: wejscie 1.2s .15s ease both; }
.hero p { color: #c4beb1; max-width: 600px; margin: 0 0 28px; font-size: 16.5px; animation: wejscie 1.2s .3s ease both; }
.hero .akcje { animation: wejscie 1.2s .45s ease both; }
@keyframes wejscie { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; animation: wejscie 1s ease both; }
.kropki { position: absolute; z-index: 3; right: 32px; bottom: 90px; display: grid; gap: 10px; }
.kropki button { width: 10px; height: 10px; padding: 0; border: 1px solid #c9c2b2; background: transparent; transform: rotate(45deg); cursor: pointer; }
.kropki button.on { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 10px var(--orange); }

/* ---------- status ---------- */
.status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line2); border: 1px solid var(--line2); margin-top: -46px; position: relative; z-index: 4; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.status div { background: linear-gradient(#171c22, #12161b); padding: 16px 20px; }
.status b { display: block; font-size: 21px; color: #f0ead9; font-weight: 700; }
.status small { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; }
.on-dot::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-right: 9px; vertical-align: 2px; animation: puls 2s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(108,195,108,.55); } 100% { box-shadow: 0 0 0 10px rgba(108,195,108,0); } }

/* ---------- sekcje ---------- */
.sekcja { padding: 80px 0 0; }
.sekcja-glowa { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.sekcja-glowa h2 { margin: 0; font: 700 clamp(24px, 3vw, 32px)/1.2 var(--serif); color: #f0e8d6; letter-spacing: .03em; }
.sekcja-glowa h2 small { display: block; font: 700 12px var(--sans); letter-spacing: .22em; color: var(--orange); text-transform: uppercase; margin-bottom: 6px; }
.ozdoba { height: 1px; background: linear-gradient(90deg, var(--orange), transparent); margin: 6px 0 0; width: 120px; }

/* karty z grafiką */
.karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.karta { position: relative; height: 340px; overflow: hidden; border: 1px solid var(--line2); background: #111; isolation: isolate; }
.karta .tlo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s ease, filter .8s ease; filter: saturate(.85) brightness(.75); z-index: -2; }
.karta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,10,13,.97) 10%, rgba(8,10,13,.35) 60%, transparent); }
.karta::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(232,151,60,0); transition: border-color .4s; pointer-events: none; }
.karta:hover .tlo { transform: scale(1.07); filter: saturate(1.05) brightness(.9); }
.karta:hover::after { border-color: rgba(232,151,60,.55); }
.karta .opis { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; }
.karta .lbl { color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.karta h3 { margin: 6px 0 8px; font: 700 21px var(--serif); color: #f2ead8; }
.karta p { margin: 0; color: #b6b1a6; font-size: 14px; max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.karta:hover p { max-height: 120px; }

/* wojna nacji */
.wojna { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; border: 1px solid var(--line2); overflow: hidden; min-height: 380px; }
.nacja-pol { position: relative; padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.nacja-pol .tlo { position: absolute; inset: 0; background-size: cover; z-index: -2; filter: brightness(.55) saturate(.9); transition: filter .6s; }
.nacja-pol:hover .tlo { filter: brightness(.75) saturate(1.1); }
.nacja-pol.cap .tlo { background-position: 20% 30%; }
.nacja-pol.pro .tlo { background-position: 80% 30%; }
.nacja-pol::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.nacja-pol.cap::before { background: linear-gradient(90deg, rgba(60,14,12,.55), transparent), linear-gradient(0deg, rgba(8,10,13,.95), transparent 70%); }
.nacja-pol.pro::before { background: linear-gradient(270deg, rgba(12,30,60,.55), transparent), linear-gradient(0deg, rgba(8,10,13,.95), transparent 70%); }
.nacja-pol.pro { text-align: right; }
.nacja-pol h3 { margin: 0; font: 700 30px var(--serif); letter-spacing: .08em; }
.nacja-pol.cap h3 { color: #f0a197; text-shadow: 0 0 24px rgba(210,103,90,.5); }
.nacja-pol.pro h3 { color: #9cc4ec; text-shadow: 0 0 24px rgba(95,149,201,.5); }
.nacja-pol p { margin: 6px 0 0; color: #b9b3a6; font-size: 14px; }
.vs { display: grid; place-items: center; width: 90px; background: linear-gradient(#11151a, #0b0e11); border-left: 1px solid var(--line2); border-right: 1px solid var(--line2); font: 700 28px var(--serif); color: var(--orange); text-shadow: 0 0 16px rgba(232,151,60,.7); }
.wynik { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 24px; background: #0e1115; border-top: 1px solid var(--line2); font-size: 13px; color: var(--muted); }
.pasek { height: 10px; background: var(--procyon); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.pasek i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8d2f25, var(--capella)); box-shadow: 0 0 12px var(--capella); }
.wynik b { color: #f0ead9; font-size: 15px; }

/* klasy */
.klasy { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; }
.klasa-k { position: relative; padding: 18px 8px 14px; text-align: center; background: linear-gradient(#171b21, #111418); border: 1px solid var(--line2); cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s; }
.klasa-k img { width: 52px; height: 52px; margin: 0 auto 8px; filter: grayscale(1) brightness(1.2); transition: filter .3s, transform .3s; }
.klasa-k b { display: block; font-size: 13px; color: #e2ddd2; }
.klasa-k small { color: var(--muted); font-size: 11px; }
.klasa-k:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 18px rgba(232,151,60,.18); }
.klasa-k:hover img { filter: grayscale(0) sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.15); transform: scale(1.08); }

/* okna jak w grze */
.okno { background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.okno > h2 { margin: 0; padding: 0 16px; height: 38px; display: flex; align-items: center; justify-content: space-between; font: 600 14px var(--sans); letter-spacing: .05em; color: #dfe4e8;
  background: linear-gradient(var(--bar1), var(--bar2)); border-bottom: 1px solid #080b0d; box-shadow: inset 0 1px 0 rgba(140,180,200,.25); }
.okno > h2 a { font-weight: 500; font-size: 12px; color: #9fb4c2; }
.okno .tresc { padding: 18px; }
.sekcja-tyt { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #cfd2d4; margin: 0 0 12px; font-size: 14px; }
.sekcja-tyt::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8fb7cc; box-shadow: 0 0 4px #8fb7cc; }
.siatka { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }

/* newsy */
.news { display: grid; gap: 1px; background: var(--line); }
.news article { background: var(--panel); padding: 18px; display: grid; grid-template-columns: 70px 1fr; gap: 18px; transition: background .2s; }
.news article:hover { background: #181d23; }
.news time { text-align: center; border: 1px solid var(--line2); background: var(--inset); padding: 6px 0; height: fit-content; }
.news time b { display: block; font: 700 22px/1.1 var(--serif); color: var(--yellow); }
.news time span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.news h3 { margin: 0 0 4px; font-size: 16px; color: #ece6d8; }
.news p { margin: 0; color: #a9a7a1; font-size: 14px; }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }

/* tabele */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line2); }
td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: #1a1f25; }
td.nr { color: var(--muted); width: 44px; font-weight: 700; }
tbody tr:nth-child(1) td.nr { color: var(--yellow); }
tbody tr:nth-child(2) td.nr { color: #d8dce0; }
tbody tr:nth-child(3) td.nr { color: #d79b62; }
.kl { display: inline-flex; align-items: center; gap: 10px; }
.kl img { width: 28px; height: 28px; filter: brightness(1.4); }
.nacja { font-size: 12px; font-weight: 600; }
.nacja.cap { color: var(--capella); }
.nacja.pro { color: var(--procyon); }
.zakl { display: flex; gap: 2px; background: var(--inset); border-bottom: 1px solid var(--line2); overflow-x: auto; }
.zakl a { padding: 11px 18px; color: var(--muted); font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.zakl a.on { color: var(--text); border-color: var(--orange); background: var(--panel); text-decoration: none; }

/* pas pobierania */
.pas { position: relative; margin-top: 80px; padding: 60px 0; overflow: hidden; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); isolation: isolate; }
.pas .tlo { position: absolute; inset: 0; background-size: cover; background-position: center 35%; filter: brightness(.35) saturate(.8); z-index: -2; }
.pas::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,12,15,.95), rgba(10,12,15,.4)); }
.pas .wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pas h2 { margin: 0 0 6px; font: 700 30px var(--serif); color: #f3ead6; }
.pas p { margin: 0; color: #bdb7aa; }

/* podstrony */
.naglowek-pod { position: relative; padding: 70px 0 46px; border-bottom: 1px solid var(--line2); overflow: hidden; isolation: isolate; }
.naglowek-pod .tlo { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: brightness(.32) saturate(.8); z-index: -2; }
.naglowek-pod::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg), transparent 70%), linear-gradient(90deg, rgba(10,12,15,.9), transparent); }
.naglowek-pod h1 { margin: 0; font: 700 clamp(28px, 4vw, 42px) var(--serif); color: #f3ead6; }
.naglowek-pod p { margin: 8px 0 0; color: #b9b3a6; max-width: 560px; }
.okruszki { font-size: 12px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.okruszki a { color: var(--muted); }
main.pod { padding: 40px 0 80px; }

/* formularze */
form { display: grid; gap: 14px; }
label { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; display: grid; gap: 6px; }
input { height: 42px; padding: 0 14px; background: var(--inset); border: 1px solid var(--line2); border-radius: 2px; color: var(--text); font: 15px var(--sans); transition: border-color .2s, box-shadow .2s; }
input:focus { outline: none; border-color: #6e8ea3; box-shadow: 0 0 0 3px rgba(110,142,163,.18); }
.linki { display: flex; justify-content: space-between; font-size: 13px; }
.uwaga { font-size: 12.5px; color: var(--dim); margin: 14px 0 0; }

/* konto */
.konto { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.menu-konta { display: grid; background: var(--panel); border: 1px solid var(--line2); }
.menu-konta a { padding: 13px 18px; color: var(--muted); font-weight: 600; font-size: 14px; border-left: 3px solid transparent; border-bottom: 1px solid var(--line); }
.menu-konta a.on, .menu-konta a:hover { color: var(--text); background: #1a1f25; border-left-color: var(--orange); text-decoration: none; }
.menu-konta .wyloguj { color: var(--bad); }
.liczniki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.licznik { padding: 18px 20px; background: linear-gradient(#171c22, #12161b); border: 1px solid var(--line2); position: relative; overflow: hidden; }
.licznik small { display: block; font-size: 11px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.licznik b { font-size: 24px; color: #f0e8d6; }
.licznik .m { position: absolute; right: 16px; top: 16px; }
.licznik .ok { color: var(--ok); }
.postac { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.postac img { width: 44px; height: 44px; padding: 6px; background: var(--inset); border: 1px solid var(--line2); filter: brightness(1.3); }
.postac b { color: #ece6d8; }
.postac small { display: block; color: var(--muted); font-size: 12.5px; }
.znaczek { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line2); color: var(--muted); }
.znaczek.ok { color: var(--ok); border-color: rgba(108,195,108,.4); }

/* sklep */
.mileage { display: inline-grid; place-items: center; width: 40px; height: 40px; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); background: linear-gradient(#ee4f45, #8c1d1d); color: #fff; font: 700 16px var(--serif); }
.mileage.maly { width: 26px; height: 26px; font-size: 12px; }
.oferty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.oferta { position: relative; padding: 26px 18px 20px; text-align: center; background: linear-gradient(#1a1f25, #13171c); border: 1px solid var(--line2); transition: transform .25s, border-color .25s, box-shadow .25s; }
.oferta:hover { transform: translateY(-5px); border-color: var(--orange); box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 22px rgba(232,151,60,.15); }
.oferta b { display: block; font: 700 28px var(--serif); color: #f2ead8; margin-top: 10px; }
.oferta small { color: var(--muted); }
.oferta .cena { margin: 12px 0 16px; font-size: 18px; color: var(--yellow); font-weight: 700; }
.oferta .wstazka { position: absolute; top: 12px; right: -1px; background: var(--orange); color: #1d1306; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; padding: 3px 10px; text-transform: uppercase; }
.premium { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; border: 1px solid #6a4a22; margin-top: 30px; isolation: isolate; }
.premium .tlo { position: absolute; inset: 0; background-size: cover; background-position: 70% 30%; filter: brightness(.75) saturate(1.1); z-index: -2; }
.premium::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,11,6,.97) 40%, rgba(14,11,6,.4)); }
.premium .opis { padding: 36px; }
.premium h3 { margin: 0 0 8px; font: 700 30px var(--serif); color: #f6d58c; }
.premium ul { margin: 16px 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; }
.premium li { color: #d4cbb7; padding-left: 26px; position: relative; }
.premium li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; background: var(--orange); transform: rotate(45deg); box-shadow: 0 0 8px var(--orange); }
.premium .cena { font: 700 34px var(--serif); color: #fff3d6; margin: 0 0 14px; }

/* stopka */
footer { margin-top: 0; border-top: 1px solid var(--line2); background: var(--bg2); color: var(--dim); font-size: 13px; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; padding: 26px 0; flex-wrap: wrap; align-items: center; }
footer .logo { width: 130px; opacity: .8; }

/* pojawianie przy przewijaniu */
.odslon { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.odslon.widac { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .klasy { grid-template-columns: repeat(3, 1fr); }
  .oferty { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .siatka, .konto, .premium { grid-template-columns: 1fr; }
  .karty { grid-template-columns: 1fr; }
  .status { grid-template-columns: repeat(2, 1fr); }
  .wojna { grid-template-columns: 1fr; }
  .vs { width: auto; height: 50px; border: 0; }
  .nacja-pol.pro { text-align: left; }
  .top .akcje { display: none; }
  .liczniki { grid-template-columns: 1fr; }
  .kropki { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .odslon { opacity: 1; transform: none; }
}

/* ---------- newsy z obrazkami ---------- */
.newsy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.newsy.glowna { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 1fr; }
.news-k { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line2); overflow: hidden; color: inherit; transition: transform .25s, border-color .25s, box-shadow .25s; }
.news-k:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.news-k .obr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--inset); }
.news-k .obr img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease, filter .8s; filter: saturate(.9); }
.news-k:hover .obr img { transform: scale(1.06); filter: saturate(1.1); }
.news-k .obr .lbl { position: absolute; left: 12px; top: 12px; background: rgba(10,12,15,.85); border: 1px solid rgba(232,151,60,.5); padding: 3px 9px; }
.news-k .obr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,24,29,.9), transparent 45%); }
.news-k .tx { padding: 16px 18px 18px; display: grid; gap: 6px; flex: 1; align-content: start; }
.news-k time { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.news-k h3 { margin: 0; font: 700 17px/1.35 var(--serif); color: #f0e8d6; }
.news-k p { margin: 0; color: #a9a7a1; font-size: 14px; }
.newsy.glowna .news-k:first-child { grid-row: span 2; }
.newsy.glowna .news-k:first-child .obr { aspect-ratio: auto; flex: 1; min-height: 300px; }
.newsy.glowna .news-k:first-child h3 { font-size: 24px; }
.filtry { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.filtry a { padding: 6px 14px; border: 1px solid var(--line2); color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.filtry a.on, .filtry a:hover { color: #1d1306; background: var(--orange); border-color: var(--orange); text-decoration: none; }
.artykul { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
.artykul .tresc-a { background: var(--panel); border: 1px solid var(--line2); }
.artykul .tresc-a img.okladka { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.artykul .tresc-a .w { padding: 26px 30px 30px; }
.artykul .w h2 { font: 700 22px var(--serif); color: #f0e8d6; margin: 26px 0 10px; }
.artykul p { color: #c4c0b7; }
.artykul figure { margin: 22px 0; }
.artykul figure img { width: 100%; border: 1px solid var(--line2); }
.artykul figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.galeria figure { margin: 0; background: var(--panel); border: 1px solid var(--line2); }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria figcaption { padding: 8px 10px; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .newsy, .newsy.glowna { grid-template-columns: 1fr; } .newsy.glowna .news-k:first-child { grid-row: auto; } .artykul { grid-template-columns: 1fr; } }

/* ---------- tła z grafik (zamiast style="" — CSP) ---------- */
.bg-art_1 { background-image: url(/static/img/art_1.jpg); }
.bg-art_10 { background-image: url(/static/img/art_10.jpg); }
.bg-art_11 { background-image: url(/static/img/art_11.jpg); }
.bg-art_12 { background-image: url(/static/img/art_12.jpg); }
.bg-art_13 { background-image: url(/static/img/art_13.jpg); }
.bg-art_21 { background-image: url(/static/img/art_21.jpg); }
.bg-art_5 { background-image: url(/static/img/art_5.jpg); }
.bg-art_6 { background-image: url(/static/img/art_6.jpg); }
.bg-art_9 { background-image: url(/static/img/art_9.jpg); }

/* ---------- klasy zamiast stylów inline ---------- */
.siatka.dwie { grid-template-columns: 1fr 1fr; }
.siatka.waska { grid-template-columns: minmax(0, 420px) 1fr; }
.siatka.srednia { grid-template-columns: minmax(0, 520px) 1fr; }
.siatka.admin { grid-template-columns: 1.25fr 1fr; }
.siatka.odstep { margin-top: 24px; }
.zolty { color: var(--yellow); }
.lokalny { display: block; font-size: .78em; font-weight: 400; color: var(--muted, inherit); opacity: .8; white-space: nowrap; }
.opis-p { margin: 0 0 18px; color: #a9a7a1; }
.opis-p.maly { margin-bottom: 14px; font-size: 14px; }
.sekcja-tyt.dalej { margin-top: 22px; }
.sekcja-glowa.odstep { margin-top: 30px; }
.lista-boczna { display: grid; gap: 14px; }
.postac.bez { border: 0; }
.postac.dwie { grid-template-columns: 1fr auto; }
.nacja-pol.cap .tlo.bg-art_5, .slajd.wyzej { background-position: center 20%; }
label.check { display: flex; gap: 10px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 13.5px; }
label.check input { height: auto; }
select, textarea { background: var(--inset); border: 1px solid var(--line2); border-radius: 2px; color: var(--text); font: 15px var(--sans); }
select { height: 42px; padding: 0 10px; }
textarea { padding: 10px 14px; min-height: 90px; resize: vertical; }
select:focus, textarea:focus { outline: none; border-color: #6e8ea3; box-shadow: 0 0 0 3px rgba(110,142,163,.18); }
.btn[disabled], .btn.wyl { opacity: .45; pointer-events: none; filter: grayscale(.6); }
button.btn { border-style: solid; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.komunikat { padding: 12px 16px; margin: 0 0 18px; border: 1px solid var(--line2); background: var(--inset); font-size: 14px; }
.komunikat.blad { border-color: rgba(201,91,75,.6); color: #f0b3a8; }
.komunikat.ok { border-color: rgba(108,195,108,.5); color: #b7e3b7; }
.komunikat.info { border-color: rgba(232,151,60,.45); color: #f0d9a8; }
.pusto { padding: 30px 18px; text-align: center; color: var(--muted); }
.stronicowanie { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.stronicowanie a, .stronicowanie span { padding: 6px 12px; border: 1px solid var(--line2); color: var(--muted); font-weight: 600; }
.stronicowanie span { color: #1d1306; background: var(--orange); border-color: var(--orange); }
.blad-strona { text-align: center; padding: 40px 0; }
.blad-strona b { display: block; font: 700 64px var(--serif); color: var(--orange); }
.artykul .w ul, .artykul .w ol { color: #c4c0b7; }
.artykul .w img { border: 1px solid var(--line2); margin: 18px 0; }
.artykul .w blockquote { margin: 18px 0; padding: 4px 18px; border-left: 3px solid var(--orange); color: #b9b3a6; }

/* ---------- panel newsów ---------- */
.adm-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; }
.adm-top .kto { color: var(--muted); font-size: 13px; }
.adm-tab td { vertical-align: middle; }
.adm-tab img { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line2); }
.adm-tab b { color: #ece6d8; }
.adm-tab small { color: var(--muted); }
.adm-tab .akc { white-space: nowrap; }
.adm-tab form { display: inline; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--yellow); cursor: pointer; }
.link-btn.zle { color: var(--bad); }
.znaczek.szkic { color: var(--orange); border-color: rgba(232,151,60,.4); }
.dwa-pola { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.okladki { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 330px; overflow-y: auto; padding: 2px; }
.okladki label { display: block; position: relative; cursor: pointer; }
.okladki input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.okladki img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--line2); }
.okladki input:checked + img { border-color: var(--orange); box-shadow: 0 0 12px rgba(232,151,60,.4); }
.okladki input:focus-visible + img { outline: 2px solid #6e8ea3; }
.okladki-grupa { font-size: 11px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; grid-column: 1 / -1; margin-top: 6px; }
.edytor { border: 1px solid var(--line2); background: var(--inset); }
.edytor .pasek-n { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line2); flex-wrap: wrap; }
.edytor .pasek-n .btn { height: 28px; padding: 0 10px; }
.edytor .pole { min-height: 260px; padding: 12px 14px; color: var(--text); font-size: 14.5px; text-transform: none; letter-spacing: 0; outline: none; }
.edytor .pole img { max-width: 100%; }
.edytor .pole h2 { font: 700 20px var(--serif); color: #f0e8d6; }
.wybor-obrazu { position: fixed; inset: 0; z-index: 50; background: rgba(5,6,8,.85); display: none; padding: 40px 16px; overflow-y: auto; }
.wybor-obrazu.on { display: block; }
.wybor-obrazu .okno { max-width: 1000px; margin: 0 auto; }
.przyciski { display: flex; gap: 10px; flex-wrap: wrap; }
.wgraj { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.wgraj input[type=file] { height: auto; padding: 8px; }
.qr-info { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .dwa-pola { grid-template-columns: 1fr; } }
.bg-art_14 { background-image: url(/static/img/art_14.jpg); }

/* karty świata: obraz jako <img> (dowolna grafika z biblioteki, bez style="" — CSP) */
.karta img.tlo { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.karta:hover { text-decoration: none; }
.adm-tab .ukryta { opacity: .45; }
.okno > h2 span { font-weight: 500; font-size: 12px; color: #9fb4c2; }
.dni-tyg { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* sklep: No Pay2Win */
.np2w { margin-bottom: 10px; }
.np2w-baner { width: 100%; height: auto; border: 1px solid var(--line2); border-bottom: 0; }
.np2w-lista { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; }
.np2w-lista li { position: relative; padding-left: 26px; color: #c4c0b7; }
.np2w-lista li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; background: var(--orange); transform: rotate(45deg); box-shadow: 0 0 8px var(--orange); }
.np2w-lista b { color: #f0e8d6; }
.np2w-koniec { margin: 0; color: var(--yellow); font-weight: 600; }

/* konta graczy */
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.uwaga.podpole { margin: -8px 0 0; }
.menu-konta form { display: block; border-bottom: 1px solid var(--line); }
.menu-konta .wyloguj { width: 100%; text-align: left; padding: 13px 18px; background: none; border: 0; border-left: 3px solid transparent; font: 600 14px var(--sans); color: var(--bad); cursor: pointer; }
.menu-konta .wyloguj:hover { background: #1a1f25; border-left-color: var(--bad); }
.licznik .zle { color: var(--bad); }
.licznik b { word-break: break-word; }

/* sklep */
.saldo { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line2); }
.saldo b { color: #f0e8d6; font-size: 18px; }
.saldo small { color: var(--muted); }
form.oferta { display: block; }
.zgoda-kup { font-size: 11.5px; color: var(--muted); text-align: left; margin: 0 0 10px; }
.zgoda-kup input { flex: none; }
.historia td { font-size: 13.5px; }
.odstep-g { margin-top: 24px; }

/* dokumenty: zasady i polityka prywatności */
.dokument .w h2 { font-size: 19px; margin-top: 30px; }
.dokument .w li { margin-bottom: 6px; }
.dokument .operator { padding: 12px 16px; background: var(--inset); border: 1px solid var(--line2); }
.tabela-dok { margin: 10px 0 16px; }
.tabela-dok td { vertical-align: top; color: #c4c0b7; font-size: 13.5px; }
@media (max-width: 700px) { .tabela-dok, .tabela-dok tbody, .tabela-dok tr, .tabela-dok td { display: block; } .tabela-dok thead { display: none; } .tabela-dok tr { border-bottom: 1px solid var(--line2); padding: 8px 0; } }

/* ---------- zakładka Changes (wiki zmian) i tryb edycji ---------- */
.wiki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.wiki-lista { display: grid; gap: 2px; padding: 8px; }
.wiki-poz { display: block; padding: 12px 12px; border-left: 2px solid transparent; color: var(--text); }
.wiki-poz:hover { text-decoration: none; background: var(--panel2); border-left-color: var(--orange); }
.wiki-poz b { display: block; font-weight: 600; color: #f0e8d6; }
.wiki-poz small { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.wiki-boczna { display: grid; gap: 2px; padding: 12px 14px; }
.wiki-boczna a { color: #c4c0b7; font-size: 14px; padding: 4px 8px; border-left: 2px solid transparent; }
.wiki-boczna a:hover { text-decoration: none; color: var(--yellow); }
.wiki-boczna a.on { color: var(--yellow); border-left-color: var(--orange); background: var(--panel2); }
.wiki-grupa { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 12px 0 4px; }
.wiki-grupa:first-child { margin-top: 0; }
.wiki-wstep { font-size: 16.5px; color: #e2ddd2 !important; margin-top: 0; }
.artykul .w ul { color: #c4c0b7; padding-left: 20px; }
.artykul .w li { margin: 4px 0; }
.pasek-edycji { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--orange2); }
.pasek-edycji span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-right: auto; }
.przelacznik-edycji { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.przelacznik-edycji b.ok { color: var(--ok); }
@media (max-width: 900px) { .wiki { grid-template-columns: 1fr; } }

/* ---------- telefon (10.10.2026): menu „hamburger”, jedna kolumna, tabele ---------- */
.menu-btn { display: none; }
.tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  .top .wrap { gap: 14px; height: 60px; }
  .logo { width: 150px; }
  .menu-btn { display: inline-grid; align-content: center; gap: 5px; width: 42px; height: 42px; margin-left: auto; padding: 0 9px; flex: none;
    background: linear-gradient(#3a434c, #252b32); border: 1px solid #56616c; border-radius: 3px; cursor: pointer; }
  .menu-btn span { display: block; height: 2px; background: #e9e6df; transition: transform .2s, opacity .2s; }
  .top.otwarte .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .top.otwarte .menu-btn span:nth-child(2) { opacity: 0; }
  .top.otwarte .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .top .nav { display: none; }
  .top.otwarte { background: rgba(12, 15, 19, .98); max-height: 100vh; overflow-y: auto; }
  .top.otwarte .wrap { flex-wrap: wrap; height: auto; min-height: 60px; padding: 9px 0 16px; row-gap: 8px; }
  .top.otwarte .nav { display: flex; flex-direction: column; gap: 0; order: 3; flex: 0 0 100%; overflow: visible; border-top: 1px solid var(--line2); }
  .top.otwarte .nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .top.otwarte .nav a::after { display: none; }
  .top.otwarte .nav a.on { color: var(--yellow); }
  .top.otwarte .akcje { display: flex; flex-wrap: wrap; order: 4; flex: 0 0 100%; gap: 10px; padding-top: 6px; }
  .top.otwarte .akcje .btn, .top.otwarte .akcje form { flex: 1 1 140px; }
  .top.otwarte .akcje form .btn { width: 100%; }
  .siatka.dwie, .siatka.waska, .siatka.srednia, .siatka.admin { grid-template-columns: 1fr; }
  .kropki { right: 50%; transform: translateX(50%); bottom: 64px; grid-auto-flow: column; }
  .sekcja { padding-top: 56px; }
  .sekcja-glowa { flex-wrap: wrap; }
  .postac { grid-template-columns: 44px 1fr auto; }
  .postac .znaczek:nth-last-child(2) { display: none; }
  main.pod { padding: 28px 0 56px; }
  .naglowek-pod { padding: 46px 0 32px; }
  /* panele nacji: postać stoi w obrazku z boku (Capella z prawej, Procyon z lewej), głowa przy górnej krawędzi */
  .nacja-pol { min-height: 300px; padding: 24px 20px; }
  .nacja-pol.cap .tlo { background-position: 86% 0; }
  .nacja-pol.pro .tlo { background-position: 30% 0; }
}
@media (max-width: 600px) {
  .kol-gil, .kol-nac { display: none; }
  th, td { padding: 9px 8px; }
  .oferty { gap: 12px; }
  .pas h2 { font-size: 24px; }
  .hero .akcje .btn { padding: 0 14px; }
  .artykul .tresc-a .w { padding: 20px 18px 24px; }
}