/* ekrany.css — ekrany telefonu w stylu strony (02.10)
   Wspólne klasy (każda działa samodzielnie, bez kontenera):
   .ek-glowa  nagłówek ekranu: .ek-nad (mono nad tytułem) + .ek-h (Oswald wersaliki) + .chip-dane
   .ek-blok   blok główny: czarny, .ek-blok-et (etykieta) + .ek-liczba (żółta, duża) + .ek-blok-dol (mono)
   .ek-pozycje lista (max 3) z .ek-poz: pasek statusu z lewej, .ek-tytul + .ek-plak + .ek-kw
              status: .ek-pilne (czerwony) · .ek-termin (złoty) · .ek-ok (zielony)
   .ek-zakres żółty zakreślacz w tytule (jeden na ekran)
   .ek-stopka „+ 3 kolejne”, mono przygaszona
   .ek-ekran  na korzeniu ekranu (.app / .karta-app): czytelniejsze chip-dane i dolne zakładki */

/* ---------- nagłówek ---------- */
.ek-glowa{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:8px 16px 14px}
.ek-nad{display:block;margin:0 0 7px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tusz2)}
.ek-h{margin:0;font:600 28px/.95 var(--f-display);letter-spacing:.005em;text-transform:uppercase;color:var(--tusz)}
.ek-ekran .chip-dane{padding:6px 9px;font-size:11.5px;letter-spacing:.06em;line-height:1}

/* ---------- blok główny: jedna duża liczba ---------- */
.ek-blok{margin:0 10px;padding:14px 16px 15px;border-radius:16px;background:var(--tusz);color:#fff}
.ek-blok-et{margin:0;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.ek-liczba{display:block;margin:7px 0 0;font:700 46px/.92 var(--f-display);letter-spacing:-.006em;color:var(--zolty);font-variant-numeric:tabular-nums;white-space:nowrap}
.ek-blok-dol{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;font:500 11px/1.25 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ek-blok-dol b{font-weight:500;color:#fff}

/* ---------- pozycje ---------- */
.ek-pozycje{display:grid;gap:10px;margin:0;padding:12px 10px 0;list-style:none}
.ek-poz{--ek-kolor:var(--tusz2);--ek-tlo:var(--papier2);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "p k";align-items:center;gap:10px 12px;
  min-height:64px;margin:0;padding:13px 14px 13px 18px;border:0;border-radius:14px;background:var(--karta);
  box-shadow:0 1px 2px rgba(17,17,17,.06),0 6px 16px -10px rgba(17,17,17,.18)}
.ek-poz::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--ek-kolor)}
.ek-pilne{--ek-kolor:var(--czerwony);--ek-tlo:var(--czerwony-tlo)}
.ek-termin{--ek-kolor:var(--zloto);--ek-tlo:var(--zloto-tlo)}
.ek-ok{--ek-kolor:var(--zielony);--ek-tlo:var(--zielony-tlo)}
.ek-poz .ek-tytul{grid-area:t;justify-self:start;display:block;margin:0;font:500 18px/1.05 var(--f-display);letter-spacing:.01em;text-transform:uppercase;color:var(--tusz);text-wrap:balance}
.ek-plak{grid-area:p;justify-self:start;display:inline-block;max-width:100%;padding:6px 8px;border-radius:6px;background:var(--ek-tlo,var(--papier2));color:var(--ek-kolor,var(--tusz2));font:500 11px/1.1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.ek-kw{grid-area:k;justify-self:end;font:600 21px/1 var(--f-display);letter-spacing:.005em;color:var(--tusz);font-variant-numeric:tabular-nums;white-space:nowrap}
.ek-kw small{margin-left:1px;font:500 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--tusz2)}
.ek-stopka{margin:0;padding:12px 16px 0;font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tusz2)}
/* miara (metry) w kolumnie kwot: mono, przygaszona, żeby nie udawała pieniędzy */
.ek-kw.ek-kw-miara{font:500 13px/1 var(--f-mono);letter-spacing:.02em;color:var(--tusz2)}
/* drobny tekst min. 11,5 px (hero na końcu pinu ma skalę ~0,99) */
.ek-nad,.ek-plak,.ek-blok-dol,.ek-stopka,.ek-blok-et{font-size:11.5px}

/* zakreślacz (statyczny); w hero podczas gry rysuje go chaos.js (.chaos-zakres) */
.ek-poz .ek-zakres{border-radius:3px;background:var(--zolty);box-shadow:-3px 0 0 1px var(--zolty),3px 0 0 1px var(--zolty)}
.hero.chaos-gra .ek-poz .ek-zakres{background:none;box-shadow:none}

/* ---------- dolne zakładki telefonu: większe, czytelne etykiety ---------- */
.ek-ekran .app-tab{grid-template-columns:repeat(4,auto);justify-content:space-around;padding:8px 6px 18px;border-top:0;box-shadow:0 -1px 0 var(--linia2)}
.ek-ekran .app-tab span{gap:4px;font:700 11px/1 var(--f-tekst);letter-spacing:0}
.ek-ekran .app-tab .ik{width:40px;height:24px;padding:3px 11px}

/* ---------- 1. hero: „Dziś · Budmax” w telefonie ---------- */
.hero-telefon .ek-ekran{padding-top:46px}
.hero-telefon .ek-poz .ek-tytul{font-size:17px}
@media (min-width:1024px){
  .hero-telefon .ek-glowa{padding:10px 18px 16px}
  .hero-telefon .ek-h{font-size:30px}
  .hero-telefon .ek-liczba{font-size:50px}
  .hero-telefon .ek-blok{padding:16px 18px 18px}
  .hero-telefon .ek-pozycje{gap:12px;padding-top:14px}
  .hero-telefon .ek-poz{padding:17px 16px 17px 20px}
  .hero-telefon .ek-poz .ek-tytul{font-size:18px}
  .hero-telefon .ek-nad,.hero-telefon .ek-plak,.hero-telefon .ek-blok-dol,.hero-telefon .ek-stopka,.hero-telefon .ek-blok-et{font-size:12.5px}
}

/* ---------- 3. „wytrzyj”: sprawy do rozliczenia pod bałaganem ---------- */
.karta-app.ek-ekran{display:flex;flex-direction:column;padding:20px 14px 20px}
.karta-app .ek-glowa{flex-direction:column-reverse;align-items:flex-start;gap:12px;padding:0 4px 16px}
.karta-app .ek-h{font-size:30px}
.karta-app .ek-blok{margin:0;padding:18px 18px 18px}
.karta-app .ek-liczba{margin-top:9px;font-size:52px}
.karta-app .ek-pozycje{padding:12px 0 0}
.karta-app .ek-poz{min-height:72px;padding:15px 16px 15px 20px}
.karta-app .ek-poz::before{top:14px;bottom:14px}
.karta-app .ek-stopka{padding:14px 4px 0}
/* w trakcie gry karta wypełnia okno pod bałaganem (bez dziur pod brudem, bez skoku wysokości po sprzątnięciu) */
.w-on .karta-app.ek-ekran{min-height:clamp(380px,62vh,600px);min-height:clamp(380px,62svh,600px)}
.w-on .karta-app .ek-uklad{flex:1}
@media (min-width:720px){
  .karta-app.ek-ekran{padding:28px}
  .karta-app .ek-glowa{flex-direction:row;align-items:center;padding:0 0 22px}
  .karta-app .ek-h{font-size:clamp(30px,3.4vw,40px)}
  .karta-app .ek-uklad{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:16px}
  .karta-app .ek-blok{display:flex;flex-direction:column;justify-content:center;padding:24px 26px}
  .karta-app .ek-blok-et{margin-bottom:14px;font-size:12.5px}
  .karta-app .ek-liczba{margin-top:0;font-size:clamp(56px,5.6vw,84px)}
  .karta-app .ek-blok-dol{margin-top:18px;font-size:12.5px}
  .karta-app .ek-plak,.karta-app .ek-stopka,.karta-app .ek-nad{font-size:12.5px}
  .karta-app .ek-kw small{font-size:12px}
  .karta-app .ek-kol{display:flex;flex-direction:column}
  .karta-app .ek-pozycje{flex:1;grid-auto-rows:minmax(84px,1fr);padding:0}
  .karta-app .ek-poz{align-content:center}
  /* na szerokim ekranie okno pod bałaganem niższe (lista ma 3 pozycje, nie 6) */
  .w-brudno .wytrzyj-pod{height:clamp(400px,52vh,480px);height:clamp(400px,52svh,480px)}
  .w-on .karta-app.ek-ekran{min-height:clamp(400px,52vh,480px);min-height:clamp(400px,52svh,480px)}
  .karta-app .ek-poz .ek-tytul{font-size:21px}
  .karta-app .ek-kw{font-size:25px}
}
/* plakietki „wskakują” po posprzątaniu (jak paski statusu w wytrzyj.css) */
.w-on .sprawa .ek-plak{transition:opacity .4s calc(.4s + var(--w-i,0) * .09s),transform .55s var(--ease) calc(.4s + var(--w-i,0) * .09s)}
.w-brudno .sprawa .ek-plak{opacity:0;transform:scale(.6);transition:none}
@media (prefers-reduced-motion:reduce){.w-on .sprawa .ek-plak{transition:none}}