/*
  Its own grid row rather than floating over either half, so it never covers the Bench it is
  naming a choice about. It MUST NEVER WRAP: a second line changes the band's height and moves
  the table on a phase change, so the opponent's name ellipsises instead.
*/
.turn-ribbon {
  position: relative;
  z-index: 30;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  color: #d9ca94;
  background: linear-gradient(90deg, transparent, rgb(12 16 10 / 96%) 22% 78%, transparent);
  text-shadow: 0 2px 8px #000;
  font: 700 12px "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  /* Without this the band's content is the floor on the row's width, so a long name widens the
     whole table instead of being clipped. */
  min-width: 0;

  @media (max-width: 720px) {
    min-height: 28px;
    padding: 0 6px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}

.turn-ribbon::before,
.turn-ribbon::after {
  content: "";
  width: 80px;
  height: 1px;
  background: #77714c;

  @media (max-width: 720px) {
    width: 24px;
  }
}

.ribbon-turn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ribbon-sep {
  color: #77714c;
}

/* What is being asked is the brighter of the two, because it is the half that changes. */
.ribbon-phase {
  color: #fff4c9;
}

/* While the match is waiting on the other half of the table, this half's name reads quieter. */
.turn-ribbon.is-waiting .ribbon-turn {
  color: #a49d7a;
}

.event-toast {
  position: absolute;
  z-index: 70;
  top: 47%;
  left: 50%;
  max-width: min(560px, 80vw);
  padding: 10px 16px;
  border: 1px solid #a48e48;
  border-radius: 12px;
  color: var(--ink);
  background: #11140fee;
  box-shadow: 0 12px 32px #0009;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-align: center;

  @media (max-width: 720px) {
    top: 40%;
    max-width: 92vw;
    padding: 8px 11px;
    font-size: 11px;
  }
}

.event-toast.is-visible {
  animation: event-pop 0.52s both;
}

.card-play-overlay,
.turn-change-overlay,
.coin-toss-overlay,
.attack-result-overlay {
  position: absolute;
  z-index: 150;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.card-play-overlay {
  align-content: center;
  gap: 18px;
  background: radial-gradient(circle, rgb(15 20 12 / 82%), rgb(7 9 6 / 42%) 46%, transparent 72%);
  /*
    ARRIVES ONLY - no exit, no fill mode. A card being carried is drawn on this layer, so a
    closing keyframe here fades the card mid-journey. The beat ending is what removes it.
  */
  animation: major-overlay-arrive 0.2s ease-out;
}

.card-play-overlay .card-face--showcase {
  --blokemon-card-scale: 0.5;
  filter: drop-shadow(0 30px 44px #000d);

  @media (max-width: 720px) {
    --blokemon-card-scale: 0.36;
  }
}

.card-play-overlay strong {
  font: 900 32px "Gillius ADF", serif;

  @media (max-width: 720px) {
    font-size: 24px;
  }
}

/* This one waits to be dismissed, so it outlives its run: arrive only, no fill mode. Anything
   that ends invisible while still listening for a tap is a trap over the board. */
.card-reveal-overlay {
  position: absolute;
  z-index: 150;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  background: radial-gradient(circle, rgb(15 20 12 / 88%), rgb(7 9 6 / 56%) 58%, transparent 82%);
  animation: major-overlay-arrive 0.2s ease-out;

  /* Must fit the no-scroll canvas whole, Continue button included. */
  @media (max-width: 720px) {
    gap: 10px;
    align-content: safe center;
    overflow-y: auto;
  }
}

.card-reveal-overlay .eyebrow {
  font: 900 26px "Gillius ADF", serif;
  color: #fff4c9;
  text-shadow: 0 8px 30px #000;

  @media (max-width: 720px) {
    font-size: 18px;
  }
}

/* Kept narrow so it breaks above the cards rather than running the width of the table. */
.card-reveal-overlay .reveal-note {
  max-width: min(88vw, 460px);
  margin: -8px 0 0;
  color: var(--muted);
  font: 700 13px "Jost", sans-serif;
  text-align: center;
  text-shadow: 0 4px 16px #000;

  @media (max-width: 720px) {
    margin-top: -4px;
    font-size: 11px;
  }
}

.card-reveal-overlay .revealed-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: min(92vw, 900px);

  @media (max-width: 720px) {
    gap: 8px;
  }
}

.turn-change-overlay {
  color: #fff4c9;
  background: radial-gradient(ellipse, rgb(37 45 27 / 72%), transparent 64%);
  text-shadow: 0 8px 30px #000;
  font: 900 clamp(62px, 10vw, 150px) / 0.9 "Gillius ADF", serif;
  letter-spacing: 0.02em;
  text-align: center;
  animation: turn-change-pop 0.95s both;

  @media (max-width: 720px) {
    font-size: clamp(48px, 17vw, 82px);
  }
}

.coin-toss-overlay {
  background: radial-gradient(circle, rgb(32 39 24 / 66%), transparent 62%);
}

.attack-result-overlay {
  align-content: center;
  gap: 10px;
  background: radial-gradient(circle, rgb(26 34 20 / 86%), rgb(7 9 6 / 28%) 45%, transparent 70%);
  text-align: center;
  animation: attack-result-pop 0.66s both;
}

.attack-result-overlay strong {
  max-width: min(760px, 86vw);
  color: #fff4c9;
  text-shadow: 0 7px 24px #000;
  font: 900 clamp(34px, 5vw, 72px) / 0.95 "Gillius ADF", serif;
}

.attack-result-overlay b {
  color: var(--gold);
  font: 900 clamp(28px, 4vw, 58px) "Jost", sans-serif;
  letter-spacing: 0.08em;
}

.attack-result-overlay.is-no-damage b {
  color: #ef9b83;
}

.blokemon-chip-result {
  display: grid;
  justify-items: center;
  gap: 18px;
  perspective: 1200px;
}

.blokemon-chip-toss {
  width: 190px;
  height: 190px;
  animation: chip-rise 1.4s cubic-bezier(0.2, 0.7, 0.25, 1) both;

  @media (max-width: 720px) {
    width: 140px;
    height: 140px;
  }
}

.blokemon-chip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.blokemon-chip-result.is-badge .blokemon-chip {
  animation: chip-flip-badge 1.4s cubic-bezier(0.18, 0.72, 0.24, 1) both;
}

.blokemon-chip-result.is-blank .blokemon-chip {
  animation: chip-flip-blank 1.4s cubic-bezier(0.18, 0.72, 0.24, 1) both;
}

.blokemon-chip-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 12px solid #b4933c;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #356f50 0 9%, #123d2a 36%, #071b12 72%),
    #102b1e;
  box-shadow:
    inset 0 0 0 4px #f0cf68,
    inset 0 0 0 9px #5f4819,
    0 22px 42px #000c;
  backface-visibility: hidden;
}

.blokemon-chip-badge {
  color: #ffe14f;
  text-shadow: 0 5px 0 #0b3122, 0 0 14px #000;
  font: 900 92px "Jost", sans-serif;

  @media (max-width: 720px) {
    font-size: 68px;
  }
}

.blokemon-chip-blank {
  transform: rotateY(180deg);
}

.blokemon-chip-blank::after {
  width: 74px;
  height: 74px;
  border: 3px solid #9f8b51;
  border-radius: 50%;
  content: "";
  opacity: 0.42;
}

.blokemon-chip-result > strong {
  opacity: 0;
  color: #fff4c9;
  text-shadow: 0 4px 18px #000;
  font: 900 38px "Gillius ADF", serif;
  letter-spacing: 0.08em;
  animation: chip-result-in 1.4s both;
}