/* =========================================================
   Gra "wioski" – style
   Jedna plansza, dwa układy (desktop 16:9 i mobile 9:16).
   Wszystko skaluje się proporcjonalnie dzięki jednostkom cqw.
   ========================================================= */

:root{
  --gra-max: 1600px;
  --gra-brown: #4a2f18;
  --gra-brown-soft: #6b4526;
  --gra-cream: #f6e2bd;
  --gra-accent: #e58a1f;
  --gra-glow: 255, 226, 150;      /* barwa poświaty (RGB) */
}

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

/* Tlo przezroczyste, bo gra siedzi w ramce na stronie i ma sie zlewac z sekcja,
   ktora ja otacza. Wczesniej bylo tu jasnoszare #eef3f6 i to ono rysowalo
   szary prostokaz wokol planszy. */
html{ background:transparent; }
body{
  margin:0;
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background:transparent;
}

.gra-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- plansza ---------- */
.gra-wrap{
  width:100%;
  max-width:var(--gra-max);
  margin:0 auto;
  padding: 0 clamp(0px, 1vw, 16px);
}

.gra-stage{
  position:relative;
  width:100%;
  aspect-ratio: 1954 / 1090;          /* nadpisywane przez JS dla wersji mobilnej */
  container-type: inline-size;
  border-radius: clamp(6px, 1cqw, 18px);
  overflow:hidden;
  background:#8ec5e6;
  box-shadow: 0 10px 30px rgba(30,50,70,.18);
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  /* domyślne (desktop); JS podmienia dla mobile */
  --info-top: 77.5%;
  --info-x: 14%;
  --cap-size: 1.35cqw;
  --kw-size: 1.15cqw;
  --info-size: 1.62cqw;
  --info-kw-size: 2.3cqw;
  --info-max: 66cqw;
}

.gra-bg, .gra-bg img{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; object-fit:cover;
  pointer-events:none;
}

.gra-layer{ position:absolute; inset:0; }
.gra-layer--amb,
.gra-layer--glow,
.gra-layer--anim,
.gra-layer--caps{ pointer-events:none; }

/* ---------- wtapianie krawędzi wideo ----------
   Wideo i tło to dwie różne ścieżki dekodowania koloru w przeglądarce,
   więc mimo zgodnego BT.709 zostaje różnica rzędu 1–2/255. Rozmycie
   krawędzi likwiduje ostrą granicę prostokąta.                      */
.gra-feather{
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---------- zapętlone animacje tła (chmury, liście) ---------- */
.gra-amb{
  position:absolute; display:block; object-fit:fill; pointer-events:none;
}

/* ---------- animacje obiektów (desktop, wideo) ---------- */
.gra-anim{
  position:absolute; display:block; object-fit:fill;
  opacity:0; pointer-events:none; will-change: opacity;
  transition: opacity .35s ease;
}
.gra-anim.is-visible{ opacity:1; transition:none; }

/* ---------- obiekty z przezroczystością (mobile) ---------- */
.gra-obj{
  position:absolute; display:block;
  pointer-events:none;
  transform-origin: 50% 100%;
  transition: transform .22s ease, filter .22s ease;
  will-change: transform, filter;
}
.gra-obj.is-hot{
  transform: scale(1.045);
  filter: drop-shadow(0 0 .9cqw rgba(var(--gra-glow), .95))
          drop-shadow(0 0 2.4cqw rgba(var(--gra-glow), .65));
}
.gra-obj.is-pop{ animation: gra-pop .45s ease; }
.gra-stage.hints-glow .gra-obj:not(.is-done){
  animation: gra-obj-breathe 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.1s);
}
@keyframes gra-obj-breathe{
  0%, 58%, 100% { filter: drop-shadow(0 0 0 rgba(var(--gra-glow), 0)) drop-shadow(0 0 0 rgba(var(--gra-glow), 0)); }
  14%, 24%      { filter: drop-shadow(0 0 .9cqw rgba(var(--gra-glow), .95)) drop-shadow(0 0 2.4cqw rgba(var(--gra-glow), .65)); }
  40%           { filter: drop-shadow(0 0 0 rgba(var(--gra-glow), 0)) drop-shadow(0 0 0 rgba(var(--gra-glow), 0)); }
}
@keyframes gra-pop{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); }
  100% { transform: scale(1.045); }
}

/* ---------- poświata po sylwetce (desktop) ----------
   Dwie osobne warstwy na obiekt:
   --hint  – spokojny "oddech" w spoczynku, animacja nigdy nie jest przerywana
             (przełączanie klas restartowałoby ją i rozjeżdżało kolejność),
   --hover – reaguje na kursor i klawiaturę.
   Dzięki temu świeci najwyżej jeden obiekt naraz.                       */
.gra-halo{
  position:absolute; display:block;
  pointer-events:none;
  opacity:0;
  mix-blend-mode: plus-lighter;
  will-change: opacity;
}
.gra-halo--hover{ transition: opacity .28s ease; }
.gra-halo--hover.is-hot{ opacity:.85; }

.gra-stage.hints-glow .gra-halo--hint{
  animation: gra-breathe 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.2s);
}
/* !important gasi warstwę bez zatrzymywania animacji – brak restartu */
.gra-halo--hint.is-muted{ opacity:0 !important; }
/* gdy użytkownik na coś celuje, sekwencja podpowiedzi milknie w całości */
.gra-stage.is-celuje .gra-halo--hint{ opacity:0 !important; }
.gra-stage.is-celuje .gra-obj:not(.is-done){ animation-play-state: paused; }
.gra-halo--hint.is-done{ opacity:0 !important; animation:none !important; }

@keyframes gra-breathe{
  0%, 20%, 100% { opacity:0; }
  6%            { opacity:.50; }
  12%           { opacity:.50; }
}

/* ---------- strzałka-podpowiedź (opcjonalna) ---------- */
.gra-strzalka{
  position:absolute;
  width:3.2cqw; height:3.2cqw;
  transform: translate(-50%, -100%);
  pointer-events:none;
  filter: drop-shadow(0 .25cqw .5cqw rgba(0,0,0,.28));
  animation: gra-bob 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .28s);
  transition: opacity .3s ease;
}
.gra-strzalka.is-done{ opacity:0; }
@keyframes gra-bob{
  0%,100% { transform: translate(-50%, -100%); }
  50%     { transform: translate(-50%, calc(-100% - 1.1cqw)); }
}

/* ---------- obszary klikalne ---------- */
.gra-hit{
  position:absolute;
  margin:0; padding:0;
  border:0; background:transparent;
  cursor:pointer;
  border-radius: 18% / 14%;
}
.gra-hit:focus{ outline:none; }
.gra-hit:focus-visible{
  outline: .3cqw solid #1d6fd6;
  outline-offset: .3cqw;
  border-radius: 6%;
}

/* ---------- podpisy pod obiektami ---------- */
.gra-cap{
  position:absolute;
  transform: translate(-50%, 0);
  display:flex; flex-direction:column; align-items:center; gap:.15cqw;
  padding: .55cqw 1.1cqw;
  background: rgba(255,255,255,.92);
  border: .16cqw solid rgba(74,47,24,.16);
  border-radius: 999px;
  box-shadow: 0 .25cqw .8cqw rgba(0,0,0,.14);
  white-space:nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.gra-cap__nazwa{
  font-size: var(--cap-size);
  font-weight: 800; letter-spacing:.01em;
  color: var(--gra-brown); line-height:1.1;
}
.gra-cap__kwota{
  font-size: var(--kw-size);
  font-weight: 800; color: var(--gra-accent); line-height:1.1;
}
.gra-cap__kwota:empty{ display:none; }
.gra-cap.is-active{
  background:#fff;
  transform: translate(-50%, -.4cqw);
  box-shadow: 0 .6cqw 1.4cqw rgba(0,0,0,.22);
}
.gra-cap.is-active .gra-cap__nazwa{ color:#000; }

/* ---------- pole z opisem ---------- */
.gra-info{
  position:absolute;
  left:var(--info-x); right:var(--info-x);
  top:var(--info-top);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center;
  pointer-events:none;
}
.gra-info__nazwa{
  margin:0 0 .8cqw;
  font-size: var(--info-nazwa-size, 5cqw);
  font-weight: 900;
  color: var(--gra-brown);
  line-height:1.05;
}
.gra-info__kwota{
  margin:0 0 .4cqw;
  font-size: var(--info-kw-size);
  font-weight:900; color: var(--gra-accent); line-height:1;
}
.gra-info__tekst{
  margin:0;
  font-size: var(--info-size);
  font-weight:700; line-height:1.34;
  color: var(--gra-brown-soft);
  max-width: var(--info-max);
  transition: opacity .25s ease, transform .25s ease;
}
.gra-info.is-swapping .gra-info__tekst,
.gra-info.is-swapping .gra-info__kwota{
  opacity:0; transform: translateY(.6cqw);
}

/* ---------- warstwa deszczu ---------- */
.gra-rain{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; pointer-events:none;
  opacity:0; transition: opacity .8s ease;
}
.gra-rain.is-on{ opacity:1; }

/* ---------- przycisk wyciszenia ---------- */
.gra-mute{
  position:absolute;
  right:1.2cqw; top:1.2cqw;
  width:3.4cqw; height:3.4cqw;
  min-width:30px; min-height:30px;
  display:grid; place-items:center;
  font-size:1.6cqw; line-height:1;
  border:0; border-radius:50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 .2cqw .7cqw rgba(0,0,0,.18);
  cursor:pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.gra-mute:hover{ background:#fff; transform:scale(1.06); }
.gra-mute .gra-mute__off{ display:none; }
.gra-mute[aria-pressed="true"] .gra-mute__on{ display:none; }
.gra-mute[aria-pressed="true"] .gra-mute__off{ display:block; }

/* ---------- przyciski z efektami ---------- */
.gra-akcje{
  display:flex; flex-wrap:wrap; gap:.6rem;
  justify-content:center;
  padding:.9rem 0 .2rem;
}
.gra-akcje:empty{ display:none; }
.gra-akcja{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.6rem 1.1rem;
  font: inherit;
  font-size: clamp(.85rem, 1.05vw, 1rem);
  font-weight:800;
  color: var(--gra-brown);
  background:#fff;
  border:2px solid rgba(74,47,24,.18);
  border-radius:999px;
  cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gra-akcja:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.16); border-color: var(--gra-accent); }
.gra-akcja:focus-visible{ outline:3px solid #1d6fd6; outline-offset:2px; }
.gra-akcja[disabled]{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.gra-akcja.is-on{ border-color: var(--gra-accent); background:#fff8ee; }
.gra-akcja__ikona{ font-size:1.15em; line-height:1; }

/* ---------- tryb debug (?debug=1) ---------- */
.gra-stage.is-debug .gra-hit{ background: rgba(255,0,0,.18); outline:1px dashed #f00; }
.gra-stage.is-debug .gra-anim{ opacity:1!important; outline:1px solid #0f0; }
.gra-stage.is-debug .gra-halo{ opacity:.9!important; animation:none; }

/* ---------- ograniczenie animacji ---------- */
@media (prefers-reduced-motion: reduce){
  .gra-stage.hints-glow .gra-halo:not(.is-done){ animation:none; opacity:.28; }
  .gra-strzalka{ animation:none; }
  .gra-cap, .gra-info__tekst, .gra-info__kwota, .gra-obj{ transition:none; }
}