/* LORE overlay: final broadcast polish layer (loaded after overlay.css). */

/* Shared panel surface: fully opaque so gameplay never bleeds through text. */
.broadcast-panel {
  background: linear-gradient(180deg, #1a1430 0%, #0e0a1c 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* SUMMON: keep the counter inside the panel and the sigil centered on the ring. */
.summon-counter-row { left: 20px; right: 20px; gap: 12px; }
.summon-witness-counter { font-size: 34px; letter-spacing: -.01em; }
.summon-combo-display { font-size: 20px; padding: 6px 10px; }

/* VOTE: readable two-line titles, no inner boxes. */
.vote-title {
  align-self: center;
  max-height: none;
  padding: 0;
  background: none;
  border: 0;
  font: 800 24px/1.18 var(--font-body, Inter, sans-serif);
  -webkit-line-clamp: 2;
}
.vote-percent { font-size: 38px; font-variant-numeric: tabular-nums; }
.vote-count { font-size: 15px; }

/* CANONIZATION: announcer stays on screen, remove redundant caption. */
.rarity-callout { top: 50%; padding: 14px 28px; border-radius: 18px; background: rgba(14, 10, 28, .94); }
.art-caption { display: none; }

/* TRIALS: flowing column so long questions never cover answer A. */
.trial-panel { display: flex; flex-direction: column; gap: 12px; }
.trial-panel .panel-heading { margin-bottom: 4px; }
.trial-panel .trial-question,
.trial-result-scene .trial-panel .trial-question {
  position: static;
  width: auto;
  min-height: 0;
  left: auto;
  top: auto;
  padding: 14px 16px;
  font: 700 22px/1.3 var(--font-body, Inter, sans-serif);
  text-align: left;
  place-items: start;
}
.trial-panel .trial-grid,
.trial-result-scene .trial-panel .trial-grid {
  position: static;
  width: auto;
  left: auto;
  top: auto;
  gap: 8px;
}
.trial-panel .trial-tile { min-height: 64px; padding: 10px 12px; grid-template-columns: 44px minmax(0, 1fr) 34px; }
.trial-panel .trial-tile .tile-rune { width: 44px; height: 44px; font-size: 22px; }
.trial-panel .trial-tile .tile-copy { font-size: 20px; line-height: 1.2; }
.trial-result-scene .trial-panel .trial-tile { min-height: 54px; }
.trial-result-scene .trial-panel .trial-tile .tile-copy { font-size: 18px; }
.trial-result-scene .trial-tile.correct { transform: scale(1.03); }
.trial-panel .trial-countdown-track { position: absolute; }
.trial-result-scene .trial-result-panel { position: relative; left: auto; right: auto; bottom: auto; margin-top: auto; }

/* INITIATION: compact centered lower-third toast. */
.achievement-pill {
  left: 50%;
  right: auto;
  width: 840px;
  min-height: 132px;
  bottom: 72px;
  transform-origin: center bottom;
}
.achievement-copy b { font-size: 16px; letter-spacing: .12em; }
.achievement-copy strong { font-size: 26px; line-height: 1.25; }

/* RAID: a headline moment, Twitch purple, readable at stream size. */
.raid-banner {
  bottom: 64px;
  width: min(1040px, calc(100vw - 128px));
  gap: 22px;
  padding: 18px 28px 18px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 22px;
  background: linear-gradient(100deg, #772ce8 0%, #9146ff 45%, #5c16c5 100%);
  box-shadow: 0 24px 60px rgba(60, 10, 140, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.raid-banner::after {
  content: 'Type !lore to learn our legends';
  margin-left: auto;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(14, 10, 28, .92);
  color: var(--gold, #f5c451);
  font: 800 20px/1 var(--font-body, Inter, sans-serif);
  white-space: nowrap;
}
.raid-avatar-wrap { flex-basis: 84px; width: 84px; height: 84px; border: 3px solid #fff; background: #2b1650; color: #fff; font: 900 34px/1 var(--font-body, Inter, sans-serif); box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); }
.raid-banner-copy small { color: #f3e8ff; font: 800 15px/1.2 var(--font-body, Inter, sans-serif); letter-spacing: .22em; }
.raid-banner-copy strong { color: #fff; font: 800 40px/1.1 var(--font-body, Inter, sans-serif); letter-spacing: -.01em; }
.raid-banner-copy > span { color: #eadcff; font: 700 20px/1.2 var(--font-body, Inter, sans-serif); }

.raid-panel {
  top: 120px;
  right: 64px;
  width: 416px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 4px solid var(--gold, #f5c451);
  border-radius: 24px;
  background: linear-gradient(180deg, #1a1430, #0e0a1c);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.raid-panel-heading { margin-bottom: 14px; color: var(--gold, #f5c451); font: 800 26px/1.15 var(--display, 'Cinzel', serif); letter-spacing: .04em; }
.raid-lore-card { min-height: 96px; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #19142a; border-color: rgba(245, 196, 81, .35); }
.raid-lore-sigil { flex-basis: 52px; font-size: 40px; }
.raid-lore-copy strong { white-space: normal; font: 800 22px/1.2 var(--font-body, Inter, sans-serif); }
.raid-lore-copy span { -webkit-line-clamp: 2; font: 500 17px/1.35 var(--font-body, Inter, sans-serif); color: #c9c1e6; }
.raid-card-count { margin-top: 12px; font: 700 14px/1 var(--font-body, Inter, sans-serif); color: #a99fc8; }

/* RECALL: a confident chip, not a whisper. */
.recall-chip {
  top: 64px;
  right: 64px;
  width: 440px;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(245, 196, 81, .55);
  border-radius: 18px;
  background: linear-gradient(180deg, #221a3a, #120d22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 24px rgba(245, 196, 81, .2);
}
.recall-chip .chip-sigil { font-size: 34px; }
.recall-copy strong { font: 800 13px/1.1 var(--font-body, Inter, sans-serif); letter-spacing: .16em; }
.recall-title { font: 800 22px/1.2 var(--font-body, Inter, sans-serif); color: #fff; }
.recall-copy small { font: 700 15px/1.2 var(--font-body, Inter, sans-serif); color: #e9d6a6; }