:root {
  --trawa: #72A725;
  --zielen: #6CB425;
  --zielen-ciemna: #2E5A0B;
  --las: #2F5F27;
  --drewno: #9B6445;
  --drewno-jasne: #B5804F;
  --drewno-ciemne: #6A3E21;
  --kontur: #3A1F04;
  --papier: #FDF5E0;
  --papier-ciemny: #F3E2BC;
  --zloto: #FCC15B;
  --mak: #C23F23;
  --chaber: #3D6FD1;
  --granat: #08101D;
  --tekst: #3A1405;
  --tekst-jasny: #6B4A2C;
  --cien: 0 4px 0 rgba(58, 31, 4, 0.35);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #5E9426; font-family: 'Nunito', system-ui, sans-serif; color: var(--tekst); user-select: none; -webkit-user-select: none; touch-action: none; }
[hidden] { display: none !important; }
button { font-family: inherit; color: inherit; cursor: pointer; }
#gra { position: fixed; inset: 0; }
#gra canvas { display: block; }

/* ---------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #hud .waluta { pointer-events: auto; }

.ozdoba { position: absolute; width: clamp(70px, 11vmin, 120px); height: clamp(70px, 11vmin, 120px); pointer-events: none; opacity: 0.95;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50 50)'%3E%3Cg fill='%233F8526'%3E%3Cellipse rx='9' ry='22' transform='rotate(45) translate(0 -30)'/%3E%3Cellipse rx='9' ry='22' transform='rotate(135) translate(0 -30)'/%3E%3Cellipse rx='9' ry='22' transform='rotate(225) translate(0 -30)'/%3E%3Cellipse rx='9' ry='22' transform='rotate(315) translate(0 -30)'/%3E%3C/g%3E%3Cg fill='%23C23F23'%3E%3Cellipse rx='10' ry='17' transform='translate(0 -22)'/%3E%3Cellipse rx='10' ry='17' transform='rotate(90) translate(0 -22)'/%3E%3Cellipse rx='10' ry='17' transform='rotate(180) translate(0 -22)'/%3E%3Cellipse rx='10' ry='17' transform='rotate(270) translate(0 -22)'/%3E%3C/g%3E%3Ccircle r='16' fill='%23FCC15B'/%3E%3Ccircle r='11' fill='%233D6FD1'/%3E%3Ccircle r='5' fill='%23FDF5E0'/%3E%3Cg fill='%23FCC15B'%3E%3Ccircle r='3' cx='0' cy='-44'/%3E%3Ccircle r='3' cx='44' cy='0'/%3E%3Ccircle r='3' cx='0' cy='44'/%3E%3Ccircle r='3' cx='-44' cy='0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); }
.oz-lg { left: -26px; top: -26px; }
.oz-pg { right: -26px; top: -26px; }
.oz-ld { left: -26px; bottom: -26px; }
.oz-pd { right: -26px; bottom: -26px; }

#lewo-gora { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 10px; display: flex; gap: 10px; align-items: flex-start; }
.awatar { position: relative; width: 64px; height: 64px; border-radius: 50%; padding: 0; border: 4px solid var(--drewno-ciemne); background: var(--papier); box-shadow: var(--cien); flex-shrink: 0; }
.awatar img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.odznaka-poziomu { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); background: var(--zloto); color: var(--tekst); border: 2px solid var(--kontur); border-radius: 8px; font: 800 13px 'Baloo 2', sans-serif; padding: 0 7px; white-space: nowrap; line-height: 20px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.nazwa-siedliska { font: 800 16px 'Baloo 2', sans-serif; color: var(--papier); text-shadow: 0 2px 0 var(--kontur), 0 0 4px var(--kontur); line-height: 1.1; }
.pasek-xp { position: relative; width: 170px; height: 16px; border-radius: 8px; background: rgba(58, 31, 4, 0.75); border: 2px solid var(--kontur); overflow: hidden; }
.pasek-xp span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#9FE06A, #5DAE25); transition: width .4s; }
.pasek-xp em { position: absolute; inset: 0; font: 800 11px 'Nunito', sans-serif; font-style: normal; color: #fff; text-align: center; line-height: 12px; text-shadow: 0 1px 0 #000; }
.waluty { display: flex; gap: 6px; }
.waluta { display: inline-flex; align-items: center; gap: 4px; background: rgba(253, 245, 224, 0.95); border: 2px solid var(--drewno-ciemne); border-radius: 999px; padding: 1px 10px 1px 2px; font: 800 15px 'Baloo 2', sans-serif; box-shadow: var(--cien); }
.waluta img { width: 24px; height: 24px; }
.waluta.puls, .tabliczka.puls, .karta-zadania.puls { animation: puls 0.9s ease-in-out infinite; }
.waluta.blysk { animation: blysk 0.5s ease-out; }
@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes blysk { 0% { transform: scale(1.25); background: #FFF1C4; } 100% { transform: scale(1); } }

#prawo-gora { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 10px; display: flex; gap: 8px; }
#lewo-dol { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 8px; }
#prawo-dol { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: flex-end; }

.tabliczka { position: relative; min-width: 64px; min-height: 60px; padding: 6px 8px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(var(--drewno-jasne), var(--drewno)); border: 3px solid var(--drewno-ciemne); border-radius: 14px; box-shadow: var(--cien), inset 0 2px 0 rgba(255,255,255,0.25);
  color: var(--papier); font: 800 13px 'Baloo 2', sans-serif; text-shadow: 0 1px 0 var(--kontur); line-height: 1; }
.tabliczka.mala { min-width: 48px; }
.tabliczka.glowna { background: linear-gradient(#86CC3A, var(--zielen)); border-color: var(--zielen-ciemna); }
.tabliczka:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(58,31,4,0.35); }
.tabliczka .ik { width: 30px; height: 30px; display: block; }
.tabliczka .ik svg { width: 100%; height: 100%; display: block; }
.licznik { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--mak); color: #fff; border: 2px solid var(--kontur); font: 800 12px 'Nunito', sans-serif; font-style: normal; line-height: 18px; text-align: center; padding: 0 4px; }

.karta-zadania { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 80px; width: 240px; text-align: left; padding: 8px 10px; pointer-events: auto;
  background: var(--papier); border: 3px solid var(--drewno-ciemne); border-radius: 14px; box-shadow: var(--cien); display: flex; flex-direction: column; gap: 6px; }
.kz-glowa { display: flex; align-items: center; gap: 8px; font: 800 14px 'Baloo 2', sans-serif; line-height: 1.15; }
.kz-glowa img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--drewno); flex-shrink: 0; }
.kz-postep { display: flex; align-items: center; gap: 8px; }
.kz-pasek { flex: 1; height: 10px; border-radius: 5px; background: #EAD7AE; overflow: hidden; display: block; }
.kz-pasek span { display: block; height: 100%; width: 0; background: var(--zielen); transition: width .3s; }
.kz-postep b { font: 800 13px 'Baloo 2', sans-serif; }
.kz-uwaga { font: 700 12px 'Nunito', sans-serif; color: var(--tekst-jasny); }
.kz-oddaj { margin-top: 2px; }

#toasty { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(90vw, 420px); }
.toast { background: rgba(43, 33, 24, 0.92); color: var(--papier); border: 2px solid var(--zloto); border-radius: 999px; padding: 7px 16px; font: 700 14px 'Nunito', sans-serif; text-align: center; animation: toast 2.6s forwards; box-shadow: var(--cien); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-10px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- przyciski ogólne */
.przycisk { min-height: 44px; padding: 0 18px; border-radius: 14px; border: 3px solid var(--zielen-ciemna); background: linear-gradient(#86CC3A, var(--zielen)); color: #fff;
  font: 800 17px 'Baloo 2', sans-serif; text-shadow: 0 1px 0 var(--zielen-ciemna); box-shadow: 0 4px 0 var(--zielen-ciemna); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.przycisk:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--zielen-ciemna); }
.przycisk.drugi { background: var(--papier-ciemny); border-color: #D9B98A; color: var(--drewno-ciemne); text-shadow: none; box-shadow: 0 4px 0 #C9A87A; }
.przycisk.zloty { background: linear-gradient(#FFD77A, var(--zloto)); border-color: #B8862B; color: var(--tekst); text-shadow: none; box-shadow: 0 4px 0 #B8862B; }
.przycisk[disabled] { filter: grayscale(0.8); opacity: 0.6; cursor: default; transform: none; }
.przycisk img { width: 22px; height: 22px; }
.przycisk.maly { min-height: 36px; font-size: 15px; padding: 0 12px; border-radius: 11px; }

/* ---------- dialog WieśSława */
.dialog { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 640px); z-index: 30; animation: wjazd .3s ease-out; }
@keyframes wjazd { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.dl-ramka { display: flex; gap: 14px; align-items: flex-end; background: var(--papier); border: 4px solid var(--drewno-ciemne); border-radius: 22px; padding: 12px 14px 12px 12px; box-shadow: 0 8px 0 rgba(58,31,4,0.4); }
.dl-portret { width: 92px; height: 92px; border-radius: 50%; border: 4px solid #D9882F; flex-shrink: 0; background: #BFE3F0; }
.dl-tresc { flex: 1; min-width: 0; }
.dl-imie { display: inline-block; background: #D9882F; color: #fff; border: 3px solid var(--drewno-ciemne); border-radius: 12px; padding: 0 12px; font: 800 17px 'Baloo 2', sans-serif; text-shadow: 0 1px 0 var(--drewno-ciemne); margin-top: -30px; }
.dialog p { margin: 6px 0 10px; font: 700 16px/1.4 'Nunito', sans-serif; }
.dl-przyciski { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- okno */
#tlo-okna { position: fixed; inset: 0; background: rgba(8, 16, 29, 0.55); z-index: 40; }
/* okno przypięte do góry ekranu i bez ruchu przy otwieraniu: przyciski nie przeskakują pod palcem,
   gdy okno się otwiera albo gdy zmienia się jego zawartość (wcześniej wyśrodkowane okno „skakało”) */
.okno { position: fixed; left: 50%; top: max(30px, 7vh); transform: translateX(-50%); width: min(94vw, 620px); max-height: min(calc(100vh - max(30px, 7vh) - 12px), 720px); display: flex; flex-direction: column; z-index: 41;
  background: var(--papier); border: 4px solid var(--drewno-ciemne); border-radius: 22px; box-shadow: 0 10px 0 rgba(58,31,4,0.45); animation: pojaw .16s ease-out; }
@keyframes pojaw { from { opacity: 0; } to { opacity: 1; } }
.ok-glowa { display: flex; align-items: center; justify-content: center; position: relative; padding: 10px 50px 6px; }
.ok-glowa h2 { margin: -26px 0 0; background: linear-gradient(var(--drewno-jasne), var(--drewno)); color: var(--papier); border: 3px solid var(--drewno-ciemne); border-radius: 14px; padding: 2px 22px; font: 800 22px 'Baloo 2', sans-serif; text-shadow: 0 2px 0 var(--kontur); box-shadow: var(--cien); }
.ok-x { position: absolute; right: 8px; top: 6px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--drewno-ciemne); background: var(--papier-ciemny); font: 800 26px/1 'Baloo 2', sans-serif; color: var(--drewno-ciemne); }
.ok-tresc { overflow: auto; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.ok-tresc p { margin: 6px 0; font: 600 15px/1.45 'Nunito', sans-serif; }
.wiersz { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid #E8D5AE; border-radius: 16px; padding: 10px; margin: 8px 0; }
.wiersz.zabl { opacity: 0.55; }
.wiersz img.duza { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.wiersz .opis { flex: 1; min-width: 0; }
.wiersz h3 { margin: 0; font: 800 17px 'Baloo 2', sans-serif; line-height: 1.15; }
.wiersz small { display: block; font: 600 13px 'Nunito', sans-serif; color: var(--tekst-jasny); }
.koszt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 3px; background: var(--papier-ciemny); border-radius: 999px; padding: 1px 8px 1px 3px; font: 800 14px 'Baloo 2', sans-serif; }
.chip img { width: 22px; height: 22px; }
.chip.brak { background: #FBE4DD; color: var(--mak); }
.siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 6px; }
.kafel { background: #fff; border: 2px solid #E8D5AE; border-radius: 16px; padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kafel img { width: 58px; height: 58px; object-fit: contain; }
.kafel b { font: 800 15px 'Baloo 2', sans-serif; line-height: 1.1; }
.kafel small { font: 600 12px 'Nunito', sans-serif; color: var(--tekst-jasny); }
.kafel.zabl { opacity: 0.5; }
button.kafel { cursor: pointer; }
button.kafel:active { transform: scale(0.97); }
.zakladki { display: flex; gap: 6px; margin: 4px 0 8px; }
.zakladki button { flex: 1; min-height: 40px; border-radius: 12px; border: 2px solid #D9B98A; background: var(--papier-ciemny); font: 800 15px 'Baloo 2', sans-serif; color: var(--drewno-ciemne); }
.zakladki button.akt { background: var(--drewno); color: var(--papier); border-color: var(--drewno-ciemne); }
.pasek { height: 12px; border-radius: 6px; background: #EAD7AE; overflow: hidden; }
.pasek span { display: block; height: 100%; background: var(--zloto); }
.miejsce { border: 3px dashed #D9B98A; border-radius: 16px; padding: 10px; display: flex; align-items: center; gap: 10px; min-height: 76px; margin: 8px 0; }
.liga li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; font: 700 14px 'Nunito', sans-serif; }
.liga li.ty { background: var(--zloto); font-weight: 800; }
.liga li.awans { border-left: 4px solid var(--zielen); }
.liga ol { list-style: none; padding: 0; margin: 0; }
.liga .poz { width: 26px; text-align: right; font: 800 15px 'Baloo 2', sans-serif; }
.liga .nm { flex: 1; }
.list-dziadka { background: #FFFBEF; border: 2px solid #E8D5AE; border-radius: 6px; padding: 18px 20px; font: italic 600 17px/1.55 Georgia, serif; color: #3A2A18; transform: rotate(-0.6deg); box-shadow: 0 6px 12px rgba(58,31,4,0.15); }
.srodek { text-align: center; }
.duzy-obraz { width: 140px; height: 140px; object-fit: contain; display: block; margin: 4px auto; }
input.pole { width: 100%; min-height: 48px; border-radius: 12px; border: 3px solid #D9B98A; padding: 0 14px; font: 800 18px 'Baloo 2', sans-serif; color: var(--tekst); background: #fff; user-select: text; -webkit-user-select: text; }
.akcje { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ---------- dymek nad grządką */
.dymek { position: fixed; z-index: 25; background: var(--papier); border: 3px solid var(--drewno-ciemne); border-radius: 16px; padding: 10px 12px; box-shadow: var(--cien); transform: translate(-50%, -110%); text-align: center; min-width: 170px; animation: wyskok2 .2s ease-out; }
@keyframes wyskok2 { from { opacity: 0; transform: translate(-50%, -100%) scale(0.9); } }
.dymek b { display: block; font: 800 16px 'Baloo 2', sans-serif; }
.dymek .czas { font: 800 22px 'Baloo 2', sans-serif; color: var(--drewno-ciemne); }

/* ---------- ładowanie */
#ladowanie { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #86C845, #2F5F27); transition: opacity .5s; }
#ladowanie.znika { opacity: 0; pointer-events: none; }
.ld-srodek { text-align: center; }
.ld-tytul { font: 800 clamp(40px, 9vw, 72px) 'Baloo 2', sans-serif; color: var(--papier); text-shadow: 0 4px 0 var(--kontur); line-height: 1; }
.ld-pod { font: 700 18px 'Nunito', sans-serif; color: #E9F2DF; margin: 6px 0 18px; }
.ld-pasek { width: 240px; height: 16px; border-radius: 8px; border: 3px solid var(--kontur); background: rgba(0,0,0,0.3); overflow: hidden; margin: 0 auto; }
.ld-pasek span { display: block; height: 100%; width: 0; background: var(--zloto); transition: width .2s; }

/* ---------- małe ekrany */
@media (max-height: 520px), (max-width: 700px) {
  .awatar { width: 52px; height: 52px; }
  .pasek-xp { width: 130px; }
  .nazwa-siedliska { font-size: 14px; }
  .tabliczka { min-width: 54px; min-height: 52px; font-size: 12px; padding: 4px 6px; }
  .tabliczka .ik { width: 26px; height: 26px; }
  .karta-zadania { width: 200px; top: 70px; }
  .dl-portret { width: 64px; height: 64px; }
  .dialog p { font-size: 14px; margin: 4px 0 8px; }
  .okno { top: 22px; max-height: calc(100vh - 30px); }
  .ok-tresc p { font-size: 14px; }
  .waluta { font-size: 13px; }
  .waluta img { width: 20px; height: 20px; }
}
@media (max-width: 520px) {
  .karta-zadania { top: auto; bottom: 84px; right: 12px; width: 190px; }
}

/* 0.3: seria logowań, kurier, sezon, reklama */
.seria { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0 12px; }
.seria-dzien { background: #FFF8E8; border: 2px solid #E2CFA4; border-radius: 10px; padding: 6px 2px; text-align: center; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.seria-dzien .koszt { justify-content: center; flex-wrap: wrap; }
.seria-dzien.minione { opacity: 0.55; }
.seria-dzien.dzis { border-color: var(--zloty, #FCC15B); background: #FFF0C2; box-shadow: 0 0 0 3px rgba(252, 193, 91, 0.45); transform: scale(1.05); }
.wiersz.kurier { background: #EAF2FF; border-color: #9DB8E8; }
.wiersz.sezon { align-items: center; }
.wiersz.sezon .platna { opacity: 0.6; }
.sz-nr { width: 28px; height: 28px; border-radius: 50%; background: #FCC15B; color: #3A1F04; display: grid; place-items: center; flex: 0 0 28px; }
.sz-stan { min-width: 72px; text-align: right; color: #7A5634; }
.reklama-atrapa { background: #2B2118; color: #FDF5E0; border-radius: 12px; padding: 22px; text-align: center; }
.reklama-atrapa img { width: 72px; }
.reklama-atrapa b { display: block; font-size: 28px; margin-top: 6px; }
#b-sezon { position: relative; }
@media (max-width: 520px) { .seria { grid-template-columns: repeat(4, 1fr); } }

/* 0.4.6: lista budynków, reakcja na stuknięcie */
.wiersz.gotowy { background: #FFF4CC; border-color: #F2C14E; }
#ok-tresc > p:first-child { padding-right: 34px; }

/* 0.5: jakość ★1–★5 i ulepszenia budynków */
.gw { color: #E0A21B; font: 800 15px 'Baloo 2', sans-serif; letter-spacing: 1px; text-shadow: 0 1px 0 var(--kontur); white-space: nowrap; }
.gw.pusta { color: #D9C9A6; text-shadow: none; }
.gw-min { font-style: normal; font-size: 11px; background: var(--zloto); color: var(--kontur); border-radius: 999px; padding: 0 5px; margin-left: 2px; }
.kafel.jakosc2 { border-color: #B9D98F; }
.kafel.jakosc3 { border-color: #8FB4EA; }
.kafel.jakosc4 { border-color: #C69BE0; }
.kafel.jakosc5 { border-color: var(--zloto); background: #FFF8E2; }
.kafel .gw { margin-top: -4px; }
.naglowek-gw { margin: 2px 0 6px; }
.naglowek-gw .gw { font-size: 22px; }
.naglowek-gw small { display: block; color: var(--tekst-jasny); }
.wiersz.ulepsz { border-style: dashed; border-color: var(--zloto); background: #FFFBEF; }
.wiersz.ulepsz h3 .gw { font-size: 17px; }
.ulepsz-buduj { margin: 10px 0 0; }
.ulepsz-buduj > b { font: 800 15px 'Baloo 2', sans-serif; }
.ulepsz-buduj .wiersz { margin-top: 4px; }
.przelacznik { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 6px; }
.przelacznik small { color: var(--tekst-jasny); }