/* css/dungeons.css — Dungeons (DECISIONS 291): the #dungeons page (js/ui/dungeons.js) and the
 * raid look of the battle screen (js/ui/battle.js: .battle-arena.dungeon, the raid strip, the
 * legendary's entrance, the catch meter). The arenas are the owner's paintings from
 * _idea_boss_pokemon/, scaled into assets/ui/dungeons/<art>.jpg. */

/* ------------------------------------------------------------------------ */
/* The arenas                                                                */
/* ------------------------------------------------------------------------ */

/* The painting comes in through --dg-image (assets/ui/dungeons/<art>.webp), set by js/ui/dungeons.js artEl and
 * js/ui/battle.js syncDungeonArt - the same file the World Boss, the PC wallpapers and the Trainer Card backgrounds
 * use. A new painting is a file plus its name in the data, no line here (the owner's 12 new arenas, 4 October,
 * DECISIONS 554); until then each picture had its own .art-<name> rule and one without stayed this dark fill. */
.battle-arena.dungeon,
.dg-art { background-color: #141a2c; background-image: var(--dg-image, none); background-size: cover; background-position: center 62%; background-repeat: no-repeat; image-rendering: auto; }

/* The painted floor is the stage: no Platinum grass bases, and a vignette so the boxes read. */
.battle-arena.dungeon .battle-platform { display: none; }
.battle-arena.dungeon::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 62% 48%, transparent 38%, rgba(6, 8, 20, 0.55) 100%);
}

/* The aura: the colour of the legendary's first type (--type-* from css/base.css). */
.battle-arena.dungeon { --aura: #d9c8ff; }
/* Two classes, like the default above, so the type colour wins by coming later (a single class
 * lost to `.battle-arena.dungeon` and every legendary glowed pale lavender, DECISIONS 296). */
.battle-arena.aura-normal { --aura: var(--type-normal); }
.battle-arena.aura-fire { --aura: var(--type-fire); }
.battle-arena.aura-water { --aura: var(--type-water); }
.battle-arena.aura-electric { --aura: var(--type-electric); }
.battle-arena.aura-grass { --aura: var(--type-grass); }
.battle-arena.aura-ice { --aura: var(--type-ice); }
.battle-arena.aura-fighting { --aura: var(--type-fighting); }
.battle-arena.aura-poison { --aura: var(--type-poison); }
.battle-arena.aura-ground { --aura: var(--type-ground); }
.battle-arena.aura-flying { --aura: var(--type-flying); }
.battle-arena.aura-psychic { --aura: var(--type-psychic); }
.battle-arena.aura-bug { --aura: var(--type-bug); }
.battle-arena.aura-rock { --aura: var(--type-rock); }
.battle-arena.aura-ghost { --aura: var(--type-ghost); }
.battle-arena.aura-dragon { --aura: var(--type-dragon); }
.battle-arena.aura-dark { --aura: var(--type-dark); }
.battle-arena.aura-steel { --aura: var(--type-steel); }

/* Bigger and glowing. On the stage, not the <img>: the golden / dark / frozen colouring is the
 * image's own filter, and `scale` / `filter` here compose with the sprite animations
 * (they use `translate` on the wrapper) instead of replacing them. The outline glow alone is thin
 * on a pixel sprite, so a soft halo in the same colour pulses behind it (::before). */
.battle-arena.dungeon .battle-sprite.opp {
  scale: 1.22;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 3px var(--aura)) drop-shadow(0 0 12px var(--aura));
  animation: legend-aura 2.6s ease-in-out infinite;
}
.battle-arena.dungeon .battle-sprite.opp .sprite-wrap::before {
  /* On the sprite's own wrapper, so the halo is centred on the legendary whatever its size; the
   * wrapper's transform makes it a stacking context, so z-index -1 lands behind the <img>. */
  content: '';
  position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--aura) 55%, transparent) 0%, color-mix(in srgb, var(--aura) 20%, transparent) 45%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  animation: legend-halo 2.6s ease-in-out infinite;
}
.battle-arena.dungeon.catch .battle-sprite.opp .sprite-wrap::before { opacity: 0.35; animation: none; }
@keyframes legend-aura {
  0%, 100% { filter: drop-shadow(0 0 3px var(--aura)) drop-shadow(0 0 10px var(--aura)); }
  50%      { filter: drop-shadow(0 0 5px var(--aura)) drop-shadow(0 0 20px var(--aura)); }
}
@keyframes legend-halo { 0%, 100% { opacity: 0.7; scale: 0.94; } 50% { opacity: 1; scale: 1.06; } }
/* The catch: exhausted - lower, dimmer, no more pulse. */
.battle-arena.dungeon.catch .battle-sprite.opp {
  scale: 1.1;
  animation: none;
  filter: drop-shadow(0 0 5px var(--aura)) brightness(0.82) saturate(0.8);
}

/* The foe's HP bar is the shared pot: thicker, gold-framed, a tick for every one of its bars. */
.battle-arena.dungeon:not(.catch) .battle-info.opp .hpbar {
  height: 11px;
  box-shadow: 0 0 0 1px rgba(255, 214, 102, 0.55), 0 0 10px rgba(255, 214, 102, 0.25);
}
.battle-arena.dungeon:not(.catch) .battle-info.opp .hpbar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to right, transparent 0 calc(var(--raid-bar, 100%) - 1px), rgba(8, 10, 22, 0.75) calc(var(--raid-bar, 100%) - 1px) var(--raid-bar, 100%));
}

/* ------------------------------------------------------------------------ */
/* The raid strip (battle) and the raid bar (page)                           */
/* ------------------------------------------------------------------------ */

.battle-raid { width: 100%; }
.raid-strip, .catch-meter {
  background: linear-gradient(180deg, rgba(38, 28, 70, 0.92), rgba(18, 16, 40, 0.92));
  border: 1px solid rgba(255, 214, 102, 0.45);
  border-radius: 10px 4px 10px 4px;
  padding: 5px 8px 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 0 18px rgba(255, 214, 102, 0.08);
  color: var(--text);
  font-size: 0.72rem;
}
.raid-strip-head, .catch-meter-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.raid-tag {
  flex: none;
  font-weight: 900; letter-spacing: 0.12em; font-size: 0.62rem;
  padding: 1px 6px; border-radius: 4px;
  color: #2a1a00; background: linear-gradient(180deg, #ffe28a, #f0b43c);
  box-shadow: 0 0 10px rgba(255, 200, 80, 0.45);
}
.raid-stage { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8dcff; font-weight: 600; }
.raid-clock { flex: none; font-variant-numeric: tabular-nums; font-weight: 800; color: #ffe28a; }
.raid-members { display: flex; flex-wrap: wrap; gap: 3px 5px; margin-top: 4px; }
.raid-member {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  max-width: 100%;
}
.raid-member .avatar { width: 18px; height: 18px; }
.raid-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9em; }
.raid-member-dmg { color: #ffe28a; font-variant-numeric: tabular-nums; }
.raid-member.me { background: rgba(157, 240, 171, 0.18); }
.raid-member.me .raid-member-name { color: #9df0ab; }
.raid-member.s-out { opacity: 0.55; }
.raid-member.s-out .raid-member-name { text-decoration: line-through; }

/* "-312 Berk": the others' hits rise over the legendary. */
.raid-float {
  position: absolute; z-index: 4; left: 64%; top: 40%;
  translate: -50% 0;
  pointer-events: none;
  font-weight: 900; font-size: 0.95rem; color: #ffe28a;
  text-shadow: 0 2px 0 #3b2200, 0 0 10px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  opacity: 0;
  animation: raid-float 1.9s ease-out both;
}
@keyframes raid-float {
  0%   { opacity: 0; translate: -50% 10px; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; translate: -50% -46px; }
}

/* The catch meter: a track with the zone where it can break (from `min`) and the fill. */
.catch-meter-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.catch-meter-note { flex: 1; text-align: right; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catch-meter.hot .catch-meter-note { color: #ffe28a; font-weight: 700; }
.catch-meter-track { position: relative; height: 10px; margin-top: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.catch-meter-zone { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(255, 214, 102, 0.22) 0 5px, rgba(255, 214, 102, 0.08) 5px 10px); }
.catch-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #9fb4ff, #ffffff); transition: width 0.5s ease; }
.catch-meter.hot .catch-meter-fill { background: linear-gradient(90deg, #f0b43c, #ffe28a); box-shadow: 0 0 12px rgba(255, 214, 102, 0.7); }

/* The catch menu: four ball cards like the Safari bar, the Dungeon Ball in gold. */
.dungeon-catch-menu .battle-secondary { margin-top: 6px; }
.dungeon-ball-btn.dungeon-ball { border-color: rgba(255, 214, 102, 0.7); box-shadow: inset 0 0 18px rgba(255, 214, 102, 0.18); }

/* Page raid bar */
.raid-bar { margin-top: 6px; }
.raid-bar-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; }
.raid-name { font-size: 0.9rem; }
.raid-level { color: var(--muted); }
.raid-hp-num { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.raid-bar .raid-clock { font-size: 0.85rem; }
.raid-track { position: relative; height: 14px; margin-top: 4px; border-radius: 999px; background: var(--hp-track); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 214, 102, 0.5); }
.raid-fill { height: 100%; background: var(--hp); transition: width 0.6s ease; }
.raid-fill.mid { background: var(--hp-mid); }
.raid-fill.low { background: var(--hp-low); }
.raid-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(8, 10, 22, 0.75); }

/* ------------------------------------------------------------------------ */
/* The legendary's entrance                                                  */
/* ------------------------------------------------------------------------ */

.legend-splash {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 12, 40, 0.55), rgba(2, 2, 10, 0.94) 70%);
  animation: legend-shake 0.5s 0.15s steps(2) 3, legend-in 0.25s ease-out both;
}
.legend-splash.leaving { animation: legend-out 0.25s ease-in both; }
.legend-flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, #fff 0%, var(--aura, #fff) 35%, transparent 70%);
  opacity: 0;
  animation: legend-flash 0.9s 0.6s ease-out both;
}
/* The silhouet and the reveal sit on the figure, not on the <img>: a golden / dark / frozen form
 * is the image's own `filter`, and a filter on the parent stacks on top of it instead of
 * replacing it (DECISIONS 296). */
.legend-figure {
  position: relative;
  filter: brightness(0) drop-shadow(0 0 16px var(--aura, #fff));
  animation: legend-reveal 1.4s 0.9s ease-out both;
}
.legend-sprite { display: block; height: clamp(80px, 15vh, 136px); width: auto; image-rendering: pixelated; }
.legend-text { position: relative; text-align: center; padding: 0 12px; }
.legend-kicker { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: #ffe28a; opacity: 0; animation: legend-text 0.5s 1.1s ease-out both; }
.legend-name {
  font-size: clamp(1.6rem, 6vw, 2.8rem); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 18px var(--aura, #fff), 0 3px 0 rgba(0, 0, 0, 0.6);
  opacity: 0; animation: legend-text 0.6s 1.25s ease-out both;
}
.legend-name .variant-word { text-transform: uppercase; }
.legend-sub { font-size: 0.8rem; color: #d8d0f0; opacity: 0; animation: legend-text 0.5s 1.45s ease-out both; }
@keyframes legend-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes legend-out { to { opacity: 0; } }
@keyframes legend-shake { 0% { translate: -4px 2px; } 50% { translate: 4px -2px; } 100% { translate: 0 0; } }
@keyframes legend-flash { 0% { opacity: 0; } 12% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes legend-reveal {
  0%   { filter: brightness(0) drop-shadow(0 0 16px var(--aura, #fff)); scale: 0.9; }
  100% { filter: brightness(1) drop-shadow(0 0 22px var(--aura, #fff)); scale: 1; }
}
@keyframes legend-text { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
/* Reduced motion: a still card with the legendary in full colour. */
.legend-splash.static, .legend-splash.static * { animation: none !important; }
.legend-splash.static .legend-figure { filter: drop-shadow(0 0 18px var(--aura, #fff)); }
.legend-splash.static .legend-kicker, .legend-splash.static .legend-name, .legend-splash.static .legend-sub { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .battle-arena.dungeon .battle-sprite.opp, .battle-arena.dungeon .battle-sprite.opp .sprite-wrap::before, .raid-float { animation: none !important; }
  .raid-float { opacity: 1; }
  .raid-fill, .catch-meter-fill { transition: none; }
}

/* ------------------------------------------------------------------------ */
/* The #dungeons page                                                        */
/* ------------------------------------------------------------------------ */

.dg-root { display: flex; flex-direction: column; gap: 12px; }

.dg-art { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.dg-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 26, 0.55)); pointer-events: none; }
.dg-aura {
  position: absolute; left: 50%; bottom: 8%; width: 70%; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, 0.45), transparent 65%);
  animation: dg-glow 2.8s ease-in-out infinite;
}
/* The shadow sits on a wrapper, not on the <img>: a golden / dark / frozen form is the image's own
 * `filter`, which a filter here would replace (DECISIONS 296). */
.dg-sprite-wrap { position: relative; z-index: 1; display: inline-flex; margin-bottom: 6%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
.dg-sprite { width: 128px; height: 128px; object-fit: contain; image-rendering: pixelated; }
.dg-art.exhausted .dg-sprite-wrap { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)) brightness(0.8) saturate(0.8); }
@keyframes dg-glow { 0%, 100% { opacity: 0.6; scale: 0.94; } 50% { opacity: 1; scale: 1.04; } }

/* Your raid / your catch: art on the left, the story on the right. */
.dg-raid { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255, 214, 102, 0.35); }
.dg-raid .dg-art { min-height: 220px; }
.dg-raid-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dg-kicker { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ffe28a; }
.dg-name { font-size: 1.15rem; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.dg-level { color: var(--muted); font-size: 0.85rem; }
.dg-types { display: flex; gap: 4px; flex-wrap: wrap; }
.dg-clock { font-size: 0.85rem; color: var(--muted); }
.dg-clock b { color: #ffe28a; font-variant-numeric: tabular-nums; font-size: 1rem; }
.dg-line { margin: 2px 0 0; font-size: 0.85rem; color: #d8dce8; }
.dg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; align-items: center; }
.dg-go { min-width: 170px; }
.dg-catch { border-color: rgba(255, 214, 102, 0.7); box-shadow: var(--shadow), 0 0 22px rgba(255, 214, 102, 0.18); }

.dg-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.dg-fact { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); white-space: nowrap; }
.dg-fact.gold { background: rgba(255, 214, 102, 0.18); color: #ffe28a; font-weight: 700; }
.dg-fact.muted { color: var(--muted); }

/* How it works */
.dg-how { padding: 10px 12px; }
.dg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dg-step { display: grid; grid-template-columns: auto auto 1fr; gap: 6px; align-items: start; }
.dg-step-no { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; background: var(--accent-soft); color: var(--accent-light); }
.dg-step-icon { color: #ffe28a; }
.dg-step-title { font-weight: 700; font-size: 0.82rem; }
.dg-step-text { font-size: 0.74rem; color: var(--muted); }

/* The stage cards */
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.dg-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: var(--panel-border); box-shadow: var(--shadow); }
.dg-card .dg-art { height: 150px; }
.dg-card .dg-sprite { width: 104px; height: 104px; }
.dg-card.locked .dg-art { filter: grayscale(0.7) brightness(0.7); }
.dg-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dg-blurb { margin: 0; font-size: 0.78rem; color: #c9cfdd; font-style: italic; }
.dg-rows { display: flex; flex-direction: column; gap: 4px; }
.dg-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.78rem; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.dg-row.s-lobby { box-shadow: inset 3px 0 0 #ffe28a; }
.dg-row.s-fighting { box-shadow: inset 3px 0 0 var(--accent); }
.dg-row.mine { background: rgba(157, 240, 171, 0.1); }
.dg-row-who { font-weight: 700; }
.dg-row-count { color: var(--muted); }
.dg-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.dg-row > .btn, .dg-row-you { margin-left: auto; }
.dg-row-you { color: #9df0ab; }
.dg-foot { margin-top: auto; }
.dg-foot-line { font-size: 0.78rem; color: var(--muted); }
.dg-foot-line.ok { color: #9df0ab; }
/* "Legendaries caught today: 1 of 2" (owner, 25 September): a slim strip above the rules; at the limit
   it turns amber and says what is left to do. */
.dg-day {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--hair, rgba(255, 255, 255, 0.1));   /* a dark strip on the light wallpaper (MASTER LY-07) */
  font-size: 0.82rem;
}
.dg-day .dg-day-count { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.dg-day .dg-day-note { color: var(--muted); }
.dg-day.full { border-color: rgba(255, 176, 32, 0.45); background: rgba(255, 176, 32, 0.08); }
.dg-day.full .dg-day-count { color: #ffc766; }
.dg-open { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* "Open a raid" and "Go alone" under each other (DECISIONS 325): the raid stays the red main button,
   going alone is the quieter second choice - the hard way, like a solo raid in the games. */
.dg-foot-btns { display: flex; flex-direction: column; gap: 6px; }
.dg-solo { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text, #fff); }
.dg-solo:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 720px) {
  .dg-raid { grid-template-columns: 1fr; }
  .dg-raid .dg-art { min-height: 170px; }
  .dg-steps { grid-template-columns: 1fr 1fr; }
  .dg-grid { grid-template-columns: 1fr; }
  .dg-go { flex: 1; }
  .raid-member-name { max-width: 6em; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-aura { animation: none; }
}

/* ------------------------------------------------------------------------ */
/* Raids, gaver (DECISIONS 336): richer strip, the raid tribune, the endings  */
/* ------------------------------------------------------------------------ */

/* The strip's trainer chips: avatar, name, damage, and a thin bar for their share of all damage. */
.raid-member { position: relative; overflow: hidden; padding: 2px 7px 3px 3px; }
.raid-member .avatar { flex: none; border-radius: 50%; background: rgba(0, 0, 0, 0.25); }
.raid-member-share {
  position: absolute; left: 0; bottom: 0; height: 2px; width: var(--share, 0%);
  background: linear-gradient(90deg, #f0b43c, #ffe28a);
  transition: width 400ms ease;
}
.raid-member.me .raid-member-share { background: linear-gradient(90deg, #4fbf6a, #9df0ab); }
.raid-member.top { box-shadow: inset 0 0 0 1px rgba(255, 214, 102, 0.6), 0 0 10px rgba(255, 200, 80, 0.25); }
.raid-crown { display: inline-flex; color: #ffd24a; filter: drop-shadow(0 0 3px rgba(255, 200, 80, 0.7)); }
.raid-member.s-out .avatar { filter: grayscale(1); }

/* The tribune: the stands of a raid fight you watch. */
.watch-bar.raid-watch { gap: 10px; }
.raid-tribune {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(38, 28, 70, 0.85), rgba(18, 16, 40, 0.85));
  border: 1px solid rgba(255, 214, 102, 0.35);
  box-shadow: inset 0 0 22px rgba(255, 214, 102, 0.07);
}
.raid-tribune .raid-bar { margin: 0; }
.raid-board { display: flex; flex-direction: column; gap: 4px; }
.raid-board-row {
  display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto minmax(60px, 120px) 64px;
  align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
}
.raid-board-row.watched { box-shadow: inset 3px 0 0 #ffe28a; background: rgba(255, 226, 138, 0.08); }
.raid-board-row.me .raid-board-name { color: #9df0ab; }
.raid-board-row.s-out { opacity: 0.6; }
.raid-board-row.s-out .avatar { filter: grayscale(1); }
.raid-board-rank { text-align: center; font-weight: 800; color: var(--muted); display: inline-flex; justify-content: center; }
.raid-board-rank span { color: #ffd24a; display: inline-flex; }
.raid-board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.raid-board-you { font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.raid-board-status { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.raid-board-status.s-fighting { background: rgba(79, 191, 106, 0.22); color: #9df0ab; }
.raid-board-status.s-done { background: rgba(255, 214, 102, 0.22); color: #ffe28a; }
.raid-board-status.s-out { background: rgba(214, 69, 69, 0.2); color: #ffb3b3; }
.raid-board-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.raid-board-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f0b43c, #ffe28a); transition: width 400ms ease; }
.raid-board-row.me .raid-board-fill { background: linear-gradient(90deg, #4fbf6a, #9df0ab); }
.raid-board-dmg { text-align: right; color: #ffe28a; font-variant-numeric: tabular-nums; }
.raid-hits { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.78rem; }
.raid-hits-label { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.raid-hit { padding: 1px 7px; border-radius: 999px; background: rgba(255, 214, 102, 0.14); color: #ffe28a; font-weight: 700; font-variant-numeric: tabular-nums; animation: raid-hit-in 380ms ease both; }
.raid-hit:first-of-type { background: rgba(255, 214, 102, 0.28); }
.raid-hit.me { background: rgba(79, 191, 106, 0.2); color: #9df0ab; }
@keyframes raid-hit-in { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.raid-you { font-size: 0.82rem; color: #9df0ab; }
.raid-switch { display: flex; flex-wrap: wrap; gap: 6px; }

/* The end of a fight you watched: RAID CLEARED! and your catch, flew away, or switch to the next. */
.raid-watch-end {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  padding: 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(38, 28, 70, 0.92), rgba(18, 16, 40, 0.92));
  border: 1px solid rgba(255, 214, 102, 0.35);
}
.raid-watch-head { text-align: center; font-size: 1.5rem; font-weight: 900; letter-spacing: 0.04em; color: #e8dcff; }
.raid-watch-end.win .raid-watch-head {
  font-size: 1.9rem;
  background: linear-gradient(90deg, #f0b43c, #fff4c2, #f0b43c); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: raid-cleared-shine 2.4s linear infinite;
}
.raid-watch-end.escape .raid-watch-head { color: #b8c0d4; }
.raid-watch-sub { text-align: center; color: var(--muted); margin-top: -6px; }
.raid-watch-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.raid-catch-btn { box-shadow: 0 0 0 2px rgba(255, 214, 102, 0.45), 0 0 22px rgba(255, 200, 80, 0.35); animation: raid-catch-pulse 1.8s ease-in-out infinite; }
@keyframes raid-cleared-shine { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes raid-catch-pulse { 50% { box-shadow: 0 0 0 3px rgba(255, 214, 102, 0.65), 0 0 30px rgba(255, 200, 80, 0.5); } }

/* "Spectating bugN in 5…": the countdown to the stands after your team fell. */
.raid-spectate-btn { font-variant-numeric: tabular-nums; border-color: rgba(255, 214, 102, 0.55); color: #ffe28a; }
.raid-stay-btn { align-self: center; }

@media (max-width: 720px) {
  .raid-board-row { grid-template-columns: 20px 24px minmax(0, 1fr) auto 52px; gap: 6px; }
  .raid-board-row .avatar.sm { width: 24px; height: 24px; }
  .raid-board-bar { display: none; }
  .raid-watch-head { font-size: 1.25rem; }
  .raid-watch-end.win .raid-watch-head { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .raid-hit, .raid-catch-btn, .raid-watch-end.win .raid-watch-head { animation: none; }
}