/* ---- dlamoniki.pl ---- wszystkie rozmiary w PIKSELACH GRY (stage jest skalowany) */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #000;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* wyłącza zoom po dwukrotnym tapnięciu w Safari na iPhonie */
  touch-action: manipulation;
}
* { touch-action: manipulation; }

#root {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}

#stage {
  position: relative;
  width: var(--gw, 180px);
  height: var(--gh, 320px);
  transform: scale(var(--scale, 2));
  transform-origin: center center;
  overflow: hidden;
  background: #000;
}

#world {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* po zjedzeniu muchomora — kolory odjeżdżają (falowanie robi canvas) */
#world.berserk { animation: berserk 3.2s ease-in-out infinite; }
@keyframes berserk {
  0%   { filter: hue-rotate(0deg)    saturate(1);   }
  30%  { filter: hue-rotate(55deg)   saturate(1.8); }
  55%  { filter: hue-rotate(-45deg)  saturate(2.2); }
  80%  { filter: hue-rotate(30deg)   saturate(1.5); }
  100% { filter: hue-rotate(0deg)    saturate(1);   }
}

#ui {
  position: absolute; inset: 0;
  font-family: "Pixelify Sans", "Courier New", monospace;
  font-size: 8px;
  line-height: 10px;
  color: #fff;
}

/* ---------- HUD (licznik grzybów) ---------- */
#hud {
  position: absolute; top: 5px; right: 5px;
  padding: 2px 5px;
  background: #000;
  border: 1px solid #fff;
  font-size: 8px; line-height: 9px;
  letter-spacing: 0.5px;
}
#hud::before { content: "GRZYBY "; opacity: .7; }
#hud.pop { animation: pop .35s steps(3); }
@keyframes pop { 50% { transform: scale(1.35); } }

/* ---------- Pasek walki (nazwa + HP) ---------- */
#battleHud {
  position: absolute; top: 10px; left: 0; right: 0;
  text-align: center;
}
#battleName {
  font-size: 9px; font-style: italic; letter-spacing: .5px;
  text-shadow: 1px 1px 0 #000;
}
#battleHp {
  width: 68px; height: 5px; margin: 4px auto 0;
  background: #5a1f1f; border: 1px solid #fff;
}
#battleHp i { display: block; height: 100%; background: #4ad24a; transition: width .18s steps(4); }

/* ---------- Okno dialogowe ---------- */
#dialog {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  min-height: 60px;
  background: #000;
  border: 2px solid #fff;
  padding: 7px 8px 10px;
}
#dialog.top { bottom: auto; top: 6px; }
#dlgtext {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
#dlgfx {                       /* mała scenka animowana WEWNĄTRZ ramki dialogu */
  position: absolute; inset: 2px;
  width: calc(100% - 4px); height: calc(100% - 4px);
  image-rendering: pixelated;
  pointer-events: none;
}
#dlgmore {
  position: absolute; right: 5px; bottom: 2px;
  font-size: 8px;
  animation: bob .6s steps(2) infinite;
}
#dlgmore[hidden] { display: none; }
@keyframes bob { 50% { transform: translateY(-2px); } }

/* kwestia wyświetlana nad polem walki (np. grzyb, który nic nie robi) */
#poleTekst {
  position: absolute; left: 5px; right: 5px; bottom: 176px;
  text-align: center; white-space: pre-line;
  font-size: 8px; line-height: 10px; color: #fff;
  text-shadow: 1px 1px 0 #000;
}

/* ---------- Wybory ---------- */
#choices {
  position: absolute; left: 6px; right: 6px; bottom: 72px;
  display: flex; flex-direction: column; gap: 4px;
}
#choices button {
  font: inherit; font-size: 8px; line-height: 10px;
  color: #fff; background: #000;
  border: 2px solid #fff;
  padding: 5px 6px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
#choices button:active,
#choices button.sel { background: #fff; color: #000; }
/* menu walki: siatka 2x2 */
#choices.grid { flex-direction: row; flex-wrap: wrap; gap: 4px; }
#choices.grid button { width: calc(50% - 2px); text-align: center; padding: 5px 2px; }

/* przycisk "NIE", który ucieka */
#choices button.runaway {
  position: absolute;
  transition: left .12s steps(3), top .12s steps(3);
}

/* ---------- Sterowanie ---------- */
#controls { position: absolute; inset: 0; pointer-events: none; }
#dpad, #actionBtn { pointer-events: auto; touch-action: none; }

#dpad {
  position: absolute; right: 6px; bottom: 6px;
  width: 52px; height: 52px;
  opacity: .5;
}
#dpad .dp {
  position: absolute; background: #fff; border: 1px solid #000;
}
#dpad .up    { left: 18px; top: 0;    width: 16px; height: 18px; }
#dpad .down  { left: 18px; bottom: 0; width: 16px; height: 18px; }
#dpad .left  { top: 18px;  left: 0;   width: 18px; height: 16px; }
#dpad .right { top: 18px;  right: 0;  width: 18px; height: 16px; }
#dpad .knob  { left: 18px; top: 18px; width: 16px; height: 16px; background: #fff; }
#dpad .dp.on { background: #ff5f7e; }

#actionBtn {
  position: absolute; left: 8px; bottom: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #000; color: #fff;
  font: inherit; font-size: 11px;
  opacity: .5;
}
#actionBtn:active { background: #fff; color: #000; }

body.hide-controls #controls { display: none; }

/* ---------- Ekran tytułowy ---------- */
#title {
  position: absolute; inset: 0; z-index: 3;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
}
#titlefx { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#title h1 {
  position: relative;
  margin: 0; font-size: 26px; line-height: 26px;
  text-align: center; letter-spacing: 1px;
  text-shadow: 2px 2px 0 #6b2233;
}
#title p { position: relative; margin: 0; font-size: 8px; opacity: .8; }

/* ---------- Pierwszy ekran: "trust me" ---------- */
#zaufaj {
  position: absolute; inset: 0; z-index: 2;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
/* Gaśnie SAM PRZYCISK — czarne tło zostaje, żeby przez chwilę przejścia
   nie było widać gry. Znika dopiero, gdy tytuł jest już nieprzezroczysty. */
#zaufaj.znika { pointer-events: none; }
#zaufaj.znika #zaufajBtn { opacity: 0; animation: none; }
#zaufajBtn {
  font: inherit; font-size: 6px; letter-spacing: .8px;
  color: #f4e2f8;
  background: #6a2480;
  border: 1px solid #b060cc;
  padding: 4px 8px;
  cursor: pointer;
  animation: puls 1.7s ease-in-out infinite;
  transition: opacity .4s ease;
}
@keyframes puls {
  0%, 100% { transform: scale(1);    background: #5d1f72; box-shadow: 0 0 0 0 rgba(176, 96, 204, .5); }
  50%      { transform: scale(1.07); background: #8b34a6; box-shadow: 0 0 6px 3px rgba(176, 96, 204, .3); }
}

/* tytuł wyłania się powoli z ciemności */
#title.wylania { animation: wylanianie 2.6s ease-out both; }
@keyframes wylanianie { from { opacity: 0; } to { opacity: 1; } }

/* ekran startowy gaśnie powoli — gra wyłania się spod niego */
#title.gasnie { animation: gasniecie 2s ease-in both; pointer-events: none; }
@keyframes gasniecie { from { opacity: 1; } to { opacity: 0; } }
.blink { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Fade ---------- */
#fade {
  position: absolute; inset: 0;
  background: #000; opacity: 0;
  pointer-events: none;
  transition: opacity .5s linear;
}
#fade.on { opacity: 1; }

/* ---------- Finał (poza skalowanym stage'em) ---------- */
#final {
  position: fixed; inset: 0; z-index: 50;
  background: #000; color: #fff;
  font-family: "Pixelify Sans", monospace;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
  animation: fadein 1.2s ease both;
}
@keyframes fadein { from { opacity: 0; } }
#finalInner {
  width: 100%; max-width: 420px;
  padding: 20px 16px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
#finalVideo {
  width: 100%; max-height: 55vh;
  background: #111;
  border: 3px solid #fff;
  display: block;
}
#finalVideo[hidden] { display: none; }
#card {
  width: 100%;
  border: 3px solid #fff;
  padding: 18px 16px;
  text-align: center;
  line-height: 1.5;
}
#card h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: 3px; }
#card p { margin: 4px 0; font-size: 16px; }
#cardFoot { margin-top: 14px !important; opacity: .85; white-space: pre-line; }
#cardCount { margin-top: 16px !important; font-size: 13px; opacity: .6; }

/* ---------- Prośba o obrót ---------- */
#rotate {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: #000; color: #fff; z-index: 99;
  font-family: "Pixelify Sans", monospace; font-size: 18px; text-align: center;
}
@media (orientation: landscape) and (max-height: 500px) {
  #rotate { display: flex; }
  #root { display: none; }
}

[hidden] { display: none !important; }