/* ==========================================================================
   DETAIL SHEET — panel de detalle como hoja que sube desde abajo en móvil
   --------------------------------------------------------------------------
   En escritorio el panel de detalle (armas, agentes, mapas…) va a la derecha.
   En pantallas <= 900px las páginas lo ocultaban (display:none) y al tocar un
   item no se veía nada. js/detail-sheet.js mueve el panel marcado con
   [data-sheet] dentro de .rig-sheet al abrirlo; aquí se le da forma de hoja.
   ========================================================================== */
.rig-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
}
.rig-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.rig-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1101;
    display: flex; flex-direction: column;
    max-height: 88vh; max-height: 88dvh;
    background: var(--bg-card, #2c2c2c);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.08)); border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 50px -12px rgba(0,0,0,.7);
    transform: translateY(105%);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.rig-sheet.is-open { transform: translateY(0); }
.rig-sheet:focus { outline: none; }
.rig-sheet.is-dragging { transition: none; }

/* Barra superior: asa para arrastrar + botón cerrar */
.rig-sheet-bar {
    position: relative; flex: none;
    display: flex; align-items: center; justify-content: center;
    height: 36px; touch-action: none; cursor: grab;
}
.rig-sheet-bar::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); }
.rig-sheet-close {
    position: absolute; right: 10px; top: 4px;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.08); color: var(--text-white, #fff);
    font-size: 18px; line-height: 1; cursor: pointer;
}
.rig-sheet-close:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* Contenido: el panel de la página, sin su caja de escritorio */
.rig-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.rig-sheet-body > .rig-sheet-panel {
    display: block !important;
    position: static !important; top: auto !important;
    width: auto !important; max-height: none !important; min-height: 0 !important;
    margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; background: none !important;
    overflow: visible !important;
}

body.rig-sheet-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .rig-sheet, .rig-sheet-backdrop { transition: none; }
}