/* css/intro.css (BACKLOG 18) — the tutorial bubble's „Krok n/11” + dots + WHY line (js/ui/tutorial.js) and the one-time
   „Chcesz zdobyć gemy?” popup (modal id 'gem-offer'). Kim's intro talk and the tutorial coach around the bubble live in
   css/guide-character.css (owner 2026-10-14: the 4-card intro was replaced). Tokens from css/main.css. Visual pass 2
   (2026-10-15): the bubble is paper + ink, so its meta line and dots are ink; no glow, sparkle or bobbing loops. */

/* ------------------------------------------------------------------ tutorial bubble: step, dots, WHY line */
#layer-toasts .tut__bubble {
  max-width: 264px;
}

.tut__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.tut__step {
  color: rgba(27, 35, 48, 0.7);
  font-weight: 900;
  font-size: var(--fs-12);
  white-space: nowrap;
}

/* playtest: „Krok 3/11” AND 11 dots said the same thing twice — the words stay, the dots are not drawn */
.tut__dots {
  display: none;
  align-items: center;
  gap: 4px;
}

/* the Kim bubble's step dots: 8 px, the current one ink, the others ink at 25 % */
.tut__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(27, 35, 48, 0.25);
  transition: background-color var(--mo-med) var(--mo-out);
}

.tut__dot.is-on { background: var(--ink); }

.tut__text {
  display: block;
}

.tut__why {
  display: block;
  margin-top: 4px;
  color: rgba(27, 35, 48, 0.7);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-tight);
}

.tut__bubble.is-pop .tut__text,
.tut__bubble.is-pop .tut__why {
  animation: tut-pop var(--mo-slow) var(--mo-spring) both;
}

.tut__bubble.is-pop .tut__why { animation-delay: 60ms; }

@keyframes tut-pop {
  from { opacity: 0.2; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Stół QC panel steps (js/ui/tutorial.js place()). Phones / portrait ('is-tight'): only the ~70 px HUD strip above
   the panel is free, so the bubble becomes a slim, wider banner — no dots, smaller type — and fits there without
   covering the stage or „Pomiń”. Wide screens ('is-side'): the bubble sits in the scene left of the side panel and
   „Pomiń” moves next to it (--tut-side = the panel's distance from the right edge), off the panel header. */
#layer-toasts .tut.is-tight .tut__bubble {
  max-width: min(420px, calc(100% - 24px));
  padding: 8px 12px;
  border-radius: var(--r-lg);
}

.tut.is-tight .tut__dots { display: none; }
.tut.is-tight .tut__meta { margin-bottom: 0; }

.tut.is-tight .tut__text {
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
}

.tut.is-tight .tut__why {
  margin-top: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-tight);
}

.tut.is-side .tut__skip {
  right: calc(var(--tut-side, 0px) + 12px);
}

/* ------------------------------------------------------------------ „Chcesz zdobyć gemy?” popup (§4 modal) */
.modal.modal--gem-offer {
  width: min(100%, 360px);
  text-align: center;
}

.gem-offer__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 88px;
  margin-bottom: 8px;
}

.gem-offer__gem {
  position: relative;
  line-height: 0;
  animation: gem-in var(--mo-slow) var(--mo-spring) both;
}

@keyframes gem-in {
  from { scale: 0.3; rotate: -25deg; }
  to { scale: 1; rotate: 0deg; }
}

/* the chips pop in once (on show) */
@keyframes ia-pop {
  from { scale: 0.45; }
  to { scale: 1; }
}

.gem-offer__title { text-wrap: balance; }

.gem-offer__sub { margin-top: 8px; text-align: left; }

.gem-offer__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 8px;
  padding: 0;
  list-style: none;
}

/* a task = a §4 chip: 32 px, --r-sm, --raised-2, 14 / 800 */
.gem-offer__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--raised-2);
  color: var(--text);
  font-weight: 800;
  font-size: var(--fs-14);
  animation: ia-pop var(--mo-slow) var(--mo-spring) var(--d, 0ms) both;
}

.gem-offer__chip--more {
  color: var(--text-2);
}

.gem-offer__gems {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gem-light);
  font-weight: 900;
}

.gem-offer__gems .icon { display: block; }

.gem-offer__total {
  margin: 4px 0 0;
  color: var(--text-2);
  font-weight: 800;
  font-size: var(--fs-14);
}

.modal--gem-offer .modal__actions > .gem-offer__show { flex: 1; min-width: 0; white-space: nowrap; }
/* 2026-10-22: the chunky ghost „Później” keeps to its text, so „Pokaż zadania” stays on one line at 360 px */
.modal--gem-offer .modal__actions > .gem-offer__later { flex: none; padding-inline: 18px; }