/* css/guide.css — „Co teraz?” chip, idle marker and tap-reason tip (js/ui/guide.js). Lives in #layer-toasts.
   Visual pass 2 (2026-10-15): the chip is a 36 px HUD block (--panel, 2 px --line, --r-md, the small edge) with Kim's
   head 28 + 14 / 800 text; the teaching marker (ring + arrow) keeps its loops (§7 allow-list). */

#layer-toasts > .guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* the chip sits where the bottom-left HUD block starts (.hud-bottom: bottom = safe + 84px); js/ui/guide.js lifts it
   above the round skill / coffee buttons when there are any */
.guide__chip {
  position: absolute;
  left: max(8px, var(--safe-left, 0px));
  bottom: calc(max(8px, var(--safe-bottom, 0px)) + 84px);
  max-width: min(340px, calc(100% - 32px)); /* i18n QA: the right quick column is gone — room for „Zatrudnij: Obsługa zamówień za ¥25” */
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px 2px 4px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--text);
  font: 800 var(--fs-14)/1.15 var(--font);
  text-align: left;
  box-shadow: var(--sh-edge-sm);
  pointer-events: auto;
  cursor: var(--cur-hand);
  -webkit-tap-highlight-color: transparent;
}

.guide__chip[hidden],
.guide__mark[hidden],
.guide__tip[hidden] {
  display: none;
}

/* a fingertip-sized hit area (≥ 44 px tall) without a bigger chip */
.guide__chip::after {
  content: "";
  position: absolute;
  inset: -6px -4px;
}

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

/* a countdown with nothing to point at (js/ui/guide.js isInfo): reads as a label — no pointer, no press, no hit area */
.guide__chip.guide__chip--info {
  cursor: default;
  box-shadow: none;
}

.guide__chip--info::after {
  content: none;
}

.guide__chip--info:active {
  transform: none;
}

.guide__chip.is-nudge {
  animation: guide-nudge var(--mo-slow) var(--mo-out);
}

@keyframes guide-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.guide__q {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--raised-2);
  color: var(--text);
  font-weight: 900;
  font-size: var(--fs-14);
}

.guide__chip[data-kind^="wait"] .guide__q,
.guide__chip[data-kind="busy"] .guide__q {
  background: var(--raised-2);
  color: var(--text-2);
}

.guide__text {
  min-width: 0;
  overflow: hidden;
  /* 2 lines before cutting anything (long role names / EN) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* a countdown / a queue count = §4 tags (grey, tabular) */
.guide__time {
  flex: none;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--raised-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.guide__queue {
  flex: none;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--raised-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: 20px;
}

.guide__queue[hidden],
.guide__time[hidden] {
  display: none;
}

/* idle marker: a pulsing ring with a bouncing arrow above the target point — green like the hall's tap hints
   (js/render/tap-hints.js: green = act; yellow is XP / level / rank), kept 30 px inside the screen edge by guide.js */
.guide__mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.guide__mark.is-off {
  visibility: hidden;
}

.guide__ring {
  position: absolute;
  left: -26px;
  top: -26px;
  width: 52px;
  height: 52px;
  border: 3px solid var(--green);
  border-radius: 50%;
  animation: guide-ring 1.2s ease-out infinite;
}

.guide__arrow {
  position: absolute;
  left: -11px;
  top: -64px;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 16px solid var(--green);
  filter: drop-shadow(0 2px 0 var(--ink));
  animation: guide-bob 0.9s ease-in-out infinite;
}

@keyframes guide-ring {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes guide-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* tap reason next to the tapped object */
.guide__tip {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: var(--sh-edge-sm);
  color: var(--text);
  font: 700 var(--fs-14)/1.35 var(--font);
  text-align: left;
  pointer-events: none;
}

.guide__tip.is-pop {
  animation: guide-pop var(--mo-med) var(--mo-out);
}

/* BACKLOG 28: `translate` (composes with the inline transform that positions the tip) instead of margin-top (layout) */
@keyframes guide-pop {
  0% { opacity: 0; translate: 0 6px; }
  100% { opacity: 1; translate: none; }
}

/* a menu sheet / the QC panel covers the scene: no chip, no marker (js also hides them) */
.is-tut .guide__mark {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .guide__ring,
  .guide__arrow,
  .guide__tip.is-pop,
  .guide__chip.is-nudge {
    animation: none;
  }
}

/* the game's own reduce-motion setting (css/motion.css) */
[data-reduce-motion="true"] .guide__ring,
[data-reduce-motion="true"] .guide__arrow,
[data-reduce-motion="true"] .guide__tip.is-pop,
[data-reduce-motion="true"] .guide__chip,
[data-reduce-motion="true"] .guide__chip.is-nudge {
  animation: none;
}

[data-reduce-motion="true"] .guide__chip:active {
  transform: none;
}

/* phones (BACKLOG 24 + 32): the chip is THE bottom message — one line right above the slimmer nav; room for the skill /
   coffee rounds that sit at the right edge. The wide desktop layout never matches this. */
@media not all and (min-width: 900px) and (orientation: landscape) {
  .guide__chip {
    left: max(10px, var(--safe-left, 0px));
    bottom: var(--bubble-bottom, calc(var(--nav-space, 78px) + 8px)); /* above the crown / Sklep / Szafa row */
    max-width: calc(100% - 20px);
    min-height: 36px;
    animation: guide-in var(--mo-med) var(--mo-out);
  }
  .guide__chip::after { inset: -6px -4px; }
  #app:has(#hud .round) .guide__chip { max-width: calc(100% - 80px); }
  .guide__text {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}

@keyframes guide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}