/* ================================================================
   1. VARIABLES, FUENTES Y RESET GLOBAL
================================================================
*/
@font-face {
    font-family: 'OCR A Extended';
    src: url('assets/fonts/OCR-A-Extended.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Fuente principal con fallback */
    --font-pixel: 'OCR A Extended', 'OCR Extended', monospace;
    
    /* Paleta de Colores */
    --color-bg: #0f1220;
    --color-card: #141a2a;
    --color-card-light: #1e293b;
    --color-accent: #2563eb;
    --color-text: #e5e7eb;
    --color-text-muted: #94a3b8;
    --color-nature-up: #f87171;
    --color-nature-down: #60a5fa;
    
    /* Tamaños Base Escalados */
    --base-font-size: 14px;
    --title-font-size: 20px;
    --badge-font-size: 12px;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    min-width: 1300px;
    overflow-x: auto;   /* Permite el scroll */
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-family: var(--font-pixel), sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--base-font-size);
    /* Optimización de renderizado para fuentes pixeladas/técnicas */
    image-rendering: pixelated;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Transformaciones de texto comunes */
.route-name-badge, .evo-option-name, .pokemon-finder, .nick-input, .p-name, .e-name {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#game-view, #box-view, #grave-view, #stats-view {
    padding-top: 100px; /* 80px del header + 20px de aire */
}

#tooltip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    max-width: 250px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    line-height: 1.4;
}

.tooltip-hidden {
    display: none;
}

.tooltip-visible {
    display: block;
}

#tooltip.tooltip-type-only {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.stat-boost-asterisk {
    position: absolute;
    top: -2px;
    right: -8px;
    color: #ffffff;
    font-size: 12px;
    user-select: none;
}

/* ================================================================
   2. NAVIGATION ZONE
================================================================ */
.main-interface {
    background: #141a2a;
    padding-top: 10px;
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #141a2a;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.menu-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1001;
    padding: 10px;
}

.menu-toggle-btn .bar {
    width: 30px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: 0.3s;
}

/* --- Brand Section --- */
.brand-section {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
}

.mega-logo {
    height: 100px;
    transition: transform 0.3s ease;
}

/* --- Control Panel --- */
.control-panel {
    background: #111827;
    border-top: 2px solid #1f2937;
    border-bottom: 2px solid #1f2937;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.control-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 98%;
    max-width: 1300px;
    margin: 0 auto;
}

/* Botón Hamburguesa */
.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    z-index: 100;
}
.hamburger-btn .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
}

/* Menú Lateral */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    background: #141a2a;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

.side-menu.open {
    transform: translateX(0); /* Mostrar */
}

/* Overlay / Fondo */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none; /* Escondido por defecto */
}

.menu-overlay.active {
    display: block;
}

/* Items del menú */
.menu-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    text-align: left; 
    transition: 0.2s;
}

.menu-item img {
    width: 48px;
    height: 32px; 
    margin-right: 20px;
    flex-shrink: 0;
    image-rendering: pixelated;
    object-fit: contain;
    min-width: 32px; 
}

.menu-logo {
    width: 146px;
    height: auto;
    display: block;
}

.menu-item:hover {
    background: rgba(255,255,255,0.05);
    color: white;
}

.menu-header {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.close-menu {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* FILTERS */
.header-main-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.header-left {
    display: flex;
    justify-content: flex-start;
}

.header-center {
    display: flex;
    justify-content: center;
}

.header-right {
    display: flex;
    justify-content: flex-end;
}

.filter-pills {
    display: flex;
    background: #0f1220;
    border-radius: 8px;
    padding: 2px;
    margin-left: 10px;
}

.f-pill {
    background: transparent;
    border: none;
    color: #777;
    padding: 7px 10px;
    font-family: var(--font-pixel);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 18px;
    transition: all 0.2s;
    text-transform: uppercase;
}

.f-pill.active {
    background: #1e293b;
    color: #fff;
}


.jump-highlight {
    position: relative;
    z-index: 1;
    overflow: hidden !important; 
}

.jump-highlight::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 100px;
    right: 0;
    height: 80%;
    border-radius: 12px;
    background: linear-gradient(to bottom, #64e73c7c, transparent);
    pointer-events: none;
    animation: flash-overlay 2s ease-out forwards;
}

@keyframes flash-overlay {
    0% { opacity: 0; transform: scale(0.98); }
    20% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}

.status-indicators {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}

.stat-pill-large {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0f1220;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}

.stat-pill-large img {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
}

.stat-pill-large .label {
    color: #777;
    margin-right: 2px;
}

.stat-pill-large .value {
    color: #fff;
}

/* Efecto opcional: Diferenciar colores por importancia */
.stat-pill-large:nth-child(1) .value { color: #ef4444; } /* Rojo para vidas */
.stat-pill-large:nth-child(2) .value { color: #4ade80; } /* Verde para capturas */
.stat-pill-large:nth-child(3) .value { color: #9ca3af; } /* Gris para bajas */

/* ================================================================
   2. DASHBOARD
================================================================ */
.section-title {
    color: var(--text-main) !important;
    text-shadow: 2px 2px 0px var(--color-primary); /* Sombra "Pixel" roja */
    font-size: 20px; /* Un poco más grande */
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
}

.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 15px;
    background: linear-gradient(to right, #ffffff, transparent);
    display: block !important;
}

.stats-dashboard {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr;
    grid-template-rows: auto auto;
    gap: 25px;
    padding: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.stat-block {
    background: #141a2a;
    border: 1px solid #333;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* HALL OF FAME */
.stat-block.hall-fame-block {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--color-card);
    border: 2px solid #282828;
    border-radius: 8px;
}

.hof-podium-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    width: 100%;
    min-height: 300px;
    padding: 20px;
    background: #141a2a;
    border-radius: 10px;
    gap: 15px;
}

.hof-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 32%;
}

.hof-name {
    color: var(--color-text);
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 25px;
    padding-top: 10px;
}

.hof-sprite-box {
    width: 96px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    z-index: 2;
}

.hof-slot img {
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
}

.hof-rank-tag {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1a1a1a;
    color: var(--color-text-muted);
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}

.pos-1 .hof-rank-tag { 
    height: 85px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    background: linear-gradient(180deg, #1e293b 0%, #1e293b 100%);
    color: #ffffff;
}

.pos-2 .hof-rank-tag { 
    height: 45px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    background: linear-gradient(180deg, #1e293b 0%, #1e293b 100%);
    color: #ffffff;
}

.pos-3 .hof-rank-tag { 
    height: 25px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    background: linear-gradient(180deg, #1e293b 0%, #1e293b 100%);
    color: #ffffff;
}

.pos-2 .hof-sprite-box {
    transform: translateY(1px);
}

.stat-block, .stat-block.hall-fame-block {
    background-size: 100% 100%, 20px 20px, 20px 20px;
    background-color: #1e293b; /* Un negro ligeramente más profundo */
}

/* TEAM BAR */
.team-bar-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

#team-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 10;
    top: 50%;
    transform: translate(-50%, -50%);
}

.team-slot {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px;
    image-rendering: pixelated;
}

.team-slot.empty {
    background-image: url('assets/icons/pokeball_bg.png');
    opacity: 0.5;
}

.team-slot.occupied {
    background-image: none;
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #ffd700; /* Un pequeño borde dorado para resaltar al Pokémon */
    opacity: 1;
}

.team-slot img {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
}

/* GYM BADGES */
.badge-grid-case {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #141a2a;
    border-radius: 10px;
    align-items: stretch; 
}

.badge-slot {
    width: 96px;
    height: 96px;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.badge-slot::before {
    content: "";
    position: absolute;
    width: 100px; 
    height: 100px;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-mask-image: var(--badge-url);
    mask-image: var(--badge-url);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    z-index: 1;
}

.badge-slot img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
    position: relative;
    z-index: 3;
    filter: brightness(0) opacity(0.1);
    transform: scale(1);
    transition: all 0.3s ease;
}

.badge-slot.active img {
    filter: brightness(1) opacity(1);
    animation: none;
}

.badge-slot.active::after {
    content: "";
    position: absolute;
    width: 64px;
    height: 64px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.185) 0%, rgba(255, 223, 0, 0.1) 50%, transparent 75%);
    border-radius: 50%;
    filter: blur(8px);
    z-index: 0;
}

.animate-get {
    animation: medal-get 0.5s ease-out !important;
}

@keyframes medal-get {
    0% { transform: scale(2) rotate(20deg); filter: brightness(3); }
    100% { transform: scale(1.1) rotate(0deg); filter: brightness(1); }
}

#stats-badge-grid {
    display: flex;
    align-items: center; 
    justify-content: space-around;
    padding: 10px 25px;
    height: 304px;
}

.badges-sub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 40px;
    flex: 0 0 60%;
}

/* PLAYER CARD */
.player-card {
    background: #141a2a;
    border-radius: 10px;
    padding: 20px;
}

.player-card-layout {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

/* 3. Columna Izquierda (Datos) */
.player-stats-side {
    flex: 0 0 62%;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.stat-entry {
    background: #1e293b;
    border-radius: 10px;
    padding: 12px 10px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.stat-entry span {
    color: #ffffff;
    font-weight: bold;
}

.player-visual-side {
    flex: 1;
}

.player-frame-main {
    height: 100%;
    max-height: 180px;
    background: #1e293b;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    box-sizing: border-box;
}

/* 5. Contenedor del Sprite */
.sprite-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 100%;
    min-height: 120px;
}

.sprite-container img {
    height: 80px; 
    width: auto;
    image-rendering: pixelated;
    display: block; /* Elimina espacios extra debajo de la imagen */
}

/* LEADERS */
.player-card-footer {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-top: 15px;
    border-radius: 6px;
}

.leader-slot-mini {
    width: 64px;
    height: 64px;
    border: 1px solid #333;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.leader-slot-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    transition: all 0.3s ease;
}

.leader-slot-mini.locked img {
    filter: grayscale(100%) brightness(0); /* Lo convierte en una silueta negra */
    opacity: 0.5;
}

.leader-slot-mini.active {
    border-color: #ffffff;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
}

.leader-slot-mini.active img {
    filter: grayscale(0%) brightness(100%);
    opacity: 1;
}

/* ADVENTURE LOG */
.log-container {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.log-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 4px;
}

.log-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.log-type {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.log-time {
    font-size: 10px;
    color: #666;
}

.log-text {
    font-size: 12px;
    color: #eee;
}

.log-empty {
    text-align: center;
    color: #666;
    font-size: 12px;
    margin-top: 20px;
}

/* ================================================================
   3. ROUTES /GAME/
================================================================ */
.route-container-compact {
    display: flex;
    align-items: center;
    height: 80px;
    background: #141a2a;
    border-radius: 12px;
    margin: 15px auto;
    width: 100%;
    overflow: visible !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.route-row-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    width: 100%;
    position: relative;
}

.route-row-wrapper:has(.context-menu.active) {
    z-index: 999 !important;
}

.route-label-fixed {
    width: 100px;
    min-width: 100px;
    font-size: 16px;
    font-weight: bold;
    color: #f3f4f6;
    text-align: center;
    padding-right: 15px;
    text-transform: uppercase;
}

.route-actions {
    display: flex;
    gap: 8px;
}

/* Background */
.route-bg-left {
    flex: 0 0 350px;
    height: 100%;
    background: #141a2a;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    position: relative;
}


/* Route Name */
.route-name-badge {
    color: white;
    font-size: 13px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
    z-index: 2;
}

/* Right Buttons */
.route-controls-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding: 0 15px;
}

/* Finders */
.finder-group {
    display: flex;
    align-items: center;
    width: 180px;
    height: 40px;
    background: #1e293b;
    border: none;
    border-radius: 5px;
    overflow: hidden;
}

.pokemon-finder {
    color: #ffffff;
    width: 100%;
    height: 100%;
    font-size: 13px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 10px;
    font-family: var(--font-pixel);
}

.nick-input {
    color: #ffffff;
    width: 180px;
    height: 40px;
    font-size: 13px;
    border: none;
    border-radius: 5px;
    padding: 0 10px;
    font-family: var(--font-pixel);
    background: #1e293b;
}

.nature-group {
    display: flex;
    align-items: center;
    width: 180px;
    height: 40px;
    background: #1e293b;
    border: none;
    border-radius: 5px;
    overflow: hidden;
}

.nature-finder {
    color: #ffffff;
    width: 180px;
    height: 40px;
    font-size: 13px;
    border: none;
    border-radius: 5px;
    padding: 0 10px;
    font-family: var(--font-pixel);
    background: #1e293b;
}

.btn-icon {
    width: 40px;
    height: 40px;
    border: none;
    background: #1e293b;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    padding: 0;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.151);
    color: white;
}

.btn-icon img {
    width: 32px; 
    height: 32px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: translateZ(0);
}

.mini-sprite-preview {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    object-fit: contain;
    margin: 0 5px;
}

.btn-icon img {
    transition: transform 0.1s ease;
}

.btn-icon:active img {
    transform: scale(0.9);
}

/* EXTRA CAPTURE */
.menu-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.menu-trigger {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* KEBAB */
.kebab-dots {
    width: 4px;
    height: 4px;
    background-color: #cbd5e1;
    border-radius: 50%;
    position: relative;
}

.kebab-dots::before, .kebab-dots::after {
    content: "";
    width: 4px;
    height: 4px;
    background-color: #cbd5e1;
    border-radius: 50%;
    position: absolute;
    left: 0;
}

.kebab-dots::before { top: -6px; }
.kebab-dots::after { bottom: -6px; }

/* MENÚ DESPLEGABLE */
.context-menu {
    display: none;
    position: absolute;
    right: 10px; /* Separación del borde derecho */
    top: 35px;   /* Ajustado para que aparezca bajo los 3 puntos */
    background: #1a202c;
    border-radius: 8px;
    z-index: 10000; 
    width: 190px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.8);
    overflow: hidden; 
}

.context-menu.active {
    display: block;
}

.menu-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 13px;
    color: #e2e8f0;
    text-align: left;
    transition: background 0.2s;
}

.menu-item:hover { background: #334155; }
.menu-item.delete { color: #ff5f5f; border-top: 1px solid #334155; }

/* BADGE DE TIPO DE RUTA */
.route-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    opacity: 0.9;
    z-index: 5;
}

/* CAP DIVIDER */
.level-cap-divider {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 30px 0 30px 0;
    padding-left: 102px;
}

.cap-text {
    font-family: var(--font-pixel);
    font-size: 20px;
    color: #ffffffe1;
    letter-spacing: 1px;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 10px;
}

.cap-line {
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg, #ffffffe1, transparent);
    border-radius: 2px;
}

/* ================================================================
   4. BOX ZONE
================================================================ */
.pc-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
    gap: 30px;
    padding: 20px;
    justify-items: center;
}

.pc-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    padding: 0;
}

/* USER POKEMON CARDS */
.user-poke-card {
    position: relative;
    background: #141a2a;
    border-radius: 12px;
    padding: 12px;
    padding-bottom: 20px;
    min-height: 200px;
}

.user-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    width: 100%;
}

.user-name-text {
    position: absolute;
    font-size: 18px !important;
    font-weight: bold;
    color: #f8fafc;
    font-family: var(--font-pixel);
    letter-spacing: 0.5px;
    left: 4%;
    top: 18px;
}

.user-species-subtext {
    position: absolute;
    font-family: var(--font-pixel);
    font-size: 12px;
    color: #94a3b8;
    opacity: 0.7;
    display: block;
    left: 4.5%;
    top: 42px;
}

.user-sprite-img {
    width: 64px !important;
    height: 64px !important;
    image-rendering: pixelated;
    object-fit: contain !important;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
}

/* FRAMES */
.pc-slot[class*="rank-frame-"] {
    border-width: 2px;
    border-style: solid;
    transition: all 0.3s ease;
}

.rank-frame-bronze {
    border-radius: 6px;
    border: 2px solid var(--rank-color) !important;
    --rank-color: #cd7f32;
    box-shadow: inset 0 0 10px rgba(205, 127, 50, 0.2);
}

.rank-frame-silver {
    border-radius: 6px;
    border: 2px solid var(--rank-color) !important;
    --rank-color: #c0c0c0;
    box-shadow: inset 0 0 10px rgba(192, 192, 192, 0.2), 0 0 5px rgba(192, 192, 192, 0.3);
}

.rank-frame-silver::after {
    content: "";
    position: absolute;
    top: -6px; left: -6px; right: -6px; bottom: -6px;
    border: 2px solid var(--rank-color) !important;
    clip-path: polygon(20% 0%, 80% 0%, 100% 0%, 100% 25%, 90% 50%, 100% 75%, 100% 100%, 80% 100%, 20% 100%, 0% 100%, 0% 75%, 10% 50%, 0% 25%, 0% 0%);
    filter: drop-shadow(0 0 5px #c0c0c0);
    pointer-events: none;
}

.rank-frame-gold {
    border-radius: 6px;
    border: 2px solid var(--rank-color) !important;
    --rank-color: #ffd700;
    box-shadow: inset 0 0 15px rgba(255, 214, 0, 0.2), 0 0 8px rgba(255, 214, 0, 0.4);
}

.rank-frame-gold::after {
    content: "";
    position: absolute;
    top: -6px; left: -6px; right: -6px; bottom: -6px;
    border: 2px solid var(--rank-color) !important;
    clip-path: polygon(15% 0%, 20% 7.14%, 25% 0%, 75% 0%, 80% 7.14%, 85% 0%, 100% 0%, 100% 15%, 94.12% 20%, 100% 25%, 100% 50%, 100% 75%, 94.12% 80%, 100% 85%, 100% 100%, 85% 100%, 80% 94.77%, 75% 100%, 25% 100%, 20% 94.94%, 15% 100%, 0% 100%, 0% 85%, 5.88% 80%, 0% 75%, 0% 25%, 5.88% 20%, 0% 15%, 0% 0%);
    filter: drop-shadow(0 0 5px #ffd700);
    pointer-events: none;
}

.rank-frame-emerald {
    border-radius: 6px;
    border: 2px solid var(--rank-color) !important;
    --rank-color: #50c878;
    box-shadow: inset 0 0 15px rgba(80, 200, 120, 0.2), 0 0 12px rgba(80, 200, 120, 0.5);
}

.rank-frame-emerald::after {
    content: "";
    position: absolute;
    top: -6px; left: -6px; right: -6px; bottom: -6px;
    border: 2px solid var(--rank-color) !important;
    clip-path: polygon(15% 0%, 85% 0%, 100% 0%, 100% 15%, 94.12% 20%, 100% 25%, 100% 45%, 95% 50%, 100% 55%, 100% 75%, 94.12% 80%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0% 100%, 0% 85%, 5.88% 80%, 0% 75%, 0% 55%, 5.88% 50%, 0% 45%, 0% 25%, 5.88% 20%, 0% 15%, 0% 0%);
    filter: drop-shadow(0 0 5px #50c878);
    pointer-events: none;
}

.rank-frame-emerald::before {
    content: "";
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border: 2px solid var(--rank-color) !important;
    pointer-events: none;
    clip-path: polygon(0% 0%, 5% 0%, 28.63% 13.64%, 71.12% 13.81%, 95% 0%, 100% 0%, 100% 5%, 86.29% 31.05%, 85.76% 68.75%, 100% 95%, 100% 100%, 95% 100%, 71.12% 86.5%, 28.63% 86.5%, 5% 100%, 0% 100%, 0% 95%, 14.17% 68.75%, 14.58% 31.05%, 0% 5%, 0% 0.5%);
    filter: drop-shadow(0 0 5px #50c878);
    pointer-events: none;
}

@property --rank-color {
  syntax: '<color>';
  initial-value: #ffffff;
  inherits: true;
}

.rank-frame-master {
    border-radius: 6px;
    border: 2px solid var(--rank-color) !important;
    box-shadow: 0 0 15px var(--rank-color);
    animation: master-pulse 2.5s infinite alternate ease-in-out;
}

.rank-frame-master::after {
    content: "";
    position: absolute;
    top: -7px; left: -7px; right: -7px; bottom: -7px;
    border: 4px solid var(--rank-color) !important;
    pointer-events: none;
    clip-path: polygon(0% 0%, 25% 0%, 50% 0%, 75% 0%, 100% 0%, 100% 25%, 92% 32.5%, 100% 40%, 100% 60%, 92% 67.5%, 100% 75%, 100% 100%, 62.5% 100%, 25% 100%, 0% 100%, 0% 75%, 8% 67.5%, 0% 60%, 0% 40%, 8% 32.5%, 0% 25%, 0% 0.5%);
}

.rank-frame-master::before {
    content: "";
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border: 2px solid var(--rank-color) !important;
    pointer-events: none;
    clip-path: polygon(0% 0%, 14.58% 0%, 50% 12.5%, 85% 0%, 100% 0%, 100% 17.09%, 86.29% 31.05%, 100% 45%, 100% 55%, 85.76% 68.75%, 100% 82.5%, 100% 100%, 86.29% 100%, 50% 87.5%, 14.58% 100%, 0% 100%, 0% 82.5%, 14.58% 68.75%, 0% 55%, 0% 45%, 14.58% 31.05%, 0% 17.09%, 0% 0.5%);
}

@keyframes master-pulse {
    from { 
        --rank-color: #9b59b6;
        box-shadow: 0 0 10px rgba(155, 89, 182, 0.4); 
    }
    to { 
        --rank-color: #9b59b6;
        box-shadow: 0 0 25px rgba(155, 89, 182, 0.8); 
    }
}

/* SHINY STAR BUTTON */
.user-shiny-icon-btn {
    filter: grayscale(100%) opacity(0.4);
    transition: all 0.3s ease;
}

.user-shiny-icon-btn.active {
    filter: grayscale(0%) opacity(1) drop-shadow(0 0 5px #facc15);
    transform: scale(1);
}

.user-shiny-icon-btn:hover {
    filter: grayscale(50%) opacity(0.8);
}

/* CARD BUTTONS */
.user-card-actions-float {
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.user-mega-action-btn, 
.user-evolve-action-btn,
.user-form-action-btn,
.user-team-action-btn {
    width: 60px; 
    height: 32px;
    object-fit: contain; 
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #141a2a; 
    border-radius: 8px;
}

.user-mega-action-btn:hover, 
.user-evolve-action-btn:hover,
.user-form-action-btn:hover,
.user-team-action-btn:hover {
    transform: translateY(-1px) scale(1);
    background: #1c253a;
    box-shadow: 0 2px rgba(0, 0, 0, 0.5);
}

/* TYPES CONTAINER */
.user-types-container {
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 6px;
    border-radius: 8px 8px 0 0;
    display: flex;
    gap: 4px;
    left: 3%;
    top: 50px;
}

.user-type-icon {
    width: 40px;
    height: 20px;
    image-rendering: pixelated;
}

/* STATS & MOVES ROW */
.user-stats-moves-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    min-height: 180px;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 0 12px 12px 12px;
    margin-top: 8px;
}

.user-stats-summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px; 
    margin-bottom: 8px;
    padding-left: 2px;
}

.user-summary-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin-bottom: 8px;
}

.user-nature-label {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: #94a3b8;
    text-transform: uppercase;
}

.user-bst-label {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: #facc15;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.3);
}

/* INDIVIDUAL STATS */
.user-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: bold;
    height: 20px;
    margin-bottom: 2px;
    font-family: var(--font-pixel);
}

.user-stat-label {
    width: 35px;
    color: #94a3b8;
}

.user-bar-bg {
    flex: 1;
    height: 12px;
    background: #1e293b;
    border-radius: 5px;
    overflow: hidden;
}

.user-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.user-stat-val {
    width: 30px;
    text-align: right;
    font-size: 15px;
    color: #fff;
}

/* NATURE COLORS */
.user-stat-val.up { color: #f87171 !important; text-shadow: 0 0 8px rgba(248, 113, 113, 0.3); }
.user-stat-val.down { color: #60a5fa !important; text-shadow: 0 0 8px rgba(96, 165, 250, 0.3); }

/* MOVES COLUMN */
.user-moves-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-move-row {
    height: 38px;
    padding: 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    background: #1e293b;
    font-family: var(--font-pixel) !important;
}

.user-move-row.is-empty {
    opacity: 0.3;
    border-left-color: transparent;
    background: rgba(0, 0, 0, 0.1);
}

.user-move-name {
    flex: 1;
    font-size: 14px;
    color: #ffffff;
}

.user-move-row.clickable-move {
    border-left: 4px solid #333; /* Borde base oscuro */
    background: #141a2a;
    margin-bottom: 3px;
    padding-left: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.user-move-row.clickable-move:hover {
    background: #141a2a4f;
}

.move-left-side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    overflow: hidden;
}

.move-cat-icon-mini {
    width: 18px;
    height: 13px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.user-move-pwr {
    color: #cecece;
    font-size: 14px;
}

/* MOVES */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.9); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(6px);
}

.modal-content {
    background: #141a2a7a;
    width: 95%;
    max-width: 500px;
    max-height: 95vh;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.move-table-header {
    background: rgba(0, 0, 0, 0.3);
}

.moves-list-scroll {
    overflow-y: auto;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 5px;
}

.moves-list-scroll::-webkit-scrollbar { width: 6px; }
.moves-list-scroll::-webkit-scrollbar-track { background: transparent; }
.moves-list-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

.move-card-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: #1e293b7a;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    border: none;
}

.move-card-entry:hover {
    background: #2d3748;
}

/* Fila 1: Nivel y Nombre */
.move-row-1 {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.col-lvl {
    grid-column: 1 / 2;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding: 6px 2px;
    width: 100%;
    justify-self: center;
}

.col-name {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

/* Fila 2: Atributos (4 columnas iguales) */
.move-row-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 6px 2px;
    border-radius: 6px;
    text-align: center;
}

.col-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.attr-label-mini {
    font-size: 0.55rem;
    color: #64b5f6;
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Iconos dentro de la tabla */
.mini-type {
    height: 20px;
    width: 40px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}

.mini-cat {
    height: 17x;
    width: 24px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}

/* Fila 3: Descripción */
.move-row-3 {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.3;
    padding: 6px 4px 2px 4px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-style: italic;
    text-align: center;
}

/* BOTÓN ELIMINAR MOVIMIENTO */
.delete-move-option {
    background: #2d1a1a;
    color: #ff4d4d;
    padding: 12px;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #4a2222;
    transition: 0.2s;
    margin-bottom: 10px;
}

.delete-move-option:hover {
    background: #4a2222;
    color: #ff8080;
}

/* BOTÓN CERRAR MODAL */
.close-btn {
    background: #334155;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

.close-btn:hover { background: #475569; }

.moves-list-scroll::-webkit-scrollbar { display: none; }
.moves-list-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* ABILITY SELECTOR */
.user-ability-container {
    position: absolute;
    padding: 8px 10px;
    left: 50%;
    transform: translateX(-50%);
    top: 58px;
    display: flex;
    width: fit-content;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px 8px 0 0;
}

.user-ability-container:hover {
    background: #1e293b;
}

.user-ability-value {
    text-transform: capitalize;
    font-size: 12px;
    color: #facc15;
    font-weight: bold;
}

/* Estilo para las opciones del modal */
.ability-option {
    padding: 12px;
    margin: 5px 0;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-transform: capitalize;
    font-weight: bold;
    transition: background 0.2s;
}

.ability-option:hover {
    background: rgba(0, 242, 255, 0.2);
    color: #00f2ff;
}

/* POKE LIFES */
.pokemon-hearts-vertical {
    position: absolute;
    top: -9px;           /* Los sube para que pisen el borde superior */
    left: 14px;           /* Los alinea a la izquierda de la card */
    display: flex; 
    flex-direction: row !important; 
    gap: 4px;
    z-index: 20;
}

.mini-heart-pc {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}

.heart-depleted {
    filter: grayscale(100%) opacity(0.4) drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}

/* POKEMON BADGES */
.user-achievements-float {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center; /* Esto mantendrá el RANGO al centro */
    z-index: 5;
    min-width: 340px; /* Un poco más de ancho para dar espacio */
}

.user-medals-container {
    position: absolute;
    right: 100%;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
    transition: transform 0.2s ease;
}

.user-rank-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; /* Un poco más grande para que destaque */
    height: 22px;
}

.user-rank-ico {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.user-rank-ico[src*="gold"],
.user-rank-ico[src*="emerald"],
.user-rank-ico[src*="master"] {
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
    animation: rank-glow 3s infinite alternate;
}

@keyframes rank-glow {
    from { filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4)); }
    to { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8)); }
}

/* ==============================================================
   5. MODALES Y EVOLUCIÓN
===============================================================*/
.evo-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s;
}

.evo-modal.hidden {
    display: none !important;
}

.evo-content {
    background: #141a2a60;
    padding: 40px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    text-align: center;
    color: white;
    font-family: var(--font-pixel);
}

/* Pokemon Grid */
.evo-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.evo-option-btn {
    background: #1e293b6e;
    border-radius: 12px;
    border: none;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-family: var(--font-pixel);
}

.evo-option-btn:hover {
    transform: translateY(-5px);
    background: #2e1065;
}

.evo-option-btn img {
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
    margin-bottom: 5px;
}

.evo-option-btn span {
    font-size: 14px;
    text-transform: uppercase;
}

.evo-cancel {
    background: #7f1d1d;
    border: none;
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-pixel);
    font-size: 11px;
    margin-top: 10px;
}

.evo-cancel:hover {
    background: #b91c1c;
}

/* ==============================================================
   6. ANIMATIONS
===============================================================*/
/* EVOLUTION EFFECTS */
.evo-flash {
    animation: white-glitch 0.6s ease-in-out;
}

@keyframes white-glitch {
    0% { filter: brightness(1) contrast(1); }
    50% { filter: brightness(10) contrast(0.1); transform: scale(1.1); }
    100% { filter: brightness(1) contrast(1); transform: scale(1); }
}

/* CAPTURED EFFECTS */
.captured-glow {
    border-color: #facc15 !important;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
}

/* BOUNCE & STARS */
.animate-catch-full {
    position: relative;
    animation: catch-bounce 0.6s ease;
}

/* SIDE STARS */
.animate-catch-full::before,
.animate-catch-full::after {
    content: '★';
    position: absolute;
    color: #facc15;
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
}

/* LEFT STAR */
.animate-catch-full::before {
    animation: star-fly-left 0.8s ease-out forwards;
}

/* RIGHT STAR */
.animate-catch-full::after {
    animation: star-fly-right 0.8s ease-out forwards;
}

/* MIDDLE START JS */
.star-mid-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #facc15;
    font-size: 14px;
    pointer-events: none;
    animation: star-fly-up 0.8s ease-out forwards;
}

/* STARS */
@keyframes star-fly-left {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(-30px, -30px) scale(1.3); opacity: 0; }
}

@keyframes star-fly-right {
    0% { transform: translate(0, 0) scale(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(30px, -30px) scale(1.3); opacity: 0; }
}

@keyframes star-fly-up {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(-50%, -60px) scale(1.3); opacity: 0; }
}

.team-btn img {
    transition: transform 0.1s ease-in-out;
}

.team-btn:active img {
    transform: scale(0.8); /* Efecto de pulsación */
}

/* POKEBALL BOUNCE */
@keyframes catch-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.2) rotate(-15deg); }
    50% { transform: scale(0.9) rotate(15deg); }
    100% { transform: scale(1) rotate(0); }
}

/* FAINTED POKEMON EFFECTS */
.route-container-compact.is-pokemon-dead {
    filter: grayscale(100%) opacity(0.8);
    transition: all 0.5s ease;
    border-color: #7f1d1d;
}

/* Kill red button */
.kill-btn.is-dead {
    border-color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
    background: rgba(127, 29, 29, 0.3) !important;
}

.kill-btn.is-dead img {
    filter: drop-shadow(0 0 5px red);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.route-row-wrapper.is-pokemon-dead {
    filter: grayscale(100%);
    opacity: 0.6;
    pointer-events: none;
}

/* Resurect */
.route-row-wrapper.is-pokemon-dead .kill-btn {
    pointer-events: auto;
}

/* ================================
   7. FILTERS
================================ */
.box-filters {
    padding: 0 20px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}

.type-filters {
    display: flex;
    flex-wrap: wrap; 
    gap: 8px;
    justify-content: center;
    max-width: 1000px;
}

.type-filter-icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
    filter: grayscale(100%);
}

.type-filter-icon.active {
    opacity: 1;
    filter: grayscale(0%) opacity(1) drop-shadow(0 0 2px #ffffff71);
    transform: scale(1);
}

/* ==========================================
   ANALYSIS
   ========================================== */
.analysis-controls {
    display: flex;
    gap: 10px;
}

.btn-analysis {
    background: #1e293b;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 12px;
    font-family: var(--font-pixel);
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    border: 1px solid rgba(0, 242, 255, 0);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.63);
}

.btn-analysis:hover {
    transform: translateY(-1px);
}

.filter-divider {
    width: 1px;
    height: 40px;
    background: #6b6b6b;
    margin: 0 10px;
}

/* --- ESTILO COMÚN --- */
.analysis-card.wide-mode .analysis-footer {
    display: none;
    max-width: 950px; 
    width: 95%;
    overflow-x: auto; /* Por si la pantalla es muy pequeña */
}

.analysis-matrix-container {
    width: 100%;
    margin-top: 10px;
    overflow-x: auto;
}

.marriland-table {
    width: 100%;
    table-layout: fixed;
    border: none;
    border-spacing: 2px;
    font-family: var(--font-pixel);
}

.type-cell .type-pill {
    width: 90%;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    margin: 0 auto;
    display: block;
}

.matrix-mini-sprite {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    display: block;
    margin: 0 auto;
}

.mult-cell {
    width: 40px;
    height: 30px;
    text-align: center;
    background: rgba(255,255,255,0.03);
    font-size: 12px;
    border-radius: 2px;
}

/* Colores de multiplicadores */
.m-weak { color: #ff4466; font-weight: bold; background: rgba(255, 68, 102, 0.1); }
.m-resist { color: #44ff88; background: rgba(68, 255, 136, 0.1); }
.m-immune { 
    color: #00f2ff; 
    font-weight: bold;
    background: rgba(0, 242, 255, 0.15); 
}

/* Totales */
.total-cell {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    background: rgba(255,255,255,0.05);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.marriland-table th, 
.marriland-table td {
    height: 24px;
    padding: 2px;
    text-align: center;
    vertical-align: middle
}

.col-type { width: 50px; }
.col-poke { width: 45px; }
.col-total { width: 40px; }

/* ==========================================
   ANALYSIS BOX
   ========================================== */
.analysis-card {
    max-width: 700px;
    width: 95%;
    background: #0f122041;
    border-radius: 8px;
    padding: 10px;
    position: relative;
    box-shadow: 0 0 40px rgba(0,0,0,0.9);
}

.analysis-header h2 {
    font-size: 16px;
    letter-spacing: 3px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 4px;
    text-align: center;
    color: #fff;
}

.analysis-legend {
    display: flex;
    justify-content: space-between;
    padding: 0 120px;
    color: #555;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* FILAS DE TIPOS */
.analysis-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.analysis-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.analysis-col {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.analysis-col.left { justify-content: flex-end; }
.analysis-col.left .bar-bg { display: flex; justify-content: flex-end; }
.analysis-col.right { justify-content: flex-start; }
.analysis-col.right .bar-bg { display: flex; justify-content: flex-start; }

/* BARRAS DE PROGRESO */
.bar-bg {
    width: 200px;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

.bar-fill {
    height: 100%;
    transition: width 0.5s ease-out;
}

.weak-bar { background: linear-gradient(to left, #ff4466, transparent) }
.resist-bar { background: linear-gradient(to right, #44ff88, transparent); }

/* PÍLDORA CENTRAL DE TIPO */
.type-pill {
    width: 90px;
    height: 24px;
    line-height: 26px;
    text-align: center;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    letter-spacing: 1px;
    text-shadow: 1px 2px 4px rgb(0, 0, 0);
}

/* TEXTOS DE CONTEO */
.count-text {
    font-family: var(--font-pixel);
    font-size: 16px;
    min-width: 20px;
}

.advice-container {
    text-align: center;
    font-size: 13px;
    color: #aaa;
}

.type-pill.normal   { background: #aaaa99; }
.type-pill.fire     { background: #ff4422; }
.type-pill.water    { background: #3399ff; }
.type-pill.grass    { background: #77cc55; }
.type-pill.electric { background: #ffcc33; }
.type-pill.ice      { background: #66ccff; }
.type-pill.fighting { background: #bb5544; }
.type-pill.poison   { background: #aa5599; }
.type-pill.ground   { background: #ddbb55; }
.type-pill.flying   { background: #8899ff; }
.type-pill.psychic  { background: #ff5599; }
.type-pill.bug      { background: #aabb22; }
.type-pill.rock     { background: #bbaa66; }
.type-pill.ghost    { background: #6666bb; }
.type-pill.dragon   { background: #0874bf; }
.type-pill.dark     { background: #775544; }
.type-pill.steel    { background: #aaaabb; }
.type-pill.fairy    { background: #ee99ee; }

.modal-header button {
    display: none;
}

.cell-flipper-container {
    perspective: 1000px;
    padding: 0 !important;
    height: 30px;
}

.cell-flipper-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Estado girado */
.offense-mode .cell-flipper-inner {
    transform: rotateY(180deg);
}

.flipper-front, .flipper-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flipper-back {
    transform: rotateY(180deg);
}

/* ================================================================
   8. TARJETAS DEL RIVAL (ENTRENADORES)
================================================================ */
.trainer-layout-row {
    position: relative;
    align-items: flex-start !important;
    padding-bottom: 15px;
    padding-top: 15px;
}

.trainer-main-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.trainer-layout-row.is-defeated {
    filter: grayscale(100%) opacity(0.5);
}

.trainer-main-card {
    position: relative;
    width: 100%;
    height: 80px; 
    background: #141a2a;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    padding: 0 25px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Background NPC */
.trainer-vs-background {
    position: absolute;
    inset: 0;
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
    margin: 0 auto;
    transform: scale(2);
}

.battle-side {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    z-index: 2;
}

.battle-team-mini {
    display: flex;
    align-items: center;
    gap: 0; /* Ya que los sprites suelen tener aire */
    margin: 0 !important;
    padding: 0 !important;
}

.side-rival {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important; /* Ocupa la mitad izquierda */
    justify-content: flex-start !important;
    gap: 15px;
}

.side-rival .battle-team-mini {
    flex-direction: row-reverse;
    margin-left: auto !important; 
    display: flex;
    align-items: center;
}

.side-player {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important; /* Ocupa la mitad derecha */
    justify-content: flex-end !important;
    gap: 15px;
}

/* ESTO MUEVE TUS POKEMON AL CENTRO (Zona Azul) */
.side-player .battle-team-mini {
    margin-right: auto !important;
    display: flex;
    align-items: center;
}

.battle-mini-icon {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    transform: scaleX(-1) !important;
}

.player-icon {
    transform: scaleX(1) !important;
}

.battle-center-vs {
    flex: 0 0 80px; /* Ancho fijo para el centro para que no baile */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.trainer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 15px;
    flex-shrink: 0;
}

.npc-sprite-img {
    width: 96px;
    height: 96x;
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.5));
    object-fit: contain;
}

.npc-sprite-img.npc-double {
    margin-left: -40px;
}

.npc-vertical-align {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.trainer-info-titles {
    display: flex;
    flex-direction: column;
    width: auto;
}

.trainer-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trainer-name {
    font-family: var(--font-pixel);
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    width: auto;
}

.trainer-location {
    color: #94a3b8;
    font-size: 12px;
    text-transform: uppercase;
}

/* DOUBLES CARDS */
.trainer-team-grid.is-multi-mode {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre el equipo de arriba y el de abajo */
}

.team-row-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.owner-a-border .e-name { background: rgba(241, 0, 0, 0.3); border-radius: 6px; }
.owner-b-border .e-name { background: rgba(17, 0, 253, 0.3); border-radius: 6px; }
.ally-card-border .e-name { background: rgba(0, 253, 76, 0.3); border-radius: 6px; }

.ally-separator-row {
    display: flex;
    align-items: center;
    width: 100%;
    grid-column: 1 / -1;
    margin: 15px 0;
    color: #0da82f;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
}

.ally-separator-row hr {
    flex-grow: 1;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #4ade80, transparent);
}

.ally-mini-icon {
    transform: scaleX(1) !important;
}

/* Badges de Boss/Optional */
.badge-status-container {
    position: absolute;
    top: 4px;
    left: 124px;
    display: flex;
    gap: 8px;
    z-index: 10; /* Por encima de todo */
}

.badge-status {
    font-size: 10px;
    font-family: var(--font-pixel);
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.badge-status.optional { background: #3498db; text-shadow: 1px 2px 2px #000; }
.badge-status.rival { background: #14c05b; text-shadow: 1px 2px 2px #000; }
.badge-status.miniboss { background: #ccc232; text-shadow: 1px 2px 2px #000; }
.badge-status.boss { background: #e67e22; text-shadow: 1px 2px 2px #000; }
.badge-status.leader { background: #e74c3c; text-shadow: 1px 2px 2px #000; }
.badge-status.elitefour { background: #9b59b6; text-shadow: 1px 2px 2px #000; }
.badge-status.champion { background: #69188a; text-shadow: 1px 2px 2px #000; }
.badge-status.teamrocket { background: #202020; text-shadow: 1px 2px 2px #000; }

.badge-status.doubles { background: #e2265e; text-shadow: 1px 2px 2px #000; }
.badge-status.rematch { background: #797979; text-shadow: 1px 2px 2px #000; }
.tag-b2b { background: #2f3ad6; text-shadow: 1px 2px 2px #000; }

.badge-status.weather-rain { background: #2982efc2; text-shadow: 1px 2px 2px #000; }
.badge-status.weather-sun  { background: #e62829c2; text-shadow: 1px 2px 2px #000; }
.badge-status.weather-sandstorm { background: #915121c2; text-shadow: 1px 2px 2px #000; }
.badge-status.weather-snow { background: #3fd8ffc2; text-shadow: 1px 2px 2px #000; }
.badge-status.weather-electric-terrain  { background: #fac000c2; text-shadow: 1px 2px 2px #000; }
.badge-status.weather-grassy-terrain  { background: #3fa129c2; text-shadow: 1px 2px 2px #000; }

.trainer-mini-icon {
    width: 64px;
    height: 64px;
}

/* Botón Check de Derrota */
.btn-defeat-check {
    background: #1f2937;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.btn-defeat-check img {
    width: 32px;
    height: 32px;
}

.btn-defeat-check:hover {
    background: rgba(255, 255, 255, 0.151);
    color: white;
}

.btn-defeat-check.active img {
    filter: grayscale(0);
    opacity: 1;
}

.trainer-details-panel {
    display: none;
    padding: 10px;
    background: #1e293b;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

.trainer-details-panel.active {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

.trainer-team-grid {
    display: flex !important;
    flex-direction: row !important; /* Fuerza la fila */
    flex-wrap: wrap !important;     /* Permite que bajen si no caben */
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    grid-template-columns: none !important;
}

.expand-arrow-icon {
    font-size: 14px;
    color: #94a3b8;
    transition: transform 0.3s ease;
    display: inline-block;
}

.expand-arrow-icon.rotated {
    transform: rotate(180deg);
}

/* ENEMY CARDS */
.enemy-poke-card {
    position: relative;
    width: 380px;
    min-width: 380px;
    height: 270px;
    perspective: 1000px;
    cursor: pointer;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; 
}

/* HEADER PRINCIPAL */
.enemy-card-header-centered {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.e-header-main-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.e-types-inline {
    display: flex;
    gap: 4px;
    align-items: center;
}

.enemy-sprite {
    position: absolute;
    top: -5px;
    right: 0;
    width: 64px !important;
    height: 64px !important;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.4));
}

.e-header-tabs {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    align-items: flex-end;
}

.e-ability-badge-tab {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: none;
    color: #facc15;
    padding: 7px 8px;
    border-radius: 8px 8px 0 0;
    font-size: 12px !important;
    font-family: var(--font-pixel);
    text-transform: capitalize;
    text-shadow: 0 0 4px rgba(250, 204, 21, 0.2);
}

.mega-ability-badge {
    color: #00ccff !important;
}

.e-item-wrapper {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: none;
    width: 32px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px 8px 0 0;
    z-index: 1;
}

.e-item-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.e-lvl {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 2px;
    padding: 0 9px;
}

.e-name {
    font-size: 20px;
    font-weight: bold;
    color: #f8fafc;
    font-family: var(--font-pixel);
    letter-spacing: 0.5px;
    padding: 0 7px;
}

.e-types-tab {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: none;
    padding: 2px 6px;
    border-radius: 8px 8px 0 0;
    display: flex;
    gap: 4px;
    align-items: center;
    height: 26px;
}

/* STATS & MOVES */
.e-stats-summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; 
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.e-stats-title {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.e-nature-row {
    font-family: var(--font-pixel);
    font-size: 13px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.e-bst-row {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: #facc15;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.3);
}

.enemy-stats-moves-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
    align-items: start; 
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 0 12px 12px 12px;
    margin-top: 0;
}

.e-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: bold;
    height: 20px;
    margin-bottom: 1px;
    font-family: var(--font-pixel);
}

.e-label {
    width: 35px;
    color: #94a3b8;
}

.e-bar-bg {
    flex: 1;
    height: 12px;
    background: #1e293b;
    border-radius: 5px;
    overflow: hidden;
}

.e-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease, background-color 0.4s ease;
    background-color: currentColor;
}

.e-val {
    position: relative;
    width: 30px;
    text-align: right;
    font-size: 15px;
}

/* Colores de Naturaleza  */
.e-val.up, .stat-num.up { 
    color: #f87171 !important; 
    font-weight: bold; 
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.3); 
}

.e-val.down, .stat-num.down { 
    color: #60a5fa !important; 
    font-weight: bold; 
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.3); 
}

/* MOVES */
.enemy-moves-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
}

.e-move-row-new {
    height: 34px;
    padding: 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    background: #141a2a;
    border-left: 7px solid #475569;
    font-family: var(--font-pixel) !important;
}

/* EMPTY MOVES */
.e-move-row-new.is-empty {
    opacity: 0.3;
    border-left-color: transparent;
    background: rgba(0, 0, 0, 0.1);
}

.move-option-btn.normal,.user-move-row.normal, .e-move-row-new.normal { border-left-color: #9fa19f !important; }
.move-option-btn.fire, .user-move-row.fire, .e-move-row-new.fire { border-left-color: #e62829 !important; }
.move-option-btn.water, .user-move-row.water, .e-move-row-new.water { border-left-color: #2982ef !important; }
.move-option-btn.grass, .user-move-row.grass, .e-move-row-new.grass { border-left-color: #3fa129 !important; }
.move-option-btn.electric, .user-move-row.electric, .e-move-row-new.electric { border-left-color: #fac000 !important; }
.move-option-btn.ice, .user-move-row.ice, .e-move-row-new.ice { border-left-color: #3fd8ff !important; }
.move-option-btn.fighting, .user-move-row.fighting, .e-move-row-new.fighting { border-left-color: #ff8000 !important; }
.move-option-btn.poison, .user-move-row.poison, .e-move-row-new.poison { border-left-color: #9141cb !important; }
.move-option-btn.ground, .user-move-row.ground, .e-move-row-new.ground { border-left-color: #915121 !important; }
.move-option-btn.flying, .user-move-row.flying, .e-move-row-new.flying { border-left-color: #81b9ef !important; }
.move-option-btn.psychic, .user-move-row.psychic, .e-move-row-new.psychic { border-left-color: #ef4179 !important; }
.move-option-btn.bug, .user-move-row.bug, .e-move-row-new.bug { border-left-color: #91a119 !important; }
.move-option-btn.rock, .user-move-row.rock, .e-move-row-new.rock { border-left-color: #afa981 !important; }
.move-option-btn.ghost, .user-move-row.ghost, .e-move-row-new.ghost { border-left-color: #704170 !important; }
.move-option-btn.dragon, .user-move-row.dragon, .e-move-row-new.dragon { border-left-color: #5060e1 !important; }
.move-option-btn.dark, .user-move-row.dark, .e-move-row-new.dark { border-left-color: #50413f !important; }
.move-option-btn.steel, .user-move-row.steel, .e-move-row-new.steel { border-left-color: #60a1b8 !important; }
.move-option-btn.fairy, .user-move-row.fairy, .e-move-row-new.fairy { border-left-color: #ef70ef !important; }

.m-name {
    flex: 1;
    font-size: 14px;
    color: #ffffff;
}

.m-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.m-category-icon {
    width: 18x;
    height: 13px;
    object-fit: contain;
    image-rendering: pixelated;
}

.m-pwr {
    color: #cecece;
    font-size: 14px !important;
    min-width: 30px;
    text-align: right;
}

.is-boosted-pwr {
    color: #58f582 !important;
    font-weight: bold;
}

.tooltip-multiplier {
    color: #ffd700; /* Dorado */
    font-weight: bold;
    font-size: 0.9em;
}

/* El número final entre paréntesis (daño máximo potencial) */
.tooltip-conditional-total {
    color: #2ecc71; /* Verde esmeralda brillante */
    font-weight: bold;
    margin-left: 5px;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.3);
}

/* Separador horizontal dentro del tooltip para que se vea ordenado */
.tooltip-move-boost hr {
    border: 0;
    border-top: 1px solid #444;
    margin: 8px 0;
}

/* El "esqueleto" que gira */
.enemy-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Clase que se activa con el click en JS */
.enemy-poke-card.flipped .enemy-card-inner {
    transform: rotateY(180deg);
}

/* Posicionamiento de las dos caras */
.enemy-card-front, .enemy-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #141a2a;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    overflow: hidden; 
}

/* La cara trasera empieza girada 180 grados */
.enemy-card-back {
    transform: rotateY(180deg);
    border-radius: 12px;
    align-items: center;
    justify-content: space-between;
}


/* BACK CARD TOP */
.enemy-card-header-back {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    height: 60px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.e-types-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-height: 100%;
}

.weak-badge {
    display: flex;
    align-items: center;
    padding: 2px 6px;
    gap: 4px;
}

.weak-icon { width: 40px; height:20px; }
.weak-mult { font-size: 12px; font-weight: bold; color: #ffffff; }

/* BACK CARD / BOTTOM */
.enemy-stats-moves-row-back {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
    align-items: start; 
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 12px;
    margin-top: 4px;
}

.enemy-training-col-new {
    display: flex;
    flex-direction: column;
}

.e-bst-row-back {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: #facc15;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.3);
}

.e-iv-row-back {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: #15c4fa;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(21, 204, 250, 0.3);
    text-align: center;
    width: 50%;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.e-ev-row-back {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: #15fa20;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(21, 250, 21, 0.3);
    text-align: center;
    width: 50%;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.training-table-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.training-row-sync {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 20px;
}

.t-val-iv {
    font-family: var(--font-pixel);
    font-size: 15px;
    color: #15c4fa;
    width: 30px;
    text-align: center;
}

.t-val-ev {
    font-family: var(--font-pixel);
    font-size: 15px;
    color: #94a3b8;
    width: 30px;
    text-align: center;
}

.t-val-ev.has-evs {
    color: #15fa20;
    text-shadow: 0 0 5px rgba(250, 204, 21, 0.4);
}

.enemy-card-back .enemy-stats-moves-row {
    grid-template-columns: 1fr 1fr;
    padding: 12px;
}

/* STARTER SELECTOR */
.rival-starter-selector {
    position: absolute;
    top: 0; /* Ajusta esto según el grosor de tu borde */
    left: 124px;
    display: flex;
    gap: 8px;
    z-index: 110; /* Por encima de todo */
}

.st-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    filter: grayscale(1) opacity(0.4);
}

.st-grass { background-color: #4db35a; background-image: url('assets/icons/types/24/grass.png'); }
.st-fire  { background-color: #ef5350; background-image: url('assets/icons/types/24/fire.png'); }
.st-water { background-color: #42a5f5; background-image: url('assets/icons/types/24/water.png'); }

.st-btn:hover {
    filter: grayscale(0.5) opacity(0.8);
}

.st-btn.active {
    filter: grayscale(0) opacity(1);
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

/* ================================================================
   9. NEW GAME
================================================================ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.new-game-card {
    background: #0f1220;
    border: 2px solid #333;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 0 50px rgba(0,0,0,0.9);
    position: relative;
    overflow: hidden;
}

/* Título Impactante */
.new-game-title {
    font-size: 24px;
    color: #ffd700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    justify-content: center;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}

/* Input del Nombre */
.input-name-group {
    margin-bottom: 30px;
}
.name-input {
    background: #141a2a;
    border: 2px solid #333;
    color: #fff;
    font-size: 18px;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    width: 80%;
    text-transform: uppercase;
    transition: 0.3s;
}
.name-input:focus {
    border-color: #ffffff;
    outline: none;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
}

/* Selector de Avatar Inicial */
.char-select-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    max-height: 300px;
    overflow-y: auto;
}

.char-option {
    background: #141a2a;
    border: 2px solid #333;
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
    width: 80px;
}

.char-option:hover { transform: translateY(-1px); border-color: #666; }
.char-option.selected { 
    border-color: #ffffff; 
    background: #1e293b;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

.char-option img { width: 100%; image-rendering: pixelated; }
.char-option span { display: block; font-size: 10px; color: #888; margin-top: 5px; font-weight: bold; }

/* Botón Comenzar */
.btn-start-adventure {
    background: linear-gradient(90deg, #9333ea, #9333ea);
    color: white;
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-start-adventure:hover {
    background: linear-gradient(90deg, #9333ea, #9333ea);
    transform: scale(1.05);
}

.char-select-grid.dual-select {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.char-select-grid.dual-select .char-option {
    width: 120px;
    padding: 20px;
}

/* SETTINGS */
.modal-settings {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.settings-card {
    background: #1e293b7a;
    width: 90%;
    max-width: 450px;
    border-radius: 16px;
    overflow: hidden;
}

.settings-modal-header {
    background: #141a2a7a;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 { color: #fff; margin: 0; font-size: 1.1rem; }

.settings-section {
    padding: 20px;
}

.settings-section h4 {
    color: #64b5f6;
    font-size: 0.8rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: #ccc;
    font-size: 0.9rem;
}

.setting-item input, .setting-item select {
    background: #0f1116;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    outline: none;
}

/* Botones */
.btn-save-settings {
    width: 100%;
    padding: 12px;
    background: #388e3c;
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-save-settings:hover { background: #50ca57; color: white; }

.btn-reset-full {
    width: 100%;
    background: transparent;
    border: 1px solid #d32f2f;
    color: #f44336;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.btn-reset-full:hover { background: #d32f2f; color: white; }

.close-settings-x {
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.close-settings-x:hover {
    color: #ff4d4d; /* Se vuelve rojo al pasar el ratón */
}

/* ================================================================
   10. GRAVE
================================================================ */
.grave-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 50px;
    justify-items: center;
    padding: 30px;
}

.grave-card-v2 {
    width: 240px;
    transition: filter 0.3s;
}

.tombstone-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.tombstone-main-img {
    height: auto;
    width: 100%;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}

/* Contenedor del contenido sobre la imagen */
.tombstone-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
    pointer-events: none;
}

.tombstone-ghost-sprite {
    width: 64px;
    filter: brightness(0) opacity(0.7);
    margin-bottom: 5px;
}

/* Texto dentro de la lápida */
.tombstone-text-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%; /* Para que no toque los bordes del PNG */
}

.epitaph-nick {
    color: #ffffff; /* Color oscuro como si fuera piedra tallada */
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    margin-bottom: 4px;
    filter: brightness(0) opacity(0.7);
    text-overflow: ellipsis;
}

.epitaph-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.562);
    padding-top: 4px;
}

.epitaph-loc, .epitaph-wins {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    filter: brightness(0) opacity(0.7);
}

.empty-grave {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* TEAM SWAPPER */
.trainer-team-swapper {
    position: absolute;
    top: 55px;
    left: 80px;
    transform: translateY(-50%);
    z-index: 20 !important;
    width: 40px;
    height: 40px;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.trainer-team-swapper:hover .swap-icon {
    opacity: 1;
    filter: drop-shadow(0 0 5px #ffffff46); /* Brillo blanco */
    transform: scale(1.1); /* Ligero aumento de tamaño */
}

.swap-icon {
    width: 24px;
    height: 24px;
}