/* css/popups.css — the game's own auto popups (js/ui/popups.js queue): the daily reward card (js/ui/daily-popup.js),
   „Podoba Ci się gra?” (js/ui/support-popup.js) and the shared 7-day calendar grid (js/ui/calendar-grid.js — also in
   Zlecenia → Kalendarz). Tokens from css/main.css (visual pass 2, 2026-10-15: one cell look, no glows, no stars).
   Motion only on the claim itself (--mo-* tokens); „today” is a green header strip, never a pulsing glow. Reduced
   motion (<html data-reduce-motion="true">, or the OS setting until that is set — css/motion.css): end states only.
   Loaded before css/motion.css. */

/* ------------------------------------------------------------------ calendar grid
   A cell (§4 card rules): --raised, --r-md, no border; a 20 px header strip on top with the day label 12 / 800 — today
   = the green strip with a white „Dziś”, every other day = the --panel strip with --text-dim; the reward glyph (gem
   and gift multicolour, clock and bolt in --text) and its amount 12 / 900 centred. Claimed = the cell at .5 with a
   28 px green check stamp over the reward, turned −8°. Dzień 7 spans two columns in the same style. */
.cgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cgrid__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 84px;
  padding: 24px 4px 8px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--text);
  text-align: center;
  overflow: hidden;
  transition: opacity var(--mo-med) var(--mo-out);
}

/* Dzień 7: the week's big reward — two columns, the same cell */
.cgrid__day--big { grid-column: span 2; }

/* the header strip */
.cgrid__n {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--panel);
  color: var(--text-dim);
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: 20px;
}

.cgrid__ico {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.cgrid__ico .icon + .icon { margin-left: -4px; }
.cgrid__ico :is([data-icon='bolt'], [data-icon='clock']) { color: var(--text); }

/* playtest: the token tile says what it shortens („Budowa −1 h”) — on a narrow cell it takes two lines, never „Budowa …” */
.cgrid__r {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-12);
  font-weight: 900;
  line-height: var(--lh-tight);
  text-align: center;
  color: var(--text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* claimed: the cell at .5, the check stamp stays vivid */
.cgrid__day.is-claimed > :not(.cgrid__check) { opacity: 0.5; }
/* 2026-10-22 polish: a claimed day keeps its card (green-tinted recess + the green edge) — on --panel it vanished and
   left the check floating over half a gem */
.cgrid__day.is-claimed { background: var(--bg); box-shadow: inset 0 0 0 2px var(--green-dark); }
.cgrid__day.is-claimed > :not(.cgrid__check) { opacity: 0.35; }

/* the „collected” stamp over the reward (centred by inset + margin, so its animation owns transform) */
.cgrid__check {
  position: absolute;
  inset: 20px 0 0;
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: auto;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  box-shadow: 0 2px 0 var(--green-dark);
  transform: rotate(-8deg);
}

.cgrid__day.is-claimed .cgrid__check { display: grid; }

/* today: claimable now — the green strip with a white „Dziś”; the one big „Odbierz” under the grid is the call to
   action (owner 2026-10-14: less glow) */
.cgrid__day.is-today .cgrid__n {
  background: var(--green);
  color: #fff;
}

/* tomorrow keeps the plain strip (no dashed outline: dashed is not a state of this game) */
.cgrid__day.is-next .cgrid__n { color: var(--text-2); }

/* the claim: the reward icon pops, the check stamps in, one green ring leaves the cell */
.cgrid__day.is-just > :not(.cgrid__check) { transition-delay: var(--mo-med); }
.cgrid__day.is-just .cgrid__ico { animation: cgrid-pop var(--mo-slow) var(--mo-spring); }
.cgrid__day.is-just .cgrid__check { animation: cgrid-stamp var(--mo-slow) var(--mo-spring) var(--mo-fast) both; }

.cgrid__day.is-just::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--green);
  border-radius: inherit;
  pointer-events: none;
  animation: cgrid-ring var(--mo-slow) var(--mo-out) both;
}

@keyframes cgrid-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.32); }
  100% { transform: scale(1); }
}

@keyframes cgrid-stamp {
  0% { opacity: 0; transform: scale(2.4) rotate(-25deg); }
  60% { opacity: 1; transform: scale(0.9) rotate(-4deg); }
  100% { opacity: 1; transform: rotate(-8deg); }
}

@keyframes cgrid-ring {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.12); }
}

/* the daily popup's bigger variant: taller cells, the same 12 / 900 reward line as Zlecenia → Kalendarz (at 14 px
   „Skrzynka” no longer fit a quarter of the 360 px card and showed as „Skrzyn…”) */
.cgrid--popup .cgrid__day { min-height: 92px; }

@media (max-width: 360px) {
  .cgrid { gap: 4px; }
  .cgrid__day,
  .cgrid--popup .cgrid__day { min-height: 76px; padding: 24px 2px 4px; }
}

/* ------------------------------------------------------------------ daily reward popup
   §4 modal: the title centred, the grid, ONE lg primary „Odbierz +2 [gem]” (the full reward line is the cells'
   title and a screen-reader status, not a third line on the card) */
.modal.modal--daily {
  width: min(100%, 360px);
}

.dpop__head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  text-align: center;
}

.modal--daily .modal__actions { margin-top: 16px; }
/* the daily gem cap trimmed today's gems: one muted line under the grid */
.dpop__cap { margin: 12px 0 0; color: var(--text-2); font-size: var(--fs-14); font-weight: 700; text-align: center; }
.dpop__cap[hidden] { display: none; }
.dpop__btn.is-done .icon { animation: cgrid-pop var(--mo-slow) var(--mo-spring); }

/* ------------------------------------------------------------------ „Podoba Ci się gra?” — the creator's own ask
   Not given to Kim: the game's icon 48 + the title in one left-aligned row, ONE grey paragraph (the ask + why), the
   green „Załóż konto +100 [gem]” with the new-tab glyph, the affiliate disclosure under it. Closing = the ghost ✕. */
.modal.modal--support {
  position: relative;
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 20px;
  text-align: left;
}

.spop__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 44px; /* room for the ✕ */
}

.spop__icon {
  flex: none;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
}

.spop__title { margin: 0; }

.spop__text {
  margin: 0;
  color: var(--text-2);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

.spop__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.spop__cta { gap: 8px; }
.spop__cta .ext-icon { flex: none; }

/* „+100 [gem]” in the button: the label's own white, the gem glyph multicolour (no purple chip) */
.spop__gems {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-weight: 900;
}

/* the ✕ (owner 2026-10-15: no „Już mam konto” / „Nie teraz” buttons — closing = „Nie teraz”) = a ghost sm icon button */
.modal--support .spop__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--raised-2);
  color: var(--text);
  box-shadow: var(--sh-edge-sm);
  cursor: var(--cur-hand);
}

.modal--support .spop__close:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--edge-c);
}

.modal--support .spop__close:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.spop__note {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: var(--lh-body);
}

/* ------------------------------------------------------------------ reduced motion: end states only */
:root[data-reduce-motion="true"] :is(.cgrid__day.is-just .cgrid__ico, .cgrid__day.is-just .cgrid__check, .dpop__btn.is-done .icon) {
  animation: none;
}

:root[data-reduce-motion="true"] .cgrid__day.is-just::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduce-motion="false"]) :is(.cgrid__day.is-just .cgrid__ico, .cgrid__day.is-just .cgrid__check, .dpop__btn.is-done .icon) {
    animation: none;
  }
  :root:not([data-reduce-motion="false"]) .cgrid__day.is-just::after { animation: none; opacity: 0; }
}