/* Język wizualny wzorowany na nagraniu: granat i fiolet, żółte akcenty,
   wstęgi jako nagłówki, sloty z ramką rzadkości, grube przyciski. */
:root{
  --tlo:#241a3d; --tlo2:#1a1330;
  --panel:#33265a; --panel2:#3d2e6b; --panel-jasny:#4a3880;
  --ramka:#171029; --ramka2:#5f49a8;
  --zloto:#ffd24a; --zloto2:#e0a318; --zloto-ciemne:#8a5f0a;
  --rozowy:#e563b8; --fiolet:#a061f0;
  --tekst:#ffffff; --przygas:#b3a3d9;
  --zielen:#5fd97a; --krew:#ff5566; --iskra:#7fd0ff;
  --rzadkosc-zwykla:#8d93b5; --rzadkosc-epicka:#a061f0; --rzadkosc-legendarna:#ffd24a;
}
@import url('font/fredoka-lokalny.css');
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; overflow:hidden; color:var(--tekst); font-family:'Fredoka',"Segoe UI",system-ui,sans-serif;
  touch-action:manipulation; user-select:none;
  background:radial-gradient(120% 80% at 50% 0%, #372a5e 0%, var(--tlo) 45%, var(--tlo2) 100%); }

#apka{ position:absolute; inset:0; display:flex; flex-direction:column; }

/* ——— pasek zasobów ——— */
#gora{ flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:9px 10px;
  background:linear-gradient(180deg,#120d24,#1b1436); border-bottom:2px solid #0d0919; }
.zasob{ display:flex; align-items:center; gap:5px; background:#0f0b1f; border:2px solid #362a5c;
  border-radius:999px; padding:3px 11px 3px 4px; font-weight:800; font-size:13px; }
.zasob .krazek{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.3); }
.zasob small{ display:none; }
#seria{ margin-left:auto; font-size:10.5px; color:var(--przygas); text-align:right; line-height:1.35; }
#seria b{ color:var(--zloto); font-size:13px; }

#widok{ flex:1 1 auto; position:relative; overflow:hidden; }
.ekran{ position:absolute; inset:0; overflow-y:auto; padding:16px 12px 20px; display:none; }
.ekran.widoczny{ display:block; animation:wejscie .18s ease-out; }
@keyframes wejscie{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.ekran::-webkit-scrollbar{ width:0; }

/* ——— wstęga jako nagłówek sekcji ——— */
.wstega{ position:relative; margin:22px 0 12px; text-align:center; }
.wstega:first-child{ margin-top:6px; }
.wstega span{ display:inline-block; position:relative; z-index:2;
  background:linear-gradient(180deg,#5b47a0,#3a2d6b);
  border:2px solid var(--ramka2); border-radius:8px; padding:5px 22px;
  font-size:12px; font-weight:800; letter-spacing:.14em; box-shadow:0 3px 0 rgba(0,0,0,.45); }
.wstega:before{ content:''; position:absolute; left:6px; right:6px; top:50%; height:2px;
  background:linear-gradient(90deg,transparent,#4c3b86,transparent); }

/* ——— panele ——— */
.karta{ background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:2px solid var(--ramka2); border-radius:13px;
  box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.07);
  padding:11px 12px; margin-bottom:9px; }

/* ——— przyciski ——— */
.przycisk{ background:linear-gradient(180deg,#6a55b8,#4a3a86); color:#fff; border:2px solid #241a44;
  border-radius:11px; font-family:inherit; font-weight:800; letter-spacing:.08em; padding:12px 20px;
  font-size:13px; cursor:pointer; box-shadow:0 4px 0 #1a1231, inset 0 2px 0 rgba(255,255,255,.14);
  text-shadow:0 2px 2px rgba(0,0,0,.5); }
.przycisk:active{ transform:translateY(3px); box-shadow:0 1px 0 #1a1231; }
.przycisk.zloty{ background:linear-gradient(180deg,#ffdf6b,#e0a318); color:#4a3105;
  border-color:var(--zloto-ciemne); box-shadow:0 4px 0 #6d4a06, inset 0 2px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.35); }
.przycisk.maly{ padding:8px 13px; font-size:11.5px; }
.przycisk.wielki{ width:100%; padding:16px; font-size:17px; letter-spacing:.16em; }
.przycisk:disabled{ filter:grayscale(.7); opacity:.5; }

/* ——— zadania ——— */
.zadanie{ display:flex; align-items:center; gap:10px; }
.zadanie .tresc{ flex:1; min-width:0; }
.zadanie .tytul{ font-size:14px; font-weight:700; line-height:1.25; }
.zadanie .pod{ font-size:10.5px; color:var(--przygas); margin-top:3px; }
.zadanie.zrobione{ opacity:.42; }
.ptaszek{ width:42px; height:42px; flex:0 0 42px; border-radius:11px; border:2px solid #241a44;
  background:linear-gradient(180deg,#4a3a86,#332765); color:#fff; font-size:19px; display:flex;
  align-items:center; justify-content:center; cursor:pointer; box-shadow:0 3px 0 #1a1231; }
.ptaszek:active{ transform:translateY(2px); box-shadow:0 1px 0 #1a1231; }
.ptaszek.plus{ color:var(--zielen); } .ptaszek.minus{ color:var(--krew); }
.ptaszek.zaznaczony{ background:linear-gradient(180deg,#63d47f,#2f9a4c); color:#fff; border-color:#1d6b34; box-shadow:0 3px 0 #14522a; }
.znacznik{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:1px; }
.usun{ background:none; border:none; color:#6d5f96; font-size:17px; cursor:pointer; padding:4px 2px; }

#dodawanie{ display:flex; gap:7px; margin-bottom:6px; }
#dodawanie input,#dodawanie select{ background:#1c1436; border:2px solid #3d2f6d; border-radius:10px;
  color:var(--tekst); font-family:inherit; font-size:13px; padding:11px 10px; }
#dodawanie input{ flex:1; min-width:0; }
#dodawanie input::placeholder{ color:#6d5f96; }
#dodawanie select{ font-size:11.5px; padding:0 4px; }

/* ——— sloty (ekwipunek, umiejętności) ——— */
.siatka{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.slot{ position:relative; aspect-ratio:1; border-radius:11px; border:3px solid var(--rzadkosc-zwykla);
  background:linear-gradient(180deg,#3b2d6e,#2a1f52);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 0 14px rgba(0,0,0,.35); cursor:pointer; }
.slot.epicka{ border-color:var(--rzadkosc-epicka); box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 0 16px rgba(160,97,240,.32); }
.slot.legendarna{ border-color:var(--rzadkosc-legendarna); box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 0 16px rgba(255,210,74,.3); }
.slot.pusty{ border-style:dashed; border-color:#4a3d78; opacity:.55; font-size:16px; }
.slot .poziom{ position:absolute; left:3px; right:3px; bottom:3px; font-size:9px; font-weight:800;
  background:rgba(10,7,20,.85); border-radius:5px; padding:1px 0; text-align:center; letter-spacing:.03em; }
.slot .kropka{ position:absolute; top:-5px; right:-5px; width:14px; height:14px; border-radius:50%;
  background:var(--krew); border:2px solid #1a1231; }

/* ——— paski statów ——— */
.staty{ display:flex; gap:8px; margin-top:10px; }
.stat-kafel{ flex:1; background:#1c1436; border:2px solid #3d2f6d; border-radius:10px; padding:7px 4px;
  text-align:center; }
.stat-kafel .ikona{ font-size:15px; }
.stat-kafel .liczba{ font-weight:800; font-size:15px; color:var(--zloto); }
.stat-kafel .opis{ font-size:9px; color:var(--przygas); letter-spacing:.08em; }

/* ——— portret ——— */
#portret{ position:relative; height:210px; border-radius:14px; overflow:hidden;
  border:2px solid var(--ramka2); background:radial-gradient(70% 80% at 50% 20%, #55408f, #2a1f52);
  display:flex; align-items:flex-end; justify-content:center; }
#portret img{ height:180px; image-rendering:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
#portret .moc{ position:absolute; top:8px; left:50%; transform:translateX(-50%);
  background:rgba(10,7,20,.8); border:2px solid var(--zloto2); color:var(--zloto);
  border-radius:999px; padding:3px 14px; font-weight:800; font-size:13px; }

/* ——— wieża ——— */
.pietro{ display:flex; align-items:center; gap:11px; }
.pietro .numer{ width:46px; height:46px; flex:0 0 46px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:17px;
  border:3px solid #4a3d78; background:#1c1436; }
.pietro.zdobyte .numer{ color:var(--zielen); border-color:#2f9a4c; }
.pietro.biezace{ border-color:var(--zloto2); box-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 0 3px rgba(255,210,74,.18); }
.pietro.biezace .numer{ color:var(--zloto); border-color:var(--zloto2); }
.pietro.zamkniete{ opacity:.42; }

/* ——— dolna nawigacja ——— */
#zakladki{ flex:0 0 auto; display:flex; background:linear-gradient(180deg,#1b1436,#120d24);
  border-top:2px solid #0d0919; padding:4px 4px 6px; }
#zakladki button{ position:relative; flex:1; background:none; border:none; color:var(--przygas);
  font-family:inherit; padding:7px 2px 6px; font-size:9.5px; letter-spacing:.08em; font-weight:800; cursor:pointer; }
#zakladki button i{ display:block; font-style:normal; font-size:23px; margin-bottom:2px;
  filter:grayscale(.85) brightness(.85); }
#zakladki button.aktywna{ color:#fff;
  background:linear-gradient(180deg,rgba(255,210,74,.22),rgba(255,210,74,.02));
  border:2px solid var(--zloto2); border-radius:13px; }
#zakladki button.aktywna i{ filter:none; transform:translateY(-2px); }
#zakladki .kropka{ position:absolute; top:4px; right:calc(50% - 22px); width:13px; height:13px;
  border-radius:50%; background:var(--krew); border:2px solid #120d24; }

/* ——— walka ——— */
#walkaOkno{ position:absolute; inset:0; display:none; background:#0b0910; z-index:40; }
/* canvas to element zastępowany — bez jawnej szerokości i wysokości NIE rozciąga się do okna */
#scena{ position:absolute; inset:0; display:block; width:100%; height:100%; }
#walkaOkno.widoczne{ display:block; }

/* ——— ikony obrazkowe (Recraft) ——— */
.zasob img.krazek{ width:24px; height:24px; border-radius:0; box-shadow:none; object-fit:contain; }
#zakladki button i img{ width:27px; height:27px; object-fit:contain; display:block; margin:0 auto; }
.stat-kafel .ikona img{ width:20px; height:20px; object-fit:contain; }
#portret .moc img{ width:15px; height:15px; vertical-align:-2px; }

/* ——— RUCH: to on odróżnia grę od formularza ——— */
.karta{ transition:transform .12s ease-out, box-shadow .12s ease-out; }
.karta.pyk{ animation:pyk .32s ease-out; }
@keyframes pyk{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.035); box-shadow:0 6px 0 rgba(0,0,0,.45), 0 0 22px rgba(95,217,122,.35); }
  100%{ transform:scale(1); }
}
.ptaszek{ transition:transform .1s ease-out, background .18s; }
.ptaszek.zaznaczony{ animation:stempel .34s cubic-bezier(.2,1.6,.4,1); }
@keyframes stempel{ 0%{ transform:scale(.6) rotate(-14deg); } 60%{ transform:scale(1.18) rotate(4deg); } 100%{ transform:scale(1); } }

.przycisk{ transition:transform .08s, box-shadow .08s, filter .15s; }
.przycisk.zloty:not(:disabled){ animation:oddech 2.6s ease-in-out infinite; }
@keyframes oddech{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.09); } }

.wstega span{ animation:wjazdWstegi .3s ease-out backwards; }
@keyframes wjazdWstegi{ from{ transform:translateY(-8px) scale(.94); opacity:0; } to{ transform:none; opacity:1; } }

/* lecąca iskra do licznika */
.lot{ position:fixed; width:26px; height:26px; pointer-events:none; z-index:80;
  filter:drop-shadow(0 0 8px rgba(127,208,255,.85)); }

/* licznik, który przeskakuje przy zmianie */
.zasob.skok{ animation:skokLicznika .34s ease-out; }
@keyframes skokLicznika{ 0%{ transform:scale(1);} 40%{ transform:scale(1.16); } 100%{ transform:scale(1); } }

/* zmiana zakładki */
.ekran.widoczny{ animation:wejscieEkranu .22s cubic-bezier(.2,.9,.3,1); }
@keyframes wejscieEkranu{ from{ opacity:0; transform:translateY(14px) scale(.99); } to{ opacity:1; transform:none; } }

#zakladki button i img{ transition:transform .16s ease-out; }
#zakladki button.aktywna i img{ transform:translateY(-2px) scale(1.08); }

/* ——— pełnoekranowe okna (łup, wyklucie, koniec walki) ——— */
.warstwa{ position:fixed; inset:0; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; padding:26px; z-index:90;
  background:radial-gradient(60% 45% at 50% 45%, rgba(90,60,160,.55), rgba(8,6,14,.93)); }
.warstwa.widoczna{ display:flex; animation:wejscieOkna .26s cubic-bezier(.2,1.2,.35,1); }
@keyframes wejscieOkna{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
.warstwa h1{ font-size:26px; letter-spacing:.1em; color:var(--zloto); text-shadow:0 3px 0 #000; text-align:center; }
.warstwa p{ font-size:13.5px; line-height:1.6; text-align:center; color:var(--tekst); max-width:320px; }
.warstwa .przycisk{ width:auto; min-width:190px; }
.warstwa .slot{ aspect-ratio:1; }

#ustawienia, #osiagi{ margin-left:8px; width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  background:#0f0b1f; border:2px solid #362a5c; color:var(--przygas); font-size:16px; cursor:pointer; }
#ustawienia:active, #osiagi:active{ transform:translateY(2px); }
.przelacznik{ display:flex; align-items:center; gap:10px; width:100%; max-width:320px; }
.przelacznik .tresc{ flex:1; }
.przelacznik b{ display:block; font-size:14px; }
.przelacznik span{ font-size:11.5px; color:var(--przygas); }
.wlacznik{ width:56px; height:32px; border-radius:999px; border:2px solid var(--ramka2); background:#1c1436;
  position:relative; cursor:pointer; flex:0 0 56px; }
.wlacznik:after{ content:''; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:#6d5f96; transition:transform .16s, background .16s; }
.wlacznik.on{ background:linear-gradient(180deg,#ffdf6b,#e0a318); border-color:var(--zloto-ciemne); }
.wlacznik.on:after{ transform:translateX(24px); background:#fff; }

/* poświata za wyklutym pupilem — kolor bierze się z rzadkości */
.blask{ position:absolute; width:300px; height:300px; border-radius:50%; animation:pulsuj 2.2s ease-in-out infinite; }
@keyframes pulsuj{ 0%,100%{ transform:scale(.92); opacity:.75; } 50%{ transform:scale(1.06); opacity:1; } }
.slot.wybrany{ box-shadow:0 0 0 3px var(--zloto), 0 6px 16px rgba(0,0,0,.45); }

/* podsumowanie po walce — czytelna tabelka zamiast dwóch zdań */
.podsumowanie{ width:min(320px,86vw); display:flex; flex-direction:column; gap:2px; }
.wiersz-podsumowania{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:7px 12px; background:rgba(255,255,255,.045); border-radius:9px; font-size:12.5px; }
.wiersz-podsumowania span{ color:var(--przygas); }
.nagrody{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.nagroda{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:62px;
  padding:9px 10px; background:rgba(255,210,74,.1); border:2px solid rgba(255,210,74,.35); border-radius:12px;
  animation:stempel .45s cubic-bezier(.2,1.6,.4,1) backwards; }
.nagroda:nth-child(2){ animation-delay:.08s; } .nagroda:nth-child(3){ animation-delay:.16s; } .nagroda:nth-child(4){ animation-delay:.24s; }
.nagroda img{ width:30px; height:30px; object-fit:contain; }
.nagroda span{ font-size:11.5px; color:var(--zloto); }

/* ——— WIEŻA: mapa wspinaczki zamiast płaskiej listy ——— */
.szczyt-wiezy{ display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:10px;
  background:linear-gradient(160deg,#3b2a72,#241a49); border:2px solid #58449e; border-radius:16px;
  box-shadow:0 6px 0 #1a1235, 0 10px 20px rgba(0,0,0,.4); }
.szczyt-wiezy img{ width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.szczyt-wiezy .etykieta{ font-size:10px; letter-spacing:.18em; color:var(--przygas); }
.szczyt-wiezy .wynik{ font-size:26px; font-weight:800; color:var(--zloto); line-height:1.15; }
.szczyt-wiezy .pod{ font-size:11px; color:var(--przygas); }

.do-bossa, .ostrzezenie-bossa{ text-align:center; font-size:11.5px; padding:8px 12px; border-radius:11px; margin-bottom:10px; }
.do-bossa{ color:var(--przygas); background:rgba(255,255,255,.04); }
.ostrzezenie-bossa{ color:#ffe08a; background:rgba(255,210,74,.12); border:2px solid rgba(255,210,74,.4);
  animation:tetno 2s ease-in-out infinite; }
@keyframes tetno{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,210,74,.25); } 50%{ box-shadow:0 0 0 7px rgba(255,210,74,0); } }

.wieza-mapa{ position:relative; }
.pietro-wiersz{ display:flex; align-items:stretch; gap:10px; }
/* pionowa lina wieży: łączy piętra w jeden ciąg */
.pietro-wiersz .tor{ position:relative; width:30px; flex:none; display:flex; justify-content:center; }
.pietro-wiersz .tor:before{ content:''; position:absolute; top:0; bottom:0; width:4px; background:#2c2154; border-radius:2px; }
.pietro-wiersz:first-child .tor:before{ top:50%; }
.pietro-wiersz:last-child .tor:before{ bottom:50%; }
.pietro-wiersz.zdobyte .tor:before{ background:#4b8f5c; }
.pietro-wiersz .kropka{ position:relative; align-self:center; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:10.5px; font-weight:700;
  background:#241a49; border:2px solid #4a3a8c; color:var(--przygas); }
.pietro-wiersz.zdobyte .kropka{ background:#2c5a39; border-color:#4b8f5c; color:#bfe9c8; }
.pietro-wiersz.tutaj .kropka{ background:var(--zloto); border-color:#fff3c4; width:30px; height:30px;
  box-shadow:0 0 0 5px rgba(255,210,74,.2); animation:tetno 1.8s ease-in-out infinite; }

.pietro-karta{ flex:1; display:flex; align-items:center; gap:10px; padding:9px 11px; margin:4px 0;
  background:var(--karta); border:2px solid #3b2f6d; border-radius:14px; }
.pietro-wiersz.zdobyte .pietro-karta{ opacity:.5; }
.pietro-wiersz.tutaj .pietro-karta{ border-color:var(--zloto); background:#2e2258;
  box-shadow:0 5px 0 #1a1235, 0 8px 18px rgba(0,0,0,.4); }
.pietro-wiersz.boss .pietro-karta{ border-color:#8a6a1f; background:linear-gradient(150deg,#3a2b46,#251b3f); }
.pietro-wiersz.boss.tutaj .pietro-karta{ border-color:var(--zloto); }
.portret-wroga{ width:46px; height:46px; flex:none; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 62%, rgba(255,255,255,.09), transparent 70%); }
.portret-wroga img{ max-width:100%; max-height:100%; object-fit:contain; image-rendering:auto; }
.pietro-wiersz.zamkniete .portret-wroga img{ filter:brightness(.35) grayscale(.6); }
.pietro-karta .tresc{ flex:1; min-width:0; }
.pietro-karta .tytul{ font-size:13.5px; font-weight:700; }
.pietro-karta .pod{ font-size:10.5px; color:var(--przygas); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.znak-zdobyte{ font-size:10px; color:#7fc98a; letter-spacing:.1em; }
.znak-zamkniete{ font-size:15px; opacity:.4; }
.pietro-karta .przycisk{ padding:9px 15px; font-size:12px; }
.pietro-wiersz.tutaj .kropka{ width:38px; height:38px; overflow:visible; }
.pietro-wiersz.tutaj .kropka img{ width:44px; height:44px; object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); transform:translateY(-3px); }

/* ——— KRONIKA: statystyki + osiągnięcia ——— */
.warstwa.przewijana{ justify-content:flex-start; overflow-y:auto; gap:12px; padding:22px 20px 30px; }
#osiagi.wola:after{ content:''; position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:50%;
  background:var(--krew); box-shadow:0 0 0 2px var(--tlo); }
#osiagi{ position:relative; }
.lista-osiagniec{ width:100%; max-width:340px; display:flex; flex-direction:column; gap:7px; }
.osiagniecie{ display:flex; align-items:center; gap:10px; padding:9px 11px;
  background:var(--karta); border:2px solid #3b2f6d; border-radius:13px; }
.osiagniecie.gotowe{ border-color:var(--zloto); background:#2e2258;
  animation:tetno 2s ease-in-out infinite; }
.osiagniecie.odebrane{ opacity:.52; }
.osiagniecie .medal{ font-size:19px; width:30px; text-align:center; flex:none; }
.osiagniecie .tresc{ flex:1; min-width:0; }
.osiagniecie .tytul{ font-size:13px; font-weight:700; }
.osiagniecie .pod{ font-size:10.5px; color:var(--przygas); }
.osiagniecie .pasek{ height:5px; background:#160f2c; border-radius:3px; overflow:hidden; margin-top:5px; }
.osiagniecie .pasek div{ height:100%; background:linear-gradient(90deg,#7fd0ff,#a061f0); transition:width .4s; }
.postep-liczba{ font-size:10.5px; color:var(--przygas); flex:none; }
.przycisk.maly{ padding:7px 12px; font-size:11px; }
/* w kronice przyciski są wewnątrz listy, więc nie dziedziczą szerokości okien-nakładek */
.warstwa .osiagniecie .przycisk{ min-width:0; flex:none; }
.osiagniecie .tresc{ min-width:110px; }
.warstwa.przewijana{ background:linear-gradient(180deg,rgba(10,7,18,.97),rgba(16,10,30,.98)); }
#osiagi{ display:grid; place-items:center; line-height:1; font-size:17px; }

/* ——— kram dnia ——— */
.kram{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.towar{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.towar .slot{ width:100%; cursor:default; }
.towar .nazwa{ font-size:11px; font-weight:700; }
.towar .dodatek{ font-size:10px; color:var(--przygas); }
.towar .przycisk{ width:100%; padding:6px 4px; font-size:11px; letter-spacing:.02em; }
.towar.kupiony{ opacity:.45; }
.kupione-znak{ font-size:10px; color:#7fc98a; letter-spacing:.06em; padding:6px 0; }

/* ——— karta dnia na ekranie zadań ——— */
.dzien-karta{ background:linear-gradient(160deg,#3b2a72,#241a49); border:2px solid #58449e; border-radius:16px;
  padding:12px 14px; margin-bottom:10px; box-shadow:0 5px 0 #1a1235, inset 0 2px 0 rgba(255,255,255,.07); }
.dzien-karta.komplet{ border-color:var(--zloto); box-shadow:0 5px 0 #6d4a06, inset 0 2px 0 rgba(255,255,255,.14); }
.dzien-gora{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dzien-karta .etykieta{ font-size:10px; letter-spacing:.16em; color:var(--przygas); }
.dzien-karta .wynik{ font-size:27px; font-weight:800; color:var(--zloto); line-height:1.2; }
.dzien-karta .wynik span{ font-size:12.5px; font-weight:600; color:var(--przygas); margin-left:5px; }
.odznaka-serii{ text-align:center; font-size:10.5px; color:var(--przygas); background:rgba(0,0,0,.28);
  border-radius:11px; padding:5px 10px; }
.odznaka-serii .ognik{ font-size:19px; line-height:1.1; }
.pasek-dnia{ height:10px; background:#160f2c; border:2px solid #3d2f6d; border-radius:7px; overflow:hidden; margin:9px 0 7px; }
.pasek-dnia div{ height:100%; background:linear-gradient(90deg,#7fd0ff,#ffd24a); transition:width .45s cubic-bezier(.2,1,.3,1); }
.dzien-stopka{ font-size:11.5px; color:var(--przygas); }

/* ——— karty wzmocnień po strażniku ——— */
.karty-wyboru{ display:flex; gap:9px; width:100%; max-width:360px; justify-content:center; }
.karta-wyboru{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
  gap:5px; padding:14px 7px 11px; border-radius:15px; cursor:pointer; font-family:inherit; color:var(--tekst);
  background:linear-gradient(180deg,#3b2d6e,#241a49); border:3px solid var(--rzadkosc-zwykla);
  box-shadow:0 5px 0 rgba(0,0,0,.5), inset 0 0 18px rgba(0,0,0,.35);
  animation:wjazdKarty .42s cubic-bezier(.2,1.5,.4,1) backwards; overflow:hidden; }
@keyframes wjazdKarty{ from{ transform:translateY(26px) rotate(-4deg); opacity:0; } to{ transform:none; opacity:1; } }
.karta-wyboru:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.5); }
.karta-wyboru.epicka{ border-color:var(--rzadkosc-epicka); box-shadow:0 5px 0 rgba(0,0,0,.5), inset 0 0 20px rgba(160,97,240,.35); }
.karta-wyboru.legendarna{ border-color:var(--rzadkosc-legendarna); box-shadow:0 5px 0 rgba(0,0,0,.5), inset 0 0 22px rgba(255,210,74,.32); }
.blask-karty{ position:absolute; top:-40%; left:-60%; width:60%; height:180%; transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); animation:przesuwBlasku 3.4s ease-in-out infinite; }
@keyframes przesuwBlasku{ 0%,60%{ left:-60%; } 100%{ left:120%; } }
.karta-wyboru img{ width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.karta-wyboru .nazwa{ font-size:10.5px; font-weight:800; letter-spacing:.04em; line-height:1.2; }
.karta-wyboru .opis{ font-size:10px; color:var(--przygas); line-height:1.3; }
.karta-wyboru .rzadkosc{ font-size:8.5px; letter-spacing:.12em; color:var(--przygas); opacity:.75; margin-top:2px; }
.karta-wyboru.epicka .rzadkosc{ color:var(--rzadkosc-epicka); }
.karta-wyboru.legendarna .rzadkosc{ color:var(--rzadkosc-legendarna); }
/* okna, które muszą całkowicie odciąć tło (wybór karty) */
.warstwa.ciemna{ background:radial-gradient(70% 50% at 50% 40%, rgba(52,33,98,.985), rgba(6,4,11,1)); }
.przycisk.powtorka{ min-width:0; padding:7px 12px; font-size:15px; line-height:1; opacity:.85; }

/* ——— telefony z wcięciem: pasek i zakładki nie mogą wchodzić pod systemowe krawędzie ——— */
#gora{ padding-top:calc(9px + env(safe-area-inset-top)); }
#zakladki{ padding-bottom:calc(6px + env(safe-area-inset-bottom)); }
.warstwa{ padding-top:calc(26px + env(safe-area-inset-top)); padding-bottom:calc(26px + env(safe-area-inset-bottom)); }