/* World Boss raid: raid.html screen (.rd-*), the in-battle HUD + results (battle.html?mode=raid), the lobby row,
   and the Titan Crest flair (World Boss Top 10 reward).
   Landscape 16:9 frame: --u / --fw / --fh come from css/landscape.css (1u = 1% of the frame height). */

/* ============================================================== raid.html */
body.raid-page { margin: 0; font-family: 'PD Rarity', 'Gilroy', 'M PLUS 1p', 'Segoe UI', system-ui, sans-serif; color: #fff; background: #0b1022; user-select: none; -webkit-user-select: none; }
.raid-page * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.raid-page button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.raid-page img { -webkit-user-drag: none; }
.raid-page .hidden { display: none !important; }

.rd-backdrop { position: fixed; inset: 0; background: #0b1022 center 30% / cover no-repeat; filter: blur(40px) saturate(1.3) brightness(0.45); transform: scale(1.15); }
.rd-app { --bc: #f0642d; position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--fw); height: var(--fh); margin: auto 0; overflow: hidden;
  display: grid; grid-template-rows: calc(var(--u) * 11) auto minmax(0, 1fr); background: #0d1328; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
.rd-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rd-bg-art { position: absolute; inset: -6%; background: center 22% / cover no-repeat; filter: blur(calc(var(--u) * 2.4)) saturate(1.25) brightness(0.55); transform: scale(1.1); animation: rdBreathe 9s ease-in-out infinite; }
.rd-bg::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 18% 60%, color-mix(in srgb, var(--bc) 38%, transparent), transparent 70%),
              radial-gradient(ellipse 80% 60% at 70% 0%, rgba(120, 90, 255, 0.18), transparent 70%),
              linear-gradient(180deg, rgba(9, 13, 30, 0.35), rgba(9, 13, 30, 0.82) 70%, #090d1e); }
.rd-embers { position: absolute; inset: 0; z-index: 1; opacity: 0.55;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--bc) 80%, #fff) 0 1.5px, transparent 2.5px), radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px);
  background-size: calc(var(--u) * 17) calc(var(--u) * 19), calc(var(--u) * 23) calc(var(--u) * 13); animation: rdEmbers 14s linear infinite; }
@keyframes rdEmbers { to { background-position: calc(var(--u) * 4) calc(var(--u) * -76), calc(var(--u) * -6) calc(var(--u) * -52); } }
@keyframes rdBreathe { 50% { transform: scale(1.16); } }

/* header */
.rd-top { position: relative; z-index: 2; display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: 0 calc(var(--u) * 3.5); }
.rd-back { flex: 0 0 auto; width: calc(var(--u) * 7.4); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); transition: transform 0.12s; }
.rd-back svg { width: 52%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rd-back:active { transform: scale(0.94); }
.rd-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rd-title b { font-size: calc(var(--u) * 4.6); font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; background: linear-gradient(180deg, #fff, #ffd9a8); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)); line-height: 1.05; }
.rd-title small { font-size: calc(var(--u) * 2.2); color: rgba(255, 255, 255, 0.7); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-chip { display: flex; align-items: center; gap: calc(var(--u) * 1.2); height: calc(var(--u) * 6.4); padding: 0 calc(var(--u) * 2.6); border-radius: 99px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); font-size: calc(var(--u) * 2.6); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; backdrop-filter: blur(10px); }
.rd-chip i { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: 50%; background: #9aa6c4; }
.rd-chip.open { background: linear-gradient(90deg, #ff3d5a, #ff7a2f); border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 calc(var(--u) * 3) rgba(255, 70, 70, 0.55); }
.rd-chip.open i { background: #fff; animation: rdBlink 1s infinite; }
.rd-chip.upcoming i { background: #ffc531; }
.rd-chip.defeated { background: linear-gradient(90deg, #f7b500, #ffdd55); color: #3b2500; }
@keyframes rdBlink { 50% { opacity: 0.25; } }

/* giant HP bar */
.rd-hp { position: relative; z-index: 2; margin: 0 calc(var(--u) * 3.5); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 3); background: rgba(10, 14, 32, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); }
.rd-hp-head { display: flex; align-items: center; gap: calc(var(--u) * 1.4); margin-bottom: calc(var(--u) * 1); }
.rd-type { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4)); }
.rd-boss-name { font-size: calc(var(--u) * 3.6); font-weight: 900; text-shadow: 0 2px 10px color-mix(in srgb, var(--bc) 70%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-weak { display: flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.5) calc(var(--u) * 1.6); border-radius: 99px; background: rgba(255, 255, 255, 0.14); font-size: calc(var(--u) * 2.2); font-weight: 700; white-space: nowrap; }
.rd-weak img { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.rd-hp-num { margin-left: auto; font-size: calc(var(--u) * 2.5); color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-hp-num b { color: #fff; font-size: calc(var(--u) * 3.1); font-weight: 900; }
.rd-bar { position: relative; height: calc(var(--u) * 4.2); border-radius: 99px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.rd-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; width: 100%; }
.rd-bar .ghost { background: #ffe9a8; transition: width 0.9s cubic-bezier(.3, 0, .2, 1); }
.rd-bar .fill { background: linear-gradient(180deg, #ff6b6b, #e5203f 55%, #a70d2a); transition: width 0.4s cubic-bezier(.2, .8, .3, 1);
  box-shadow: inset 0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.35), 0 0 calc(var(--u) * 2) rgba(255, 50, 70, 0.6); }
.rd-bar .fill::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(115deg, transparent 0 calc(var(--u) * 2.4), rgba(255, 255, 255, 0.12) calc(var(--u) * 2.4) calc(var(--u) * 3.2)); animation: rdStripes 1.6s linear infinite; }
@keyframes rdStripes { to { background-position: calc(var(--u) * 8.5) 0; } }
.rd-bar-pct { position: absolute; right: calc(var(--u) * 1.6); top: 50%; transform: translateY(-50%); font-size: calc(var(--u) * 2.3); font-weight: 900; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.rd-drop { position: absolute; top: -10%; font-style: normal; font-weight: 900; font-size: calc(var(--u) * 3); color: #ffe066; text-shadow: 0 2px 0 #a3002a, 0 0 10px rgba(255, 60, 60, 0.8); animation: rdDrop 1.4s ease-out forwards; pointer-events: none; white-space: nowrap; }
@keyframes rdDrop { 0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; } 15% { transform: translate(-50%, -60%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -190%) scale(1); opacity: 0; } }
.rd-hp.hit { animation: rdShake 0.45s; }
@keyframes rdShake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.rd-hp-foot { margin-top: calc(var(--u) * 0.8); font-size: calc(var(--u) * 2.1); color: rgba(255, 255, 255, 0.65); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* body: boss | centre | side */
.rd-body { position: relative; z-index: 2; min-height: 0; display: grid; grid-template-columns: calc(var(--u) * 37) minmax(0, 1fr) calc(var(--u) * 58); gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 2) calc(var(--u) * 3.5) calc(var(--u) * 2.6); }
.rd-boss { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.6); }
.rd-card { position: relative; height: calc(var(--u) * 34); aspect-ratio: 367 / 512; border-radius: calc(var(--u) * 1.8); flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 calc(var(--u) * 5) color-mix(in srgb, var(--bc) 75%, transparent), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.55); animation: rdFloat 5s ease-in-out infinite; }
.rd-card img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
@keyframes rdFloat { 50% { translate: 0 calc(var(--u) * -1); } }
.rd-moves { width: 100%; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); }
.rd-moves-h { font-size: calc(var(--u) * 2); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.rd-move { display: grid; grid-template-columns: calc(var(--u) * 7) 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: calc(var(--u) * 1); padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.6); background: rgba(255, 255, 255, 0.08); }
.rd-move .cost { display: flex; gap: 2px; grid-row: 1 / 3; }
.rd-move .cost i { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9c3b3); }
.rd-move b { font-size: calc(var(--u) * 2.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-move em { font-style: normal; font-size: calc(var(--u) * 2.8); font-weight: 900; grid-row: 1 / 3; grid-column: 3; color: #ffcf5a; }
.rd-move small { grid-column: 2; font-size: calc(var(--u) * 1.9); color: rgba(255, 255, 255, 0.6); }
.rd-tip { margin: calc(var(--u) * 0.4) 0 0; font-size: calc(var(--u) * 2); color: rgba(255, 255, 255, 0.75); }
.rd-tip b { color: #ffcf5a; }

.rd-center { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.6); }
.rd-stats { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.rd-stats > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--u) * 1.4) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 2.2); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); min-width: 0; }
.rd-stats b { font-size: calc(var(--u) * 3.8); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rd-stats > div:first-child b { color: #ffcf5a; }
.rd-stats small { font-size: calc(var(--u) * 2.1); color: rgba(255, 255, 255, 0.62); font-weight: 600; text-align: center; line-height: 1.2; }

.rd-attack { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1); }
.rd-attack.gated { display: none; }
.rd-atk { position: relative; width: calc(var(--u) * 31); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transition: transform 0.15s, filter 0.2s; }
.rd-atk::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ff8a5c, #e5203f 55%, #7d0b26); box-shadow: inset 0 calc(var(--u) * 1) calc(var(--u) * 1.6) rgba(255, 255, 255, 0.35), inset 0 calc(var(--u) * -1.4) calc(var(--u) * 2) rgba(0, 0, 0, 0.35), 0 calc(var(--u) * 1.4) calc(var(--u) * 3.4) rgba(229, 32, 63, 0.55); }
.rd-atk.ready::before { animation: rdPulse 1.6s ease-in-out infinite; }
.rd-atk.ready:hover { transform: scale(1.04); }
.rd-atk.ready:active { transform: scale(0.96); }
.rd-atk:disabled { cursor: default; }
.rd-atk:disabled::before { filter: grayscale(0.85) brightness(0.7); }
.rd-atk.cooling::before { filter: grayscale(0.4) brightness(0.8); }
@keyframes rdPulse { 50% { box-shadow: inset 0 calc(var(--u) * 1) calc(var(--u) * 1.6) rgba(255, 255, 255, 0.35), inset 0 calc(var(--u) * -1.4) calc(var(--u) * 2) rgba(0, 0, 0, 0.35), 0 0 0 calc(var(--u) * 2) rgba(255, 80, 80, 0.25), 0 0 calc(var(--u) * 6) rgba(255, 60, 60, 0.8); } }
.rd-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rd-ring circle { fill: none; stroke-width: 6; }
.rd-ring .trk { stroke: rgba(255, 255, 255, 0.12); }
.rd-ring .cd { stroke: #ffcf5a; stroke-linecap: round; transition: stroke-dasharray 0.25s linear; filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.8)); }
.rd-atk-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.4); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.rd-atk-in img { width: calc(var(--u) * 8.5); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); }
.rd-atk-in b { font-size: calc(var(--u) * 4.6); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.rd-atk-in small { font-size: calc(var(--u) * 1.9); font-weight: 700; color: rgba(255, 255, 255, 0.85); max-width: calc(var(--u) * 20); text-align: center; }
.rd-msg { margin: 0; min-height: calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.1); color: rgba(255, 255, 255, 0.7); text-align: center; }

.rd-gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); text-align: center; padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: rgba(10, 14, 32, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); width: 100%; }
.rd-gate b { font-size: calc(var(--u) * 4); font-weight: 900; }
.rd-gate p { margin: 0; font-size: calc(var(--u) * 2.4); line-height: 1.4; color: rgba(255, 255, 255, 0.78); max-width: calc(var(--u) * 52); }
.raid-page .rd-pill { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--u) * 6.4); padding: 0 calc(var(--u) * 4); border-radius: 99px; background: #2b6bff; color: #fff; font-weight: 800; font-size: calc(var(--u) * 2.6); text-decoration: none; box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2) rgba(43, 107, 255, 0.4); transition: transform 0.12s; white-space: nowrap; }
.rd-pill:active { transform: scale(0.96); }
.raid-page .rd-pill.sm { height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.1); background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.raid-page .rd-pill.gold { background: linear-gradient(180deg, #ffd65a, #f5a400); color: #3b2500; box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2) rgba(245, 164, 0, 0.45); }
.rd-pill:disabled { opacity: 0.6; }

.rd-deck { width: 100%; display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 2.4); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); }
.rd-deck-cover { flex: 0 0 auto; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: calc(var(--u) * 1.4); background: #2a3354 center 22% / 180% no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.rd-deck-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rd-deck-main small { font-size: calc(var(--u) * 2); color: rgba(255, 255, 255, 0.6); font-weight: 600; }
.rd-deck-main b { font-size: calc(var(--u) * 2.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-deck-main em { font-style: normal; font-size: calc(var(--u) * 2); color: #ffb3b3; font-weight: 700; }
.rd-deck-main em.good { color: #7ef0b0; }

/* side: tabs + top 10 / rewards / how + claim */
.rd-side { min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.rd-tabs { display: flex; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.6); border-radius: 99px; background: rgba(0, 0, 0, 0.3); flex: 0 0 auto; }
.rd-tabs button { flex: 1; height: calc(var(--u) * 5); border-radius: 99px; font-size: calc(var(--u) * 2.2); font-weight: 800; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
.rd-tabs button.on { background: #fff; color: #18203a; }
.rd-panel { flex: 1; min-height: 0; overflow-y: auto; padding: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 2.6); background: rgba(10, 14, 32, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); scrollbar-width: none; }
.rd-panel::-webkit-scrollbar { display: none; }
.rd-empty { margin: calc(var(--u) * 4) calc(var(--u) * 2); text-align: center; font-size: calc(var(--u) * 2.3); color: rgba(255, 255, 255, 0.7); }
.rd-row { display: grid; grid-template-columns: calc(var(--u) * 4.6) calc(var(--u) * 4.6) minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 0.45) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.6); animation: rdRowIn 0.35s both; }
.rd-row + .rd-row { margin-top: calc(var(--u) * 0.2); }
.rd-row .pos { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: calc(var(--u) * 2.1); background: rgba(255, 255, 255, 0.1); }
.rd-row.r1 .pos { background: linear-gradient(180deg, #ffe17a, #f5a400); color: #3b2500; }
.rd-row.r2 .pos { background: linear-gradient(180deg, #f2f5fb, #a9b4c8); color: #1d2742; }
.rd-row.r3 .pos { background: linear-gradient(180deg, #ffc49a, #c06a2f); color: #2e1404; }
.rd-row .av { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); border-radius: 50%; background: #2a3354 center 22% / 190% no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.rd-row b { font-size: calc(var(--u) * 2.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-row em { font-style: normal; font-weight: 900; font-size: calc(var(--u) * 2.4); font-variant-numeric: tabular-nums; color: #ffcf5a; }
.rd-row.me { background: rgba(43, 107, 255, 0.35); box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.6); }
.rd-row.sep { margin-top: calc(var(--u) * 1.2) !important; }
@keyframes rdRowIn { from { opacity: 0; transform: translateX(calc(var(--u) * 2)); } }
.rd-foot { margin: calc(var(--u) * 1.2) calc(var(--u) * 0.6) 0; font-size: calc(var(--u) * 2); color: rgba(255, 255, 255, 0.55); text-align: center; line-height: 1.35; }
.rd-tier { padding: calc(var(--u) * 1) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.6); }
.rd-tier + .rd-tier { margin-top: calc(var(--u) * 0.5); }
.rd-tier b { display: block; font-size: calc(var(--u) * 2.2); margin-bottom: calc(var(--u) * 0.5); }
.rd-tier.top1 b { color: #ffd65a; } .rd-tier.top3 b { color: #dfe6f4; } .rd-tier.top10 b { color: #ffb88a; } .rd-tier.defeat b { color: #7ef0b0; }
.rd-tier.on { background: rgba(43, 107, 255, 0.3); box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.6); }
.rd-tier > div, .rd-claim-rw { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.6); }
.rd-rw { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5); padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1) calc(var(--u) * 0.3) calc(var(--u) * 0.4); border-radius: 99px; background: rgba(255, 255, 255, 0.12); font-size: calc(var(--u) * 2.05); font-weight: 700; white-space: nowrap; }
.rd-rw img { width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); object-fit: contain; }
.rd-rw.cos { background: linear-gradient(90deg, rgba(229, 32, 63, 0.55), rgba(245, 164, 0, 0.55)); }
.rd-rw.medal.raidGold { background: rgba(255, 200, 40, 0.35); } .rd-rw.medal.raidSilver { background: rgba(220, 230, 245, 0.28); } .rd-rw.medal.raidBronze { background: rgba(205, 120, 60, 0.35); }
.rd-how { margin: 0; padding: calc(var(--u) * 0.6) calc(var(--u) * 1) calc(var(--u) * 0.6) calc(var(--u) * 3.4); display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.1); line-height: 1.4; color: rgba(255, 255, 255, 0.85); }
.rd-how b { color: #ffcf5a; }

.rd-claim { flex: 0 0 auto; padding: calc(var(--u) * 1.4); border-radius: calc(var(--u) * 2.6); background: linear-gradient(135deg, rgba(255, 200, 60, 0.22), rgba(229, 32, 63, 0.22)); border: 1px solid rgba(255, 210, 120, 0.45); display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.rd-claim-head { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.rd-claim-head img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); object-fit: cover; object-position: 50% 18%; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 220, 140, 0.7); }
.rd-claim-head div { display: flex; flex-direction: column; min-width: 0; }
.rd-claim-head small { font-size: calc(var(--u) * 2); color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-claim-head b { font-size: calc(var(--u) * 2.8); font-weight: 900; }
.rd-claim-head span { font-size: calc(var(--u) * 1.9); color: #ffd65a; font-weight: 700; }
.rd-claim .rd-pill { align-self: stretch; height: calc(var(--u) * 5.6); }
.rd-claimed { text-align: center; font-weight: 800; font-size: calc(var(--u) * 2.3); color: #7ef0b0; }

.rd-toast { position: absolute; left: 50%; bottom: calc(var(--u) * 4); z-index: 20; transform: translate(-50%, calc(var(--u) * 3)); opacity: 0; pointer-events: none; padding: calc(var(--u) * 1.4) calc(var(--u) * 3); border-radius: 99px; background: rgba(15, 20, 40, 0.92); border: 1px solid rgba(255, 255, 255, 0.2); font-size: calc(var(--u) * 2.4); font-weight: 700; transition: opacity 0.2s, transform 0.25s; white-space: nowrap; }
.rd-toast.show { opacity: 1; transform: translate(-50%, 0); }
.rd-celebrate { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5, 8, 20, 0.7); backdrop-filter: blur(6px); animation: rdFade 0.25s; }
.rd-cel-card { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 4) calc(var(--u) * 5); border-radius: calc(var(--u) * 4); max-width: calc(var(--u) * 90); text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 90, 0.35), transparent 70%), #141b36; border: 1px solid rgba(255, 220, 140, 0.5); box-shadow: 0 0 calc(var(--u) * 8) rgba(255, 190, 60, 0.35); animation: rdPop 0.45s cubic-bezier(.2, 1.4, .4, 1); }
.rd-cel-card small { font-size: calc(var(--u) * 2); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); font-weight: 800; }
.rd-cel-card b { font-size: calc(var(--u) * 6); font-weight: 900; color: #ffd65a; }
.rd-cel-card span { font-size: calc(var(--u) * 2.4); font-weight: 700; }
.rd-cel-card .rd-claim-rw { justify-content: center; }
@keyframes rdFade { from { opacity: 0; } }
@keyframes rdPop { from { transform: scale(0.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rd-bg-art, .rd-embers, .rd-card, .rd-atk.ready::before, .rd-bar .fill::after { animation: none; } }

/* ============================================================== battle.html?mode=raid */
.board.raid .bench.opp, .board.raid .opp-hand { visibility: hidden; }
.board.raid .active.opp .card.field { box-shadow: 0 0 0 2px rgba(255, 220, 140, 0.8), 0 0 calc(var(--u) * 4) rgba(255, 70, 70, 0.75); }
.board.raid .active.opp .card.field .hp { display: none; } /* the shared pool lives in the raid HUD */
.raid-hud { --bc: #f0642d; position: absolute; left: 50%; top: calc(var(--u) * 2); z-index: 5; transform: translateX(-50%); width: calc(var(--u) * 78); padding: calc(var(--u) * 1.2) calc(var(--u) * 2) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 2.6); background: rgba(12, 16, 36, 0.78); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; backdrop-filter: blur(10px); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, 0.4); pointer-events: none;
  font-family: 'PD Rarity', 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; }
.raid-hud .rh-top { display: flex; align-items: center; gap: calc(var(--u) * 1.2); margin-bottom: calc(var(--u) * 0.8); }
.raid-hud .rh-tag { padding: calc(var(--u) * 0.3) calc(var(--u) * 1.2); border-radius: 99px; background: linear-gradient(90deg, #ff3d5a, #ff7a2f); font-size: calc(var(--u) * 1.9); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.raid-hud .rh-name { flex: 1; min-width: 0; font-size: calc(var(--u) * 2.6); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raid-hud .rh-weak { display: flex; align-items: center; gap: calc(var(--u) * 0.5); font-size: calc(var(--u) * 2); font-weight: 700; color: rgba(255, 255, 255, 0.8); white-space: nowrap; }
.raid-hud .rh-weak img { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }
.raid-hud .rh-bar { position: relative; height: calc(var(--u) * 2.8); border-radius: 99px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12); overflow: hidden; }
.raid-hud .rh-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.raid-hud .rh-ghost { background: #ffe9a8; transition: width 0.9s cubic-bezier(.3, 0, .2, 1); }
.raid-hud .rh-fill { background: linear-gradient(180deg, #ff6b6b, #e5203f 55%, #a70d2a); transition: width 0.4s; box-shadow: inset 0 calc(var(--u) * 0.4) 0 rgba(255, 255, 255, 0.3); }
.raid-hud .rh-hp { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--u) * 2); font-weight: 900; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); font-variant-numeric: tabular-nums; }
.raid-hud .rh-stats { display: flex; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 0.8); font-size: calc(var(--u) * 2.1); color: rgba(255, 255, 255, 0.75); font-weight: 600; }
.raid-hud .rh-stats b { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
.raid-hud .rh-dmg { color: #ffcf5a !important; font-size: calc(var(--u) * 2.4); }
.raid-hud .rh-practice { margin-left: auto; padding: 0 calc(var(--u) * 1); border-radius: 99px; background: rgba(255, 255, 255, 0.16); }
.raid-hud.hit { animation: rdShake 0.45s; }

.over-screen.res.raid-res { background: rgba(8, 11, 26, 0.82); backdrop-filter: blur(12px); color: #fff; align-items: center; }
.over-screen.raid-res .res-card.raid-card { width: min(calc(var(--u) * 120), 100%); display: grid; grid-template-columns: calc(var(--u) * 34) minmax(0, 1fr); gap: calc(var(--u) * 4); align-items: center; margin: auto; }
.raid-card .rr-art img { width: 100%; border-radius: calc(var(--u) * 2); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 calc(var(--u) * 6) color-mix(in srgb, var(--bc) 70%, transparent); }
.raid-card .rr-main { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.raid-card .res-mode, .raid-card .res-why { text-align: left; color: rgba(255, 255, 255, 0.7); }
.raid-card .rr-label { font-size: calc(var(--u) * 2.4); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); }
.raid-card .rr-dmg { font-size: calc(var(--u) * 13); line-height: 1; font-weight: 900; color: #ffcf5a; font-variant-numeric: tabular-nums; text-shadow: 0 0 calc(var(--u) * 4) rgba(255, 170, 40, 0.5); }
.raid-card .rr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.2); }
.raid-card .rr-grid div { display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 1.4); border-radius: calc(var(--u) * 2); background: rgba(255, 255, 255, 0.1); }
.raid-card .rr-grid b { font-size: calc(var(--u) * 3.6); font-weight: 900; font-variant-numeric: tabular-nums; }
.raid-card .rr-grid small { font-size: calc(var(--u) * 1.9); color: rgba(255, 255, 255, 0.65); }
.raid-card .rr-note { margin: 0; font-size: calc(var(--u) * 2.2); color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; gap: calc(var(--u) * 1); }
.raid-card .rr-note.warn { color: #ffb3b3; } .raid-card .rr-note.gold { color: #ffd65a; font-weight: 800; }
.raid-card .rr-spin { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: rdSpin 0.8s linear infinite; }
@keyframes rdSpin { to { transform: rotate(360deg); } }
.raid-card .rr-actions { display: flex; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 0.6); }
.raid-card .rr-btn { flex: 1; display: grid; place-items: center; height: calc(var(--u) * 7); border-radius: calc(var(--u) * 2.2); font-size: calc(var(--u) * 2.6); font-weight: 800; text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); white-space: nowrap; }
.raid-card .rr-btn.primary { flex: 1.6; background: linear-gradient(180deg, #ff6b4a, #e5203f); box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2) rgba(229, 32, 63, 0.45); }
.raid-card .rr-btn:active { transform: scale(0.97); }
.board.raid .hint { top: calc(var(--u) * 19); }

/* ============================================================== lobby row + Titan Crest flair */
.hub-list .t-raid { --hc: #ffe1d6; }
.hub-list .t-raid img { filter: hue-rotate(-25deg) saturate(1.5); }
.card.field.flair-titan::after { box-shadow: 0 0 0 3px #e5203f, 0 0 0 5px #ffd65a, 0 0 18px 5px rgba(255, 80, 40, 0.7);
  background: linear-gradient(115deg, transparent 35%, rgba(255, 200, 120, 0.5) 50%, transparent 65%); background-size: 260% 100%; animation: flairTitan 2.4s ease-in-out infinite; }
@keyframes flairTitan { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
.flair-prev.fl-titan::after { box-shadow: 0 0 0 3px #e5203f, 0 0 0 5px #ffd65a, 0 0 16px 4px rgba(255, 80, 40, 0.7); }
@media (prefers-reduced-motion: reduce) { .card.field.flair-titan::after { animation: none; } }