.battle-page{
    max-width:1400px;
    margin:0 auto;
    padding:28px 24px 40px;
}

/* =========================
   HERO / CABECERA
========================= */
.battle-hero{
    text-align:center;
    margin-bottom:24px;
}

.battle-hero-badge{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    background:linear-gradient(180deg,#eff6ff 0%,#dbeafe 100%);
    color:#1d4ed8;
    font-size:13px;
    font-weight:800;
    margin-bottom:12px;
    border:1px solid #bfdbfe;
    box-shadow:0 6px 14px rgba(37,99,235,0.10);
}

.battle-title{
    margin:0 0 8px;
    font-size:42px;
    font-weight:900;
    color:#111827;
    letter-spacing:.4px;
}

.battle-subtitle{
    margin:0 auto;
    max-width:760px;
    font-size:16px;
    line-height:1.55;
    color:#6b7280;
}

/* =========================
   DASHBOARD
========================= */
.battle-dashboard{
    margin-bottom:24px;
}

.battle-summary-card{
    background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
    color:#fff;
    border-radius:24px;
    padding:22px 24px;
    box-shadow:0 18px 40px rgba(15,23,42,0.18);
    overflow:hidden;
    position:relative;
}

.battle-summary-card::before{
    content:"";
    position:absolute;
    top:-60px;
    right:-60px;
    width:180px;
    height:180px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
    pointer-events:none;
}

.battle-summary-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:18px;
    position:relative;
    z-index:1;
}

.battle-summary-label{
    display:inline-block;
    font-size:12px;
    font-weight:800;
    color:#cbd5e1;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:6px;
}

.battle-summary-top h3{
    margin:0;
    font-size:26px;
    font-weight:900;
}

.battle-summary-counter{
    min-width:150px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:18px;
    padding:14px 16px;
    text-align:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.battle-summary-counter strong{
    display:block;
    font-size:28px;
    line-height:1;
    margin-bottom:6px;
}

.battle-summary-counter span{
    font-size:13px;
    color:#cbd5e1;
}

.battle-summary-stats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    position:relative;
    z-index:1;
    align-items:stretch;
}

.summary-mini-card{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:18px;
    padding:14px 16px;
    min-height:92px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.summary-mini-card span{
    display:block;
    font-size:12px;
    color:#cbd5e1;
    margin-bottom:6px;
}

.summary-mini-card strong{
    font-size:16px;
    color:#fff;
    line-height:1.2;
}

.battle-difficulty-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    min-height:92px;
}

.battle-difficulty-select{
    width:100%;
    height:42px;
    border:1px solid rgba(147,197,253,0.35);
    border-radius:14px;
    padding:0 42px 0 14px;
    font-size:14px;
    font-weight:800;
    color:#ffffff;
    background:linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%);
    outline:none;
    box-sizing:border-box;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    cursor:pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 6px 16px rgba(15,23,42,0.16);
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
    background-image:
        linear-gradient(45deg, transparent 50%, #dbeafe 50%),
        linear-gradient(135deg, #dbeafe 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size:6px 6px, 6px 6px;
    background-repeat:no-repeat;
}

.battle-difficulty-select:hover{
    background:linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
    border-color:rgba(147,197,253,0.55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 8px 18px rgba(15,23,42,0.18);
}

.battle-difficulty-select:focus{
    border-color:#60a5fa;
    box-shadow:
        0 0 0 3px rgba(59,130,246,0.18),
        0 8px 18px rgba(15,23,42,0.18);
}

.battle-difficulty-select option{
    color:#111827;
    background:#ffffff;
}

.battle-difficulty-card small{
    display:none;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */
.battle-layout{
    display:grid;
    grid-template-columns:1.35fr .9fr;
    gap:24px;
    margin-bottom:24px;
}

.battle-panel{
    background:#fff;
    border-radius:24px;
    padding:22px;
    box-shadow:0 12px 28px rgba(15,23,42,0.08);
    border:1px solid #e5e7eb;
}

.battle-team-panel{
    display:flex;
    flex-direction:column;
}

.battle-panel-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:12px;
}

.battle-panel-kicker{
    display:inline-block;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#64748b;
    margin-bottom:6px;
}

.battle-panel-header h3{
    margin:0;
    font-size:28px;
    font-weight:900;
    color:#111827;
}

.battle-panel-chip{
    flex-shrink:0;
    background:linear-gradient(180deg,#eef2ff 0%,#e0e7ff 100%);
    color:#4338ca;
    border:1px solid #c7d2fe;
    border-radius:999px;
    padding:8px 14px;
    font-size:12px;
    font-weight:800;
}

.battle-panel-chip.chip-red{
    background:linear-gradient(180deg,#fef2f2 0%,#fee2e2 100%);
    color:#b91c1c;
    border-color:#fecaca;
}

.battle-panel-description{
    margin:0 0 18px;
    font-size:15px;
    line-height:1.6;
    color:#475569;
}

/* =========================
   EQUIPO
========================= */
.battle-team-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-bottom:16px;
}

.battle-team-slot{
    position:relative;
    min-height:130px;
    border-radius:22px;
    padding:16px 18px;
    overflow:hidden;
    border:1px solid #dbe5f1;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    box-shadow:
        0 10px 24px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.65);
}

.battle-team-slot::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.65), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,0.35), transparent 42%);
    pointer-events:none;
}

.battle-team-slot:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 24px rgba(15,23,42,0.08);
}

.battle-team-slot.empty{
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px dashed #cbd5e1;
    background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
}

.team-slot-index{
    position:absolute;
    top:12px;
    left:12px;
    width:31px;
    height:31px;
    border-radius:50%;
    background:#e2e8f0;
    color:#0f172a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:900;
    z-index:2;
}

.team-slot-content{
    text-align:center;
    position:relative;
    z-index:1;
}

.team-slot-icon{
    width:48px;
    height:48px;
    margin:0 auto 10px;
    border-radius:50%;
    background:#ffffff;
    border:1px solid #dbeafe;
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    font-weight:700;
}

.team-slot-content h4{
    margin:0 0 6px;
    font-size:18px;
    font-weight:800;
    color:#111827;
}

.team-slot-content p{
    margin:0;
    font-size:14px;
    color:#64748b;
}

.battle-team-slot.filled{
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.team-slot-filled{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    position:relative;
    z-index:1;
}

.team-slot-sprite{
    width:72px;
    height:72px;
    object-fit:contain;
    flex-shrink:0;
    margin-left:6px;
    image-rendering:pixelated;
    filter:drop-shadow(0 6px 10px rgba(15,23,42,0.12));
}

.team-slot-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    flex:1;
    min-width:0;
}

.team-slot-headline{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:2px;
}

.team-slot-info h4{
    margin:0;
    font-size:17px;
    font-weight:900;
    color:#111827;
}

.team-slot-info p{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:4px 0 10px;
    padding:7px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    line-height:1;
    color:#ffffff;
    min-width:78px;
    width:fit-content;
    max-width:100%;
    box-shadow:0 6px 12px rgba(0,0,0,0.10);
}

.team-slot-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.team-slot-meta span{
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    line-height:1;
}

.meta-level{
    background:#dbeafe;
    color:#1d4ed8;
}

.meta-hp{
    background:#d9f99d;
    color:#3f6212;
}

.meta-atk{
    background:#fee2e2;
    color:#b91c1c;
}

.meta-def{
    background:#ede9fe;
    color:#6d28d9;
}

.team-slot-exp-wrap{
    width: 100%;
    margin-top: 10px;
}

.team-slot-exp-label{
    font-size: 12px;
    font-weight: 800;
    color: #374151;
    margin-bottom: 6px;
}

.team-slot-exp-bar{
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.team-slot-exp-fill{
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 999px;
    transition: width .24s ease;
}

.team-slot-remove{
    position:absolute;
    top:10px;
    right:10px;
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:rgba(239,68,68,0.12);
    color:#dc2626;
    font-size:19px;
    font-weight:900;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3;
    transition:background .15s ease, transform .15s ease;
}

.team-slot-remove:hover{
    background:rgba(239,68,68,0.18);
    transform:scale(1.05);
}

.team-slot-lead{
    border:1px solid #f6cf75 !important;
    box-shadow:0 12px 22px rgba(245,158,11,0.10);
}

.team-lead-badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    background:#fef3c7;
    color:#b45309;
    font-size:11px;
    font-weight:900;
}

.team-shiny-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:999px;
    background:linear-gradient(180deg,#fff4cc 0%,#fde68a 100%);
    color:#b45309;
    font-size:12px;
    font-weight:900;
    line-height:1;
    box-shadow:0 2px 6px rgba(245,158,11,0.18);
}

/* =========================
   BOTONES ACCIÓN
========================= */
.battle-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:auto;
    padding-top:8px;
    justify-content:center;
}

.btn-battle{
    border:0;
    border-radius:14px;
    padding:12px 18px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn-battle:hover{
    transform:translateY(-1px);
    opacity:.97;
}

.btn-battle-light{
    background:#e2e8f0;
    color:#0f172a;
}

.btn-battle-secondary{
    background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);
    color:#fff;
    box-shadow:0 10px 20px rgba(37,99,235,.18);
}

.btn-battle-primary{
    background:linear-gradient(180deg,#ef4444 0%,#dc2626 100%);
    color:#fff;
    box-shadow:0 10px 20px rgba(220,38,38,.18);
}

/* =========================
   PANEL DERECHO
========================= */
.battle-feature-list{
    display:grid;
    gap:14px;
    margin-bottom:18px;
}

.battle-feature-card{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.feature-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:linear-gradient(180deg,#fee2e2 0%,#fecaca 100%);
    color:#b91c1c;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:900;
    flex-shrink:0;
}

.battle-feature-card h4{
    margin:0 0 6px;
    font-size:18px;
    font-weight:800;
    color:#111827;
}

.battle-feature-card p{
    margin:0;
    font-size:14px;
    line-height:1.55;
    color:#475569;
}

.battle-preview-card{
    border-radius:20px;
    padding:18px;
    background:linear-gradient(180deg,#fff7ed 0%,#ffedd5 100%);
    border:1px solid #fdba74;
}

.battle-preview-header{
    margin-bottom:12px;
}

.preview-badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.65);
    color:#c2410c;
    font-size:12px;
    font-weight:800;
    margin-bottom:8px;
}

.battle-preview-header h4{
    margin:0;
    font-size:20px;
    font-weight:900;
    color:#9a3412;
}

.battle-flow{
    margin:0;
    padding-left:18px;
    color:#9a3412;
}

.battle-flow li{
    margin-bottom:10px;
    line-height:1.5;
    font-size:14px;
    font-weight:600;
}

.battle-arena-preview{
    margin-bottom:16px;
    border-radius:22px;
    padding:18px;
    background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%);
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}

.battle-arena-badge{
    display:inline-block;
    margin-bottom:12px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.14);
    font-size:12px;
    font-weight:800;
}

.battle-arena-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.arena-side{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:800;
}

.arena-orb{
    width:58px;
    height:58px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #60a5fa, #1d4ed8);
    box-shadow:0 0 0 6px rgba(255,255,255,0.08);
}

.arena-orb.rival{
    background:radial-gradient(circle at 35% 30%, #fca5a5, #dc2626);
}

.arena-vs{
    font-size:24px;
    font-weight:900;
    color:#fde68a;
}

/* =========================
   COLECCIÓN
========================= */
.battle-roster-section{
    margin-bottom:18px;
}

.battle-tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.battle-tab{
    border:1px solid #c7d2fe;
    background:#eef2ff;
    color:#4338ca;
    border-radius:999px;
    padding:10px 14px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.battle-tab.active{
    background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);
    color:#fff;
    border-color:#2563eb;
    box-shadow:0 10px 20px rgba(37,99,235,0.18);
}

.battle-quick-filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.battle-chip-filter{
    border:1px solid #dbeafe;
    background:#f8fafc;
    color:#334155;
    border-radius:999px;
    padding:8px 12px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}

.battle-chip-clear{
    background:#fff7ed;
    border-color:#fdba74;
    color:#c2410c;
}

/* filtros compactos */
.battle-filters{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr) minmax(0,.7fr) minmax(0,.7fr);
    gap:10px;
    margin-bottom:14px;
    align-items:center;
}

.battle-filters > *{
    min-width:0;
}

.battle-filters input,
.battle-filters select{
    width:100%;
    height:42px;
    min-width:0;
    border:1px solid #cfd8e6;
    border-radius:12px;
    padding:0 14px;
    font-size:14px;
    font-weight:600;
    color:#0f172a;
    background:#fff;
    outline:none;
    box-shadow:0 2px 6px rgba(15,23,42,0.04);
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
    box-sizing:border-box;
}

.battle-filters input::placeholder{
    color:#94a3b8;
    font-weight:500;
}

.battle-filters input:focus,
.battle-filters select:focus{
    border-color:#93c5fd;
    box-shadow:0 0 0 3px rgba(59,130,246,0.10);
    background:#fff;
}

.battle-filters input:hover,
.battle-filters select:hover{
    border-color:#b8c7db;
}

.battle-filters select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:38px;
    cursor:pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size:6px 6px, 6px 6px;
    background-repeat:no-repeat;
}

/* grid colección */
.battle-roster-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.battle-pokemon-card{
    min-height:310px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    border:1px solid #dbe5f1;
    border-radius:22px;
    padding:18px 14px 12px;
    text-align:center;
    box-shadow:
        0 10px 24px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.65);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    position:relative;
    overflow:hidden;
}

.battle-pokemon-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.65), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,0.35), transparent 42%);
    pointer-events:none;
}

.battle-pokemon-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 24px rgba(15,23,42,0.08);
}

.battle-pokemon-sprite{
    width:84px;
    height:84px;
    object-fit:contain;
    margin:4px auto 10px;
    image-rendering:pixelated;
    filter:drop-shadow(0 6px 10px rgba(15,23,42,0.10));
    position:relative;
    z-index:1;
}

.battle-card-name-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:38px;
    margin-bottom:2px;
    position:relative;
    z-index:1;
}

.battle-card-name-row h4{
    margin:0;
    font-size:16px;
    font-weight:900;
    color:#111827;
}

.battle-card-shiny-dot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:999px;
    background:linear-gradient(180deg,#fff4cc 0%,#fde68a 100%);
    color:#b45309;
    font-size:12px;
    font-weight:900;
    line-height:1;
    box-shadow:0 2px 6px rgba(245,158,11,0.18);
}

.battle-pokemon-card p{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:6px 0 14px;
    padding:7px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    line-height:1;
    color:#ffffff;
    min-width:78px;
    width:fit-content;
    max-width:100%;
    box-shadow:0 6px 12px rgba(0,0,0,0.10);
    position:relative;
    z-index:1;
}

.battle-card-meta{
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:10px;
    min-height:30px;
    position:relative;
    z-index:1;
}

.battle-card-meta-pro{
    min-height:auto;
    row-gap:8px;
}

.battle-card-level,
.battle-card-hp,
.battle-card-atk,
.battle-card-def{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    line-height:1;
}

.battle-card-level{
    background:#dbeafe;
    color:#1d4ed8;
}

.battle-card-hp{
    background:#d9f99d;
    color:#3f6212;
}

.battle-card-atk{
    background:#fee2e2;
    color:#b91c1c;
}

.battle-card-def{
    background:#ede9fe;
    color:#6d28d9;
}

.battle-card-exp-wrap{
    width: 100%;
    margin: 2px 0 12px;
    position: relative;
    z-index: 1;
}

.battle-card-exp-label{
    font-size: 12px;
    font-weight: 800;
    color: #374151;
    margin-bottom: 6px;
}

.battle-card-exp-bar{
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.battle-card-exp-fill{
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 999px;
    transition: width .24s ease;
}

.battle-card-btn{
    width:100%;
    margin-top:auto;
    border:0;
    border-radius:12px;
    padding:11px 14px;
    min-height:44px;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
    position:relative;
    z-index:1;
}

.battle-card-btn:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 10px 16px rgba(37,99,235,0.14);
    background:#cfe1ff;
}

.battle-card-btn:disabled{
    opacity:1;
}

.battle-card-btn.in-team{
    background:#dcfce7;
    color:#15803d;
}

.battle-card-btn.in-team:disabled{
    cursor:default;
}

.battle-card-btn:disabled:not(.in-team){
    cursor:not-allowed;
}

.battle-pokemon-card.selected{
    border-color:#86efac;
    box-shadow:0 10px 20px rgba(34,197,94,0.12);
}

/* =========================
   COLORES POR TIPO
   Homogéneo con pokedex
========================= */

/* fondos cards */
.type-planta{
    background:linear-gradient(180deg,#f2fff3 0%, #e9f9ec 45%, #ffffff 100%);
    border-top:5px solid #4CAF50;
}

.type-fuego{
    background:linear-gradient(180deg,#fff6f2 0%, #ffe9dc 45%, #ffffff 100%);
    border-top:5px solid #f97316;
}

.type-agua{
    background:linear-gradient(180deg,#f1f7ff 0%, #e4f0ff 45%, #ffffff 100%);
    border-top:5px solid #3b82f6;
}

.type-electrico{
    background:linear-gradient(180deg,#fffde9 0%, #fff6c7 45%, #ffffff 100%);
    border-top:5px solid #eab308;
}

.type-hielo{
    background:linear-gradient(180deg,#eefcff 0%, #daf6ff 45%, #ffffff 100%);
    border-top:5px solid #06b6d4;
}

.type-lucha{
    background:linear-gradient(180deg,#fff3f3 0%, #ffe2e2 45%, #ffffff 100%);
    border-top:5px solid #dc2626;
}

.type-veneno{
    background:linear-gradient(180deg,#fcf4ff 0%, #f2e1ff 45%, #ffffff 100%);
    border-top:5px solid #a855f7;
}

.type-tierra{
    background:linear-gradient(180deg,#fff9ec 0%, #f8ebcb 45%, #ffffff 100%);
    border-top:5px solid #ca8a04;
}

.type-volador{
    background:linear-gradient(180deg,#f8fbff 0%, #e8f0ff 45%, #ffffff 100%);
    border-top:5px solid #60a5fa;
}

.type-psiquico{
    background:linear-gradient(180deg,#fff1f7 0%, #ffdceb 45%, #ffffff 100%);
    border-top:5px solid #ec4899;
}

.type-bicho{
    background:linear-gradient(180deg,#f8ffe8 0%, #edf8d0 45%, #ffffff 100%);
    border-top:5px solid #65a30d;
}

.type-roca{
    background:linear-gradient(180deg,#fafaf9 0%, #f0ece6 45%, #ffffff 100%);
    border-top:5px solid #78716c;
}

.type-fantasma{
    background:linear-gradient(180deg,#f7f4ff 0%, #ebe5ff 45%, #ffffff 100%);
    border-top:5px solid #7c3aed;
}

.type-dragon{
    background:linear-gradient(180deg,#f1f3ff 0%, #dfe5ff 45%, #ffffff 100%);
    border-top:5px solid #4f46e5;
}

.type-acero{
    background:linear-gradient(180deg,#f6f9fc 0%, #e6edf5 45%, #ffffff 100%);
    border-top:5px solid #64748b;
}

.type-hada{
    background:linear-gradient(180deg,#fff2f8 0%, #ffdfee 45%, #ffffff 100%);
    border-top:5px solid #f472b6;
}

.type-normal,
.type-default{
    background:linear-gradient(180deg,#fafafa 0%, #efefef 45%, #ffffff 100%);
    border-top:5px solid #6b7280;
}

/* badge tipo */
.battle-team-slot.type-planta .team-slot-info p,
.battle-pokemon-card.type-planta p{ background:#4CAF50; }

.battle-team-slot.type-fuego .team-slot-info p,
.battle-pokemon-card.type-fuego p{ background:#f97316; }

.battle-team-slot.type-agua .team-slot-info p,
.battle-pokemon-card.type-agua p{ background:#3b82f6; }

.battle-team-slot.type-electrico .team-slot-info p,
.battle-pokemon-card.type-electrico p{ background:#eab308; }

.battle-team-slot.type-hielo .team-slot-info p,
.battle-pokemon-card.type-hielo p{ background:#06b6d4; }

.battle-team-slot.type-lucha .team-slot-info p,
.battle-pokemon-card.type-lucha p{ background:#dc2626; }

.battle-team-slot.type-veneno .team-slot-info p,
.battle-pokemon-card.type-veneno p{ background:#a855f7; }

.battle-team-slot.type-tierra .team-slot-info p,
.battle-pokemon-card.type-tierra p{ background:#ca8a04; }

.battle-team-slot.type-volador .team-slot-info p,
.battle-pokemon-card.type-volador p{ background:#60a5fa; }

.battle-team-slot.type-psiquico .team-slot-info p,
.battle-pokemon-card.type-psiquico p{ background:#ec4899; }

.battle-team-slot.type-bicho .team-slot-info p,
.battle-pokemon-card.type-bicho p{ background:#65a30d; }

.battle-team-slot.type-roca .team-slot-info p,
.battle-pokemon-card.type-roca p{ background:#78716c; }

.battle-team-slot.type-fantasma .team-slot-info p,
.battle-pokemon-card.type-fantasma p{ background:#7c3aed; }

.battle-team-slot.type-dragon .team-slot-info p,
.battle-pokemon-card.type-dragon p{ background:#4f46e5; }

.battle-team-slot.type-acero .team-slot-info p,
.battle-pokemon-card.type-acero p{ background:#64748b; }

.battle-team-slot.type-hada .team-slot-info p,
.battle-pokemon-card.type-hada p{ background:#f472b6; }

.battle-team-slot.type-normal .team-slot-info p,
.battle-pokemon-card.type-normal p,
.battle-team-slot.type-default .team-slot-info p,
.battle-pokemon-card.type-default p{ background:#6b7280; }

/* =========================
   EMPTY / MENSAJES
========================= */
.battle-empty-state{
    grid-column:1 / -1;
    text-align:center;
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    border-radius:20px;
    padding:26px 18px;
}

.battle-empty-state h4{
    margin:0 0 8px;
    font-size:20px;
    font-weight:900;
    color:#111827;
}

.battle-empty-state p{
    margin:0;
    color:#64748b;
    line-height:1.5;
}

/* =========================
   MODAL
========================= */
.battle-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.48);
    backdrop-filter:blur(3px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:3000;
}

.battle-modal-overlay.oculto{
    display:none;
}

.battle-modal{
    width:min(420px, 100%);
    background:#fff;
    border-radius:24px;
    padding:28px 24px 22px;
    text-align:center;
    box-shadow:0 22px 48px rgba(15,23,42,0.20);
    border:1px solid #e5e7eb;
}

.battle-modal-icon{
    width:68px;
    height:68px;
    margin:0 auto 14px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    font-weight:900;
}

.battle-modal h3{
    margin:0 0 8px;
    font-size:28px;
    font-weight:900;
    color:#111827;
}

.battle-modal p{
    margin:0 0 20px;
    font-size:15px;
    line-height:1.55;
    color:#475569;
    font-weight:600;
}

.battle-modal-actions{
    display:flex;
    gap:12px;
    justify-content:center;
}

.battle-modal-btn{
    border:0;
    border-radius:14px;
    padding:12px 18px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    min-width:120px;
}

.battle-modal-btn-primary{
    background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);
    color:#fff;
}

.battle-modal-btn-danger{
    background:linear-gradient(180deg,#ef4444 0%,#dc2626 100%);
    color:#fff;
}

.battle-modal-btn-light{
    background:#e2e8f0;
    color:#0f172a;
}

.battle-modal-ok .battle-modal-icon{
    background:#dcfce7;
    color:#15803d;
}

.battle-modal-warning .battle-modal-icon{
    background:#ffedd5;
    color:#c2410c;
}

.battle-modal-error .battle-modal-icon{
    background:#fee2e2;
    color:#b91c1c;
}

.battle-modal-info .battle-modal-icon{
    background:#dbeafe;
    color:#1d4ed8;
}


.battle-premium-overlay{
    z-index:3100;
}

.battle-premium-modal{
    width:min(640px, 100%);
    text-align:left;
    position:relative;
    padding:28px 24px 24px;
}

.battle-premium-close{
    position:absolute;
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#e2e8f0;
    color:#0f172a;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    font-weight:900;
}

.battle-premium-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
    padding:8px 14px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.battle-premium-modal .battle-modal-icon{
    margin:0 0 14px;
}

.battle-premium-modal h3{
    margin:0 0 8px;
}

.battle-premium-modal > p{
    margin:0 0 18px;
}

.battle-premium-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}

.battle-premium-row,
.battle-premium-description-box{
    border-radius:18px;
    padding:14px 16px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
}

.battle-premium-row small,
.battle-premium-description-box small{
    display:block;
    margin-bottom:6px;
    color:#64748b;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.battle-premium-row strong,
.battle-premium-description-box strong{
    display:block;
    color:#0f172a;
    font-size:15px;
    line-height:1.55;
}

.battle-premium-description-box{
    margin-bottom:16px;
}

.battle-premium-highlights{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
    list-style:none;
    padding:0;
    margin:0 0 18px;
}

.battle-premium-highlights li{
    border-radius:14px;
    padding:12px 14px;
    background:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%);
    border:1px solid #dbeafe;
    color:#1e3a8a;
    font-size:13px;
    font-weight:800;
    line-height:1.4;
}

.battle-premium-check{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
    color:#334155;
    font-size:14px;
    font-weight:700;
    line-height:1.5;
}

.battle-premium-check input{
    margin-top:3px;
    width:18px;
    height:18px;
    flex-shrink:0;
}

.battle-premium-error{
    margin:10px 0 18px;
    padding:12px 14px;
    border-radius:14px;
    background:#fee2e2;
    border:1px solid #fca5a5;
    color:#b91c1c;
    font-size:13px;
    font-weight:800;
}

.oculto{
    display:none !important;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1180px){
    .battle-layout{
        grid-template-columns:1fr;
    }

    .battle-summary-stats{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .battle-roster-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .battle-filters{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width:900px){
    .battle-page{
        padding:22px 16px 34px;
    }

    .battle-summary-top{
        flex-direction:column;
        align-items:flex-start;
    }

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

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

    .battle-filters{
        grid-template-columns:minmax(0,1fr);
    }

    .battle-roster-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .battle-title{
        font-size:34px;
    }

    .battle-modal-actions{
        flex-direction:column;
    }

    .battle-modal-btn{
        width:100%;
    }

    .battle-premium-grid,
    .battle-premium-highlights{
        grid-template-columns:1fr;
    }
}

@media (max-width:560px){
    .battle-roster-grid{
        grid-template-columns:1fr;
    }

    .battle-panel{
        padding:18px;
    }

    .battle-panel-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .battle-panel-header h3{
        font-size:24px;
    }

    .battle-actions{
        flex-direction:column;
    }

    .btn-battle{
        width:100%;
    }

    .battle-tabs,
    .battle-quick-filters{
        gap:8px;
    }

    .battle-filters input,
    .battle-filters select{
        height:46px;
    }
}
/* =========================
   MODOS / BOSS / IDLE
========================= */
.battle-modes-section{
    margin-bottom:24px;
}

.battle-modes-panel{
    padding:22px;
}

.battle-panel-header-tight{
    margin-bottom:8px;
}

.battle-panel-description-tight{
    margin-bottom:16px;
}

.battle-mode-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.battle-mode-card{
    position:relative;
    border:1px solid #dbe5f1;
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
    padding:18px 16px;
    text-align:left;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow:0 10px 24px rgba(15,23,42,0.06);
}

.battle-mode-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 26px rgba(15,23,42,0.10);
}

.battle-mode-card.active{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,0.10), 0 16px 30px rgba(37,99,235,0.12);
}

.battle-mode-card[data-battle-mode="boss"]{
    background:linear-gradient(180deg,#fffaf0 0%,#fff3d9 100%);
    border-color:#fcd34d;
}

.battle-mode-card[data-battle-mode="idle"]{
    background:linear-gradient(180deg,#f6fbff 0%,#ebf5ff 100%);
    border-color:#bfdbfe;
}

.battle-mode-icon{
    width:52px;
    height:52px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin-bottom:12px;
    background:#eff6ff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.65);
}

.battle-mode-card[data-battle-mode="boss"] .battle-mode-icon{
    background:#fff2c6;
}

.battle-mode-card[data-battle-mode="idle"] .battle-mode-icon{
    background:#e0f2fe;
}

.battle-mode-card h4{
    margin:0 0 8px;
    font-size:20px;
    font-weight:900;
    color:#111827;
}

.battle-mode-card p{
    margin:0;
    font-size:14px;
    line-height:1.55;
    color:#475569;
}

.battle-mode-badge{
    position:absolute;
    top:14px;
    right:14px;
    padding:6px 10px;
    border-radius:999px;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.02em;
}

.battle-mode-badge-accent{
    background:#fef3c7;
    color:#b45309;
}

.battle-mode-badge-soft{
    background:#dcfce7;
    color:#15803d;
}

.battle-current-mode-card,
.battle-boss-card,
.battle-idle-card{
    border-radius:22px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    padding:18px;
    margin-bottom:16px;
}

.battle-current-mode-card{
    background:linear-gradient(135deg,#eff6ff 0%,#f8fbff 100%);
    border-color:#c7d2fe;
}

.battle-current-mode-top,
.battle-side-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
}

.battle-current-mode-label,
.battle-side-card-kicker{
    display:inline-block;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#64748b;
    margin-bottom:6px;
}

.battle-current-mode-pill,
.battle-side-card-pill{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:84px;
    min-height:34px;
    padding:7px 12px;
    border-radius:999px;
    background:#e2e8f0;
    color:#0f172a;
    font-size:12px;
    font-weight:900;
}

.battle-side-card-pill-blue{
    background:#dbeafe;
    color:#1d4ed8;
}

.battle-current-mode-card h4,
.battle-side-card-head h4{
    margin:0;
    font-size:20px;
    font-weight:900;
    color:#111827;
}

.battle-current-mode-card p,
.battle-boss-card p,
.battle-idle-card p{
    margin:0;
    color:#475569;
    line-height:1.55;
    font-size:14px;
}

.battle-current-mode-card small{
    display:block;
    margin-top:10px;
    color:#1e40af;
    font-weight:700;
}

.battle-boss-main{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:14px;
}

.battle-boss-avatar{
    width:58px;
    height:58px;
    border-radius:18px;
    background:linear-gradient(180deg,#fff2c6 0%,#fde68a 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    flex-shrink:0;
    box-shadow:0 8px 18px rgba(245,158,11,0.14);
}

.battle-boss-info strong{
    display:block;
    font-size:20px;
    color:#111827;
    margin-bottom:4px;
}

.battle-boss-stats-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}

.battle-boss-stat,
.battle-idle-field{
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:12px 14px;
}

.battle-boss-stat span,
.battle-idle-field span{
    display:block;
    font-size:12px;
    color:#64748b;
    margin-bottom:6px;
}

.battle-boss-stat strong{
    display:block;
    font-size:15px;
    color:#111827;
}

.battle-boss-actions,
.battle-idle-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.battle-idle-config-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
}

.battle-idle-field select{
    width:100%;
    height:42px;
    border:1px solid #cfd8e6;
    border-radius:12px;
    padding:0 12px;
    font-size:14px;
    font-weight:700;
    color:#0f172a;
    background:#fff;
    box-sizing:border-box;
}

.battle-idle-progress-wrap{
    margin-bottom:14px;
}

.battle-idle-progress-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.battle-idle-progress-top span{
    color:#64748b;
    font-size:13px;
    font-weight:700;
}

.battle-idle-progress-top strong{
    color:#111827;
    font-size:15px;
    font-weight:900;
}

.battle-idle-progress-bar{
    width:100%;
    height:10px;
    border-radius:999px;
    background:#e5e7eb;
    overflow:hidden;
}

.battle-idle-progress-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#2563eb 0%,#0ea5e9 100%);
    transition:width .25s ease;
}

#battleIdleProgressText{
    display:block;
    margin-top:8px;
    color:#475569;
    font-size:13px;
    font-weight:700;
}

.battle-boss-ranking-card{
    margin-bottom:0;
}

.battle-boss-ranking-list{
    display:grid;
    gap:10px;
}

.battle-boss-ranking-item,
.battle-ranking-empty{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,0.7);
    border:1px solid rgba(194,65,12,0.12);
}

.battle-ranking-empty{
    justify-content:center;
    color:#9a3412;
    font-weight:700;
}

.battle-boss-ranking-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.battle-boss-ranking-place{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#fff7ed;
    color:#c2410c;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    flex-shrink:0;
}

.battle-boss-ranking-name{
    font-size:14px;
    font-weight:900;
    color:#7c2d12;
}

.battle-boss-ranking-meta{
    display:block;
    font-size:12px;
    color:#9a3412;
    margin-top:2px;
}

.battle-boss-ranking-right{
    text-align:right;
    flex-shrink:0;
}

.battle-boss-ranking-right strong{
    display:block;
    color:#7c2d12;
    font-size:15px;
}

.battle-boss-ranking-right span{
    font-size:12px;
    color:#9a3412;
    font-weight:700;
}

.battle-boss-clear-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:5px;
    padding:5px 8px;
    border-radius:999px;
    background:#dcfce7;
    color:#15803d;
    font-size:11px;
    font-weight:900;
}

.battle-mode-hidden{
    opacity:.45;
    pointer-events:none;
}

@media (max-width: 1180px){
    .battle-mode-grid,
    .battle-boss-stats-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 960px){
    .battle-idle-config-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 720px){
    .battle-mode-grid{
        grid-template-columns:1fr;
    }

    .battle-boss-actions,
    .battle-idle-actions{
        flex-direction:column;
    }

    .battle-boss-actions .btn-battle,
    .battle-idle-actions .btn-battle{
        width:100%;
    }

    .battle-boss-ranking-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .battle-boss-ranking-right{
        text-align:left;
    }
}


/* =========================================================
   CLEAN BATTLE IA LAYOUT
   - Unifica Team + Boss dentro de una sola tarjeta visual
========================================================= */
.battle-page-clean{
    padding-top:22px;
}

.battle-layout-single{
    grid-template-columns:minmax(0,1.62fr) minmax(300px,340px);
    align-items:start;
    gap:22px;
    margin-bottom:24px;
    padding:22px;
    border-radius:30px;
    border:1px solid #e5e7eb;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
    box-shadow:0 18px 40px rgba(15,23,42,0.08);
    position:relative;
    overflow:hidden;
}

.battle-layout-single::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at top right, rgba(59,130,246,0.06), transparent 24%),
        radial-gradient(circle at bottom left, rgba(239,68,68,0.05), transparent 28%);
}

.battle-layout-single > *{
    min-width:0;
    position:relative;
    z-index:1;
}

.battle-team-panel-wide{
    width:100%;
}

.battle-layout-single .battle-team-panel{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    border-radius:0;
}

.battle-layout-single .battle-panel-description{
    margin-bottom:20px;
}

.battle-side-column{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
    position:relative;
    padding-left:22px;
}

.battle-side-column::before{
    content:"";
    position:absolute;
    top:2px;
    bottom:2px;
    left:0;
    width:1px;
    background:linear-gradient(
        180deg,
        rgba(148,163,184,0),
        rgba(148,163,184,0.55),
        rgba(148,163,184,0)
    );
}

.battle-side-surface{
    box-shadow:none;
    border:1px solid #e2e8f0;
    background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.battle-side-column .battle-boss-card,
.battle-side-column .battle-boss-ranking-card{
    margin-bottom:0;
    padding:16px;
    border-radius:20px;
}

.battle-side-column .battle-side-card-head{
    margin-bottom:12px;
}

.battle-side-column .battle-boss-main{
    margin-bottom:14px;
    align-items:flex-start;
}

.battle-boss-avatar{
    width:54px;
    height:54px;
    border-radius:16px;
    font-size:26px;
}

.battle-side-column .battle-boss-info strong{
    font-size:18px;
    line-height:1.15;
}

.battle-side-column .battle-boss-card p{
    font-size:13px;
    line-height:1.45;
}

.battle-boss-stats-grid-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.battle-side-column .battle-boss-stat{
    min-height:72px;
    padding:12px;
    border-radius:14px;
}

.battle-side-column .battle-boss-stat span{
    font-size:11px;
}

.battle-side-column .battle-boss-stat strong{
    font-size:14px;
}

.battle-boss-actions-side{
    gap:10px;
}

.battle-boss-actions-side .btn-battle{
    flex:1;
    min-width:0;
    padding:12px 14px;
    font-size:13px;
}

.battle-side-column .battle-boss-ranking-list{
    gap:10px;
}

.battle-side-column .battle-boss-ranking-item,
.battle-side-column .battle-ranking-empty{
    border-radius:14px;
    padding:12px;
}

.battle-actions-centered{
    justify-content:center;
}

.battle-page-clean .battle-dashboard{
    margin-bottom:18px;
}

.battle-page-clean .battle-panel,
.battle-page-clean .battle-side-surface{
    overflow:hidden;
}

@media (max-width:1100px){
    .battle-layout-single{
        grid-template-columns:1fr;
        padding:20px;
    }

    .battle-side-column{
        order:2;
        padding-left:0;
        padding-top:18px;
    }

    .battle-side-column::before{
        top:0;
        left:0;
        right:0;
        bottom:auto;
        width:auto;
        height:1px;
        background:linear-gradient(
            90deg,
            rgba(148,163,184,0),
            rgba(148,163,184,0.55),
            rgba(148,163,184,0)
        );
    }
}

@media (max-width:900px){
    .battle-page-clean{
        padding-top:18px;
    }

    .battle-layout-single{
        padding:18px;
        border-radius:24px;
    }

    .battle-actions-centered{
        justify-content:stretch;
    }

    .battle-boss-stats-grid-side{
        grid-template-columns:1fr;
    }

    .battle-boss-actions-side{
        flex-direction:column;
    }
}

@media (max-width:560px){
    .battle-layout-single{
        padding:16px;
    }

    .battle-side-column .battle-boss-card,
    .battle-side-column .battle-boss-ranking-card{
        padding:14px;
        border-radius:18px;
    }

    .battle-boss-avatar{
        width:48px;
        height:48px;
        font-size:22px;
    }
}

/* =========================
   BATTLE BOOSTERS
========================= */
.battle-boosters-strip{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.12);
    position:relative;
    z-index:1;
}

.battle-boosters-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:14px;
}

.battle-boosters-kicker{
    display:inline-block;
    font-size:12px;
    font-weight:800;
    color:#cbd5e1;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:6px;
}

.battle-boosters-head h4{
    margin:0;
    font-size:20px;
    font-weight:900;
    color:#ffffff;
}

.battle-boosters-manage-link{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid rgba(191,219,254,0.28);
    background:rgba(255,255,255,0.08);
    color:#eff6ff;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
    transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.battle-boosters-manage-link:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.12);
    border-color:rgba(191,219,254,0.5);
}

.battle-boosters-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
}

.battle-booster-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    padding:16px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
    min-height:122px;
}

.battle-booster-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right, rgba(255,255,255,0.12), transparent 45%);
    pointer-events:none;
}

.battle-booster-card.is-active{
    border-color:rgba(255,255,255,0.18);
}

.battle-booster-card.booster-exp{
    background:linear-gradient(180deg, rgba(34,197,94,0.22) 0%, rgba(15,23,42,0.12) 100%);
    border-color:rgba(134,239,172,0.34);
}

.battle-booster-card.booster-gold{
    background:linear-gradient(180deg, rgba(245,158,11,0.24) 0%, rgba(15,23,42,0.12) 100%);
    border-color:rgba(253,224,71,0.34);
}

.battle-booster-card.is-idle{
    background:rgba(255,255,255,0.05);
    border-style:dashed;
}

.battle-booster-actions{
    position:relative;
    z-index:1;
    margin-top:14px;
    display:flex;
    justify-content:flex-start;
}

.battle-booster-buy-btn{
    border:0;
    border-radius:12px;
    padding:11px 14px;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%);
    box-shadow:0 12px 20px rgba(37,99,235,0.22);
    transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.battle-booster-buy-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 24px rgba(37,99,235,0.28);
}

.battle-booster-buy-btn.gold{
    background:linear-gradient(180deg,#f59e0b 0%,#ea580c 100%);
    box-shadow:0 12px 20px rgba(245,158,11,0.24);
}

.battle-booster-buy-btn.gold:hover{
    box-shadow:0 16px 24px rgba(245,158,11,0.30);
}

.battle-booster-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:10px;
    position:relative;
    z-index:1;
}

.battle-booster-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:78px;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.12);
    color:#ffffff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.battle-booster-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.14);
}

.battle-booster-card h5{
    margin:0 0 8px;
    position:relative;
    z-index:1;
    font-size:18px;
    font-weight:900;
    color:#ffffff;
}

.battle-booster-card p{
    margin:0;
    position:relative;
    z-index:1;
    color:#e2e8f0;
    font-size:13px;
    line-height:1.55;
    font-weight:600;
}

.battle-booster-meta{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    position:relative;
    z-index:1;
}

.battle-booster-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.13);
    color:#f8fafc;
    font-size:11px;
    font-weight:800;
}

.battle-booster-chip.strong{
    background:rgba(15,23,42,0.28);
    border:1px solid rgba(255,255,255,0.10);
}

@media (max-width:900px){
    .battle-boosters-list{
        grid-template-columns:1fr;
    }
}

@media (max-width:560px){
    .battle-boosters-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .battle-boosters-manage-link{
        width:100%;
    }
}