@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@600;700;900&display=swap');

:root {
    --bg: #120b09;
    --card: #1d1310;
    --line: #5a3328;
    --txt: #fff2e6;
    --muted: #d6b9a3;
    --pri: #e03a2c;
    --ok: #d5a033;
    --font-ui: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-title: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
}

* { box-sizing: border-box }

body {
    margin: 0;
    font-family: var(--font-ui);
    background: radial-gradient(120% 120% at 50% 0%, #3a1a14 0%, #120b09 48%, #0b0706 100%);
    color: var(--txt)
}

.brand,
.tabs,
.phase-step strong,
.hero-round,
.hero-vs,
h3,
button {
    font-family: var(--font-title);
}

.wrap {
    width: 100%;
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 12px 30px;
}

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px
}

@media (min-width:901px) {
    .row {
        grid-template-columns: 300px minmax(0, 1fr) 320px;
        gap: 12px;
    }

    .panel-my {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }

    .panel-stake {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .panel-ops {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .panel-feed {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
    }

    .panel-feed .log { height: 420px; }
}

.card {
    background: linear-gradient(180deg, #2a1a14 0%, #1a100d 100%);
    border: 1px solid #5f3a2d;
    border-radius: 14px;
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.34);
}

.c4 {
    grid-column: span 4
}

.c6 {
    grid-column: span 6
}

.c12 {
    grid-column: span 12
}

.panel-battle {
    display: none !important;
}

h1 {
    font-size: 22px;
    margin: 12px 0
}

.top-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #2b1913 0%, #1b110d 100%);
    border-color: #6a4334;
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .5px; }
.brand-logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid #b8703a; background: #3a2117; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.tabs { display: flex; gap: 20px; color: #e0c2a9; font-size: 14px; margin-top: 2px; }
.tabs .active { color: #ffcf64; font-weight: 800; text-shadow: 0 0 12px rgba(255,207,100,.3); }
.tab-link { cursor: pointer; }

.top-wallet {
    justify-self: end;
    display: grid;
    gap: 8px;
}

.top-wallet-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #2a1a14;
    color: var(--muted);
    transition: all .2s ease;
}

.social-link:hover {
    color: #ffd087;
    border-color: #b66d3f;
    background: rgba(224, 173, 65, 0.14);
}

#btnConnect {
    width: auto;
    min-width: 140px;
    padding: 8px 16px;
    font-size: 14px;
}

#btnConnect.connected {
    background: #2a1a14;
    color: #ffe8d7;
    border: 1px solid #7d4b33;
    text-align: center;
    white-space: nowrap;
}

.wallet-meta-hide { display: none !important; }

.top-wallet-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

.top-wallet-meta span {
    background: #25160f;
    border: 1px solid #6b4331;
    border-radius: 8px;
    padding: 6px 8px;
    word-break: break-all;
}

.battle-phase {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid #6b4331;
    background: linear-gradient(180deg, #2a1a14 0%, #1a100d 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.32);
}

.phase-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #5a3528;
    border-radius: 12px;
    background: rgba(45, 26, 18, .78);
    opacity: .8;
    transition: all .2s ease;
}

.phase-step strong { display: block; font-size: 15px; font-weight: 800; }
.phase-step small { display: block; color: #e5c7ae; font-size: 12px; margin-top: 1px; font-weight: 700; }
.phase-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #435a94;
    background: radial-gradient(circle at 30% 30%, #c9d8ff 0%, #6f86bd 35%, #23345f 100%);
    box-shadow: 0 0 0 3px rgba(11, 19, 41, .9), 0 0 10px rgba(94, 126, 198, .35);
    flex: 0 0 26px;
    position: relative;
    overflow: hidden;
}
.phase-dot::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: url('./logo.png') center/cover no-repeat;
    filter: saturate(1.1) contrast(1.08);
}
#phaseStepPrep .phase-dot::before { filter: hue-rotate(8deg) saturate(1.05) brightness(.96); }
#phaseStepBattle .phase-dot::before { filter: hue-rotate(24deg) saturate(1.2) brightness(1.02); }
#phaseStepEnded .phase-dot::before { filter: grayscale(.25) saturate(.85) brightness(.92); }
.phase-arrow { color: #ff7a6b; font-size: 18px; font-weight: 900; opacity: .9; letter-spacing: 1px; }
.phase-step.active {
    opacity: 1;
    border-color: #ff5d54;
    background: rgba(38, 16, 24, .78);
    box-shadow: 0 0 0 1px rgba(255,93,84,.2), 0 0 18px rgba(255,72,72,.14);
}
.phase-step.active strong,
.phase-step.active small { color: #ff5d54; }
.phase-step.active .phase-dot {
    border-color: #ff5d54;
    background: radial-gradient(circle at 30% 30%, #ffd39e 0%, #ff6a57 45%, #8f1c1c 100%);
    box-shadow: 0 0 0 3px rgba(31, 10, 12, .92), 0 0 14px rgba(255,93,84,.46);
}
.phase-step.active .phase-dot::before { filter: saturate(1.28) brightness(1.06); }
.phase-step.done { opacity: .92; border-color: #7a4d34; }
.phase-step.done .phase-dot {
    border-color: #c4834e;
    background: radial-gradient(circle at 30% 30%, #ffe0b0 0%, #e29a4f 45%, #6a2e17 100%);
}
.phase-step.done .phase-dot::before { filter: saturate(1.15) brightness(1.03); }

.battle-hero {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 12px;
    background: radial-gradient(70% 120% at 50% 0%, #2b1a33 0%, #131a33 60%, #12172d 100%);
    transition: box-shadow .25s ease, border-color .25s ease;
}

.battle-hero.phase-prep { box-shadow: 0 0 0 1px rgba(255, 211, 110, .3), 0 0 16px rgba(255, 211, 110, .16); }
.battle-hero.phase-battle { box-shadow: 0 0 0 1px rgba(110, 168, 254, .25), 0 0 18px rgba(110, 168, 254, .18); }
.battle-hero.phase-ended { box-shadow: 0 0 0 1px rgba(159, 176, 255, .2); }

.side {
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #2c3a6a;
    background: #101934;
}
.side.red { box-shadow: inset 0 0 0 1px rgba(255, 74, 74, .25); }
.side.blue { box-shadow: inset 0 0 0 1px rgba(74, 145, 255, .25); }
.side .label { color: var(--muted); font-size: 13px; }
.side .num { font-size: 38px; font-weight: 900; line-height: 1.1; margin-top: 6px; }
.side.red .num { color: #ff6b6b; }
.side.blue .num { color: #f6c15d; }
.side .num.hp-down { animation: hpDown .55s ease; }
.side .num.hp-up { animation: hpUp .55s ease; }
.side .sub { color: #c9d6ff; margin-top: 4px; font-size: 13px; }

.vs-center {
    border-radius: 12px;
    display: grid;
    place-items: center;
    padding: 12px;
    background: linear-gradient(180deg, #1a2244 0%, #121a33 100%);
    border: 1px solid #33457c;
}
.vs-center .round { color: #ffd36e; font-weight: 700; }
.vs-center .vs { font-size: 56px; font-weight: 900; color: #ffb34a; line-height: 1; }
.vs-center .timer { font-size: 30px; font-weight: 800; letter-spacing: 1px; }

h3 {
    margin: 0 0 10px;
    font-size: 16px
}

.sync-tip {
    margin-left: 8px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.muted {
    color: var(--muted);
    font-size: 13px
}

.kv {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    font-size: 14px;
    margin: 6px 0
}

input,
select,
button {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #6a4334;
    background: #231610;
    color: var(--txt)
}

button {
    cursor: pointer;
    background: linear-gradient(180deg, #f04747 0%, #c21f2a 100%);
    color: #fff;
    border: 1px solid #ff6b6b;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(184,34,50,.28);
}

button.secondary { background: linear-gradient(180deg, #6a3c2f 0%, #4b281e 100%); color: #ffe8d7; }
button.good { background: linear-gradient(180deg, #e0ad41 0%, #b8801f 100%); color: #2b1600; }

button:disabled {
    cursor: not-allowed;
    opacity: .62;
    filter: grayscale(.08);
}

body.ui-busy {
    overflow: hidden;
}

.tx-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    place-items: center;
    background: rgba(5, 8, 18, .62);
    backdrop-filter: blur(3px);
}

.tx-overlay-mask {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.tx-overlay.show { display: grid; }

.tx-overlay-card {
    width: min(360px, calc(100vw - 32px));
    text-align: center;
    border-color: #4660ab;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

.tx-spinner {
    width: 42px;
    height: 42px;
    margin: 6px auto 12px;
    border-radius: 50%;
    border: 3px solid rgba(224, 173, 65, .2);
    border-top-color: #e0ad41;
    animation: spin .8s linear infinite;
}

.tx-overlay-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
}

.tx-overlay-text {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.tx-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(16px);
    min-width: 220px;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(49, 208, 170, .35);
    background: rgba(10, 24, 30, .94);
    color: #dffcf4;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 1250;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.tx-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}
.modal.show { display: block; }
.modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 18, .65);
    backdrop-filter: blur(2px);
}
.modal-panel {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 8vh auto 0;
    border-color: #7a4e35;
}
.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.modal-close {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #7a4e35;
    background: #2a1a14;
    color: #ffe6d2;
    font-size: 22px;
    line-height: 1;
}
.modal-body {
    max-height: 62vh;
    overflow: auto;
    color: #ffe6d2;
    line-height: 1.8;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #c1834a rgba(62, 35, 24, .35);
}
.modal-body::-webkit-scrollbar {
    width: 10px;
}
.modal-body::-webkit-scrollbar-track {
    background: rgba(62, 35, 24, .35);
    border-radius: 999px;
}
.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f2c37a 0%, #c1834a 100%);
    border-radius: 999px;
    border: 2px solid rgba(30, 16, 10, .55);
}
.modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffd997 0%, #d08f53 100%);
}
.modal-body p { margin: 6px 0; }
.modal-body strong { color: #ffd36e; }

.table-wrap {
    overflow-x: auto;
    margin: 12px 0;
    border-radius: 8px;
    border: 1px solid #7a4e35;
}

.mechanism-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: rgba(42, 26, 20, 0.62);
}

.mechanism-table th, 
.mechanism-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #6a4331;
}

.mechanism-table th {
    background: #3b241a;
    color: #ffd36e;
    font-weight: 800;
}

.mechanism-table tr:last-child td {
    border-bottom: none;
}

.mechanism-table td:first-child {
    font-weight: 700;
    color: var(--pri);
}

.state-ok { color: #31d0aa; font-weight: 700; }
.state-warn { color: #ffb86b; font-weight: 700; }
.state-bad { color: #ff6b6b; font-weight: 700; }

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.grid1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    word-break: break-word;
}

.panel-my, .panel-stake {
    background: linear-gradient(180deg, #2b1a14 0%, #1a100d 100%);
}

.my-head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: #3a2418;
    border: 1px solid #b6703b;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wallet-mini {
    font-size: 12px;
    color: var(--muted);
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-chip {
    margin-top: 2px;
    display: inline-block;
    background: #3a2418;
    border: 1px solid #9c6037;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
}

.identity-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.id-card {
    border: 1px solid #7a4e35;
    border-radius: 12px;
    background: linear-gradient(180deg, #2a1a14 0%, #1b110d 100%);
    padding: 10px 8px;
    text-align: center;
    font-weight: 700;
    min-width: 120px;
    display: grid;
    justify-items: center;
    gap: 2px;
}

.id-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #b8703a;
    object-fit: cover;
    background: #3a2117;
    box-shadow: 0 0 0 2px rgba(255, 207, 100, .08);
    margin-bottom: 4px;
}

.id-card-name {
    font-size: 17px;
    line-height: 1.2;
    color: #ffe7c9;
    font-weight: 900;
}

.id-card-meta {
    font-size: 12px;
    color: #e3c7ad;
    line-height: 1.25;
    white-space: nowrap;
}

.id-card.active {
    border-color: #ff5b5b;
    box-shadow: inset 0 0 0 1px #ff5b5b, 0 0 14px rgba(255, 91, 91, .2);
}

.id-card.active .id-card-name { color: #fff1da; }

@media (max-width: 900px) {
    .identity-row {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

.kv span:last-child {
    max-width: 62vw;
    text-align: right;
    word-break: break-all;
}

#contractAddr,
#wallet {
    word-break: break-all;
}

.event-feed {
    height: 320px;
    overflow: auto;
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.event-item {
    border: 1px solid #6b4331;
    background: #24160f;
    border-radius: 10px;
    padding: 8px 10px;
}

.event-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
}

.event-type { font-weight: 700; }
.event-type.attack { color: #ff9a4d; }
.event-type.reward { color: #31d0aa; }
.event-type.trade { color: #f6c15d; }
.event-type.error { color: #ff6b6b; }

.event-text {
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
}

.debug-log-wrap summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

.tax-strip-wrap {
    margin-top: 12px;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 4px;
}

.panel-tax {
    border-color: #6a4331;
    background: linear-gradient(180deg, #2b1a14 0%, #1a100d 100%);
    max-width: 100%;
    margin: 0;
}

.tax-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.tax-item {
    border: 1px solid #7a4e36;
    border-radius: 12px;
    background: linear-gradient(180deg, #352016 0%, #21130e 100%);
    padding: 12px;
    display: grid;
    gap: 6px;
}

.tax-item strong {
    font-size: 30px;
    line-height: 1.1;
    color: #ffd36e;
}

.log {
    height: 160px;
    overflow: auto;
    white-space: pre-wrap;
    background: #0a1026;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    font-size: 12px
}

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

@keyframes hpDown { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.35); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes hpUp { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* 音乐开关样式 */
.music-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #3a2117 0%, #1b110d 100%) !important;
    border: 1px solid #b8703a !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), inset 0 0 10px rgba(255,211,110,0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #ffebaf !important;
    cursor: pointer;
}

.music-toggle:hover {
    box-shadow: 0 0 15px rgba(224, 173, 65, 0.3) !important;
    border-color: #ffd36e !important;
}

.music-toggle.playing .music-icon {
    animation: musicRotate 4s linear infinite;
}

.music-toggle.muted {
    opacity: 0.5;
    filter: grayscale(0.8);
    border-color: #5a3328 !important;
}

@keyframes musicRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width:900px) {

    .tax-strip-wrap {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    .top-nav {
        grid-template-columns: 1fr;
    }

    .top-wallet {
        width: 100%;
        justify-self: stretch;
    }

    .top-wallet-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .top-wallet-actions .social-link {
        width: 100%;
    }

    #btnConnect,
    #btnSwitchChain {
        min-width: 0;
    }

    .top-wallet-meta {
        grid-template-columns: 1fr;
    }

    .panel-feed .log {
        height: 220px;
    }

    .tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 6px;
    }

    .battle-phase {
        grid-template-columns: 1fr;
    }

    .phase-arrow {
        display: none;
    }

    .battle-hero {
        grid-template-columns: 1fr;
    }

    .side .num { font-size: 30px; }

    .c4,
    .c6 {
        grid-column: span 12
    }

    .grid2 {
        grid-template-columns: 1fr;
    }

    .tax-grid {
        grid-template-columns: 1fr;
    }

    .tax-item strong {
        font-size: 20px;
    }

    h1 {
        font-size: 18px;
    }

    .kv {
        grid-template-columns: 1fr;
    }

    .kv span:last-child {
        text-align: left;
        max-width: 100%;
    }
}

/* --- 图二风格复刻：战场主布局 --- */
.battle-hero {
    margin: 8px -12px 20px;
    position: relative;
    height: 540px;
    background: #0a0e20 url('./背景.webp') no-repeat center center;
    background-size: cover;
    border: none;
    border-radius: 0;
    overflow: hidden;
    color: #fff;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at center, transparent 20%, rgba(10,14,32,0.85) 100%);
    pointer-events: none;
}

/* 火焰特效层样式 */
.hero-fire-fx {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* 地表闪烁红光 */
.hero-fire-fx::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: radial-gradient(ellipse at bottom, rgba(224, 58, 44, 0.25) 0%, transparent 70%);
    animation: fireFlicker 4s ease-in-out infinite;
}

/* 余烬粒子 */
.ember {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    background: #ffcf64;
    border-radius: 50%;
    filter: blur(1px);
    box-shadow: 0 0 10px #e03a2c, 0 0 20px #ff6a57;
    animation: emberRise 5s linear infinite;
    opacity: 0;
}

/* 随机分布粒子 */
.ember:nth-child(1) { left: 10%; animation-delay: 0s; width: 4px; height: 4px; }
.ember:nth-child(2) { left: 25%; animation-delay: 1.5s; }
.ember:nth-child(3) { left: 45%; animation-delay: 0.5s; width: 2px; height: 2px; }
.ember:nth-child(4) { left: 60%; animation-delay: 2.2s; }
.ember:nth-child(5) { left: 80%; animation-delay: 3s; width: 5px; height: 5px; }
.ember:nth-child(6) { left: 15%; animation-delay: 4.1s; }
.ember:nth-child(7) { left: 35%; animation-delay: 2.8s; }
.ember:nth-child(8) { left: 70%; animation-delay: 1s; }
.ember:nth-child(9) { left: 90%; animation-delay: 3.5s; }

@keyframes fireFlicker {
    0%, 100% { opacity: 0.6; transform: scaleY(1); }
    50% { opacity: 0.9; transform: scaleY(1.2); }
}

@keyframes emberRise {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateY(-200px) translateX(20px) scale(1.2); }
    100% { transform: translateY(-500px) translateX(-30px) scale(0.5); opacity: 0; }
}

/* 顶部轮次 */
.hero-top-bar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(15, 22, 48, 0.9);
    border: 1px solid rgba(255, 211, 110, 0.3);
    padding: 4px 30px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    color: #ffd36e;
}

/* --- 清理旧残留，确保 Flex 生效 --- */
.hero-side, 
.side-red, 
.side-blue {
    position: static !important; /* 强制取消所有旧的绝对定位 */
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
}

/* 三列主容器 */
.hero-main-layout {
    position: absolute; /* 相对于 battle-hero 定位 */
    inset: 0; /* 铺满整个父容器 */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
}

.hero-column {
    position: relative;
    display: flex;
    flex-direction: column;
    width: clamp(280px, 22vw, 380px);
}

/* 左右侧阵营信息 */
.side-info-group { margin-bottom: 25px; }
.side-blue .side-info-group { text-align: right; }

.side-name { font-size: 16px; font-weight: 800; color: #ff9da8; margin-bottom: 2px; }
.side-blue .side-name { color: #9dbfff; }

.side-hp-value {
    font-size: 64px;
    font-weight: 950;
    line-height: 0.9;
}

.side-hp-meta { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.6); margin-top: 6px; }
.hp-pct { font-size: 14px; font-weight: 900; margin: 0 10px; }
.side-red .hp-pct { color: #ff3b4f; }
.side-blue .hp-pct { color: #3f8cff; }

/* 复刻图二血条样式 - 能量晶体感 */
.side-hp-bar-container {
    width: 100%;
    height: 32px; /* 增加厚度 */
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 4px 15px rgba(0,0,0,0.9); /* 深邃暗槽感 */
}

.side-hp-fill {
    height: 100%;
    transition: width 2s cubic-bezier(.22,.9,.2,1);
    position: absolute;
    top: 0;
}

/* 顶部高光折射层 */
.side-hp-fill::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    right: 6px;
    height: 35%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    border-radius: 10px;
    pointer-events: none;
}

.side-red .side-hp-fill {
    left: 0;
    background: linear-gradient(90deg, #8b121e 0%, #ff3b4f 70%, #ff7081 100%);
    box-shadow: 0 0 25px rgba(255, 59, 79, 0.6);
    /* 向右斜切箭头 */
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.side-blue .side-hp-fill {
    right: 0;
    background: linear-gradient(-90deg, #123e8b 0%, #3f8cff 70%, #7aaeff 100%);
    box-shadow: 0 0 25px rgba(63, 140, 255, 0.6);
    /* 向左斜切箭头 */
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* 战力卡片 */
.side-stats-card {
    margin-top: 30px;
    background: rgba(10, 14, 32, 0.6);
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    padding: 12px 20px;
    border-radius: 12px;
    display: grid;
    gap: 8px;
    min-height: 48px; /* 调小高度 */
}
.stat-line { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,0.7); }
.stat-line strong { color: #fff; font-size: 15px; font-weight: 800; }

/* 中轴核心 */
.center-vs {
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.vs-image {
    width: clamp(140px, 15vw, 220px);
    height: auto;
    filter: drop-shadow(0 0 25px rgba(255, 179, 74, 0.6));
    z-index: 10;
}

.vs-timer-box { text-align: center; margin-top: 15px; }
.timer-label { font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.timer-value { font-size: 52px; font-weight: 950; color: #fff; line-height: 1; margin-top: 4px; }

.prize-display-card {
    margin-top: 35px;
    background: rgba(12, 16, 32, 0.85);
    border: 1px solid rgba(255, 211, 110, 0.25);
    padding: 14px 45px 12px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    min-width: 340px;
}

/* 顶部发光边框 */
.prize-display-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ff3b4f, #a855f7, transparent);
    z-index: 1;
}

.prize-tag { 
    font-size: 14px; 
    color: #ffebaf; 
    font-weight: 800; 
    margin-bottom: 8px;
    letter-spacing: 1px;
    opacity: 0.9;
}

.prize-main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.prize-amount { 
    font-size: 36px; 
    font-weight: 950; 
    color: #ffebaf; 
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.prize-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 10px -20px;
}

.prize-sub-info {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.prize-sub-info span {
    color: #fff;
    margin-left: 10px;
}

/* 响应式适配 - 移动端全量优化 */
@media (max-width: 1000px) {
    .battle-hero { 
        height: auto; 
        min-height: 850px; /* 增加高度以容纳纵向排列的内容 */
        padding: 60px 15px 40px;
        margin-left: 0;
        margin-right: 0;
    }

    .hero-main-layout { 
        flex-direction: column; 
        justify-content: flex-start; 
        align-items: center;
        gap: 30px; 
    }

    .hero-column { 
        width: 100%; 
        align-items: center;
        text-align: center !important;
    }

    /* 缩放巨大的血量数字 */
    .side-hp-value { 
        font-size: 42px; 
        text-align: center;
    }

    .side-info-group {
        text-align: center !important;
        margin-bottom: 15px;
    }

    /* 血条在移动端全宽 */
    .side-hp-bar-container {
        height: 20px;
        max-width: 90%;
        margin: 0 auto;
    }

    /* VS 图片缩放 */
    .vs-image {
        width: 120px;
        margin: 10px 0;
    }

    /* 倒计时和奖池卡片优化 */
    .timer-value { font-size: 36px; }
    
    .prize-display-card {
        min-width: 90%;
        padding: 10px 20px;
        margin-top: 20px;
    }
    .prize-amount { font-size: 24px; }

    /* 战力卡片在移动端样式 */
    .side-stats-card {
        margin-top: 15px;
        width: 90%;
        padding: 10px 15px;
    }

    /* 确保红蓝顺序在纵向依然合理 */
    .center-vs { 
        order: 2; /* 放在中间 */
        margin: 20px 0;
    }
    .side-red { order: 1; }
    .side-blue { order: 3; }
    
    /* 修正移动端血条圆角和方向 */
    .side-hp-fill {
        clip-path: none !important; /* 手机端去掉斜切，更清晰 */
        border-radius: 10px !important;
    }
}

.side-num.hp-critical { color: #ff3e3e !important; animation: criticalBlink 1s infinite; }
@keyframes criticalBlink { 0%,100% { opacity: 1; } 50% { opacity: .5; } }