/*
 * Star Manor — wygląd.
 * Rama gry (pasek surowców, zakładki, tła podstron) to wieczorne niebo nad grodem; treść leży na pergaminowych kartach.
 * Każda zakładka ma własny akcent (--akcent): wojsko — karmazyn, raporty — miedź, ranking — purpura, sklep — lazur.
 * Układ: telefon = jedna kolumna i dolny pasek; od 700 px siatki 2–3 kart; od 1100 px boczna szyna zakładek;
 * od 1280 px „lista + panel boczny"; kolumna treści najwyżej 1320 px, tło wypełnia okno.
 */
:root {
  --tlo: #141627; --rama: #1a1d36; --rama2: #262b4d; --linia: #3a4170; --tekst: #f6f1e7; --cichy: #c3c7de;
  --zloto: #fbbf24; --zielen: #6ee7a0; --czerwien: #fca5a5; --dia: #a9d0ff; --moj: #e11d48;
  --perg: #fbf2dc; --perg2: #f3e3bd; --perg-linia: #cfae72; --atrament: #33200f; --atr-cichy: #664a29;
  --karta: var(--perg); --karta2: #f1e0b6;
  --akcent: #c62f4d; --akcent-c: #6f142c;
  --tyt: 'Palatino Linotype', Palatino, 'Book Antiqua', 'Iowan Old Style', Georgia, 'Noto Serif', serif;
  --cien: 0 2px 0 rgba(84, 52, 14, .28), 0 10px 22px rgba(8, 6, 20, .32);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--tlo); color: var(--tekst); font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
svg { flex: none; }
a { color: var(--dia); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.czyt, .koszt .czyt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Na pergaminie obowiązują ciemne barwy tekstu — te same nazwy zmiennych, inne wartości. */
.karta, .arkuszKarta, .witajKarta, .ranking li, .stopien, .toast {
  --tekst: var(--atrament); --cichy: var(--atr-cichy); --linia: var(--perg-linia); --zielen: #17602f; --czerwien: #a8221a; --dia: #1d4fc4;
  color: var(--tekst);
}

/* ---------------------------------------------------------------- przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 1px solid #a67c3d; background: linear-gradient(#fffaf0, #ecd9a8); color: #33200f;
  border-radius: 12px; padding: 8px 16px; font-weight: 800; text-align: center; box-shadow: 0 3px 0 #a67c3d; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a67c3d; }
.btn:disabled { opacity: .5; cursor: default; filter: saturate(.6); }
.btn.glowny { background: linear-gradient(#fde047, #f59e0b); color: #2a1a00; border-color: #b45309; box-shadow: 0 4px 0 #b45309; font-size: 16px; }
.btn.glowny:active { box-shadow: 0 1px 0 #b45309; transform: translateY(3px); }
.btn.dia { background: linear-gradient(#a5d4ff, #4a95f2); color: #04142b; border-color: #1d4ed8; box-shadow: 0 4px 0 #1d4ed8; }
.btn.dia:active { box-shadow: 0 1px 0 #1d4ed8; transform: translateY(3px); }
.btn.maly { padding: 6px 13px; font-size: 14px; }
.btn.pelny { width: 100%; }
.przelacznik.wl { background: linear-gradient(#c9f2b0, #7fcf62); border-color: #2f7d32; box-shadow: 0 3px 0 #2f7d32; color: #0f3d16; }
.drobne { color: var(--cichy); font-size: 13px; }
.lnk { background: none; border: 0; padding: 4px 2px; color: var(--dia); font-weight: 700; font-size: 14px; text-decoration: underline; min-height: 44px; }
.ostrzez { color: var(--czerwien); font-weight: 700; font-size: 14px; }
.dobrze { color: var(--zielen); font-weight: 700; font-size: 14px; }
.adres { color: var(--tekst); overflow-wrap: anywhere; }
.rzad { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rzad.miedzy { justify-content: space-between; }
.zIk { display: inline-flex; align-items: center; gap: 8px; }
.zIk svg { width: 22px; height: 22px; }
.czasik { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.czasik svg { width: 16px; height: 16px; }

.ilePole { width: 76px; min-height: 44px; font: inherit; font-weight: 800; background: #fffdf6; color: #33200f; border: 1.5px solid #a67c3d; border-radius: 12px; padding: 8px 10px; text-align: center; }
.ilePole::placeholder { color: #75593a; font-weight: 600; opacity: 1; }
.ilePole:disabled { opacity: .55; }

.jezyki { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.jezyki button { min-height: 44px; border: 1px solid #a67c3d; background: #fffaf0; border-radius: 99px; padding: 4px 14px; font-size: 14px; font-weight: 700; color: #4a3212; }
.jezyki button.wybrana { background: linear-gradient(#fde047, #f59e0b); color: #2a1a00; border-color: #b45309; }

/* ------------------------------------------------------------- powitanie */
.witaj { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto;
  background: linear-gradient(#171a44 0, #3d2a78 34%, #a4446f 62%, #ee8c59 84%, #f7c66b 100%); }
.witajTlo { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: min(54vh, 480px); pointer-events: none; overflow: visible; }
.witajKarta { position: relative; width: min(440px, 100%); background: linear-gradient(var(--perg), var(--perg2)); border: 2px solid #a67c3d; border-radius: 24px; padding: 18px 22px;
  display: grid; gap: 10px; text-align: center; box-shadow: 0 0 0 5px rgba(251, 242, 220, .28), 0 22px 60px rgba(10, 6, 30, .6); }
.witajHerb svg { display: block; width: 62px; height: 62px; margin: 0 auto -4px; filter: drop-shadow(0 3px 3px rgba(60, 20, 10, .35)); }
.witajKarta h1 { font: 900 44px/1 var(--tyt); letter-spacing: .02em; color: #a81f3d; text-shadow: 0 2px 0 #fbe3a1; }
.witajKarta .haslo { color: var(--cichy); font-weight: 600; margin-top: -4px; }
.witajKarta h2 { font: 800 21px/1.2 var(--tyt); margin-top: 4px; }
.witajKarta label { display: grid; gap: 5px; text-align: left; font-size: 14px; font-weight: 700; color: var(--cichy); }
.witajKarta input { font: inherit; font-size: 19px; font-weight: 700; color: #33200f; background: #fffdf6; border: 1.5px solid #a67c3d; border-radius: 12px; padding: 11px 14px; width: 100%; min-height: 48px; }
.witajKarta .btn.glowny { font-size: 18px; min-height: 52px; }
.witajKarta .lnk { justify-self: center; }
.prawne { text-align: center; font-size: 14px; color: var(--cichy); line-height: 2.1; }
.prawne a { display: inline-block; white-space: nowrap; padding: 12px 4px; line-height: 20px; }   /* cel dotyku 44 px */

/* --------------------------------------------------------------------- gra */
.gra { position: fixed; inset: 0; display: flex; flex-direction: column; }
.pasek { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: max(6px, env(safe-area-inset-top)) 10px 6px; z-index: 3;
  background: linear-gradient(#232750, #181b36); border-bottom: 1px solid #0c0e1e; box-shadow: inset 0 -1px 0 rgba(251, 191, 36, .4); }
.zasob { display: flex; align-items: center; gap: 7px; min-height: 44px; background: rgba(8, 10, 26, .55); border: 1px solid rgba(255, 255, 255, .16); border-radius: 99px; padding: 3px 14px 3px 7px;
  font-weight: 800; white-space: nowrap; font-size: 15px; color: var(--tekst); font-variant-numeric: tabular-nums; }
.zasob svg { width: 30px; height: 30px; }
.zasob small { color: var(--zielen); font-weight: 700; font-size: 12px; }
.zasob.pelny b { color: var(--czerwien); }
.zasob.dia { cursor: pointer; background: linear-gradient(rgba(59, 130, 246, .35), rgba(29, 78, 216, .35)); border-color: rgba(147, 197, 253, .55); }
.zasob .slupek { position: relative; display: grid; }
.zasob .slupek i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; margin-top: 1px; }
.zasob .slupek i::after { content: ''; display: block; height: 100%; width: var(--f, 0%); background: var(--zielen); }
.zasob.pelny .slupek i::after { background: var(--czerwien); }

.alarm { background: linear-gradient(#c62828, #8e1616); color: #fff; text-align: center; font-weight: 800; padding: 8px 12px; font-size: 14px; z-index: 3; border-bottom: 1px solid #5c0d0d; }

main { flex: 1; position: relative; min-height: 0; min-width: 0; }
.widok { position: absolute; inset: 0; }
.przewijak { position: absolute; inset: 0; overflow: auto; touch-action: none; overscroll-behavior: none; background: #0b0f17; scrollbar-width: none; cursor: grab; }
.przewijak::-webkit-scrollbar { display: none; }
#scena { display: block; }
#mapa { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.mapaPrzyciski { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; justify-items: end; }
.mapaPrzyciski button { min-width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(20, 22, 44, .88); color: var(--tekst); font-weight: 900; font-size: 20px; padding: 0 12px; }
.mapaPrzyciski button[data-mapa="dom"] { font-size: 14px; }
.mapaPrzyciski button[data-mapa="panstwo"] { font-size: 13.5px; border-color: rgba(251, 191, 36, .7); color: #fde68a; max-width: 170px; height: auto; min-height: 44px; padding: 5px 10px; line-height: 1.2; white-space: normal; text-align: right; }
.kolejkaPasek { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 6px; max-width: min(340px, calc(100% - 20px)); pointer-events: none; }
.kolejkaPasek div { background: rgba(18, 20, 40, .88); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; padding: 8px 13px; font-weight: 700; font-size: 13.5px; display: flex; justify-content: space-between; gap: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.kolejkaPasek b { color: var(--zloto); }

/* ---------------------------------------------------------- pasek zakładek */
.zakladki { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); z-index: 3;
  background: linear-gradient(#1f2247, #14162c); border-top: 1px solid rgba(251, 191, 36, .4); }
.marka { display: none; }
.zakladki button { position: relative; min-width: 0; min-height: 52px; background: none; border: 0; border-radius: 12px; padding: 5px 2px 4px; display: grid; justify-items: center; align-content: center; gap: 2px;
  color: #c3c7de; font-size: 11px; font-weight: 700; }
.zakladki button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zakladki svg { width: 26px; height: 26px; }
.zakladki button[data-zak="grod"] { --zb: #fbbf24; } .zakladki button[data-zak="mapa"] { --zb: #7ee2a8; } .zakladki button[data-zak="wojsko"] { --zb: #ff9aae; }
.zakladki button[data-zak="raporty"] { --zb: #ffb866; } .zakladki button[data-zak="ranking"] { --zb: #cbb2ff; } .zakladki button[data-zak="sklep"] { --zb: #8fcaff; }
.zakladki button.wybrana { color: var(--zb); background: rgba(255, 255, 255, .09); }
.zakladki button.wybrana::after { content: ''; position: absolute; top: -4px; left: 26%; right: 26%; height: 3px; border-radius: 0 0 4px 4px; background: currentColor; }
.kropka { position: absolute; top: 5px; left: calc(50% + 7px); width: 11px; height: 11px; border-radius: 50%; background: #ff5a5a; border: 2px solid #1a1d3a; }

/* ------------------------------------------------- podstrony: tło i układ */
.widok.lista { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
#w-wojsko { --akcent: #c62f4d; --akcent-c: #6f142c; background: radial-gradient(120% 70% at 50% 0, #5d1e3c 0, #261733 50%, #141627 100%); }
#w-raporty { --akcent: #bd560f; --akcent-c: #6e2f06; background: radial-gradient(120% 70% at 50% 0, #663914 0, #2a1c2a 50%, #141627 100%); }
#w-ranking { --akcent: #7646d6; --akcent-c: #3a1f86; background: radial-gradient(120% 70% at 50% 0, #46308f 0, #211b40 50%, #141627 100%); }
#w-sklep { --akcent: #1876b4; --akcent-c: #0d3f7c; background: radial-gradient(120% 70% at 50% 0, #17528a 0, #172242 50%, #141627 100%); }
.strona { max-width: 1320px; margin: 0 auto; padding: 12px 12px 28px; display: grid; gap: 14px; align-content: start; }
.uklad { display: grid; gap: 14px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.kolumna { display: contents; }
.blok { display: grid; gap: 10px; align-content: start; min-width: 0; }
.pierwszy { order: -1; } .ostatni { order: 5; }
.siatka { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
h2.dzial { display: flex; align-items: center; gap: 12px; font: 800 13.5px/1.3 system-ui, sans-serif; color: #f3e3bd; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
h2.dzial::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(243, 227, 189, .55), rgba(243, 227, 189, 0)); }
.pusto { color: #ece4d2; text-align: center; padding: 22px 16px; background: rgba(255, 255, 255, .07); border: 1.5px dashed rgba(243, 227, 189, .45); border-radius: 16px; }

/* nagłówek podstrony */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; color: #fff;
  background: linear-gradient(115deg, var(--akcent-c) 0, var(--akcent) 100%); border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px rgba(0, 0, 0, .38); }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 28px), radial-gradient(60% 120% at 100% 50%, rgba(255, 220, 150, .35), transparent 70%); }
.heroTekst { position: relative; display: grid; gap: 6px; min-width: 0; }
.hero h1 { font: 900 26px/1.1 var(--tyt); letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.hero p { color: #fff; font-size: 14px; max-width: 62ch; }
.hero .heroLiczba { font-size: 18px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.hero .heroLiczba small { font-size: 14px; font-weight: 700; background: rgba(0, 0, 0, .3); border-radius: 99px; padding: 2px 10px 2px 6px; }
.hero .postep { height: 12px; max-width: 460px; background: rgba(0, 0, 0, .4); }
.heroZnaczki { display: flex; flex-wrap: wrap; gap: 6px; }
.znaczek { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .24); border-radius: 99px; padding: 3px 11px; font-size: 13px; font-weight: 600; color: #fff; }
.znaczek b { font-weight: 900; font-size: 15px; }
.znaczek svg { width: 18px; height: 18px; }
.znaczek.zloty { background: linear-gradient(#fde047, #f59e0b); color: #2a1a00; border-color: #b45309; font-weight: 800; }
.heroRys { position: relative; width: 96px; }
.heroRys svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }

/* ------------------------------------------------------------------- karty */
.karta { background: linear-gradient(var(--perg), var(--perg2)); border: 1px solid var(--perg-linia); border-radius: 16px; padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; box-shadow: var(--cien); }
.karta .karta { box-shadow: none; background: var(--karta2); }
.karta h3 { font: 800 17px/1.25 var(--tyt); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.karta h3 small { font: 600 12.5px/1.3 system-ui, sans-serif; color: var(--cichy); margin-left: auto; }
.karta h3 svg { width: 22px; height: 22px; }
.karta p { color: var(--cichy); font-size: 14px; }
.karta p.ostrzez { color: var(--czerwien); } .karta p.dobrze { color: var(--zielen); }
p.karta.opis { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; color: var(--cichy); font-size: 14px; }
p.karta.opis svg { width: 26px; height: 26px; }
.koszt { display: flex; gap: 6px 12px; flex-wrap: wrap; font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.koszt > span { display: inline-flex; align-items: center; gap: 4px; }
.koszt svg { width: 20px; height: 20px; }
.koszt .brak { color: var(--czerwien); }
.postep { height: 10px; border-radius: 99px; background: rgba(70, 42, 10, .2); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.postep i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f59e0b, #fde047); }
.efekt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.efekt div { background: var(--karta2); border: 1px solid var(--perg-linia); border-radius: 12px; padding: 8px 12px; font-weight: 800; }
.efekt small { display: block; color: var(--cichy); font-weight: 600; font-size: 12px; }
.efekt div:last-child { background: #e4f1c8; border-color: #8fb86a; }
.efekt div:last-child b { color: var(--zielen); }
.wybor { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; background: var(--karta2); border: 1px solid var(--perg-linia); border-radius: 12px; padding: 7px 10px; font-weight: 700; }

/* karta z medalionem: marsze, wieże, najazd, raporty */
.zIkona { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; }
.medalion { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 28%, #fffdf3, #ead29f); border: 2px solid #b8935a; box-shadow: 0 2px 0 rgba(84, 52, 14, .3); }
.medalion svg { width: 36px; height: 36px; }
.tresc { display: grid; gap: 6px; min-width: 0; }
.sila { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.sila svg { width: 22px; height: 22px; }
.sila.wrog .postep i { background: linear-gradient(90deg, #a8221a, #f0624d); }
.sila.swoj .postep i { background: linear-gradient(90deg, #1d5fa8, #63b3f2); }
.najazd.grozny { background: linear-gradient(#fdeee6, #f7d3c2); border-color: #d08a72; }
.najazd.bezpieczny { background: linear-gradient(#f1f7dd, #dcebb8); border-color: #9cbf6d; }

/* ------------------------------------------------------------------ wojsko */
.jednostka { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; }
.portret { position: relative; display: grid; place-items: center; border-radius: 14px; overflow: hidden; aspect-ratio: 54 / 62; border: 2px solid #a8221a; box-shadow: inset 0 -16px 22px rgba(60, 20, 0, .25), 0 2px 0 rgba(84, 52, 14, .3); }
.jed-p .portret { background: radial-gradient(circle at 50% 28%, #ffe1e5, #e2607a 85%); border-color: #a81f3d; }
.jed-l .portret { background: radial-gradient(circle at 50% 28%, #e4f8d2, #6ab85a 85%); border-color: #2f6b2c; }
.jed-j .portret { background: radial-gradient(circle at 50% 28%, #e0eeff, #5a9be6 85%); border-color: #1d4f9c; }
.portret canvas { display: block; width: 100%; height: auto; }
.ileMam { position: absolute; left: 5px; top: 5px; min-width: 30px; padding: 1px 8px; border-radius: 99px; background: rgba(22, 14, 34, .86); color: #fff; font-weight: 900; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.zamknieta .portret { filter: grayscale(.8) brightness(.88); }
.jedTresc { display: grid; gap: 7px; min-width: 0; }
.jednostka h3 small { flex-basis: 100%; margin-left: 0; }   /* stan zawsze w osobnym wierszu — karty trzech jednostek mają równe rzędy */
.staty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.staty span { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 7px; align-items: center; background: var(--karta2); border: 1px solid var(--perg-linia); border-radius: 10px; padding: 4px 8px; }
.staty svg { grid-row: 1 / 3; width: 22px; height: 22px; }
.staty b { font-size: 16px; font-weight: 900; line-height: 1.15; }
.staty small { font-size: 11.5px; color: var(--cichy); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zKlodka { display: flex; align-items: center; gap: 8px; }
.zKlodka svg { width: 22px; height: 22px; }
.szkolRzad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.szkolRzad .ilePole { width: 72px; }
.szkolRzad .btn { flex: 1 1 110px; }
.pozycja { display: grid; gap: 5px; }
.marsz-atak .medalion { background: radial-gradient(circle at 35% 28%, #fff3f3, #f3b8b0); border-color: #b8564a; }
.marsz-obsada .medalion { background: radial-gradient(circle at 35% 28%, #f3f9ff, #b9d8f7); border-color: #5a8cc4; }
.marsz-powrot .medalion { background: radial-gradient(circle at 35% 28%, #f6fbe9, #cfe6a8); border-color: #7fa653; }
.marsz .medalion svg { width: 30px; height: 30px; }

/* ----------------------------------------------------------------- raporty */
.raport { border-left: 6px solid #a08a63; }
.raport.wynik-wygrana { border-left-color: #2f9e5b; background: linear-gradient(#f3f8e0, #e0edc0); }
.raport.wynik-wygrana .medalion { border-color: #2f9e5b; background: radial-gradient(circle at 35% 28%, #fbfff0, #cfe6a8); }
.raport.wynik-przegrana { border-left-color: #c8372d; background: linear-gradient(#fdeee6, #f6d6c6); }
.raport.wynik-przegrana .medalion { border-color: #c8372d; background: radial-gradient(circle at 35% 28%, #fff6f2, #f1bfb0); }
.raport h3 { font-size: 16.5px; }
.rapZnaczki { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.slawa { display: inline-flex; align-items: center; gap: 4px; background: #fff3c4; border: 1px solid #d39a2c; color: #6b3a00; border-radius: 99px; padding: 2px 11px 2px 6px; font-weight: 800; font-size: 13.5px; }
.slawa svg { width: 17px; height: 17px; }
.diaZnaczek { display: inline-flex; align-items: center; gap: 4px; background: #dbeafe; border: 1px solid #7cb0f5; color: #123f9c; border-radius: 99px; padding: 2px 11px 2px 4px; font-weight: 800; font-size: 13.5px; }
.diaZnaczek svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------------- ranking */
.podzakladki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 5px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .14); }
.podzakladki button { min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; border: 0; border-radius: 12px; padding: 4px;
  color: #ece6fb; font-weight: 800; font-size: 12px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.podzakladki svg { width: 22px; height: 22px; }
.podzakladki button.wybrana { background: linear-gradient(#fffaf0, #f1dfb0); color: #33200f; box-shadow: 0 2px 0 #a67c3d; }
.podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.stopien { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; overflow: hidden; background: linear-gradient(var(--perg), var(--perg2)); border: 1px solid var(--perg-linia); border-radius: 16px 16px 12px 12px; padding: 10px 6px 0; box-shadow: var(--cien); }
.stopien .medal { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 900 19px/1 var(--tyt); box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.stopien .medal svg { width: 28px; height: 28px; }
.stopien.m1 .medal { background: radial-gradient(circle at 35% 28%, #fff7c7, #f5b301); }
.stopien.m2 .medal { background: radial-gradient(circle at 35% 28%, #ffffff, #9aa7b8); color: #1b2330; }
.stopien.m3 .medal { background: radial-gradient(circle at 35% 28%, #ffd9b8, #b9632c); color: #2a1202; }
.stopien .kto { font-weight: 800; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.stopien .kto small { display: block; color: var(--cichy); font-weight: 600; font-size: 12px; }
.stopien .wynik { font: 900 19px/1.1 var(--tyt); font-variant-numeric: tabular-nums; }
.cokol { display: grid; place-items: center; width: calc(100% + 12px); margin: 6px -6px 0; font: 900 24px/1 var(--tyt); }
.m1 .cokol { height: 66px; background: linear-gradient(#f9cf45, #c98a06); color: #3a2300; }
.m2 .cokol { height: 46px; background: linear-gradient(#cbd4e0, #8894a6); color: #1b2330; }
.m3 .cokol { height: 34px; background: linear-gradient(#b9632c, #8a4316); color: #fff; }
.stopien.ja { border-color: #c98a06; box-shadow: 0 0 0 3px rgba(251, 191, 36, .8), var(--cien); }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.ranking li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 50px; background: linear-gradient(var(--perg), var(--perg2)); border: 1px solid var(--perg-linia); border-radius: 14px; padding: 7px 14px 7px 8px; font-weight: 700; box-shadow: 0 2px 0 rgba(84, 52, 14, .25); }
.ranking li.ja { background: linear-gradient(#fff3bf, #fbd551); border-color: #b97a06; box-shadow: 0 0 0 2px rgba(251, 191, 36, .7), 0 2px 0 rgba(84, 52, 14, .25); }
.ranking .m, .laureaci .m { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #e2cc98; color: #3d2a10; font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; }
.ranking li.ja .m { background: #7a4300; color: #fff; }
.ranking .kto { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.ranking li > b, .ranking .rzad b { font: 900 16.5px/1 var(--tyt); font-variant-numeric: tabular-nums; }
.ranking small, .czlonkowie small { color: var(--cichy); font-weight: 600; font-size: 12.5px; }
.ranking li .rzad { flex-wrap: nowrap; gap: 10px; }
.tyt { display: inline-flex; align-items: center; gap: 3px; background: #4c1d95; color: #fde68a; border-radius: 99px; padding: 1px 8px 1px 4px; font: 800 11.5px/1.5 system-ui, sans-serif; vertical-align: 1px; white-space: nowrap; }
.tyt svg { width: 14px; height: 14px; }
.znak { display: inline-block; background: #2b3a67; color: #e7eeff; border-radius: 6px; padding: 0 6px; font: 900 11.5px/1.6 system-ui, sans-serif; letter-spacing: .04em; vertical-align: 1px; }
.wiezyczki { white-space: nowrap; }
.wiezyczki svg { width: 20px; height: 20px; vertical-align: -4px; }
.stopien .wiezyczki { display: block; }
.stopien .wiezyczki svg { width: 24px; height: 24px; }
.kronika { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.laureaci { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.laureaci li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 10px 5px 6px; border-radius: 10px; background: var(--karta2); font-weight: 700; }
.laureaci .m { width: 28px; height: 28px; }
.laureaci .m1 .m { background: radial-gradient(circle at 35% 28%, #fff7c7, #f5b301); } .laureaci .m2 .m { background: radial-gradient(circle at 35% 28%, #fff, #9aa7b8); } .laureaci .m3 .m { background: radial-gradient(circle at 35% 28%, #ffd9b8, #b9632c); }
.laureaci .kto { min-width: 0; overflow-wrap: anywhere; }
.laureaci.plem { border-top: 1px dashed var(--perg-linia); padding-top: 8px; }

/* plemię i czat */
.plemieGlowa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.herb { width: 56px; height: 64px; display: grid; place-items: center; padding-bottom: 12px; background: linear-gradient(#7646d6, #43248f); color: #fff; font: 900 15px/1 system-ui, sans-serif; letter-spacing: .04em;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); }
.plemieGlowa h3 { font-size: 19px; }
.odznaka { background: #dcf2c8; border: 1px solid #6fae52; color: #17502a; border-radius: 99px; padding: 3px 11px; font-weight: 800; font-size: 13px; white-space: nowrap; }
.czlonkowie { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.czlonkowie li { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 10px; background: var(--karta2); font-weight: 700; }
.czlonkowie li::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--f, 0%); background: linear-gradient(90deg, rgba(245, 158, 11, .5), rgba(245, 158, 11, .18)); }
.czlonkowie li > * { position: relative; }
.czlonkowie li.ja { box-shadow: inset 0 0 0 2px #b97a06; }
.czlonkowie svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 5px; }
.czlonkowie b { font-variant-numeric: tabular-nums; }
.czatLista { display: flex; flex-direction: column; gap: 8px; max-height: 340px; min-height: 90px; overflow-y: auto; overscroll-behavior: contain; padding: 10px; border: 1px solid var(--perg-linia); border-radius: 14px;
  background: #e9d9b0 radial-gradient(rgba(255, 255, 255, .45) 1.5px, transparent 2px) 0 0 / 18px 18px; }
.wiad { display: grid; justify-items: start; gap: 1px; max-width: 86%; align-self: flex-start; min-width: 0; }
.wiad.moja { align-self: flex-end; justify-items: end; }
.dymek { min-width: 0; background: #fffdf6; border: 1px solid #d6c08f; border-radius: 16px 16px 16px 4px; padding: 6px 12px 5px; box-shadow: 0 1px 0 rgba(84, 52, 14, .18); }
.wiad.moja .dymek { background: linear-gradient(#7646d6, #5630b3); border-color: #3a1f86; border-radius: 16px 16px 4px 16px; }
.dymek .nick { display: block; font-size: 13px; font-weight: 800; }
.wiad.moja .nick { display: none; }
.n0 { color: #9b1c31; } .n1 { color: #1a5699; } .n2 { color: #1b6534; } .n3 { color: #6a3aad; } .n4 { color: #8f4500; } .n5 { color: #0e6464; }
.karta .dymek p { color: #33200f; font-size: 15px; overflow-wrap: anywhere; }
.karta .wiad.moja .dymek p { color: #fff; }
.dymek small { display: block; text-align: right; font-size: 11.5px; color: #664a29; }
.wiad.moja .dymek small { color: #f1e8ff; }
.wiadPrzyciski { display: inline-flex; align-items: center; gap: 12px; padding: 0 6px; }
.wiadPrzyciski .lnk { min-height: 40px; min-width: 44px; padding: 8px 6px; font-size: 12.5px; font-weight: 600; color: var(--cichy); }
.wiadPrzyciski small { color: var(--cichy); font-size: 12.5px; }
.czatRzad { display: flex; gap: 8px; }
.czatRzad .ilePole { flex: 1; min-width: 0; width: auto; text-align: left; font-weight: 600; }

/* ------------------------------------------------------------------- sklep */
.hero-sklep .heroLiczba { font: 900 24px/1.15 var(--tyt); }
.oferta { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; }
.ofertaRys { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .12); box-shadow: inset 0 -14px 20px rgba(0, 0, 0, .1); }
.ofertaRys svg { width: 80%; height: auto; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.oferta-dostawa .ofertaRys { background: radial-gradient(circle at 50% 32%, #fff6d8, #f0b24a); }
.oferta-tarcza .ofertaRys { background: radial-gradient(circle at 50% 32%, #eef7ff, #6aa9ec); }
.oferta-premium .ofertaRys { background: radial-gradient(circle at 50% 32%, #f8efff, #a77bf0); }
.ofertaTresc { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ofertaTresc .btn { margin-top: auto; }
.oferta.aktywna { border-color: #2f9e5b; box-shadow: 0 0 0 2px rgba(47, 158, 91, .55), var(--cien); }
.karta p.trwa { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: #dcf2c8; border: 1px solid #6fae52; color: #17502a; border-radius: 99px; padding: 3px 12px 3px 6px; font-variant-numeric: tabular-nums; }
.trwa svg { width: 18px; height: 18px; }
.zgoda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; min-height: 44px; background: #fff8de; border: 2px solid #d39a2c; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--tekst); cursor: pointer; }
.zgoda input { width: 24px; height: 24px; margin: 0; accent-color: #b45309; }
.pakiet { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; align-items: center; background: linear-gradient(#eef6ff, #d3e6fb); border: 1px solid #8bb6e8; border-radius: 14px; padding: 10px; min-width: 0; }
.pakRys { border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff, #bcd9fa); padding: 4px; }
.pakRys svg { display: block; width: 100%; height: auto; }
.pakOpis { display: grid; gap: 2px; min-width: 0; }
.pakOpis b { font: 800 18px/1.2 var(--tyt); }
.pakiet .ile { display: inline-flex; align-items: center; gap: 4px; color: #123f9c; font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; }
.pakiet .ile svg { width: 22px; height: 22px; }
.pakiet .btn { grid-column: 1 / -1; white-space: normal; padding: 8px 10px; }
.pakiet:last-child:not(:first-child) { background: linear-gradient(#fff7d9, #fbe08f); border-color: #c98a06; box-shadow: 0 0 0 2px rgba(251, 191, 36, .5); }
.pakiet:last-child:not(:first-child) .pakRys { background: radial-gradient(circle at 50% 40%, #fff, #ffe9a6); }
/* płatność GRAM: o połowę taniej niż kartą — niebieski znak sieci TON, żeby nie mylić z przyciskiem karty */
.gramZnak { width: 22px; height: 22px; flex: none; }
.btn.gram { background: linear-gradient(#5cc4ff, #0098ea); color: #fff; border-color: #0369a8; box-shadow: 0 4px 0 #0369a8; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.btn.gram:active { box-shadow: 0 1px 0 #0369a8; transform: translateY(3px); }
.btn.gram:disabled { filter: grayscale(.7); opacity: .6; }
.pakiet .gramTaniej { grid-column: 1 / -1; justify-self: center; margin-top: -4px; background: #17602f; color: #fff; border-radius: 99px; padding: 1px 12px; font-size: 12.5px; font-weight: 800; }
.gramBaner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; background: linear-gradient(135deg, #e3f4ff, #c5e7ff); border: 2px solid #0098ea; border-radius: 14px; padding: 12px 14px; color: #06304d; }
.gramBaner .gramZnak { width: 44px; height: 44px; }
.gramBaner b { display: block; font: 900 19px/1.2 var(--tyt); color: #04568a; }
.gramBaner span { font-size: 14px; }
.gramOtwarte { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; background: #fff8de; border: 2px dashed #d39a2c; border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 14px; }
.gramPole { display: grid; gap: 3px; background: rgba(255, 255, 255, .55); border: 1px solid var(--perg-linia); border-radius: 12px; padding: 9px 12px; min-width: 0; }
.gramPole small { color: var(--cichy); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.gramPole .rzad { flex-wrap: nowrap; }
.gramPole b { font-size: 16px; font-variant-numeric: tabular-nums; min-width: 0; user-select: all; }
.gramPole > span { color: var(--cichy); font-size: 13px; }
.gramPole.wazne { border: 2px solid #c2410c; background: #fff1e2; }
.gramPole.wazne small, .gramPole.wazne > span { color: #9a3412; }
.gramLinki .btn { flex: 1 1 180px; text-decoration: none; }
.gramQr { display: grid; justify-items: center; gap: 6px; color: var(--cichy); font-size: 14px; text-align: center; }
.gramQr .qr { width: min(230px, 62vw); height: auto; border-radius: 10px; border: 1px solid var(--perg-linia); }
.arkuszKarta > p.gramCzekam { display: flex; align-items: center; gap: 9px; color: var(--tekst); font-weight: 700; }
.krecek { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(0, 152, 234, .25); border-top-color: #0098ea; animation: krecek 1s linear infinite; }
@keyframes krecek { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .krecek { animation: none; } }
/* napis w bocznym menu — widoczny tylko tam, gdzie zakładki są szyną z lewej (komputer) */
.menuNota { display: none; }
/* badania w Akademii */
.naukiLista { display: grid; gap: 8px; }
.nauka { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; background: rgba(255, 255, 255, .55); border: 1px solid var(--perg-linia); border-radius: 12px; padding: 9px 12px; }
.nauka b { font-size: 16px; } .nauka p { margin: 2px 0 4px; font-size: 13.5px; color: var(--cichy); }
.nauka .koszt { margin: 0 8px 0 0; display: inline-flex; } .nauka small svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.nauka.gotowa { background: #e4f3d6; border-color: #7fb463; } .nauka.gotowa .znaczek svg { width: 22px; height: 22px; }
.nauka.badana { border: 2px solid #d39a2c; background: #fff8de; }
.naukaTrwa { display: grid; gap: 6px; margin-bottom: 8px; }
/* odnośniki do grupy na Telegramie i strony głównej STARM Games: w bocznym menu (komputer) i w zakładce Sklep (wszędzie) */
.menuLink { display: none; }
.spolecznosc .btn { flex: 1 1 200px; text-decoration: none; }
.spolecznosc svg { width: 20px; height: 20px; flex: none; }
/* miejsce, którego brakuje do zakupu (zgoda albo karta konta), mruga po kliknięciu przycisku zakupu */
.wskaz { animation: wskaz 1.2s ease-out 2; }
@keyframes wskaz { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); } 30% { box-shadow: 0 0 0 6px rgba(225, 29, 72, .75); } }
.ustawienia .karta { align-content: start; }
.punktySM { background: linear-gradient(#fff6d6, #f8e2a0); border-color: #c98a06; }
.punktySM .medalion { background: radial-gradient(circle at 35% 28%, #fffdf3, #fbd551); border-color: #c98a06; }
.punktySM p b { color: var(--tekst); font-size: 16px; font-variant-numeric: tabular-nums; }
.punktySM .postep { max-width: 420px; }
#w-sklep .prawne { color: #d9def2; }
#w-sklep .prawne a { color: #b9dcff; }

/* ------------------------------------------------------------------ arkusz */
.arkusz { position: fixed; inset: 0; z-index: 10; display: grid; align-items: end; justify-items: center; }
.arkuszTlo { position: absolute; inset: 0; background: rgba(10, 8, 26, .62); }
.arkuszKarta { position: relative; width: min(560px, 100%); max-height: 88vh; overflow: auto; background: linear-gradient(var(--perg), var(--perg2)); border: 2px solid #a67c3d; border-bottom: 0;
  border-radius: 22px 22px 0 0; padding: 24px 16px max(18px, env(safe-area-inset-bottom)); display: grid; gap: 11px; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); }
.arkuszKarta::before { content: ''; position: absolute; top: 9px; left: 50%; width: 46px; height: 5px; margin-left: -23px; border-radius: 99px; background: rgba(84, 52, 14, .32); }
.arkuszKarta h2 { font: 900 24px/1.15 var(--tyt); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding-bottom: 9px; border-bottom: 2px solid rgba(166, 124, 61, .5); }
.arkuszKarta h2 small { font: 800 13px/1.4 system-ui, sans-serif; background: linear-gradient(#fde047, #f59e0b); color: #2a1a00; border: 1px solid #b45309; border-radius: 99px; padding: 2px 12px; white-space: nowrap; }
.arkuszKarta h2.dzial { font: 800 13px/1.3 system-ui, sans-serif; color: var(--cichy); padding: 0; border: 0; justify-content: flex-start; }
.arkuszKarta h2.dzial::after { background: linear-gradient(90deg, rgba(166, 124, 61, .6), rgba(166, 124, 61, 0)); }
.arkuszKarta > p { color: var(--cichy); font-size: 15px; }
.arkuszKarta > p.ostrzez { color: var(--czerwien); } .arkuszKarta > p.dobrze { color: var(--zielen); }

.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; background: linear-gradient(#fffaf0, #f1dfb0); border: 2px solid #a67c3d; border-radius: 14px; padding: 10px 18px;
  font-weight: 800; width: max-content; max-width: min(92vw, 520px); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.toast.zly { background: linear-gradient(#ffe6df, #f8bfb1); border-color: #a8221a; color: #560d08; }

/* ============================================================= telefon wąski */
@media (max-width: 520px) {
  .pasek { gap: 5px; padding-left: 6px; padding-right: 6px; }
  .zasob { font-size: 13px; padding: 2px 9px 2px 4px; gap: 4px; }
  .zasob svg { width: 22px; height: 22px; }
  .zasob small { display: none; }
  .zakladki button { font-size: 10.5px; }
  .plemieGlowa { grid-template-columns: auto minmax(0, 1fr); }
  .odznaka { grid-column: 1 / -1; justify-self: start; }
  .witajKarta { padding: 16px 16px; }
  .witajKarta h1 { font-size: 38px; }
}
@media (max-width: 360px) {
  .jednostka { grid-template-columns: 76px minmax(0, 1fr); }
  .staty { grid-template-columns: minmax(0, 1fr); }
  .zakladki svg { width: 22px; height: 22px; }
}

/* ============================================================ tablet (od 560/700) */
@media (min-width: 560px) {
  .pakiety { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
  .strona { padding: 18px 20px 36px; gap: 16px; }
  .hero { padding: 18px 24px; border-radius: 24px; }
  .hero h1 { font-size: 34px; }
  .hero .heroLiczba { font-size: 20px; }
  .hero p { font-size: 15px; }
  .heroRys { width: 150px; }
  .siatka { gap: 14px; }
  .jednostki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jednostka { grid-template-columns: minmax(0, 1fr); padding: 0 0 14px; overflow: hidden; gap: 10px; }
  .jednostka .portret { aspect-ratio: auto; height: 150px; border-width: 0 0 2px; border-radius: 0; }
  .jednostka .jedTresc { padding: 0 14px; }
  .jednostka .portret canvas { width: auto; height: 150px; }
  .ileMam { left: auto; top: auto; right: 10px; bottom: 8px; font-size: 16px; padding: 2px 11px; }
  .marsze, .wieze, .raportyLista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marsze > :last-child:nth-child(odd), .wieze > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .oferty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oferta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 0 0 14px; overflow: hidden; align-items: stretch; }
  .oferta .ofertaRys { aspect-ratio: auto; height: 130px; border-radius: 0; border-width: 0 0 1px; }
  .oferta .ofertaRys svg { width: auto; height: 78%; }
  .ofertaTresc { padding: 0 14px; }
  .ustawienia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ustawienia > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .podzakladki button { flex-direction: row; gap: 8px; font-size: 14.5px; min-height: 48px; }
  .podium { gap: 14px; max-width: 640px; width: 100%; margin: 0 auto; }
  .stopien .kto { font-size: 15.5px; }
  .m1 .cokol { height: 84px; } .m2 .cokol { height: 58px; } .m3 .cokol { height: 42px; }
  .czatLista { max-height: 400px; }
  .zakladki button { min-height: 60px; font-size: 13px; gap: 3px; }
  .zakladki svg { width: 28px; height: 28px; }
  .arkusz { align-items: center; padding: 20px; }
  .arkuszKarta { border-radius: 22px; border-bottom: 2px solid #a67c3d; padding: 22px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
  .arkuszKarta::before { display: none; }
  .witajKarta { padding: 24px 28px; gap: 12px; }
}
@media (min-width: 1000px) {
  .plemieUklad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .plemieUklad .kolumna { display: grid; gap: 14px; align-content: start; min-width: 0; }
  .plemieUklad .czatLista { max-height: min(54vh, 560px); min-height: 260px; }
  .witaj { justify-items: start; padding-left: clamp(40px, 9vw, 220px); }
}

/* ===================================================== komputer: boczna szyna zakładek */
@media (min-width: 1100px) {
  .gra { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .pasek { grid-column: 2; grid-row: 1; }
  .alarm { grid-column: 2; grid-row: 2; }
  main { grid-column: 2; grid-row: 3; }
  .zakladki { grid-column: 1; grid-row: 1 / -1; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 10px 8px; overflow-y: auto; scrollbar-width: none;
    border-top: 0; border-right: 1px solid rgba(251, 191, 36, .4); background: linear-gradient(180deg, #232750, #14162c); }
  .marka { display: grid; justify-items: center; padding: 2px 0 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .marka svg { width: 50px; height: 50px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }
  .marka b { display: none; }
  .zakladki button { min-height: 68px; font-size: 12.5px; }
  .zakladki svg { width: 30px; height: 30px; }
  .menuLink { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; color: var(--cichy); text-decoration: none; font-size: 10.5px; font-weight: 700; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
  .menuLink:hover { background: rgba(255, 255, 255, .09); color: #fff; }
  .menuLink svg { width: 22px; height: 22px; }
  .menuNota { display: block; margin-top: 8px; padding: 8px 5px; border: 1px solid rgba(0, 152, 234, .55); border-radius: 12px; background: rgba(0, 152, 234, .14); color: #cfeaff; font-size: 10.5px; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
  .zakladki button.wybrana::after { top: 18%; bottom: 18%; left: -8px; right: auto; width: 4px; height: auto; border-radius: 0 4px 4px 0; }
  .kropka { top: 8px; left: calc(50% + 9px); }
  .toast { left: calc(50% + 48px); bottom: 28px; }
  .strona { padding: 22px 28px 40px; gap: 18px; }
  .pakiety { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pakiet { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 12px; align-content: start; }
  .pakRys { width: 100%; max-width: 210px; }
  .pakOpis { justify-items: center; }
  .pakiet .btn { width: 100%; align-self: end; }
  .ustawienia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ustawienia > :last-child:nth-child(odd) { grid-column: auto; }
  .kronika { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
@media (min-width: 1280px) {
  .s-wojsko .uklad { grid-template-columns: minmax(0, 2.1fr) minmax(330px, 1fr); align-items: start; }
  .s-wojsko .kolumna { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .s-wojsko .boczna .marsze { grid-template-columns: minmax(0, 1fr); }
  .rankUklad { grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); align-items: start; }
  .rankUklad .kolumna { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .rankUklad .boczna { position: sticky; top: 0; }
  .heroRys { width: 170px; }
}
@media (min-width: 1500px) {
  .raportyLista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .gra { grid-template-columns: 220px minmax(0, 1fr); }
  .zakladki { padding: 14px 12px; }
  .marka { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 10px; padding: 2px 6px 12px; }
  .marka b { display: block; font: 900 21px/1.05 var(--tyt); color: var(--zloto); letter-spacing: .02em; }
  .zakladki button { grid-template-columns: 30px minmax(0, 1fr); justify-items: start; gap: 12px; padding: 8px 14px; min-height: 54px; font-size: 15.5px; text-align: left; }
  .zakladki button.wybrana::after { left: -12px; }
  .menuNota { padding: 10px 12px; font-size: 13.5px; text-align: left; }
  .menuLink { grid-template-columns: 22px minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; padding: 9px 14px; font-size: 14px; text-align: left; }
  .kropka { top: 10px; left: 34px; }
  .toast { left: calc(50% + 110px); }
}

/* mysz trafia w mniejsze przyciski niż palec */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .btn.maly { min-height: 40px; }
}

/* niski ekran w poziomie (telefon obrócony): mniej ozdób, więcej treści */
@media (max-height: 520px) and (max-width: 1099px) {
  .zakladki button { min-height: 44px; }
  .zakladki button span { display: none; }
  .heroRys { display: none; }
}

/* ruch tylko dla tych, którzy go nie wyłączyli */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .08s; }
  .alarm { animation: mig 1s infinite alternate; }
  .arkuszKarta { animation: wjazd .2s; }
  .toast { animation: wjazdToast .18s; }
  .zakladki button { transition: background-color .15s, color .15s; }
}
@keyframes mig { to { background: linear-gradient(#d32f2f, #a81c1c); } }
@keyframes wjazd { from { transform: translateY(30px); opacity: 0; } }
@keyframes wjazdToast { from { opacity: 0; } }

/* ============================================ konto, światy, zadania startowe (03.10.2026) */
/* Ekrany konta rysują się w karcie powitalnej; karta dopasowuje się do treści i przewija na niskich ekranach. */
.witaj { align-items: start; }
.witajKarta { margin: auto 0; }
.ekran { display: grid; gap: 10px; text-align: center; }
.ekran label:not(.zgoda) { display: grid; gap: 5px; text-align: left; font-size: 14px; font-weight: 700; color: var(--cichy); }
.ekran p { color: var(--cichy); font-size: 15px; }
.ekran .podPolem { text-align: left; margin-top: -6px; font-size: 13px; }
.ekran .btn { min-height: 50px; font-size: 16px; }
.ekran .btn.maly { min-height: 44px; font-size: 14px; }
.ekran .zgoda { text-align: left; }
.ekran .zgoda a, .ekran a.lnk { color: var(--dia); font-weight: 700; }
.ekran a.lnk { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.ekran input[type=checkbox] { width: 24px; min-height: 24px; height: 24px; padding: 0; }
.duzaIkona { justify-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#fde047, #f59e0b); border: 2px solid #b45309; box-shadow: 0 4px 0 #b45309; color: #4a2a00; }
.duzaIkona svg { width: 36px; height: 36px; }
.wskazowka { text-align: left; font-size: 14px; background: #fff8de; border: 1.5px solid #d39a2c; box-shadow: none; display: block; }
.wskazowka.pilne { border-color: #c2410c; background: #ffedd5; color: #7c2d12; }
.wskazowka .lnk { min-height: 36px; padding: 0 2px; }

.swiatyLista { display: grid; gap: 10px; text-align: left; }
.swiatKarta { display: grid; gap: 6px; background: #fffaf0; border: 1.5px solid var(--perg-linia); border-radius: 16px; padding: 12px 14px; box-shadow: 0 2px 0 rgba(84, 52, 14, .18); }
.swiatKarta.mam { border-color: #b45309; background: linear-gradient(#fffdf4, #fdf0c8); }
.swGlowa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.swGlowa h3 { font: 800 19px/1.2 var(--tyt); display: inline-flex; align-items: center; gap: 7px; margin-right: auto; color: var(--tekst); }
.swGlowa h3 svg { width: 22px; height: 22px; flex: none; }
.swStan { border-radius: 99px; padding: 2px 10px; font-size: 12.5px; font-weight: 800; white-space: nowrap; border: 1px solid; }
.swStan.stan-aktywny { background: #dcf2c8; border-color: #6fae52; color: #17502a; }
.swStan.stan-wstrzymany { background: #e5e7eb; border-color: #9ca3af; color: #374151; }
.swStan.stan-zamkniety { background: #ffedd5; border-color: #ea8a3a; color: #7c2d12; }
.swStan.stan-ukryty { background: #ede9fe; border-color: #8b5cf6; color: #4c1d95; }
.swLiczby { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px !important; font-variant-numeric: tabular-nums; }
.swGrod { display: flex; align-items: center; gap: 6px; font-size: 14px !important; color: var(--tekst) !important; }
.swGrod svg { width: 18px; height: 18px; flex: none; }
.swDopisek { text-align: left; font-size: 14px !important; font-weight: 700; color: #5a2a00 !important; background: #fdf0c8; border-left: 5px solid #b45309; border-radius: 6px 12px 12px 6px; padding: 10px 12px; }
.swKonto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; text-align: left; border-top: 1px dashed var(--perg-linia); padding-top: 10px; }

/* nad grodem: zadanie startowe i darmowe dokończenie końcówki budowy */
.podpowiedzi { position: absolute; left: 10px; top: 10px; z-index: 2; display: grid; gap: 6px; width: min(400px, calc(100% - 20px)); pointer-events: none; }
.podp { pointer-events: auto; --tekst: var(--atrament); --cichy: var(--atr-cichy); color: var(--atrament); background: linear-gradient(var(--perg), var(--perg2)); border: 1.5px solid #a67c3d; border-radius: 14px; box-shadow: var(--cien); font: inherit; text-align: left; }
.podp.darmo { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; background: linear-gradient(#fde047, #f59e0b); border-color: #b45309; box-shadow: 0 4px 0 #b45309; color: #2a1a00; font-weight: 700; }
.podp.darmo svg { width: 20px; height: 20px; flex: none; }
.podp.darmo b { margin-left: auto; text-align: right; }
.podp.zadanie { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px 6px 4px; }
.podp.zadanie.gotowe { border-color: #b45309; box-shadow: 0 0 0 3px rgba(251, 191, 36, .55), var(--cien); }
.podpTresc { display: grid; gap: 3px; background: none; border: 0; font: inherit; color: inherit; text-align: left; padding: 4px 8px; min-height: 44px; min-width: 0; }
.podpTresc > b { font-size: 14.5px; line-height: 1.25; }
.podpTresc small { color: var(--atr-cichy); font-weight: 700; }
.podpTytul { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #9a4a06; }
.podpTytul svg { width: 15px; height: 15px; }
.podp .koszt { font-size: 13.5px; gap: 4px 10px; }
.podp .koszt svg { width: 18px; height: 18px; }
.zadaniaLista { display: grid; gap: 6px; }
.zadanieWiersz { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: #fffaf0; border: 1px solid var(--perg-linia); border-radius: 12px; padding: 8px 10px; }
.zadanieWiersz.gotowe { border-color: #b45309; background: #fdf0c8; }
.zadanieWiersz.odebrane { opacity: .62; }
.zadanieWiersz small { color: var(--cichy); font-weight: 700; white-space: nowrap; }
.zdZnak svg { width: 26px; height: 26px; display: block; }
.zdTresc { display: grid; gap: 3px; min-width: 0; }
.zdTresc b { font-size: 14.5px; line-height: 1.25; }
.kontoPrzyciski .btn { flex: 1 1 140px; }
.kontoPrzyciski .btn svg { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .podp.zadanie { grid-template-columns: minmax(0, 1fr); }
  .podp.zadanie .btn { justify-self: stretch; }
}

/* przycisk, którego drugie stuknięcie robi coś nieodwracalnego (zwinięcie osady) */
.btn.adGrozny { background: linear-gradient(#fecaca, #f87171); border-color: #b91c1c; box-shadow: 0 4px 0 #b91c1c; color: #450a0a; white-space: normal; }

/* przycisk konta w górnym pasku — otwiera okienko z kontem, światami i wylogowaniem */
.kontoGuzik { cursor: pointer; padding: 0; width: 40px; min-width: 40px; justify-content: center; color: #e8ecff; }
.kontoGuzik svg { width: 22px; height: 22px; }
.kontoGuzik:hover { color: #fbbf24; }