/* Anti-flash: main is invisible until JS routes to the correct section */
main { opacity: 0; }
main.app-ready { opacity: 1; transition: opacity 120ms ease; }

/* Profile popup */
.profile-popup{position:fixed;right:8px;top:54px;z-index:500;min-width:186px;padding:6px 0;border:1px solid rgba(255,181,43,0.22);background:#000;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 20px 60px rgba(0,0,0,0.95),0 0 0 1px rgba(255,181,43,0.08),0 0 24px rgba(255,255,255,0.06);border-radius:14px}
.profile-popup a{display:block;padding:12px 18px;color:rgba(255,255,255,0.82);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.4px;border-bottom:1px solid rgba(255,255,255,0.06);white-space:nowrap;transition:background 0.15s,color 0.15s}
.profile-popup a:first-child{border-radius:14px 14px 0 0}
.profile-popup a:last-child{border-bottom:0;border-radius:0 0 14px 14px}
.profile-popup a:hover{background:rgba(255,255,255,0.06);color:#fff}
.profile-popup .popup-signout{color:rgba(255,72,104,0.85)}
.profile-popup .popup-signout:hover{background:rgba(255,72,104,0.08);color:#ff4868}

/* ═══════════════════════════════════════════════════════════════════
   GLASSMORPHISM — frosted glass for all panels, cards, and surfaces
═══════════════════════════════════════════════════════════════════ */

/* Remove corner-bracket pseudo-element decorations (both ::before and ::after)
   Exclude profile-command which uses ::before for its banner gradient overlay */
.panel:not(.profile-command)::before,
.panel:not(.profile-command)::after,
.terminal-panel::before,
.terminal-panel::after,
.market-card::before,
.market-card::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Restore the profile-command gradient overlay that the above rule would otherwise kill */
.profile-command::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(5,1,12,.88) 0%, rgba(5,1,12,.55) 35%, rgba(5,1,12,.15) 65%, rgba(5,1,12,.05) 100%) !important;
    opacity: 1 !important;
}

/* Profile banner — crisp GIF, no glass tint, no hover glow
   .panel.profile-command uses 2-class specificity to beat .panel regardless of order */
.panel.profile-command,
.panel.profile-command:hover {
    background: #05010c !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.38) !important;
    border-color: rgba(185, 68, 255, 0.08) !important;
}
.profile-banner-media {
    opacity: 1 !important;
}

/* Core panels */
.panel,
.terminal-panel,
.market-card,
.faction-card {
    background: rgba(12, 4, 24, 0.48) !important;
    backdrop-filter: blur(18px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    border: 1px solid rgba(185, 68, 255, 0.08) !important;
    border-radius: 18px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

.panel:hover,
.terminal-panel:hover,
.market-card:hover,
.faction-card:hover {
    border-color: rgba(185, 68, 255, 0.22) !important;
    box-shadow:
        0 14px 44px rgba(0, 0, 0, 0.48),
        0 0 28px rgba(185, 68, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
}

/* Metric cards: glass base, tone glow preserved */
.metric,
.profile-metric-row .metric,
.killfeed-highlights .metric,
.hq-metrics .metric,
.leaderboard-summary .metric {
    background: rgba(12, 4, 24, 0.48) !important;
    backdrop-filter: blur(18px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    border-radius: 16px !important;
    box-shadow:
        0 0 20px color-mix(in srgb, var(--tone-glow) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 22px color-mix(in srgb, var(--tone-glow) 6%, transparent) !important;
}

.metric:hover,
.profile-metric-row .metric:hover,
.killfeed-highlights .metric:hover,
.hq-metrics .metric:hover,
.leaderboard-summary .metric:hover {
    transform: none !important;
}

/* Color-toned panel borders — very subtle, glass-style */
.teal-panel {
    border-color: rgba(37, 232, 210, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.38), 0 0 22px rgba(37,232,210,.06), inset 0 1px 0 rgba(37,232,210,.06) !important;
}
.teal-panel:hover { border-color: rgba(37, 232, 210, 0.22) !important; }

.orange-panel {
    border-color: rgba(255, 125, 56, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.38), 0 0 22px rgba(255,125,56,.06), inset 0 1px 0 rgba(255,125,56,.06) !important;
}
.orange-panel:hover { border-color: rgba(255, 125, 56, 0.22) !important; }

.cyan-panel {
    border-color: rgba(22, 216, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.38), 0 0 22px rgba(22,216,255,.06), inset 0 1px 0 rgba(22,216,255,.06) !important;
}
.cyan-panel:hover { border-color: rgba(22, 216, 255, 0.22) !important; }

.red-panel,
.live-feed {
    border-color: rgba(255, 72, 104, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.38), 0 0 22px rgba(255,72,104,.06), inset 0 1px 0 rgba(255,72,104,.06) !important;
}

/* Panel h2 — subtle glow restored (overrides refinements.css text-shadow:none) */
.panel h2,
.terminal-panel h2,
.market-card h2 {
    text-shadow: 0 0 22px rgba(185, 68, 255, 0.32) !important;
    filter: none !important;
}
.teal-panel h2 { text-shadow: 0 0 22px rgba(37,232,210,.32) !important; }
.orange-panel h2 { text-shadow: 0 0 22px rgba(255,125,56,.32) !important; }
.cyan-panel h2 { text-shadow: 0 0 22px rgba(22,216,255,.32) !important; }

/* Notification drawer */
.notification-drawer {
    background: rgba(10, 3, 22, 0.7) !important;
    backdrop-filter: blur(22px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
    border: 1px solid rgba(185, 68, 255, 0.28) !important;
    border-radius: 18px !important;
    box-shadow:
        0 16px 52px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Individual notification items */
.notification-item {
    border-radius: 12px !important;
    background: rgba(185, 68, 255, 0.05) !important;
    border: 1px solid rgba(185, 68, 255, 0.1) !important;
    transition: background 150ms ease, border-color 150ms ease !important;
}
.notification-item:hover {
    background: rgba(185, 68, 255, 0.1) !important;
    border-color: rgba(185, 68, 255, 0.22) !important;
}
.notification-item.unread {
    border-left: 3px solid var(--cyan) !important;
    background: rgba(22, 216, 255, 0.06) !important;
}

/* Profile editor dialog */
.profile-editor {
    background: rgba(8, 2, 16, 0.88) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    border: 1px solid rgba(185, 68, 255, 0.45) !important;
    border-radius: 20px !important;
}

/* Public faction dialog */
.public-faction-dialog,
.faction-dialog {
    background: rgba(8, 2, 18, 0.82) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    border: 1px solid rgba(185, 68, 255, 0.38) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Faction card member row items */
.public-faction-member {
    border-radius: 10px !important;
    transition: background 150ms ease !important;
}
.public-faction-member:hover {
    background: rgba(185, 68, 255, 0.07) !important;
}

/* HQ section headings */
.hq-section-heading {
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(22,216,255,.09), rgba(185,68,255,.05), transparent) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Faction chat panel override */
.faction-chat-panel {
    background: rgba(7, 5, 20, 0.62) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    border: 1px solid rgba(70, 175, 255, 0.25) !important;
}
.faction-chat-messages {
    background: rgba(1, 4, 12, 0.58) !important;
    border-radius: 12px !important;
}

/* Faction chat message bubbles */
.faction-chat-message {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255,255,255,.04) !important;
    border-radius: 12px !important;
}
.faction-chat-message:nth-child(2n) {
    background: rgba(22, 216, 255, 0.035) !important;
}