/* The raids (js/raid.js): MOTHER GLOAM and THE PAPER DRAGON. The city-wide
   call, the boss bar, the board, the shouts, the end card and the dragon's
   confetti wash. Same glass-and-gold skin as the HUD. */

#raid { --raid-hp: #b98aff; --raid-hp2: #ff5c8a; }

/* ---------------------------------------------------------------- the call */
.raid-call {
  position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 41;
  background: var(--ww-glass-hi); border: 1px solid var(--ww-line-hi); box-shadow: var(--ww-shadow);
  padding: 10px 16px 12px; text-align: center; min-width: 340px; max-width: calc(100vw - 32px);
  font-family: var(--ww-ui); color: var(--ww-cream); animation: raid-drop 260ms ease-out;
}
.raid-call .rc-kick { font-weight: 700; font-size: 12px; letter-spacing: 3px; color: var(--ww-pink-soft); }
.raid-call .rc-name { font-family: var(--ww-display); font-size: 30px; letter-spacing: 1.5px; line-height: 1.05; color: #e8d9ff; text-shadow: 0 0 18px rgba(185, 138, 255, 0.55); }
.raid-call .rc-sub { font-size: 16px; font-weight: 600; letter-spacing: 1px; color: var(--ww-dim); margin-top: 2px; }
.raid-call .rc-clock { color: var(--ww-gold); font-size: 20px; font-variant-numeric: tabular-nums; margin-left: 4px; }
.raid-call.soon .rc-clock { color: #ff7a8a; animation: raid-pulse 1s ease-in-out infinite; }
.raid-call .rc-go {
  margin-top: 8px; font-family: var(--ww-ui); font-weight: 700; font-size: 14px; letter-spacing: 2px;
  background: var(--ww-gold); color: #14030a; border: 0; padding: 5px 14px; cursor: pointer; pointer-events: auto;
}
.raid-call .rc-go:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------------- the bar */
.raid-bar {
  position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 41;
  width: min(560px, calc(100vw - 32px)); pointer-events: none;
  font-family: var(--ww-ui); color: var(--ww-cream); animation: raid-drop 260ms ease-out;
}
.raid-bar .rb-head { display: flex; align-items: baseline; gap: 10px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.raid-bar .rb-name { font-family: var(--ww-display); font-size: 26px; letter-spacing: 1.5px; color: #efe3ff; }
.raid-bar .rb-title { font-weight: 700; font-size: 13px; letter-spacing: 3px; color: var(--raid-hp); }
.raid-bar .rb-phase { margin-left: auto; font-weight: 700; font-size: 15px; letter-spacing: 2px; color: var(--ww-gold); }
.raid-bar[data-phase="1"] { --raid-hp: #9fb8ff; }
.raid-bar[data-phase="2"] { --raid-hp: #ff8a3a; --raid-hp2: #ffcf5a; }
.raid-bar .rb-track {
  position: relative; height: 18px; margin-top: 3px; background: rgba(8, 5, 12, 0.85);
  border: 1px solid var(--ww-line-hi); box-shadow: var(--ww-shadow); overflow: hidden;
}
.raid-bar .rb-fill, .raid-bar .rb-lag { position: absolute; left: 0; top: 0; bottom: 0; }
.raid-bar .rb-lag { background: rgba(255, 240, 220, 0.75); }
.raid-bar .rb-fill { background: linear-gradient(180deg, var(--raid-hp2), var(--raid-hp) 60%); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25); transition: width 90ms linear; }
.raid-bar .rb-pip { position: absolute; top: -1px; bottom: -1px; width: 3px; margin-left: -1px; background: #07060b; box-shadow: 0 0 0 1px rgba(255, 200, 60, 0.6); }
.raid-bar .rb-stun {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-weight: 700; font-size: 13px; letter-spacing: 3px; color: #14030a; text-shadow: 0 0 6px #fff;
}
.raid-bar.stunned .rb-track { border-color: var(--ww-gold); box-shadow: 0 0 18px rgba(255, 200, 60, 0.55); }
.raid-bar.stunned .rb-fill { filter: brightness(1.25); }
.raid-bar.immune .rb-fill { filter: grayscale(0.7) brightness(0.8); }
.raid-bar .rb-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); }
.raid-bar .rb-hint { flex: 1; color: var(--ww-cream); }
.raid-bar.stunned .rb-hint { color: var(--ww-gold); font-weight: 700; }
.raid-bar .rb-count { color: var(--ww-dim); white-space: nowrap; }
.raid-bar .rb-lamps { display: inline-flex; gap: 4px; }
.raid-bar .rb-lamps i { width: 10px; height: 14px; background: #2a2430; border: 1px solid rgba(255, 200, 60, 0.4); }
.raid-bar .rb-lamps i.half { background: linear-gradient(0deg, #ffb454 50%, #2a2430 50%); }
.raid-bar .rb-lamps i.on { background: #ffd27a; box-shadow: 0 0 10px #ffc24a; }

/* ---------------------------------------------------------------- the board */
.raid-board {
  position: fixed; right: 20px; bottom: 112px; z-index: 40; width: 220px; pointer-events: none;
  background: var(--ww-glass); border: 1px solid var(--ww-line); padding: 8px 10px;
  font-family: var(--ww-ui); color: var(--ww-cream);
}
.raid-board .rbd-head { font-weight: 700; font-size: 12px; letter-spacing: 3px; color: var(--ww-gold); margin-bottom: 4px; }
.raid-board ol { list-style: none; counter-reset: rb; }
.raid-board li { counter-increment: rb; display: flex; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.raid-board li::before { content: counter(rb); color: var(--ww-dim); width: 12px; }
.raid-board li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-board li b { color: #e8d9ff; font-variant-numeric: tabular-nums; }
.raid-board li.me span { color: var(--ww-gold); }

/* ---------------------------------------------------------------- shouts */
.raid-shout {
  position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 42; pointer-events: none;
  text-align: center; white-space: nowrap; max-width: calc(100vw - 32px);
}
.raid-shout .rs-big { font-family: var(--ww-display); font-size: 54px; letter-spacing: 2px; color: #fff3dc; text-shadow: 0 0 24px rgba(185, 138, 255, 0.9), 0 4px 0 #2a1638, 0 8px 24px rgba(0, 0, 0, 0.7); }
.raid-shout .rs-small { font-family: var(--ww-ui); font-size: 19px; font-weight: 600; letter-spacing: 1.5px; color: var(--ww-cream); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); white-space: normal; }
.raid-shout.go { animation: raid-slam 420ms cubic-bezier(0.2, 1.6, 0.4, 1); }

/* ---------------------------------------------------------------- the end */
.raid-end {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60;
  width: min(520px, calc(100vw - 32px)); background: var(--ww-glass-hi); border: 1px solid var(--ww-line-hi);
  box-shadow: var(--ww-shadow), 0 0 60px rgba(185, 138, 255, 0.25); padding: 18px 20px; text-align: center;
  font-family: var(--ww-ui); color: var(--ww-cream); animation: raid-slam 420ms cubic-bezier(0.2, 1.6, 0.4, 1);
}
.raid-end .re-kick { font-weight: 700; font-size: 12px; letter-spacing: 3px; color: var(--ww-dim); }
.raid-end .re-name { font-family: var(--ww-display); font-size: 40px; letter-spacing: 1.5px; color: var(--ww-gold); line-height: 1.1; }
.raid-end .re-line { font-size: 16px; color: var(--ww-dim); margin-bottom: 10px; }
.raid-end .re-table { width: 100%; border-collapse: collapse; font-size: 16px; font-weight: 600; }
.raid-end .re-table td { padding: 4px 6px; border-top: 1px solid var(--ww-line); text-align: left; }
.raid-end .re-table td.r { color: var(--ww-dim); width: 34px; }
.raid-end .re-table td.d, .raid-end .re-table td.l, .raid-end .re-table td.p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.raid-end .re-table td.p { color: var(--money, #6dff8e); }
.raid-end .re-table small { color: var(--ww-dim); font-size: 11px; letter-spacing: 1px; }
.raid-end .re-table tr.me td.n { color: var(--ww-gold); }
.raid-end .re-you { margin: 12px 0 10px; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: #6dff8e; }
.raid-end .re-close { pointer-events: auto; }

/* ---------------------------------------------------------------- numbers */
.raid-nums { position: fixed; inset: 0; pointer-events: none; z-index: 39; }
.raid-nums .rn { position: absolute; left: 0; top: 0; font-family: var(--ww-display); letter-spacing: 1px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); will-change: transform; }
.raid-nums .rn.chip { font-size: 14px; color: #c9b8e8; }
.raid-nums .rn.hit { font-size: 20px; color: #fff3dc; }
.raid-nums .rn.crit { font-size: 28px; color: var(--ww-gold); }

/* ---------------------------------------------------------------- the dragon */
/* Lacquer red and gold instead of Gloam's lilac. */
.raid-bar[data-boss="dragon"] { --raid-hp: #e8402e; --raid-hp2: #ffcf5a; }
.raid-bar[data-boss="dragon"][data-phase="1"] { --raid-hp: #ff5d8f; --raid-hp2: #ffd166; }
.raid-bar[data-boss="dragon"][data-phase="2"] { --raid-hp: #ff7a2a; --raid-hp2: #ffe08a; }
.raid-bar[data-boss="dragon"] .rb-name { color: #ffe9c9; }
.raid-call[data-boss="dragon"] .rc-name { color: #ffe0c0; text-shadow: 0 0 18px rgba(255, 90, 50, 0.6); }
.raid-end[data-boss="dragon"] { box-shadow: var(--ww-shadow), 0 0 60px rgba(255, 110, 50, 0.3); }
/* Firework carts: a red crate, a sparking fuse when armed, ash when spent. */
.raid-bar[data-boss="dragon"] .rb-lamps i { width: 14px; height: 11px; background: #3a1c1a; border-color: rgba(255, 140, 60, 0.5); }
.raid-bar[data-boss="dragon"] .rb-lamps i.half { background: linear-gradient(90deg, #ff8a3d 50%, #3a1c1a 50%); }
.raid-bar[data-boss="dragon"] .rb-lamps i.fuse { background: #ff5a2a; box-shadow: 0 0 10px #ffb43a; animation: raid-pulse 0.5s ease-in-out infinite; }
.raid-bar[data-boss="dragon"] .rb-lamps i.spent { background: #241a1a; border-color: rgba(120, 100, 90, 0.4); }
/* Phase III: the two halves, side by side under the main bar. */
.raid-bar .rb-twins { display: flex; gap: 10px; margin-top: 4px; }
.raid-bar .rb-twin { position: relative; flex: 1; height: 14px; background: rgba(8, 5, 12, 0.85); border: 1px solid var(--ww-line); overflow: hidden; }
.raid-bar .rb-twin i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ffe08a, #ff7a2a 70%); }
.raid-bar .rb-twin b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: 2px; color: #14030a; text-shadow: 0 0 4px #fff; }
.raid-bar .rb-twin.burn { border-color: var(--ww-gold); box-shadow: 0 0 10px rgba(255, 160, 60, 0.6); }
.raid-bar .rb-twin.down { border-color: #ff5470; }
.raid-bar .rb-twin.down b { color: #ff9aa8; text-shadow: 0 1px 3px #000; animation: raid-pulse 0.8s ease-in-out infinite; }

/* Confetti breath: a colour wash thick at the edges and thinner in the
   middle, so your own character stays findable; confetti drifts through it
   on a canvas (none with reduced motion). No flashing, no spinning. */
.raid-confetti {
  position: fixed; inset: 0; z-index: 38; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 30% at 50% 52%, rgba(255, 240, 220, 0.18), rgba(255, 240, 220, 0) 70%),
    radial-gradient(circle at 18% 22%, rgba(255, 93, 143, 0.75), rgba(255, 93, 143, 0) 42%),
    radial-gradient(circle at 82% 20%, rgba(255, 209, 102, 0.75), rgba(255, 209, 102, 0) 42%),
    radial-gradient(circle at 80% 82%, rgba(61, 214, 198, 0.7), rgba(61, 214, 198, 0) 44%),
    radial-gradient(circle at 20% 80%, rgba(155, 123, 255, 0.72), rgba(155, 123, 255, 0) 44%),
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 180, 120, 0.28), rgba(255, 140, 90, 0.62));
  transition: opacity 200ms linear;
}
.raid-confetti canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

#raid .hidden { display: none !important; }

@keyframes raid-drop { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes raid-slam { from { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes raid-pulse { 50% { opacity: 0.55; } }

body.mobile .raid-call, body.mobile .raid-bar { top: 74px; }
body.mobile .raid-call { min-width: 0; padding: 8px 12px; }
body.mobile .raid-call .rc-name { font-size: 22px; }
body.mobile .raid-bar .rb-name { font-size: 20px; }
body.mobile .raid-bar .rb-title { display: none; }
body.mobile .raid-bar .rb-foot { font-size: 12px; }
body.mobile .raid-board { display: none; }
body.mobile .raid-shout .rs-big { font-size: 34px; }
body.mobile .raid-shout .rs-small { font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .raid-call, .raid-bar, .raid-shout.go, .raid-end, .raid-call.soon .rc-clock,
  .raid-bar .rb-lamps i.fuse, .raid-bar .rb-twin.down b { animation: none !important; }
}