/* ==========================================================================
   Gameplay page — themed to match the redesigned home page
   --------------------------------------------------------------------------
   All rules are scoped under .gameplay-page so they only affect the gameplay
   view (the shared <x-page-hero> component and .faction-* styles from main.css
   are used elsewhere and must not change). Shared tokens (--qr-*) come from
   qubitrp.css.
   ========================================================================== */

/* -------------------------------------------------------------------- Hero */
.gameplay-page .page-hero {
    margin-top: -78px;                 /* sit under the fixed navbar */
    padding: 160px 0 90px;
}

/* Swap the component's orange glow for the site accent */
.gameplay-page .page-hero::before {
    background: radial-gradient(circle at 50% 40%, rgba(43, 189, 246, 0.12) 0%, transparent 60%) !important;
}

.gameplay-page .page-hero__title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
}

.gameplay-page .page-hero__subtitle {
    color: rgba(233, 246, 255, 0.72);
}

/* Accent highlight used in titles / feature-list icons */
.gameplay-page .text-blue-500 {
    background: none !important;
    color: var(--qr-green) !important;
    -webkit-text-fill-color: var(--qr-green) !important;
}

/* ---------------------------------------------------- Section backgrounds */
.gameplay-page .faction-section {
    background: #0b0f13;
}

.gameplay-page .faction-section.bg-light-dark {
    /* .bg-light-dark sets --section-bg (#1f2937) with !important — override it
       with a dark tone so the alternating bands stay on-theme */
    background: #10161d !important;
}

/* Kill the parallax overlay main.css draws on alternating sections */
.gameplay-page .faction-section::before {
    display: none !important;
}

/* -------------------------------------------------------------- Faction card */
.gameplay-page .faction-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
    border: 1px solid var(--qr-border);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.gameplay-page .faction-card:hover {
    transform: translateY(-6px);
    border-color: rgba(43, 189, 246, 0.4);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
}

/* Top sweep line -> accent */
.gameplay-page .faction-card::before {
    background: linear-gradient(90deg, transparent, var(--qr-green), transparent);
}

/* ------------------------------------------------------------- Card copy */
/* main.css gives .faction-title a gradient with transparent text-fill (it was
   rendering nearly invisible on the dark cards) — force a solid white fill. */
.gameplay-page .faction-title {
    background: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    animation: none !important;
}

.gameplay-page .faction-subtitle {
    color: var(--qr-green);
}

.gameplay-page .faction-description {
    color: rgba(233, 246, 255, 0.62);
}

/* --------------------------------------------------------- Features list */
.gameplay-page .faction-features li {
    color: rgba(233, 246, 255, 0.78);
    border-bottom: 1px solid var(--qr-border);
}

.gameplay-page .faction-features li:hover {
    color: #ffffff;
}

.gameplay-page .faction-features li i {
    color: var(--qr-green) !important;
}

/* ------------------------------------------------------------------ Gallery */
.gameplay-page .faction-gallery img {
    border-radius: 12px;
}

.gameplay-page .faction-gallery img:hover {
    border-color: var(--qr-green);
    box-shadow: 0 10px 30px rgba(43, 189, 246, 0.3);
}

.gameplay-page .faction-gallery .main-image::before {
    background: linear-gradient(45deg, transparent, rgba(43, 189, 246, 0.35), transparent) !important;
}

/* ------------------------------------------------------------- CTA section */
.gameplay-page .section-padding.bg-light-dark {
    background: #0d1218 !important;
}

.gameplay-page .btn-orange {
    background: linear-gradient(135deg, var(--qr-green) 0%, var(--qr-green-bright) 100%);
    border: none;
    color: #03212e;
    font-weight: 700;
}

.gameplay-page .btn-orange:hover {
    color: #03212e;
    filter: brightness(1.05);
    box-shadow: 0 12px 30px rgba(43, 189, 246, 0.35);
}