/* ═══════════════════════════════════════════════════════════════
   諸神黃昏 · 盲盒決鬥 — 熱血華麗戰場
   ═══════════════════════════════════════════════════════════════ */

.battle-view {
    position: relative;
    min-height: min(720px, 78dvh, 78vh);
    padding: 0 0 1rem;
}

/* 戰鬥說明 · 計分板橫條最右側 */
.battle-rules--scoreboard {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.75rem;
    align-self: center;
    pointer-events: auto;
}

/* 大廳 · 標題下方置中 */
.battle-rules--lobby {
    position: static;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0.65rem 0 0;
    padding: 0;
    z-index: 1;
}

.battle-view.battle-view--fighting .battle-rules--lobby {
    display: none;
}

/* 玩法說明浮層（大廳／對戰共用）· 不攔截全屏點擊 */
.battle-rules-flyout {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
}

.battle-rules-flyout .battle-rules__panel {
    position: fixed;
    top: 0;
    right: 0;
    margin-top: 0;
    z-index: 201;
    pointer-events: auto;
}

.battle-rules__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.battle-rules__head .battle-rules__title {
    margin: 0;
    flex: 1 1 auto;
    text-align: center;
    padding: 0 2.25rem;
}

.battle-rules__close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.battle-rules__close:hover {
    background: rgba(255, 110, 199, 0.35);
    border-color: rgba(255, 180, 220, 0.45);
}

.battle-rules__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 235, 200, 0.95);
    background: linear-gradient(135deg, rgba(50, 28, 90, 0.92), rgba(24, 12, 48, 0.95));
    border: 1px solid rgba(200, 150, 255, 0.45);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.battle-rules__toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 200, 100, 0.55);
    box-shadow: 0 6px 22px rgba(127, 0, 255, 0.35);
}

.battle-rules.is-open .battle-rules__toggle,
.battle-rules__toggle.is-open {
    border-color: rgba(255, 215, 0, 0.55);
    background: linear-gradient(135deg, rgba(70, 40, 110, 0.95), rgba(32, 16, 60, 0.98));
}

.battle-rules__toggle-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.battle-rules__chevron {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-left: 0.1rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    opacity: 0.85;
}

.battle-rules.is-open .battle-rules__chevron,
.battle-rules__toggle.is-open .battle-rules__chevron {
    transform: rotate(-135deg) translateY(2px);
}

.battle-rules__panel {
    margin-top: 0.45rem;
    width: min(340px, 92vw);
    max-height: min(320px, 50vh);
    overflow-y: auto;
    padding: 0.75rem 0.9rem;
    background: rgba(8, 4, 22, 0.94);
    border: 1px solid rgba(200, 150, 255, 0.35);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    animation: battleRulesIn 0.28s ease-out;
}

.battle-rules__panel[hidden] {
    display: none;
}

@keyframes battleRulesIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.battle-rules__title {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #ffd54f;
    text-align: center;
}

.battle-rules__list {
    margin: 0;
    padding: 0 0 0 1.1rem;
    font-size: 0.74rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    text-align: left;
}

.battle-rules__list li {
    margin-bottom: 0.4rem;
}

.battle-rules__list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .battle-scoreboard {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        padding: 0.55rem 0.65rem;
    }

    .battle-scoreboard__core {
        flex: none;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 0.35rem 0.5rem;
        justify-content: center;
    }

    .battle-scoreboard__record {
        display: none;
    }

    .battle-scoreboard__side--player {
        grid-column: 1;
        justify-self: stretch;
    }

    .battle-scoreboard__vs {
        grid-column: 2;
        grid-row: 1;
    }

    .battle-scoreboard__side--foe {
        grid-column: 3;
        justify-self: stretch;
    }

    .battle-scoreboard__label {
        max-width: 100%;
        font-size: 0.74rem;
    }

    .battle-rules--scoreboard {
        margin-left: 0;
        padding-left: 0;
        width: 100%;
        align-items: center;
        align-self: center;
    }

    .battle-rules-flyout .battle-rules__panel {
        width: min(300px, calc(100vw - var(--void-side-nav, 96px) - 2rem));
    }
}

/* 大廳標題 + 戰績說明 · 置中對齊 */
.battle-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: min(42rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

.battle-intro__panel {
    position: relative;
    width: min(100%, 42rem);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 1.6rem) clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 3vw, 1.6rem);
    border-radius: 20px;
    background: rgba(6, 4, 18, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── 戰鬥中心 Hub（遊樂場同款） ─────────────────────────────── */
.battle-hub-hero {
    text-align: center;
    margin-bottom: 1.25rem;
}

.battle-hub-hero h2 {
    margin: 0 0 0.35rem;
    width: 100%;
    font-family: Orbitron, 'Noto Sans TC', sans-serif;
    font-size: clamp(1.4rem, 3.2vw, 1.9rem);
    letter-spacing: 0.1em;
    text-align: center;
    background: linear-gradient(105deg, #ffb347 0%, #ff6688 42%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.battle-hub-hero__sub {
    margin: 0;
    width: 100%;
    font-size: 0.88rem;
    color: rgba(200, 220, 255, 0.78);
    letter-spacing: 0.06em;
    text-align: center;
}

.battle-hub {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 auto 1.25rem;
    width: 100%;
    max-width: 420px;
}

@media (min-width: 640px) {
    .battle-hub {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 920px;
    }
}

.battle-mode-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    min-height: 220px;
    padding: 1.35rem 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: linear-gradient(165deg, rgba(14, 10, 32, 0.95), rgba(6, 4, 18, 0.98));
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    overflow: hidden;
}

.battle-mode-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 180, 80, 0.12), transparent 62%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.battle-mode-card:hover::before {
    opacity: 1;
}

.battle-mode-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 180, 80, 0.55);
    box-shadow: 0 16px 42px rgba(255, 100, 40, 0.18);
}

.battle-mode-card__icon {
    font-size: 2rem;
    line-height: 1;
}

.battle-mode-card__title {
    display: block;
    width: 100%;
    font-size: clamp(1rem, 2vw, 1.12rem);
    font-weight: 800;
    color: #fff8ec;
    letter-spacing: 0.04em;
    text-align: center;
}

.battle-mode-card__desc {
    margin: 0;
    width: 100%;
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(220, 215, 240, 0.88);
    flex: 1 1 auto;
    text-align: center;
}

.battle-mode-card__meta {
    width: 100%;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(160, 220, 255, 0.82);
    letter-spacing: 0.03em;
    text-align: center;
}

.battle-mode-card__tag {
    margin-top: 0.35rem;
    padding: 0.38rem 0.95rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #1a1020;
    background: linear-gradient(135deg, #ffe08a 0%, #ffb84d 48%, #ff8844 100%);
    border: 1px solid rgba(255, 220, 140, 0.55);
    box-shadow:
        0 4px 14px rgba(255, 140, 50, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.battle-mode-card--blind {
    border-color: rgba(255, 176, 128, 0.35);
}

.battle-mode-card--world-boss {
    border-color: rgba(196, 160, 255, 0.35);
}

.battle-mode-card--star-god {
    border-color: rgba(123, 63, 242, 0.45);
    background: linear-gradient(165deg, rgba(10, 6, 28, 0.96), rgba(4, 3, 16, 0.98));
}

.battle-mode-card--star-god:hover {
    border-color: rgba(178, 75, 243, 0.65);
    box-shadow: 0 16px 42px rgba(123, 63, 242, 0.22);
}

.battle-mode-card--apex {
    border-color: rgba(255, 209, 102, 0.38);
    background: linear-gradient(165deg, rgba(12, 10, 28, 0.96), rgba(6, 5, 18, 0.98));
}

.battle-mode-card--apex::before {
    background: radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.14), transparent 62%);
}

.battle-mode-card--apex:hover {
    border-color: rgba(255, 209, 102, 0.62);
    box-shadow: 0 16px 42px rgba(255, 180, 80, 0.18);
}

.battle-mode-card--abyss {
    border-color: rgba(180, 100, 255, 0.35);
    background: linear-gradient(165deg, rgba(14, 8, 32, 0.96), rgba(6, 4, 18, 0.98));
}

.battle-mode-card--abyss::before {
    background: radial-gradient(circle at 50% 0%, rgba(180, 80, 255, 0.16), transparent 62%);
}

.battle-mode-card--abyss:hover {
    border-color: rgba(192, 132, 252, 0.6);
    box-shadow: 0 16px 42px rgba(140, 60, 220, 0.22);
}

.battle-mode-detail.hidden {
    display: none;
}

.battle-back-hub {
    display: block;
    width: fit-content;
    margin: 0 auto 0.85rem;
    padding: 0.45rem 0.85rem;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(220, 215, 255, 0.88);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.04em;
}

.battle-back-hub:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.battle-view--in-detail .battle-hub-hero,
.battle-view--in-detail .battle-hub {
    display: none;
}

.battle-view--fighting .battle-hub-hero,
.battle-view--fighting .battle-hub {
    display: none !important;
}

.battle-view--fighting .battle-back-hub {
    display: none;
}

.battle-view--fighting .battle-mode-detail {
    margin: 0;
}

/* ── 世界 Boss 詳情 meta ─────────────────────────────────── */
.battle-mode-meta {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto 1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 140, 80, 0.28);
    background: rgba(0, 0, 0, 0.35);
    display: grid;
    gap: 0.65rem;
}

.battle-mode-meta__row {
    display: grid;
    grid-template-columns: minmax(72px, 88px) 1fr;
    gap: 0.65rem;
    align-items: start;
    text-align: left;
}

.battle-mode-meta__row dt {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(255, 200, 140, 0.88);
    letter-spacing: 0.06em;
    text-align: center;
}

.battle-mode-meta__row dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f0e8ff;
    line-height: 1.55;
}

.battle-lobby--world-boss .battle-btn-start--world-boss {
    background: linear-gradient(135deg, #ff6a28 0%, #c41e3a 45%, #7f00ff 100%);
    border: 1px solid rgba(255, 180, 120, 0.45);
}

.battle-lobby__hint--wb {
    max-width: 36rem;
    margin-bottom: 1rem;
}

.battle-hero {
    width: 100%;
    text-align: center;
    padding: 0.25rem 0 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.85rem;
}

.battle-hero__title {
    font-size: clamp(1.35rem, 3.2vw, 1.85rem);
    font-weight: 800;
    color: #fff8e8;
    margin: 0 0 0.4rem;
    letter-spacing: 0.04em;
    text-align: center;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.95),
        0 0 28px rgba(255, 160, 60, 0.35);
}

.battle-hero__sub {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e8e4f8;
    margin: 0 auto;
    max-width: 36rem;
    line-height: 1.6;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.battle-view--fighting .battle-intro {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* ── Lobby ─────────────────────────────────────────────────── */
.battle-lobby {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    padding: 0.35rem 0 1.5rem;
    transition: opacity 0.4s ease;
}

.battle-lobby__record,
.battle-lobby__count,
.battle-lobby__daily,
.battle-lobby__hint,
.battle-lobby__rewards {
    width: 100%;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.battle-lobby__record {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffe9b8;
    margin: 0 auto 0.55rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.battle-lobby__count {
    font-size: 0.98rem;
    font-weight: 600;
    color: #fff5e6;
    margin: 0 auto 0.5rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.battle-lobby__count.is-low {
    color: #ffb4b4;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.battle-lobby__daily {
    font-size: 0.95rem;
    font-weight: 700;
    color: #d4ebff;
    margin: 0 auto 0.5rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.battle-lobby__daily.is-limit {
    color: #ffc4b8;
}

.battle-lobby__hint {
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2dff0;
    margin: 0 auto 0.65rem;
    line-height: 1.65;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.battle-lobby__rewards {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffe9a8;
    margin: 0 auto 1.1rem;
    padding: 0.65rem 0.5rem 0;
    line-height: 1.55;
    border-top: 1px solid rgba(255, 215, 0, 0.35);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.battle-lobby .battle-btn-start {
    margin: 0 auto;
}

.battle-btn-start,
.battle-btn-back {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.battle-btn-start {
    color: #1a0a2e;
    background: linear-gradient(135deg, #ffd700 0%, #ff8a50 50%, #ff6b9d 100%);
    box-shadow: 0 4px 24px rgba(255, 140, 60, 0.45);
}

.battle-btn-start:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 32px rgba(255, 140, 60, 0.6);
}

.battle-btn-start:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.battle-btn-back {
    color: #fff;
    background: linear-gradient(135deg, rgba(80, 60, 140, 0.9), rgba(40, 30, 80, 0.95));
    border: 1px solid rgba(255, 200, 100, 0.3);
}

.battle-btn-back:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(120, 80, 200, 0.4);
}

.battle-lobby__title {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 800;
    color: #fff8e8;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    margin-bottom: 0.5rem;
    text-align: center;
}

.battle-lobby__rules {
    color: #e2dff0;
    font-size: 0.9rem;
    max-width: 36rem;
    margin: 0 auto 1.25rem;
    line-height: 1.6;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.battle-card-count {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff5e6;
    margin-bottom: 1.25rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.battle-card-count.is-low {
    color: #ff8a8a;
}

.battle-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Arena shell ───────────────────────────────────────────── */
.battle-arena {
    position: relative;
    display: none;
    flex-direction: column;
    min-height: min(680px, 75dvh, 75vh);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 200, 100, 0.2);
    box-shadow:
        0 0 60px rgba(120, 60, 255, 0.25),
        inset 0 0 80px rgba(0, 0, 0, 0.4);
}

.battle-arena.is-active {
    display: flex;
    animation: battleArenaIn 0.8s ease-out;
}

.battle-view:has(.battle-rules-flyout.is-open) {
    overflow: visible;
}

@keyframes battleArenaIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.battle-clash-wrap--shake {
    animation: battleShake 0.48s ease-out;
}

@keyframes battleShake {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(-6px, 2px) rotate(-0.3deg); }
    30% { transform: translate(8px, -3px) rotate(0.4deg); }
    45% { transform: translate(-5px, 1px); }
    60% { transform: translate(6px, 2px); }
}

/* Background VFX */
.battle-arena__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(120, 40, 200, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(255, 80, 40, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(40, 120, 255, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, rgba(8, 4, 24, 0.3) 0%, rgba(4, 2, 12, 0.85) 100%);
}

.battle-arena__rays {
    position: absolute;
    inset: -20%;
    background: conic-gradient(
        from 0deg at 50% 45%,
        transparent 0deg,
        rgba(255, 200, 80, 0.06) 20deg,
        transparent 40deg,
        rgba(200, 100, 255, 0.05) 80deg,
        transparent 100deg,
        rgba(255, 120, 60, 0.05) 140deg,
        transparent 180deg
    );
    animation: battleRaysSpin 24s linear infinite;
    opacity: 0.9;
}

@keyframes battleRaysSpin {
    to { transform: rotate(360deg); }
}

.battle-arena__embers {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 10% 20%, rgba(255, 200, 100, 0.8), transparent),
        radial-gradient(2px 2px at 30% 70%, rgba(255, 120, 60, 0.6), transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(200, 180, 255, 0.7), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(255, 220, 120, 0.5), transparent);
    background-size: 100% 100%;
    animation: battleEmbers 6s ease-in-out infinite alternate;
    opacity: 0.5;
}

@keyframes battleEmbers {
    from { opacity: 0.35; transform: translateY(0); }
    to { opacity: 0.65; transform: translateY(-8px); }
}

/* HUD */
.battle-arena__hud {
    position: relative;
    z-index: 2;
    padding: 1rem 1.25rem 0.5rem;
    overflow: visible;
}

.battle-arena:has(.battle-rules.is-open) {
    overflow: visible;
}

.battle-scoreboard {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.65rem 1rem 0.65rem 1.15rem;
    margin-bottom: 0.35rem;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(40, 20, 60, 0.65) 50%, rgba(0, 0, 0, 0.55) 100%);
    border: 1px solid rgba(255, 200, 100, 0.25);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.battle-scoreboard__core {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.battle-scoreboard__record {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.battle-scoreboard__record--player {
    border-color: rgba(255, 213, 79, 0.28);
}

.battle-scoreboard__record--foe {
    border-color: rgba(77, 208, 225, 0.28);
}

.battle-scoreboard__record-tag {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.15rem;
}

.battle-scoreboard__record-wl {
    font-size: clamp(0.8rem, 1.1vw, 0.92rem);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.battle-scoreboard__record--player .battle-scoreboard__record-wl {
    color: #ffd54f;
    text-shadow: 0 0 12px rgba(255, 213, 79, 0.45);
}

.battle-scoreboard__record--foe .battle-scoreboard__record-wl {
    color: #4dd0e1;
    text-shadow: 0 0 12px rgba(77, 208, 225, 0.4);
}

.battle-scoreboard__side {
    text-align: center;
    min-width: 5rem;
}

.battle-scoreboard__side--player .battle-scoreboard__score {
    color: #ffd54f;
    text-shadow: 0 0 20px rgba(255, 213, 79, 0.8);
}

.battle-scoreboard__side--foe .battle-scoreboard__score {
    color: #4dd0e1;
    text-shadow: 0 0 20px rgba(77, 208, 225, 0.7);
}

.battle-scoreboard__label {
    font-size: clamp(0.78rem, 1.25vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: none;
    max-width: min(11rem, 30vw);
    margin: 0 auto 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-scoreboard__score {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.1;
    transition: transform 0.3s ease;
}

.battle-scoreboard__score.battle-score-pop {
    animation: scorePop 0.5s ease-out;
}

@keyframes scorePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.battle-scoreboard__vs {
    position: relative;
    font-size: 1.5rem;
    font-weight: 900;
    color: #ff6b9d;
    text-shadow: 0 0 16px rgba(255, 107, 157, 0.9);
}

.battle-scoreboard__vs-glow {
    position: absolute;
    inset: -12px -20px;
    background: radial-gradient(circle, rgba(255, 80, 120, 0.4) 0%, transparent 70%);
    animation: vsPulse 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vsPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

.battle-round-tag {
    text-align: center;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.95rem;
    color: rgba(255, 220, 150, 0.95);
    letter-spacing: 0.08em;
    transition: transform 0.3s ease, color 0.3s ease;
}

.battle-round-tag.is-pulse {
    animation: roundTagPulse 0.6s ease-out;
}

.battle-round-tag.is-round-banner {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 24px rgba(255, 215, 0, 0.7);
    animation: roundBanner 1.6s ease-out;
}

@keyframes roundTagPulse {
    0%, 100% { opacity: 0.82; }
    50% { opacity: 1; }
}

@keyframes roundBanner {
    0% { letter-spacing: 0.2em; opacity: 0; }
    30% { opacity: 1; }
    100% { letter-spacing: 0.08em; }
}

.battle-phase-hint {
    text-align: center;
    min-height: 1.6em;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(200, 180, 255, 0.95);
    text-shadow: 0 0 12px rgba(160, 120, 255, 0.6);
    animation: phaseHintGlow 2s ease-in-out infinite;
}

.battle-skip-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.battle-btn-skip {
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(255, 200, 100, 0.45);
    background: rgba(20, 8, 40, 0.75);
    color: rgba(255, 220, 150, 0.95);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.battle-btn-skip:hover {
    transform: translateY(-1px);
    background: rgba(60, 30, 100, 0.85);
    box-shadow: 0 0 16px rgba(255, 140, 60, 0.35);
}

@keyframes phaseHintGlow {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

/* ── 對戰效能：減少持續動畫與全場重繪 ─────────────────────── */
.battle-view--fighting .battle-arena__rays,
.battle-view--fighting .battle-arena__embers {
    animation-play-state: paused;
    opacity: 0.4;
}

.battle-view--fighting .battle-scoreboard__vs-glow {
    animation: none;
    opacity: 0.6;
}

.battle-view--fighting .battle-phase-hint {
    animation: none;
}

.battle-view--fighting .battle-log {
    backdrop-filter: none;
}

.battle-view--fighting .battle-card-flipper.is-flipped .battle-card-aura {
    animation: none;
    opacity: 0.8;
}

.battle-view--fighting .battle-clash.is-charging .battle-card-slot__lift {
    animation: cardChargeLite 0.85s ease-in-out infinite alternate;
}

.battle-view--fighting .battle-clash.is-charging .battle-card-slot {
    transform: none;
}

.battle-view--fighting .battle-card-flipper.is-flipped.is-win-glow {
    animation: winPulse 1.2s ease-in-out infinite;
    transform: none;
    filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.8));
}

.battle-view--fighting .battle-card-flipper.is-flipped.is-lose-dim {
    transform: scale(0.94);
}

.battle-view--fighting .battle-card-score.is-counting {
    animation: none;
    text-shadow: 0 0 10px currentColor;
}

/* Stage */
.battle-stage {
    --battle-deck-max: min(380px, 40vw);
    --battle-deck-gap: clamp(7px, 0.9vw, 12px);
    position: relative;
    z-index: 1;
    flex: 1;
    contain: layout style;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.9fr) minmax(0, 1.22fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    padding: 0.15rem 0.35rem 0.35rem;
    min-height: min(480px, 52dvh, 52vh);
}

.battle-flank,
.battle-clash-wrap {
    grid-row: 1;
}

.battle-clash-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 0;
    contain: none;
}

/* 兩側 9 張牌組 */
.battle-flank {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: start;
    min-width: 0;
    padding: 0 0.15rem;
    transform: translateY(clamp(-1.75rem, -5vh, -0.35rem));
}

.battle-flank.is-empty {
    opacity: 0.35;
}

.battle-flank__title {
    margin: 0 0 0.45rem;
    font-size: clamp(0.72rem, 1.1vw, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    color: rgba(255, 220, 150, 0.85);
    white-space: nowrap;
}

.battle-flank--foe .battle-flank__title {
    color: rgba(150, 220, 255, 0.85);
}

.battle-deck-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--battle-deck-gap);
    width: 100%;
    max-width: var(--battle-deck-max);
}

.battle-deck-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.battle-deck-thumb__pedestal {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    height: 22%;
    border-radius: 50% 50% 8px 8px;
    background: linear-gradient(180deg, rgba(80, 60, 40, 0.5), rgba(30, 20, 10, 0.85));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 200, 100, 0.2);
}

.battle-flank--foe .battle-deck-thumb__pedestal {
    background: linear-gradient(180deg, rgba(40, 60, 90, 0.5), rgba(10, 20, 40, 0.9));
    border-color: rgba(100, 180, 255, 0.25);
}

.battle-deck-thumb__frame {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 92%;
    border-radius: clamp(6px, 0.6vw, 9px);
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    background: #12082a;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.battle-view--fighting .battle-deck-thumb__frame {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.battle-deck-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.battle-deck-thumb__fallback-name {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.2rem;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
    word-break: break-all;
}

.battle-deck-thumb__frame--empty .battle-deck-thumb__img--back {
    opacity: 0.45;
}

.battle-deck-thumb__idx {
    position: absolute;
    top: 3px;
    right: 4px;
    z-index: 2;
    font-size: clamp(0.6rem, 0.85vw, 0.72rem);
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}

.battle-deck-thumb__atk {
    position: absolute;
    left: 3px;
    bottom: 3px;
    z-index: 2;
    font-size: clamp(0.52rem, 0.75vw, 0.68rem);
    font-weight: 800;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 180, 80, 0.35);
    color: #ffd080;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    pointer-events: none;
    white-space: nowrap;
}

.battle-deck-thumb[data-rarity="SEC"] .battle-deck-thumb__frame,
.battle-deck-thumb[data-rarity="UR"] .battle-deck-thumb__frame,
.battle-deck-thumb[data-rarity="MR"] .battle-deck-thumb__frame {
    box-shadow: 0 0 12px rgba(255, 200, 80, 0.45);
}

.battle-deck-thumb.is-spent .battle-deck-thumb__frame {
    transform: scale(0.96);
    opacity: 0.82;
    filter: saturate(0.88);
}

.battle-deck-thumb.is-win .battle-deck-thumb__frame {
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.7);
    border-color: rgba(255, 215, 0, 0.6);
}

.battle-deck-thumb.is-lose .battle-deck-thumb__frame {
    filter: grayscale(0.5) brightness(0.65);
    opacity: 0.7;
}

.battle-deck-thumb.is-draw .battle-deck-thumb__frame {
    border-color: rgba(200, 200, 200, 0.4);
}

.battle-clash {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    width: 100%;
    max-width: 920px;
    position: relative;
    transition: filter 0.3s ease;
}

.battle-clash > .battle-clash__burst {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

.battle-clash .battle-card-slot[data-side='player'] {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
}

.battle-clash .battle-clash__center {
    grid-column: 2;
    grid-row: 1;
    z-index: 3;
}

.battle-clash .battle-card-slot[data-side='opponent'] {
    grid-column: 3;
    grid-row: 1;
    z-index: 2;
}

.battle-clash.is-charging .battle-card-slot__lift {
    animation: cardChargeLite 0.9s ease-in-out infinite alternate;
}

@keyframes cardChargeLite {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

.battle-arena--duel .battle-arena__rays,
.battle-arena--duel .battle-arena__embers {
    display: none;
}

.battle-arena--duel .battle-flank {
    opacity: 0.82;
}

.battle-clash.is-impact .battle-clash__bolt {
    animation: boltStrike 0.6s ease-out;
}

.battle-clash.is-impact .battle-clash__ring {
    animation: ringExpand 0.7s ease-out forwards;
}

.battle-clash.is-win-flash .battle-verdict--show {
    animation: verdictPop 0.55s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}

.battle-clash__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 3.25rem;
    padding: 0 0.2rem;
    position: relative;
    z-index: 6;
}

.battle-clash__ring {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 80px;
    height: 80px;
    margin: 0;
    border: 2px solid rgba(255, 220, 100, 0.6);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

@keyframes ringExpand {
    0% {
        opacity: 1;
        transform: scale(0.3);
    }
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

.battle-clash__bolt {
    display: block;
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(255, 220, 80, 0.9));
    opacity: 0.85;
    position: relative;
    z-index: 2;
}

.battle-clash__center .battle-verdict {
    margin-top: 0.2rem;
    max-width: 5.5rem;
    white-space: normal;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

@keyframes boltStrike {
    0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
    40% { transform: scale(1.4) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 0.9; }
}

.battle-clash__burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    pointer-events: none;
    opacity: 0;
    z-index: 5;
}

.battle-clash__burst.is-active {
    animation: clashBurst 0.65s ease-out forwards;
}

@keyframes clashBurst {
    0% {
        opacity: 1;
        background: radial-gradient(circle, rgba(255, 240, 150, 0.9) 0%, rgba(255, 100, 50, 0.4) 30%, transparent 70%);
        transform: scale(0.2);
    }
    100% {
        opacity: 0;
        transform: scale(2.2);
    }
}

/* Verdict */
.battle-verdict {
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    font-weight: 800;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(4px);
    white-space: nowrap;
    letter-spacing: 0.12em;
}

.battle-verdict--show {
    opacity: 1;
    transform: translateY(0);
}

.battle-verdict.is-player-win {
    color: #ffd54f;
    text-shadow: 0 0 20px rgba(255, 213, 79, 1);
}

.battle-verdict.is-foe-win {
    color: #4dd0e1;
    text-shadow: 0 0 20px rgba(77, 208, 225, 0.9);
}

.battle-verdict.is-draw {
    color: #e0e0e0;
}

@keyframes verdictPop {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Card slot & 3D flip ───────────────────────────────────── */
.battle-card-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.battle-card-slot__lift {
    transform-style: preserve-3d;
    width: 100%;
    display: flex;
    justify-content: center;
}

.battle-clash {
    transform-style: preserve-3d;
}

.battle-card-flipper {
    position: relative;
    width: clamp(140px, 22vw, 200px);
    aspect-ratio: 3 / 4;
    transform-style: preserve-3d;
}

.battle-card-flipper.is-revealing {
    animation: battleCardReveal 0.52s cubic-bezier(0.22, 0.9, 0.28, 1);
}

@keyframes battleCardReveal {
    0% {
        transform: scale(0.9);
        filter: brightness(0.85);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.battle-card-flipper.is-flipping,
.battle-card-flipper.is-flipped {
    will-change: transform, opacity;
}

.battle-view--fighting .battle-card-flipper.is-flipping {
    animation: none;
}

/* 翻開後強制顯示卡面（避免 3D 翻轉失效只見卡背） */
.battle-card-flipper:not(.is-face-up) .battle-card-face--front {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.battle-card-flipper:not(.is-face-up) .battle-card-face--back {
    visibility: visible;
    opacity: 1;
}

.battle-card-flipper.is-face-up .battle-card-face--back {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.battle-card-flipper.is-face-up .battle-card-face--front {
    visibility: visible;
    opacity: 1;
    transform: rotateY(0deg) translateZ(2px);
    z-index: 2;
}

.battle-card-flipper.is-flipped {
    transform: none;
}

.battle-card-flipper.is-win-glow {
    filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.85));
    animation: winPulse 1.2s ease-in-out infinite;
}

.battle-card-flipper.is-lose-dim {
    opacity: 0.55;
    filter: grayscale(0.4) brightness(0.7);
    transform: scale(0.94);
}

@keyframes winPulse {
    0%, 100% { filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.6)); }
    50% { filter: drop-shadow(0 0 32px rgba(255, 215, 0, 1)); }
}

.battle-card-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.battle-card-face--back {
    transform: rotateY(0deg) translateZ(1px);
    background: linear-gradient(145deg, #1a0a2e 0%, #0d0520 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.32s ease, visibility 0.32s ease;
}

.battle-card-back-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.battle-card-back-label {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: rgba(100, 180, 255, 0.95);
    text-shadow: 0 0 20px rgba(80, 160, 255, 0.8);
}

.battle-card-face--front {
    transform: rotateY(180deg) translateZ(1px);
    background: linear-gradient(180deg, #2a1a4a 0%, #12082a 100%);
    display: flex;
    flex-direction: column;
    transition: opacity 0.32s ease, visibility 0.32s ease;
}

.battle-card-face--front[data-rarity="SEC"],
.battle-card-slot[data-rarity="SEC"] .battle-card-face--front {
    box-shadow:
        0 0 30px rgba(255, 200, 80, 0.5),
        inset 0 0 0 2px rgba(255, 215, 0, 0.5);
}

.battle-card-face--front[data-rarity="SSR"],
.battle-card-slot[data-rarity="SSR"] .battle-card-face--front {
    box-shadow: 0 0 24px rgba(200, 120, 255, 0.45);
}

.battle-card-art {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.battle-card-art__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.battle-card-art--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(120, 80, 200, 0.4), transparent);
}

.battle-card-art__emoji {
    font-size: 3rem;
    opacity: 0.7;
}

.battle-card-meta {
    padding: 0.45rem 0.55rem 0.55rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    font-size: clamp(0.72rem, 1.1vw, 0.82rem);
    line-height: 1.35;
    text-align: center;
}

.battle-clash .battle-card-meta {
    font-size: clamp(0.78rem, 1.2vw, 0.88rem);
}

.battle-card-meta__name {
    display: block;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.battle-card-meta__rarity {
    color: #ffd54f;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.battle-card-meta__stats {
    color: rgba(255, 255, 255, 0.75);
}

/* JPG 全圖卡：圖上已有名稱／數值，隱藏底部 meta 列 */
.battle-card-face--full-bleed {
    background: transparent;
}

.battle-card-face--full-bleed .battle-card-art {
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}

.battle-card-art--full-bleed .battle-card-art__img {
    object-fit: contain;
    object-position: center center;
}

.battle-card-face--full-bleed .battle-card-meta {
    display: none;
}

.battle-card-aura {
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}

.battle-card-flipper.is-flipped .battle-card-aura {
    opacity: 1;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 200, 100, 0.25), transparent 70%);
    animation: auraBreath 2s ease-in-out infinite;
}

@keyframes auraBreath {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.battle-card-score {
    margin-top: 0.55rem;
    font-size: clamp(1.05rem, 1.9vw, 1.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.battle-card-score.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 與翻牌同時顯示，避免戰力晚於卡面出現 */
.battle-card-score.is-visible.is-sync-flip {
    transition: opacity 0.08s ease, transform 0.08s ease;
}

.battle-card-score.battle-score-pop {
    animation: battleCardScorePop 0.45s ease-out;
}

@keyframes battleCardScorePop {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.battle-card-slot[data-side="player"] .battle-card-score {
    color: #ffd54f;
}

.battle-card-slot[data-side="opponent"] .battle-card-score {
    color: #4dd0e1;
}

.battle-card-score.is-counting {
    animation: scoreFlicker 0.12s ease-in-out infinite alternate;
}

@keyframes scoreFlicker {
    from { text-shadow: 0 0 8px currentColor; }
    to { text-shadow: 0 0 18px currentColor; }
}

/* Log · 戰場中央 */
.battle-log-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(560px, 94%);
    max-width: 100%;
    z-index: 4;
    margin: 0 auto;
    pointer-events: auto;
}

.battle-log__title {
    margin: 0 0 0.35rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(255, 220, 150, 0.9);
    text-shadow: 0 0 12px rgba(255, 200, 80, 0.35);
}

.battle-log {
    max-height: min(150px, 20vh);
    padding: 0.55rem 0.9rem;
    background: rgba(6, 4, 18, 0.82);
    border: 1px solid rgba(255, 200, 100, 0.22);
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.battle-log__line {
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    word-break: break-word;
}

.battle-log__line:last-child {
    border-bottom: none;
}

/* Result · 戰場中央（對撞區上方） */
.battle-result {
    display: none;
    position: absolute;
    left: 50%;
    top: clamp(34%, 38vh, 44%);
    transform: translate(-50%, -50%);
    z-index: 30;
    width: min(440px, 92%);
    padding: 1.35rem 1.5rem 1.25rem;
    text-align: center;
    pointer-events: auto;
    background: rgba(6, 4, 20, 0.92);
    border: 1px solid rgba(255, 200, 100, 0.38);
    border-radius: 14px;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.battle-view--result .battle-arena__hud,
.battle-view--result .battle-stage {
    opacity: 0.42;
    filter: saturate(0.78);
    pointer-events: none;
    transition: opacity 0.55s ease, filter 0.55s ease;
}

.battle-result.is-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 20px)) scale(0.94);
}

.battle-result.is-active.is-reveal {
    animation: resultInCenter 1.35s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}

@keyframes resultInCenter {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 20px)) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.battle-result .void-coin-icon {
    animation: none;
    transform: none;
}

#battle-result-rewards {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.65rem;
}

.battle-result__reward {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #ffd54f;
    font-weight: 700;
}

.battle-result__coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.battle-result__coin .void-coin-icon {
    vertical-align: middle;
}

.battle-result__amount {
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .battle-stage {
        --battle-deck-max: min(430px, 36vw);
    }
}

@media (max-width: 900px) {
    .battle-result {
        top: clamp(28%, 34vh, 40%);
        width: min(400px, 96%);
        padding: 1.1rem 1.15rem;
    }

    .battle-stage {
        --battle-deck-max: min(460px, 94vw);
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 0.65rem;
        min-height: auto;
    }

    .battle-flank {
        order: 2;
        grid-row: auto;
        grid-column: 1;
        align-self: center;
        transform: none;
    }

    .battle-flank--foe {
        order: 3;
    }

    .battle-clash-wrap {
        order: 1;
        grid-row: auto;
        grid-column: 1;
    }

    .battle-log-wrap {
        order: 4;
        grid-row: auto;
        grid-column: 1;
        width: min(520px, 96vw);
    }
}

@media (max-width: 960px) {
    .battle-hub {
        max-width: 640px;
    }
}

@media (max-width: 640px) {
    .battle-hub {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .battle-mode-card {
        min-height: 200px;
    }

    .battle-view--fighting {
        min-height: auto;
    }

    .battle-view--fighting .battle-arena {
        min-height: auto;
        overflow: hidden;
    }

    .battle-view--fighting .battle-stage {
        min-height: auto;
        contain: none;
        gap: 0.45rem;
        padding-bottom: 0.15rem;
    }

    .battle-clash {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: 1fr;
        justify-items: center;
        gap: clamp(0.25rem, 2vw, 0.55rem);
        max-width: 100%;
    }

    .battle-clash__center {
        order: unset;
        min-width: 2.75rem;
        padding: 0 0.1rem;
    }

    .battle-clash__bolt {
        font-size: 1.85rem;
    }

    .battle-card-flipper {
        width: min(118px, 30vw);
    }

    .battle-card-score {
        margin-top: 0.35rem;
        font-size: clamp(0.95rem, 4vw, 1.1rem);
    }

    .battle-log {
        max-height: min(88px, 14vh);
        font-size: 0.65rem;
    }

    .battle-log-wrap {
        width: min(100%, 96vw);
    }

    .battle-skip-row {
        gap: 0.35rem;
    }

    .battle-btn-skip {
        font-size: 0.72rem;
        padding: 0.35rem 0.65rem;
    }
}

/* ── 手機對戰：穩定高度 · 聚焦中央對撞 · 減少卡頓 ── */
@media (max-width: 720px) {
    .battle-view--fighting {
        overflow-x: hidden;
        max-width: 100%;
    }

    .battle-view--fighting .battle-arena.is-active {
        min-height: min(
            520px,
            calc(100dvh - var(--void-mobile-nav-h, 54px) - env(safe-area-inset-top, 0px) - 168px)
        );
    }

    .battle-view--fighting .battle-arena__hud {
        position: sticky;
        top: 0;
        z-index: 6;
        padding: 0.45rem 0.55rem 0.3rem;
        background: linear-gradient(
            180deg,
            rgba(8, 4, 24, 0.96) 0%,
            rgba(8, 4, 24, 0.88) 78%,
            transparent 100%
        );
    }

    .battle-view--fighting .battle-scoreboard {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        padding: 0.45rem 0.5rem;
        margin-bottom: 0.2rem;
    }

    .battle-view--fighting .battle-scoreboard__core {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        flex: none;
        width: 100%;
        gap: 0.3rem 0.4rem;
        min-width: 0;
    }

    .battle-view--fighting .battle-scoreboard__record {
        display: none;
    }

    .battle-view--fighting .battle-scoreboard__side--player {
        grid-column: 1;
    }

    .battle-view--fighting .battle-scoreboard__vs {
        grid-column: 2;
        font-size: 1rem;
        padding: 0 0.15rem;
    }

    .battle-view--fighting .battle-scoreboard__side--foe {
        grid-column: 3;
    }

    .battle-view--fighting .battle-scoreboard__label {
        font-size: 0.72rem;
        max-width: 100%;
        margin-bottom: 0.1rem;
    }

    .battle-view--fighting .battle-scoreboard__score {
        font-size: 1.35rem;
        line-height: 1.1;
    }

    .battle-view--fighting .battle-rules--scoreboard {
        width: 100%;
        align-items: center;
        padding: 0;
    }

    .battle-view--fighting .battle-rules--scoreboard .battle-rules__toggle {
        padding: 0.35rem 0.7rem;
        font-size: 0.7rem;
        max-width: 100%;
    }

    .battle-view--fighting .battle-round-tag {
        margin: 0.35rem 0 0.15rem;
        font-size: 0.82rem;
    }

    .battle-view--fighting .battle-phase-hint {
        font-size: 0.92rem;
        min-height: 1.35em;
    }

    .battle-view--fighting .battle-stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        --battle-deck-max: min(240px, 68vw);
        align-items: stretch;
    }

    .battle-view--fighting .battle-flank {
        transform: none;
        order: 2;
    }

    .battle-view--fighting .battle-flank__title {
        display: none;
    }

    .battle-view--fighting .battle-deck-grid {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 4px;
        max-width: 100%;
    }

    .battle-view--fighting .battle-deck-thumb__pedestal {
        display: none;
    }

    .battle-view--fighting .battle-deck-thumb__frame {
        border-radius: 4px;
        border-width: 1px;
    }

    .battle-view--fighting .battle-deck-thumb__idx {
        font-size: 0.5rem;
        padding: 1px 3px;
        top: 1px;
        right: 2px;
    }

    .battle-view--fighting .battle-deck-thumb__atk {
        font-size: 0.45rem;
        padding: 1px 2px;
        left: 1px;
        bottom: 1px;
    }

    /* 回合對撞時隱藏兩側 9 格，避免版面上下跳動 */
    .battle-arena--duel .battle-flank {
        display: none;
    }

    .battle-view--fighting .battle-clash-wrap {
        order: 1;
        min-height: min(200px, 34dvh, 34vh);
        align-items: center;
    }

    .battle-view--fighting .battle-clash {
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: clamp(0.2rem, 1.5vw, 0.45rem);
    }

    .battle-view--fighting .battle-clash__center {
        min-width: 2.5rem;
    }

    .battle-view--fighting .battle-clash__bolt {
        font-size: 1.65rem;
    }

    .battle-view--fighting .battle-clash__ring {
        width: 56px;
        height: 56px;
        top: 44%;
    }

    .battle-view--fighting .battle-card-flipper {
        width: min(108px, 28vw);
    }

    .battle-view--fighting .battle-card-score {
        font-size: 0.82rem;
        margin-top: 0.25rem;
    }

    .battle-view--fighting .battle-log-wrap {
        order: 3;
        width: 100%;
        margin-top: 0.15rem;
    }

    .battle-view--fighting .battle-log {
        max-height: min(72px, 11dvh, 11vh);
    }

    .battle-clash-wrap--shake {
        animation: battleShakeMobile 0.32s ease-out;
    }

    @keyframes battleShakeMobile {
        0%, 100% { transform: translate(0, 0); }
        25% { transform: translate(-3px, 1px); }
        75% { transform: translate(3px, -1px); }
    }

    .battle-view--fighting .battle-arena__rays,
    .battle-view--fighting .battle-arena__embers {
        display: none;
    }

    .battle-result {
        top: 40%;
        width: min(92vw, 360px);
    }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .battle-arena.is-active {
        animation: none;
    }

    .battle-clash-wrap--shake {
        animation: none;
    }
}