/* Żabia kopalnia - arkusz gry (paleta serwisu: zieleń, ciemna zieleń, krem, pomarańcz, granat). */
:root {
  --zielen: #7fd63a;
  --zielen-ciemna: #1f5c10;
  --zielen-jasna: #a6e22e;
  --krem: #f7f0cf;
  --pomarancz: #f58a1f;
  --pomarancz-ciemny: #c95e05;
  --granat: #173d6b;
  --granat-jasny: #2a5b95;
  --atrament: #1e2a14;
  --tunel: #2b1d10;
  --font: 'Baloo 2', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--tunel); color: var(--krem); font-family: var(--font); overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.gra { display: flex; flex-direction: column; height: 100%; height: 100dvh; }

.pasek {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  background: var(--zielen-ciemna); color: var(--krem); box-shadow: 0 2px 0 #143d0a;
  font-size: 15px; min-height: 48px;
}
.logo { color: var(--zielen-jasna); text-decoration: none; font-weight: 800; font-size: 15px; white-space: nowrap; }
.logo:hover { color: #fff; }
.tytul { margin: 0; font-size: 17px; font-weight: 800; white-space: nowrap; }
.hud { display: flex; gap: 12px; margin-left: auto; font-weight: 700; flex-wrap: wrap; justify-content: flex-end; }
.hud-el { display: inline-flex; align-items: center; gap: 4px; background: #143d0a; border-radius: 10px; padding: 3px 9px; white-space: nowrap; }
.hud-el b { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.hud-slash { opacity: .7; }
.waski { display: none; }
@media (max-width: 640px) { .szeroki { display: none; } .waski { display: inline; } }
.hud-krysztaly.gotowe { background: var(--pomarancz-ciemny); }
.hud-el.malo b { color: #ffb4b4; }
.ikona-krysztal { width: 12px; height: 12px; background: #5ee1ff; transform: rotate(45deg) scale(.8); display: inline-block; border: 2px solid #1a8fc1; }
.ikona-czas { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--krem); display: inline-block; position: relative; }
.ikona-czas::after { content: ''; position: absolute; left: 3px; top: 1px; width: 2px; height: 4px; background: var(--krem); }
.przyciski { display: flex; gap: 6px; }
.ikonka {
  width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--zielen); color: var(--atrament);
  font: 800 15px var(--font); cursor: pointer; box-shadow: 0 3px 0 #3d7d15; touch-action: manipulation;
}
.ikonka:active { transform: translateY(2px); box-shadow: 0 1px 0 #3d7d15; }
.ikonka.wylaczony { background: #8a8a8a; box-shadow: 0 3px 0 #555; text-decoration: line-through; }
.ikonka.polaczony { background: #ffd23f; box-shadow: 0 3px 0 #b88a00; }

.scena { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--tunel); }
#plansza { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }

/* Ekrany nakładane na planszę (start, pauza, śmierć, wygrana). */
.ekran {
  position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
  background: rgba(20, 12, 5, .72); padding: 16px; overflow: auto; z-index: 3;
}
.ekran[hidden] { display: none; }
.karta {
  background: var(--krem); color: var(--atrament); border-radius: 22px; padding: 22px 24px; max-width: 520px; width: 100%;
  margin: auto; /* wyśrodkowanie, które przy wysokiej karcie nie ucina góry */
  box-shadow: 0 10px 0 #b9a76a, 0 20px 40px rgba(0,0,0,.4); text-align: center;
}
.karta h2 { margin: 0 0 6px; font-size: 30px; color: var(--zielen-ciemna); line-height: 1.1; }
.karta h3 { margin: 0 0 10px; font-size: 20px; color: var(--granat); }
.karta p { margin: 8px 0; font-size: 16px; line-height: 1.45; }
.karta .male { font-size: 13px; opacity: .8; }
.karta .kuma-obraz { display: block; margin: 0 auto 8px; image-rendering: pixelated; }
.przycisk {
  display: inline-block; margin: 6px 4px 0; padding: 12px 22px; border: 0; border-radius: 14px; cursor: pointer;
  font: 800 18px var(--font); color: #fff; background: var(--pomarancz); box-shadow: 0 4px 0 var(--pomarancz-ciemny);
  touch-action: manipulation; min-height: 44px;
}
.przycisk:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pomarancz-ciemny); }
.przycisk.drugi { background: var(--granat-jasny); box-shadow: 0 4px 0 var(--granat); }
.przycisk.zielony { background: var(--zielen-ciemna); box-shadow: 0 4px 0 #0f3306; }
.poziomy { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 4px; }
.poziom-btn {
  width: 52px; height: 52px; border-radius: 14px; border: 0; cursor: pointer; font: 800 20px var(--font);
  background: var(--zielen); color: var(--atrament); box-shadow: 0 4px 0 #3d7d15; touch-action: manipulation; position: relative;
}
.poziom-btn.zablokowany { background: #cfc8ad; color: #8a8467; box-shadow: 0 4px 0 #a39c7c; cursor: not-allowed; }
.poziom-btn.zablokowany::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 8px; border: 2px solid #8a8467; border-radius: 2px; }
.poziom-btn.aktualny { outline: 3px solid var(--pomarancz); }
.poziom-btn small { display: block; font-size: 10px; font-weight: 700; line-height: 1; }
.legenda { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; text-align: left; font-size: 14px; margin: 10px 0; }
.legenda div { display: flex; align-items: center; gap: 8px; }
.legenda canvas { image-rendering: pixelated; flex: none; border-radius: 6px; }
.wynik-duzy { font-size: 40px; font-weight: 800; color: var(--pomarancz-ciemny); margin: 4px 0; }
.dotyk { display: none; }
@media (pointer: coarse) { .klawisze { display: none; } .dotyk { display: inline; } }
.sterowanie { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 14px; margin-top: 8px; }
kbd { background: #fff; border: 1px solid #b9a76a; border-bottom-width: 3px; border-radius: 6px; padding: 1px 7px; font: 700 13px var(--font); }

/* Pad dotykowy: tylko na ekranach z „grubym" wskaźnikiem. */
.pad { display: none; position: absolute; right: 14px; bottom: 14px; width: 150px; height: 150px; z-index: 2; }
@media (pointer: coarse) { .pad { display: block; } }
.pad-btn {
  position: absolute; width: 50px; height: 50px; border-radius: 14px; border: 0; background: rgba(247, 240, 207, .55);
  color: var(--atrament); font-size: 20px; touch-action: none; -webkit-user-select: none; user-select: none;
}
.pad-btn:active, .pad-btn.wcisniety { background: rgba(245, 138, 31, .85); }
.pad-gora { left: 50px; top: 0; } .pad-dol { left: 50px; bottom: 0; } .pad-lewo { left: 0; top: 50px; } .pad-prawo { right: 0; top: 50px; }
.pad.schowany { display: none; }
.noscript { padding: 20px; text-align: center; }

@media (max-width: 640px) {
  .pasek { gap: 6px; padding: 4px 8px; font-size: 13px; }
  .tytul { display: none; }
  .logo { font-size: 13px; }
  .hud { gap: 5px; }
  .hud-el { padding: 2px 6px; }
  .ikonka { width: 32px; height: 32px; }
  .karta { padding: 16px 14px; border-radius: 18px; }
  .karta h2 { font-size: 24px; }
  .karta p { font-size: 15px; }
  .legenda { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .przycisk, .ikonka { transition: none; }
}

/* Popup zadania matematycznego: karta na środku planszy przez 3 s, potem zwija się do elementu zadania w HUD. */
.popup-zadanie {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none;
  background: var(--krem); color: var(--atrament); border: 5px solid var(--zielen-ciemna); border-radius: 22px;
  padding: 18px 34px; text-align: center; max-width: calc(100% - 32px);
  box-shadow: 0 8px 0 #b9a76a, 0 18px 40px rgba(0,0,0,.45); transform-origin: center;
}
.popup-zadanie[hidden] { display: none; }
.popup-zadanie b { display: block; font-size: 44px; line-height: 1.1; font-weight: 800; color: var(--zielen-ciemna); font-variant-numeric: tabular-nums; white-space: nowrap; }
.popup-zadanie > span { display: block; margin-top: 6px; font-size: 15px; opacity: .8; }
.hud-zadanie { cursor: pointer; }
.hud-zadanie.blysk { animation: hud-blysk .7s ease-out; }
@keyframes hud-blysk {
  0% { background: var(--pomarancz); transform: scale(1.25); box-shadow: 0 0 0 4px rgba(245, 138, 31, .6); }
  100% { background: #2a1d5e; transform: scale(1); box-shadow: none; }
}
@media (pointer: coarse) { .popup-zadanie { top: 30%; padding: 14px 22px; } .popup-zadanie b { font-size: 34px; } }
@media (max-width: 640px) { .popup-zadanie b { font-size: 30px; } .popup-zadanie > span { font-size: 13px; } }
.popup-zadanie.dlugi b { font-size: 28px; white-space: normal; }
@media (pointer: coarse) { .popup-zadanie.dlugi b { font-size: 22px; } }
.link-mat { color: var(--granat); font-weight: 800; }
/* Popup zadania czeka na kliknięcie w Kumę: łapie kliknięcia, ma małą Kumę i podpis. */
.popup-zadanie { pointer-events: auto; cursor: pointer; }
.popup-klik { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-style: normal; }
.popup-klik canvas { image-rendering: pixelated; width: 32px; height: 32px; animation: kuma-skok .8s steps(2) infinite; }
.popup-klik em { font-style: normal; font-weight: 800; font-size: 15px; color: var(--pomarancz-ciemny); }
@keyframes kuma-skok { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } }
/* Lista zadań (popup i intro): każde działanie w osobnym wierszu, zrobione przygaszone z ✓. */
.lista-zadan { list-style: none; margin: 6px 0 0; padding: 0; text-align: left; display: inline-block; }
.lista-zadan li { font-size: 26px; font-weight: 800; color: var(--zielen-ciemna); line-height: 1.25; padding: 5px 0; border-top: 2px solid rgba(31, 92, 16, .18); white-space: nowrap; }
.lista-zadan li:first-child { border-top: 0; }
.lista-zadan .etykieta { color: var(--granat); font-weight: 700; font-size: .72em; margin-right: 4px; }
.lista-zadan .tekst { font-variant-numeric: tabular-nums; }
.lista-zadan li.zrobione { opacity: .45; text-decoration: line-through; }
.lista-zadan li.zrobione .ptaszek { text-decoration: none; color: var(--pomarancz-ciemny); display: inline-block; }
.lista-zadan.sporo li { font-size: 22px; padding: 4px 0; }
.lista-zadan.duzo li { font-size: 19px; padding: 3px 0; }
.popup-zadanie > div > b { display: block; font-size: 44px; line-height: 1.1; font-weight: 800; color: var(--zielen-ciemna); font-variant-numeric: tabular-nums; white-space: nowrap; }
.popup-zadanie.dlugi > div > b { font-size: 28px; white-space: normal; }
.karta .lista-zadan li { font-size: 20px; }
.karta .lista-zadan.duzo li { font-size: 17px; }
@media (pointer: coarse), (max-width: 640px) {
  .lista-zadan li { font-size: 20px; padding: 4px 0; }
  .lista-zadan.sporo li { font-size: 18px; }
  .lista-zadan.duzo li { font-size: 16px; padding: 2px 0; }
  .popup-zadanie > div > b { font-size: 30px; }
  .popup-zadanie.dlugi > div > b { font-size: 22px; }
  .karta .lista-zadan li { font-size: 17px; }
}
/* Telefon: lista zadań w popupie ciaśniej, żeby wiersze nie łamały się w połowie działania. */
@media (pointer: coarse), (max-width: 640px) {
  .popup-zadanie { padding: 12px 14px; max-width: calc(100% - 16px); }
  .popup-zadanie > span { margin-top: 4px; font-size: 12px; }
  .lista-zadan li { font-size: 17px; padding: 3px 0; }
  .lista-zadan.sporo li { font-size: 16px; }
  .lista-zadan.duzo li { font-size: 15px; padding: 2px 0; }
  .lista-zadan .etykieta { font-size: .7em; }
  .popup-klik { margin-top: 6px; } .popup-klik em { font-size: 13px; } .popup-klik canvas { width: 24px; height: 24px; }
}
.lista-zadan li.boss { color: var(--pomarancz-ciemny); }
.lista-zadan li.boss .etykieta { color: #b3261e; }
.lista-zadan li.zablokowane { opacity: .7; }
.lista-zadan .klodka { font-size: .7em; }
.lista-zadan li.skamienialy { opacity: .6; color: #6a6a6a; }
.lista-zadan .gniew { color: #b3261e; font-weight: 900; }