/* ==========================================================================
Mortha - motyw "dark fantasy", 2026
Bez zewnetrznych zasobow: wszystkie dekoracje to CSS/SVG inline.
========================================================================== */
:root {
/* Baza */
--bg-0: #0d0f14;
--bg-1: #12151c;
--panel: #171b24;
--panel-2: #1d222d;
--panel-3: #232936;
--border: #2a3140;
--border-lit: #39445a;
/* Tekst */
--text: #dfe4ec;
--text-dim: #9aa4b6;
--muted: #6f7a8d;
/* Akcenty */
--gold: #d9a441;
--gold-lit: #f0c169;
--blue: #4aa3f0;
--blue-dim: #2c6fa8;
/* Semantyka */
--ok: #4fbf7b;
--warn: #e0a33c;
--err: #e05c5c;
--radius: 12px;
--radius-sm: 8px;
--shadow: 0 4px 20px rgba(0, 0, 0, .45);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
}
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
margin: 0;
/* Stopka ma siedziec na dole OKNA, gdy tresci jest mniej niz wysokosc ekranu */
min-height: 100vh;
display: flex;
flex-direction: column;
/* Tlo: proceduralna tekstura kamienia (SVG feTurbulence) + przyciemnienie */
/* Tlo: malowana grafika (hero-bg.png) z przyciemnieniem dla czytelnosci tekstu.
Gdy pliku nie ma, przegladarka spada na proceduralna teksture SVG. */
/* Grafika jako tlo calej strony: przyklejona do okna, bez przyciemnienia.
Tresc siedzi w waskiej kolumnie, wiec obraz zostaje widoczny po bokach. */
background:
/* "center top", a nie "center center": przy contain grafika nigdy nie
wypelnia calego okna, a niedobor rozklada sie po rowno na gore i dol.
Na niskim ekranie dawalo to widoczny pas miedzy paskiem menu a obrazem.
Dociagniecie do gory spycha caly niedobor na dol, pod linie zgiecia -
i nic z grafiki nie tracimy, w przeciwienstwie do przejscia na cover. */
url("img/bg-main.jpg") center top / contain no-repeat, /* CALA grafika, nic nie przyciete */
url("img/bg-blur.jpg") center center / cover no-repeat, /* rozmyte wypelnienie bokow */
var(--bg-0);
background-attachment: fixed, fixed, fixed;
color: var(--text);
font-family: "Segoe UI", Roboto, Tahoma, sans-serif;
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--gold-lit); text-decoration: none; transition: color .15s ease; }
a:hover { color: #fff; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; letter-spacing: .2px; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.muted { color: var(--muted); }
.dim { color: var(--text-dim); }
/* ============================ NAGLOWEK ============================ */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(11, 13, 18, .80);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
/* NAGLOWEK JAKO SIATKA 1fr auto 1fr.
Menu ma stac na srodku OKNA, zeby tresc podstron (tez wysrodkowana, patrz
.layout nizej) stala dokladnie pod nim.
Byly tu po drodze dwa gorsze rozwiazania i oba warto znac:
- `space-between` ustawia menu miedzy sasiadami, wiec dluzsza nazwa gracza
albo inny jezyk przesuwaly je w bok - nigdy nie stalo na srodku;
- `position: absolute; left: 50%` centruje idealnie, ale wypada z ukladu,
wiec przy weszym oknie zloty przycisk WCHODZIL NA MENU. Progu, przy
ktorym to sie zaczyna, nie da sie zgadnac - zalezy od dlugosci napisow,
a te sa inne w kazdym z czterech jezykow.
Siatka nie ma obu tych wad: skrajne kolumny sa z definicji rowne, wiec
srodkowa wypada na srodku, a nachodzenie jest niemozliwe, bo to nadal
normalny uklad - przy ciasnocie kolumny sie zwezaja, a nie nakladaja. */
.site-header .wrap {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 14px;
min-height: 62px;
/* Naglowek na cala szerokosc okna, inaczej niz tresc (kolumna 1120px):
logo dochodzi do lewej krawedzi, przelacznik jezyka do prawej. */
max-width: none;
padding: 0 22px;
}
.site-header .brand { justify-self: start; }
.site-header nav.main-nav { justify-self: center; }
/* Grupa po prawej: sprawy konta + przelacznik jezyka. */
.nav-right {
display: flex;
align-items: center;
gap: 12px; /* wlasciwy odstep robia kreski i regula nizej */
justify-self: end;
min-width: 0;
}
/* Odstep miedzy nazwa a ikona maga.
UWAGA: sam `gap` nie decyduje o tym, co widac. Wordmark to obrazek SVG,
ktory mial w srodku 18,8 jednostek pustego miejsca z prawej (9,4 px na
ekranie) - CSS do tego nie siega, wiec zmniejszanie `gap` prawie nic nie
dawalo. Puste miejsce zostalo wyciete z viewBox w wordmark.svg i dopiero
teraz ta wartosc odpowiada temu, co widzi gracz. */
.brand { display: flex; align-items: center; gap: 3px; }
/* Wysokosc OBU obrazkow (wordmark i ikona) idzie stad. Stala tu kiedys osobna
regula `.brand-mark { height: 34px }`, ale nigdy nie dzialala: ten selektor
jest bardziej szczegolowy (klasa + element) i stoi nizej, wiec wygrywal.
Ikona przez caly czas miala 38 px - komentarz o 34 px opisywal stan, ktorego
nie bylo. Nie dubluj tu regul na pojedyncze obrazki bez sprawdzenia, ktora
naprawde wygrywa. */
.brand img { height: 38px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(217,164,65,.35)); }
.brand-text {
font-size: 20px; font-weight: 800; letter-spacing: .5px;
background: linear-gradient(180deg, #fff, var(--blue));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand:hover { text-decoration: none; }
/* margin auto z obu stron trzyma menu na srodku miedzy logo a przelacznikiem jezyka */
nav.main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 auto; }
nav.main-nav a {
padding: 7px 12px;
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: 14px;
font-weight: 500;
transition: background .15s ease, color .15s ease;
}
nav.main-nav a:hover { background: var(--panel-2); color: #fff; }
nav.main-nav a.active { color: var(--gold-lit); background: rgba(217,164,65,.10); }
/* Sprawy konta - osobna grupa przy prawej krawedzi, oddzielona kreska od
zakladek serwisu. Bez tego "Wyloguj" wygladalo jak kolejna zakladka. */
/* Sprawy konta stoja miedzy DWIEMA kreskami - domykaja sie jako osobna grupa.
Sama kreska z lewej zostawiala je sklejone z flagami po prawej i caly prawy
rog czytal sie jak jeden ciag kontrolek. */
.nav-user {
display: flex; align-items: center; gap: 4px;
padding: 0 14px;
border-left: 1px solid rgba(255,255,255,.08);
border-right: 1px solid rgba(255,255,255,.08);
}
/* .btn W PASKU wygrywa nad regula ponizej. `.nav-user a` to selektor klasy
i elementu (0,1,1), a `.btn` sama klasa (0,1,0) - wiec bez tej linii szary
`color` z .nav-user a malowal napis na ZLOTYM przycisku i wygladalo to jak
zla czcionka. To nie byla czcionka, tylko przegrana walka o specyficznosc. */
.nav-user a.btn { color: #14100a; font-weight: 700; }
.nav-user a.btn:hover { color: #14100a; }
.nav-user a {
/* Bez tego "Log in" lamalo sie na dwie linie ("Log / in") i rozpychalo
pasek w pionie - link byl wyzszy niz zloty przycisk obok. Kolumna
naglowka jest waska (siatka 1fr auto 1fr), wiec przegladarka lamie
kazdy napis, ktory ma spacje. */
white-space: nowrap;
padding: 7px 12px;
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: 14px;
font-weight: 500;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-user a:hover { background: var(--panel-2); color: #fff; }
/* Lekkie podswietlenie: to jedyna pozycja w pasku, ktora dotyczy gracza,
a nie tresci serwisu. Delikatniej niz .active, zeby nie udawac, ze wlasnie
na tej stronie jestes. */
.nav-account {
color: var(--gold) !important;
background: rgba(217,164,65,.07);
box-shadow: inset 0 0 0 1px rgba(217,164,65,.22);
}
.nav-account:hover { color: var(--gold-lit) !important; background: rgba(217,164,65,.14); }
.nav-account.active { color: var(--gold-lit) !important; background: rgba(217,164,65,.16); }
/* Wyloguj celowo najdalej na prawo i najciszej z calego paska. */
.nav-logout { display: inline; margin: 0; }
.nav-logout button {
margin: 0; padding: 7px 12px; background: none; border: none;
color: var(--text-dim); font: inherit; font-size: 14px; font-weight: 500;
cursor: pointer; border-radius: var(--radius-sm); transition: background .15s ease, color .15s ease;
}
.nav-logout button:hover { background: var(--panel-2); color: #fff; }
/* ============================ HERO ============================ */
.hero {
position: relative;
margin: 0 0 24px; /* gorny odstep daje juz main.wrap - patrz nizej */
padding: 26px 20px 24px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 0;
background: none; /* tlo strony pokazuje sie przez hero */
box-shadow: none;
overflow: visible;
}
/* dekoracja: delikatna siatka */
.hero::after {
content: none;
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(600px 300px at 50% 0%, #000, transparent 75%);
pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero img.hero-logo { max-width: 430px; width: 74%; height: auto; margin: 0 auto 6px; display: block; filter: drop-shadow(0 3px 10px rgba(0,0,0,1)) drop-shadow(0 0 26px rgba(0,0,0,.9)) drop-shadow(0 0 40px rgba(217,164,65,.30)); }
.hero p.tagline { color: #f0f4fa; margin: 8px 0 18px; font-size: 16px; font-weight: 500; text-shadow: 0 2px 4px #000, 0 2px 14px rgba(0,0,0,.95); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* ============================ UKLAD ============================ */
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.sidebar { display: grid; gap: 16px; position: sticky; top: 78px; }
/* min-width: 0 NIE jest tu ozdobnikiem. Element siatki ma domyslnie
`min-width: auto`, czyli nie schodzi ponizej wlasnej zawartosci - a tabela
expowisk ma 423px naturalnej szerokosci. Bez tego kolumna rozpychala sie do
425px na ekranie 375px, wychodzila poza `body { overflow-x: hidden }`
i prawa krawedz karty byla po prostu UCIETA. Co gorsza `.table-wrap` ma
`overflow-x: auto` i mialoby przewijac tabele w poziomie, ale nigdy nie
dostawalo szansy: zamiast przewijac, cala kolumna rosla.
Zmierzone na telefonie 375px: karta 425px -> 339px, tabela przewijalna. */
.layout > * { min-width: 0; }
/* width:100% jest tu KONIECZNE. body to flex w kolumnie, a `margin: 0 auto`
z klasy .wrap wylacza rozciaganie flex-itema na osi poprzecznej - bez tego
glowna kolumna kurczy sie do szerokosci tresci (mierzone: 385px zamiast 1120px)
i cala strona wyglada na scisnieta. */
/* Odstep od paska nawigacji ma byc TAKI SAM na kazdej podstronie, wiec
stoi na pojemniku, a nie na pierwszym elemencie kazdej strony osobno.
Wczesniej mial go wylacznie hero strony glownej (margin-top: 26px),
przez co panele na serverinfo, highscores czy w bibliotece dojezdzaly
do samej krawedzi paska. Te 26px to ta sama wartosc, ktora hero mial
u siebie - dzieki temu strona glowna wyglada co do piksela tak samo. */
main.wrap { padding-top: 26px; padding-bottom: 44px; flex: 1 0 auto; width: 100%; min-width: 0; }
/* ============================ KARTY ============================ */
.card, .panel {
background: linear-gradient(180deg, rgba(29,34,45,.93), rgba(23,27,36,.95));
backdrop-filter: blur(6px);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.card-head {
display: flex; align-items: center; gap: 9px;
padding: 13px 16px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.card-head h2, .card-head h3 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--gold); }
.card-head .icon { color: var(--gold); display: flex; }
.card-body { padding: 16px; }
.panel { padding: 20px; margin-bottom: 20px; }
.panel > h1:first-child, .panel > h2:first-child { margin-top: 0; }
/* ============================ STATUS SERWERA ============================ */
.status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.status-dot.up { background: var(--ok); box-shadow: 0 0 0 0 rgba(79,191,123,.6); animation: pulse 2.2s infinite; }
.status-dot.down { background: var(--err); }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(79,191,123,.55); }
70% { box-shadow: 0 0 0 9px rgba(79,191,123,0); }
100% { box-shadow: 0 0 0 0 rgba(79,191,123,0); }
}
.status-label { font-weight: 700; }
.status-label.up { color: var(--ok); }
.status-label.down { color: var(--err); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
background: var(--panel-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 11px 12px;
text-align: center;
}
.stat .val { display: block; font-size: 21px; font-weight: 800; color: var(--gold-lit); line-height: 1.2; }
.stat .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-top: 3px; }
/* ============================ TOP GRACZE ============================ */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li {
display: flex; align-items: center; gap: 11px;
padding: 9px 4px;
border-bottom: 1px solid var(--border);
}
.rank-list li:last-child { border-bottom: none; }
.medal {
width: 24px; height: 24px; flex: none;
display: grid; place-items: center;
border-radius: 50%;
font-size: 11px; font-weight: 800; color: #1a1206;
background: var(--panel-3); color: var(--muted);
}
.medal.g1 { background: linear-gradient(160deg, #f5d271, #c9962c); color: #3a2a06; }
.medal.g2 { background: linear-gradient(160deg, #e6e9ef, #9aa2b1); color: #23262c; }
.medal.g3 { background: linear-gradient(160deg, #e0a06a, #a76a33); color: #33200d; }
.rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-lvl { color: var(--gold-lit); font-weight: 700; font-size: 13px; }
/* ============================ ODZNAKI ============================ */
.badge {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .3px;
border: 1px solid var(--border-lit);
background: var(--panel-3);
color: var(--text-dim);
white-space: nowrap;
}
.badge.knight { color: #e08a6a; border-color: #6b3f30; background: rgba(224,138,106,.10); }
.badge.paladin { color: #7fc98a; border-color: #35603c; background: rgba(127,201,138,.10); }
.badge.druid { color: #6fc2d8; border-color: #2e5c69; background: rgba(111,194,216,.10); }
.badge.sorcerer{ color: #a98ae0; border-color: #4a3a70; background: rgba(169,138,224,.10); }
.badge.none { color: var(--muted); }
/* ============================ TABELE ============================ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
thead th {
color: var(--gold); font-weight: 700; font-size: 11.5px;
text-transform: uppercase; letter-spacing: 1px;
background: rgba(255,255,255,.025);
position: sticky; top: 0;
}
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: rgba(255,255,255,.035); }
tbody tr:last-child td { border-bottom: none; }
td.rank { width: 60px; color: var(--muted); font-weight: 700; }
/* ============================ NEWS ============================ */
/* Pasek nad lista wpisow. Ma klase .card, wiec dostaje tlo panelu - bez tego
napis "News" i link do changelogu lezaly wprost na grafice tla strony
i nie czytaly sie jako czesc kolumny z trescia. */
.news-bar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
padding: 13px 20px;
}
.news-bar h2 { margin: 0; font-size: 16px; }
.news-bar .head-link { margin-left: auto; }
/* Dwa odnosniki w pasku (wlasciciel widzi jeszcze "nowy wpis"): bez
wspolnego pojemnika kazdy z nich dostaje margin-left:auto i lada na
przeciwnych koncach paska. */
.news-bar .news-bar-akcje { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.news-bar .news-bar-akcje .head-link { margin-left: 0; }
/* Zloty przycisk zalozenia konta w pasku gornym. */
.nav-cta { margin-left: 4px; }
/* Odstep miedzy kartami robi cala robote - zadnych kresek. */
.news-list { display: grid; gap: 16px; }
.news-item { padding: 20px 22px; }
.news-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.news-head h3 { margin: 0; color: #fff; font-size: 17px; }
/* Data odsunieta do prawej krawedzi: w jednym ciagu z tytulem czytala sie
jak jego dalsza czesc, zwlaszcza przy dlugich tytulach. */
.news-meta { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.news-body { color: var(--text-dim); line-height: 1.62; }
.news-body p { margin: 0 0 10px; }
.news-body p:last-child { margin-bottom: 0; }
/* Listy punktowane byly najciasniejszym miejscem na stronie glownej:
szesc punktow po dwie linie kazdy zlewalo sie w scianke tekstu. */
.news-body ul, .news-body ol { margin: 10px 0 0; padding-left: 20px; }
.news-body li { margin-bottom: 7px; }
.news-body li:last-child { margin-bottom: 0; }
.news-body strong, .news-body b { color: var(--text); }
/* Screeny wstawione w tresc wpisu (uploads/news/...) - responsywne i wysrodkowane,
zeby moglo stac pod kazda sekcja posta promocyjnego. Kursor "zoom-in": klik
otwiera zdjecie na pelnym ekranie (assets/lightbox.js). */
.news-body img { max-width: 100%; height: auto; display: block; margin: 16px auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.45); cursor: zoom-in; }
/* Linki w tresci wpisu podkreslamy - globalne jest bez podkreslenia, wiec
bez tego link "Gdzie expic?" nie rozniilby sie od zwyklego tekstu. */
.news-body a { color: var(--gold-lit); text-decoration: underline; text-underline-offset: 2px; }
.news-body a:hover { color: #fff; }
/* Wyrozniony blok wezwania na koncu wpisu (data startu + link do pobrania):
wysrodkowany, zloty jak logo, nieco wiekszy. Klasa `news-cta` jest na bialej
liscie news_html(), wiec przechodzi przez sanitizer. */
.news-body .news-cta {
text-align: center;
color: var(--gold-lit);
font-size: 1.18em;
line-height: 1.5;
margin: 22px 0 4px;
}
.news-body .news-cta strong { color: var(--gold-lit); }
/* ============================ SKLEP ============================ */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.offer {
background: var(--panel-3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
text-align: center;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.offer:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.offer .thumb {
width: 64px; height: 64px; margin: 0 auto 11px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: radial-gradient(circle at 50% 35%, rgba(217,164,65,.22), transparent 70%), var(--panel-2);
border: 1px solid var(--border-lit);
color: var(--gold-lit);
}
.offer .name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.offer .price { color: var(--gold-lit); font-weight: 800; font-size: 15px; }
/* Krotki podpis pod nazwa: to, czego nie widac po samej nazwie i grafice
(+10 speed, 20 stosow po 100). Przy dekoracjach do domu go nie ma -
tam nazwa mowi wszystko, a wymyslony opis bylby wypelniaczem. */
.offer .offer-desc {
display: block;
margin: 2px 0 6px;
font-size: 11.5px;
line-height: 1.35;
color: var(--muted);
}
.offer .qty { color: var(--muted); font-size: 12px; }
/* ============================ FORMULARZE ============================ */
label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--text-dim); font-weight: 500; }
input, select, textarea {
width: 100%;
padding: 11px 13px;
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 15px;
font-family: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
}
/* KRATKA I KOLKO WYBORU NIE SA POLEM TEKSTOWYM. `width: 100%` wyzej rozciaga
je na cala szerokosc rzedu, a etykieta obok dostaje kilkanascie pikseli -
tekst zawija sie wtedy po jednej literze i na ekranie zostaje samo pudelko.
Objaw wyglada jak ZGUBIONY NAPIS, nie jak zle pole: napis jest w HTML,
w CSS, we wszystkich czterech jezykach - po prostu nie da sie go przeczytac.
Zgoda na regulamin stala tak na produkcji: kratka szeroka na 715 px,
napis w pasku 41 px. To ostatni ekran przed zalozeniem konta.
`flex: 0 0 auto` przy takiej kratce NIE POMAGA i to jest tu pulapka - bez
wlasnej szerokosci baza flexa to wlasnie te 100%. Dlatego szerokosc musi
byc zdjeta WPROST, i to na poziomie wszystkich kratek naraz: to samo
dotykalo wyboru metody platnosci (donate.php) i panelu newsow, a w
login.php siedziala punktowa latka `style="width:auto"`. */
input[type="checkbox"], input[type="radio"] {
width: auto;
min-width: 0;
padding: 0;
accent-color: var(--gold);
}
input:focus, select:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(217,164,65,.14);
}
button, .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 18px;
padding: 11px 22px;
background: linear-gradient(180deg, var(--gold-lit), var(--gold));
color: #241906;
border: none;
border-radius: var(--radius-sm);
font-size: 14.5px; font-weight: 700; font-family: inherit;
cursor: pointer;
transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
box-shadow: 0 4px 14px rgba(217,164,65,.22);
}
button:hover, .btn:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; color: #241906; }
button:active, .btn:active { transform: translateY(0); }
.btn-ghost {
background: transparent; color: var(--text);
border: 1px solid var(--border-lit); box-shadow: none;
}
.btn-ghost:hover { background: var(--panel-3); color: #fff; border-color: var(--gold); }
.btn-sm { padding: 7px 14px; font-size: 13px; margin-top: 0; }
/* Sprite'y itemow z klienta Tibia: 32x32 pixel art - musi byc OSTRY przy skalowaniu */
.item-sprite {
image-rendering: pixelated;
image-rendering: crisp-edges;
display: block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
/* Karta oferty jest - zachowuje sie jak karta, nie jak link */
a.offer { display: block; color: var(--text); text-decoration: none; }
a.offer:hover { color: var(--text); text-decoration: none; }
a.offer .name { color: #fff; }
.offer-locked { opacity: .45; filter: grayscale(.7); }
.offer-locked:hover { transform: none !important; border-color: var(--border) !important; }
/* Powiekszony sprite w kafelku oferty */
.offer .thumb .item-sprite { width: 48px; height: 48px; }
/* Kratka ze strojem jest wieksza niz z przedmiotem: sprite postaci ma 64 px
i przy 32 px nie da sie rozpoznac, ktory to addon. */
.offer .thumb-outfit { width: 72px; height: 72px; }
.offer .thumb-outfit .av-wrap { width: 56px; height: 56px; }
.offer .thumb-outfit .outfit-sprite { width: 100%; height: 100%; image-rendering: pixelated; }
/* Usluga nie ma grafiki - sama ikona na tym samym tle co reszta kratek. */
.thumb-srv { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gold-lit); }
/* Ekran potwierdzenia zakupu */
.confirm-box {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding: 18px;
border: 1px solid var(--border-lit);
border-radius: var(--radius);
background: radial-gradient(420px 160px at 12% 0%, rgba(217,164,65,.10), transparent 70%), var(--panel-3);
}
.confirm-item {
width: 84px; height: 84px; flex: none;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: radial-gradient(circle at 50% 40%, rgba(217,164,65,.20), transparent 70%), var(--panel-2);
border: 1px solid var(--border-lit);
}
.confirm-item .item-sprite { width: 64px; height: 64px; }
/* ==================== AWATARY POSTACI (outfity z klienta) ==================== */
.av-wrap {
display: inline-flex; align-items: center; justify-content: center;
flex: none; overflow: hidden;
}
.outfit-sprite {
image-rendering: pixelated;
image-rendering: crisp-edges;
width: 100%; height: 100%;
object-fit: contain;
display: block;
filter: drop-shadow(0 2px 5px rgba(0,0,0,.7));
}
.avatar-fallback {
display: grid; place-items: center;
color: var(--muted);
background: var(--panel-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
/* Nazwa postaci z awatarem obok (tabele) */
.name-cell { display: flex; align-items: center; gap: 11px; min-height: 46px; }
.name-cell .outfit-sprite { flex: none; }
/* Awatar w liscie TOP graczy */
.rank-av { flex: none; display: flex; }
/* Naglowek profilu postaci */
.char-hero {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding: 16px 18px; margin-bottom: 16px;
border: 1px solid var(--border-lit);
border-radius: var(--radius);
background: radial-gradient(420px 160px at 10% 0%, rgba(74,163,240,.12), transparent 70%), var(--panel-3);
}
./* powiekszony awatar profilu */
.char-avatar {
width: 116px; height: 116px; flex: none;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: radial-gradient(circle at 50% 45%, rgba(217,164,65,.18), transparent 70%), var(--panel-2);
border: 1px solid var(--border-lit);
}
/* ============================ KOMUNIKATY ============================ */
.msg {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 15px; border-radius: var(--radius-sm);
margin-bottom: 16px; font-size: 14px;
border-left: 3px solid;
}
.msg-ok { background: rgba(79,191,123,.10); border-color: var(--ok); color: #bde9cd; }
.msg-err { background: rgba(224,92,92,.10); border-color: var(--err); color: #f3bcbc; }
.msg-info { background: rgba(74,163,240,.10); border-color: var(--blue); color: #bcdcf7; }
.points { font-size: 24px; font-weight: 800; color: var(--gold-lit); }
/* ============================ STOPKA ============================ */
.site-footer {
flex-shrink: 0;
background: rgba(11, 13, 18, .80);
backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 13px;
padding: 22px 0 30px;
text-align: center;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
}
/* ============================ RESPONSYWNOSC ============================ */
@media (max-width: 900px) {
.layout { grid-template-columns: 1fr; }
.sidebar { position: static; }
}
@media (max-width: 760px) {
body { background-image: url("img/bg-mobile.jpg"); background-attachment: scroll; }
}
@media (max-width: 620px) {
/* NAGLOWEK WRACA NA FLEX Z ZAWIJANIEM.
Na monitorze `.site-header .wrap` jest siatka `1fr auto 1fr` - dzieki niej
menu stoi dokladnie na srodku niezaleznie od dlugosci napisow w czterech
jezykach. Na telefonie ta siatka jest jednak nie do utrzymania: trzy
kolumny nie mieszcza sie w 390px, wiec `justify-self: end` wypycha grupe
konta POZA ekran i laduje ona NA LOGO (zmierzone: x = -26px przy
szerokosci 395px).
Siatka nie zawija sie sama - `grid-template-columns` obowiazuje niezaleznie
od tego, czy jest miejsce. Flex z `wrap` przenosi to, co sie nie miesci,
do nastepnego wiersza, i o to tu chodzi.
Reguly telefonowe nizej byly pisane wlasnie dla flexa ze `space-between`
(patrz komentarz przy .lang-switch) - grid je uniewaznil po cichu. */
.site-header .wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
row-gap: 8px;
padding-left: 14px;
padding-right: 14px;
}
/* Kolejnosc wierszy na telefonie: [logo | jezyki], [konto], [menu].
`display: contents` na .nav-right rozpuszcza jej pudelko, wiec przelacznik
jezyka i sprawy konta staja sie osobnymi elementami flexa i moga wyladowac
w roznych wierszach. Bez tego oba siedza razem i zjadaja 84px wysokosci
zamiast 44. Pudelko .nav-right nie ma tla ani ramki, wiec nie ma czego
stracic. */
.nav-right { display: contents; }
.site-header .brand { order: 1; }
/* `.site-header` z przodu podnosi wage reguly. Sam `.lang-switch` przegrywa
z blokiem 720px nizej, ktory nadaje `width: 100%` - przy rownej wadze
decyduje kolejnosc w pliku, a tamten stoi pozniej. Bez tego przelacznik
zajmuje caly wiersz i naglowek rosnie o 40px. */
.site-header .lang-switch { order: 2; width: auto; flex: 0 0 auto; margin-left: 0; }
.nav-user { order: 3; width: 100%; justify-content: flex-end; }
.site-header nav.main-nav { order: 4; width: 100%; justify-content: center; }
.site-header .wrap { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
nav.main-nav { width: 100%; }
nav.main-nav a, .nav-user a, .nav-logout button { padding: 6px 9px; font-size: 13.5px; }
/* Na waskim ekranie pasek i tak sie zawija - pionowa kreska i wciecie
wygladalyby wtedy jak przypadkowa krecha w srodku wiersza. */
.nav-user { border-left: none; padding-left: 0; margin-left: 0; }
.hero { padding: 18px 14px 16px; }
.hero img.hero-logo { max-width: 280px; width: 84%; }
h1 { font-size: 22px; }
th, td { padding: 9px 10px; font-size: 14px; }
.stat .val { font-size: 18px; }
}
/* ==================== TELEFONY - poprawki mierzone na 375x812 ====================
Zmierzone przed poprawka na zywej stronie (iPhone 375px):
- naglowek 243px z 812px ekranu, i do tego PRZYKLEJONY - trzecia czesc
ekranu byla trwale zajeta, zanim gracz zobaczyl cokolwiek,
- 4 z 6 zakladek biblioteki poza ekranem i NIEKLIKALNE (pasek 790px
przy `flex-wrap: nowrap`, obciety przez `body { overflow-x: hidden }`),
- karta "gdzie expic" 425px zamiast 339px, prawa krawedz ucieta.
Ostatnie zalatwia `.layout > * { min-width: 0 }` wyzej, reszta jest tutaj. */
@media (max-width: 760px) {
/* Naglowek przestaje byc przyklejony. Przy 243px wysokosci sticky zjadalo
30% ekranu telefonu przez caly czas przewijania - na monitorze te same
243px to 22% i nie przeszkadza, stad rozna decyzja dla obu. */
.site-header { position: static; }
/* Przelacznik jezyka obok logo zamiast we wlasnym wierszu (oszczedza ~40px
wysokosci naglowka). Regula z 720px dawala mu `width: 100%`.
BEZ `margin-left: auto` - do prawej krawedzi dosuwa go `space-between`
na naglowku, a auto-margines zjadlby cala wolna przestrzen (patrz komentarz
przy .lang-switch). Menu i tak jest w osobnym wierszu przez `width: 100%`. */
.lang-switch { width: auto; }
/* Zakladki biblioteki: zawijamy zamiast chowac. Przewijanie w poziomie
tez by dzialalo, ale gracz nie ma skad wiedziec, ze cos jest z prawej -
a tu chodzi o polowe dzialow serwisu. Pigulka 999px przy dwoch wierszach
wyglada jak pomylka, wiec przy zawijaniu wracamy do zwyklego zaokraglenia. */
.lib-switch {
flex-wrap: wrap;
width: auto;
border-radius: var(--radius);
gap: 5px;
}
.lib-tab { padding: 9px 14px; font-size: 13.5px; }
/* Tabele szersze niz ekran maja sie PRZEWIJAC, a nie rozpychac karte. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Mapa expowisk: 560px to na telefonie 69% ekranu, a `touch-action: none`
(potrzebne do przeciagania mapy) sprawia, ze palcem po niej nie przewiniesz
strony. Nizsze plotno zostawia czym przewijac obok. */
.map-canvas { height: 340px; }
/* Link w naglowku karty ma `white-space: nowrap` - na waskiej karcie
wypychal naglowek. Niech schodzi do nowego wiersza. */
.card-head { flex-wrap: wrap; }
.card-head .head-link { white-space: normal; }
/* Dolny prog czytelnosci. Na monitorze 11-12px to subtelny podpis,
na telefonie trzymanym w rece - tekst nie do przeczytania. */
.mob-exp, .map-hint, .foot-meta, .card-head .head-link,
.map-floor, .lang-opt { font-size: 12.5px; }
/* Pola formularzy ponizej 16px powoduja, ze iOS PRZYBLIZA cala strone przy
kliknieciu w pole i juz z tego nie wraca. Wyszukiwarka biblioteki miala 15px. */
input, select, textarea { font-size: 16px; }
}
/* Cele dotykowe. Palec to nie kursor: Apple podaje 44pt, Google 48dp, a nasze
odnosniki menu mialy 36px wysokosci. Warunek `pointer: coarse` zamiast
szerokosci ekranu - decyduje sposob wskazywania, a nie rozmiar okna, wiec
tablet z rysikiem i telefon dostaja to samo, a waskie okno na monitorze nie. */
@media (pointer: coarse) {
nav.main-nav a, .nav-user a, .nav-logout button,
.lib-tab, .foot-links a, .btn, .cat-chip {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Kafelki potworow i przedmiotow sa calymi celami - wystarczy odstep,
zeby sasiedni nie lapal kliku. */
.mob-card { min-height: 44px; }
}
/* ==================== EKWIPUNEK POSTACI ==================== */
.eq-grid {
display: grid;
grid-template-columns: repeat(3, 52px);
gap: 8px;
justify-content: center;
margin: 4px auto 0;
}
.eq-slot {
width: 52px; height: 52px;
display: grid; place-items: center;
background: linear-gradient(180deg, var(--panel-2), var(--bg-1));
border: 1px solid var(--border-lit);
border-radius: 6px;
position: relative;
}
.eq-slot.filled { border-color: var(--gold); box-shadow: inset 0 0 12px rgba(217,164,65,.14); }
.eq-slot .item-sprite { width: 36px; height: 36px; }
.eq-slot .eq-count {
position: absolute; right: 3px; bottom: 1px;
font-size: 10px; font-weight: 700; color: #fff;
text-shadow: 0 1px 2px #000;
}
.eq-empty { opacity: .30; }
/* --- poswiata ulepszonego przedmiotu ---------------------------------
Ten sam arkusz osmiu klatek co w kliencie (mortha-docs/generuj_aure_ulepszen.py
zapisuje go w obie strony), ta sama skala czterech kolorow co przy nazwie
w opisie przedmiotu. Arkusz jest bialy, wiec kolor robi `background-color`
przez maske - jeden plik obsluguje wszystkie stopnie.
`steps(8)` z przesunieciem maski o caly pas: klatki zmieniaja sie skokowo,
bez przenikania. Iskry chodza dwa razy szybciej niz poswiata i tylko na
maksymalnym stopniu. */
.eq-slot.up { --up-pas: 336px; } /* 8 klatek po 42 px */
.up-1 { --up-kolor: #5da3ff; --up-krycie: .55; }
.up-2 { --up-kolor: #ff7ad9; --up-krycie: .80; }
.up-3 { --up-kolor: #ff9d3b; --up-krycie: 1;
--up-iskry: url(upgrade/iskry-slabe.png); --up-iskry-kolor: #ffffff; }
.up-4 { --up-kolor: #ff4c4c; --up-krycie: 1;
--up-iskry: url(upgrade/iskry.png); --up-iskry-kolor: #ffd24a; }
.eq-slot.up .eq-aura,
.eq-slot.up .eq-iskry {
position: absolute; left: 50%; top: 50%;
width: 42px; height: 42px; margin: -21px 0 0 -21px;
-webkit-mask-size: var(--up-pas) 100%; mask-size: var(--up-pas) 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
pointer-events: none;
}
.eq-slot.up .eq-aura {
background-color: var(--up-kolor);
opacity: var(--up-krycie);
-webkit-mask-image: url(upgrade/aura.png); mask-image: url(upgrade/aura.png);
animation: eq-klatki .96s steps(8) infinite;
}
.eq-slot.up .eq-iskry {
background-color: var(--up-iskry-kolor);
-webkit-mask-image: var(--up-iskry); mask-image: var(--up-iskry);
animation: eq-klatki .64s steps(8) infinite;
}
@keyframes eq-klatki {
from { -webkit-mask-position: 0 0; mask-position: 0 0; }
to { -webkit-mask-position: calc(-1 * var(--up-pas)) 0;
mask-position: calc(-1 * var(--up-pas)) 0; }
}
.eq-slot .eq-upgrade {
position: absolute; left: 3px; top: 1px;
font-size: 10px; font-weight: 700; color: var(--up-kolor);
text-shadow: 0 1px 2px #000; pointer-events: none;
}
/* Ruch potrafi przeszkadzac - przy wylaczonych animacjach zostaje sam kolor. */
@media (prefers-reduced-motion: reduce) {
.eq-slot.up .eq-aura, .eq-slot.up .eq-iskry { animation: none; }
}
/* ==================== PRZELACZNIK JEZYKA ==================== */
.lang-switch {
display: flex; align-items: center; gap: 2px;
/* BEZ margin-left:auto - zjadalby cala wolna przestrzen i doklejal menu do logo.
Prawa krawedz zalatwia justify-content: space-between na naglowku. */
padding: 3px;
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.lang-opt {
display: flex; align-items: center; gap: 5px;
padding: 4px 7px !important;
border-radius: 6px;
font-size: 11.5px !important; font-weight: 700 !important;
letter-spacing: .4px;
color: var(--muted) !important;
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.lang-opt:hover { background: var(--panel-2); color: #fff !important; }
.lang-opt.active { background: rgba(217,164,65,.14); color: var(--gold-lit) !important; }
.lang-opt .flag {
width: 18px; height: 12px; flex: none;
border-radius: 2px;
border: 1px solid rgba(0,0,0,.45);
/* Flagi jako emoji odpadaja - Windows renderuje same litery kodu kraju. */
}
.lang-opt:not(.active) .flag { opacity: .6; }
.lang-opt:hover .flag { opacity: 1; }
/* Ponizej ~1200px naglowek robi sie ciasny (5 pozycji menu + konto + wyloguj).
Kody jezykowe znikaja, flagi zostaja - odzyskuje to okolo 100px. */
@media (max-width: 1200px) {
.lang-opt span { display: none; }
.lang-opt { padding: 4px 5px !important; }
.lang-opt .flag { width: 21px; height: 14px; }
}
@media (max-width: 720px) {
.lang-switch { margin-left: 0; width: 100%; justify-content: center; }
.lang-opt .flag { width: 24px; height: 16px; }
}
/* ==================== PREMIUM ==================== */
.prem-status {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
padding: 16px 18px;
border-radius: var(--radius);
border: 1px solid var(--border-lit);
background: var(--panel-3);
}
.prem-status.on {
border-color: rgba(79,191,123,.45);
background: radial-gradient(420px 160px at 12% 0%, rgba(79,191,123,.12), transparent 70%), var(--panel-3);
}
.prem-badge {
display: inline-block;
padding: 5px 12px;
border-radius: 999px;
font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
background: rgba(111,122,141,.18); color: var(--text-dim);
}
.prem-status.on .prem-badge { background: rgba(79,191,123,.18); color: var(--ok); }
.prem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.prem-card {
display: block; text-align: center; text-decoration: none; color: var(--text);
padding: 22px 16px 18px;
background: radial-gradient(circle at 50% 0%, rgba(217,164,65,.12), transparent 65%), var(--panel-3);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.prem-card:hover {
transform: translateY(-3px); border-color: var(--gold);
box-shadow: 0 10px 26px rgba(0,0,0,.5); color: var(--text); text-decoration: none;
}
.prem-days {
display: block;
font-size: 42px; font-weight: 800; line-height: 1;
color: var(--gold-lit);
text-shadow: 0 2px 14px rgba(217,164,65,.35);
}
.prem-unit { display: block; margin-top: 4px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.prem-desc { display: block; margin: 10px 0 12px; font-size: 12.5px; color: var(--muted); min-height: 32px; }
.prem-card .price { display: block; color: var(--gold-lit); font-weight: 800; font-size: 16px; }
.prem-days-big {
font-size: 34px; font-weight: 800; color: var(--gold-lit);
text-shadow: 0 2px 14px rgba(217,164,65,.35);
}
/* ==================== DONATE ==================== */
.donate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.donate-card {
position: relative;
display: block; text-align: center; text-decoration: none; color: var(--text);
padding: 22px 16px 18px;
background: radial-gradient(circle at 50% 0%, rgba(74,163,240,.12), transparent 65%), var(--panel-3);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.donate-card:hover {
transform: translateY(-3px); border-color: var(--blue);
box-shadow: 0 10px 26px rgba(0,0,0,.5); color: var(--text); text-decoration: none;
}
.donate-pts {
display: block; font-size: 34px; font-weight: 800; line-height: 1;
color: var(--gold-lit); text-shadow: 0 2px 14px rgba(217,164,65,.3);
}
.donate-unit { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.donate-price { display: block; margin-top: 12px; font-size: 18px; font-weight: 800; color: var(--blue); }
.donate-bonus {
position: absolute; top: 10px; right: 10px;
padding: 3px 8px; border-radius: 999px;
font-size: 11px; font-weight: 800; letter-spacing: .4px;
background: rgba(79,191,123,.18); color: var(--ok);
}
.pay-methods { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pay-chip {
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--border-lit); background: var(--panel-2);
font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .3px;
}
.badge-test {
display: inline-block; padding: 4px 10px; border-radius: 999px;
background: rgba(224,163,60,.16); color: var(--warn);
font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
/* Wybor operatora platnosci. Radio zostaje w drzewie (a nie display:none),
zeby dalo sie przechodzic miedzy metodami klawiatura - samo obramowanie
karty nie powie nic osobie, ktora nie widzi ekranu. */
.pay-choice { display: flex; flex-direction: column; gap: 10px; }
.pay-option {
display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
padding: 12px 14px; border-radius: 10px;
border: 1px solid var(--border); background: var(--panel-2);
transition: border-color .15s, background .15s;
}
.pay-option:hover { border-color: var(--border-lit); }
.pay-option input { margin-top: 3px; accent-color: var(--blue); flex: none; }
.pay-option:has(input:checked) { border-color: var(--blue); background: rgba(90,150,220,.08); }
.pay-option:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.pay-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-option-name { font-weight: 700; font-size: 14.5px; }
.pay-option-note { font-size: 12.5px; color: var(--text-dim); }
/* ==================== STOPKA: LINKI ==================== */
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-links a { color: var(--text-dim); font-size: 13.5px; }
.foot-links a:hover { color: var(--gold-lit); }
.foot-meta { font-size: 13px; color: var(--muted); }
/* Link po prawej stronie naglowka karty (np. "Pelny dziennik zmian") */
.card-head .head-link {
margin-left: auto; font-size: 12.5px; font-weight: 600;
color: var(--text-dim); white-space: nowrap;
}
.card-head .head-link:hover { color: var(--gold-lit); }
/* ==================== PROGI DOSWIADCZENIA ==================== */
.stage-bars { display: flex; flex-direction: column; gap: 8px; }
.stage-row { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 12px; }
.stage-range { font-size: 13px; color: var(--text-dim); }
.stage-bar {
height: 12px; border-radius: 999px; background: var(--bg-1);
border: 1px solid var(--border); overflow: hidden;
}
.stage-bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-lit));
}
.stage-mult { font-weight: 800; color: var(--gold-lit); text-align: right; font-size: 14px; }
/* ==================== RAIDY ==================== */
.raid-item { padding: 14px 0; border-top: 1px solid var(--border); }
.raid-item:first-of-type { border-top: none; padding-top: 0; }
.raid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.raid-head h3 { margin: 0; font-size: 16px; }
.raid-freq { font-size: 12.5px; color: var(--gold-lit); font-weight: 700; }
.raid-announce { margin: 6px 0 10px; font-size: 13.5px; color: var(--text-dim); font-style: italic; }
.raid-mobs { display: flex; gap: 10px; flex-wrap: wrap; }
.raid-mob {
display: flex; align-items: center; gap: 7px;
padding: 6px 10px 6px 6px; border-radius: 999px;
background: var(--panel-3); border: 1px solid var(--border);
color: var(--text); font-size: 13px; text-decoration: none;
}
.raid-mob:hover { border-color: var(--gold); color: var(--text); text-decoration: none; }
.raid-mob em { color: var(--gold-lit); font-style: normal; font-weight: 700; font-size: 12px; }
/* ==================== BESTIARIUSZ ==================== */
.search-row { display: flex; gap: 10px; align-items: flex-end; }
.search-row input { margin: 0; }
.search-row button { margin: 0; white-space: nowrap; }
.mob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.mob-card {
display: block; text-align: center; text-decoration: none; color: var(--text);
padding: 14px 8px 12px;
background: var(--panel-3); border: 1px solid var(--border); border-radius: var(--radius);
transition: transform .16s ease, border-color .16s ease;
}
.mob-card:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--text); text-decoration: none; }
.mob-img { display: block; margin: 0 auto 8px; }
.mob-name { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.mob-exp { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.loot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.loot-item {
display: flex; align-items: center; gap: 9px;
padding: 8px 10px; border-radius: var(--radius-sm);
background: var(--panel-2); border: 1px solid var(--border);
}
.loot-img { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.loot-name { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loot-chance { flex: none; font-size: 11.5px; font-weight: 700; color: var(--gold-lit); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* ==================== DZIENNIK ZMIAN ==================== */
.chg-tag {
display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
vertical-align: middle;
}
.tag-server { background: rgba(74,163,240,.16); color: var(--blue); }
.tag-web { background: rgba(217,164,65,.16); color: var(--gold-lit); }
.tag-fix { background: rgba(79,191,123,.16); color: var(--ok); }
.chg-list { margin: 10px 0 0; padding-left: 20px; }
.chg-list li { margin: 6px 0; font-size: 14px; color: var(--text-dim); }
.chg-list code {
background: var(--bg-1); border: 1px solid var(--border);
border-radius: 4px; padding: 1px 6px; font-size: 12.5px; color: var(--gold-lit);
}
/* ==================== WYKRES POPULACJI ==================== */
.pop-chart { display: block; width: 100%; height: 140px; }
.pop-legend {
display: flex; justify-content: space-between; align-items: center;
margin-top: 8px; font-size: 12px; color: var(--muted);
}
/* ==================== GLOSOWANIE ==================== */
.vote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.vote-card {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 20px 16px; text-decoration: none; color: var(--text);
background: var(--panel-3); border: 1px solid var(--border); border-radius: var(--radius);
transition: transform .16s ease, border-color .16s ease;
}
.vote-card:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--text); text-decoration: none; }
.vote-name { font-weight: 700; font-size: 15px; }
.vote-note { font-size: 12px; color: var(--muted); }
/* Przyrost expa w rankingu tygodnia */
.rank-gain { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ok); white-space: nowrap; }
/* Komendy w tabeli */
code.cmd {
background: var(--bg-1); border: 1px solid var(--border-lit);
border-radius: 5px; padding: 2px 8px; color: var(--gold-lit);
font-size: 13px; font-weight: 700;
}
/* Pasek nawigacji zrobil sie dluzszy - odchudzamy go na srednich ekranach */
@media (max-width: 1320px) {
nav.main-nav a, .nav-user a, .nav-logout button { padding: 7px 9px; font-size: 13.5px; }
}
/* Pelna szerokosc dla list biblioteki - siatka kafelkow w waskiej kolumnie
miescila tylko 2 elementy w rzedzie i wygladala biednie. */
.layout-wide { display: block; }
/* Gestsza siatka: 108px zamiast 132px to o jeden-dwa kafelki wiecej w rzedzie */
.mob-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.mob-card { padding: 12px 6px 10px; }
.mob-name { font-size: 12.5px; line-height: 1.3; }
.mob-exp { font-size: 11px; }
/* Zakladki w naglowku karty */
.tabs { margin-left: auto; display: flex; gap: 4px; }
.tab {
padding: 5px 12px; border-radius: 999px;
font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
color: var(--text-dim); background: var(--bg-1);
border: 1px solid var(--border); text-decoration: none;
}
.tab:hover { color: #fff; border-color: var(--border-lit); text-decoration: none; }
.tab.active { color: var(--gold-lit); background: rgba(217,164,65,.14); border-color: var(--gold); }
/* Naglowek sekcji na kartach szczegolow */
.sec-title {
font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
color: var(--gold); margin: 0 0 10px;
}
a.loot-item { text-decoration: none; color: var(--text); transition: border-color .15s ease; }
a.loot-item:hover { border-color: var(--gold); color: var(--text); text-decoration: none; }
/* ==================== WYBOR PROFESJI / PLCI ==================== */
.voc-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.sex-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.voc-opt, .sex-opt { cursor: pointer; display: block; }
.voc-opt input, .sex-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.voc-box {
display: flex; flex-direction: column; gap: 6px;
padding: 12px 14px;
background: var(--panel-3); border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color .15s ease, background .15s ease;
}
.sex-opt .voc-box { flex-direction: row; align-items: center; gap: 10px; min-width: 150px; }
.voc-opt:hover .voc-box, .sex-opt:hover .voc-box { border-color: var(--border-lit); }
.voc-opt input:checked + .voc-box,
.sex-opt input:checked + .voc-box {
border-color: var(--gold);
background: radial-gradient(300px 100px at 20% 0%, rgba(217,164,65,.14), transparent 70%), var(--panel-3);
}
.voc-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* ==================== BIBLIOTEKA: PRZELACZNIK I KATEGORIE ==================== */
.lib-switch {
display: flex; justify-content: center; gap: 6px;
margin: 0 0 18px; padding: 5px;
background: rgba(13,15,20,.72);
border: 1px solid var(--border);
border-radius: 999px;
width: fit-content; margin-inline: auto;
backdrop-filter: blur(6px);
}
.lib-tab {
display: flex; align-items: center; gap: 8px;
padding: 10px 26px; border-radius: 999px;
font-size: 14.5px; font-weight: 700; letter-spacing: .3px;
color: var(--text-dim); text-decoration: none;
transition: background .16s ease, color .16s ease;
}
.lib-tab:hover { color: #fff; background: var(--panel-2); text-decoration: none; }
/* Pasek z SIEDMIOMA zakladkami (sklep). Biblioteka ma ich trzy i miesci sie
w pigulce zawsze; sklep nie miescil sie juz na zwyklym ekranie z panelem
bocznym - ostatnia zakladka wychodzila poza kartE i nie bylo jej widac,
a przy `width: fit-content` nie pojawial sie nawet pasek przewijania.
Zawijamy wiec od razu, a nie dopiero na telefonie. Pigulka 999px przy
dwoch wierszach wyglada jak pomylka, stad zwykle zaokraglenie. */
.lib-switch-wide {
flex-wrap: wrap;
width: auto;
max-width: 100%;
border-radius: var(--radius);
gap: 4px;
}
.lib-switch-wide .lib-tab { padding: 9px 16px; font-size: 13.5px; }
.lib-tab.active {
color: #1a1408;
background: linear-gradient(180deg, var(--gold-lit), var(--gold));
box-shadow: 0 3px 14px rgba(217,164,65,.35);
}
.cat-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cat-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 999px;
font-size: 12.5px; font-weight: 600;
color: var(--text-dim); background: var(--bg-1);
border: 1px solid var(--border); text-decoration: none;
transition: border-color .15s ease, color .15s ease;
}
.cat-chip:hover { color: #fff; border-color: var(--border-lit); text-decoration: none; }
.cat-chip.active { color: var(--gold-lit); border-color: var(--gold); background: rgba(217,164,65,.12); }
.cat-chip em { font-style: normal; font-size: 11px; color: var(--muted); }
.cat-chip.active em { color: var(--gold); }
/* Znaczniki branzy w wierszu katalogu NPC. Jeden NPC ma ich czesto kilka
(zbrojownia, ktora ma tez plecaki), wiec musza byc ciasne. Nieklikalne
CELOWO: od filtrowania sa chipy nad tabela, a klikalny znacznik w wierszu
walczylby z klikaniem wiersza, ktore skacze do mapy. */
.npc-tag {
display: inline-block; margin: 1px 4px 1px 0; padding: 2px 8px;
border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
color: var(--text-dim); background: var(--bg-1); border: 1px solid var(--border);
}
/* ==================== KLUCZ ODZYSKIWANIA ==================== */
.recovery-key {
font-family: Consolas, "Courier New", monospace;
font-size: 22px; font-weight: 700; letter-spacing: 3px;
text-align: center; color: var(--gold-lit);
padding: 16px; border-radius: var(--radius);
background: var(--bg-1); border: 1px dashed var(--gold);
user-select: all;
}
/* ==================== MAPA INTERAKTYWNA ====================
Mapa dziala jak w grze: przeciaganie, zoom i zmiana pietra bez przeladowania.
Warstwa .map-stage jest przesuwana i skalowana jednym transformem, a pinezki
sa jej dziecmi - dzieki temu trzymaja sie swoich wspolrzednych bez liczenia
czegokolwiek przy kazdej klatce. Zeby nie rosly razem z mapa, skalujemy je
odwrotnie zmienna --pin-scale. */
.map-viewer {
position: relative;
margin-bottom: 18px;
border: 1px solid var(--border-lit);
border-radius: var(--radius);
overflow: hidden;
background: #000;
}
.map-canvas {
position: relative;
height: 560px;
overflow: hidden;
cursor: grab;
touch-action: none;
}
.map-canvas.is-dragging { cursor: grabbing; }
.map-stage {
position: absolute;
top: 0; left: 0;
transform-origin: 0 0;
will-change: transform;
}
.map-stage .map-img { width: auto; height: auto; max-width: none; }
.map-pins { position: absolute; top: 0; left: 0; }
.map-pins .map-pin { transform: translate(-50%, -50%) scale(var(--pin-scale, 1)); }
/* Kafle terenu.
Kazdy poziom przyblizenia ma WLASNA warstwe, ulozona wedlug z-index:
ostrzejszy lezy na grubszym. Dzieki temu przy zmianie zoomu stary teren
jest widoczny pod spodem, dopoki nowe kafle sie nie wczytaja - inaczej
mapa mrugalaby golym tlem przy kazdym kroku kolka myszy. */
.map-tiles, .map-tile-layer { position: absolute; top: 0; left: 0; }
.map-tile {
position: absolute;
display: block;
max-width: none;
opacity: 0;
transition: opacity .1s linear;
}
.map-tile.is-on { opacity: 1; }
/* Powyzej rozdzielczosci zrodla wygladzanie zamienia grafike gry w papke -
wtedy chcemy ostrych pikseli, dokladnie jak w kliencie. Ponizej odwrotnie:
wygladzanie jest tym, co robi z kafla czytelna miniature. */
.map-tile-layer.is-blisko .map-tile {
image-rendering: pixelated;
image-rendering: crisp-edges;
}
/* Warstwa potworow. Plotno lezy NAD scena i nie jest przez nia skalowane -
pozycje liczy skrypt. `pointer-events: none` jest tu konieczne: bez tego
plotno przykrywa cala mape i nie da sie jej przeciagnac ani kliknac
w pinezke. Najezdzanie na potwora obsluguje .map-canvas, nie plotno. */
.map-mobs {
position: absolute;
top: 0; left: 0;
z-index: 3;
pointer-events: none;
}
.map-tip {
position: absolute;
z-index: 7;
max-width: 220px;
padding: 5px 8px;
background: rgba(12, 14, 20, .94);
border: 1px solid var(--border-lit);
border-radius: var(--radius);
color: var(--text);
font-size: 12px;
line-height: 1.45;
pointer-events: none;
white-space: nowrap;
}
.map-tip strong { display: block; color: var(--gold-lit); font-size: 12.5px; }
.map-tip span { display: block; color: var(--muted); }
.map-tools {
position: absolute; top: 10px; left: 10px; z-index: 5;
display: flex; align-items: center; gap: 4px;
padding: 5px 7px;
background: rgba(12, 14, 20, .82);
border: 1px solid var(--border-lit);
border-radius: var(--radius);
backdrop-filter: blur(3px);
}
.map-btn {
min-width: 26px; height: 26px;
/* Zerowany margines, i to nie jest ozdobnik. Ogolna regula `button, .btn`
daje KAZDEMU przyciskowi `margin-top: 18px` - sensowna pod formularzami,
zabojcza w pasku narzedzi mapy: przyciski spadaly o 18 px, pasek rosl
z 36 do 56 px, a napis z numerem pietra zostawal u gory, bo jest
spanem i tej reguly nie lapie. Wygladalo to na zle wysrodkowanie,
a bylo odziedziczonym marginesem. */
margin: 0;
padding: 0 6px;
background: var(--bg-2); color: var(--text);
border: 1px solid var(--border); border-radius: 5px;
font-size: 13px; line-height: 1; cursor: pointer;
}
.map-btn:hover { border-color: var(--gold); color: var(--gold-lit); }
.map-btn.is-on { border-color: var(--gold); color: var(--gold-lit); background: var(--bg-1); }
/* Tryb pelnoekranowy.
Te trzy bloki sa CELOWO osobne, a nie sklejone przecinkami: przegladarka,
ktora nie zna pseudoklasy :fullscreen, odrzuca CALA liste selektorow razem
z nia - czyli zapasowa klasa .is-full przestalaby dzialac akurat tam, gdzie
jest najbardziej potrzebna. */
/* Dwie pulapki, obie kosztowaly rozjechany uklad:
- samo `inset: 0` nie ustalilo rozmiaru (element zostawal szerokosci kolumny
tekstu), wiec podajemy 100vw/100vh wprost;
- `.map-canvas` jako element flex ma domyslnie `min-height: auto`, czyli nie
schodzi ponizej swojej zawartosci - bez `min-height: 0` plotno rozdymalo
sie do 117 000 px zamiast wypelnic ekran. */
.map-viewer.is-full {
position: fixed; top: 0; left: 0;
width: 100vw; height: 100vh; z-index: 200;
margin: 0; border: 0; border-radius: 0;
display: flex; flex-direction: column;
}
.map-viewer.is-full .map-canvas { flex: 1 1 auto; height: auto; min-height: 0; }
.map-viewer.is-full .map-hint { flex: 0 0 auto; }
.map-viewer:fullscreen {
width: 100vw; height: 100vh;
margin: 0; border: 0; border-radius: 0;
display: flex; flex-direction: column;
}
.map-viewer:fullscreen .map-canvas { flex: 1 1 auto; height: auto; min-height: 0; }
.map-viewer:fullscreen .map-hint { flex: 0 0 auto; }
.map-viewer:-webkit-full-screen {
width: 100vw; height: 100vh;
margin: 0; border: 0; border-radius: 0;
display: flex; flex-direction: column;
}
.map-viewer:-webkit-full-screen .map-canvas { flex: 1 1 auto; height: auto; min-height: 0; }
.map-viewer:-webkit-full-screen .map-hint { flex: 0 0 auto; }
.map-floor {
min-width: 92px; padding: 0 6px;
font-size: 12.5px; color: var(--gold-lit); text-align: center;
}
.map-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.map-hint {
padding: 5px 10px; font-size: 12px;
border-top: 1px solid var(--border);
background: var(--bg-1);
}
/* Wskazanie wybranego expowiska.
Przy kilkuset pinezkach samo przewiniecie mapy nie wystarcza - gracz i tak
nie wie, w ktora patrzec. Wiec przygaszamy reszte i pulsujemy wybrana. */
.map-pins.has-selection .map-pin:not(.is-active) { opacity: .22; }
.map-pins.has-selection .map-pin.is-active { z-index: 6; }
.map-pin.is-active .map-dot {
box-shadow: 0 0 0 2px var(--gold-lit);
}
.map-pin.is-active::before {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid var(--gold-lit);
border-radius: 50%;
animation: pinPuls 1.4s ease-out infinite;
pointer-events: none;
}
@keyframes pinPuls {
0% { transform: scale(1); opacity: .9; }
70% { transform: scale(4.5); opacity: 0; }
100% { transform: scale(4.5); opacity: 0; }
}
/* Kto woli bez ruchu - zostaje sama obwodka. */
@media (prefers-reduced-motion: reduce) {
.map-pin.is-active::before { animation: none; opacity: .8; transform: scale(2.2); }
}
/* ==================== MAPA LOKACJI (statyczna) ==================== */
.map-wrap {
position: relative;
margin-bottom: 18px;
border: 1px solid var(--border-lit);
border-radius: var(--radius);
overflow: hidden;
background: #000;
line-height: 0;
}
.map-img {
display: block; width: 100%; height: auto;
/* Minimapa to jeden piksel na kratke - wygladzanie zamienilo by ja w papke. */
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.map-pin {
position: absolute;
transform: translate(-50%, -50%);
z-index: 2;
line-height: 1;
text-decoration: none;
}
.map-dot {
display: block;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--gold-lit);
border: 1.5px solid #1a1408;
box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 10px rgba(240,193,105,.8);
transition: transform .12s ease;
}
.map-pin:hover .map-dot { transform: scale(1.5); }
.map-label {
position: absolute; left: 50%; bottom: 14px;
transform: translateX(-50%);
display: none;
white-space: nowrap;
padding: 4px 9px; border-radius: 6px;
background: rgba(13,15,20,.94);
border: 1px solid var(--gold);
color: var(--text); font-size: 12px; font-weight: 600;
box-shadow: var(--shadow);
}
.map-label em { font-style: normal; color: var(--gold-lit); }
.map-pin:hover .map-label { display: block; z-index: 3; }
/* ---------------------------------------------------- Gdzie expic? --- */
/* Pasek wyszukiwania nad lista expowisk. */
.filter-row { display: flex; gap: 8px; align-items: center; }
.filter-row input[type="search"] { flex: 1 1 auto; min-width: 0; }
/* Miasta na mapie - inny znacznik niz expowiska, z nazwa widoczna zawsze.
Bez tego gracz nie ma sie do czego odniesc, patrzac na plame minimapy. */
.map-town { pointer-events: none; z-index: 1; }
.map-town-dot {
display: block; width: 7px; height: 7px;
border: 1.5px solid #cfe4ff;
background: #2b6cb0;
transform: rotate(45deg);
box-shadow: 0 0 0 1px rgba(0,0,0,.7);
}
.map-town-name {
position: absolute; left: 50%; top: 9px;
transform: translateX(-50%);
white-space: nowrap;
font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
color: #dbe9ff;
text-shadow: 0 0 3px #000, 0 0 6px #000;
}
/* Wybrany wpis - pulsuje, zeby dalo sie go znalezc wzrokiem na duzej mapie. */
.map-pin.is-active { z-index: 4; }
.map-pin.is-active .map-dot {
background: #fff;
transform: scale(1.7);
animation: pin-pulse 1.1s ease-in-out infinite;
}
.map-pin.is-active .map-label { display: block; }
@keyframes pin-pulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 8px 2px rgba(255,255,255,.85); }
50% { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 16px 6px rgba(240,193,105,.95); }
}
.hunt-table tbody tr { cursor: pointer; }
.hunt-table tbody tr:hover { background: rgba(240,193,105,.06); }
.hunt-row.is-active { background: rgba(240,193,105,.14); box-shadow: inset 3px 0 0 var(--gold-lit); }
.hunt-link { font-weight: 600; }
/* Etykieta z INNEGO pietra: przygaszamy sama kropke, nie napis.
Wczesniej caly znacznik dostawal opacity .45 i nazwy miast, ktorych swiatynia
nie stoi na powierzchni (Ankrahmun z=8, Darashia z=1, Kazordoon z=11, Edron
z=8, Premy Island i Castle z=6), byly na mapie ledwo czytelne - a to polowa
wszystkich nazw. Pietro widac po kropce i tak. */
.map-town.is-other-floor { opacity: 1; }
.map-town.is-other-floor .map-town-dot { opacity: .45; }
/* Miejsca bez swiatyni (Dragon Lair, Ice Land, Castle...) - ten sam napis co
miasta, zeby czytalo sie je tak samo dobrze; rozni je tylko mniejsza kropka. */
.map-place .map-town-dot { transform: scale(.72); }
/* ==================== LICZNIK DO STARTU ==================== */
/* Liczby maja tabular-nums, inaczej caly licznik drga przy kazdej zmianie
sekundy - cyfry w wiekszosci krojow maja rozne szerokosci. */
.countdown { margin: 22px 0 6px; }
.cd-label {
display: block; margin-bottom: 10px;
font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
color: var(--gold);
}
.cd-boxes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cd-box {
min-width: 74px; padding: 10px 12px;
border: 1px solid var(--border-lit); border-radius: 8px;
background: var(--panel-2);
}
.cd-num {
display: block; font-size: 30px; font-weight: 800; line-height: 1.1;
color: var(--gold-lit); font-variant-numeric: tabular-nums;
}
.cd-unit {
display: block; margin-top: 2px;
font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim);
}
.countdown.cd-koniec { opacity: .55; }
.countdown-live {
margin: 20px 0 6px; font-size: 16px; font-weight: 700; color: var(--ok);
}
@media (max-width: 520px) {
.cd-box { min-width: 62px; padding: 8px 10px; }
.cd-num { font-size: 24px; }
}
/* Przycisk akcji w naglowku karty - dosuniety do prawej krawedzi.
.card-head jest flexem, wiec margin-left: auto zjada cala wolna przestrzen
miedzy tytulem a przyciskiem. Ta sama sztuczka, co przy .head-link. */
.card-head .head-action { margin-left: auto; }
/* Wspolrzedne w zgloszeniu: monospace i tabular-nums, zeby dalo sie je
przepisac bez pomylki - to jedyna liczba w raporcie, ktora wpisuje sie
recznie w /goto albo w narzedzia do mapy. */
.mono-pos {
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-variant-numeric: tabular-nums;
letter-spacing: .3px;
}
/* --- Kanaly spolecznosciowe -------------------------------------------- */
/* Jeden zestaw regul dla sidebara i stopki. Rozmiar ikony podaje PHP
(socials_row), wiec tu nie ma ani jednej liczby zwiazanej z konkretnym
miejscem - inaczej zmiana rozmiaru wymagalaby poprawki w dwoch plikach. */
.social-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--bg-soft);
color: var(--text-dim);
/* Kolor i tlo animujemy osobno od transformacji - przy `all` przegladarka
animuje takze rzeczy, ktorych nie chcemy (np. szerokosc obramowania). */
transition: color .15s ease, background .15s ease,
border-color .15s ease, transform .15s ease;
}
.social-btn:hover {
transform: translateY(-2px);
border-color: currentColor;
}
/* Barwy marek dopiero NA NAJECHANIU. W spoczynku ikony sa stonowane i nie
walcza o uwage z trescia strony; kolor pojawia sie wtedy, gdy gracz juz
celuje w ikone i potwierdza mu, w co trafil. */
.social-discord:hover { color: #7e8ff5; background: rgba(88, 101, 242, .14); }
.social-facebook:hover { color: #4a8cf7; background: rgba(24, 119, 242, .14); }
.social-instagram:hover { color: #e06ba8; background: rgba(214, 41, 118, .14); }
.social-btn:focus-visible {
outline: 2px solid var(--gold-lit);
outline-offset: 2px;
}
/* W stopce rzad stoi pod linkami i jest wysrodkowany razem z nimi. */
.foot-social {
justify-content: center;
margin-top: 12px;
}
/* --- Strona glowna: trzy kolumny ---------------------------------------- */
/* Szerszy pojemnik TYLKO tam, gdzie sa trzy kolumny. Przy 1120px srodkowa
kolumna schodzila do ~400px, czyli ponizej czytelnej dlugosci wiersza. */
main.wrap.wrap-wide { max-width: 1560px; }
.layout-3 { grid-template-columns: 300px minmax(0, 1fr) 300px; }
/* Lewy panel zachowuje sie jak prawy pasek: przykleja sie przy przewijaniu
i ma ten sam odstep miedzy kartami. */
.side-left {
display: grid;
gap: 16px;
position: sticky;
top: 78px;
}
/* Ponizej ~1360px trzy kolumny robia sie ciasne: srodkowa spada do ~700px
i tabele zaczynaja sie przewijac. Lewy panel schodzi wtedy POD tresc -
nie do prawego paska, bo tam walczylby o miejsce ze statusem serwera. */
@media (max-width: 1360px) {
.layout-3 { grid-template-columns: minmax(0, 1fr) 300px; }
.side-left {
grid-column: 1 / -1;
order: 3;
position: static;
/* Pod trescia panel jest szeroki, wiec karty ida obok siebie. */
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
align-items: start;
}
}
@media (max-width: 900px) {
.layout-3 { grid-template-columns: 1fr; }
.side-left { grid-template-columns: 1fr; }
}
/* --- Zgloszenia bledow w lewym panelu ----------------------------------- */
.bugs-reward {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--gold-lit);
}
/* --- Feed z Instagrama (w karcie Community) ------------------------------ */
/* Podpis oddzielajacy posty od ikon kanalow. Kreska nad nim zastepuje osobna
karte z wlasnym paskiem tytulowym - ta sama rola, o 40 px mniej wysokosci. */
.feed-naglowek {
/* Odstep sciagniety (16+14 -> 12+12) i kreska w tym samym kolorze co
przegroda miedzy sprawami konta a jezykami w gornym pasku. var(--line)
przy tym tle karty prawie nie schodzi, wiec linia byla, ale jej nie
bylo widac - a odstep bez widocznej linii czyta sie jak przypadkowa
dziura, nie jak podzial. */
margin: 12px 0 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.08);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--text-dim);
}
.feed-lista { display: grid; gap: 16px; }
/* Kreska MIEDZY postami, ta sama co miedzy sprawami konta a jezykami
w gornym pasku - tylko pozioma. Odstep sam nie wystarczal: kafelki maja
zdjecie, date i opis, wiec bez linii trzy wpisy zlewaly sie w jeden ciag
obrazkow i tekstu. Kreski NIE ma pod ostatnim - domyka ja dol karty. */
.feed-lista .feed-item + .feed-item {
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.08);
}
/* Kafelek PIONOWY: zdjecie na calej szerokosci, opis pod nim. Wczesniej
miniatura 52 px stala obok tekstu i ze zrzutu z gry nie dalo sie niczego
rozpoznac - a to wlasnie obrazek jest tu trescia, nie podpis. */
.feed-item {
display: block;
color: inherit;
border-radius: 9px;
overflow: hidden;
transition: transform .15s ease;
}
.feed-item:hover { transform: translateY(-2px); }
.feed-img {
display: block;
/* 3/4 szerokosci panelu, nie cala: zdjecie ma byc duze, ale kafelek nadal
ma sie czytac jako wpis w kolumnie, a nie jako baner na cala szerokosc.
Wciecie z prawej daje tez miejsce, w ktorym oko odpoczywa miedzy postami. */
width: 75%;
/* Staly stosunek bokow, bo posty bywaja kwadratowe i poziome naraz,
a rozne wysokosci robily z listy schodki. 4:3 miesci zrzut z gry
czytelnie, a trzy takie kafelki nadal mieszcza sie w kolumnie. */
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 9px;
border: 1px solid var(--line);
transition: border-color .15s ease;
}
.feed-item:hover .feed-img { border-color: var(--gold); }
.feed-meta {
display: flex;
align-items: center;
gap: 6px;
margin: 8px 0 3px;
font-size: 11.5px;
color: var(--text-dim);
}
.feed-zrodlo { display: inline-flex; }
.feed-zrodlo.feed-facebook { color: #4a8cf7; }
.feed-zrodlo.feed-instagram { color: #e06ba8; }
.feed-opis {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--text-dim);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.feed-item:hover .feed-opis { color: var(--text); }
/* Szerszy pojemnik TYLKO tam, gdzie sa trzy kolumny. Przy 1120px srodkowa
kolumna schodzila do ~400px, czyli ponizej czytelnej dlugosci wiersza. */
main.wrap.wrap-wide { max-width: 1560px; }
/* Feed: reguly stoja WYZEJ, przy karcie Community. Byl tu ich starszy
duplikat z miniatura 52 px - lezal nizej w pliku, wiec WYGRYWAL
i nowe, pionowe kafelki nie mialy szans zadzialac. Przy dopisywaniu
regul na koncu pliku sprawdz, czy tej klasy juz gdzies nie ma. */
/* --- Zdjecia przy newsie ------------------------------------------------ */
.news-fotki {
display: grid;
gap: 8px;
margin-top: 14px;
}
/* Jedno zdjecie dostaje cala szerokosc, kilka dzieli sie po rowno. Bez tego
pojedynczy zrzut ekranu lezal w waskiej kolumnie i nie dalo sie na nim
niczego zobaczyc. */
.news-fotki-1 { grid-template-columns: 1fr; }
.news-fotki-2 { grid-template-columns: repeat(2, 1fr); }
.news-fotki-3, .news-fotki-4 { grid-template-columns: repeat(2, 1fr); }
.news-fotki img {
display: block;
width: 100%;
/* Staly stosunek bokow: zrzuty z gry bywaja roznych rozmiarow, a rozne
wysokosci robily z galerii schodki. Pelny obraz jest pod klikniecieciem. */
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--line);
transition: border-color .15s ease, transform .15s ease;
}
.news-fotki a:hover img { border-color: var(--gold); transform: scale(1.01); }
.news-fotki-1 img { aspect-ratio: 16 / 9; }
@media (max-width: 620px) {
.news-fotki-2, .news-fotki-3, .news-fotki-4 { grid-template-columns: 1fr; }
}
/* --- Edytor newsow ------------------------------------------------------ */
.news-form label { margin-top: 0; }
.news-form > label > span,
.news-form-row label > span {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: var(--text-dim);
font-weight: 500;
}
.news-form { display: grid; gap: 14px; }
.news-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.news-form textarea { font-family: inherit; line-height: 1.55; resize: vertical; }
.news-foto-lista {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin-top: 6px;
}
.news-foto { margin: 0; }
.news-foto img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 7px;
border: 1px solid var(--line);
}
.news-foto span {
display: flex;
align-items: center;
gap: 6px;
margin-top: 5px;
font-size: 12.5px;
color: var(--text-dim);
}
/* Odznaczone zdjecie ma byc widocznie inne od zostawionego - inaczej przy
czterech miniaturach latwo skasowac nie to, co sie chcialo. */
.news-foto:has(input:not(:checked)) img { opacity: .35; filter: grayscale(1); }
.btn-kasuj:hover { color: var(--err); border-color: var(--err); }
@media (max-width: 760px) {
.news-form-row { grid-template-columns: 1fr; }
}
/* --- Regulamin ---------------------------------------------------------- */
.regulamin-wstep {
margin: 0 0 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
color: var(--text);
}
.regulamin h3 {
margin: 22px 0 8px;
font-size: 15px;
color: var(--gold-lit);
}
.regulamin h3:first-of-type { margin-top: 0; }
/* Numer ("2.4") wypisuje PHP, nie przegladarka - patrz komentarz w rules.php.
Lista jest wiec bez wlasnych numerkow. */
.regulamin-lista { margin: 0; padding: 0; list-style: none; }
.reg-nr {
display: inline-block;
min-width: 30px;
margin-right: 6px;
color: var(--gold-lit);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.regulamin-lista li {
margin-bottom: 8px;
color: var(--text-dim);
line-height: 1.6;
}
.regulamin-lista li:last-child { margin-bottom: 0; }
/* Podswietlenie punktu, do ktorego prowadzi odnosnik (np. rules#p14) -
przy 26 punktach samo przewiniecie nie wystarcza, zeby go znalezc. */
.regulamin-lista li:target {
background: rgba(212,175,55,.10);
outline: 2px solid var(--gold);
border-radius: 5px;
padding: 3px 6px;
margin-left: -6px;
}
.regulamin-zgoda { border-top: 1px solid var(--line); }
/* Zgoda na regulamin. Wieksza kratka niz w reszcie strony CELOWO: to jedyne
pole, ktorego zaznaczenie jest oswiadczeniem, a nie ustawieniem - ma byc
widoczne i trudne do miniecia wzrokiem. Cale pole jest klikalne (etykieta
obejmuje kratke i napis), wiec 22 px to rozmiar samego znacznika, a nie
celu klikniecia. */
.zgoda-pole {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 4px;
padding: 12px 14px;
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
}
.zgoda-pole:hover { border-color: var(--border-lit); }
.zgoda-pole:has(input:checked) { border-color: var(--gold); background: rgba(217,164,65,.08); }
.zgoda-pole:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.zgoda-pole input {
flex: 0 0 auto;
width: 22px;
height: 22px;
cursor: pointer;
}
/* `min-width: 0` pozwala napisowi zawijac sie normalnie w waskim oknie
zamiast rozpychac rzad. */
.zgoda-pole span { min-width: 0; color: var(--text); font-size: 15px; line-height: 1.45; }
/* --- Wysrodkowanie tresci wzgledem menu --------------------------------- */
/* Strona z paskiem bocznym dostaje po LEWEJ kolumne tej samej szerokosci,
co pasek po prawej. Bez niej kolumna z trescia siedzi w lewej czesci
kontenera i nie stoi pod wysrodkowanym menu - widac to od razu, gdy
porowna sie krawedz karty z krawedzia paska nawigacji.
Lewa kolumna bywa pusta (wtedy widac tlo) albo niesie panel spolecznosci
na stronie glownej - w obu wypadkach srodek zostaje ten sam. */
main.wrap:has(> .layout) { max-width: 1560px; }
.layout { grid-template-columns: 300px minmax(0, 1fr) 300px; }
/* Strony BEZ lewego panelu maja tylko dwoje dzieci: tresc i pasek. Tresc
wskakuje do srodkowej kolumny, pasek trafia do trzeciej sam. */
.layout > *:first-child:not(.side-left) { grid-column: 2; }
/* Ikona w zlotym przycisku paska - domyslnie stoi za wysoko przy tekscie. */
.nav-cta svg { vertical-align: -2px; margin-right: 2px; }
@media (max-width: 1360px) {
/* Trzy kolumny robia sie ciasne - lewa znika, tresc wraca na jej miejsce. */
.layout { grid-template-columns: minmax(0, 1fr) 300px; }
.layout > *:first-child:not(.side-left) { grid-column: 1; }
}
/* PROG 1650px NIE JEST WZIETY Z POWIETRZA - tyle wymaga jednoczesne
wysrodkowanie menu i zmieszczenie wszystkiego w jednym rzedzie:
lewa kolumna = prawa kolumna = szerokosc GRUPY PO PRAWEJ (~490px),
bo tylko przy rownych bokach srodkowa kolumna wypada na srodku;
490 + 583 (menu) + 490 + 28 (odstepy) + 44 (marginesy) = 1635.
Ponizej tego grupa po prawej nie miesci sie w swojej kolumnie i WCHODZI
NA MENU - przy 1500px "Log in" lezalo na "Donate". Zamiast rezygnowac
z wysrodkowania, przenosimy menu do wlasnego rzedu: jest wtedy wysrodkowane
na calej szerokosci okna, czyli obietnica zostaje spelniona takze na
weszych ekranach. */
@media (max-width: 1650px) {
.site-header .wrap {
grid-template-columns: 1fr auto;
row-gap: 8px;
padding-top: 8px;
padding-bottom: 8px;
}
.site-header nav.main-nav {
grid-column: 1 / -1;
grid-row: 2;
justify-self: center;
flex-wrap: wrap;
justify-content: center;
}
.nav-right { gap: 12px; }
}
@media (max-width: 900px) {
.layout { grid-template-columns: 1fr; }
}
/* Flagi odsuniete od grupy konta mocniej niz reszta odstepow - to dwie
zupelnie rozne rzeczy i maja sie nie czytac jako jeden pasek kontrolek. */
.nav-right .lang-switch { margin-left: 16px; }
/* Ikona stoi ZA napisem, wiec odstep idzie z jej lewej strony. */
.nav-cta svg { vertical-align: -2px; margin: 0 0 0 2px; }
/* Napis w JEDNEJ linii. "Create account" (i dluzsze "Account erstellen")
lamalo sie na dwie linie i rozpychalo caly pasek w pionie - przycisk byl
wtedy dwa razy wyzszy od sasiednich linkow. */
.nav-cta { white-space: nowrap; }
/* ---------------------------------------------------------------- gildie
Odmiany plakietki dla statusu wojny. Kolory ida za znaczeniem, a nie za
ladnym zestawem: trwajaca wojna jest czerwona, bo to stan, w ktorym gina
postacie; zaproszenie zolte, bo czeka na decyzje; zakonczona i odwolana
szare, bo to juz historia.
Te same nazwy klas robia za znacznik "wolny dom" na liscie domow - wolny
dom jest dobra wiadomoscia dokladnie tak samo jak zakonczona wojna nie jest,
wiec `war-active` wystepuje tam w innej roli. Gdyby kiedys kolory mialy sie
rozjechac, trzeba je rozdzielic na osobne klasy - dzis to ta sama zielen
i czerwien, wiec dublowanie definicji byloby gorsze. */
.badge.war-active { color: #e08a6a; border-color: #6b3f30; background: rgba(224,138,106,.12); }
.badge.war-pending { color: var(--gold-lit); border-color: #6b5a30; background: rgba(214,171,76,.10); }
.badge.war-ended { color: #7fc98a; border-color: #35603c; background: rgba(127,201,138,.10); }
.badge.war-off { color: var(--muted); }
/* Wiersz filtrow nad tabela domow. Zawija sie na waskim ekranie zamiast
wypychac tabele poza ramke. */
.form-row {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
align-items: flex-end;
}
.form-row label {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
font-size: 13px;
}
.form-row select { min-width: 150px; }
/* ------------------------------------------------------------ ruch (wlasciciel)
Wykresy slupkowe rysujemy inline w SVG, bez biblioteki. `preserveAspectRatio:
none` rozciaga je na szerokosc karty - slupki godzinowe maja byc czytelne
jako KSZTALT calego przebiegu, a nie jako pojedyncze wartosci; od tych
drugich sa podpowiedzi. */
.ruch-svg {
display: block;
width: 100%;
height: 160px;
}
.ruch-maks {
margin-top: 6px;
font-size: 12px;
color: var(--muted);
text-align: right;
}
.ruch-kafle {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
}
.ruch-kafle div {
display: flex;
flex-direction: column;
}
.ruch-kafle b {
font-size: 22px;
color: var(--gold-lit);
font-variant-numeric: tabular-nums;
}
.ruch-kafle span {
font-size: 12px;
color: var(--muted);
}
/* ==================== LIGHTBOX (zdjecia w newsach) ====================
Klik w zdjecie w tresci wpisu albo w galerii otwiera je na pelnym ekranie.
Logika w assets/lightbox.js; tu tylko wyglad overlaya. */
.lightbox {
position: fixed; inset: 0; z-index: 3000;
display: none; align-items: center; justify-content: center;
background: rgba(0,0,0,.92);
/* zapas pod pasek podpowiedzi u dolu i przycisk zamkniecia u gory */
padding: 56px 16px;
}
.lightbox.open { display: flex; }
.lightbox-img {
max-width: 94vw; max-height: 88vh;
border-radius: 6px; box-shadow: 0 12px 48px rgba(0,0,0,.7);
transform-origin: center center;
cursor: zoom-in; user-select: none; -webkit-user-drag: none;
will-change: transform;
}
.lightbox-x {
position: absolute; top: 14px; right: 18px;
width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
background: rgba(0,0,0,.5); color: #fff; font-size: 26px; line-height: 1;
cursor: pointer; transition: background .15s ease;
}
.lightbox-x:hover { background: rgba(0,0,0,.85); }
.lightbox-hint {
position: absolute; bottom: 16px; left: 0; right: 0;
text-align: center; color: rgba(255,255,255,.8);
font-size: 13px; pointer-events: none;
}
/* ==================== PRZYCISK "PUNKTY ZA POST" ====================
Jedyny element interfejsu, ktory sie RUSZA - i to jest cala jego robota.
Poswiata i pioruny sa przeniesione z ulepszonego przedmiotu w grze, zeby
gracz od razu skojarzyl "to jest to swiecace, co widzialem".
Wszystko rysuje CSS: zadnych obrazkow, wiec przycisk nie doklada ani
jednego zapytania i nie ma czego czekac na wczytanie.
Lewa komorka naglowka to teraz logo I ten przycisk (patrz header.php) -
bez wspolnego pojemnika siatka 1fr-auto-1fr mialaby czworo dzieci
i menu przestaloby stac na srodku okna. */
/* WYSRODKOWANIE PRZYCISKU MIEDZY LOGIEM A MENU.
`gap` doklejal go do loga; `margin-inline: auto` na przycisku rozklada cala
wolna przestrzen komorki po jego OBU stronach po rowno - a poniewaz komorka
konczy sie tam, gdzie zaczyna sie menu, przycisk staje dokladnie w polowie
drogi miedzy "Mortha" a "News".
Logo dostaje `flex: none`, zeby nie zjadlo tej przestrzeni samo. */
.brand-group { display: flex; align-items: center; min-width: 0; }
.brand-group .brand { flex: none; }
.brand-group .promo-cta { margin-inline: auto; }
.promo-cta {
position: relative;
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 15px 7px 13px;
border-radius: 999px;
border: 1px solid rgba(217, 164, 65, .55);
background: linear-gradient(180deg, rgba(61, 45, 14, .95), rgba(37, 27, 9, .95));
color: #ffdf9a;
font-size: 13px; font-weight: 700; letter-spacing: .2px;
white-space: nowrap;
text-decoration: none;
/* Poswiata pod przyciskiem pulsuje razem z ta w warstwie .promo-cta-glow -
ta jest ciepla i stala, tamta zimniejsza i ruchoma. */
box-shadow: 0 0 12px rgba(217, 164, 65, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.promo-cta:hover,
.promo-cta:focus-visible {
transform: translateY(-1px);
border-color: rgba(255, 214, 122, .95);
box-shadow: 0 0 20px rgba(217, 164, 65, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.promo-cta.active { border-color: rgba(255, 214, 122, .95); }
/* POSWIATA - osobna warstwa POD trescia, rozlana poza obrys przycisku.
`inset: -6px` zamiast wiekszego box-shadow, bo cien nie da sie rozmyc
asymetrycznie, a tutaj chodzi o miekka aureole dookola. */
.promo-cta-glow {
position: absolute; inset: -6px;
border-radius: inherit;
background: radial-gradient(ellipse at center,
rgba(255, 205, 105, .40), rgba(255, 205, 105, 0) 70%);
animation: promo-oddech 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes promo-oddech {
0%, 100% { opacity: .45; transform: scale(.96); }
50% { opacity: 1; transform: scale(1.04); }
}
/* PIORUNY - dwa te same ksztalty, kazdy z wlasnym opoznieniem i lustrzanym
odbiciem. Rozne opoznienia daja NIEREGULARNE migotanie; przy jednym
piorunie albo rownej fazie wychodzi rowny puls, ktory czyta sie jak
wskaznik ladowania, a nie jak iskrzenie. */
.promo-cta-bolts { position: relative; display: inline-flex; width: 14px; height: 16px; }
.promo-cta-bolts svg {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
fill: #ffe9a8;
filter: drop-shadow(0 0 4px rgba(255, 213, 110, .95));
animation: promo-iskra 1.6s steps(1, end) infinite;
}
.promo-cta-bolts svg:last-child {
transform: scaleX(-1);
animation-delay: .77s; /* niepodzielne przez okres - fazy sie nie zejda */
opacity: .8;
}
@keyframes promo-iskra {
0%, 62% { opacity: 0; }
64%, 70% { opacity: 1; }
72%, 78% { opacity: .25; }
80%, 88% { opacity: 1; }
90%, 100% { opacity: 0; }
}
.promo-cta-text { position: relative; }
/* Ruch potrafi przeszkadzac. Przy wylaczonych animacjach zostaje sam kolor
i statyczna poswiata - przycisk nadal sie wyroznia, tylko nie miga. */
@media (prefers-reduced-motion: reduce) {
.promo-cta-glow { animation: none; opacity: .7; }
.promo-cta-bolts svg { animation: none; opacity: 1; }
.promo-cta-bolts svg:last-child { opacity: .8; }
}
/* Na waskim ekranie w naglowku nie ma miejsca na trzy grupy naraz - napis
znika, zostaje sam swiecacy piorun. Sama ikona bez etykiety to zwykle zly
pomysl, ale tutaj przycisk ma jeszcze `aria-label`... nie ma - dlatego
napis zostaje w DOM i jest tylko wizualnie schowany, zeby czytnik ekranu
dalej go czytal. */
@media (max-width: 1100px) {
.promo-cta { padding: 7px 10px; }
.promo-cta-text {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
}
/* ==================== STRONA "PUNKTY ZA POST" ==================== */
.promo-lead { font-size: 15px; color: var(--text); margin: 0 0 16px; }
.promo-h3 { margin: 0 0 8px; font-size: 14px; color: var(--gold); }
.promo-rules { margin: 0 0 18px; padding-left: 20px; line-height: 1.7; }
.promo-rules li { margin-bottom: 4px; }
.promo-form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.promo-form label { font-size: 13px; color: var(--muted); }
.promo-form input { width: 100%; }
.promo-hint { font-size: 12.5px; margin: 2px 0 0; }