/* MACANO: Estilos FPS movidos desde FpsPage.razor para mantener el componente limpio */

/* ── COMPARACIÓN: grid de tarjetas estilo erkul ─────────────────────────────── */
.fps-cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
}
.fps-cmp-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #cdd6f4;
}
.fps-cmp-legend-dot {
    width: 14px; height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}
.fps-cmp-legend-dot--1 { background: #e05050; }
.fps-cmp-legend-dot--2 { background: #5090e0; }
.fps-cmp-legend-dot--3 { background: #50c878; }
.fps-cmp-legend-dot--4 { background: #c080e0; }
.fps-cmp-legend-name { opacity: 0.92; }
/* MACANO: info multi-línea en leyenda — nombre + accesorios equipados */
.fps-cmp-legend-info { display: flex; flex-direction: column; gap: 1px; }
.fps-cmp-legend-att  { font-size: 0.71rem; opacity: 0.55; font-weight: 400; letter-spacing: 0.02em; }

.fps-cmp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.fps-cmp-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s;
}
.fps-cmp-card:hover {
    border-color: rgba(255,255,255,0.2) !important;
}
.fps-cmp-card-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a0aec0;
    text-align: center;
    padding-bottom: 2px;
}
.fps-cmp-inv-label {
    font-size: 0.62rem;
    color: #f6a623;
    font-weight: 500;
    letter-spacing: 0;
}
.fps-cmp-card-best {
    font-size: 0.73rem;
    font-weight: 600;
    color: #50e878;
    text-align: center;
    padding-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fps-cmp-card-best--inv {
    color: #f6a623;
}

.fps-cmp-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f6a623;
    border-bottom: 1px solid rgba(246,166,35,0.25);
    padding-bottom: 4px;
}

.fps-cmp-radar-card {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 10px !important;
}

/* Build bar - botones versión + changelog */
.fps-banner-layout {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 1.5rem 2rem;
}

.fps-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 680px;
}

.fps-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
}

.fps-build-btn {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em;
    text-transform: none !important;
    border: 1px solid rgba(230,200,92,0.45) !important;
    color: #e6c85c !important;
    background: linear-gradient(180deg, rgba(14,24,48,0.85), rgba(8,14,30,0.92)) !important;
    backdrop-filter: blur(6px);
    border-radius: 10px !important;
    padding: 0.5rem 1.1rem !important;
    box-shadow: inset 0 0 0 1px rgba(255,219,140,0.08), 0 0 12px rgba(237,190,76,0.1) !important;
    transition: all 0.25s ease;
}

.fps-build-btn:hover {
    border-color: #e6c85c !important;
    background: linear-gradient(180deg, rgba(20,32,60,0.9), rgba(14,22,44,0.95)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,219,140,0.15), 0 0 20px rgba(237,190,76,0.2) !important;
}

/* Changelog dialog (modal) */
.fps-changelog-dialog .mud-dialog {
    background: linear-gradient(180deg, rgba(8, 15, 30, 0.99), rgba(4, 8, 18, 1)) !important;
    border: 2px solid rgba(230, 200, 92, 0.45) !important;
    border-radius: 12px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 219, 140, 0.18),
        0 0 32px rgba(230, 200, 92, 0.22),
        0 0 64px rgba(230, 200, 92, 0.08),
        0 16px 48px rgba(0,0,0,0.55) !important;
}

.fps-changelog-dialog .mud-dialog-title {
    background: linear-gradient(180deg, rgba(14, 27, 53, 0.96), rgba(6, 11, 22, 0.98));
    border-bottom: 1px solid rgba(237, 190, 76, 0.35);
    padding: 0.75rem 1.25rem;
}

.fps-changelog-dialog .mud-dialog-content {
    background: transparent;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    max-height: 65vh;
}

.fps-changelog-dialog .mud-dialog-actions {
    background: linear-gradient(180deg, rgba(6, 11, 22, 0.98), rgba(4, 8, 18, 1));
    border-top: 1px solid rgba(237, 190, 76, 0.15);
    padding: 0.6rem 1.25rem;
    justify-content: center;
}

.fps-changelog-category {
    display: block;
    text-align: center;
    color: var(--arka-gold);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    margin: 1rem 0 0.5rem;
    opacity: 0.85;
}

.fps-changelog-entity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.fps-changelog-ref {
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    font-family: monospace;
}

.fps-changelog-stat-group {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.fps-changelog-stat-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0 0.15rem 1rem;
    font-size: 0.8rem;
}

.fps-changelog-stat-code {
    color: #4dd0e1;
    font-weight: 600;
    min-width: 150px;
}

.fps-changelog-stat-val {
    color: rgba(255,255,255,0.8);
}

.fps-changelog-stat-delta {
    font-weight: 700;
    font-size: 0.78rem;
}

/* MACANO: Changelog filters (búsqueda + chips) */
.fps-changelog-filters {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fps-changelog-search {
    max-width: 100%;
}

.fps-changelog-search .mud-input-outlined-border {
    border-color: rgba(230,200,92,0.28) !important;
}

.fps-changelog-search .mud-input-root {
    color: rgba(255,255,255,0.85) !important;
}

.fps-changelog-filter-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fps-changelog-name {
    color: rgba(255,255,255,0.88);
    font-size: 0.84rem;
}

.fps-banner {
    position: relative;
    z-index: 40;
    height: 250px;
    border-bottom: 1px solid rgba(237, 190, 76, 0.28);
    box-shadow: inset 0 -20px 46px rgba(0,0,0,0.26);
}

.fps-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,10,20,0.55), rgba(5,10,20,0.82));
    z-index: 2;
}

.fps-banner-grid {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: 0.16;
}

.fps-banner-fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 96px;
    z-index: 4;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(7,14,28,0.66));
}

.fps-chip {
    width: fit-content;
    color: #e6c85c !important;
    border-color: rgba(230, 200, 92, 0.45) !important;
    background: rgba(255,255,255,0.03) !important;
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fps-shell {
    min-height: 50vh;
}

.fps-panel,
.fps-card {
    border: 1px solid rgba(230,200,92,0.2);
}

/* MACANO: convierto el shell en contenedor relativo de una sola columna.
 * La tabla aprovecha el 100% del ancho. El tab y drawer flotan en fixed/absolute. */
.fps-list-shell {
    position: relative;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════ */
/* MACANO: Tab flotante izquierda — igual al explorer-tab-reopen    */
/* del mapa pero a la izquierda y con texto "BUSCAR"                */
/* ═══════════════════════════════════════════════════════════════ */
.fps-search-tab {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.4rem;
    background: linear-gradient(135deg, rgba(14, 20, 40, 0.95) 0%, rgba(8, 12, 28, 0.98) 100%);
    border: 1px solid rgba(199, 155, 47, 0.3);
    border-left: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    transition: all 0.25s ease;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
}

.fps-search-tab:hover {
    background: linear-gradient(135deg, rgba(20, 30, 58, 0.98) 0%, rgba(12, 18, 40, 1) 100%);
    border-color: rgba(199, 155, 47, 0.55);
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.5);
}

.fps-search-tab-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.48rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

/* ═══════════════════════════════════════════════════════════════ */
/* MACANO: Drawer lateral izquierdo de búsqueda — se desliza       */
/* desde la izquierda del viewport, sigue el scroll con fixed       */
/* ═══════════════════════════════════════════════════════════════ */
.fps-search-drawer {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1200;
    width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease;
    background: linear-gradient(180deg, rgba(14, 20, 40, 0.97) 0%, rgba(8, 12, 28, 0.99) 100%);
    border: 1px solid rgba(199, 155, 47, 0.22);
    border-left: none;
    border-radius: 0 18px 18px 0;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.55);
}

.fps-search-drawer--open {
    width: 300px;
    opacity: 1;
    pointer-events: auto;
}

.fps-search-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem 0.6rem;
    border-bottom: 1px solid rgba(199, 155, 47, 0.15);
    flex-shrink: 0;
}

.fps-search-drawer-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e6c85c;
}

.fps-search-drawer-close {
    color: rgba(255, 255, 255, 0.35) !important;
    flex-shrink: 0;
}

.fps-search-drawer-close:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

.fps-search-drawer-body {
    padding: 0.9rem 1rem 1rem;
    overflow-y: auto;
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════ */
/* MACANO: Overlay que cierra el drawer                             */
/* ═══════════════════════════════════════════════════════════════ */
.fps-list-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
    cursor: default;
}

/* MACANO: aprieto el padding horizontal del resto de celdas para aprovechar
 * el ancho y evitar el scroll horizontal innecesario. */
.fps-list-main .mud-table thead th,
.fps-list-main .mud-table tbody td {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.fps-col-toggle-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

.fps-list-main {
    min-width: 0;
}

/* MACANO: cabecera sticky de la tabla de LISTA (ARMAS / ACCESORIOS).
 * Pego las cabeceras justo debajo del .arka-header (navbar fixed = 80px de alto)
 * mientras se hago scroll, para no perder de vista a qué columna pertenece
 * cada celda en tablas largas.
 *
 * El gran problema que tenía: position:sticky se rompe si CUALQUIER ancestro
 * entre el <th> y el viewport tiene:
 *   - overflow distinto de visible (ej. .arka-card => overflow:hidden), o
 *   - una propiedad que cree un nuevo containing block: transform, filter,
 *     backdrop-filter, will-change, contain... (.arka-card usa backdrop-filter).
 * Así que neutralizo overflow Y backdrop-filter en la cadena de ancestros que
 * envuelven a .fps-list-main, usando :has() para no afectar a otras pestañas.
 * Subo el z-index por encima de filas pero por debajo del navbar (z-index 1300). */

/* MACANO: rompo el containing block de la card que envuelve LISTA.
 * Uso overflow-x: clip para que NO se salga la tabla por los lados (la card
 * sigue recortando horizontal), y overflow-y: visible para que el sticky
 * vertical siga funcionando. 'clip' no crea contenedor de scroll, así que
 * NO atrapa al position:sticky como sí harían 'hidden/auto/scroll'. */
.fps-shell:has(.fps-list-main),
.fps-panel:has(.fps-list-main),
.arka-card:has(.fps-list-main),
.mud-paper:has(.fps-list-main) {
    overflow-x: clip !important;
    overflow-y: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* MACANO: y los wrappers internos de MudTabs/MudTable que también cortan */
.fps-list-main,
.fps-list-main .mud-tabs,
.fps-list-main .mud-tabs-panels,
.fps-list-main .mud-tabs-panels-wrapper,
.fps-list-main .mud-tab-panel,
.fps-list-main .mud-table,
.fps-list-main .mud-table-root,
.fps-list-main .mud-table-toolbar {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* MACANO: el contenedor directo de la tabla SÍ debe permitir scroll horizontal
 * propio (por si la tabla no cabe), pero overflow-x: auto rompería el sticky.
 * Truco: lo dejo en visible y dejo que la card de arriba haga el clip. */
.fps-list-main .mud-table-container {
    overflow: visible !important;
}

.fps-list-main .mud-table thead th,
.fps-list-main .mud-table-head th,
.fps-list-main table thead th,
.fps-list-main .mud-table-cell-header {
    position: sticky !important;
    /* MACANO: 80px = altura del .arka-header fixed (definido en site.css) */
    top: 80px;
    z-index: 50;
    background-color: #0f1722 !important;
    box-shadow: 0 2px 0 0 rgba(255, 193, 7, 0.25);
}

/* MACANO: iconos FPS grandes */
.fps-value-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fps-value-icon .arka-stat-icon {
    width: 24px;
    height: 24px;
    opacity: 0.95;
}

.fps-value-icon--xl {
    width: 40px;
    height: 40px;
}

.fps-value-icon--xl .arka-stat-icon {
    width: 40px;
    height: 40px;
    opacity: 1;
}

/* MACANO: tabs estilo minería para FPS */
.fps-mining-tabs .mud-tabs-toolbar,
.fps-mining-tabs-inner .mud-tabs-toolbar {
    background: rgba(17, 38, 78, 0.72);
    border-bottom: 1px solid rgba(230, 200, 92, 0.28);
}

.fps-mining-tabs .mud-tab,
.fps-mining-tabs-inner .mud-tab {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

.fps-mining-tabs .mud-tab.mud-tab-active,
.fps-mining-tabs-inner .mud-tab.mud-tab-active {
    color: #e6c85c !important;
}

.fps-mining-tabs .mud-tabs-slider,
.fps-mining-tabs-inner .mud-tabs-slider {
    background-color: #e6c85c;
    height: 2px;
}

/* MACANO: layout calculadora FPS tipo panel experto */
/* MACANO: fps-loadout-outer es el wrapper flex real de LOADOUT TTK — contiene el área de tabs (izq) y la columna sticky OBJETIVO (der) fuera del overflow de MudTabs */
.fps-loadout-outer {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

.fps-loadout-tabs-area {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
}

.fps-loadout-bridge {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.fps-loadout-panel {
    border: 1px solid rgba(230,200,92,0.24);
    background: linear-gradient(180deg, rgba(10,22,46,0.9), rgba(8,18,38,0.9));
}

.fps-loadout-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.fps-loadout-metric-card {
    border: 1px dashed rgba(230,200,92,0.24);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}

@media (max-width: 1100px) {
    .fps-loadout-shell {
        grid-template-columns: 1fr;
    }

    .fps-loadout-metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* MACANO: layout calculadora FPS 3 columnas (arma + resultados + objetivo) */

@media (max-width: 1000px) {
    .fps-loadout-bridge {
        grid-template-columns: 1fr;
    }
    .fps-loadout-bridge--right-collapsed {
        grid-template-columns: 1fr;
    }
}

.fps-loadout-config,
.fps-loadout-results {
    display: flex;
    flex-direction: column;
}

.fps-loadout-panel {
    border: 1px solid rgba(230,200,92,0.2);
    background: linear-gradient(180deg, rgba(10, 22, 46, 0.92), rgba(8, 16, 34, 0.92));
    border-radius: 12px;
}

.fps-loadout-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.fps-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(230,200,92,0.12);
}

.fps-weapon-quickstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.6rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(230,200,92,0.12);
    border-radius: 8px;
}

.fps-qs {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    gap: 0.15rem;
}

.fps-qs span {
    color: rgba(255,255,255,0.45);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fps-qs strong {
    color: #e6c85c;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
}

.fps-hitbox-strip {
    display: flex;
    gap: 0.4rem;
}

.fps-hitbox-strip .fps-hitbox-btn {
    flex: 1;
}

.fps-craft-row {
    margin-bottom: 0.5rem;
}

/* MACANO: cabecera de propiedad crafteable - nombre + rango en la misma fila */
.fps-craft-prop-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.fps-craft-prop-header span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.55);
    font-family: 'Orbitron', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

/* MACANO: rango min→max del stat crafteable */
.fps-craft-range {
    font-size: 0.65rem;
    color: rgba(230,200,92,0.6);
    white-space: nowrap;
    flex-shrink: 0;
}

/* MACANO: bloque completo de una propiedad crafteable (cabecera + slider + valor actual) */
.fps-craft-prop-block {
    margin-bottom: 0.65rem;
    padding: 0.45rem 0.55rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(230,200,92,0.1);
    border-radius: 8px;
    transition: border-color 0.2s;
}

.fps-craft-prop-block:hover {
    border-color: rgba(230,200,92,0.25);
}

/* MACANO: fila slider + valor numérico actual */
.fps-craft-slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.fps-craft-slider-row .mud-slider {
    flex: 1 1 0;
    min-width: 0;
}

/* MACANO: el input numérico y el "%" van al extremo derecho — el slider ocupa todo el espacio libre */
.fps-craft-slider-row .mud-input-control {
    flex: 0 0 72px;
    width: 72px !important;
    min-width: 64px;
    margin-left: auto;
}

/* MACANO: sección de crafting de arma/armadura — título del grupo */
.fps-craft-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(230,200,92,0.7);
    margin: 0.75rem 0 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(230,200,92,0.15);
}

/* MACANO: badges de efectos de accesorios en la columna Efectos de LISTA ACCESORIOS */
.fps-attach-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.fps-attach-effect-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.6rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    padding: 0.08rem 0.35rem;
    border-radius: 4px;
    white-space: nowrap;
    cursor: default;
    line-height: 1.4;
}

.fps-attach-effect-badge .arka-stat-icon {
    width: 10px;
    height: 10px;
}

/* Verde — mejora */
.fps-attach-effect--good {
    background: rgba(76, 220, 150, 0.12);
    color: #4cdc96;
    border: 1px solid rgba(76, 220, 150, 0.3);
}

/* Rojo — penalización */
.fps-attach-effect--bad {
    background: rgba(220, 76, 76, 0.12);
    color: #dc4c4c;
    border: 1px solid rgba(220, 76, 76, 0.3);
}

/* MACANO: badge para modo de disparo "charge" — color energía azul-cyan */
.fps-badge--charge {
    font-size: 0.62rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    background: rgba(66, 200, 245, 0.12);
    color: #42c8f5;
    border: 1px solid rgba(66, 200, 245, 0.35);
    white-space: nowrap;
    cursor: default;
}

/* MACANO: badge de calidad crafteable (MIN / MAX / valor %) */
.fps-craft-badge {
    font-size: 0.62rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(230,200,92,0.12);
    color: #e6c85c;
    border: 1px solid rgba(230,200,92,0.25);
    white-space: nowrap;
}

.fps-slider-val {
    color: #e6c85c;
    font-weight: 700;
    font-size: 0.82rem;
    min-width: 42px;
    text-align: right;
}

.fps-calc-btn {
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85rem !important;
}

.fps-expansion .mud-expand-panel {
    background: transparent !important;
    border: none !important;
}

.fps-expansion .mud-expand-panel-header {
    color: rgba(255,255,255,0.75) !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.6rem 1rem !important;
    min-height: unset !important;
}

/* MACANO: grid de resultados de cálculo */
.fps-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
}

.fps-result-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(230,200,92,0.12);
    border-radius: 10px;
    text-align: center;
    transition: border-color 0.2s;
}

.fps-result-card:hover {
    border-color: rgba(230,200,92,0.35);
}

.fps-result-card--highlight {
    border-color: rgba(230,200,92,0.3);
    background: rgba(230,200,92,0.05);
}

/* MACANO: Tarjeta TTK maestra — cambia de dorado a rojo cuando hay simulación real activa */
.fps-result-card--ttk-master {
    border-color: rgba(230,200,92,0.3);
    background: rgba(230,200,92,0.05);
    transition: border-color 0.3s, background 0.3s;
}

.fps-result-card--ttk-dead {
    border-color: rgba(230,68,78,0.5) !important;
    background: rgba(230,68,78,0.08) !important;
}

/* MACANO: PTK inline dentro de la caja de métricas — solo para escopetas */
/* .fps-ptk-inline-block era el bloque suelto debajo; ahora .fps-ptk-grid-cell está dentro del grid */
.fps-ptk-grid-cell {
    grid-column: 2 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 0.9rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(230,200,92,0.18);
    border-radius: 10px;
}

.fps-ptk-inline-block {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(199,155,47,0.2);
}

.fps-ptk-inline-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--arka-gold);
    text-transform: uppercase;
}

.fps-ptk-inline-armor {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fps-ptk-inline-grid {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.fps-ptk-inline-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(199,155,47,0.15);
    min-width: 70px;
    flex: 1;
}

.fps-ptk-inline-zone {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.fps-ptk-inline-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.fps-ptk-inline-unit {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
    margin-top: 0.15rem;
}

.fps-ptk-ok  { color: #50e678; }
.fps-ptk-fail { color: #e6444e; }

.fps-ttk-sim-val {
    color: #ff6b6b !important;
}

.fps-ttk-sim-sub {
    color: rgba(255,107,107,0.6) !important;
    font-size: 0.6rem;
}

.fps-result-label {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 0.3rem;
    font-family: 'Orbitron', sans-serif;
}

.fps-result-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
}

.fps-result-value--big {
    font-size: 1.6rem;
    color: #e6c85c;
}

.fps-result-sub {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.35);
    margin-top: 0.2rem;
}

/* MACANO: stats box dentro de weapon selection */
.fps-calc-stats {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(230, 200, 92, 0.15);
    border-radius: 8px;
}

.fps-calc-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
    font-size: 0.82rem;
}

/* MACANO: slider + numeric input en una fila */
.fps-calc-slider-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.fps-calc-slider-input {
    max-width: 68px;
}

/* MACANO: hitbox buttons */
.fps-hitbox-btn {
    text-transform: uppercase !important;
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 0.04em;
    font-size: 0.72rem !important;
}

/* MACANO: TTK visualization bar */
.fps-ttk-viz {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(230, 200, 92, 0.12);
    border-radius: 8px;
}

/* MACANO: Gráfico SVG TTK Visual — curva de HP del objetivo disparo a disparo */
.fps-ttkv-wrap {
    width: 100%;
}

.fps-ttkv-svg {
    width: 100%;
    height: 90px;
    display: block;
    overflow: visible;
}

.fps-ttkv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}

.fps-ttkv-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
}

.fps-ttkv-badge--live {
    color: #e64e4e;
    border-color: rgba(230,78,78,0.3);
    background: rgba(230,78,78,0.08);
}

.fps-ttkv-badge--theory {
    color: rgba(230,200,92,0.6);
    border-color: rgba(230,200,92,0.2);
}

.fps-ttkv-badge--shots {
    color: rgba(255,255,255,0.55);
    border-color: rgba(255,255,255,0.15);
    margin-left: auto;
}

/* Mantener los estilos TTK anteriores por compatibilidad */
.fps-ttk-bar-container {
    width: 100%;
    height: 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    overflow: hidden;
}

.fps-ttk-bar {
    height: 100%;
    background: linear-gradient(90deg, #e6c85c, #d4a730);
    border-radius: 7px;
    transition: width 0.4s ease;
    min-width: 4px;
}

.fps-ttk-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.3rem;
}

/* MACANO: active modifiers list */
.fps-modifiers {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(230, 200, 92, 0.12);
    border-radius: 8px;
}

.fps-modifier-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* MACANO: slot tabs estilo pro */
.fps-slot-tabs .mud-tabs-toolbar {
    background: rgba(17, 38, 78, 0.55);
    border-bottom: 1px solid rgba(230, 200, 92, 0.22);
}

.fps-slot-tabs .mud-tab {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

.fps-slot-tabs .mud-tab.mud-tab-active {
    color: #e6c85c !important;
}

.fps-slot-tabs .mud-tabs-toolbar {
    background: rgba(17, 38, 78, 0.55);
    border-bottom: 1px solid rgba(230, 200, 92, 0.22);
}

.fps-slot-tabs .mud-tab {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

.fps-slot-tabs .mud-tab.mud-tab-active {
    color: #e6c85c !important;
}

.fps-slot-tabs .mud-tabs-slider {
    background-color: #e6c85c;
    height: 2px;
}

/* MACANO: Fila que agrupa el MudTabs de slots + botones RESET/GLOSARIO al final */
.fps-slot-tabs-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.fps-slot-tabs--inline {
    flex: 1;
    min-width: 0;
}

.fps-slot-tabs-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
    flex-shrink: 0;
}

.fps-slot-action-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(199,155,47,0.35);
    background: rgba(14,20,40,0.7);
    color: rgba(255,255,255,0.65);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.fps-slot-action-btn:hover {
    border-color: rgba(199,155,47,0.7);
    background: rgba(20,30,60,0.85);
    color: #e6c85c;
}

.fps-slot-action-btn--reset {
    border-color: rgba(230,68,78,0.35);
    color: rgba(230,150,150,0.7);
}

.fps-slot-action-btn--reset:hover {
    border-color: rgba(230,68,78,0.7);
    background: rgba(40,15,15,0.85);
    color: #ff8888;
}

.fps-slot-action-btn--glossary {
    border-color: rgba(199,155,47,0.35);
    color: rgba(230,200,92,0.7);
}

.fps-slot-action-btn--glossary:hover {
    border-color: rgba(199,155,47,0.7);
    color: #e6c85c;
}

/* MACANO: comparison chart bars */
.fps-compare-section {
    margin-bottom: 1.5rem;
}

.fps-compare-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 0.75rem;
}

.fps-compare-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    height: 180px;
    padding: 0 1rem;
}

.fps-compare-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    max-width: 100px;
}

.fps-compare-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height 0.4s ease;
    min-height: 4px;
    position: relative;
}

.fps-compare-bar--1 { background: linear-gradient(180deg, #e05050, #c73838); }
.fps-compare-bar--2 { background: linear-gradient(180deg, #5090e0, #3868c0); }
.fps-compare-bar--3 { background: linear-gradient(180deg, #50c878, #38a858); }
.fps-compare-bar--4 { background: linear-gradient(180deg, #c080e0, #9050b8); }

.fps-compare-bar-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.fps-compare-bar-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* MACANO: comparison legend */
.fps-compare-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.fps-compare-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
}

.fps-compare-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.fps-compare-legend-dot--1 { background: #e05050; }
.fps-compare-legend-dot--2 { background: #5090e0; }
.fps-compare-legend-dot--3 { background: #50c878; }
.fps-compare-legend-dot--4 { background: #c080e0; }

/* MACANO: compare charts grid */
.fps-compare-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.fps-compare-chart-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(230, 200, 92, 0.15);
    border-radius: 10px;
    padding: 1rem;
}

/* MACANO: layout 3 cols — col1/col2 para las cards, col3 para el radar con row-span.
   Las cards se colocan en col1/col2 de forma alterna y el radar ocupa toda la altura derecha. */
.fps-cmp-layout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* Columna izquierda: grid de 2 cols para las cards */
.fps-cmp-cards-col {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    align-content: start;
}

/* Cada card ocupa 1 celda de col1 o col2 */
.fps-cmp-card-wrap {
    min-width: 0;
    box-sizing: border-box;
}

/* El radar ocupa columna derecha de ancho fijo */
.fps-cmp-radar-col {
    width: 460px;
    flex-shrink: 0;
    min-width: 0;
}

.fps-cmp-radar-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(230, 200, 92, 0.18) !important;
    border-radius: 12px !important;
}

.fps-cmp-radar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.fps-cmp-radar-legend-item {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    color: #fff;
}

.fps-cmp-radar-legend-item--1 { background: rgba(224,80,80,0.75); }
.fps-cmp-radar-legend-item--2 { background: rgba(80,144,224,0.75); }
.fps-cmp-radar-legend-item--3 { background: rgba(80,200,120,0.75); }
.fps-cmp-radar-legend-item--4 { background: rgba(192,128,224,0.75); }

/* MACANO: cada card ocupa una celda del grid de 2 cols en fps-cmp-cards-col */
.fps-cmp-card-wrap {
    min-width: 0;
    box-sizing: border-box;
}

/* MACANO: ocultar la leyenda interna del MudChart en las cards de comparación — ocupa demasiado espacio */
.fps-cmp-card .mud-chart-legend {
    display: none !important;
}

/* MACANO: override del tooltip nativo de MudChart — fondo oscuro, texto blanco, legible */
.fps-cmp-card .mud-chart-tooltip,
.fps-cmp-radar-card .mud-chart-tooltip,
.mud-chart-tooltip {
    background: rgba(10, 18, 40, 0.97) !important;
    border: 1px solid rgba(230,200,92,0.4) !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6) !important;
    pointer-events: none !important;
}
.mud-chart-tooltip text,
.mud-chart-tooltip tspan {
    fill: #fff !important;
}
/* Etiqueta del valor dentro del globo SVG del MudChart */
.mud-chart-bar-tooltip-label,
.mud-chart-tooltip-label {
    fill: #fff !important;
    font-size: 0.68rem !important;
}
/* Globo/bubble de tooltip SVG de MudChart */
.mud-chart-tooltip-background {
    fill: rgba(10, 18, 40, 0.97) !important;
    stroke: rgba(230,200,92,0.4) !important;
    stroke-width: 1px !important;
}

.fps-cmp-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(230, 200, 92, 0.13) !important;
    border-radius: 10px !important;
    transition: border-color 0.2s;
}

.fps-cmp-card:hover {
    border-color: rgba(230, 200, 92, 0.32) !important;
}

.fps-cmp-card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(230, 200, 92, 0.85);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fps-cmp-inv-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;
    color: rgba(255, 160, 80, 0.8);
    letter-spacing: 0;
    text-transform: none;
}

.fps-cmp-card-best {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: #5090e0;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fps-cmp-card-best--inv {
    color: #e05050;
}

/* MACANO: leyenda de slots para la comparación */
.fps-cmp-legend {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}

.fps-cmp-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
}

.fps-cmp-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}

.fps-cmp-legend-dot--1 { background: #e05050; }
.fps-cmp-legend-dot--2 { background: #5090e0; }
.fps-cmp-legend-dot--3 { background: #50c878; }
.fps-cmp-legend-dot--4 { background: #c080e0; }

.fps-cmp-legend-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
}

.fps-cmp-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(230, 200, 92, 0.7);
    border-bottom: 1px solid rgba(230, 200, 92, 0.2);
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 1200px) {
    .fps-cmp-layout { grid-template-columns: 1fr 1fr; }
    .fps-cmp-radar-col { grid-column: 1 / -1; grid-row: auto; position: static; }
}

@media (max-width: 600px) {
    .fps-cmp-layout { grid-template-columns: 1fr; }
}

/* MACANO: comparison slot selector header */
.fps-compare-header {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5rem;
}

.fps-compare-slot-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(230, 200, 92, 0.2);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    flex: 1;
    min-width: 200px;
}

.fps-compare-slot-num {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    color: #fff;
}

.fps-compare-slot-num--1 { background: #e05050; }
.fps-compare-slot-num--2 { background: #5090e0; }
.fps-compare-slot-num--3 { background: #50c878; }
.fps-compare-slot-num--4 { background: #c080e0; }

/* MACANO: Títulos de sección dentro de COMPARACIÓN */
.fps-compare-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(230, 200, 92, 0.7);
    border-bottom: 1px solid rgba(230, 200, 92, 0.2);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

/* MACANO: Fila superior — radar + rose side by side */
.fps-compare-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) {
    .fps-compare-top-row { grid-template-columns: 1fr; }
}

/* MACANO: Radar SVG */
.fps-compare-radar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fps-radar-svg {
    width: 100%;
    max-width: 280px;
    height: auto;
}

/* MACANO: Rose charts — 3 pétalos por zona */
.fps-compare-rose-card {
    display: flex;
    flex-direction: column;
}

.fps-compare-rose-row {
    display: flex;
    gap: 0.5rem;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.fps-compare-rose-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.fps-compare-rose-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(230, 200, 92, 0.8);
    text-transform: uppercase;
}

.fps-rose-svg {
    width: 120px;
    height: 120px;
}

/* MACANO: rose svg grande para grids de comparación */
.fps-rose-svg-lg {
    width: 160px;
    height: 160px;
}

/* MACANO: grid de rose charts — varias columnas auto-fill responsivas */
.fps-compare-rose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.fps-compare-rose-item--lg {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(230,200,92,0.1);
    border-radius: 12px;
    padding: 0.75rem 0.5rem 0.5rem;
    transition: border-color 0.2s;
}

.fps-compare-rose-item--lg:hover {
    border-color: rgba(230,200,92,0.3);
}

/* MACANO: grid de donut charts por métrica */
.fps-compare-donut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.fps-compare-donut-card {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(230,200,92,0.1) !important;
    border-radius: 12px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s;
}

.fps-compare-donut-card:hover {
    border-color: rgba(230,200,92,0.3) !important;
}

.fps-compare-donut-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(230,200,92,0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
    text-align: center;
}

.fps-compare-donut-best {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    color: #e6c85c;
    font-weight: 700;
    margin-top: 0.25rem;
    text-align: center;
}

/* MACANO: Barras horizontales — grid de métricas */
.fps-compare-hbar-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fps-compare-hbar-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(230,200,92,0.08);
    border-radius: 8px;
}

.fps-compare-hbar-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fps-compare-hbar-bars {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fps-compare-hbar-item {
    display: grid;
    grid-template-columns: 28px 1fr 70px;
    align-items: center;
    gap: 0.4rem;
    cursor: default;
}

.fps-compare-slot-color--1 { color: #e05050; }
.fps-compare-slot-color--2 { color: #5090e0; }
.fps-compare-slot-color--3 { color: #50c878; }
.fps-compare-slot-color--4 { color: #c080e0; }

.fps-compare-hbar-slot-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
}

.fps-compare-hbar-track {
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 5px;
    overflow: hidden;
}

.fps-compare-hbar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.fps-compare-hbar-fill--best {
    box-shadow: 0 0 6px rgba(230,200,92,0.5);
    filter: brightness(1.2);
}

.fps-compare-hbar-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.75);
    text-align: right;
    white-space: nowrap;
}

.fps-compare-hbar-val--best {
    color: #e6c85c;
    font-weight: 700;
}

/* MACANO: Tabla resumen */
.fps-compare-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(230,200,92,0.15);
}

.fps-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.fps-compare-table th {
    background: rgba(230,200,92,0.08);
    padding: 0.6rem 0.8rem;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(230,200,92,0.9);
    border-bottom: 1px solid rgba(230,200,92,0.2);
    white-space: nowrap;
}

.fps-compare-table th:first-child {
    text-align: left;
}

.fps-compare-table td {
    padding: 0.45rem 0.8rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.8);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
}

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

.fps-compare-table tr:hover td {
    background: rgba(255,255,255,0.03);
}

.fps-compare-table-metric {
    text-align: left !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.68rem !important;
    white-space: nowrap;
}

.fps-compare-table-best {
    color: #e6c85c !important;
    font-weight: 700;
    background: rgba(230,200,92,0.06);
}

/* MACANO: celdas de accesorios en tabla resumen — nombre + efectos técnicos */
.fps-compare-att-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: sans-serif;
    font-size: 0.75rem;
    text-align: center;
}
.fps-compare-att-fx {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    color: rgba(66, 200, 245, 0.8);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.fps-compare-table-section-header td {
    background: rgba(255,255,255,0.04) !important;
    color: rgba(230,200,92,0.65) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-align: left !important;
    padding: 0.3rem 0.8rem !important;
    border-top: 1px solid rgba(230,200,92,0.15);
    border-bottom: 1px solid rgba(230,200,92,0.1);
}

.fps-compare-table-wname {
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    font-family: sans-serif;
    color: rgba(255,255,255,0.7);
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* ═══════════════════════════════════════════════════════════ */
/* MACANO: Panel OBJETIVO colapsable (derecha) estilo minería */
/* ═══════════════════════════════════════════════════════════ */

.fps-target-col {
    position: sticky;
    top: 5rem;
    align-self: flex-start;
    flex-shrink: 0;
    width: clamp(240px, 280px, 300px);
    overflow: visible;
    transition: width 0.35s ease;
}

.fps-target-col--closed {
    width: auto;
}

/* .fps-target-col--closed — ya definido junto a .fps-target-col arriba */

/* MACANO: Botones RESET/GLOSARIO encima del panel objetivo */
.fps-target-top-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-bottom: 0.3rem;
}

.fps-target-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(135deg, rgba(14, 20, 40, 0.7) 0%, rgba(8, 12, 28, 0.85) 100%);
    border: 1px solid rgba(199, 155, 47, 0.25);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.5rem;
    color: #e6c85c;
}

.fps-target-header:hover {
    border-color: rgba(199, 155, 47, 0.5);
    background: linear-gradient(135deg, rgba(20, 28, 52, 0.7) 0%, rgba(14, 20, 40, 0.85) 100%);
}

.fps-target-header-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.fps-target-col--closed .fps-target-header {
    flex-direction: column;
    padding: 0.75rem 0.4rem;
    gap: 0.5rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-radius: 12px;
    min-height: 160px;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════ */
/* MACANO: SVG cuerpo estilizado — zonas clicables estilo ARKA */
/* ═══════════════════════════════════════════════════════════ */

.fps-body-svg-wrap {
    display: flex;
    justify-content: center;
}

.fps-body-svg {
    width: 100%;
    max-width: 180px;
    height: auto;
}

/* MACANO: Zona base clicable — cian oscuro con borde sutil */
.fps-body-zone {
    fill: rgba(50,80,120,0.35);
    stroke: rgba(80,150,200,0.5);
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}

.fps-body-zone:hover {
    fill: rgba(80,150,200,0.25);
    stroke: rgba(100,180,230,0.7);
    filter: drop-shadow(0 0 4px rgba(80,150,200,0.4));
}

/* MACANO: Zona activa — borde dorado ARKA */
.fps-body-zone--active {
    fill: rgba(140,120,60,0.35) !important;
    stroke: #e6c85c !important;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 8px rgba(230,200,92,0.5));
}

/* MACANO: Cabeza */
.fps-body-zone--head {
    fill: rgba(50,80,120,0.4);
}

/* MACANO: Torso */
.fps-body-zone--torso {
    fill: rgba(50,80,120,0.4);
    stroke-width: 1.8;
}

/* MACANO: Cuello */
.fps-body-zone--neck {
    fill: rgba(50,80,120,0.25);
    stroke: rgba(80,150,200,0.35);
    stroke-width: 1;
}

/* MACANO: Extremidades */
.fps-body-zone--limb {
    fill: rgba(50,80,120,0.3);
    stroke: rgba(80,150,200,0.4);
}

/* MACANO: Labels de zona */
.fps-body-label {
    fill: rgba(255,255,255,0.5);
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    text-anchor: middle;
    pointer-events: none;
    letter-spacing: 0.08em;
}

/* MACANO: Armor class selector buttons */
.fps-armor-class-strip {
    display: flex;
    gap: 0.35rem;
}

.fps-armor-class-btn {
    flex: 1;
    padding: 0.4rem 0.2rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(230,200,92,0.18);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fps-armor-class-btn:hover {
    border-color: rgba(230,200,92,0.45);
    color: #e6c85c;
    background: rgba(230,200,92,0.08);
}

.fps-armor-class-btn--active {
    border-color: #e6c85c !important;
    color: #e6c85c !important;
    background: rgba(230,200,92,0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(255,219,140,0.1), 0 0 10px rgba(230,200,92,0.15);
}

/* MACANO: Hit label — TTK value on zone */
.fps-body-hit-label {
    fill: #ff4444;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
    filter: url(#fpsHitGlow);
}

/* MACANO: Damage label on body zone — big gold number showing dmg/shot */
.fps-body-dmg-label {
    fill: #e6c85c;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
}

/* MACANO: HP label on body zone — small muted text showing /HP */
.fps-body-hp-label {
    fill: rgba(255,255,255,0.45);
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    text-anchor: middle;
    pointer-events: none;
}

/* MACANO: Panel de distribución de disparos por zona */
.fps-distrib-panel {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(230,200,92,0.18);
    border-radius: 10px;
    padding: 0.75rem;
}

.fps-distrib-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.fps-distrib-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.fps-distrib-zone {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    width: 72px;
    flex-shrink: 0;
}

.fps-distrib-zone--head  { color: #ff6b6b; }
.fps-distrib-zone--torso { color: #e6c85c; }
.fps-distrib-zone--limbs { color: #7ec8e3; }

.fps-distrib-field {
    width: 64px;
    flex-shrink: 0;
}
.fps-distrib-field .mud-input-root { font-size: 0.8rem; }

.fps-distrib-dmgval {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5);
    flex: 1;
    text-align: right;
}

.fps-distrib-result {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(230,200,92,0.2);
}

.fps-distrib-result-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.45);
    flex: 1;
}

.fps-distrib-result-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e6c85c;
}

.fps-distrib-result-val small {
    font-size: 0.6rem;
    color: rgba(230,200,92,0.7);
    margin-left: 1px;
}

.fps-distrib-result-shots {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
}

/* MACANO: Estado "no mata" — resultado en rojo avisando que los disparos configurados no matan */
.fps-distrib-result--warn {
    border-top-color: rgba(255,80,80,0.3);
}

.fps-distrib-result-val--warn {
    color: #ff6b6b !important;
}

/* ══════════════════════════════════════════════════════════════════
   MACANO: TTK Visual unificado — header, gráfico, barras y log
   Todo en la misma tarjeta, integrado y sin paneles separados.
   ══════════════════════════════════════════════════════════════════ */

/* Header del bloque TTK */
.fps-ttkv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.fps-ttkv-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.65);
    font-weight: 700;
}

/* Badge distancia */
.fps-ttkv-badge--dist {
    background: rgba(80,160,230,0.18);
    border: 1px solid rgba(80,160,230,0.45);
    color: #7ec8e3;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

/* Badge disparos */
.fps-ttkv-badge--shots {
    background: rgba(230,200,92,0.15);
    border: 1px solid rgba(230,200,92,0.4);
    color: #e6c85c;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════════════════════════
   MACANO: Wrapper del MudChart Line para TTK — curva HP restante
   ══════════════════════════════════════════════════════════════════ */

.fps-ttkv-chart-wrap {
    width: 100%;
    margin: 4px 0 2px 0;
    /* Override MudChart para encajar con el tema oscuro */
}

/* Fondo del chart — transparente para que use el fondo de la tarjeta */
.fps-ttkv-chart-wrap .mud-chart svg {
    background: transparent !important;
}

/* Ejes y grid — tono oscuro sutil */
.fps-ttkv-chart-wrap .mud-chart-line .mud-chart-gridline,
.fps-ttkv-chart-wrap .mud-chart-line .mud-chart-axis-line {
    stroke: rgba(255,255,255,0.1) !important;
}

/* Labels de ejes */
.fps-ttkv-chart-wrap .mud-chart-line text {
    fill: rgba(255,255,255,0.45) !important;
    font-family: 'Orbitron', monospace !important;
    font-size: 9px !important;
}

/* Línea de la serie — rojo ARKA */
.fps-ttkv-chart-wrap .mud-chart-line path.mud-chart-serie {
    stroke: #e6444e !important;
    stroke-width: 2.5px !important;
    filter: drop-shadow(0 0 4px rgba(230,68,78,0.6));
}

/* Área bajo la curva */
.fps-ttkv-chart-wrap .mud-chart-line path.mud-chart-serie-area {
    fill: rgba(230,68,78,0.15) !important;
}

/* Puntos de datos */
.fps-ttkv-chart-wrap .mud-chart-line circle {
    fill: #e6444e !important;
    stroke: #1a2035 !important;
    stroke-width: 1.5px !important;
}

/* Tooltip */
.fps-ttkv-chart-wrap .mud-chart-tooltip {
    background: rgba(20,30,55,0.92) !important;
    border: 1px solid rgba(230,68,78,0.5) !important;
    color: #fff !important;
    font-family: 'Orbitron', monospace !important;
    font-size: 0.6rem !important;
    border-radius: 4px !important;
}

/* ══════════════════════════════════════════════════════════════════
   MACANO: Damage Strip — barra HP consumida segmento a segmento,
   coloreada por zona de impacto. Reemplaza el SVG de curva HP.
   ══════════════════════════════════════════════════════════════════ */

.fps-dmgstrip-wrap {
    margin: 6px 0 4px 0;
}

.fps-dmgstrip-scale-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fps-dmgstrip-scale-lbl {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    min-width: 38px;
    flex-shrink: 0;
}

.fps-dmgstrip-scale-lbl--right {
    text-align: right;
}

.fps-dmgstrip-track-bg {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    height: 32px;
    overflow: hidden;
    display: flex;
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
}

.fps-dmgstrip-seg {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1px;
    transition: filter 0.15s;
    cursor: default;
}

.fps-dmgstrip-seg:hover {
    filter: brightness(1.35);
    z-index: 2;
}

.fps-dmgstrip-seg--head  { background: rgba(230, 78,78, 0.75); }
.fps-dmgstrip-seg--torso { background: rgba(230,200,78, 0.75); }
.fps-dmgstrip-seg--limbs { background: rgba(78,157,230, 0.75); }
.fps-dmgstrip-seg--alive { background: rgba(46,204,113, 0.35); flex: 1; }
.fps-dmgstrip-seg--kill  {
    background: rgba(255,40,40,0.85) !important;
    box-shadow: inset 0 0 8px rgba(255,0,0,0.5);
}

.fps-dmgstrip-kill-icon {
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 8px rgba(255,50,50,0.9);
}

.fps-dmgstrip-empty {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.2);
    margin: auto;
    letter-spacing: 0.08em;
}

/* Fila de etiquetas de número de disparo bajo el track */
.fps-dmgstrip-labels-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 3px;
}

.fps-dmgstrip-labels-track {
    flex: 1;
    position: relative;
    height: 16px;
}

.fps-dmgstrip-shot-lbl {
    position: absolute;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0.85;
}

.fps-dmgstrip-shot-lbl--kill {
    color: #ff4444 !important;
    font-size: 0.55rem;
}

/* Badge TTK en la leyenda */
.fps-dmgstrip-ttk-badge {
    margin-left: auto;
    background: rgba(230,68,78,0.2);
    border: 1px solid rgba(230,68,78,0.5);
    color: #ff8888;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

/* Leyenda de zonas */
.fps-ttkv-zone-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.6);
}

.fps-ttkv-zone-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Bloque de simulación integrado */
.fps-simv-block {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 10px;
    margin-top: 4px;
}

.fps-simv-block--dead {
    border-top-color: rgba(255,80,80,0.3);
}

/* Pool global */
.fps-simv-pool-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fps-simv-pool-lbl {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.6);
    font-weight: 700;
    width: 36px;
    flex-shrink: 0;
}

.fps-simv-pool-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: #fff;
    width: 80px;
    flex-shrink: 0;
    text-align: right;
}

.fps-simv-pool-val--dead {
    color: #ff5555;
    font-weight: bold;
    animation: simDeadPulse 1s ease-in-out infinite;
}

@keyframes simDeadPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* Grid de zonas 2 columnas */
.fps-simv-zones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.fps-simv-zone-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.fps-simv-zlbl {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    width: 36px;
    flex-shrink: 0;
    text-align: right;
    font-weight: 700;
}

.fps-simv-zlbl--head  { color: #e64e4e; }
.fps-simv-zlbl--torso { color: #e6c84e; }
.fps-simv-zlbl--limb  { color: #4e9de6; }

.fps-simv-bar-bg {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    height: 14px;
    overflow: hidden;
}

.fps-simv-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease-out;
}

.fps-simv-bar--pool  { background: linear-gradient(90deg, #50e678, #e6c84e, #e6444e); }
.fps-simv-bar--head  { background: #e64e4e; }
.fps-simv-bar--torso { background: #e6c84e; }
.fps-simv-bar--limb  { background: #4e9de6; }

.fps-simv-zval {
    font-family: 'monospace', sans-serif;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.55);
    width: 36px;
    flex-shrink: 0;
    text-align: right;
}

/* Log de disparos con mini-barra integrada */
.fps-simv-log {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 8px;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fps-simv-log-row {
    display: grid;
    grid-template-columns: 26px 32px 44px 1fr 56px;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    padding: 3px 6px;
    border-radius: 3px;
    transition: background 0.1s;
}

.fps-simv-log-row--kill {
    background: rgba(255,60,60,0.15);
    border-left: 3px solid #ff3333;
}

.fps-simv-log-n   { color: rgba(255,255,255,0.45); font-family: monospace; font-size: 0.58rem; }
.fps-simv-log-z   { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.52rem; }
.fps-simv-log-z--head  { color: #e64e4e; }
.fps-simv-log-z--torso { color: #e6c84e; }
.fps-simv-log-z--limbs { color: #4e9de6; }
.fps-simv-log-dmg { color: #ff9898; font-family: monospace; font-size: 0.6rem; }

.fps-simv-log-bar-bg {
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    height: 5px;
    overflow: hidden;
}

.fps-simv-log-bar {
    height: 100%;
    background: linear-gradient(90deg, #e6444e, #e6c84e);
    border-radius: 2px;
    transition: width 0.2s;
}

.fps-simv-log-bar--kill { background: #ff3333; }

.fps-simv-log-hp {
    color: rgba(255,255,255,0.65);
    font-family: monospace;
    text-align: right;
    font-size: 0.58rem;
}

.fps-simv-log-hp--kill { color: #ff4444; font-weight: bold; font-size: 0.7rem; }

.fps-simv-hint {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.2);
    text-align: center;
    padding: 8px 0;
    letter-spacing: 0.05em;
}

/* MACANO: Banner MUERTO grande en la tarjeta TTK maestra */
.fps-ttk-dead-banner {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #ff3333;
    text-shadow: 0 0 16px rgba(255,50,50,0.8), 0 0 4px #ff0000;
    text-align: center;
    animation: simDeadPulse 1s ease-in-out infinite;
    margin: 2px 0;
}

/* MACANO: Banner MUERTO grande en la barra de pool del simulador */
.fps-simv-pool-dead-banner {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #ff3333;
    text-shadow: 0 0 12px rgba(255,50,50,0.7);
    white-space: nowrap;
    animation: simDeadPulse 1s ease-in-out infinite;
    flex-shrink: 0;
}

/* MACANO: Hit animation — blood splash */
.fps-hit-splash {
    animation: fpsSplash 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes fpsSplash {
    0% { opacity: 0; r: 6; }
    30% { opacity: 1; r: 26; }
    100% { opacity: 0; r: 36; }
}

/* MACANO: Hit zone pulse on active after click */
.fps-body-zone--hit {
    animation: fpsHitPulse 0.5s ease-out;
}

@keyframes fpsHitPulse {
    0% { stroke: #ff2020; stroke-width: 3; filter: drop-shadow(0 0 12px rgba(255,32,32,0.6)); }
    50% { stroke: #ff6644; stroke-width: 2.5; }
    100% { stroke: #e6c85c; stroke-width: 2; filter: none; }
}

/* =====================================================================
   MACANO: Loader Quantum FPS — overlay fullscreen con nave atravesando.
   Aparece mientras se cargan los datos del backend (mínimo 5s).
   ===================================================================== */
.fps-quantum-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at center, rgba(5, 10, 20, 0.92) 0%, rgba(0, 0, 0, 0.97) 70%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fpsQuantumFadeIn 0.35s ease-out;
}

@keyframes fpsQuantumFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* MACANO: campo de estrellas estatico de fondo */
.fps-quantum-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 45% 18%, rgba(230,200,92,0.8), transparent),
        radial-gradient(1px 1px at 62% 82%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 78% 35%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 88% 60%, rgba(230,200,92,0.6), transparent),
        radial-gradient(1px 1px at 5% 90%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 95% 10%, rgba(255,255,255,0.85), transparent);
    opacity: 0.85;
    animation: fpsQuantumTwinkle 3s ease-in-out infinite alternate;
}

@keyframes fpsQuantumTwinkle {
    from { opacity: 0.55; }
    to { opacity: 0.95; }
}

/* MACANO: lineas blancas horizontales tipo "warp" para reforzar el efecto Quantum */
.fps-quantum-streaks {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, transparent 0%, rgba(230,200,92,0.0) 40%, rgba(230,200,92,0.55) 50%, rgba(230,200,92,0.0) 60%, transparent 100%),
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.0) 70%, transparent 100%);
    background-size: 100% 2px, 100% 1px;
    background-position: 0 35%, 0 65%;
    background-repeat: no-repeat;
    animation: fpsQuantumStreaks 1.2s linear infinite;
    opacity: 0.7;
}

@keyframes fpsQuantumStreaks {
    0% { background-position: -100% 35%, -100% 65%; }
    100% { background-position: 200% 35%, 200% 65%; }
}

/* MACANO: pista por la que cruza la nave de izquierda a derecha */
.fps-quantum-ship-track {
    position: absolute;
    top: 38%;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
}

.fps-quantum-ship {
    position: absolute;
    top: 50%;
    left: -160px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    animation: fpsQuantumFly 5s linear infinite;
    filter: drop-shadow(0 0 12px rgba(230, 200, 92, 0.7));
}

@keyframes fpsQuantumFly {
    0%   { left: -160px; }
    100% { left: 110%; }
}

/* MACANO: estela detras de la nave */
.fps-quantum-ship-trail {
    width: 240px;
    height: 4px;
    background: linear-gradient(90deg, rgba(230, 200, 92, 0) 0%, rgba(230, 200, 92, 0.4) 40%, rgba(255, 240, 180, 0.95) 100%);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(230, 200, 92, 0.55);
    margin-right: -6px;
}

/* MACANO: cuerpo de la nave con un par de glifos sencillos en CSS puro */
.fps-quantum-ship-body {
    color: #f6e27a;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(246, 226, 122, 0.85), 0 0 20px rgba(230, 200, 92, 0.5);
    letter-spacing: -2px;
}

/* MACANO: mensaje centrado debajo de la pista de la nave */
.fps-quantum-msg {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    font-family: var(--font-title, "Orbitron", sans-serif);
    margin-top: 140px;
    padding: 0 1.5rem;
}

.fps-quantum-msg-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f6e27a;
    letter-spacing: 0.05em;
    text-shadow: 0 0 14px rgba(246, 226, 122, 0.45);
    margin-bottom: 0.5rem;
    animation: fpsQuantumPulse 1.6s ease-in-out infinite;
}

.fps-quantum-msg-sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.04em;
}

@keyframes fpsQuantumPulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 14px rgba(246, 226, 122, 0.45); }
    50%      { opacity: 0.75; text-shadow: 0 0 22px rgba(246, 226, 122, 0.85); }
}

/* MACANO: estado vacio del CHANGE LOG cuando no hay cambios reales entre builds. */
.fps-changelog-empty { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 320px; padding: 2.5rem 1.5rem; text-align: center; border: 1px solid rgba(230, 200, 92, 0.18); border-radius: 14px; background: linear-gradient(180deg, rgba(10, 16, 26, 0.85) 0%, rgba(6, 10, 18, 0.92) 100%); overflow: hidden; }
.fps-changelog-empty-glow { position: absolute; inset: -40% 20% auto 20%; height: 60%; background: radial-gradient(ellipse at center, rgba(230, 200, 92, 0.18) 0%, rgba(230, 200, 92, 0) 65%); filter: blur(8px); pointer-events: none; }
.fps-changelog-empty-icon { font-size: 3rem !important; color: var(--arka-gold); filter: drop-shadow(0 0 12px rgba(230, 200, 92, 0.45)); z-index: 1; }
.fps-changelog-empty-title { color: #fff !important; font-family: 'Orbitron', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; z-index: 1; }
.fps-changelog-empty-sub { color: rgba(255, 255, 255, 0.78) !important; max-width: 520px; z-index: 1; }
.fps-changelog-empty-meta { color: rgba(230, 200, 92, 0.7) !important; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.5rem; z-index: 1; }

/* ── MACANO: Calculadora de masa — slots compactos de arma ─────────────────── */
.calc-weapon-slot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.025);
    transition: border-color 0.15s;
}
.calc-weapon-slot:has(.calc-weapon-name:not(.calc-weapon-name--empty)) {
    border-color: rgba(230,200,92,0.22);
    background: rgba(230,200,92,0.04);
}
.calc-weapon-name {
    flex: 1;
    font-size: 0.83rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 4px;
    min-width: 0;
}
.calc-weapon-name--empty {
    opacity: 0.32;
    font-style: italic;
}
.calc-weapon-meta {
    font-size: 0.73rem;
    opacity: 0.55;
    padding: 0 4px 1px;
    letter-spacing: 0.02em;
}

/* ── MACANO: tabla del modal WeaponPickerDialog ──────────────────────────── */
.fps-weapon-picker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.fps-weapon-picker-table thead tr {
    background: rgba(230,200,92,0.08);
    border-bottom: 1px solid rgba(230,200,92,0.2);
}
.fps-weapon-picker-table thead th {
    padding: 6px 10px;
    text-align: left;
    color: rgba(230,200,92,0.85);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fps-weapon-picker-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.12s;
}
.fps-weapon-picker-table tbody tr:hover {
    background: rgba(230,200,92,0.07);
}
.fps-weapon-picker-table tbody td {
    padding: 6px 10px;
    vertical-align: middle;
}
.fps-wp-row--selected {
    background: rgba(230,200,92,0.12) !important;
    outline: 1px solid rgba(230,200,92,0.35);
}

/* ── MACANO: cajas de resultado de la calculadora de masa ─────────────────── */
/* Fila de 4 stats siempre del mismo tamaño y bien alineadas */
.calc-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 680px) {
    .calc-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.calc-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    min-height: 72px;
    text-align: center;
}
.calc-stat-box--highlight {
    background: rgba(230,200,92,0.08);
    border-color: rgba(230,200,92,0.2);
}
.calc-stat-label {
    font-size: 0.72rem;
    opacity: 0.6;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
    line-height: 1.1;
}
.calc-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
/* MACANO: variante grande para la caja de masa total */
.calc-stat-value--big {
    font-size: 1.6rem;
    font-weight: 800;
}
.calc-stat-sub {
    font-size: 0.68rem;
    opacity: 0.38;
    letter-spacing: 0.02em;
}

/* Fila ADS Time — ocupa ancho completo, con badge "arma primaria" */
.calc-ads-time-row {
    width: 100%;
}
.calc-ads-time-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(79,195,247,0.18);
    width: 100%;
}
.calc-ads-time-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.65rem;
    padding: 1px 7px;
    border-radius: 20px;
    background: rgba(79,195,247,0.15);
    color: #4fc3f7;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    vertical-align: middle;
}