/* 白神服Sirokami — 回放播放器（弹窗） */

/* 弹窗外层 */
.rp-modal {
    position: fixed; inset: 0;
    z-index: 9000;
    background: rgba(8, 6, 10, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-modal-box {
    width: min(96vw, calc((100vh - 80px) * 4 / 3));
    max-height: 96vh;
    aspect-ratio: 4 / 3;
    background: linear-gradient(180deg, #170d12 0%, #0f080c 100%);
    border: 1px solid rgba(216, 30, 68, 0.6);
    border-radius: 14px;
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    padding: 10px 14px 14px;
    overflow: hidden;
}
.rp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.rp-modal-head .replay-title {
    margin: 0;
    font-size: 1.15rem;
    text-align: left;
}
.rp-modal-close {
    background: rgba(60, 60, 60, 0.8);
    color: #eee;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.rp-modal-close:hover { background: var(--red); }
#replayModal .replay-main { width: 100%; height: auto; flex: 1; min-height: 0; }
#replayModal .replay-input-bar { margin-bottom: 8px; }
#replayModal .replay-controls { margin-bottom: 8px; }

.replay-title {
    text-align: center;
    font-size: 1.6rem;
    color: var(--light-gold, #F0E68C);
    margin: 10px 0 16px;
    text-shadow: 0 0 10px var(--gold);
}

/* 输入条 */
.replay-input-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.replay-input-bar input {
    width: 260px;
    max-width: 80vw;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(216,30,68,0.4);
    color: #eee;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.95rem;
    outline: none;
}
.replay-input-bar input:focus { border-color: var(--gold); }
.replay-input-bar button {
    background: linear-gradient(135deg, var(--red), var(--dark-red));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: 700;
    cursor: pointer;
}
.replay-meta { color: #aaa; font-size: 0.85rem; }

/* 控制条 */
.replay-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(20,20,20,0.8);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.replay-controls button {
    background: rgba(60,60,60,0.9);
    border: none;
    color: #eee;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 0.8rem;
}
.replay-controls button:hover { background: var(--red); }
.replay-controls .rp-speed { background: rgba(40,40,40,0.9); }
.replay-controls .rp-speed.active { background: var(--red); color: #fff; }
.rp-speed-label { color: #888; font-size: 0.75rem; }
.rp-progress-text { color: #aaa; font-size: 0.75rem; white-space: nowrap; }
#rpProgress { accent-color: var(--red); }

/* 主体双栏：总窗口 4:3（宽度≤可用宽，高=宽×3/4）；场地:日志=7:3 */
.replay-main {
    display: flex;
    gap: 12px;
    width: min(100%, calc((100vh - 210px) * 4 / 3));
    aspect-ratio: 4 / 3;
    margin: 0 auto;
}
.replay-field {
    flex: 0 0 70%;            /* 场地 : 日志 = 7 : 3 */
    background: #000;
    border: 1px solid rgba(216, 30, 68, 0.6);
    border-radius: 12px;
    padding: 6px;
    overflow: hidden;         /* 棋盘由 fitBoard 整体缩放，不出现滚动条 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.rp-board {
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform-origin: center center;
    flex-shrink: 0;
}

/* ═══ 标准 5 格对战场地 ═══ */
.rp-side { padding: 2px 6px; position: relative; display: flex; flex-direction: column; gap: 2px; }
.rp-side.rp-active-side { background: rgba(216,30,68,0.06); border-radius: 8px; box-shadow: inset 0 0 30px rgba(216,30,68,0.05); }

/* 受伤方瞬间闪红（红色渐变，边缘重、中间轻，一次淡出） */
.rp-side.rp-hurt::after {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 30;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, rgba(255, 20, 40, 0) 30%, rgba(255, 25, 45, 0.6) 100%);
    animation: rpHurtFade 0.55s ease-out forwards;
}
@keyframes rpHurtFade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* 名签：纵向，名字上 LP 下；对手右上角、自己左下角 */
.rp-nametag {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
    z-index: 5;
    pointer-events: none;
}
.rp-nametag-opp {
    position: absolute;
    top: -2px;
    right: 2px;
    align-items: flex-end;
}
.rp-nametag-self {
    position: absolute;
    bottom: -2px;
    left: 2px;
    align-items: flex-start;
}
.rp-player-name {
    color: var(--light-gold);
    font-weight: 700;
    font-size: 0.85rem;
    text-shadow: 0 0 6px rgba(0,0,0,0.9);
}
.rp-lp {
    color: #ff6b6b;
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1.1;
    text-shadow: 0 0 10px rgba(255, 60, 60, 0.55), 0 0 3px #000;
    letter-spacing: 1px;
}

/* 手牌行 */
.rp-hand {
    display: flex;
    justify-content: center;
    gap: 3px;
    min-height: 66px;
    padding: 3px;
}
.rp-hand .rp-card { width: 46px; height: 66px; box-shadow: 0 -2px 6px rgba(0,0,0,0.5); }

/* 场上格 */
.rp-fieldrow {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 3px 0;
}
.rp-cell {
    width: 86px;
    height: 124px;
    background: rgba(216,30,68,0.045);
    border: 1px solid rgba(216,30,68,0.35);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s;
}
.rp-cell:has(.rp-card) { border-color: rgba(212,175,55,0.35); }
.rp-cell .rp-card { width: 100%; height: 100%; border: none; border-radius: 3px; }
/* 魔陷格与怪兽格同高（124px） */

/* 额外怪兽区：中线两格（左=对手额外区，右=自己额外区） */
.rp-emz-cell {
    border-style: dashed;
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.05);
}
.rp-emz-cell:has(.rp-card) { border-color: rgba(212,175,55,0.8); border-style: solid; }
.rp-emz-cell::after {
    content: '额外'; position: absolute; left: 0; right: 0; bottom: 2px;
    text-align: center; font-size: 9px; color: rgba(212,175,55,0.5);
    pointer-events: none;
}
.rp-mzone .rp-cell::after {
    content: '怪兽'; position: absolute; bottom: 2px; font-size: 9px; color: rgba(255,255,255,0.16);
    pointer-events: none;
}
.rp-szone .rp-cell::after {
    content: '魔陷'; position: absolute; bottom: 2px; font-size: 9px; color: rgba(255,255,255,0.14);
    pointer-events: none;
}

/* 行 = [外轨86][5格454][外轨86]（总宽638，居中）——双方5格列上下对齐；
   对手牌堆占左外轨、自己占右外轨，对面外轨留空 */
.rp-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.rp-row .rp-fieldrow { margin: 0; }
.rp-rail-void { width: 86px; flex: 0 0 86px; }

/* 中线行：除外(外轨) | [空|额外区|回合/阶段|额外区|空]（额外区对齐怪兽第2、4格）| 除外(外轨) */
.rp-mid-zone {
    width: 454px;
    flex: 0 0 454px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rp-mid-zone .rp-mid-info {
    flex: 0 0 86px;
    width: 86px;
    min-width: 0;
    text-align: center;
}

/* 墓地/卡组/除外格子：与同行格等大、紧贴排头/排尾 */
.rp-pile::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 2px;
    text-align: center; font-size: 9px; color: rgba(255,255,255,0.4);
    pointer-events: none;
}
.rp-pile-grave::after { content: '墓地'; }
.rp-pile-deck::after  { content: '卡组'; }
.rp-pile-removed::after { content: '除外'; }
.rp-pile-extra::after { content: '额外'; }
/* 场地区：魔陷行 seq5 格（场地魔法），展示在怪兽行外轨 */
.rp-field-cell::after {
    content: '场地'; position: absolute; left: 0; right: 0; bottom: 2px;
    text-align: center; font-size: 9px; color: rgba(255,255,255,0.3);
    pointer-events: none;
}
.rp-pile-removed {
    border-style: dashed;
    border-color: rgba(160,130,230,0.55);
    background: rgba(120,90,200,0.07);
}
.rp-pile-count {
    position: absolute; top: 2px; right: 2px; z-index: 3;
    background: rgba(0,0,0,0.7); color: #F0E68C;
    font-size: 0.62rem; font-weight: 700; line-height: 1;
    padding: 2px 4px; border-radius: 3px;
}

/* 中央信息（回合/阶段） */
.rp-mid-info { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rp-turn-label { color: #fff; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.rp-phase { color: var(--gold); font-size: 0.72rem; white-space: nowrap; }

/* 卡牌通用 */
.rp-card {
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    position: relative;
    background: #1a1a1a;
}
.rp-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 守备表示：横置（自己 -90°，对手因整体倒置取 +90°；缩放适配竖格） */
.rp-card.rp-def { transform: rotate(-90deg) scale(0.68); }
.rp-card.rp-flip { transform: rotate(180deg); }
.rp-card.rp-flip.rp-def { transform: rotate(90deg) scale(0.68); }
.rp-card-down {
    /* 卡背用 cover2.jpg（加载失败时退回红条纹渐变） */
    background-image: url('../cover2.jpg'),
        repeating-linear-gradient(45deg, #5a1a28, #5a1a28 6px, #42121e 6px, #42121e 12px);
    background-size: cover, auto;
    background-position: center, 0 0;
    background-repeat: no-repeat, repeat;
    border: 1px solid #a51834;
}
.rp-card-empty { background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.06); }
/* 超量素材角标 */
.rp-mats {
    position: absolute; left: 3px; bottom: 3px; z-index: 5;
    background: rgba(0,0,0,0.75);
    color: #ffd700;
    border: 1px solid rgba(255,215,0,0.5);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px; font-weight: 700; line-height: 1.2;
    pointer-events: none;
}

/* ── 动画特效层（fixed 覆盖，视口坐标）── */
.rp-fly {
    position: fixed; z-index: 9997; pointer-events: none;
    border-radius: 4px; overflow: hidden;
    background: #101010;
    box-shadow: 0 8px 22px rgba(0,0,0,0.55);
    opacity: 0.96;
    /* 左上角为变换原点：缩放不产生偏移，飞行轨迹与起终点严格一致 */
    transform-origin: top left;
    transition: transform 0.2s cubic-bezier(0.25, 0.6, 0.3, 1), opacity 0.18s ease;
    will-change: transform, opacity;
}
.rp-fly img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-fly-down {
    background-image: url('../cover2.jpg'),
        repeating-linear-gradient(45deg, #5a1a28, #5a1a28 6px, #42121e 6px, #42121e 12px);
    background-size: cover, auto;
    background-position: center, 0 0;
    background-repeat: no-repeat, repeat;
}
.rp-fx-card {
    position: fixed; z-index: 9996; pointer-events: none;
    border-radius: 5px; overflow: hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,0.65), 0 0 26px rgba(255, 200, 80, 0.35);
    transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.14s ease;
    will-change: transform, opacity;
}
.rp-fx-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-fx-card.rp-flip { transform: rotate(180deg); }
.rp-fx-flash {
    position: fixed; z-index: 9995; pointer-events: none;
    border-radius: 50%;
    border: 3px solid rgba(255, 222, 120, 0.85);
    box-shadow: 0 0 46px 14px rgba(255, 190, 70, 0.55);
    background: radial-gradient(circle, rgba(255, 235, 160, 0.3) 0%, transparent 70%);
    opacity: 0.9;
    transition: opacity 0.22s ease;
}
.rp-fx-hit {
    position: fixed; z-index: 9995; pointer-events: none;
    border-radius: 50%;
    border: 5px solid rgba(255, 245, 215, 0.95);
    box-shadow: 0 0 60px 20px rgba(255, 220, 140, 0.7);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 65%);
    opacity: 0.95;
    transition: opacity 0.25s ease;
}
/* 发效果：从中央扩散的金色圆环 */
.rp-fx-ring {
    position: fixed; z-index: 9995; pointer-events: none;
    border-radius: 50%;
    border: 3px solid rgba(255, 222, 120, 0.95);
    box-shadow: 0 0 18px 6px rgba(255, 205, 95, 0.5), inset 0 0 16px rgba(255, 235, 160, 0.4);
    opacity: 0.9;
    will-change: transform, opacity;
}
/* 金色发光粒子 */
.rp-fx-gold {
    box-shadow: 0 0 10px 2px rgba(255, 220, 110, 0.95);
}
.rp-fx-shard {
    position: fixed; z-index: 9993; pointer-events: none;
    opacity: 1; border-radius: 2px;
}
/* 召唤落地：脚下扩散的青白光环 */
.rp-summon-ring {
    position: fixed; z-index: 9994; pointer-events: none;
    border-radius: 50%;
    border: 3px solid rgba(150, 225, 255, 0.95);
    box-shadow: 0 0 20px 6px rgba(120, 210, 255, 0.5), inset 0 0 18px rgba(200, 245, 255, 0.35);
    opacity: 0;
    will-change: transform, opacity;
}
/* 攻击标记：攻击方红圈脉冲 */
.rp-fx-cellmark {
    position: fixed; z-index: 9992; pointer-events: none;
    border-radius: 8px;
    opacity: 0;
    will-change: transform, opacity;
}
.rp-fx-cellmark.red { border: 3px solid #ff6b6b; box-shadow: 0 0 18px rgba(255, 90, 90, 0.55); }
.rp-fx-cellmark.gold { border: 3px solid #ffd700; box-shadow: 0 0 18px rgba(255, 215, 90, 0.55); }
/* 攻击金箭 */
.rp-fx-arrow { position: fixed; z-index: 9991; pointer-events: none; }
/* 伤害/恢复数字提示（-3000 红 / +N 绿，上飘淡出） */
.rp-dmg-num {
    position: fixed; z-index: 9996; pointer-events: none;
    font-size: 2.1rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 22px currentColor;
    will-change: transform, opacity;
}
/* 翻开盖卡：3D 翻牌 */
.rp-flip3d {
    position: fixed; z-index: 9994; pointer-events: none;
    perspective: 620px;
}
.rp-flip3d-inner {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.34s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.rp-flip3d-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    border-radius: 4px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.rp-flip3d-back {
    background-image: url('../cover2.jpg'),
        repeating-linear-gradient(45deg, #5a1a28, #5a1a28 6px, #42121e 6px, #42121e 12px);
    background-size: cover, auto;
    background-position: center, 0 0;
    background-repeat: no-repeat, repeat;
    border: 1px solid #a51834;
}
.rp-flip3d-front { transform: rotateY(180deg); }
.rp-flip3d-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 阶段横幅：中央从左滑入、带边框，停留后向右滑出 */
.rp-phase-banner {
    position: fixed; z-index: 9998; pointer-events: none;
    padding: 12px 40px;
    border: 2px solid rgba(212, 175, 55, 0.9);
    border-radius: 10px;
    background: rgba(12, 8, 14, 0.85);
    box-shadow: 0 0 34px rgba(255, 195, 90, 0.4);
    color: #ffe9a8;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 8px;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(255, 200, 80, 0.6);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.3s ease;
    will-change: transform, opacity;
}

.rp-loading-tip {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #888; font-size: 1rem;
}

/* 日志 */
.replay-log {
    flex: 1 1 30%;            /* 场地 : 日志 = 7 : 3 */
    background: rgba(15,15,15,0.9);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.replay-log-title {
    color: var(--light-gold);
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.replay-log-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #ccc;
    scrollbar-width: thin;
    scrollbar-color: var(--red) transparent;
    display: flex;
    flex-direction: column;
}
.rp-log-line {
    padding: 1px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    animation: rpLineIn 0.2s ease;
}
@keyframes rpLineIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.rp-log-phase { color: var(--gold); font-weight: 600; }
.rp-log-damage { color: #ff8a8a; }
.rp-log-chain { color: #a9d3ff; }
.rp-log-battle { color: #ffb37a; font-weight: 600; }
.rp-log-hint { color: #777; font-size: 0.72rem; }
.rp-log-win { color: #ffd700; font-weight: 700; font-size: 0.9rem; }
.rp-log-err { color: #ff6b6b; }

/* 回放码旁的“▶ 回放”小按钮（对战记录/天梯记录） */
.duel-watch {
    background: linear-gradient(135deg, var(--red), var(--dark-red));
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 2px 9px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
}
.duel-watch:hover { filter: brightness(1.2); }

/* 移动端 */
@media (max-width: 900px) {
    /* 手机端：弹窗占满屏，上方=回放画面（自适应高度），下方=日志（占满剩余），无多余空位 */
    .rp-modal-box {
        aspect-ratio: auto;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px));
        gap: 6px;
        overflow: hidden;
    }
    .rp-modal-head { padding: 0 2px; margin-bottom: 4px; }
    .rp-modal-head .replay-title { font-size: 1rem; }
    .rp-modal-close { width: 30px; height: 30px; }
    #replayModal .replay-input-bar { margin-bottom: 4px; flex-wrap: nowrap; gap: 6px; }
    .replay-input-bar input { width: auto; flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: 0.82rem; }
    #replayLoadBtn { padding: 6px 12px; font-size: 0.8rem; flex: 0 0 auto; }
    .replay-meta { display: none; }                    /* 手机端省空间，元信息不显示 */
    #replayModal .replay-controls { margin-bottom: 4px; gap: 5px; }
    .replay-controls button { padding: 5px 9px; font-size: 0.76rem; }
    .replay-controls .rp-speed { padding: 4px 7px; }
    .rp-speed-label { display: none; }
    .rp-progress-text { font-size: 0.72rem; }

    .replay-main {
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
        width: 100%;
        aspect-ratio: auto;
        gap: 6px;
    }
    /* 上方：画面按实际缩放后的尺寸占位（不再有上下空白） */
    .replay-field {
        flex: 0 0 auto;
        min-height: 0;
        padding: 4px;
    }
    /* 下方：日志占满剩余高度 */
    .replay-log {
        flex: 1 1 auto;
        height: auto;
        min-height: 26vh;
    }
    .replay-log-title { padding: 6px 10px; font-size: 0.8rem; }
    .replay-log-body { padding: 6px 10px; font-size: 0.76rem; line-height: 1.55; }
}
@media (max-width: 768px) {
    .rp-card { width: 44px; height: 62px; }
    .replay-field { min-height: 0; }
}


/* ══════ 召唤演出（融合/同调/超量/灵摆/连接）══════ */
.rp-orb {
    position: fixed; z-index: 9996; border-radius: 50%;
    pointer-events: none;
}
.rp-syn-ring {
    position: fixed; z-index: 9996; border-radius: 50%;
    border: 4px solid #7dffb0;
    box-shadow: 0 0 24px 8px rgba(90, 255, 160, 0.55), inset 0 0 18px rgba(150, 255, 190, 0.5);
    pointer-events: none;
}
.rp-star { position: fixed; z-index: 9996; pointer-events: none; }
.rp-star::after {
    content: '★';
    display: block; width: 20px; height: 20px; line-height: 20px; text-align: center;
    font-size: 18px; color: #c6ffdc;
    text-shadow: 0 0 12px #5affa0, 0 0 4px #ffffff;
}
.rp-fusion-wrap { position: fixed; z-index: 9996; width: 0; height: 0; pointer-events: none; }
.rp-fusion-mat {
    position: absolute; width: 48px; height: 66px;
    border-radius: 4px; overflow: hidden;
    border: 1px solid rgba(200, 140, 255, 0.85);
    background: #1a1020;
    box-shadow: 0 0 16px rgba(190, 110, 255, 0.8);
}
.rp-fusion-mat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-galaxy {
    position: fixed; z-index: 9996; border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
        rgba(0,0,0,0.95) 0%, rgba(90,50,160,0.85) 45%,
        rgba(255,215,90,0.35) 70%, rgba(0,0,0,0) 100%);
    box-shadow: 0 0 44px 16px rgba(140, 80, 220, 0.5), inset 0 0 30px 10px rgba(255, 220, 120, 0.35);
}
.rp-pend {
    position: fixed; z-index: 9996; width: 8px; height: 90px;
    border-radius: 4px;
    background: linear-gradient(#fff8d0, #ffd700);
    box-shadow: 0 0 16px rgba(255, 215, 90, 0.7);
    transform-origin: top center;
    pointer-events: none;
}
.rp-pend::after {
    content: '';
    position: absolute; left: 50%; bottom: -14px;
    width: 22px; height: 22px; margin-left: -11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fffbe0, #ffcc33 60%, #a97a00 100%);
    box-shadow: 0 0 18px rgba(255, 210, 80, 0.9);
}
.rp-link-arrow {
    position: fixed; z-index: 9996; pointer-events: none;
    color: #ff3b3b; font-size: 22px; line-height: 22px; text-align: center;
    text-shadow: 0 0 12px #ff5a5a, 0 0 4px #ffffff;
}

/* 攻击能量球（带拖尾） */
.rp-ball {
    position: fixed; z-index: 9996; border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 38% 34%, #fff6d8 0%, #ffb02e 42%, #ff4a1e 78%, rgba(255, 60, 20, 0) 100%);
    box-shadow: 0 0 14px 5px rgba(255, 130, 40, 0.75);
}
.rp-ball-core {
    box-shadow: 0 0 22px 9px rgba(255, 150, 60, 0.9), 0 0 6px 2px rgba(255, 245, 210, 0.9);
}

/* 融合：橙蓝扭曲螺旋（柔化流体感） */
.rp-spiral {
    position: fixed; z-index: 9996;
    pointer-events: none;
    filter: blur(2.5px) saturate(1.15) drop-shadow(0 0 10px rgba(255, 170, 60, 0.45));
    mix-blend-mode: screen;
}
.rp-spiral svg { width: 100%; height: 100%; display: block; }
/* 攻击命中前的蓄能球 */
.rp-ball-charge { animation: none; }
/* 连接：六边形数码 */
.rp-hex { position: fixed; z-index: 9996; pointer-events: none; }
.rp-hex-flash {
    position: fixed; z-index: 9996; pointer-events: none; border-radius: 50%;
    background: radial-gradient(circle, rgba(225,255,255,0.92) 0%, rgba(140,240,255,0.5) 42%, rgba(0,0,0,0) 72%);
    box-shadow: 0 0 44px 16px rgba(140, 240, 255, 0.45);
    transition: opacity 0.3s ease;
}

/* 卡片攻守数值角标 */
.rp-stat {
    position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
    z-index: 5;
    padding: 2px 12px;
    border: none;
    border-radius: 12px;
    /* 黑底 + 边缘柔和过渡（径向渐变淡出）+ 背景模糊 */
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.88) 42%, rgba(0, 0, 0, 0.62) 68%, rgba(0, 0, 0, 0) 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: #f6f6f6;
    font-size: 11px; font-weight: 700; line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    font-family: Consolas, monospace;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.rp-stat.atk-up { color: #ffd27a; }
.rp-stat.def-pos { color: #9fd0ff; }
/* 连接标记箭头（表侧连接怪显示其指向） */
.rp-lmark {
    position: absolute; z-index: 6; width: 0; height: 0;
    pointer-events: none;
    border: 6px solid transparent;
    opacity: 0.92;
    filter: drop-shadow(0 0 4px rgba(255,60,60,0.8));
}
.rp-lmark.top { border-bottom-color: #ff4d4d; top: -3px; left: 50%; margin-left: -6px; }
.rp-lmark.bottom { border-top-color: #ff4d4d; bottom: -3px; left: 50%; margin-left: -6px; }
.rp-lmark.left { border-right-color: #ff4d4d; left: -3px; top: 50%; margin-top: -6px; }
.rp-lmark.right { border-left-color: #ff4d4d; right: -3px; top: 50%; margin-top: -6px; }
.rp-lmark.tl { border-right-color: #ff4d4d; left: -2px; top: -2px; transform: rotate(-45deg); }
.rp-lmark.tr { border-left-color: #ff4d4d; right: -2px; top: -2px; transform: rotate(45deg); }
.rp-lmark.bl { border-right-color: #ff4d4d; left: -2px; bottom: -2px; transform: rotate(45deg); }
.rp-lmark.br { border-left-color: #ff4d4d; right: -2px; bottom: -2px; transform: rotate(-45deg); }

/* 灵摆特效：包装层定位 + 朝上摆动时球在上端 */
.rp-pend-wrap { position: fixed; z-index: 9996; pointer-events: none; }
.rp-pend.rp-pend-up::after { top: -14px; bottom: auto; }
/* 包装层内的钟摆线要相对包装层定位（否则 fixed 会跑到视口左上角） */
.rp-pend-wrap .rp-pend { position: absolute; }

/* 灵摆：同一悬点垂下的两条锁链 + 蓝/红水晶 */
.rp-pend-ring {
    position: absolute; left: -7px; top: -7px;
    width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, #b9c4d8 45%, #6c7689 100%);
    box-shadow: 0 0 10px rgba(210, 225, 255, 0.75), inset 0 0 3px rgba(0, 0, 0, 0.5);
}
.rp-pend-arm { position: absolute; width: 12px; will-change: transform; }
.rp-pend-inner { position: absolute; left: 0; top: 0; width: 12px; height: 100%; transform-origin: 50% 0%; }
.rp-pend-chain-svg { position: absolute; left: -1px; top: 0; overflow: visible; }
.rp-pend-gem-svg {
    position: absolute; left: -10px; bottom: -46px;
    width: 32px; height: 44px; overflow: visible;
}
.rp-pend-arm.is-blue .rp-pend-gem-svg { filter: drop-shadow(0 0 9px rgba(110, 195, 255, 0.95)); }
.rp-pend-arm.is-red .rp-pend-gem-svg { filter: drop-shadow(0 0 9px rgba(255, 120, 120, 0.95)); }


/* ══════════════════════════════════════════════════════════
   视觉美化（覆盖上方旧样式）：贴合官网配色，去掉灰底与硬描边，
   层次靠渐变、发光与发丝线；不动任何结构、动画与移动端规则。
   ══════════════════════════════════════════════════════════ */
.rp-modal {
    background: radial-gradient(120% 100% at 50% 0%, rgba(26, 10, 18, .84), rgba(4, 3, 5, .95) 62%);
    backdrop-filter: blur(7px);
    animation: rpFadeIn .24s ease-out both;
}
@keyframes rpFadeIn { from { opacity: 0; } to { opacity: 1; } }

.rp-modal-box {
    border: none;
    border-radius: 22px;
    background:
        radial-gradient(90% 60% at 50% -10%, rgba(216, 30, 68, .16), transparent 70%),
        linear-gradient(180deg, rgba(26, 14, 20, .97), rgba(11, 7, 10, .98));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .88),
        inset 0 0 0 1px rgba(216, 30, 68, .16),
        0 0 70px rgba(216, 30, 68, .10);
    animation: rpBoxIn .34s cubic-bezier(.22, .9, .28, 1.02) both;
}
@keyframes rpBoxIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* 标题：去掉 emoji，改红色亮点 + 金色描边字 */
.rp-modal-head { padding-bottom: 8px; border-bottom: 1px solid rgba(216, 30, 68, .18); }
.rp-modal-head .replay-title {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #f2ece4;
    text-shadow: 0 0 18px rgba(216, 30, 68, .45);
}
.rp-modal-head .replay-title::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--red, #D81E44);
    box-shadow: 0 0 12px var(--red, #D81E44);
    vertical-align: 2px;
    animation: rpDot 2.4s ease-in-out infinite;
}
@keyframes rpDot { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

.rp-modal-close {
    width: 32px; height: 32px;
    background: rgba(255, 255, 255, .06);
    border: none;
    border-radius: 50%;
    color: #b9b9c2;
    transition: .2s;
}
.rp-modal-close:hover { background: rgba(216, 30, 68, .3); color: #ffd7e0; transform: scale(1.08); }

/* 输入条：胶囊输入 + 渐变按钮 */
.replay-input-bar input {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    padding: 8px 16px;
    transition: border-color .22s, box-shadow .22s;
}
.replay-input-bar input:focus {
    border-color: rgba(212, 175, 55, .72);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
}
.replay-input-bar button {
    background: linear-gradient(135deg, #D81E44, #8c0f2a);
    border-radius: 999px;
    padding: 8px 22px;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(216, 30, 68, .34);
    transition: transform .2s, box-shadow .22s;
}
.replay-input-bar button:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(216, 30, 68, .5); }
.replay-meta { color: #9a9aa4; }

/* 控制条：去灰底，改无框 + 上下发丝线 */
.replay-controls {
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-radius: 0;
    padding: 8px 2px;
    gap: 7px;
}
.replay-controls button {
    background: rgba(255, 255, 255, .05);
    border-radius: 999px;
    padding: 6px 13px;
    color: #d6d0c8;
    transition: .18s;
}
.replay-controls button:hover { background: rgba(216, 30, 68, .26); color: #fff; }
.replay-controls .rp-speed { background: rgba(255, 255, 255, .04); }
.replay-controls .rp-speed.active {
    background: rgba(212, 175, 55, .2);
    color: #ffe9a8;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .5);
}
.rp-speed-label { color: #7d7d86; }
.rp-progress-text { color: #9a9aa4; font-variant-numeric: tabular-nums; }

/* 进度条：金色发光滑块 */
#rpProgress {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    background: none;
    cursor: pointer;
}
#rpProgress::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(216, 30, 68, .55), rgba(212, 175, 55, .5));
}
#rpProgress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    background: #f4eee6;
    box-shadow: 0 0 12px rgba(212, 175, 55, .9);
    transition: transform .16s;
}
#rpProgress::-webkit-slider-thumb:hover { transform: scale(1.18); }
#rpProgress::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(216, 30, 68, .5); }
#rpProgress::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 50%; background: #f4eee6; box-shadow: 0 0 12px rgba(212, 175, 55, .9); }

/* 场地：淡淡的暗角，让卡面更聚焦 */
.replay-field { border-radius: 14px; overflow: hidden; }
.replay-field::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .45) 100%);
}

/* 日志：去掉灰底与描边，标题改金色细字 + 发光下划线 */
.replay-log {
    background: linear-gradient(180deg, rgba(20, 12, 16, .55), rgba(10, 7, 10, .55));
    border: none;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(216, 30, 68, .14);
}
.replay-log-title {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #e8d9a8;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(216, 30, 68, .18);
    background: linear-gradient(90deg, rgba(216, 30, 68, .1), transparent 70%);
}
.replay-log-body { padding: 10px 14px; color: #c9c3bb; }
.rp-log-line { line-height: 1.75; }
.rp-loading-tip { color: #9a9aa4; letter-spacing: 1px; }