/* ==========================================================================
   LOST ISLE — LOW RULE "NEO" THEME
   Loaded AFTER every page's own inline <style> block (see includes/header.php
   and index.php <head>), so these rules win on source order without needing
   !important almost anywhere. Purpose: replace the semi-realism site's
   red/purple palette with the emerald/mint HUD look on the dashboard + the
   navbar/footer shared by every page via includes/header.php + footer.php.
   Safe by construction — no selectors here touch layout/markup structure or
   JS hooks (ids, onclick, data-* attributes untouched).
   ========================================================================== */

:root {
    --lr-bg:        #050807;
    --lr-mint:      #00e28a;   /* primary accent */
    --lr-mint-2:    #39ffc0;   /* bright glow variant */
    --lr-mint-dim:  #0a4d38;   /* deep/backing tone for gradients */
    --lr-mint-soft: rgba(0, 226, 138, 0.14);
    --lr-mint-line: rgba(0, 226, 138, 0.28);
    --lr-glass:     rgba(9, 18, 16, 0.72);
    --lr-glass-2:   rgba(6, 12, 11, 0.92);
}

::selection { background: rgba(0, 226, 138, 0.32); color: #fff; }

body { background: var(--lr-bg) !important; }

/* ---------------------------------------------------------------------- */
/* Navbar — floating pill, shared by every page (header.php + index.php)  */
/* ---------------------------------------------------------------------- */

.nu-navbar {
    margin: 14px 16px 0;
    top: 14px;
    border-radius: 999px;
    border-bottom: none;
    background: var(--lr-glass-2);
    box-shadow:
        0 0 0 1px var(--lr-mint-line),
        0 0 30px rgba(0, 226, 138, 0.08),
        0 18px 40px rgba(0, 0, 0, 0.55);
}

.nu-navbar::before { opacity: 0.35; }

.nu-navbar::after {
    background: linear-gradient(180deg, rgba(0, 226, 138, 0.10) 0%, rgba(5, 8, 7, 0.96) 100%);
    border-radius: inherit;
}

@media (max-width: 640px) {
    .nu-navbar { margin: 10px 10px 0; border-radius: 26px; }
}

.nu-brand-text span { color: var(--lr-mint); text-shadow: 0 0 12px rgba(0, 226, 138, 0.55); }

.nu-navlink:hover,
.nu-navlink.open { color: #fff; background: rgba(0, 226, 138, 0.10); }

.nu-navlink.active { color: #fff; }

.nu-navlink.active::after {
    background: linear-gradient(90deg, var(--lr-mint), var(--lr-mint-2));
    box-shadow: 0 0 14px rgba(0, 226, 138, 0.65);
}

.nu-coin {
    background: rgba(0, 226, 138, 0.05);
    border-color: var(--lr-mint-line);
}
.nu-coin img { filter: drop-shadow(0 0 6px rgba(0, 226, 138, 0.35)); }

.nu-bell:hover, .nu-bell.open {
    color: #fff; background: rgba(0, 226, 138, 0.12); border-color: var(--lr-mint-line);
}

.nu-user {
    background: rgba(0, 226, 138, 0.05);
    border-color: var(--lr-mint-line);
}
.nu-user:hover, .nu-user.open { background: rgba(0, 226, 138, 0.12); border-color: rgba(0, 226, 138, 0.4); }
.nu-user img { box-shadow: 0 0 0 2px var(--lr-bg), 0 0 0 3px var(--lr-mint); border-radius: 50%; }
.nu-user-info span {
    background: rgba(0, 226, 138, 0.16);
    border-color: var(--lr-mint-line);
    color: var(--lr-mint-2);
}

/* "Online" presence dot over the avatar, added purely via CSS — matches the
   reference's status dot without touching any markup/JS. Anchored to the
   button itself (position:relative added here), not just its wrapper. */
.nu-user { position: relative; }
.nu-user::after {
    content: '';
    position: absolute;
    left: 25px;
    top: 25px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--lr-mint);
    box-shadow: 0 0 8px rgba(0, 226, 138, 0.85), 0 0 0 2px var(--lr-glass-2);
    pointer-events: none;
}

.nu-dropdown {
    background: linear-gradient(180deg, #0d1613, #06100d);
    border-color: rgba(0, 226, 138, 0.16);
}
.nu-dropdown-link:hover { background: rgba(0, 226, 138, 0.08); color: #fff; }

/* ---------------------------------------------------------------------- */
/* Footer — shared by every page                                          */
/* ---------------------------------------------------------------------- */

.nu-footer-links a:hover { color: var(--lr-mint) !important; }
.nu-footer-social a:hover { color: #fff; background: var(--lr-mint); border-color: var(--lr-mint); }

/* ==========================================================================
   DASHBOARD (index.php only) — hero, status/quest cards, battle pass badge
   ========================================================================== */

.nu-hero {
    border-color: rgba(0, 226, 138, 0.16);
    box-shadow: 0 0 0 1px rgba(0, 226, 138, 0.08), 0 30px 80px rgba(0, 0, 0, 0.55);
    /* The page's own image_hero_dashboard.jpg never exists on disk (only a
       .png) on either site, so that layer always silently 404s and the hero
       was actually falling through to background.png by accident. Pointed
       at battlepass_banner.png per request (also used as the Battle Pass
       page's own default banner, but only ever shown there when no season
       banner_path is set, so overlap with the dashboard is unlikely). */
    background-image:
        radial-gradient(circle at 18% 20%, rgba(0, 226, 138, 0.12), transparent 42%),
        linear-gradient(0deg, rgba(0,0,0,0.55), transparent 45%),
        linear-gradient(90deg, rgba(5,8,7,0.97) 0%, rgba(5,8,7,0.82) 28%, rgba(5,8,7,0.34) 58%, rgba(5,8,7,0.06) 82%),
        url('/assets/battlepass_banner.png'),
        url('/assets/background.png');
}

.nu-hero-kicker {
    background: rgba(0, 226, 138, 0.08);
    border-color: var(--lr-mint-line);
    color: var(--lr-mint-2);
}

.nu-hero p { color: #b7c2be; }

.nu-btn.primary {
    background: linear-gradient(120deg, #00b571 0%, #00e28a 55%, #39ffc0 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset -14px 0 14px -10px rgba(0,0,0,0.28);
    filter: drop-shadow(0 14px 28px rgba(0, 178, 110, 0.4)) drop-shadow(0 0 18px rgba(0, 226, 138, 0.4));
    color: #04140d;
    text-shadow: none;
}
.nu-btn.primary svg { fill: #04140d; }
.nu-btn.primary:hover {
    filter: brightness(1.06) drop-shadow(0 14px 28px rgba(0, 178, 110, 0.48)) drop-shadow(0 0 24px rgba(0, 226, 138, 0.5));
}

.nu-btn.ghost:hover { background: rgba(0, 226, 138, 0.08); border-color: var(--lr-mint-line); }

/* "Tickets" and other brand-colored ghost buttons keep a neutral dark pill
   here instead of the old purple, matching the reference's flat ghost pills. */
.nu-btn.ghost.tickets {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    box-shadow: none;
}
.nu-btn.ghost.tickets:hover {
    background: rgba(0, 226, 138, 0.08);
    border-color: var(--lr-mint-line);
    box-shadow: none;
    filter: none;
}

.nu-card {
    background: var(--lr-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(0, 226, 138, 0.14);
    border-radius: 22px;
}

.nu-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 226, 138, 0.55), transparent);
}

.nu-pill.live,
.nu-status-pill.online {
    color: var(--lr-mint-2);
    background: rgba(0, 226, 138, 0.10);
    border-color: var(--lr-mint-line);
}

.nu-card-link { color: var(--lr-mint-2); }

.nu-sparkline polyline {
    stroke: var(--lr-mint);
    filter: drop-shadow(0 0 5px rgba(0, 226, 138, 0.6));
}

.nu-pvp-rank-gap-fill,
.nu-quest-progress-fill {
    background: linear-gradient(90deg, var(--lr-mint-dim), var(--lr-mint));
}
.nu-quest.done { border-color: var(--lr-mint-line); background: rgba(0, 226, 138, 0.05); }
.nu-quest.done .nu-quest-check { background: rgba(0, 226, 138, 0.16); color: var(--lr-mint); }
.nu-quest.done .nu-quest-progress-fill { background: linear-gradient(90deg, #059669, var(--lr-mint-2)); }

.nu-hex {
    background: linear-gradient(145deg, var(--lr-mint-dim), var(--lr-mint));
    box-shadow: 0 14px 30px rgba(0, 226, 138, 0.35), 0 0 24px rgba(0, 226, 138, 0.25);
}

.nu-guest-card .nu-btn.primary { color: #04140d; }

/* Small CTA pills used throughout the dashboard cards (e.g. "View Details",
   "Read Full Patch Notes", "View Status Page", "Download Voice App"). */
.nu-btn.small {
    color: #04140d;
    background: linear-gradient(120deg, #39ffc0 0%, #00e28a 50%, #00b571 100%);
    box-shadow: 0 12px 24px rgba(0, 178, 110, 0.32), inset 0 1px 0 rgba(255,255,255,0.3);
}

.nu-btn.ghost.small {
    color: var(--lr-mint-2);
    background: rgba(0, 226, 138, 0.08);
    box-shadow: none;
    border: 1px solid var(--lr-mint-line);
}

.nu-dots span.active { background: linear-gradient(90deg, var(--lr-mint), var(--lr-mint-2)); }

.nu-social-tab.active { color: #fff; background: rgba(0, 226, 138, 0.16); border-color: var(--lr-mint-line); }

.nu-pvp-champion {
    background: rgba(0, 226, 138, 0.06);
    border-color: var(--lr-mint-line);
    color: var(--lr-mint-2);
}

.nu-icon-badge {
    color: var(--lr-mint-2);
    background: rgba(0, 226, 138, 0.08);
    border-color: rgba(0, 226, 138, 0.5);
    box-shadow: 0 0 0 4px rgba(0, 226, 138, 0.07), 0 10px 22px rgba(0, 226, 138, 0.18);
}

.nu-voice-beta { background: rgba(0, 226, 138, 0.14); border-color: var(--lr-mint-line); color: var(--lr-mint-2); }

.nu-waveform span { background: linear-gradient(180deg, var(--lr-mint-2), rgba(0, 226, 138, 0.35)); }

/* ==========================================================================
   LIVE DINO (live-dino.php) — the "Park" / positive side of the console goes
   green; "Slay" stays red (--ld-red untouched — destructive action). The
   3-state status pill (waiting=amber, online=green, offline=red) is kept:
   --ld-orange-* is shared with the "waiting" pill so it is NOT redefined
   here, only the specific green-bound rules are overridden individually.
   ========================================================================== */

:root {
    --ld-amber-1: var(--lr-mint-2);
    --ld-amber-2: var(--lr-mint);
    --ld-amber-3: var(--lr-mint-dim);
    --ld-bg-card: #0d1613;
}

.btn-refresh:hover { background: rgba(0, 226, 138, 0.12); border-color: rgba(0, 226, 138, 0.32); }
.dino-card { border-color: rgba(0, 226, 138, 0.12); }

.status-online { background: rgba(0, 226, 138, 0.12); border-color: rgba(0, 226, 138, 0.3); }
.console-tab.active-park { background: rgba(0, 226, 138, 0.14); }
.btn-park-active { box-shadow: 0 10px 22px rgba(0, 226, 138, 0.3); }
.task-box.done { border-color: rgba(0, 226, 138, 0.3); background: rgba(0, 226, 138, 0.07); }

/* --ld-orange-* stays amber (shared with .status-waiting), so these two get
   an explicit green override instead of a shared-variable redefinition. */
.prime-pill.ready {
    color: var(--lr-mint);
    background: rgba(0, 226, 138, 0.1);
    border-color: rgba(0, 226, 138, 0.28);
}
.btn-force-prime {
    background: linear-gradient(120deg, var(--lr-mint-2) 0%, var(--lr-mint) 50%, var(--lr-mint-dim) 100%);
    box-shadow: 0 10px 22px rgba(0, 226, 138, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.mini-map-dot {
    background: var(--lr-mint);
    box-shadow: 0 0 15px var(--lr-mint), 0 0 30px rgba(0, 226, 138, 0.5);
}
.mut-tag-slot { background: rgba(0, 226, 138, 0.16); }

/* ==========================================================================
   INVENTORY (inventory.php) — same "chrome accent -> green" treatment. Per-
   item RARITY colors (Common/Rare/Epic/Legendary/Apex/Glitched/Battlepass,
   driven by --card-color) are DATA, not theme, and are left untouched, as
   are the utility action colors (info=cyan, merge=cyan, split=purple,
   delete=red) and the gold lootbox reel.
   ========================================================================== */

:root {
    --iv-amber-1: var(--lr-mint-2);
    --iv-amber-2: var(--lr-mint);
    --iv-amber-3: var(--lr-mint-dim);
    --iv-bg-card: #0d1613;
}

.inv-search-input:focus { border-color: rgba(0, 226, 138, 0.4); }
.filter-btn.active,
.filter-btn.fav-filter.active { box-shadow: 0 6px 16px rgba(0, 226, 138, 0.22); }
.btn-species-order:hover,
.species-order-row .sp-move-btn:hover:not(:disabled) {
    background: rgba(0, 226, 138, 0.14);
    border-color: rgba(0, 226, 138, 0.32);
}
.view-toggle-btn.active { background: rgba(0, 226, 138, 0.16); }
.subfilter-chip.active { background: rgba(0, 226, 138, 0.15); border-color: rgba(0, 226, 138, 0.4); }

.card-note { background: rgba(0, 226, 138, 0.08); border-color: rgba(0, 226, 138, 0.22); }
.btn-favorite:hover,
.btn-favorite.active { border-color: rgba(0, 226, 138, 0.4); background: rgba(0, 226, 138, 0.12); }
.card-side-actions .btn-note { background: rgba(0, 226, 138, 0.1); border-color: rgba(0, 226, 138, 0.3); }
.card-side-actions .btn-note:hover,
.btn-note:hover {
    background: var(--lr-mint-2);
    border-color: var(--lr-mint-2);
    box-shadow: 0 6px 14px rgba(0, 226, 138, 0.3);
}

.pattern-btn:hover { box-shadow: 0 10px 20px rgba(0, 226, 138, 0.3); }
.note-input:focus { border-color: rgba(0, 226, 138, 0.5); box-shadow: 0 0 0 3px rgba(0, 226, 138, 0.1); }
.mutation-fix-option:hover { background: rgba(0, 226, 138, 0.08); border-color: rgba(0, 226, 138, 0.35); }
.mutation-fix-option.selected { background: rgba(0, 226, 138, 0.12); }

/* .mini-map-dot is shared by name with live-dino.php's own version above —
   same green-dot treatment applies here too, nothing further needed. */
.prime-badge-ready { background: linear-gradient(90deg, rgba(0, 226, 138, 0.15), transparent); }
.task-badge.done { background: rgba(0, 226, 138, 0.1); border-color: rgba(0, 226, 138, 0.3); }
