/* Doing it by hand: tapping runes to pay, and being told when it was wrong.
 *
 * Paying has no dialog. The runes themselves carry the state, so these rules have to read at a
 * glance on a 48px card: gold for Energy (the rune turns), teal for Power (it goes back to the
 * deck). The note that follows a mistake is the only thing here that covers the board, and it
 * is deliberately quieter than the end-of-match card - a wrong payment is a normal part of
 * playing, not an outcome.
 */

/* ---------------------------------------------------- runes during a hand payment */
body[data-await-pay] .rune-token { cursor: pointer; }

/* Runes normally sit in a fanned stack, each covering half the one before it: fine to read,
   but only a sliver of every card below the top one can be clicked. A payment is nothing but
   clicking those cards, so the stack opens up while one is being built. */
body[data-await-pay] .rune-stack .rune-token + .rune-token {
  margin-left: calc(var(--rune-card-width) * .06);
}
body[data-await-pay] .rune-stack--exhausted .rune-token + .rune-token {
  margin-left: calc(var(--rune-card-width) * .06);
}
body[data-await-pay] #stage .res .rune-tokens { overflow-x: auto; scrollbar-width: thin; }
.rune-token.is-payable:not(.is-paying-energy):not(.is-paying-power) {
  outline: 1px dashed #d8b86a99; outline-offset: 1px;
}
.rune-token.is-paying-energy,
.rune-token.is-paying-power { z-index: 20; }
.rune-token.is-paying-energy { outline: 2px solid var(--gold-bright, #f1d88d); outline-offset: 1px; }
.rune-token.is-paying-power { outline: 2px solid #5ce8c7; outline-offset: 1px; }

/* Clicking a rune turns it sideways, the same way you would turn the card on a table - and
   the same way the board already draws a rune that is genuinely spent. An outline alone was
   not the gesture: a tapped rune has to LOOK tapped before it reads as one. */
.rune-token.is-paying-energy,
.rune-token.is-paying-power {
  width: calc(var(--rune-card-width) * 1.4);
  flex-basis: calc(var(--rune-card-width) * 1.4);
  aspect-ratio: 7 / 5;
  transition: width 140ms var(--ease-lift, ease-out), flex-basis 140ms var(--ease-lift, ease-out);
}
.rune-token.is-paying-energy .rune-token__art,
.rune-token.is-paying-power .rune-token__art {
  position: absolute; left: 50%; top: 50%;
  width: var(--rune-card-width); height: calc(var(--rune-card-width) * 1.4);
  object-fit: fill; filter: brightness(1.12);
  transform: translate(-50%, -50%) rotate(90deg);
}
/* A rune already lying sideways is turned back upright to show it is leaving for the deck. */
.rune-stack--exhausted .rune-token.is-paying-power {
  width: var(--rune-card-width); flex-basis: var(--rune-card-width); aspect-ratio: 5 / 7;
}
.rune-stack--exhausted .rune-token.is-paying-power .rune-token__art {
  width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
  .rune-token.is-paying-energy, .rune-token.is-paying-power { transition: none; }
}

/* The tag says what this rune is being spent as, in the same words as the cost. */
.rune-token.is-paying-energy .rune-token__state,
.rune-token.is-paying-power .rune-token__state { color: #10161c; font-weight: 700; }
.rune-token.is-paying-energy .rune-token__state { background: var(--gold-bright, #f1d88d); }
.rune-token.is-paying-power .rune-token__state { background: #5ce8c7; }
.rune-token.is-paying-energy .rune-token__state::after { content: " · Energy"; }
.rune-token.is-paying-power .rune-token__state::after { content: " · Power"; }

/* A unit or gear whose Add ability can stand in for a rune. */
#stage .unit.is-payable .unit__frame,
#stage .slot__card.is-payable { outline: 1px dashed #d8b86a99; outline-offset: 2px; }
#stage .unit.is-paying-energy .unit__frame,
#stage .slot__card.is-paying-energy { outline: 2px solid var(--gold-bright, #f1d88d); outline-offset: 2px; }

/* ------------------------------------------------------------------- the note */
.misread {
  position: fixed; inset: 0; z-index: 190;
  display: grid; place-items: center;
  background: radial-gradient(60% 60% at 50% 45%, #05080a99, #05080ad9 72%);
  animation: misreadIn 180ms var(--ease-lift, ease-out) both;
}
.misread__card {
  min-width: min(420px, 88vw); max-width: 92vw;
  padding: 20px 26px 18px; text-align: left;
  border-radius: 14px;
  background: linear-gradient(180deg, #221c19f5, #100d0cfa);
  box-shadow: 0 24px 60px -20px #000, inset 0 0 0 1px #8a6a3a80;
}
.misread__flag {
  font-family: var(--display, inherit); font-size: 12px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: #e8b35c;
}
.misread__title { margin-top: 6px; font-size: 19px; font-weight: 700; color: var(--text, #eef1f4); }
.misread__detail { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted, #b6bcc4); }
.misread__acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.misread__act {
  min-height: 44px; padding: 8px 18px; border-radius: 8px;
  color: var(--text, #eef1f4); background: #161b20;
  box-shadow: inset 0 0 0 1px #2a3036;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.misread__act--primary {
  color: #20160a; background: linear-gradient(180deg, #f1d88d, #bf9342);
  box-shadow: inset 0 1px 0 #fff3, 0 2px 8px #0007;
}
.misread__act:hover:not(:disabled) { filter: brightness(1.08); }
.misread__act:disabled { opacity: .55; cursor: default; }

@keyframes misreadIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .misread { animation: none; } }

.misread__section{margin:0 0 9px}
.misread__section:last-child{margin-bottom:0}
.misread__section strong{display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c9ad70}