.raid-page {max-width: var(--layout-width-default);margin: 0 auto;padding: 12px 12px 40px;box-sizing: border-box}
.raid-hero-block {margin-bottom: 14px}
.raid-hero {position: relative;overflow: hidden;border-radius: var(--radius-lg) var(--radius-lg) 0 0;padding: 18px 18px 30px;color: #06334a;background:
radial-gradient(120% 90% at 82% 8%, rgba(255, 255, 255, 0.55), transparent 55%),
linear-gradient(180deg, #7dd3fc 0%, #b7e8fb 52%, #e0f5ff 100%)}
.raid-hero-solo {border-radius: var(--radius-lg);padding-bottom: 46px}
.raid-hero-wm {position: absolute;top: -46px;right: -34px;width: 190px;height: 190px;opacity: 0.5;pointer-events: none}
.raid-hero-mote {position: absolute;border-radius: 50%;background: #fff8dc;opacity: 0.45;pointer-events: none;animation: raid-hero-mote-float 6s ease-in-out infinite}
.raid-hero-mote.m1 { width: 6px; height: 6px; top: 30%; left: 12%; }
.raid-hero-mote.m2 { width: 4px; height: 4px; top: 58%; left: 30%; animation-delay: -2.2s; }
.raid-hero-mote.m3 { width: 5px; height: 5px; top: 22%; left: 58%; animation-delay: -4.1s; }
@keyframes raid-hero-mote-float {0%, 100% { transform: translateY(0); opacity: 0.25; }
50% { transform: translateY(-9px); opacity: 0.75; }}
.raid-hero-in {position: relative;z-index: 2}
.raid-hero-top {display: flex;align-items: center;gap: 8px;flex-wrap: wrap}
.raid-hero-eyebrow {display: inline-flex;align-items: center;gap: 6px;font-size: 10.5px;font-weight: 800;letter-spacing: 0.16em;color: #0b6a86}
.raid-hero-eyebrow::before {content: "";width: 16px;height: 2px;border-radius: 2px;background: linear-gradient(90deg, #2c8a44, #d2453f)}
.raid-hero-badge {flex: none;display: inline-flex;align-items: center;gap: 5px;padding: 5px 11px;border-radius: 999px;font-size: 11.5px;font-weight: 800;color: #b0392f;background: rgba(255, 255, 255, 0.9);border: 1px solid rgba(210, 69, 63, 0.35);box-shadow: 0 2px 8px rgba(6, 51, 74, 0.12)}
.raid-hero-badge-dot {width: 6px;height: 6px;border-radius: 50%;background: #d2453f;animation: raid-hero-pulse 1.8s ease-in-out infinite}
.raid-hero-badge-finished {color: var(--color-text-secondary);border-color: var(--color-border)}
.raid-hero-badge-finished .raid-hero-badge-dot {background: var(--color-text-muted);animation: none}
@keyframes raid-hero-pulse {0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.78); }}
.raid-hero-title {margin: 7px 0 0;min-width: 0;font-size: 26px;font-weight: 900;line-height: 1.25;letter-spacing: -0.02em;color: #05303f;overflow-wrap: anywhere;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6)}
.raid-hero-meta {display: flex;flex-wrap: wrap;gap: 6px 14px;margin-top: 10px;font-size: 12px;font-weight: 600;color: #0b5b74}
.raid-hero-meta span {display: inline-flex;align-items: center;gap: 5px}
.raid-hero-meta svg {width: 13px;height: 13px;flex: none}
.raid-hero-waves {position: absolute;left: 0;right: 0;bottom: -1px;height: 42px;overflow: hidden;line-height: 0;pointer-events: none}
.raid-hero-waves svg {display: block;width: 200%;height: 100%}
.raid-hero-wave-back {opacity: 0.55;animation: raid-hero-wave-drift 15s linear infinite}
.raid-hero-wave-front {position: absolute;left: 0;bottom: 0;animation: raid-hero-wave-drift 9s linear infinite reverse}
@keyframes raid-hero-wave-drift {from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }}
.raid-desc {position: relative;overflow: hidden;padding: 16px 18px;border: 1px solid #e5d3b0;border-top: none;border-radius: 0 0 var(--radius-lg) var(--radius-lg);background: linear-gradient(180deg, #f6ead2 0%, #fdf7ea 100%);font-size: 0.875rem;color: #4a3a22;overflow-wrap: anywhere}
.raid-desc p {margin: 0 0 8px}
.raid-desc p:last-child {margin-bottom: 0}
.raid-desc-flesh {position: absolute;top: 0;left: 0;right: 0;height: 5px;background: linear-gradient(90deg, #d2453f 0%, #f0736b 50%, #d2453f 100%)}
.raid-desc-seeds {position: absolute;top: 10px;left: 0;right: 0;height: 8px;pointer-events: none}
.raid-desc-seeds i {position: absolute;width: 5px;height: 7px;border-radius: 50% 50% 45% 45%;background: #2b1410;opacity: 0.5;transform: rotate(-12deg)}
.raid-desc-seeds i:nth-child(1) { left: 12%; }
.raid-desc-seeds i:nth-child(2) { left: 31%; transform: rotate(10deg); }
.raid-desc-seeds i:nth-child(3) { left: 54%; }
.raid-desc-seeds i:nth-child(4) { left: 73%; transform: rotate(14deg); }
.raid-desc-seeds i:nth-child(5) { left: 89%; }
.raid-desc-lead {display: block;font-size: 11px;font-weight: 800;letter-spacing: 0.12em;color: #a8632c;margin-bottom: 6px}
@media (prefers-reduced-motion: reduce) {.raid-hero-mote,
.raid-hero-badge-dot,
.raid-hero-wave-back,
.raid-hero-wave-front {animation: none}}
.raid-actions {display: flex;flex-wrap: wrap;gap: 10px;margin: 14px 0 20px}
.raid-btn {display: inline-block;padding: 10px 20px;border-radius: var(--radius-md);font-weight: 700;font-size: 0.9rem;border: none;cursor: pointer;text-decoration: none;text-align: center}
.raid-btn-primary {background: var(--color-primary);color: #fff}
.raid-btn-primary:hover {background: var(--color-primary-dark)}
.raid-btn-ghost {background: transparent;color: var(--color-text-secondary);border: 1px solid var(--color-border)}
.raid-actions form {margin: 0}
.raid-participants {display: flex;flex-direction: column}
.raid-pmodal-loading {margin: 0;padding: 24px 0;color: rgba(226, 240, 255, 0.6);font-size: 13px;text-align: center}
.raid-participants-more {display: flex;justify-content: center;padding: 14px 0 4px}
.raid-participant {padding: 12px 0;border-top: 1px solid rgba(255, 255, 255, 0.1)}
.raid-participant-head {display: flex;flex-wrap: wrap;align-items: center;gap: 8px;margin-bottom: 10px;min-width: 0}
.raid-participant-head .user-avatar {border: 1px solid rgba(255, 255, 255, 0.18)}
.raid-participant-name {font-weight: 700;color: #e8f2fa;overflow-wrap: anywhere;min-width: 0}
.raid-badge {font-size: 0.7rem;font-weight: 700;padding: 1px 8px;border-radius: 999px;white-space: nowrap}
.raid-badge-self {background: var(--color-primary);color: #fff}
.raid-deck-count {margin-left: auto;font-size: 0.78rem;color: rgba(214, 230, 242, 0.6);white-space: nowrap}
.raid-deck {display: grid;grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));gap: 8px}
.raid-deck-slot {display: flex;flex-direction: column;gap: 4px;min-width: 0}
.raid-card-score {align-self: center;display: inline-flex;align-items: center;gap: 3px;font-size: 0.75rem;font-weight: 700;font-variant-numeric: tabular-nums;color: #7dd3fc}
.raid-deck-empty {margin: 0;font-size: 0.85rem;color: rgba(214, 230, 242, 0.6)}
@media (max-width: 600px) {.raid-deck {display: flex;margin: 0 -16px;padding: 0 16px 4px;overflow-x: auto;scroll-snap-type: x mandatory;scroll-padding-left: 16px;scrollbar-width: none}
.raid-deck::-webkit-scrollbar {display: none}
.raid-deck-slot {flex: 0 0 96px;scroll-snap-align: start}}
.raid-deck-lead {font-size: 0.9rem;line-height: 1.8;color: var(--color-text-secondary);margin: 0 0 16px;padding: 12px 14px;background: var(--color-bg-muted);border: 1px solid var(--color-border-light);border-radius: var(--radius-md);overflow-wrap: anywhere}
.raid-deck-lead-title {font-weight: 800;color: var(--color-text-primary)}
.raid-deck-board {position: sticky;top: 8px;z-index: var(--z-index-base);margin-bottom: 18px;padding: 12px 14px 14px;background: #fff;border: 1px solid var(--color-border);border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);box-sizing: border-box}
.raid-deck-board-head {display: flex;align-items: center;gap: 10px;margin-bottom: 10px}
.raid-deck-board-title {font-size: 0.9rem;font-weight: 800;color: var(--color-text-primary)}
.raid-deck-counter {font-weight: 800;font-variant-numeric: tabular-nums;color: var(--color-primary-dark);white-space: nowrap}
.raid-deck-power {margin-left: auto;display: inline-flex;align-items: center;gap: 3px;padding: 3px 10px;border-radius: 999px;font-size: 0.8rem;font-weight: 800;font-variant-numeric: tabular-nums;color: var(--color-aqua-700);background: var(--gradient-aqua-light);white-space: nowrap}
.raid-deck-power .raid-icon {color: var(--color-aqua-500)}
.raid-deck-lineup {display: grid;grid-template-columns: repeat(5, 1fr);gap: 8px}
.raid-deck-lineup-slot {position: relative;aspect-ratio: 3 / 4;border-radius: var(--radius-md);overflow: hidden;box-sizing: border-box}
.raid-deck-lineup-slot.is-empty {display: flex;align-items: center;justify-content: center;border: 2px dashed var(--color-border);background: var(--color-bg-muted);color: var(--color-border)}
.raid-deck-lineup-slot.is-empty svg {width: 22px;height: 22px}
.raid-deck-lineup-slot.is-filled {border: 2px solid var(--color-aqua-500);background: #0d3350;cursor: grab;touch-action: none;user-select: none;-webkit-user-select: none}
.raid-deck-lineup-slot.is-dragging {cursor: grabbing;opacity: 0.85;transform: scale(1.04);box-shadow: var(--shadow-md);z-index: 1}
.raid-deck-lineup-slot.is-filled:focus-visible {outline: 3px solid var(--color-primary);outline-offset: 2px}
.raid-deck-lineup-thumb {display: block;width: 100%;height: 100%}
.raid-deck-lineup-thumb img {width: 100%;height: 100%;object-fit: cover;pointer-events: none}
.raid-deck-lineup-silhouette {width: 100%;height: 100%;padding: 22% 12%;box-sizing: border-box;color: rgba(125, 211, 252, 0.5)}
.raid-deck-lineup-order {position: absolute;top: 3px;left: 3px;z-index: 2;display: inline-flex;align-items: center;justify-content: center;min-width: 18px;height: 18px;padding: 0 4px;border-radius: 6px;font-size: 11px;font-weight: 800;color: #fff;background: var(--gradient-aqua);box-shadow: var(--shadow-sm)}
.raid-deck-lineup-remove {position: absolute;top: 2px;right: 2px;z-index: 2;display: inline-flex;align-items: center;justify-content: center;width: 20px;height: 20px;padding: 0;border: none;border-radius: 50%;color: #fff;background: rgba(4, 18, 31, 0.65);cursor: pointer}
.raid-deck-lineup-remove svg {width: 12px;height: 12px}
.raid-deck-lineup-remove:hover {background: var(--color-danger-dark)}
.raid-deck-hint {display: flex;align-items: center;gap: 6px;margin: 10px 0 0;font-size: 0.76rem;color: var(--color-text-secondary)}
.raid-deck-hint .raid-icon {flex-shrink: 0;color: var(--color-aqua-500)}
.raid-deck-synergy {display: flex;flex-wrap: wrap;gap: 6px;margin-top: 10px}
.raid-deck-synergy[hidden] {display: none}
.raid-deck-synergy-chip {display: inline-flex;align-items: center;gap: 5px;padding: 3px 9px;border-radius: 999px;font-size: 0.72rem;font-weight: 700;color: var(--color-aqua-700);background: var(--gradient-aqua-light);border: 1px solid rgba(6, 182, 212, 0.35);animation: syn-pop 0.4s cubic-bezier(0.2, 1.4, 0.5, 1) both}
.raid-deck-synergy-chip .vl {color: var(--color-text-secondary);font-weight: 600}
.raid-deck-board-foot {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;margin-top: 12px}
.raid-deck-submit {margin-left: auto}
.raid-deck-submit:disabled {opacity: 0.45;cursor: not-allowed}
.raid-deck-warning {display: none;align-items: center;gap: 6px;font-size: 0.8rem;font-weight: 700;color: var(--color-danger-dark)}
.raid-deck-warning.show {display: inline-flex}
.raid-pick-head {display: flex;align-items: baseline;gap: 10px;flex-wrap: wrap;margin-bottom: 12px}
.raid-pick-head-title {font-size: 0.9rem;font-weight: 800;color: var(--color-text-primary)}
.raid-pick-limit {display: none;font-size: 0.76rem;font-weight: 700;color: var(--color-aqua-700);overflow-wrap: anywhere}
.raid-pick-limit.show {display: inline}
.raid-pick-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));gap: 14px 12px}
.raid-pick {display: block;position: relative;cursor: pointer;border-radius: var(--radius-md);min-width: 0;text-align: center;-webkit-tap-highlight-color: transparent}
.raid-pick:focus-visible {outline: 2px solid var(--color-aqua-500);outline-offset: 3px}
.raid-pick-card {display: block;position: relative;border: 2px solid transparent;border-radius: var(--radius-md);transition: border-color 0.15s ease, transform 0.15s ease}
.raid-pick.is-selected .raid-pick-card {border-color: var(--color-aqua-500);transform: translateY(-2px)}
.raid-pick-badge {position: absolute;top: -8px;right: -6px;z-index: 3;display: none;align-items: center;justify-content: center;width: 26px;height: 26px;border-radius: 50%;color: #fff;background: var(--gradient-aqua);box-shadow: var(--shadow-sm)}
.raid-pick-badge svg {width: 15px;height: 15px}
.raid-pick.is-selected .raid-pick-badge {display: inline-flex}
.raid-pick.is-disabled {opacity: 0.4}
.raid-pick.is-disabled .raid-pick-card {transform: none}
.raid-pick-power {display: inline-flex;align-items: center;gap: 3px;margin-top: 5px;font-size: 0.72rem;font-weight: 800;font-variant-numeric: tabular-nums;color: var(--color-aqua-700)}
@media (max-width: 480px) {.raid-pick-grid {grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));gap: 12px 8px}
.raid-deck-lineup {gap: 6px}}
.raid-stage {position: relative;overflow: hidden;border-radius: var(--radius-lg);background:
radial-gradient(130% 60% at 50% -10%, rgba(56, 189, 248, 0.25), transparent 60%),
radial-gradient(90% 50% at 80% 20%, rgba(14, 116, 144, 0.35), transparent 65%),
linear-gradient(180deg, #0d3350 0%, #082238 44%, #04121f 100%);box-shadow: var(--shadow-md);color: #e8f2fa}
.raid-stage-in {padding: 14px 14px 18px;box-sizing: border-box}
.raid-stage-top {display: flex;align-items: center;gap: 10px;flex-wrap: wrap}
.raid-icon {width: 1em;height: 1em;vertical-align: -0.12em;flex: none}
.raid-stage-party {display: flex;align-items: center;flex: 1;min-width: 0;box-sizing: border-box;padding: 7px 10px;cursor: pointer;font-family: inherit;text-align: left;color: inherit;background: rgba(255, 255, 255, 0.06);border: 1px solid rgba(255, 255, 255, 0.14);border-radius: 999px;transition: background 0.15s ease}
.raid-stage-party:hover {background: rgba(255, 255, 255, 0.12)}
.raid-stage-party > .user-avatar-wrapper,
.raid-stage-party > .user-avatar {margin-right: -6px;flex: none}
.raid-stage-party .user-avatar {border: 2px solid #0a2238}
.raid-stage-party-count {margin-left: 14px;font-size: 10.5px;color: rgba(214, 230, 242, 0.75);white-space: nowrap}
.raid-stage-party-open {margin-left: auto;flex-shrink: 0;display: inline-flex;align-items: center;gap: 3px;font-size: 10.5px;font-weight: 700;color: #7dd3fc;white-space: nowrap}
.raid-stage-boss {position: relative;margin: 8px auto 0;max-width: 420px}
.raid-stage-boss-glow {position: absolute;left: 50%;top: 58%;translate: -50% -50%;width: 78%;aspect-ratio: 2 / 1;border-radius: 50%;background: radial-gradient(closest-side, rgba(56, 189, 248, 0.35), transparent);filter: blur(6px);pointer-events: none}
.raid-boss-svg {position: relative;display: block;width: 100%;height: auto;color: #071827;filter: drop-shadow(0 14px 24px rgba(0, 4, 10, 0.7));animation: raid-boss-sway 5.5s ease-in-out infinite}
@keyframes raid-boss-sway {0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-8px) rotate(1.2deg); }}
.raid-boss-art {filter: none}
.raid-boss-chip {transform-box: fill-box;transform-origin: center;transition: opacity 0.45s ease, transform 0.45s ease}
.raid-boss-chip.gone {opacity: 0;transform: translate(0, 22px) rotate(22deg) scale(0.5)}
.raid-boss-reveal {opacity: 0;transition: opacity 0.5s ease}
.raid-boss-reveal.on {opacity: 1}
.raid-boss-mote {transform-box: view-box;animation: raid-boss-mote 12s linear infinite}
.raid-boss-mote.m2 {animation-duration: 16s;animation-delay: -5s}
.raid-boss-mote.m3 {animation-duration: 20s;animation-delay: -10s}
@keyframes raid-boss-mote {0% { transform: translateY(20px); opacity: 0; }
20% { opacity: 0.55; }
80% { opacity: 0.4; }
100% { transform: translateY(-52px); opacity: 0; }}
.raid-boss-swing {transform-box: view-box;animation: raid-boss-swing 5.2s ease-in-out infinite}
.raid-boss-swing.s2 {animation-duration: 6.6s;animation-delay: -1.8s}
@keyframes raid-boss-swing {0%, 100% { transform: rotate(-3.5deg); }
50% { transform: rotate(3.5deg); }}
.raid-stage-boss-name {text-align: center;margin-top: 2px}
.raid-stage-boss-eyebrow {display: block;font-size: 10px;font-weight: 800;letter-spacing: 0.14em;color: #7dd3fc}
.raid-stage-boss-nm {display: block;font-size: 18px;font-weight: 800;letter-spacing: 0.06em;text-shadow: 0 2px 8px rgba(0, 6, 14, 0.8);overflow-wrap: anywhere}
.raid-stage-countdown {display: flex;flex-direction: column;align-items: center;gap: 6px;max-width: 320px;margin: 10px auto 0;padding: 10px 14px;box-sizing: border-box;border-radius: var(--radius-md, 12px);background: rgba(56, 189, 248, 0.12);border: 1px solid rgba(125, 211, 252, 0.35)}
.raid-stage-countdown-label {font-size: 10px;font-weight: 800;letter-spacing: 0.14em;color: #7dd3fc}
.raid-stage-countdown-solo {max-width: 340px;margin: 30px auto 26px;padding: 20px 16px;gap: 10px}
.raid-stage-countdown-solo .raid-stage-countdown-label {font-size: 11px;letter-spacing: 0.2em}
.raid-stage-countdown-solo .raid-countdown-value {min-width: 54px;padding: 10px 10px;font-size: 24px}
.raid-stage-countdown-solo .raid-countdown-sep {padding-top: 11px;font-size: 19px}
.raid-countdown-units {display: flex;align-items: flex-start;justify-content: center;gap: 4px}
.raid-countdown-units[hidden] {display: none}
.raid-countdown-unit {display: flex;flex-direction: column;align-items: center;min-width: 0}
.raid-countdown-flip {perspective: 300px}
.raid-countdown-value {display: block;min-width: 46px;padding: 7px 8px;font-size: 20px;font-weight: 800;line-height: 1;text-align: center;color: #e8f2fa;font-variant-numeric: tabular-nums;background: linear-gradient(180deg, rgba(14, 42, 66, 0.9) 0%, rgba(6, 20, 34, 0.9) 100%);border: 1px solid rgba(125, 211, 252, 0.35);border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 6, 14, 0.55), inset 0 1px 0 rgba(186, 230, 253, 0.18);transform-origin: center top;backface-visibility: hidden}
.raid-countdown-value.flip {animation: raidCountdownFlip 0.42s cubic-bezier(0.2, 0.8, 0.3, 1)}
@keyframes raidCountdownFlip {0% {transform: rotateX(-88deg);opacity: 0.25}
60% {transform: rotateX(8deg);opacity: 1}
100% {transform: rotateX(0);opacity: 1}}
.raid-countdown-unit-label {margin-top: 5px;font-size: 9px;font-weight: 700;letter-spacing: 0.06em;color: rgba(214, 230, 242, 0.7)}
.raid-countdown-sep {padding-top: 8px;font-size: 17px;font-weight: 800;color: rgba(125, 211, 252, 0.6)}
.raid-stage-countdown-soon {font-size: 22px;font-weight: 800;letter-spacing: 0.04em;color: #e8f2fa;text-shadow: 0 2px 8px rgba(0, 6, 14, 0.8)}
.raid-stage-countdown-soon[hidden] {display: none}
.raid-stage-countdown-at {font-size: 11px;color: rgba(214, 230, 242, 0.75)}
.raid-stage-reward {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 6px;max-width: 460px;margin: 8px auto 0;padding: 7px 12px;box-sizing: border-box;font-size: 11.5px;color: #fde68a;background: rgba(120, 53, 15, 0.35);border: 1px solid rgba(253, 230, 138, 0.35);border-radius: 999px}
.raid-stage-reward-label {font-weight: 800;letter-spacing: 0.08em;white-space: nowrap}
.raid-stage-reward-text {min-width: 0;overflow-wrap: anywhere;color: rgba(253, 230, 138, 0.92)}
.raid-stage-hp {max-width: 460px;margin: 10px auto 0}
.raid-hp-labels {display: flex;justify-content: flex-start;gap: 8px;font-size: 10px;color: rgba(214, 230, 242, 0.8);font-variant-numeric: tabular-nums;margin-bottom: 4px}
.raid-hp-track {position: relative;height: 14px;border-radius: 999px;overflow: hidden;background: rgba(2, 10, 20, 0.55);border: 1px solid rgba(255, 255, 255, 0.14)}
.raid-hp-fill {position: absolute;inset: 0;width: 100%;border-radius: 999px;background: linear-gradient(90deg, #f97316, #ef4444 70%, #dc2626);box-shadow: 0 0 12px rgba(239, 68, 68, 0.55);transition: width 0.3s ease}
.raid-hp-fill::after {content: "";position: absolute;inset: 0;background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 55%);border-radius: 999px}
.raid-dmg-layer {position: absolute;inset: 0;z-index: 5;pointer-events: none}
.raid-dmg-pop {position: absolute;transform: translate(-50%, 0);display: flex;flex-direction: column;align-items: center;gap: 1px;white-space: nowrap;animation: raid-dmg-float 1.5s cubic-bezier(0.2, 0.7, 0.4, 1) forwards}
.raid-dmg-pop .num {font-size: 20px;font-weight: 800;font-variant-numeric: tabular-nums;line-height: 1;color: #fde68a;text-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 0 2px 4px rgba(0, 6, 14, 0.9)}
.raid-dmg-pop .who {font-size: 9.5px;font-weight: 800;letter-spacing: 0.06em;color: #7dd3fc;text-shadow: 0 1px 3px rgba(0, 6, 14, 0.9)}
.raid-dmg-pop.mine .num {font-size: 27px;color: #7dd3fc;text-shadow: 0 0 12px rgba(56, 189, 248, 0.7), 0 2px 4px rgba(0, 6, 14, 0.9)}
.raid-dmg-pop.crit .num {font-size: 26px;color: #f87171;text-shadow: 0 0 14px rgba(239, 68, 68, 0.75), 0 2px 4px rgba(0, 6, 14, 0.9)}
.raid-dmg-pop.mine.crit .num {font-size: 32px}
.raid-dmg-pop.crit .who::after {content: " クリティカル！";color: #fca5a5}
@keyframes raid-dmg-float {0% { opacity: 0; transform: translate(-50%, 14px) scale(0.6); }
12% { opacity: 1; transform: translate(-50%, 0) scale(1.18); }
26% { transform: translate(-50%, -6px) scale(1); }
100% { opacity: 0; transform: translate(-50%, -52px) scale(0.95); }}
.raid-dmg-pop.mine {animation-name: raid-dmg-float-mine;animation-duration: 5s;animation-timing-function: ease-out}
@keyframes raid-dmg-float-mine {0% { opacity: 0; transform: translate(-50%, 14px) scale(0.6); }
4% { opacity: 1; transform: translate(-50%, 0) scale(1.18); }
8% { transform: translate(-50%, -4px) scale(1); }
70% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
100% { opacity: 0; transform: translate(-50%, -26px) scale(0.98); }}
.raid-stage-boss.hit {animation: raid-boss-hit 0.32s ease-out}
.raid-stage-boss.hit-mine {animation: raid-boss-hit-mine 0.42s ease-out}
@keyframes raid-boss-hit-mine {0% { filter: brightness(1); transform: translateX(0); }
25% {filter: brightness(2.1) saturate(1.4) drop-shadow(0 0 16px rgba(56, 189, 248, 0.9));transform: translateX(-5px)}
55% { filter: brightness(1.5) drop-shadow(0 0 9px rgba(56, 189, 248, 0.6)); transform: translateX(4px); }
100% { filter: brightness(1); transform: translateX(0); }}
.raid-hand.attacking {animation: raid-hand-attack 0.7s ease-out}
@keyframes raid-hand-attack {0% { filter: none; }
18% { filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.85)) brightness(1.16); }
100% { filter: none; }}
@keyframes raid-boss-hit {0% { filter: brightness(1); transform: translateX(0); }
25% { filter: brightness(1.9) saturate(1.3); transform: translateX(-4px); }
55% { filter: brightness(1.4); transform: translateX(3px); }
100% { filter: brightness(1); transform: translateX(0); }}
.syn-dock-wrap {max-width: 480px;margin: 14px auto 6px}
.syn-dock {display: flex;align-items: center;gap: 8px;background: rgba(4, 18, 31, 0.55);border: 1px solid rgba(125, 211, 252, 0.32);border-radius: 999px;padding: 5px 8px 5px 7px;cursor: pointer;transition: border-color 0.2s, background 0.2s}
.syn-dock:hover,
.syn-dock:focus-visible {border-color: rgba(125, 211, 252, 0.5);background: rgba(4, 18, 31, 0.72);outline: none}
.syn-dock-pills {display: flex;gap: 5px;flex: 1 1 auto;min-width: 0;overflow: hidden}
.spill {position: relative;width: 30px;height: 30px;flex: 0 0 auto;border-radius: 50%;display: grid;place-items: center;background: rgba(125, 211, 252, 0.14);border: 1px solid rgba(125, 211, 252, 0.45);color: #7dd3fc;animation: syn-pop 0.5s cubic-bezier(0.2, 1.4, 0.5, 1) both}
.spill svg {width: 15px;height: 15px}
.spill.gold {background: rgba(252, 211, 77, 0.16);border-color: rgba(252, 211, 77, 0.5);color: #fcd34d}
.spill:nth-child(2) { animation-delay: 0.09s; }
.spill:nth-child(3) { animation-delay: 0.18s; }
.spill:nth-child(4) { animation-delay: 0.27s; }
.spill:nth-child(5) { animation-delay: 0.36s; }
@keyframes syn-pop {0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }}
.spill.live::after {content: "";position: absolute;inset: -3px;border-radius: 50%;border: 1px solid currentColor;opacity: 0;animation: syn-ring 3s ease-out infinite}
@keyframes syn-ring {0% { opacity: 0.5; transform: scale(0.92); }
70%, 100% { opacity: 0; transform: scale(1.45); }}
.syn-dock-toggle {flex: 0 0 auto;display: inline-flex;align-items: center;gap: 3px;font-size: 11px;color: rgba(214, 230, 242, 0.75);padding-right: 4px}
.syn-dock-toggle svg {width: 13px;height: 13px;transition: transform 0.25s}
.syn-dock.open .syn-dock-toggle svg {transform: rotate(180deg)}
.syn-detail {max-width: 480px;margin: 0 auto;overflow: hidden;max-height: 0;transition: max-height 0.32s ease, margin 0.32s ease}
.syn-dock.open + .syn-detail {max-height: 520px;margin: 0 auto 12px}
.syn-detail-in {background: rgba(4, 18, 31, 0.6);border: 1px solid rgba(125, 211, 252, 0.22);border-radius: var(--radius-md, 12px);padding: 12px 14px;margin-top: 6px}
.syn-group + .syn-group {margin-top: 12px}
.syn-group-h {font-size: 10px;letter-spacing: 0.16em;text-transform: uppercase;color: #7dd3fc;font-weight: 700;margin-bottom: 7px;display: flex;align-items: center;gap: 7px}
.syn-group-h::after {content: "";flex: 1;height: 1px;background: rgba(125, 211, 252, 0.18)}
.syn-group.l2 .syn-group-h {color: #fcd34d}
.syn-group.l2 .syn-group-h::after {background: rgba(252, 211, 77, 0.18)}
.syn-line {display: flex;align-items: center;gap: 9px;padding: 5px 0}
.syn-line .li-ic {flex: 0 0 auto;width: 22px;height: 22px;border-radius: 6px;display: grid;place-items: center;background: rgba(125, 211, 252, 0.14);color: #7dd3fc}
.syn-line .li-ic svg {width: 14px;height: 14px}
.syn-line.gold .li-ic {background: rgba(252, 211, 77, 0.16);color: #fcd34d}
.li-body {flex: 1 1 auto;min-width: 0;overflow-wrap: anywhere}
.li-name {font-size: 13px;font-weight: 700}
.li-val {flex: 0 1 auto;min-width: 0;text-align: right;font-weight: 700;font-size: 11.5px;line-height: 1.5;color: rgba(255, 255, 255, 0.88);overflow-wrap: anywhere}
.raid-hand-label {display: flex;align-items: center;justify-content: space-between;gap: 8px;max-width: 640px;margin: 18px auto 8px;font-size: 11px;font-weight: 700;color: rgba(214, 230, 242, 0.85)}
.raid-stage-note {margin: 18px auto 0;max-width: 460px;font-size: 12px;line-height: 1.7;color: rgba(214, 230, 242, 0.75);text-align: center}
.raid-hand-scroller {max-width: 640px;margin: 0 auto}
.raid-hand {display: grid;grid-template-columns: repeat(5, 1fr);gap: 8px;align-items: end}
.raid-hand-slot {min-width: 0;text-align: center}
.raid-hand-power {display: inline-flex;align-items: center;gap: 3px;margin-top: 5px;font-size: 10px;font-weight: 800;font-variant-numeric: tabular-nums;color: #7dd3fc}
@media (max-width: 600px) {.raid-hand-scroller {--raid-card-w: 200px;overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;margin: 0 -14px}
.raid-hand-scroller::-webkit-scrollbar {display: none}
.raid-hand {display: flex;align-items: flex-end;gap: 12px;width: max-content;padding: 14px calc(50% - var(--raid-card-w) / 2) 4px}
.raid-hand-slot {width: var(--raid-card-w);flex: none;scroll-snap-align: center;transition: transform 0.25s ease;transform-origin: center bottom}
.raid-hand-slot:not(.front) {transform: scale(0.92) translateY(4px)}
.raid-hand-slot.front {transform: translateY(-6px)}
.raid-hand-slot .fcard {transition: filter 0.25s ease}
.raid-hand-slot:not(.front) .fcard {filter: brightness(0.8)}
.raid-hand-slot .raid-hand-power {visibility: hidden}
.raid-hand-slot.front .raid-hand-power {visibility: visible}}
@media (max-width: 380px) {.raid-hand-scroller {--raid-card-w: 180px}}
.raid-pmodal-overlay {position: fixed;inset: 0;z-index: var(--z-index-modal);display: none;align-items: flex-end;justify-content: center;background: rgba(2, 10, 20, 0.62);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px)}
.raid-pmodal-overlay.open {display: flex}
.raid-pmodal {width: 100%;max-width: 560px;max-height: 82vh;overflow-y: auto;overscroll-behavior: contain;box-sizing: border-box;padding: 16px 16px 24px;background: linear-gradient(180deg, #0e2a41, #081a2c);color: #e8f2fa;border-radius: 18px 18px 0 0;box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);animation: raid-pmodal-up 0.22s ease}
@keyframes raid-pmodal-up {from { transform: translateY(24px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }}
@media (min-width: 600px) {.raid-pmodal-overlay {align-items: center;padding: 24px}
.raid-pmodal {border-radius: 18px}}
.raid-pmodal-head {display: flex;align-items: center;gap: 8px}
.raid-pmodal-title {font-size: 15px;font-weight: 800;letter-spacing: 0.02em;min-width: 0}
.raid-pmodal-count {font-size: 11px;font-weight: 700;color: #7dd3fc;white-space: nowrap}
.raid-pmodal-close {margin-left: auto;flex-shrink: 0;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;width: 32px;height: 32px;border-radius: 50%;color: rgba(232, 242, 250, 0.85);background: rgba(255, 255, 255, 0.08);border: 1px solid rgba(255, 255, 255, 0.2)}
.raid-pmodal-note {font-size: 10.5px;color: rgba(214, 230, 242, 0.6);margin: 6px 0 10px;line-height: 1.6}
@media (prefers-reduced-motion: reduce) {.raid-boss-svg,
.raid-boss-mote,
.raid-boss-swing,
.raid-stage-boss.hit,
.raid-stage-boss.hit-mine,
.raid-hand.attacking {animation: none}
.raid-pmodal {animation: none}
.raid-countdown-value.flip {animation: none}
.raid-dmg-pop {animation: raid-dmg-fade 1.5s ease forwards}
@keyframes raid-dmg-fade {0%, 70% { opacity: 1; }
100% { opacity: 0; }}}
.raid-stage-boss.defeated .raid-boss-svg {animation: none;filter: grayscale(1) brightness(0.7) drop-shadow(0 14px 24px rgba(0, 4, 10, 0.7));opacity: 0.55}
.raid-stage-boss.defeated .raid-stage-boss-glow {opacity: 0.25}
.raid-defeat-badge {position: absolute;left: 50%;top: 46%;translate: -50% -50%;z-index: 6;display: inline-flex;align-items: center;gap: 6px;padding: 8px 18px;font-size: 14px;font-weight: 800;letter-spacing: 0.12em;color: #fde68a;background: rgba(64, 34, 6, 0.72);border: 1px solid rgba(253, 230, 138, 0.55);border-radius: 999px;box-shadow: 0 6px 20px rgba(0, 4, 10, 0.6);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px)}
.raid-result {max-width: 460px;margin: 14px auto 0;padding: 12px 16px;box-sizing: border-box;background: rgba(255, 255, 255, 0.06);border: 1px solid rgba(253, 230, 138, 0.35);border-radius: var(--radius-md)}
.raid-result-title {font-size: 11px;font-weight: 800;letter-spacing: 0.14em;color: #fde68a;text-align: center;margin-bottom: 8px}
.raid-result-rows {display: flex;flex-direction: column;gap: 6px}
.raid-result-row {display: flex;align-items: baseline;justify-content: space-between;gap: 10px}
.raid-result-row .k {font-size: 12px;color: rgba(214, 230, 242, 0.75)}
.raid-result-row .v {display: inline-flex;align-items: center;gap: 4px;font-size: 18px;font-weight: 800;font-variant-numeric: tabular-nums;color: #7dd3fc}
.raid-result-row .v small {font-size: 11px;font-weight: 700;color: rgba(214, 230, 242, 0.6)}
.raid-defeat-overlay {position: absolute;inset: 0;z-index: 8;display: none;align-items: center;justify-content: center;background: rgba(2, 10, 20, 0.72);backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px)}
.raid-defeat-overlay.show {display: flex;animation: raid-defeat-in 0.35s ease}
@keyframes raid-defeat-in {from { opacity: 0; }
to { opacity: 1; }}
.raid-defeat-box {display: flex;flex-direction: column;align-items: center;gap: 8px;padding: 20px 28px;text-align: center}
.raid-defeat-check {width: 52px;height: 52px;color: #fde68a}
.raid-defeat-title {font-size: 22px;font-weight: 800;letter-spacing: 0.14em;color: #fde68a;text-shadow: 0 0 18px rgba(245, 183, 60, 0.55)}
.raid-defeat-sub {margin: 0 0 6px;font-size: 12px;color: rgba(232, 242, 250, 0.85)}
@media (prefers-reduced-motion: reduce) {.raid-defeat-overlay.show { animation: none; }}