/* ============================================================
   kg-ux-feedback.css — Track 3 (UX graphics) styles, Oct 11 2026
   ----------------------------------------------------------------------------
   Presentation-only feedback/legibility layer for Karma's Gambit:
   impact frames, killing-blow numerals, death-dissolve ghosts, blocker
   brace, the phase chip, and the designed gate-error card.

   Boundaries: does NOT restyle the turn banner (#kgTurnBanner) or the
   last-beat strip (#kgLastBeat) — those belong to the feel crew's
   kg-anim.js / game-readability.css. This sheet only ADDS new surfaces.

   Aesthetic: dark-fantasy tavern craft — aged wood, iron, parchment,
   candlelight gold; hand-inked, never glossy. Every keyframe below has a
   reduced-motion mirror (OS prefers-reduced-motion AND the header Motion
   toggle's :root[data-motion="reduced"]).
   ============================================================ */

/* ── Phase chip: persistent "what phase is it" label next to #turnPill ── */
#kgPhaseChip {
  display: inline-block;
  margin: 6px auto 0;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.9rem;                 /* 0.9rem text floor */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #f3d9a4;                   /* candlelight on near-black: AA */
  background: rgba(24, 16, 8, 0.85);
  border: 1px solid rgba(196, 144, 42, 0.55);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(196, 144, 42, 0.08);
  text-align: center;
}
#kgPhaseChip.kg-pc-combat { color: #ffc9a3; border-color: rgba(224, 106, 30, 0.7); }
#kgPhaseChip.kg-pc-foe { color: #b9c2d6; border-color: rgba(140, 140, 160, 0.5); font-style: italic; text-transform: none; letter-spacing: 0.04em; }
#kgPhaseChip.kg-pc-priority { color: #ffe9b0; border-color: rgba(255, 210, 74, 0.8); }

/* ── Impact frame: the beat-of-contact ring drawn at the impact point.
      Fires on heavy (≥8) or lethal damage, synchronous with the numeral. ── */
.kg-impact-ring {
  position: fixed;
  width: 90px; height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  border: 3px solid rgba(255, 210, 74, 0.9);
  box-shadow: 0 0 18px rgba(224, 106, 30, 0.8), inset 0 0 12px rgba(255, 210, 74, 0.5);
  pointer-events: none;
  z-index: 3950;
  animation: kgUxImpact 0.42s ease-out forwards;
}
.kg-impact-ring.kg-ir-lethal { border-color: rgba(255, 90, 74, 0.95); box-shadow: 0 0 24px rgba(255, 60, 40, 0.85), inset 0 0 14px rgba(255, 90, 74, 0.5); }
@keyframes kgUxImpact {
  0%   { transform: scale(0.25); opacity: 0.95; }
  55%  { transform: scale(1.05); opacity: 0.75; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ── Killing-blow numeral: the number that ends a creature hits harder ── */
.dmg-num.kg-kill {
  font-size: 2.3rem;
  color: #ff4a3c;
  text-shadow: 0 0 14px rgba(255, 60, 40, 0.9), 0 2px 3px #000;
  animation: kgUxKillFloat 1.1s ease-out forwards;
}
@keyframes kgUxKillFloat {
  0%   { transform: translateX(-50%) scale(1.5) rotate(-3deg); opacity: 1; }
  30%  { transform: translateX(-50%) translateY(-14px) scale(1.25) rotate(1deg); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-58px) scale(0.95); opacity: 0; }
}

/* ── Death-dissolve ghost: the fallen creature crumbles to ash where it stood ── */
.kg-death-ghost {
  position: fixed;
  z-index: 3940;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(58, 50, 40, 0.92), rgba(30, 24, 18, 0.94));
  border: 1px solid rgba(150, 130, 100, 0.6);
  color: #cfc0a8;
  font-family: Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  text-shadow: 0 1px 4px #000;
  animation: kgUxDissolve 0.75s ease-in forwards;
}
@keyframes kgUxDissolve {
  0%   { opacity: 0.95; transform: translateY(0) rotate(0deg); filter: blur(0); }
  45%  { opacity: 0.7;  transform: translateY(-10px) rotate(-2deg); filter: blur(0.6px); }
  100% { opacity: 0;    transform: translateY(-34px) rotate(3deg); filter: blur(3px); }
}

/* ── Blocker brace: the intercepting blocker steels itself at contact ── */
.bcreature.kg-brace, .bfixture.kg-brace {
  animation: kgUxBrace 0.5s ease-out;
}
@keyframes kgUxBrace {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); filter: brightness(1.35); }
  100% { transform: scale(1); filter: none; }
}
.bcreature.kg-brace { box-shadow: 0 0 0 2px rgba(154, 223, 255, 0.85), 0 0 18px rgba(154, 223, 255, 0.5); }

/* ── Designed gate-error card: icon + plain words + what-it-means + retry.
      Replaces raw "The tavern is unreachable. try again." textContent dumps
      on the Oath-gate sign-in / sign-up / confirm forms. ── */
.kg-gate-error {
  display: none;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(52, 34, 18, 0.96), rgba(28, 18, 10, 0.97));
  border: 1px solid rgba(196, 144, 42, 0.5);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 0 14px rgba(196, 144, 42, 0.06);
  color: #efe0c0;
  text-align: left;
}
.kg-gate-error.show { display: flex; gap: 12px; align-items: flex-start; animation: kgPhaseIn 0.3s ease both; }
.kg-gate-error .kg-ge-icon { flex: 0 0 40px; width: 40px; height: 40px; margin-top: 2px; }
.kg-gate-error .kg-ge-icon svg { width: 40px; height: 40px; display: block; }
.kg-gate-error .kg-ge-body { flex: 1 1 auto; min-width: 0; }
.kg-gate-error .kg-ge-title {
  margin: 0 0 4px;
  font-family: var(--ff-head, Georgia, serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #ffd98a;
}
.kg-gate-error .kg-ge-msg { margin: 0 0 6px; font-size: 0.95rem; color: #f0e2c4; }
.kg-gate-error .kg-ge-meaning { margin: 0 0 12px; font-size: 0.9rem; font-style: italic; color: var(--mist, #a89f8d); }
.kg-gate-error .kg-ge-retry {
  min-height: 44px;              /* 44px touch target */
  min-width: 44px;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #1d130a;
  background: linear-gradient(180deg, #ffd98a, #d9a441);
  border: 1px solid #8a6420;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.kg-gate-error .kg-ge-retry:hover { filter: brightness(1.08); }
.kg-gate-error .kg-ge-retry:active { transform: translateY(1px); }

/* ── Reduced motion: instant cuts, no flashes. Mirrors both the OS
      preference and the header Motion toggle. ── */
@media (prefers-reduced-motion: reduce) {
  .kg-impact-ring { animation: none; opacity: 0; }
  .kg-death-ghost { animation: none; opacity: 0; }
  .bcreature.kg-brace, .bfixture.kg-brace { animation: none; }
  .dmg-num.kg-kill { animation: none; }
  .kg-gate-error.show { animation: none; }
  #kgPhaseChip { transition: none; }
}
:root[data-motion="reduced"] .kg-impact-ring { animation: none; opacity: 0; }
:root[data-motion="reduced"] .kg-death-ghost { animation: none; opacity: 0; }
:root[data-motion="reduced"] .bcreature.kg-brace,
:root[data-motion="reduced"] .bfixture.kg-brace { animation: none; }
:root[data-motion="reduced"] .dmg-num.kg-kill { animation: none; }
:root[data-motion="reduced"] .kg-gate-error.show { animation: none; }
:root[data-motion="reduced"] #kgPhaseChip { transition: none; }