/* Blood & Nectar v7 - Full Kickstarter rebuild */

:root {
    --bg-deep: #010a13;
    --bg-mid: #071a2a;
    --gold: #c8aa6e;
    --gold-bright: #f0d890;
    --gold-dim: #785a28;
    --gold-dark: #463714;
    --gold-glow: rgba(200,170,110,.3);
    --teal: #0ac8b9;
    --teal-dim: #068b80;
    --teal-glow: rgba(10,200,185,.3);
    --blood: #c04040;
    --blood-glow: rgba(180,40,40,.35);
    --hp-green: #1aaa45;
    --text-light: #f0e6d2;
    --text-mid: #a09b8c;
    --text-dim: #5b5a56;
    --portrait-size: 68px;
    --font-display: 'Times New Roman', Georgia, serif;
    --font-ui: 'Segoe UI', Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg-deep);
    color: var(--text-light);
    font-family: var(--font-ui);
    min-height: 100vh;
    display: flex; justify-content: center;
    padding: 10px;
    overflow-x: hidden;
}

/* ═══ LAYOUT ═══ */
.battle-viewer { width: 100%; max-width: 1140px; display: flex; flex-direction: column; }
.main-area { display: flex; }
.arena-column { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ═══ TITLE BAR ═══ */
.title-bar {
    display: flex;
    align-items: center;
    position: relative;
    gap: 8px;
}
.title-spacer { flex: 1; }

.view-mode-toggle {
    background: rgba(7,26,40,.85);
    border: 1px solid rgba(200,170,110,.22);
    border-radius: 4px;
    color: var(--text-mid);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 6px 9px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.view-mode-toggle:hover {
    color: var(--gold);
    border-color: rgba(200,170,110,.5);
    background: rgba(12,30,44,.92);
}

/* ═══ TITLE ═══ */
.game-title {
    font-family: var(--font-display);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 0 2px;
    font-size: 13px;
    letter-spacing: 10px;
    color: var(--gold);
    opacity: .55;
    text-shadow: 0 0 20px rgba(200,170,110,.15);
    pointer-events: none;
    white-space: nowrap;
}

/* ═══ HEADER ═══ */
.battle-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 20px;
    background: linear-gradient(180deg, #0d2030, #081820);
    border: 1px solid var(--gold-dark);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    position: relative;
}
.battle-header::before {
    content: '';
    position: absolute; top: 0; left: 5%; right: 5%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.team-label { font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.player-label { color: var(--teal); }
.enemy-label { color: var(--blood); }

.turn-info { display: flex; align-items: center; gap: 10px; }
.turn-badge {
    background: rgba(0,0,0,.4);
    border: 1px solid var(--gold-dark);
    border-radius: 12px;
    padding: 3px 16px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 3px;
    color: var(--gold);
}

/* ─── Round Timer ─── */
.round-timer {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px;
}
.timer-text { visibility: hidden; }
.round-timer.active .timer-text { visibility: visible; }
.timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-bg {
    fill: none; stroke: #1a2530; stroke-width: 2.5;
}
.timer-fill {
    fill: none; stroke: var(--teal); stroke-width: 2.5;
    stroke-dasharray: 100; stroke-dashoffset: 0;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke .3s;
}
.timer-fill.urgent { stroke: var(--blood); }
.timer-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px; font-weight: 900;
    color: var(--text-light);
    text-shadow: 0 0 6px rgba(0,0,0,.8);
}

/* ═══ ARENA ═══ */
.arena-wrapper {
    position: relative;
    border-left: 1px solid var(--gold-dark);
    border-right: 1px solid var(--gold-dark);
    overflow: hidden;
    background:
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.5) 100%),
        radial-gradient(ellipse at 50% 45%, rgba(30,60,80,.1) 0%, transparent 50%),
        linear-gradient(180deg, #081520, #0a1a2a 50%, #071218);
}

/* Pulsing atmospheric glow */
.arena-bg-pulse {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(10,100,90,.04) 0%, transparent 60%);
    animation: bg-breathe 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes bg-breathe {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}

.arena-container {
    position: relative;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 24px 30px;
    min-height: 460px;
    gap: 60px;
}
.team { display: flex; flex-direction: column; gap: 18px; z-index: 2; }
.vs-divider { display: flex; align-items: center; justify-content: center; width: 80px; min-height: 420px; z-index: 2; }
.vs-icon { font-size: 16px; color: var(--gold-dim); opacity: .15; }
#vfx-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; mix-blend-mode: screen; }

/* ═══════════════════════════════════════════
   CHAMPION ROW - No rectangles. Floating elements.
   Player:  [artifact] [potion] [portrait] [bars+status]
   Enemy:   [bars+status] [portrait] [potion] [artifact]
   ═══════════════════════════════════════════ */
.card-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
    position: relative;
    padding: 4px 0;
}
.card-slot:hover:not(.dead) { transform: scale(1.01); z-index: 20; }
.card-slot.involved { transform: scale(1.06); z-index: 20; }
.player-team .card-slot.involved { transform: translateX(16px) scale(1.06); }
.enemy-team .card-slot.involved { transform: translateX(-16px) scale(1.06); }
.card-slot.uninvolved { transform: scale(0.92); filter: brightness(0.55); }

/* ─── Mirror enemy cards ─── */
.enemy-team .card-slot { flex-direction: row-reverse; }

/* ─── Hit shake ─── */
.card-slot.hit { animation: card-shake .28s ease-out; }
@keyframes card-shake {
    0% { transform: translateX(0); } 15% { transform: translateX(-5px); }
    30% { transform: translateX(4px); } 50% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.card-slot.dead { opacity: .25; filter: grayscale(.7) brightness(.5); pointer-events: none; }
.card-slot.frozen-card .portrait-container { box-shadow: 0 0 14px var(--teal-glow); border-color: var(--teal-dim); }

/* Active glow on portrait */
.card-slot.active .portrait-container {
    border-color: var(--gold);
    box-shadow: 0 0 8px var(--gold-glow), 0 0 20px rgba(200,170,110,.15);
    animation: active-pulse 2s ease-in-out infinite;
}

/* ─── Comic Action Bubble ─── */
.action-bubble {
    position: absolute;
    top: -10px; right: -10px;
    min-width: 26px; min-height: 26px;
    background: radial-gradient(circle at 40% 35%, #fffbe6, #f5e6a3);
    border: 2px solid var(--gold-dim);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 6px rgba(200,170,110,.3);
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
    z-index: 25;
    transition: opacity .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.action-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 8px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #f5e6a3;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.enemy-team .action-bubble { right: auto; left: -10px; }
.enemy-team .action-bubble::after { left: auto; right: 8px; }
.action-bubble.visible {
    opacity: 1;
    transform: scale(1);
    animation: bubble-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bubble-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes active-pulse {
    0%, 100% { box-shadow: 0 0 8px var(--gold-glow), 0 0 20px rgba(200,170,110,.15); }
    50% { box-shadow: 0 0 14px var(--gold-glow), 0 0 30px rgba(200,170,110,.2); }
}

.card-slot.targeted .portrait-container {
    border-color: #0ac8b9;
    box-shadow: 0 0 10px rgba(10,200,185,.5), 0 0 24px rgba(10,200,185,.2);
    animation: target-pulse 1.2s ease-in-out infinite;
}
@keyframes target-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(10,200,185,.4), 0 0 24px rgba(10,200,185,.15); }
    50% { box-shadow: 0 0 18px rgba(10,200,185,.7), 0 0 32px rgba(10,200,185,.3); }
}
.card-slot.involved .portrait-container {
    border-color: #0ac8b9;
    box-shadow: 0 0 8px rgba(10,200,185,.4), 0 0 18px rgba(10,200,185,.15);
    animation: involved-pulse 2s ease-in-out infinite;
}
.card-slot.active.involved .portrait-container {
    border-color: #0ac8b9;
    box-shadow: 0 0 10px rgba(10,200,185,.55), 0 0 24px rgba(10,200,185,.25);
    animation: involved-pulse 2s ease-in-out infinite;
}
@keyframes involved-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(10,200,185,.3); }
    50% { box-shadow: 0 0 14px rgba(10,200,185,.55), 0 0 24px rgba(10,200,185,.2); }
}

/* ═══ ITEM SQUARES (artifact + potion) ═══ */
.card-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.card-item-square {
    width: 32px; height: 32px;
    background: rgba(5,15,25,.8);
    border: 1.5px solid var(--gold-dark);
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(200,170,110,.04);
    position: relative;
    cursor: default;
}
.card-item-square.artifact { border-color: rgba(200,170,110,.25); }
.card-item-square.potion { border-color: rgba(10,180,160,.2); }
.card-item-square.used { opacity: .2; }
.card-item-square .item-tooltip {
    display: none;
    position: absolute;
    bottom: 110%; left: 50%; transform: translateX(-50%);
    background: rgba(2,10,20,.95);
    border: 1px solid var(--gold-dark);
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 10px; font-weight: 600;
    color: var(--text-mid);
    white-space: nowrap;
    z-index: 20;
}
.card-item-square:hover .item-tooltip { display: block; }

/* ═══ PORTRAIT ═══ */
.portrait-container {
    position: relative;
    width: var(--portrait-size); height: var(--portrait-size);
    flex-shrink: 0;
    border: 2px solid var(--gold-dim);
    border-radius: 4px;
    overflow: hidden;
    background: #080e18;
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5);
    transition: border-color .3s, box-shadow .3s;
}
.portrait-container::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(200,170,110,.15), rgba(200,170,110,.08), transparent);
    z-index: 2;
}
.portrait { width: 100%; height: 100%; object-fit: cover; display: block; }
.enemy-team .portrait { transform: scaleX(-1); }
.portrait-container::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
    z-index: 1;
}
.level-badge {
    position: absolute; bottom: 1px; left: 1px;
    background: rgba(1,10,19,.9);
    border: 1px solid var(--gold-dim);
    border-radius: 2px;
    padding: 0 4px;
    font-size: 9px; font-weight: 800;
    color: var(--gold);
    z-index: 3;
}
.enemy-team .level-badge { left: auto; right: 1px; }
.class-icon {
    position: absolute; top: 1px; right: 1px;
    width: 16px; height: 16px;
    border-radius: 2px;
    background: rgba(1,10,19,.85);
    border: 1px solid var(--gold-dim);
    padding: 1px; z-index: 3;
}
.death-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,.75);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; z-index: 5;
}
.death-overlay.hidden { display: none; }

/* ═══ BARS + STATUS COLUMN ═══ */
.card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 180px;
    max-width: 220px;
}

.card-name {
    font-size: 12px; font-weight: 800;
    color: var(--text-light);
    letter-spacing: .8px;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.enemy-team .card-name { text-align: right; }

.ability-label {
    font-size: 9px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .2s, opacity .2s;
}
.ability-label.visible { max-height: 14px; opacity: 1; }

/* ═══ HP BAR - Segmented liquid ═══ */
.bars { display: flex; flex-direction: column; gap: 4px; }

.hp-bar {
    position: relative;
    height: 16px;
    border-radius: 2px;
    background: #080c12;
    border: 1.5px solid var(--gold-dim);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(200,170,110,.04);
    overflow: hidden;
}

.hp-fill {
    position: absolute; top: 0; left: 0;
    height: 100%;
    border-radius: 1px;
    transition: width .5s ease-out;
    overflow: hidden;
    background: linear-gradient(180deg, #30c858 0%, #20a845 35%, #189038 65%, #107028 100%);
}

/* Liquid particles shimmer */
.hp-fill::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 400%; height: 100%;
    background:
        repeating-linear-gradient(110deg,
            transparent 0px, rgba(255,255,255,.07) 1px, transparent 3px,
            rgba(255,255,255,.04) 5px, transparent 7px,
            rgba(255,255,255,.06) 9px, transparent 11px);
    animation: hp-particles 3s linear infinite;
}

/* Surface gloss */
.hp-fill::after {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 38%;
    background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, transparent 100%);
    animation: liquid-pulse 2.5s ease-in-out infinite;
}

@keyframes hp-particles { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } }
@keyframes liquid-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* HP Segments - dividing lines */
.hp-segments {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3;
    pointer-events: none;
    display: flex;
}
.hp-segment-line {
    flex: 1;
    border-right: 1px solid rgba(0,0,0,.35);
}
.hp-segment-line:last-child { border-right: none; }

/* Shield - white overlay */
.hp-shield {
    position: absolute; top: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(220,220,240,.7), rgba(180,180,210,.5));
    border-radius: 0 1px 1px 0;
    transition: width .5s, left .5s;
    z-index: 2;
    width: 0; left: 100%;
}
.hp-shield::after {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.3), transparent);
}

.hp-text {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    z-index: 4;
    letter-spacing: .5px;
}

/* ═══ MANA BAR - Thin blue bar ═══ */
.mana-bar {
    position: relative;
    height: 8px;
    border-radius: 1px;
    background: #060a14;
    border: 1px solid #1a3050;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
    overflow: hidden;
}

.mana-fill {
    position: absolute; top: 0; left: 0;
    height: 100%;
    border-radius: 1px;
    transition: width .5s ease-out;
    background: linear-gradient(180deg, #3898e8 0%, #2070c0 40%, #1858a0 70%, #104080);
    overflow: hidden;
}

/* Mana shimmer */
.mana-fill::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 300%; height: 100%;
    background: repeating-linear-gradient(110deg,
        transparent 0px, rgba(180,220,255,.12) 1px, transparent 3px,
        rgba(180,220,255,.06) 5px, transparent 7px);
    animation: hp-particles 4s linear infinite;
}

/* Mana gloss */
.mana-fill::after {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 100%);
}

.mana-bar-text {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; font-weight: 800;
    color: #b8d8ff;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
    z-index: 2;
    letter-spacing: .4px;
}

/* ═══ MOMENTUM CRYSTALS ═══ */
.momentum-crystals {
    display: flex;
    gap: 2px;
    height: 14px;
    align-items: center;
}
.enemy-team .momentum-crystals { justify-content: flex-end; }

.momentum-crystal {
    width: 12px; height: 14px;
    position: relative;
    overflow: hidden;
}

/* Crystal shape via clip-path */
.momentum-crystal-inner {
    width: 100%; height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #0a1520;
    border: none;
    position: relative;
    transition: background .3s;
}

.momentum-crystal.active .momentum-crystal-inner {
    background: linear-gradient(180deg, #40e8d0, #20b8a8 40%, #0a9888);
    box-shadow: 0 0 4px rgba(10,200,185,.35);
}

/* Crystal shimmer */
.momentum-crystal.active .momentum-crystal-inner::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,.25), transparent);
    animation: crystal-shimmer 2s ease-in-out infinite;
}

.momentum-crystal.active .momentum-crystal-inner::after {
    content: '';
    position: absolute; top: 20%; left: 20%;
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(255,255,255,.1), transparent);
    animation: crystal-pulse 3s ease-in-out infinite;
}

@keyframes crystal-shimmer { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes crystal-pulse { 0%,100% { opacity: .2; transform: scale(.8); } 50% { opacity: .6; transform: scale(1); } }

.momentum-crystal.empty .momentum-crystal-inner {
    background: #0a1018;
}

.momentum-text {
    font-size: 9px; font-weight: 800;
    color: var(--teal-dim);
    margin-left: 3px;
    letter-spacing: .5px;
    line-height: 14px;
}

/* ═══ STATUS / DEBUFFS - Bigger, readable ═══ */
.status-effects {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    min-height: 24px;
    margin-top: 2px;
}
.enemy-team .status-effects { justify-content: flex-end; }

.status-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(1,10,19,.7);
    border: 1.5px solid #444;
    border-radius: 4px;
    padding: 2px 6px 2px 4px;
    animation: status-pop .3s ease-out;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.status-badge img { width: 16px; height: 16px; object-fit: contain; }
.status-badge .status-emoji { font-size: 14px; line-height: 1; }
.status-badge .stack-label {
    font-size: 10px; font-weight: 800;
    color: #e0e0e0;
    letter-spacing: .3px;
}

@keyframes status-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* ═══ CARD EQUIP ROW (legacy compat - hidden, replaced by card-items) ═══ */
.card-equip { display: none; }

/* ═══ ABILITY BANNER ═══ */
.ability-banner {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    background: transparent;
    border: 1px solid rgba(200,170,110,.2);
    border-radius: 3px;
    padding: 5px 24px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 2px;
    color: rgba(200,170,110,.45);
    text-transform: uppercase;
    white-space: nowrap;
    min-height: 18px;
    z-index: 15;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    pointer-events: none;
}
.ability-banner:empty { opacity: 0; }
.ability-banner::before, .ability-banner::after {
    content: ''; position: absolute; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.ability-banner::before { top: 1px; }
.ability-banner::after { bottom: 1px; }

/* ═══ ACTION PANEL - Always visible, single row ═══ */
.action-panel {
    background: linear-gradient(180deg, #0a1a28, #071520);
    border: 1px solid var(--gold-dark);
    border-top: none;
    padding: 8px 12px;
    display: flex; align-items: stretch;
    gap: 6px;
    min-height: 72px;
    transition: opacity .3s;
    box-shadow: inset 0 1px 0 rgba(200,170,110,.04);
    position: relative;
}
.action-panel:not(.visible) { opacity: .35; }
.action-panel:not(.visible) .ability-btn,
.action-panel:not(.visible) .extra-btn,
.action-panel:not(.visible) .confirm-action-btn { pointer-events: none; }

.action-header { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.action-portrait {
    width: var(--portrait-size); height: var(--portrait-size);
    border-radius: 4px; object-fit: cover;
    background: #081018;
    border: 2px solid var(--gold-dim);
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5);
}
.action-meta { display: flex; flex-direction: column; gap: 2px; }
.action-name { font-size: 13px; font-weight: 800; color: var(--text-light); letter-spacing: .5px; }
.action-class { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }

/* Ability buttons - square-ish, compact */
.ability-slots { display: flex; gap: 5px; flex: 1; }

.ability-btn {
    background: linear-gradient(180deg, #0c1a28, #081420);
    border: 1px solid rgba(90,70,40,.25);
    border-radius: 4px;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 90px; flex: 1;
    transition: border-color .2s, background .2s, box-shadow .2s;
    box-shadow: inset 0 1px 0 rgba(200,170,110,.02);
    position: relative;
    cursor: pointer;
}
.ability-btn:hover:not(.disabled) { border-color: rgba(200,170,110,.5); background: linear-gradient(180deg, #10243a, #0c1a2e); }
.ability-btn .ability-header { display: flex; align-items: center; gap: 5px; }
.ability-btn .ability-key { font-size: 10px; font-weight: 900; color: #c8aa6e; background: rgba(200,170,110,.12); border-radius: 2px; padding: 1px 4px; min-width: 16px; text-align: center; }
.ability-btn .ability-emoji { font-size: 18px; }
.ability-btn .ability-name { font-size: 13px; font-weight: 800; color: var(--text-mid); }
.ability-btn .ability-cost { font-size: 10px; font-weight: 700; color: var(--teal-dim); margin-left: auto; }
.ability-btn .ability-desc { font-size: 10px; color: var(--text-dim); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ability-btn.disabled { opacity: .15; }
.ability-btn.considering { border-color: rgba(200,170,110,.3); box-shadow: 0 0 6px rgba(200,170,110,.06); }
.ability-btn.considering .ability-name { color: var(--gold); }
.ability-btn.selected { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
.ability-btn.selected .ability-name { color: var(--gold-bright); }

/* Artifact + Potion + Confirm - same size, same row */
.action-extras { display: flex; gap: 5px; flex-shrink: 0; align-items: stretch; }

.extra-btn {
    background: linear-gradient(180deg, #0c1a28, #081420);
    border: 1px solid rgba(90,70,40,.25);
    border-radius: 4px;
    padding: 6px 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 56px;
    cursor: pointer;
    position: relative;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.extra-btn:hover { border-color: rgba(200,170,110,.45); box-shadow: 0 0 6px rgba(200,170,110,.15); }
.extra-btn.selected {
    border-color: #0ac8b9;
    box-shadow: 0 0 10px rgba(10,200,185,.5), 0 0 20px rgba(10,200,185,.2);
    animation: extra-selected-pulse 1.5s ease-in-out infinite;
}
@keyframes extra-selected-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(10,200,185,.4); }
    50% { box-shadow: 0 0 16px rgba(10,200,185,.65), 0 0 24px rgba(10,200,185,.25); }
}
.extra-btn .extra-key { font-size: 10px; font-weight: 900; color: #c8aa6e; background: rgba(200,170,110,.12); border-radius: 2px; padding: 1px 4px; min-width: 16px; text-align: center; }
.extra-btn .extra-icon { font-size: 18px; }
.extra-btn .extra-label { font-size: 8px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.extra-btn.artifact-slot { border-color: rgba(200,170,110,.2); }
.extra-btn.potion-slot { border-color: rgba(10,180,160,.2); }

.confirm-action-btn {
    background: linear-gradient(180deg, rgba(30,24,16,.8), rgba(20,16,10,.9));
    border: 1px solid rgba(200,170,110,.2);
    border-radius: 4px;
    color: rgba(200,170,110,.35);
    font-size: 12px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 8px 20px;
    cursor: default;
    transition: all .2s;
    white-space: nowrap;
    min-width: 80px;
    display: flex; align-items: center; justify-content: center;
}
.confirm-action-btn.active {
    cursor: pointer;
    border-color: rgba(200,170,110,.45);
    color: #c8aa6e;
    box-shadow: 0 0 8px rgba(200,170,110,.15);
    animation: none;
}
.confirm-action-btn.active:hover { color: #e0c880; box-shadow: 0 0 14px rgba(200,170,110,.3); border-color: rgba(200,170,110,.6); }
.confirm-action-btn.disabled { opacity: .12; }
.confirm-action-btn.surrender-confirm { background: rgba(40,36,30,.35); color: #c8b898; box-shadow: 0 0 8px rgba(160,140,100,.15); animation: none; }
@keyframes pulse-surrender { from { box-shadow: 0 0 6px rgba(160,140,100,.1); } to { box-shadow: 0 0 12px rgba(160,140,100,.2); } }

/* ── Opponent turn - grey out controls ── */
.action-panel.opponent-turn .ability-btn,
.action-panel.opponent-turn .extra-btn { opacity: .18; pointer-events: none; }
.action-panel.opponent-turn .confirm-action-btn { pointer-events: auto; position: relative; z-index: 2; }
.action-panel.opponent-turn::after {
    content: "Opponent's turn…";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(200,170,110,.3);
    pointer-events: none;
}

/* ── Card drag-hover highlight ── */
.card-slot.drag-hover { outline: 2px solid rgba(200,170,110,.7); box-shadow: 0 0 12px rgba(200,170,110,.35); }

/* ── VS orb canvas - allow overflow so the glow hangs around the medallion ── */
.vs-divider { overflow: visible; position: relative; }

/* ── Valid target glow - teal outline only (outer border, pulsing) ── */
.card-slot.valid-target .portrait-container {
    outline: 1.5px solid rgba(10,180,160,.5);
    cursor: crosshair;
    animation: target-pulse 1.2s ease-in-out infinite;
}
@keyframes target-pulse {
    0%,100% { outline-color: rgba(10,180,160,.35); box-shadow: 0 0 6px rgba(10,180,160,.1); }
    50%     { outline-color: rgba(10,180,160,.7);  box-shadow: 0 0 14px rgba(10,180,160,.25); }
}
/* Enemy valid targets */
.enemy-team .card-slot.valid-target .portrait-container {
    box-shadow: none;
}
/* Ally valid targets */
.player-team .card-slot.valid-target .portrait-container {
    box-shadow: none;
}

/* ── Aim hover - reticle effect when hovering a valid target (teal) ── */
.card-slot.aim-hover .portrait-container {
    animation: aim-reticle .45s ease-in-out infinite alternate;
}
.enemy-team .card-slot.aim-hover .portrait-container {
    box-shadow: 0 0 0 2px rgba(10,180,160,.8), 0 0 20px rgba(10,180,160,.35) !important;
}
.player-team .card-slot.aim-hover .portrait-container {
    box-shadow: 0 0 0 2px rgba(10,180,160,.8), 0 0 20px rgba(10,180,160,.35) !important;
}
/* Corner reticle brackets */
.card-slot.aim-hover .portrait-container::before,
.card-slot.aim-hover .portrait-container::after {
    content: '';
    position: absolute; inset: -3px;
    border: 2px solid transparent;
    border-radius: 3px;
    pointer-events: none;
}
.enemy-team .card-slot.aim-hover .portrait-container::before {
    border-top-color: rgba(10,180,160,.9); border-left-color: rgba(10,180,160,.9);
    clip-path: polygon(0 0, 30% 0, 30% 2px, 2px 2px, 2px 30%, 0 30%);
}
.enemy-team .card-slot.aim-hover .portrait-container::after {
    border-bottom-color: rgba(10,180,160,.9); border-right-color: rgba(10,180,160,.9);
    clip-path: polygon(100% 100%, 70% 100%, 70% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 70%, 100% 70%);
}
.player-team .card-slot.aim-hover .portrait-container::before {
    border-top-color: rgba(10,180,160,.9); border-left-color: rgba(10,180,160,.9);
    clip-path: polygon(0 0, 30% 0, 30% 2px, 2px 2px, 2px 30%, 0 30%);
}
.player-team .card-slot.aim-hover .portrait-container::after {
    border-bottom-color: rgba(10,180,160,.9); border-right-color: rgba(10,180,160,.9);
    clip-path: polygon(100% 100%, 70% 100%, 70% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 70%, 100% 70%);
}
@keyframes aim-reticle { from { filter: brightness(1.1); } to { filter: brightness(1.35); } }

/* ── VS medallion active flash ── */
.vs-medallion.vs-active {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 24px rgba(200,170,110,.6), 0 2px 8px rgba(0,0,0,.5);
    animation: vs-flash .6s ease-out forwards;
}
@keyframes vs-flash {
    0%  { box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 28px rgba(200,170,110,.8); }
    100%{ box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 10px rgba(200,170,110,.1); }
}
.vs-medallion { cursor: grab; }
.vs-medallion:active { cursor: grabbing; }

/* ═══ REPLAY PANEL (title-bar top-right dropdown) ═══ */
.side-controls {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    padding: 3px 0;
}
.side-controls.collapsed .controls-inner { opacity: 0; pointer-events: none; transform: scaleY(0.85); }
.side-toggle {
    background: none;
    border: 1px solid rgba(70,55,20,.25);
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: color .15s, border-color .15s;
}
.side-toggle:hover { color: var(--gold-dim); border-color: rgba(200,170,110,.3); }
.controls-inner {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    width: 148px;
    background: linear-gradient(180deg, #0a1a28, #061018);
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 8px;
    z-index: 50;
    transition: opacity .2s, transform .2s;
    transform-origin: top right;
}
.controls-title { font-size: 8px; font-weight: 800; letter-spacing: 3px; color: var(--gold-dim); }
.control-btn { width: 100%; background: rgba(7,26,40,.8); border: 1px solid rgba(90,70,40,.2); border-radius: 3px; color: var(--text-mid); font-size: 10px; font-weight: 700; padding: 5px; cursor: pointer; }
.control-btn:hover { border-color: var(--gold-dim); color: var(--gold); }
.play-btn { background: #061a14; border-color: rgba(10,150,100,.2); color: #30a070; }
.play-btn:hover { color: #40c080; }
.speed-row { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.speed-label { font-size: 8px; color: var(--text-dim); font-weight: 700; }
.speed-slider { width: 100%; height: 3px; -webkit-appearance: none; background: rgba(90,70,40,.2); border-radius: 2px; }
.speed-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); cursor: pointer; }
.speed-value { font-size: 10px; font-weight: 800; color: var(--gold); }
.auto-confirm-toggle { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-dim); cursor: pointer; }
.auto-confirm-toggle input { width: 10px; height: 10px; accent-color: var(--teal); }

/* ═══ KEY BAR - Bottom keyboard guide (clickable) ═══ */
.key-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    background: transparent;
    user-select: none;
}
.key-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.key-group .group-title {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: rgba(200,170,110,.45);
    text-transform: uppercase;
    min-width: 32px;
}
.key-group .group-keys {
    display: flex;
    align-items: center;
    gap: 6px;
}
.key-bar .key {
    width: 38px; height: 38px;
    border: 1.5px solid rgba(200,170,110,0.2);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 14px;
    color: rgba(200,170,110,0.3);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.key-bar .key:hover { border-color: rgba(200,170,110,0.45); color: rgba(200,170,110,0.6); }
.key-bar .key.active {
    border-color: rgba(200,170,110,0.7);
    color: #c8aa6e;
    box-shadow: 0 0 10px rgba(200,170,110,0.12), inset 0 0 6px rgba(200,170,110,0.05);
}
.key-bar .key.alt-key { width: 48px; font-size: 10px; margin-left: 6px; }
.key-bar .key.ability { border-color: rgba(80,200,220,0.2); color: rgba(80,200,220,0.3); }
.key-bar .key.ability:hover { border-color: rgba(80,200,220,0.45); color: rgba(80,200,220,0.55); }
.key-bar .key.ability.active { border-color: rgba(80,200,220,0.7); color: #50c8dc; box-shadow: 0 0 10px rgba(80,200,220,0.15), inset 0 0 6px rgba(80,200,220,0.06); }
.key-bar .key.confirm { border-color: rgba(46,204,113,0.2); color: rgba(46,204,113,0.3); width: 56px; font-size: 9px; margin-left: 6px; }
.key-bar .key.confirm:hover { border-color: rgba(46,204,113,0.45); color: rgba(46,204,113,0.55); }
.key-bar .key.confirm.active { border-color: rgba(46,204,113,0.7); color: #2ecc71; box-shadow: 0 0 10px rgba(46,204,113,0.15), inset 0 0 6px rgba(46,204,113,0.06); }
.key-bar .key.esc-key { border-color: rgba(200,60,60,0.2); color: rgba(200,60,60,0.3); width: 44px; font-size: 9px; margin-right: 6px; }
.key-bar .key.esc-key:hover { border-color: rgba(200,60,60,0.45); color: rgba(200,60,60,0.55); }
.key-bar .key.esc-key.active { border-color: rgba(200,60,60,0.7); color: #c83c3c; box-shadow: 0 0 10px rgba(200,60,60,0.15); }

.mobile-tools {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 0 8px;
}
.mobile-tool-btn {
    background: rgba(8,28,40,.88);
    border: 1px solid rgba(200,170,110,.25);
    border-radius: 4px;
    color: var(--text-mid);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 6px 10px;
    cursor: pointer;
}
.mobile-tool-btn:hover {
    border-color: rgba(200,170,110,.5);
    color: var(--gold);
}
.mobile-tool-btn.close {
    border-color: rgba(200,70,70,.25);
    color: rgba(200,90,90,.9);
}

.orientation-lock {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(1,8,14,.92);
    z-index: 500;
    padding: 24px;
}
.orientation-lock.visible {
    display: flex;
}
.orientation-lock-inner {
    border: 1px solid rgba(200,170,110,.35);
    background: linear-gradient(180deg, #0d2030, #071522);
    border-radius: 8px;
    padding: 22px 26px;
    text-align: center;
    max-width: 340px;
}
.orientation-title {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1.3px;
    color: var(--gold);
    margin-bottom: 8px;
}
.orientation-text {
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.35;
}

.battle-viewer.mobile-mode .battle-header {
    padding: 6px 12px;
}

.battle-viewer.mobile-mode .arena-container {
    min-height: 340px;
    padding: 14px 10px;
    gap: 18px;
}

.battle-viewer.mobile-mode .card-info {
    min-width: 110px;
    max-width: 130px;
}

.battle-viewer.mobile-mode .card-name {
    font-size: 10px;
}

.battle-viewer.mobile-mode .mobile-tools {
    display: flex;
}

.battle-viewer.mobile-mode .log-area {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 108px;
    max-height: 42vh;
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0,0,0,.55);
    display: none;
    z-index: 80;
}

.battle-viewer.mobile-mode .log-area.mobile-open {
    display: flex;
}

.battle-viewer.mobile-mode .key-bar {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 90;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(70,55,20,.5);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(6,18,28,.97), rgba(4,12,18,.98));
    backdrop-filter: blur(3px);
    overflow-x: auto;
}

.battle-viewer.mobile-mode .key-group {
    flex-shrink: 0;
}

.battle-viewer.mobile-mode .key-group.utility-group {
    order: 1;
}

.battle-viewer.mobile-mode .key-group.left-group {
    order: 2;
}

.battle-viewer.mobile-mode .key-group.right-group {
    order: 3;
}

.battle-viewer.mobile-mode .key-group.utility-group .group-title {
    display: none;
}

.battle-viewer.mobile-mode .key-bar .key {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.battle-viewer.mobile-mode .key-bar .key.confirm {
    width: 62px;
    font-size: 9px;
}

.battle-viewer.mobile-mode .main-area {
    padding-bottom: 126px;
}

.battle-viewer.mobile-mode .action-panel {
    margin-top: 6px;
}

@media (max-width: 1024px) {
    .view-mode-toggle {
        font-size: 9px;
        padding: 5px 8px;
    }

    .game-title {
        font-size: 11px;
        letter-spacing: 5px;
    }
}

/* ═══ LOG AREA - Tabbed: Battle Log / Team Details / Overview ═══ */
.log-area {
    background: linear-gradient(180deg, #081820, #051018);
    border: 1px solid var(--gold-dark); border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 250px;
    display: flex; flex-direction: column; overflow: hidden;
}

.log-tabs {
    display: flex; gap: 0;
    background: rgba(0,0,0,.25);
    border-bottom: 1px solid rgba(70,55,20,.15);
    flex-shrink: 0;
}

.log-tab {
    flex: 1;
    padding: 6px 12px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: none; border: none;
    cursor: pointer;
    transition: color .2s, background .2s;
    border-bottom: 2px solid transparent;
}
.log-tab:hover { color: var(--text-mid); }
.log-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold-dim);
    background: rgba(200,170,110,.03);
}

.log-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 6px 14px;
}
.log-panel.active { display: flex; flex-direction: column; }

/* Battle Log entries */
.log-entries {
    display: flex; flex-direction: column-reverse; gap: 2px;
    font-size: 13px; line-height: 1.5;
}
.log-entry { color: var(--text-mid); animation: log-slide .2s ease-out; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 2px 0; }
.log-entry .log-emoji { font-size: 14px; flex-shrink: 0; }
.log-entry .log-source { font-weight: 800; color: var(--text-light); }
.log-entry .log-arrow { color: var(--gold-dim); font-weight: 400; font-size: 12px; }
.log-entry .log-target { font-weight: 800; color: var(--text-light); }
.log-entry .log-value { font-weight: 900; font-size: 14px; }
.log-entry .log-value.damage { color: #c04040; }
.log-entry .log-value.heal { color: #30a060; }
.log-entry .log-value.shield { color: #a0a0c0; }
.log-entry .log-value.mana { color: var(--teal); }

/* Turn separator in log */
.log-turn-separator {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0 4px;
    margin-top: 4px;
}
.log-turn-separator .turn-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,170,110,.2), transparent); }
.log-turn-separator .turn-label { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--gold-dim); white-space: nowrap; }

/* Team Details panel */
.team-details-content {
    display: flex; flex-direction: column; gap: 8px;
    font-size: 12px;
}
.td-champion {
    padding: 6px 0;
    border-bottom: 1px solid rgba(70,55,20,.1);
}
.td-champion-name { font-size: 13px; font-weight: 800; color: var(--text-light); margin-bottom: 6px; }
.td-btn-row {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.td-btn {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    background: linear-gradient(180deg, rgba(30,24,16,.7), rgba(20,16,10,.85));
    border: 1px solid rgba(200,170,110,.18);
    border-radius: 4px;
    padding: 8px 12px;
    min-width: 140px; max-width: 180px;
    font-size: 11px;
    color: var(--text-mid);
    cursor: default;
    transition: border-color .15s, color .15s;
}
.td-btn:hover { border-color: rgba(200,170,110,.4); color: var(--text-light); }
.td-btn-artifact { border-color: rgba(60,160,120,.3); background: linear-gradient(180deg, rgba(12,35,28,.7), rgba(8,22,18,.85)); }
.td-btn-artifact .td-btn-key { background: rgba(60,160,120,.15); border-color: rgba(60,160,120,.3); }
.td-btn-artifact .td-btn-cost { color: rgba(80,200,140,.7); }
.td-btn-potion { border-color: rgba(60,160,120,.3); background: linear-gradient(180deg, rgba(12,35,28,.7), rgba(8,22,18,.85)); }
.td-btn-potion .td-btn-key { background: rgba(60,160,120,.15); border-color: rgba(60,160,120,.3); }
.td-btn-potion .td-btn-cost { color: rgba(80,200,140,.7); }
/* .td-btn-passive inherits default .td-btn gold styling (same as Q/W/E) */
.td-btn-header { display: flex; align-items: center; gap: 5px; }
.td-btn-key { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; background: rgba(200,170,110,.15); border: 1px solid rgba(200,170,110,.3); font-size: 9px; font-weight: 800; color: var(--text-light); flex-shrink: 0; }
.td-btn-emoji { font-size: 16px; }
.td-btn-name { font-weight: 700; color: var(--text-light); font-size: 12px; }
.td-btn-cost { font-size: 9px; color: var(--teal-dim); margin-left: auto; }
.td-btn-desc { font-size: 10px; color: var(--text-dim); line-height: 1.35; }

/* Deck sub-tabs */
.deck-sub-tabs {
    display: flex; gap: 0; margin-bottom: 8px; border-bottom: 1px solid rgba(200,170,110,.12);
}
.deck-sub-tab {
    flex: 1; padding: 6px 0; text-align: center; font-size: 10px; font-weight: 700;
    color: var(--text-dim); background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
    font-family: inherit; text-transform: uppercase; letter-spacing: .5px;
}
.deck-sub-tab:hover { color: var(--text-mid); }
.deck-sub-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.deck-sub-content { display: none; }
.deck-sub-content.active { display: block; }

/* Match Overview panel */
.match-overview-content { font-size: 12px; color: var(--text-mid); }
.overview-placeholder { padding: 20px; text-align: center; color: var(--text-dim); font-style: italic; }
.overview-stat { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(70,55,20,.08); }
.overview-stat-label { color: var(--text-dim); }
.overview-stat-value { font-weight: 800; color: var(--text-light); }

@keyframes log-slide { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; } }
.log-panel::-webkit-scrollbar { width: 3px; }
.log-panel::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 2px; }

/* ═══ SCREEN FLASH ═══ */
.screen-flash { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 100; opacity: 0; animation: flash .4s ease-out forwards; }
.screen-flash.red { background: radial-gradient(ellipse at center, rgba(140,15,15,.3), transparent 65%); }
.screen-flash.dark { background: rgba(0,0,0,.5); }
.screen-flash.gold { background: radial-gradient(ellipse at center, rgba(200,170,110,.15), transparent 55%); }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ═══ GLOBAL TOOLTIP ═══ */
.game-tooltip {
    display: none;
    position: absolute;
    z-index: 100;
    background: linear-gradient(180deg, #0c1a28 0%, #081420 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    padding: 8px 12px;
    max-width: 240px;
    min-width: 140px;
    box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.3);
    pointer-events: none;
    top: 110%; left: 50%; transform: translateX(-50%);
}
.game-tooltip .tt-name { font-size: 12px; font-weight: 800; color: var(--gold); margin-bottom: 3px; }
.game-tooltip .tt-desc { font-size: 11px; color: var(--text-mid); line-height: 1.35; }
.game-tooltip .tt-cost { font-size: 10px; color: var(--teal-dim); margin-top: 3px; }
.game-tooltip .tt-cooldown { font-size: 9px; color: var(--text-dim); margin-top: 2px; }

/* Show tooltip on hover */
[data-tooltip]:hover .game-tooltip,
.has-tooltip:hover .game-tooltip { display: block; }

/* For action panel extras, show tooltip ABOVE */
.extra-btn .game-tooltip { top: auto; bottom: 110%; }

/* Items, status badges, ability buttons need relative for tooltip positioning */
.card-item-square, .status-badge, .ability-btn, .extra-btn { position: relative; }

/* ═══ VS MEDALLION ═══ */
.vs-divider {
    display: flex; align-items: center; justify-content: center;
    width: 80px; min-height: 420px; z-index: 2;
    flex-shrink: 0;
}

.vs-medallion {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #1a2a38, #0a1520);
    border: 2px solid var(--gold-dim);
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 12px rgba(200,170,110,.1), 0 2px 8px rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    gap: 1px;
    position: relative;
}

.vs-medallion::before {
    content: '';
    position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,170,110,.25), transparent);
    border-radius: 50%;
}

/* ═══ LANDSCAPE (PSP) MODE ═══ */
/* Toggle button - already styled via .view-mode-toggle but add active state */
#landscape-toggle.active {
    color: var(--gold);
    border-color: rgba(200,170,110,.55);
    background: rgba(20,36,50,.95);
}

/* Portrait stat bars - hidden by default, shown in landscape mode */
.action-portrait-stats {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.ap-stat {
    position: relative;
    height: 14px;
    background: rgba(0,0,0,.45);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(90,70,40,.2);
}
.ap-stat-fill { height: 100%; width: 0%; transition: width .4s ease; border-radius: 2px; }
.ap-stat.ap-hp .ap-stat-fill { background: linear-gradient(90deg, #0c6e28, #1aaa45); }
.ap-stat.ap-mana .ap-stat-fill { background: linear-gradient(90deg, #057a72, #0ac8b9); }
.ap-stat.ap-mom .ap-stat-fill { background: linear-gradient(90deg, #7a5500, #c8aa6e); }
.ap-stat-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; letter-spacing: .4px;
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

/* ── Landscape layout ── */
.battle-viewer.landscape-mode {
    position: fixed;
    inset: 0;
    max-width: none;
    width: 100%;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    z-index: 200;
    flex-direction: column;
}

html.arena-landscape-lock,
body.arena-landscape-lock {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    inset: 0;
}

.battle-viewer.landscape-mode .title-bar {
    padding: 4px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(70,55,20,.4);
    background: rgba(4,12,20,.97);
}

.battle-viewer.landscape-mode .battle-header {
    flex-shrink: 0;
    padding: 5px 16px;
}

/* 5-column grid: [left keys | log | arena | action | right keys] */
.battle-viewer.landscape-mode .main-area {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 58px 24% 1fr 29% 70px;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    overflow: hidden;
}

/* Dissolve arena-column so children become direct grid items */
.battle-viewer.landscape-mode .arena-column {
    display: contents;
}

/* Column 1 — Log panel */
.battle-viewer.landscape-mode .log-area {
    grid-column: 2;
    grid-row: 1 / 7;
    max-height: none;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-bottom: none;
    border-right: 1px solid var(--gold-dark);
    overflow: hidden;
}

/* Column 2 — Arena */
.battle-viewer.landscape-mode .arena-wrapper {
    grid-column: 3;
    grid-row: 1 / 7;
    overflow-y: auto;
}

.battle-viewer.landscape-mode .arena-bg-pulse {
    border-radius: 0;
}

/* Column 3 — Action panel */
.battle-viewer.landscape-mode .action-panel {
    grid-column: 4;
    grid-row: 1 / 7;
    flex-direction: column;
    overflow-y: auto;
    border-left: 1px solid var(--gold-dark);
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding: 10px 10px 8px;
    gap: 8px;
    min-height: 0;
}

/* Key-bar — embedded side columns in landscape */
.battle-viewer.landscape-mode .key-bar {
    display: contents;
}

/* Action header — portrait + stat bars stacked vertically */
.battle-viewer.landscape-mode .action-header {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(200,170,110,.1);
    flex-shrink: 0;
}

.battle-viewer.landscape-mode .action-portrait {
    width: 84px;
    height: 84px;
}

.battle-viewer.landscape-mode .action-portrait-stats {
    display: flex;
    width: 100%;
}

.battle-viewer.landscape-mode .action-meta {
    align-items: center;
    display: flex;
    flex-direction: column;
}

/* Abilities — stacked column, full width */
.battle-viewer.landscape-mode .ability-slots {
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.battle-viewer.landscape-mode .ability-btn {
    min-width: 0;
    flex: 1;
    padding: 8px 10px;
}

/* Extras + Confirm — pinned at bottom */
.battle-viewer.landscape-mode .action-extras {
    justify-content: center;
    flex-shrink: 0;
}

.battle-viewer.landscape-mode .confirm-action-btn {
    width: 100%;
    padding: 10px;
    flex-shrink: 0;
}

/* Keep surrender available but low-visibility in landscape */
.battle-viewer.landscape-mode .confirm-action-btn.stealth-surrender {
    width: auto;
    min-width: 82px;
    align-self: flex-end;
    font-size: 9px;
    letter-spacing: 1.2px;
    padding: 5px 8px;
    opacity: .55;
    border-color: rgba(200,170,110,.15);
    color: rgba(200,170,110,.45);
    background: linear-gradient(180deg, rgba(18,18,20,.5), rgba(12,12,14,.62));
}

.battle-viewer.landscape-mode .confirm-action-btn.stealth-surrender:hover {
    opacity: .85;
    color: rgba(200,170,110,.75);
    border-color: rgba(200,170,110,.28);
}

/* Global bottom mode controls */
.mobile-view-controls {
    position: fixed;
    right: 10px;
    bottom: 122px;
    display: flex;
    gap: 8px;
    z-index: 320;
}

.mobile-view-btn {
    border: 1px solid rgba(200,170,110,.3);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(6,20,32,.95), rgba(3,10,18,.95));
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 10px;
    cursor: pointer;
}

.mobile-view-btn:hover {
    border-color: rgba(200,170,110,.58);
}

.mobile-view-btn.active {
    border-color: rgba(200,170,110,.62);
    box-shadow: 0 0 10px rgba(200,170,110,.18);
}

.mobile-view-btn.disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Portrait mobile mode - champions, then logs, then full key dock at bottom */
.battle-viewer.portrait-mode {
    position: fixed;
    inset: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    z-index: 200;
    flex-direction: column;
}

.battle-viewer.portrait-mode .title-bar {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(70,55,20,.4);
    background: rgba(4,12,20,.97);
    flex-shrink: 0;
}

.battle-viewer.portrait-mode .battle-header {
    padding: 6px 12px;
    flex-shrink: 0;
}

.battle-viewer.portrait-mode .main-area {
    flex: 1;
    min-height: 0;
    padding-bottom: 146px;
}

.battle-viewer.portrait-mode .arena-column {
    height: 100%;
}

.battle-viewer.portrait-mode .arena-wrapper {
    height: 43vh;
    min-height: 280px;
    max-height: 47vh;
    overflow: hidden;
}

.battle-viewer.portrait-mode .arena-container {
    min-height: 100%;
    padding: 12px 8px;
    gap: 10px;
}

.battle-viewer.portrait-mode .action-panel {
    display: none;
}

.battle-viewer.portrait-mode .log-area {
    max-height: none;
    height: calc(100% - 43vh);
    border-radius: 0;
}

.battle-viewer.portrait-mode .key-bar {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 300;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 42px 58px;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(70,55,20,.5);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(6,18,28,.98), rgba(4,12,18,.99));
}

.battle-viewer.portrait-mode .key-bar .key {
    width: 100%;
    height: 100%;
    font-size: 16px;
    border-radius: 8px;
}

/* Utility row: keep compact */
.battle-viewer.portrait-mode #kesc,
.battle-viewer.portrait-mode #k1,
.battle-viewer.portrait-mode #k2,
.battle-viewer.portrait-mode #k3,
.battle-viewer.portrait-mode #kalt {
    font-size: 13px;
    opacity: .88;
}

.battle-viewer.portrait-mode #kesc { grid-column: 1; grid-row: 1; }
.battle-viewer.portrait-mode #k1 { grid-column: 2; grid-row: 1; }
.battle-viewer.portrait-mode #k2 { grid-column: 3; grid-row: 1; }
.battle-viewer.portrait-mode #k3 { grid-column: 4; grid-row: 1; }
.battle-viewer.portrait-mode #kalt { grid-column: 5; grid-row: 1; font-size: 12px; }
.battle-viewer.portrait-mode #kenter {
    grid-column: 6;
    grid-row: 1 / span 2;
    font-size: 15px;
    font-weight: 900;
    width: 100%;
    margin: 0;
}
.battle-viewer.portrait-mode #kq { grid-column: 1; grid-row: 2; }
.battle-viewer.portrait-mode #kw { grid-column: 2; grid-row: 2; }
.battle-viewer.portrait-mode #ke { grid-column: 3; grid-row: 2; }
.battle-viewer.portrait-mode #kr { grid-column: 4; grid-row: 2; }
.battle-viewer.portrait-mode #kt-key { grid-column: 5; grid-row: 2; }

/* Action row: larger for right-thumb play */
.battle-viewer.portrait-mode #kq,
.battle-viewer.portrait-mode #kw,
.battle-viewer.portrait-mode #ke,
.battle-viewer.portrait-mode #kr,
.battle-viewer.portrait-mode #kt-key {
    font-size: 22px;
    border-width: 2px;
}

.battle-viewer.landscape-mode .key-bar .key {
    position: static;
    pointer-events: auto;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: 4px;
    border-radius: 12px;
    font-size: clamp(14px, 2.7dvh, 26px);
    font-weight: 800;
    background: linear-gradient(180deg, rgba(6,22,34,.97), rgba(3,12,20,.98));
    border: 2px solid rgba(80,60,28,.7);
    box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.35);
    align-self: stretch;
    justify-self: stretch;
}

/* left column: ESC,1,2,3,END */
.battle-viewer.landscape-mode #kesc { grid-column: 1; grid-row: 1; }
.battle-viewer.landscape-mode #k1 { grid-column: 1; grid-row: 2; }
.battle-viewer.landscape-mode #k2 { grid-column: 1; grid-row: 3; }
.battle-viewer.landscape-mode #k3 { grid-column: 1; grid-row: 4; }
.battle-viewer.landscape-mode #kalt {
    grid-column: 1;
    grid-row: 5;
    font-size: clamp(12px, 2.1dvh, 16px);
    letter-spacing: 1.4px;
}

/* right column: R,T,E,W,Q,ENTER */
.battle-viewer.landscape-mode #kr { grid-column: 5; grid-row: 1; }
.battle-viewer.landscape-mode #kt-key { grid-column: 5; grid-row: 2; }
.battle-viewer.landscape-mode #ke { grid-column: 5; grid-row: 3; }
.battle-viewer.landscape-mode #kw { grid-column: 5; grid-row: 4; }
.battle-viewer.landscape-mode #kq { grid-column: 5; grid-row: 5; }
.battle-viewer.landscape-mode #kenter {
    grid-column: 5;
    grid-row: 6;
    width: calc(100% - 8px);
    font-size: clamp(12px, 2.2dvh, 18px);
    letter-spacing: 2px;
}

/* ═══ AoE golden dots - orbit horizontally when active ═══ */
.aoe-dot {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #c8aa6e, #785a28);
    box-shadow: 0 0 6px rgba(200,170,110,0.4), 0 0 2px rgba(200,170,110,0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
}
.aoe-dot-left { left: -14px; top: 50%; transform: translateY(-50%); transition: top 0.4s ease, left 0.4s ease, transform 0.4s ease; }
.aoe-dot-right { right: -14px; top: 50%; transform: translateY(-50%); transition: top 0.4s ease, right 0.4s ease, transform 0.4s ease; }
.aoe-dot.visible { opacity: 1; }
.aoe-dot.rotated { }
.aoe-dot-left.rotated { left: 50%; top: -14px; transform: translateX(-50%); }
.aoe-dot-right.rotated { right: 50%; top: auto; bottom: -14px; transform: translateX(50%); }
.aoe-dot.spinning {
    opacity: 1;
    animation: aoeOrbit 1.8s linear infinite;
}
.aoe-dot-right.spinning { animation-delay: -0.9s; }
@keyframes aoeOrbit {
    0%   { transform: translateY(-50%) rotate(0deg) translateX(8px) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg) translateX(8px) rotate(-360deg); }
}

.vs-swords {
    font-size: 14px;
    color: var(--gold);
    text-shadow: 0 0 6px rgba(200,170,110,.2);
    line-height: 1;
}

.vs-text {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--gold-dim);
    line-height: 1;
}

/* ═══ WARNING TOAST ═══ */
.warning-toast {
    position: fixed;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30,20,10,.85);
    border: 1px solid rgba(200,100,40,.4);
    border-radius: 4px;
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 700;
    color: #e0a060;
    letter-spacing: .5px;
    z-index: 200;
    pointer-events: none;
    animation: toast-fade 1.6s ease-out forwards;
    box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
@keyframes toast-fade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
    12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* ═══ MID-SCREEN CONFIRMATION MODAL ═══ */
.mid-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 300;
    animation: overlay-in .15s ease-out;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.mid-confirm-box {
    background: linear-gradient(180deg, #0e1e2c, #081420);
    border: 1px solid rgba(200,170,110,.35);
    border-radius: 6px;
    padding: 20px 32px;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0,0,0,.6), 0 0 12px rgba(200,170,110,.08);
    animation: box-in .2s ease-out;
}
@keyframes box-in { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mid-confirm-msg {
    font-size: 14px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: #c8aa6e;
    margin-bottom: 16px;
}
.mid-confirm-btns { display: flex; gap: 12px; justify-content: center; }
.mid-confirm-yes, .mid-confirm-no {
    padding: 7px 22px;
    border-radius: 4px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid;
}
.mid-confirm-yes {
    background: rgba(10,180,160,.15);
    border-color: rgba(10,180,160,.4);
    color: #40c8b0;
}
.mid-confirm-yes:hover { background: rgba(10,180,160,.25); border-color: rgba(10,180,160,.6); color: #60e0d0; }
.mid-confirm-no {
    background: rgba(200,170,110,.08);
    border-color: rgba(200,170,110,.2);
    color: #a09070;
}
.mid-confirm-no:hover { background: rgba(200,170,110,.15); border-color: rgba(200,170,110,.35); color: #c8aa6e; }

/* ═══ MOBILE PORTRAIT LAYOUT - Vertical Card Stack ═══ */

/* Portrait-wrap: always a flex row (portrait + side crystals) */
.card-portrait-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

/* ── Mobile card styles apply to BOTH portrait-mode and landscape-mode ── */
.battle-viewer.portrait-mode .card-slot,
.battle-viewer.landscape-mode .card-slot {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 1px;
}

.battle-viewer.portrait-mode .team,
.battle-viewer.landscape-mode .team {
    gap: 1px;
}

.battle-viewer.portrait-mode .enemy-team .card-slot,
.battle-viewer.landscape-mode .enemy-team .card-slot {
    flex-direction: column;
}

.battle-viewer.portrait-mode .portrait-container,
.battle-viewer.landscape-mode .portrait-container {
    width: var(--portrait-size);
    height: var(--portrait-size);
}

.battle-viewer.portrait-mode .enemy-team .portrait,
.battle-viewer.landscape-mode .enemy-team .portrait {
    transform: none;
}

.battle-viewer.portrait-mode .card-info,
.battle-viewer.landscape-mode .card-info {
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 1px;
}

.battle-viewer.portrait-mode .status-effects,
.battle-viewer.landscape-mode .status-effects {
    min-height: 0;
    margin-top: 0;
}

.battle-viewer.portrait-mode .status-effects:empty,
.battle-viewer.landscape-mode .status-effects:empty {
    display: none;
}

.battle-viewer.portrait-mode .momentum-crystals,
.battle-viewer.landscape-mode .momentum-crystals {
    flex-direction: column-reverse;
    gap: 1px;
    height: auto;
    width: 8px;
    align-items: center;
    justify-content: center;
}

.battle-viewer.portrait-mode .momentum-crystal,
.battle-viewer.landscape-mode .momentum-crystal {
    width: 6px;
    height: 5px;
}

.battle-viewer.portrait-mode .momentum-crystal-inner,
.battle-viewer.landscape-mode .momentum-crystal-inner {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.battle-viewer.portrait-mode .momentum-text,
.battle-viewer.landscape-mode .momentum-text {
    display: none;
}

.battle-viewer.portrait-mode .hp-bar,
.battle-viewer.landscape-mode .hp-bar {
    height: 13px;
}

.battle-viewer.portrait-mode .card-slot.uninvolved,
.battle-viewer.landscape-mode .card-slot.uninvolved {
    transform: scale(0.9);
}
.battle-viewer.portrait-mode .card-slot.involved,
.battle-viewer.landscape-mode .card-slot.involved {
    transform: scale(1.06);
}
.battle-viewer.portrait-mode .player-team .card-slot.involved,
.battle-viewer.landscape-mode .player-team .card-slot.involved {
    transform: translateY(-4px) scale(1.06);
}
.battle-viewer.portrait-mode .enemy-team .card-slot.involved,
.battle-viewer.landscape-mode .enemy-team .card-slot.involved {
    transform: translateY(4px) scale(1.06);
}