/* DemonGaming.net — iOS-style frosted glass panels
   Translucent panels with a blurred backdrop so the particle background
   shows through softly. Apply <... class="glass"> to any panel, or rely on
   the class/id list below which covers the site's existing panels.
   Loaded AFTER the main stylesheet so these rules win. */

/* Monospace face for the OBSCURA-style terminal annotations (// labels, data
   readouts). Kept as an @import so it stays the FIRST statement in the file
   (CSS requires @import before any rule). Degrades to a system mono stack. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* --- Site font (NoScary) — match the main website's font on EVERY page --- */
@font-face {
    font-family: 'NoScary';
    src: url('../fonts/NoScaryregular.woff2') format('woff2'),
         url('../fonts/NoScaryregular.woff') format('woff'),
         url('../fonts/NoScaryregular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Anurati';
    src: url('../fonts/Anurati-Regular.otf') format('opentype');
    font-display: swap;
}
/* Headings, buttons and accent text use the signature font (like the main site).
   Body/table text stays in a readable sans so data pages remain legible. */
h1, h2, h3, h4, h5, h6,
.btn, .button, button,
.game-button, .steam-btn, .back-btn, .redeem-btn,
.colored, .colored-title, .section-title {
    font-family: 'NoScary', sans-serif !important;
}

/* ============================================================================
   DESIGN TOKENS — one source of truth (HYBRID theme: white-glow UI + red accent)
   UI surfaces/borders/text are monochrome white-on-black with a SUBTLE white
   glow; blood red is reserved for primary actions, danger and highlights.
   Re-skin the whole site by editing these. NOTE: --dg-accent / --dg-accent-soft
   / --dg-accent-faint are set at runtime by dg-experience.js from
   DG_ANIM.accent (blood red everywhere; purple on DayZ-Content) — leave those to
   the JS; the tokens below are the static monochrome UI layer.
   ============================================================================ */
:root {
    --dg-ui-border:        rgba(255, 255, 255, 0.14);
    --dg-ui-border-strong: rgba(255, 255, 255, 0.40);
    --dg-glow:             rgba(255, 255, 255, 0.10);
    --dg-glow-strong:      rgba(255, 255, 255, 0.22);
    --dg-surface:          rgba(20, 21, 26, 0.55);
    --dg-text:             #dadada;   /* OBSCURA main text */
    --dg-muted:            #999999;   /* OBSCURA secondary text */
    --dg-ring:             rgba(255, 255, 255, 0.75);
    --dg-bg:               #000000;   /* pure black (owner: darkest it can go) */
    --dg-mono:             'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;
}

/* --- Full-page particle background: reveal it on EVERY page (the shop.php look) ----
   The legacy Strider stylesheet paints an opaque html/body background (#111 + bg.png)
   that buried the particle field on most pages. shop.php happened to escape it; the
   rest didn't. Force the page surface transparent and pin the particle canvas as the
   fixed, full-viewport, z-index:-1 backdrop so the particles always show through. */
html { background: #000000 !important; }          /* base black layer — so hiding the particle canvas never exposes white */
body { background: transparent !important; }
#particles-web, #particles-dashboard {
    position: fixed !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1 !important;
    background: #000000 !important;
    display: none !important;   /* OBSCURA: no particles on inner pages (pure black). DayZ-Content re-shows its purple; landing uses the forest canvas. */
}
/* Heroes must not paint an opaque fill over the particle backdrop */
#hero-section, .hero-section, .hero-unit {
    background: transparent !important;
    background-image: none !important;
}

/* Navbar brand logo: keep it small + inline with the nav links.
   The source images are 1024px, so without a cap the logo blows the navbar up. */
.navbar-brand img, #logo img {
    height: 44px !important;
    width: auto !important;
}

/* Fixed navbars: give them a solid dark frosted bar so page content doesn't
   bleed through behind the links as you scroll (was transparent -> messy). */
.navbar.fixed-top, #main-header .navbar, .header-nav, .tools-nav {
    background: rgba(8, 8, 11, 0.82) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid var(--dg-panel-edge, rgba(255, 255, 255, 0.14)) !important;
}
/* Anchor jumps land below the fixed bar, not under it */
:target { scroll-margin-top: 84px; }

/* NOTE: the sharp-square-corners + accent-border overrides live at the END of
   this file — they MUST come after the frosted-panel block below (which sets
   border-radius:18px) so the square override actually wins. */

.glass,
.job-card,
.case-card,
.game-card,
.content-section,
.item-card,
.login-card,
.user-info,
.section,
.steam-section,
.user-keys-display,
.pending-requests,
.empty-state,
.discord-info,
.case-opener-nav,
.info-box,
.stat-card {
    background: rgba(10, 10, 12, 0.55) !important;   /* OBSCURA matte near-black glass — atmosphere still shows through */
    -webkit-backdrop-filter: blur(22px) saturate(175%);
    backdrop-filter: blur(22px) saturate(175%);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Nested highlight boxes inside a glass panel: keep them lighter, no double blur */
.glass .glass,
.glass .inner-box {
    background: rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
}

/* Subtle edge brighten on hover for interactive cards (pairs with the GSAP hover) */
.glass:hover,
.job-card:hover,
.case-card:hover,
.game-card:hover,
.item-card:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Graceful fallback: if the browser can't blur, lean a bit more opaque so text stays readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass,
    .job-card, .case-card, .game-card, .content-section, .item-card,
    .login-card, .user-info, .section, .steam-section, .user-keys-display,
    .pending-requests, .empty-state, .discord-info, .case-opener-nav,
    .info-box, .stat-card {
        background: rgba(24, 26, 33, 0.92) !important;
    }
}

/* --- Sticky footer ---------------------------------------------------------
   Keep the ToS / copyright footer pinned to the bottom of the page, even when
   the content is shorter than the viewport. The <footer> is a direct child of
   <body> on every page, so making <body> a full-height flex column and giving
   the footer margin-top:auto pushes it to the bottom (and it still flows after
   content on long pages). */
html {
    min-height: 100%;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > footer {
    margin-top: auto !important;      /* push to the bottom of the page */
    opacity: 1 !important;            /* belt-and-suspenders: never let JS hide the */
    visibility: visible !important;   /* legal/ToS footer (overrides any stale reveal) */
}

/* ============================================================================
   SHARP SQUARE CORNERS + ACCENT BORDERS  (kept LAST so it beats the frosted
   block above, which otherwise re-rounds .glass/.game-card/etc.)
   Every panel / card / button / input gets hard corners. `!important` here also
   beats inline `style="border-radius:..."`. Panel EDGES are now the monochrome
   white-glow UI layer (var(--dg-ui-border) + a subtle glow); blood red is kept
   for actions/danger, not surfaces.
   ============================================================================ */
.glass, .card, .filter-box,
[class*="card"], [class*="panel"], [class*="box"], [class*="section"],
.login-card, .user-info, .user-keys-display, .pending-requests, .empty-state,
.discord-info, .case-opener-nav, .stat-card, .steam-section, .content-section,
.job-card, .case-card, .game-card, .item-card, .info-box,
.header, .header-nav, .nav-bar, .navbar, .modal-content, .gallery-item,
.btn, .button, button, .game-button, .steam-btn, .back-btn, .redeem-btn,
input, select, textarea {
    border-radius: 0 !important;
}

/* Clean white-edge panels (matte; NO soft glow — that read as AI). A plain
   white frame like the buttons + a dark drop shadow for depth. Blood red is for
   ACTIONS, not surfaces. DayZ-Content re-purples its own panels (see that page). */
.glass, .job-card, .case-card, .game-card, .content-section, .item-card,
.login-card, .user-info, .section, .steam-section, .user-keys-display,
.pending-requests, .empty-state, .discord-info, .case-opener-nav,
.info-box, .stat-card, .filter-box {
    border: 1px solid var(--dg-panel-edge, rgba(255, 255, 255, 0.20)) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}
.glass:hover, .job-card:hover, .case-card:hover, .game-card:hover, .item-card:hover {
    border-color: var(--dg-panel-edge-strong, rgba(255, 255, 255, 0.42)) !important;
}

/* Intentionally circular elements stay round. */
.identity-avatar, .dg-cursor-dot, .dg-cursor-ring, .dg-loader-spinner,
img.avatar, .user-avatar, .steam-avatar, .discord-avatar, .pfp {
    border-radius: 50% !important;
}

/* ============================================================================
   UNIFIED BUTTON SYSTEM (hybrid: mono white-glow ghost by default, blood red for
   actions). Targets the site's button CLASSES only — NOT bare <button> — so the
   music player, user badge and nav toggles keep their own styling. Pages that
   define their own .btn CSS (e.g. the admin panel) load it after glass.css and
   intentionally override. Add a variant class (.btn-primary / .btn-danger /
   .btn-success) for coloured actions.
   ============================================================================ */
.btn, .button, .game-button, .steam-btn, .back-btn, .redeem-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--dg-text, #f2f2f5) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--dg-ui-border-strong, rgba(255, 255, 255, 0.4)) !important;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover, .button:hover, .game-button:hover,
.steam-btn:hover, .back-btn:hover, .redeem-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    box-shadow: 0 8px 26px var(--dg-glow-strong, rgba(255, 255, 255, 0.22)) !important;
}
.btn:active, .button:active, .game-button:active,
.steam-btn:active, .back-btn:active, .redeem-btn:active { transform: translateY(0); }
.btn:focus-visible, .button:focus-visible, .game-button:focus-visible,
.steam-btn:focus-visible, .back-btn:focus-visible, .redeem-btn:focus-visible {
    outline: 2px solid var(--dg-ring, rgba(255, 255, 255, 0.75));
    outline-offset: 2px;
}

/* Hero menu buttons: larger, with a blood-red edge + glow on hover (brand punch). */
.game-button {
    min-height: 58px;
    padding: 16px 36px;
    font-size: clamp(18px, 2.1vw, 23px);
    min-width: 300px;
    letter-spacing: 1px;
}
.game-button:hover {
    border-color: var(--dg-accent, #c00000) !important;
    box-shadow: 0 10px 32px var(--dg-accent-glow, rgba(200, 0, 0, 0.42)) !important;
}

/* Variants — add the class to the element. */
.btn-primary, .dg-primary, .game-button.primary, .redeem-btn {
    background: var(--dg-accent, #c00000) !important;
    border-color: var(--dg-accent, #c00000) !important;
    color: #fff !important;
}
.btn-primary:hover, .dg-primary:hover, .game-button.primary:hover, .redeem-btn:hover {
    box-shadow: 0 8px 26px var(--dg-accent-glow, rgba(200, 0, 0, 0.42)) !important;
}
.btn-danger, .btn.btn-danger, .btn.danger {
    background: rgba(200, 0, 0, 0.16) !important;
    border-color: rgba(255, 60, 60, 0.6) !important;
    color: #ff9a9c !important;
}
.btn-success, .btn.btn-success, .btn.success {
    background: rgba(87, 242, 135, 0.14) !important;
    border-color: rgba(87, 242, 135, 0.6) !important;
    color: #86f2a8 !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn, .button, .game-button, .steam-btn, .back-btn, .redeem-btn { transition: none; }
    .btn:hover, .game-button:hover, .button:hover { transform: none; }
}

/* ============================================================================
   UNIFIED FORM CONTROLS + GLOBAL POLISH (Chunk 3)
   One dark input/select/textarea treatment site-wide (text-like inputs only —
   range/checkbox/radio keep native/other styling). Plus cohesive details:
   accent text-selection, a dark custom scrollbar, and dark native controls.
   ============================================================================ */
html { color-scheme: dark; scrollbar-color: rgba(255, 255, 255, 0.22) #0a0a0d; scrollbar-width: thin; }

input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
select, textarea {
    background: rgba(0, 0, 0, 0.42) !important;
    color: var(--dg-text, #f2f2f5) !important;
    border: 1px solid var(--dg-ui-border, rgba(255, 255, 255, 0.14)) !important;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
    border-color: var(--dg-accent, #c00000) !important;
    box-shadow: 0 0 0 2px var(--dg-accent-glow, rgba(200, 0, 0, 0.35)) !important;
}
::placeholder { color: #6f6f77 !important; opacity: 1; }

/* Accent text selection */
::selection { background: var(--dg-accent, #c00000); color: #fff; }
::-moz-selection { background: var(--dg-accent, #c00000); color: #fff; }

/* Dark custom scrollbar (WebKit) — thumb brightens to blood red on hover */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0a0a0d; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border: 3px solid #0a0a0d; }
::-webkit-scrollbar-thumb:hover { background: var(--dg-accent, #c00000); }

/* Mobile tap polish: kill the 300ms delay + set an intentional accent tap flash. */
a, button, .btn, .button, .game-button, [role="button"], input, select, textarea, label {
    -webkit-tap-highlight-color: rgba(200, 0, 0, 0.18);
    touch-action: manipulation;
}

/* ============================================================================
   OBSCURA HYBRID LAYER — terminal / technical-annotation motif
   Additive utilities (no existing markup is required to change). Drop these
   classes onto section eyebrows, stat readouts and cards to get the OBSCURA
   "system registry" look while the marker headings + dark-red accent stay.
     .dg-anno            -> mono uppercase eyebrow with a red "//" prefix
     .dg-anno--rule      -> same, but a hairline rule fills the rest of the row
     .dg-mono            -> force the mono face (stat numbers, codes, IDs)
     .dg-frame           -> hairline red corner ticks on a panel/card (terminal frame)
   Uses the design tokens above, so it re-skins from :root like everything else.
   ============================================================================ */
.dg-anno {
    font-family: var(--dg-mono);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dg-muted, #999);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dg-anno::before {
    content: "//";
    color: var(--dg-accent, #8b0000);
    font-weight: 700;
}
.dg-anno--rule { display: flex; width: 100%; }
.dg-anno--rule::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: 4px;
    background: var(--dg-ui-border, rgba(255, 255, 255, 0.14));
}

.dg-mono {
    font-family: var(--dg-mono) !important;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

.dg-frame { position: relative; }
.dg-frame::before, .dg-frame::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    pointer-events: none;
    border: 1px solid var(--dg-accent, #8b0000);
}
.dg-frame::before { top: -1px;  left: -1px;  border-right: 0; border-bottom: 0; }
.dg-frame::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

/* Accent titles (.colored) follow the page ACCENT token instead of a hardcoded
   bright #dc3545 (style.css) / #8c00ff (styleP2). Now blood red on red pages,
   purple on DayZ-Content — one source of truth. */
.colored, .colored-title { color: var(--dg-accent, #8b0000) !important; }

/* Current-page indicator for nav links (put class="dg-active" on the current
   page's link). Named dg-active to dodge Bootstrap's own .active styling. */
.nav-link.dg-active, .nav-links a.dg-active, .tools-nav a.dg-active {
    color: var(--dg-accent, #8b0000) !important;
    border-bottom: 1px solid var(--dg-accent, #8b0000);
}

/* ============================================================================
   UNIFIED TOP NAV (2026-07-01) — one look for every page's top bar, modeled on
   the dayz-tools bar the owner liked: single-line links (no wrapping), CENTERED
   on desktop, logo left, the floating user badge owns the top-right corner.
   Covers all three nav systems: Bootstrap .navbar (dayz/shop/DayZ-Content),
   .header-nav .nav-links (case-opener/tos), and .tools-nav (dayz-tools).
   Mobile (<992px) keeps each nav's own collapse/hamburger behavior untouched.
   ============================================================================ */
.navbar .nav-link, .header-nav .nav-links a, .tools-nav a {
    white-space: nowrap !important;
    font-size: 15px !important;
    letter-spacing: 0.8px;
    line-height: 1.2;
    padding: 8px 13px !important;
}
@media (min-width: 992px) {
    /* Bootstrap navbars: center the link list between the brand and the badge */
    .navbar .navbar-nav {
        margin-left: auto !important;
        margin-right: auto !important;
        flex-wrap: nowrap;
        align-items: center;
    }
    /* custom flex navs: center their link rows */
    .header-nav .nav-links { justify-content: center !important; flex-wrap: nowrap !important; }
    /* dayz-tools keeps its links in a .links child with margin-left:auto —
       override BOTH margins so the row centers between the logo and the badge */
    .tools-nav .links { margin-left: auto !important; margin-right: auto !important; flex-wrap: nowrap !important; }
    /* keep clear of the fixed top-right user badge */
    .navbar .navbar-nav, .header-nav .nav-links, .tools-nav .links { padding-right: 56px; }
}

/* UNIFIED CONTENT WIDTH: every page's main column matches the dashboard's
   (1320px) so side margins read the same site-wide. Beats Bootstrap's 1140px
   .container cap and the ToS page's 1200px .main-container. */
@media (min-width: 1200px) {
    .container, .main-container { max-width: 1320px !important; }
}

/* ============================================================================
   THE NAV (.dg-nav) — the ONE top bar for every page, modeled on the
   case-opener's (owner: "this one is the best by far"). Logo far left,
   mono-uppercase icon links centered, white hairline bottom, 64px tall so the
   fixed top-right user badge floats centered. Markup:
     <nav class="dg-nav">
       <a class="dg-nav-brand" href="/index.php"><img src="/images/play.png" alt="Demon Gaming"></a>
       <div class="dg-nav-links">
         <a href="..."><i class="fas fa-..."></i><span>Label</span></a> ...
       </div>
     </nav>
   Current page's link gets class "dg-active". Pages must clear the bar with
   ~84px top padding on their first content block. Icons read --dg-accent, so
   DayZ-Content's purple applies automatically.
   ============================================================================ */
.dg-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 10px 18px;              /* 10+44+10 = 64px tall, same as the badge math */
    background: rgba(8, 8, 11, 0.82);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid var(--dg-ui-border, rgba(255, 255, 255, 0.14)) !important;
}
.dg-nav-brand { flex: none; display: flex; align-items: center; }
.dg-nav-brand img { height: 44px !important; width: auto !important; display: block; }
.dg-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
    margin: 0 auto;
    padding-right: 56px;             /* clearance for the fixed user badge */
}
.dg-nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dg-mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dg-muted, #999);
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.dg-nav-links a i { color: var(--dg-accent, #8b0000); }
.dg-nav-links a:hover {
    color: var(--dg-text, #dadada);
    border-color: var(--dg-ui-border, rgba(255, 255, 255, 0.14));
}
.dg-nav-links a.dg-active {
    color: var(--dg-accent, #8b0000) !important;
    border-bottom: 1px solid var(--dg-accent, #8b0000);
}
@media (max-width: 900px) {
    .dg-nav { padding: 10px 10px; }
    .dg-nav-links { gap: 2px; padding-right: 48px; }
    .dg-nav-links a { padding: 8px 10px; }
    .dg-nav-links a span { display: none; }   /* icons only on small screens */
}