/* css/guide-character.css — „Kim”, the warehouse boss who explains the game (js/ui/guide-character.js): the portrait
   (inline SVG: blink, talking mouth, a wave that plays once), THE speech bubble of the game (visual pass 2, 2026-10-15:
   --paper fill, a 2 px --ink outline, --r-lg on all four corners, the 4 px ink edge of a button, one tail), the plain
   „Kim” name line, Kim's line inside screens (.kim-line) and the places he appears: the intro talk + the KakoBuy bubble
   (modal at the bottom, js/ui/intro.js), the tutorial coach (js/ui/tutorial.js, #layer-toasts > .tut), the one-time
   „new system” bubble (.kim-pop) and the head on the „Co teraz?” chip. Tokens from css/main.css. Only the blink loops
   (§7); reduced motion: css/motion.css stops every animation. */

/* ------------------------------------------------------------------ the portrait */
.kim__fig {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
}

.kim__svg {
  display: block;
  overflow: visible;
}

.kim__eyes {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: kim-blink 4.6s ease-in-out infinite;
}

.kim__mouth {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.kim__fig.is-talk .kim__mouth { animation: kim-talk var(--mo-fast) ease-in-out 6 alternate; }

.kim__arm {
  transform-box: view-box;
  transform-origin: 82px 72px;
}

/* the wave answers the moment (hello / the last bubble): it plays once */
.kim__fig.is-wave .kim__arm { animation: kim-wave 1.8s ease-in-out 1; }

@keyframes kim-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96.5% { transform: scaleY(0.12); }
}

@keyframes kim-talk {
  from { transform: scaleY(1); }
  to { transform: scaleY(2.2); }
}

@keyframes kim-wave {
  0%, 52%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(14deg); }
  20%, 40% { transform: rotate(-8deg); }
}

/* ------------------------------------------------------------------ the bubble (one shape for every speech bubble) */
.kim__bubble {
  position: relative;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  text-align: left;
}

/* the tail: a 14 px square turned 45°, outlined on its two outer sides — by default under the bubble, pointing down */
.kim__bubble::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-width: 0 2px 2px 0;
  background: var(--paper);
  transform: rotate(45deg);
}

/* plain „Kim” on its own line (no pill) */
.kim__name {
  display: block;
  color: var(--ink);
  font-weight: 900;
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
}

.kim__text {
  margin: 0;
  font-weight: 800;
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  text-wrap: pretty;
}

.kim__text.is-in { animation: kim-text-in var(--mo-med) var(--mo-out) both; }

.kim__why {
  margin: 4px 0 0;
  color: rgba(27, 35, 48, 0.7);
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}

@keyframes kim-text-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Kim's line (§4): the one piece of advice on a
   screen — his head (32, or 48 for an empty state) + one short 14 / 700 sentence on a --raised row (kit.js kimLine) */
.kim-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px 8px 8px;
  border-radius: var(--r-md);
  background: var(--raised);
  color: var(--text);
}

.kim-line[hidden] { display: none; }

.kim-line__head {
  flex: none;
  display: grid;
  place-items: center;
  line-height: 0;
}

.kim-line__t {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  text-align: left;
}

/* the head-only portrait (viewBox on the head) is drawn with overflow: visible for the cap: clip its bottom so the
   torso never hangs out of the row onto the next card (2026-10-22 polish) */
.kim-line__head .kim__svg { clip-path: inset(-12px -12px 0 -12px); }

.kim-line__h { display: block; font-weight: 900; }
.kim-line > .btn { flex: none; }
.kim-line--empty { padding: 12px 12px 12px 8px; }

/* ------------------------------------------------------------------ intro talk + KakoBuy bubble (modals at the bottom) */
.modal-backdrop:has(> .modal--kim) {
  align-items: flex-end;
  background: rgba(5, 8, 16, 0.48);
}

.modal.modal--kim {
  align-self: flex-end;
  width: min(100%, 460px);
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: kim-rise var(--mo-slow) var(--mo-out) both;
}

.modal.modal--kim:focus { outline: none; }

@keyframes kim-rise {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}

.kim-talk {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kim-talk__bubble { padding: 12px 14px 14px; }

.kim-talk__bubble::before {
  left: 46px;
  bottom: -9px;
}

.kim-talk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* „Pomiń” = a text button in ink at 70 % (inside the paper bubble) */
.kim-talk__skip {
  --btn-fg: rgba(27, 35, 48, 0.7);
  margin: -8px -8px -8px 0;
}

.kim-talk__dots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

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

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

.kim-talk__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-left: 8px;
}

/* the bust tucks under the nav (its layer is above the modals): the nav is the frame that cuts it */
.kim-talk__fig {
  margin-bottom: -18px;
}

.kim-talk__next {
  gap: 8px;
  min-width: 150px;
  margin-bottom: 4px;
}

.kim-talk__nextIco { display: inline-flex; }

/* the KakoBuy bubble */
.kim-aff__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.kim-aff__cta,
.kim-aff__claim { gap: 8px; }

/* „+100 [gem]” in the green button: the label's white + the multicolour gem (no chip) — as the support card's */
.kim-aff__gems {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-weight: 900;
}

.kim-aff__gems .icon { display: block; }

.kim-aff__row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* „Już mam konto” / „Później”: text buttons in ink at 70 % */
.kim-aff__quiet {
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: rgba(27, 35, 48, 0.7);
  font-weight: 800;
  font-size: var(--fs-14);
  cursor: var(--cur-hand);
}

.kim-aff__quiet:active { transform: translateY(2px); }

.kim-aff__note {
  margin: 4px 0 0;
  color: rgba(27, 35, 48, 0.7);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  text-align: left;
}

/* ------------------------------------------------------------------ tutorial coach (Kim + the step bubble) */
#layer-toasts > .tut .tut__coach {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: min(390px, calc(100% - 16px));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mo-med) var(--mo-out);
  will-change: transform;
}

#layer-toasts > .tut.is-on .tut__coach { opacity: 1; }
#layer-toasts > .tut .tut__coach[hidden] { display: none; }

#layer-toasts > .tut .tut__coach .tut__bubble {
  position: relative;
  left: auto;
  top: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 300px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  opacity: 1;
  transform: none;
}

/* the coach's tail points left, at Kim */
.tut__coach .tut__bubble::before,
.kim-pop__bubble::before {
  left: -9px;
  bottom: 22px;
  border-width: 0 0 2px 2px;
}

/* the docked / side coach shows Kim on a round paper badge with the ink outline; the cap pops out over its top */
.tut__coach .kim__fig,
.kim-pop .kim__fig {
  width: 72px;
  height: 72px;
}

.tut__coach .kim__fig::before,
.kim-pop .kim__fig::before {
  content: '';
  position: absolute;
  inset: 8px 4px 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
}

.tut__coach .kim__svg,
.kim-pop .kim__svg {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: inset(-30px 6.5px 2.5px round 0 0 29.5px 29.5px);
}

/* phones, Stół QC panel steps: Kim's head-sized badge + a slim banner in the strip above the panel */
#layer-toasts > .tut.is-tight .tut__coach { align-items: center; gap: 8px; }

.tut.is-tight .tut__coach .kim__fig {
  width: 44px;
  height: 44px;
}

.tut.is-tight .tut__coach .kim__fig::before { inset: 4px 2px 0; }
.tut.is-tight .tut__coach .kim__svg { clip-path: inset(-20px 4px 2px round 0 0 18px 18px); }

#layer-toasts > .tut.is-tight .tut__coach .tut__bubble {
  max-width: min(420px, calc(100vw - 80px));
  padding: 8px 12px;
  border-radius: var(--r-lg);
}

.tut.is-tight .tut__coach .tut__bubble::before {
  bottom: auto;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  left: -8px;
}

/* ------------------------------------------------------------------ one-time „new system” bubble */
#layer-toasts > .kim-pop {
  position: absolute;
  left: var(--bubble-left, max(8px, var(--safe-left, 0px)));
  bottom: var(--bubble-bottom, calc(var(--nav-space, 78px) + 8px)); /* above the HUD's bottom-left controls (css/hud.css) */
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: min(400px, calc(100% - 16px));
  cursor: var(--cur-hand);
  pointer-events: auto;
  animation: kim-pop-in var(--mo-slow) var(--mo-spring) both;
  -webkit-tap-highlight-color: transparent;
}

#layer-toasts > .kim-pop.is-out {
  pointer-events: none;
  animation: kim-pop-out var(--mo-med) var(--mo-out) both;
}

.kim-pop__bubble {
  padding: 12px 14px;
  border-radius: var(--r-lg);
}

.kim-pop__bubble .kim__text {
  margin-top: 4px;
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
}

/* the chip sits on the same spot: it waits while Kim talks */
.is-kim-pop #layer-toasts .guide__chip { visibility: hidden; }

@keyframes kim-pop-in {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes kim-pop-out {
  to { opacity: 0; transform: translateY(16px); }
}

/* ------------------------------------------------------------------ „Co teraz?” chip: Kim's head instead of „?” */
.guide__q.guide__q--kim {
  width: 28px;
  height: 28px;
  overflow: visible;
  background: none;
}

.guide__chip[data-kind^="wait"] .guide__q--kim,
.guide__chip[data-kind="busy"] .guide__q--kim {
  background: none;
}

.guide__q--kim .kim__fig { animation: none; }

/* ------------------------------------------------------------------ small / short screens */
@media (max-width: 359px) {
  .kim-talk__next { min-width: 120px; padding: 0 16px; }
}

@media (max-height: 560px) {
  .kim-talk__fig .kim__svg { width: 76px; height: 76px; }
  .kim-talk__dots { margin-top: 8px; }
  .tut__coach .kim__fig,
  .kim-pop .kim__fig { width: 56px; height: 56px; }
  .tut__coach .kim__fig::before,
  .kim-pop .kim__fig::before { inset: 6px 3px 0; }
  .tut__coach .kim__svg,
  .kim-pop .kim__svg { clip-path: inset(-24px 5.5px 2.5px round 0 0 22.5px 22.5px); }
}