/* =============================================================================
   8bitedge mobile — v2 theme override layer
   Maps the 8bitedge.com desktop "v2" cyberpunk aesthetic onto the mobile PWA
   framework (header / footer-bar / slide-menus / cards / buttons / inputs).

   Loaded AFTER bootstrap.css + style.css so these rules win. Tokens mirror
   public/css/v2/main.css and menu.css from the desktop project.
   ========================================================================== */

:root {
    --v2-bg-0:      #0a0e27;   /* deep space background          */
    --v2-bg-1:      #1a1d35;   /* gradient end / raised surfaces  */
    --v2-bg-2:      #1a1a2e;   /* menu gradient tail              */
    --v2-footer-0:  #050507;   /* footer dark black/grey (top)    */
    --v2-footer-1:  #141417;   /* footer dark black/grey (bottom) */
    --v2-panel:     rgba(10, 10, 20, 0.65); /* translucent cards   */
    --v2-cyan:      #00d9ff;   /* primary accent                  */
    --v2-green:     #00ff41;   /* secondary accent / success      */
    --v2-magenta:   #ff00ff;   /* logo / glitch                   */
    --v2-text:      #e8f6ff;   /* high-contrast text              */
    --v2-text-dim:  #b8b8c8;   /* body copy                       */
    --v2-cyan-25:   rgba(0, 217, 255, 0.25); /* hairline borders   */
    --v2-cyan-10:   rgba(0, 217, 255, 0.10);
    --v2-glow:      0 0 16px rgba(0, 217, 255, 0.25);
    --v2-font:      'Electrolize', 'Roboto', Arial, sans-serif;
}

/* ---- Base canvas ---------------------------------------------------------- */
body.theme-light,
body.theme-dark,
#page {
    font-family: var(--v2-font);
    background: linear-gradient(135deg, var(--v2-bg-0) 0%, var(--v2-bg-1) 100%);
    color: var(--v2-text-dim);
}

/* Scanline overlay across the whole app, matching the desktop hero/menu */
#page::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 217, 255, 0.025) 0px,
        transparent 2px,
        transparent 4px,
        rgba(0, 217, 255, 0.025) 6px
    );
    pointer-events: none;
    z-index: 9990;
}

/* Main content carries the bluer 8bitedge.com hero gradient on every v2 page,
   contrasting the darker black/grey footer below. */
.page-content {
    background: linear-gradient(135deg, var(--v2-bg-0) 0%, var(--v2-bg-1) 100%);
}

h1, h2, h3, h4, h5, h6,
.font-700, .font-900 {
    font-family: var(--v2-font);
    color: var(--v2-text);
}

p, span, a, label, li, div {
    font-family: var(--v2-font);
}

/* ---- Accent class remaps (framework hooks) -------------------------------- */
.color-highlight,
.color-highlight-dark,
.color-highlight-light { color: var(--v2-cyan) !important; }

.bg-highlight,
.bg-highlight-dark,
.bg-highlight-light {
    background: linear-gradient(135deg, var(--v2-cyan) 0%, var(--v2-green) 100%) !important;
    color: var(--v2-bg-0) !important;
}

a { color: var(--v2-cyan); }

/* ---- Buttons -------------------------------------------------------------- */
.btn.bg-highlight,
.btn-full.bg-highlight {
    background: linear-gradient(135deg, var(--v2-cyan) 0%, var(--v2-green) 100%) !important;
    color: var(--v2-bg-0) !important;
    border: 1px solid transparent;
    font-weight: 700;
    box-shadow: var(--v2-glow);
    text-shadow: none;
}
.btn.bg-highlight:hover,
.btn-full.bg-highlight:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 22px rgba(0, 255, 65, 0.4);
}

/* ---- Top header ----------------------------------------------------------- */
.header.header-dark,
.header {
    background: rgba(10, 14, 39, 0.92) !important;
    border-bottom: 1px solid var(--v2-cyan-25);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.header .header-title {
    font-family: var(--v2-font);
    color: var(--v2-text) !important;
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.3);
    letter-spacing: 1px;
    text-transform: lowercase;
}
.header .header-icon i { color: var(--v2-cyan) !important; }

/* Vertically center the menu/bell icons + title regardless of the bar's height.
   The framework centers them via line-height on a fixed 55px height, which
   top-aligns them whenever the bar is actually taller (e.g. the safe-area
   `calc(55px + …)` height rule). Anchoring top→bottom + flex centers them in
   whatever height the bar ends up being. Pages that already look right are
   unchanged (still centered). */
.header .header-icon,
.header .header-title {
    top: calc(env(safe-area-inset-top) * 0.8);
    bottom: 0;
    height: auto;
    margin-top: 0 !important;
    display: flex;
    align-items: center;
}
.header .header-icon { justify-content: center; }

/* ---- Bottom footer-bar (primary nav) -------------------------------------- */
#footer-bar {
    background: rgba(10, 14, 39, 0.96) !important;
    border-top: 1px solid var(--v2-cyan-25);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.5);
}
#footer-bar a {
    color: var(--v2-text-dim) !important;
    font-family: var(--v2-font);
}
#footer-bar a i,
#footer-bar a span { color: var(--v2-text-dim) !important; }
#footer-bar a.active-nav,
#footer-bar a.active-nav i,
#footer-bar a.active-nav span {
    color: var(--v2-cyan) !important;
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
}

/* ---- Slide menus ---------------------------------------------------------- */
.menu,
.menu-box-left,
.menu-box-top {
    background: linear-gradient(135deg, var(--v2-bg-0) 0%, var(--v2-bg-1) 50%, var(--v2-bg-2) 100%) !important;
    color: var(--v2-text-dim);
}
.menu .menu-divider {
    color: var(--v2-cyan) !important;
    border-bottom: 1px solid var(--v2-cyan-25);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}
.menu .list-custom-small a {
    color: var(--v2-text) !important;
    border-bottom: 1px solid rgba(0, 217, 255, 0.08);
}
.menu .list-custom-small a span { color: var(--v2-text) !important; }
.menu .list-custom-small a i:last-child { color: var(--v2-cyan-25) !important; }

/* ---- Cards (mirrors desktop .game-card) ----------------------------------- */
.card {
    background: var(--v2-panel);
    border: 1px solid var(--v2-cyan-25);
    border-radius: 6px;
    box-shadow: var(--v2-glow);
    color: var(--v2-text-dim);
}

/* ---- Dividers ------------------------------------------------------------- */
.divider {
    background: linear-gradient(90deg, transparent, var(--v2-cyan-25), transparent);
    height: 1px;
    border: 0;
}

/* ---- Inputs --------------------------------------------------------------- */
.input-style,
.input-style input,
.input-style select,
.input-style textarea,
.form-control {
    background: var(--v2-panel) !important;
    border: 1px solid var(--v2-cyan-25) !important;
    border-radius: 6px;
    color: var(--v2-text) !important;
    font-family: var(--v2-font);
}
.input-style input::placeholder,
.form-control::placeholder { color: rgba(0, 217, 255, 0.6) !important; }
.input-style input:focus,
.form-control:focus {
    border-color: var(--v2-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.1) !important;
    outline: none;
}
.input-style label,
.input-style em { color: var(--v2-text-dim) !important; }

/* ---- Preloader ------------------------------------------------------------ */
#preloader {
    background: var(--v2-bg-0) !important;
}
#preloader .spinner-border { color: var(--v2-cyan) !important; }

/* ---- Page footer block ---------------------------------------------------- */
.footer {
    background: linear-gradient(135deg, var(--v2-footer-0) 0%, var(--v2-footer-1) 100%) !important;
    border-top: 1px solid var(--v2-cyan-25);
}
.footer h1 { color: var(--v2-text) !important; text-shadow: 0 0 8px rgba(0, 217, 255, 0.3); }