/* ============================================================
   SHADOWSKINGS — COMBAT HUB (5-BUTTON MENU)
   Fully isolated, zero bleed, namespaced.
   ============================================================ */

.combat-hub-panel {
    padding: 40px;
    color: #e6e6e6;
    font-family: var(--font-main, 'Cinzel', serif);
}

.combat-hub-header {
    text-align: center;
    margin-bottom: 40px;
}

.combat-hub-header h1 {
    font-size: 42px;
    margin: 0;
    color: #dcd2ff;
    text-shadow: 0 0 12px rgba(140, 90, 255, 0.6);
}

.combat-hub-header .subheader {
    font-size: 18px;
    opacity: 0.8;
    margin-top: 6px;
}

/* ------------------------------------------------------------
   BUTTON GRID — 5 items
   ------------------------------------------------------------ */
.combat-hub-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 600px;
    margin: 0 auto;
}

/* ------------------------------------------------------------
   BUTTON BASE STYLE
   ------------------------------------------------------------ */
.combat-hub-buttons button {
    padding: 18px 20px;
    font-size: 20px;
    border-radius: 8px;
    border: 2px solid rgba(150, 120, 255, 0.4);
    background: rgba(40, 30, 70, 0.55);
    color: #e6e6e6;
    cursor: pointer;
    transition: 0.15s ease-in-out;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.combat-hub-buttons button:hover {
    background: rgba(90, 60, 150, 0.7);
    border-color: rgba(180, 150, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(150, 120, 255, 0.4);
}

/* ------------------------------------------------------------
   PRIMARY BUTTON (TACTICAL COMBAT)
   ------------------------------------------------------------ */
#btn-tactical-combat {
    background: rgba(110, 70, 200, 0.75);
    border-color: rgba(200, 170, 255, 0.9);
}

#btn-tactical-combat:hover {
    background: rgba(140, 100, 240, 0.85);
    box-shadow: 0 0 16px rgba(200, 170, 255, 0.7);
}