:root {
    --neon-green: #39ff14;
    --neon-green-rgb: 57, 255, 20;
    --neon-purple: #bd00ff;
    --neon-purple-rgb: 189, 0, 255;
    /* A deeper, less saturated purple used only for the HDR background compensation below — the
       full-brightness --neon-purple-rgb read too vivid/hot once its alpha got boosted for HDR
       displays, so this trades some of that saturation for depth instead of brightness. Went
       through 90,0,130 first — still read lighter than the SDR reference on a real HDR panel, so
       this went darker again now that the surrounding alpha values (see below) are high enough to
       carry it without the color disappearing the way it did the first time this got darkened. */
    --neon-purple-hdr-rgb: 55, 0, 85;
    --neon-yellow: #fffb00;
    --dark-bg: #060606;
    --dark-card: #121212;
    --dark-card-hover: #1a1a1a;
    --text-color: #ffffff;
    --text-muted: #a0a0a0;
    --border-color: #000000;
    --thick-border: 3px solid #000000;
    --neon-green-border: 3px solid var(--neon-green);
    --neon-purple-border: 3px solid var(--neon-purple);
    --street-shadow: 6px 6px 0px #000000;
    --street-shadow-green: 6px 6px 0px var(--neon-green);
    --street-shadow-purple: 6px 6px 0px var(--neon-purple);
    --bolt-rgb: 220, 235, 255;
    --bolt-glow: #aeefff;
}

/* ── Halloween theme ──────────────────────────────────────────────────────
   Switched on from Admin > Storefront > Halloween Theme. ThemeService drives the
   data-theme attribute on <html> (rendered server-side in App.razor for first paint,
   flipped live by theme.js). Everything themed reads these variables, so the variable
   names keep their default-theme meaning ("neon-green" is the primary accent slot,
   "neon-purple" the secondary) — only the values change here. */
/* <ThemeEmoji> renders both emoji; the theme decides which one is visible. */
.theme-emoji-halloween, .theme-emoji-christmas, .theme-emoji-thanksgiving { display: none; }
:root[data-theme="halloween"] .theme-emoji-default { display: none; }
:root[data-theme="halloween"] .theme-emoji-halloween { display: inline; }
:root[data-theme="christmas"] .theme-emoji-default { display: none; }
:root[data-theme="christmas"] .theme-emoji-christmas { display: inline; }
:root[data-theme="thanksgiving"] .theme-emoji-default { display: none; }
:root[data-theme="thanksgiving"] .theme-emoji-thanksgiving { display: inline; }

:root[data-theme="halloween"] {
    --neon-green: #ff7a00;
    --neon-green-rgb: 255, 122, 0;
    --neon-purple: #a83bff;
    --neon-purple-rgb: 168, 59, 255;
    --neon-purple-hdr-rgb: 62, 0, 100;
    --neon-yellow: #ffc21a;
    --dark-bg: #08050b;
    --dark-card: #150f1a;
    --dark-card-hover: #1e1526;
    --text-muted: #b5a8c2;
    --bolt-rgb: 255, 170, 80;
    --bolt-glow: #ff8a1f;
}

/* ── Christmas theme ──────────────────────────────────────────────────────
   Switched on from Admin > Storefront > Seasonal Themes. Uses a Christmas pine-emerald
   primary accent, festive crimson-red secondary accent, warm gold highlights, a strand
   of twinkling Christmas lights along the header border, and gentle background snow. */
:root[data-theme="christmas"] {
    --neon-green: #22e550;
    --neon-green-rgb: 34, 229, 80;
    --neon-purple: #ff2438;
    --neon-purple-rgb: 255, 36, 56;
    --neon-purple-hdr-rgb: 110, 0, 18;
    --neon-yellow: #ffd700;
    --dark-bg: #050907;
    --dark-card: #0d1511;
    --dark-card-hover: #14201a;
    --text-muted: #a8bdb0;
    --bolt-rgb: 255, 220, 130;
    --bolt-glow: #ffd700;
}

/* Twinkling Christmas string lights along the bottom edge of the sticky header */
:root[data-theme="christmas"] header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 8px;
    pointer-events: none;
    background-image:
        radial-gradient(circle, #ff2438 0 3px, rgba(255, 36, 56, 0.45) 4px, transparent 7px),
        radial-gradient(circle, #22e550 0 3px, rgba(34, 229, 80, 0.45) 4px, transparent 7px),
        radial-gradient(circle, #ffd700 0 3px, rgba(255, 215, 0, 0.45) 4px, transparent 7px),
        radial-gradient(circle, #7ce8ff 0 3px, rgba(124, 232, 255, 0.45) 4px, transparent 7px);
    background-size: 96px 12px;
    background-position: 0 0, 24px 0, 48px 0, 72px 0;
    background-repeat: repeat-x;
    animation: christmas-lights-twinkle 2.8s ease-in-out infinite alternate;
}

@keyframes christmas-lights-twinkle {
    0% { opacity: 0.78; filter: brightness(0.95); }
    100% { opacity: 1; filter: brightness(1.25); }
}

/* Gentle, non-interactive ambient snowfall in the background */
:root[data-theme="christmas"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.35;
    background-image:
        radial-gradient(2px 2px at 40px 60px, #ffffff 90%, transparent),
        radial-gradient(1.5px 1.5px at 130px 190px, rgba(255, 255, 255, 0.85) 90%, transparent),
        radial-gradient(2.5px 2.5px at 250px 110px, rgba(255, 255, 255, 0.9) 90%, transparent),
        radial-gradient(1.5px 1.5px at 340px 290px, rgba(255, 215, 0, 0.7) 90%, transparent);
    background-size: 380px 380px;
    animation: christmas-snow-drift 18s linear infinite;
}

@keyframes christmas-snow-drift {
    from { background-position: 0 0; }
    to { background-position: 80px 380px; }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-theme="christmas"] header::after,
    :root[data-theme="christmas"] body::before {
        animation: none !important;
    }
}

/* ── Thanksgiving theme ──────────────────────────────────────────────────
   Switched on from Admin > Storefront > Seasonal Themes. Uses a warm harvest amber
   primary accent, rich cranberry/burgundy secondary accent, golden corn highlight,
   and a warm harvest glow header trim. */
:root[data-theme="thanksgiving"] {
    --neon-green: #ff9f1a;
    --neon-green-rgb: 255, 159, 26;
    --neon-purple: #c0392b;
    --neon-purple-rgb: 192, 57, 43;
    --neon-purple-hdr-rgb: 100, 20, 15;
    --neon-yellow: #f1c40f;
    --dark-bg: #090604;
    --dark-card: #150f0a;
    --dark-card-hover: #201710;
    --text-muted: #bfa58a;
    --bolt-rgb: 255, 180, 80;
    --bolt-glow: #e67e22;
}

/* Warm harvest shimmer along the bottom edge of the sticky header */
:root[data-theme="thanksgiving"] header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, #c0392b, #ff9f1a, #f1c40f, #ff9f1a, #c0392b);
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(255, 159, 26, 0.5);
    animation: thanksgiving-harvest-shimmer 6s linear infinite;
}

@keyframes thanksgiving-harvest-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-theme="thanksgiving"] header::after {
        animation: none !important;
    }
}

/* ── Halloween Atmospheric Effects (Cobwebs, Spider, Flickering Neon) ── */
:root:not([data-theme="halloween"]) #halloween-decorations,
:root:not([data-theme="halloween"]) .halloween-decorations-layer {
    display: none !important;
}

.halloween-decorations-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1040;
    overflow: hidden;
}

.halloween-cobweb {
    position: fixed;
    top: 0;
    width: clamp(100px, 15vw, 170px);
    height: clamp(100px, 15vw, 170px);
    pointer-events: none;
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(255, 122, 0, 0.3));
    z-index: 1041;
}
.halloween-cobweb-left {
    left: 0;
}

/* ── Crawling Spider Mini-Game ── */
.halloween-crawling-spider {
    position: fixed;
    pointer-events: auto;
    cursor: crosshair;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 1045;
    outline: none;
    user-select: none;
    touch-action: manipulation;
    will-change: transform;
    transition: filter 0.15s ease;
}

.halloween-crawling-spider:hover {
    filter: brightness(1.3) scale(1.1);
}

.halloween-crawl-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(255, 122, 0, 0.4));
}

.spider-type-speedy .halloween-crawl-svg {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(57, 255, 20, 0.7));
}

.spider-type-golden .halloween-crawl-svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.9));
    animation: golden-shimmer 1.5s infinite alternate ease-in-out;
}

/* Spider Walking Leg Movements */
.spider-crawl-leg.leg-l1,
.spider-crawl-leg.leg-l3,
.spider-crawl-leg.leg-r2,
.spider-crawl-leg.leg-r4 {
    animation: spider-crawl-group-a 0.16s infinite alternate ease-in-out;
    transform-origin: 35px 35px;
}

.spider-crawl-leg.leg-l2,
.spider-crawl-leg.leg-l4,
.spider-crawl-leg.leg-r1,
.spider-crawl-leg.leg-r3 {
    animation: spider-crawl-group-b 0.16s infinite alternate ease-in-out;
    transform-origin: 35px 35px;
}

.spider-type-speedy .spider-crawl-leg {
    animation-duration: 0.09s !important;
}

@keyframes spider-crawl-group-a {
    0% { transform: rotate(-8deg) scaleY(0.9); }
    100% { transform: rotate(8deg) scaleY(1.1); }
}

@keyframes spider-crawl-group-b {
    0% { transform: rotate(8deg) scaleY(1.1); }
    100% { transform: rotate(-8deg) scaleY(0.9); }
}

@keyframes golden-shimmer {
    0% { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); }
    100% { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 16px rgba(255, 250, 100, 1)); }
}

/* Squished Pop Effect */
.spider-squished {
    animation: spider-squish-burst 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
    pointer-events: none !important;
}

@keyframes spider-squish-burst {
    0% { transform: scale(1); opacity: 1; filter: brightness(2) contrast(1.5); }
    35% { transform: scale(1.45) rotate(15deg); opacity: 0.9; }
    100% { transform: scale(0.1) rotate(45deg); opacity: 0; filter: blur(4px); }
}

/* Floating Score Bubble */
.halloween-score-bubble {
    position: fixed;
    z-index: 1055;
    pointer-events: none;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--neon-green, #ff7a00);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 10px rgba(255, 122, 0, 0.8);
    transform: translate(-50%, -50%);
    animation: score-float-up 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.halloween-score-bubble.bubble-speedy {
    color: #39ff14;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 12px #39ff14;
}

.halloween-score-bubble.bubble-gold {
    color: #ffd700;
    font-size: 1.15rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 14px #ffd700;
}

@keyframes score-float-up {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
    15% { opacity: 1; transform: translate(-50%, -15px) scale(1.2); }
    80% { opacity: 1; transform: translate(-50%, -45px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -65px) scale(0.85); }
}

/* Spider Mini-Game HUD */
:root:not([data-theme="halloween"]) #halloween-spider-hud {
    display: none !important;
}

.halloween-spider-hud {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 1040;
    background: rgba(12, 8, 18, 0.94);
    border: 2px solid var(--neon-green, #ff7a00);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 0 12px rgba(255, 122, 0, 0.35);
    border-radius: 6px;
    padding: 8px 12px;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spider-hud-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.spider-hud-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.spider-hud-badge {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.75rem;
}

.spider-hud-status {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.8px;
}

.spider-hud-status.status-live {
    background: rgba(57, 255, 20, 0.2);
    border: 1px solid #39ff14;
    color: #39ff14;
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
}

.spider-hud-status.status-off {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #666666;
    color: #999999;
}

.spider-hud-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-muted, #b5a8c2);
}

.spider-hud-points {
    font-size: 0.82rem;
    font-weight: bold;
    color: var(--neon-green, #ff7a00);
}

.spider-hud-toggle-btn {
    cursor: pointer;
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: none;
    margin-top: 2px;
}

.spider-hud-toggle-btn.btn-hunting {
    background: rgba(255, 122, 0, 0.15);
    color: #ff7a00;
    border: 1.5px solid #ff7a00;
}

.spider-hud-toggle-btn.btn-hunting:hover {
    background: #ff7a00;
    color: #000000;
    box-shadow: 0 0 10px rgba(255, 122, 0, 0.7);
}

.spider-hud-toggle-btn.btn-paused {
    background: rgba(57, 255, 20, 0.2);
    color: #39ff14;
    border: 1.5px solid #39ff14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.35);
}

.spider-hud-toggle-btn.btn-paused:hover {
    background: #39ff14;
    color: #000000;
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.9);
}

.hud-pulse {
    animation: hud-bounce 0.4s ease-out;
}

@keyframes hud-bounce {
    0% { transform: scale(1); box-shadow: 0 0 12px rgba(255, 122, 0, 0.4); }
    50% { transform: scale(1.08); box-shadow: 0 0 22px rgba(255, 122, 0, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 12px rgba(255, 122, 0, 0.4); }
}

/* ── Halloween Flickering Neon Lights ── */
:root[data-theme="halloween"] .brand-title,
:root[data-theme="halloween"] .nav-brand,
:root[data-theme="halloween"] .hero-stat-highlight {
    animation: halloween-neon-flicker 7s infinite ease-in-out;
}

:root[data-theme="halloween"] .street-badge-green,
:root[data-theme="halloween"] .street-badge-purple {
    animation: halloween-subtle-flicker 9s infinite ease-in-out;
}

:root[data-theme="halloween"] .site-banner {
    border-bottom: 2px solid var(--neon-green);
    box-shadow: 0 2px 14px rgba(255, 122, 0, 0.35);
}

@keyframes halloween-neon-flicker {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 122, 0, 0.7)); }
    3% { opacity: 0.35; filter: none; }
    6% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 122, 0, 0.9)); }
    7% { opacity: 0.65; filter: drop-shadow(0 0 4px rgba(255, 122, 0, 0.4)); }
    8% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 122, 0, 0.8)); }
    48% { opacity: 1; }
    49% { opacity: 0.55; filter: none; }
    50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 122, 0, 0.7)); }
    88% { opacity: 1; }
    89% { opacity: 0.75; }
    90% { opacity: 1; filter: drop-shadow(0 0 11px rgba(255, 122, 0, 0.85)); }
}

@keyframes halloween-subtle-flicker {
    0%, 100% { opacity: 1; }
    21% { opacity: 1; }
    21.8% { opacity: 0.6; }
    22.6% { opacity: 1; }
    74% { opacity: 1; }
    74.6% { opacity: 0.7; }
    75.2% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .spider-crawl-leg,
    .spider-squished,
    .spider-type-golden .halloween-crawl-svg,
    .hud-pulse,
    :root[data-theme="halloween"] .brand-title,
    :root[data-theme="halloween"] .nav-brand,
    :root[data-theme="halloween"] .hero-stat-highlight,
    :root[data-theme="halloween"] .street-badge-green,
    :root[data-theme="halloween"] .street-badge-purple {
        animation: none !important;
    }
}

/* Reserves the vertical scrollbar's space permanently instead of only when content actually
   overflows. Without this, any page whose height sits right at the viewport boundary (the shop
   grid is a common case — different pages/categories land at slightly different total heights)
   can flicker a scrollbar in/out as content changes, which itself nudges the content width by the
   scrollbar's ~15px and reflows a beat later — read as a page "shake" separate from any actual
   layout-shift bug. Reserving the gutter unconditionally makes that class of flicker impossible. */
html {
    scrollbar-gutter: stable;
}

.bg-gold-badge {
    background-color: rgba(255, 215, 0, 0.15) !important;
    border: 1px solid #ffd700 !important;
    color: #ffd700 !important;
    font-weight: bold;
    border-radius: 2px;
    font-size: 0.7rem;
}
.bg-cyan-badge {
    background-color: rgba(0, 255, 255, 0.15) !important;
    border: 1px solid #00ffff !important;
    color: #00ffff !important;
    font-weight: bold;
    border-radius: 2px;
    font-size: 0.7rem;
}
.bg-purple-badge {
    background-color: rgba(186, 85, 211, 0.15) !important;
    border: 1px solid var(--neon-purple) !important;
    color: var(--neon-purple) !important;
    font-weight: bold;
    border-radius: 2px;
    font-size: 0.7rem;
}
.bg-dark-badge {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #444 !important;
    color: #aaa !important;
    font-weight: bold;
    border-radius: 2px;
    font-size: 0.7rem;
}

/* Street Badge - Green with Muted Matte Orange Border for Last Unit */
.street-badge-red-border {
    background-color: var(--neon-green);
    color: #000000;
    border: 3px solid #b23b00 !important;
}

/* Responsive Wrap Grid Bar for Filter Tabs (Zero Side-Scrolling) */
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    overflow-x: visible !important;
    margin-bottom: 2rem;
}

.filter-tab {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 0.6rem 1.25rem;
    background-color: var(--dark-card);
    color: #ffffff;
    border: 2px solid #222222;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0px #000000;
}

.filter-tab:hover {
    border-color: var(--neon-green);
    color: var(--neon-green);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px #000000;
}

.filter-tab.active {
    background-color: var(--neon-green);
    color: #000000;
    border-color: #000000;
    box-shadow: 4px 4px 0px #000000;
    font-weight: 900;
}

/* Standalone Nav Cart Trigger — moved to NavMenu.razor.css (CSS isolation) */

/* Cyber-Vault Collector Display */
.cyber-vault-card {
    background: linear-gradient(145deg, #141419 0%, #09090d 100%);
    border: 2px solid #22222c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 6px 6px 0px #000000;
    overflow: hidden;
    position: relative;
}

.cyber-vault-stage {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.cyber-vault-img {
    max-height: 420px;
    width: 100%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cyber-vault-card:hover .cyber-vault-img {
    transform: scale(1.05);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.6rem 1.25rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(var(--neon-purple-rgb), 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(var(--neon-green-rgb), 0.08) 0%, transparent 40%),
        linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px;
}

/* ── Mobile-Specific Background Gradient & Grid Boost ───────── */
@media (max-width: 767.98px) {
    body {
        background-image:
            radial-gradient(circle at 15% 15%, rgba(var(--neon-purple-rgb), 0.22) 0%, transparent 55%),
            radial-gradient(circle at 85% 75%, rgba(var(--neon-green-rgb), 0.18) 0%, transparent 55%),
            linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
        background-size: 100% 100%, 100% 100%, 28px 28px, 28px 28px !important;
        background-attachment: fixed !important;
    }
}

/* ── HDR Display Compensation ─────────────────────────────────────────────
   Windows/macOS tone-map ordinary SDR web content onto HDR-capable panels, and
   that remap disproportionately crushes very-low-luminance detail — exactly
   the range this whole background lives in (1% white grid lines, 8% color
   glows over a #060606 base). The result can look right on a normal SDR
   monitor and be nearly invisible on an HDR one, with nothing about the page
   itself having changed. `dynamic-range: high` is the CSS media feature for
   exactly this — it only matches displays that can actually represent HDR
   content, so ordinary monitors never see this block and the look above is
   untouched there. The green glow's alpha reuses the exact value the mobile
   breakpoint above already validated looks good (that boost was for a
   different reason — small/outdoor-screen visibility — but it travels fine
   here too).

   The purple glow uses --neon-purple-hdr-rgb (a deeper violet than
   --neon-purple) at much higher alpha than the green one — deliberately,
   not an oversight. A darker RGB triplet has less absolute luminance to
   begin with, and alpha-blending it over the near-black --dark-bg leaves an
   even smaller luminance delta than a brighter color at the same alpha —
   exactly the low-signal range HDR tone-mapping crushes hardest. The first
   pass here just darkened the RGB without raising alpha to compensate, and
   real user feedback on an actual HDR display was that it read as fainter,
   not more visible. Depth and visibility are separate knobs: hue darkness
   for how deep the purple reads, alpha for whether it survives the
   tone-mapping/backlight crush at all — don't turn up the first without
   also turning up the second.

   `.hdr-boost-on` / `.hdr-boost-off` are a manual escape hatch for displays
   that don't report dynamic-range correctly (browser/OS support for the
   feature is still inconsistent) — plain classes on <body>. See the inline
   script at the top of <body> in App.razor for how a saved choice is
   re-applied before Blazor's circuit connects (avoids a flash of the
   un-boosted background while Blazor Server's SignalR handshake is still in
   progress), and the Display toggle in MainLayout.razor's footer for how a
   visitor sets one. All of this sits before the Speakeasy/.intel-clean-stage
   override further down so that override always wins ties — Speakeasy's
   minimal background is a deliberate visual choice, not something an HDR
   compensation should ever re-enable. */
@media (dynamic-range: high) {
    body:not(.hdr-boost-off) {
        background-image:
            radial-gradient(circle at 10% 20%, rgba(var(--neon-purple-hdr-rgb), 0.65) 0%, transparent 40%),
            radial-gradient(circle at 90% 80%, rgba(var(--neon-green-rgb), 0.18) 0%, transparent 40%),
            linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
    }
}
@media (dynamic-range: high) and (max-width: 767.98px) {
    body:not(.hdr-boost-off) {
        background-image:
            radial-gradient(circle at 15% 15%, rgba(var(--neon-purple-hdr-rgb), 0.8) 0%, transparent 55%),
            radial-gradient(circle at 85% 75%, rgba(var(--neon-green-rgb), 0.30) 0%, transparent 55%),
            linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) !important;
    }
}
body.hdr-boost-on {
    background-image:
        radial-gradient(circle at 10% 20%, rgba(var(--neon-purple-hdr-rgb), 0.65) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(var(--neon-green-rgb), 0.18) 0%, transparent 40%),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
}

/* Rotated/scaled full-width elements (e.g. the marquee tickers) have a
   post-transform bounding box that browsers count toward an ancestor's
   scrollable overflow even though the element's own layout box fits exactly.
   `main` clips that here so it never reaches <html>'s scrollWidth. */
main {
    overflow-x: hidden;
}

/* Speakeasy's "minimal" aesthetic wants the ambient glow/grid texture above turned off — .site-layout's
   <footer> sits below <main> where Speakeasy's own background can't reach, so this can't be scoped to
   the component via CSS isolation (isolation can't target <body> at all, since it's rendered by the
   static host page, not by any component). :has() keys this purely off whether Speakeasy's own root
   element is currently in the DOM, so it activates/deactivates automatically with navigation, with no
   JS lifecycle code needed and no risk of it affecting any other page. */
body:has(.speakeasy-minimal-stage),
body:has(.intel-clean-stage) {
    background-image: none !important;
    background-color: #08080a !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0d0d0d;
}
::-webkit-scrollbar-thumb {
    background: #262626;
    border: 2px solid #0d0d0d;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neon-green);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1;
}

.font-archivo {
    font-family: 'Archivo Black', sans-serif;
}

a {
    color: var(--neon-green);
    text-decoration: none;
    transition: all 0.2s ease;
}
a:hover {
    color: #ffffff;
    text-shadow: 0 0 5px var(--neon-green);
}

/* Street Buttons */
.btn-street {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.8rem 1.8rem;
    border: var(--thick-border);
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    width: max-content;
    max-width: 100%;
    white-space: nowrap !important;
}

.btn-street-green {
    background-color: var(--neon-green);
    color: #000000;
    box-shadow: var(--street-shadow);
}
.btn-street-green:hover,
a.btn-street-green:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px #000000;
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}
.btn-street-green:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000000;
}

/* Shop "Grab" button: for a moment after a click it flips to a dark "ADDED ✓" state, so there is
   clear feedback even though the cart drawer doesn't open on the shop page. A fixed minimum width
   keeps the card's footer from shifting when the label changes. The hover rule above uses
   !important, so the added state does too (and also covers it while the pointer is still over it). */
.btn-grab {
    min-width: 6.6rem;
    text-align: center;
}
.btn-street-green.btn-grab-added,
.btn-street-green.btn-grab-added:hover {
    background-color: #000000 !important;
    color: var(--neon-green) !important;
    border-color: var(--neon-green) !important;
    animation: grabAddedPulse 0.45s ease-out;
}
@keyframes grabAddedPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-street-green.btn-grab-added { animation: none; }
}

.btn-street-purple {
    background-color: var(--neon-purple);
    color: #ffffff;
    box-shadow: var(--street-shadow);
}
.btn-street-purple:hover,
a.btn-street-purple:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px #000000;
    color: #000000 !important;
    background-color: #ffffff !important;
    border-color: #000000 !important;
}
.btn-street-purple:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000000;
}

.btn-street-dark {
    background-color: var(--dark-card);
    color: #ffffff;
    border: 3px solid #ffffff;
    box-shadow: var(--street-shadow);
}
.btn-street-dark:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px var(--neon-green);
    color: var(--neon-green);
    border-color: var(--neon-green);
}
.btn-street-dark:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--neon-green);
}

.btn-street-yellow {
    background-color: var(--neon-yellow);
    color: #000000;
    box-shadow: var(--street-shadow);
}
.btn-street-yellow:hover,
a.btn-street-yellow:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px #000000;
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}
.btn-street-yellow:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000000;
}

/* Badges */
.street-badge {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.3rem 0.6rem;
    text-transform: uppercase;
    border: 2px solid #000000;
    display: inline-block;
}
.street-badge-green {
    background-color: var(--neon-green);
    color: #000000;
}
.street-badge-purple {
    background-color: var(--neon-purple);
    color: #ffffff;
}
.street-badge-yellow {
    background-color: var(--neon-yellow);
    color: #000000;
}
.street-badge-red {
    background-color: #ff3838;
    color: #ffffff;
}

/* Checkout trust badge (ProductDetail + CartDrawer) — deliberately quiet: no box, no fill, no
   border, no shouting caps, just the icon + text sitting plainly on the page. Boxed treatments
   (plain gray, then green-tinted, then neutral-panel) were all tried first but kept fighting
   whatever background they sat on — dropping the box entirely sidesteps that for good. Global
   rather than scoped CSS since it's shared by two separate components. */
.checkout-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    white-space: nowrap;
}
.checkout-trust-badge-icon {
    color: var(--neon-green);
    font-size: 0.8rem;
    line-height: 1;
}
.checkout-trust-badge-brand {
    color: #ddd;
    font-weight: 700;
}

/* Page Layout adjustments */
.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Marquee / Hype Ticker — moved to Ticker.razor.css (CSS isolation) */

/* Site Banner */
.site-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    border-bottom: var(--thick-border);
    position: relative;
    text-align: center;
}
.site-banner-text {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.site-banner-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    padding: 0.25rem;
}
.site-banner-close:hover {
    opacity: 1;
}

/* Header styling */
.nav-link-item {
    font-family: 'Space Grotesk', 'Syne', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.5px !important;
    color: var(--neon-green) !important;
    position: relative;
    white-space: nowrap;
    padding: 0.25rem 0;
}

@media (min-width: 768px) and (max-width: 1150px) {
    .nav-link-item {
        font-size: 1.2rem !important;
    }
}

/* Cart Drawer — most styles moved to CartDrawer.razor.css (CSS isolation).
   qty-btn / qty-btn-lg stay here since ProductDetail.razor also uses them. */
.qty-btn {
    width: 25px;
    height: 25px;
    background-color: #222222;
    border: 1px solid #444444;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
}
.qty-btn:hover {
    background-color: var(--neon-green);
    color: #000000;
    border-color: #000000;
}
.qty-btn-lg {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}

/* Product Card — moved to ProductCard.razor.css (CSS isolation) */

/* Spinner Styles — moved to SpinnerReelPanel.razor.css (CSS isolation) */

/* Step Crate Builder — most styles moved to Shop.razor.css (CSS isolation).
   builder-step-card stays here since it's a shared card class used across many pages. */
.builder-step-card {
    background-color: var(--dark-card);
    border: var(--thick-border);
    padding: 2rem;
    margin-bottom: 2rem;
}
@media (max-width: 575px) {
    .builder-step-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1.25rem !important;
    }
}

/* Footer Section — moved to MainLayout.razor.css (CSS isolation) */

/* Grid helper — 2 columns on mobile, 2 on tablet, 3 on desktop, 4 on wide desktop */
.street-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
@media (min-width: 576px) {
    .street-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}
@media (min-width: 992px) {
    .street-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}
@media (min-width: 1200px) {
    .street-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* Mobile 2-Column Product Card Compact Sizing — moved to ProductCard.razor.css (CSS isolation) */

/* Hero Section, Combined CTA card, Home CTA Tab Switcher — moved to Home.razor.css (CSS isolation).
   The box-float keyframe that used to live here was unreferenced anywhere in the codebase and has
   been dropped rather than moved. */

/* Shared by Home's .blinking-dot and LiveWinnerFeed's .live-pulse-dot — kept global since it
   crosses component boundaries (see Home.razor.css / LiveWinnerFeed.razor.css). */
@keyframes blinking-light {
    0% { opacity: 0.4; }
    50% { opacity: 1; filter: drop-shadow(0 0 2px var(--neon-green)); }
    100% { opacity: 0.4; }
}
/* .blinking-dot moved to Home.razor.css, .live-pulse-dot moved to LiveWinnerFeed.razor.css
   (both reference this keyframe by name). .countdown-dot + pulse-dot-red keyframe, and
   .flaming-emoji + flame-flicker keyframe, moved to Home.razor.css (exclusive to Home). */

/* Generic entrance animation used across most pages (Home, Shop, Speakeasy, Underground,
   MainLayout, LiveWinnerFeed, SpinnerReelPanel) — kept here rather than isolated to any one
   component precisely because so many different pages rely on it. */
.animate-fade-in {
    animation: fadeIn 0.35s ease-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   Utility classes
   Extracted from repeated inline style="..." attributes so markup doesn't
   duplicate the same declarations across every file, and so the CSP can
   eventually tighten style-src. Only covers static (never-changing) values;
   styles computed from live component state stay inline.
   ========================================================================== */

.fz-65 { font-size: 0.65rem; }
.fz-70 { font-size: 0.7rem; }
.fz-75 { font-size: 0.75rem; }
.fz-80 { font-size: 0.8rem; }
.fz-85 { font-size: 0.85rem; }
.fz-90 { font-size: 0.9rem; }
.fz-95 { font-size: 0.95rem; }
.fz-100 { font-size: 1rem; }
.fz-110 { font-size: 1.1rem; }
.fz-115 { font-size: 1.15rem; }
.fz-200 { font-size: 2rem; }

.card-panel {
    background-color: var(--dark-card);
    border: var(--thick-border);
    box-shadow: var(--street-shadow);
    padding: 1.5rem;
}

.card-inset {
    background-color: #0d0d0d;
    border: 1px solid #222;
}

.card-inset-purple {
    background-color: #0d0d0f;
    border: 1px solid var(--neon-purple);
}

.max-w-420 { max-width: 420px; }
.max-w-600 { max-width: 600px; }
.max-w-820 { max-width: 820px; }

.text-neon-purple { color: var(--neon-purple); }
.text-neon-green { color: var(--neon-green); }
.bg-neon-green { background-color: var(--neon-green); }
.lh-16 { line-height: 1.6; }
.blazor-error-banner {
    background-color: var(--neon-purple);
    color: white;
    border-top: var(--thick-border) !important;
    font-weight: 800;
}
.rotate-2deg { transform: rotate(2deg); }
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif; }
.border-thick-black { border: 3px solid #000; }
.btn-street-thick { border: 3px solid #000; box-shadow: 4px 4px 0px #000; text-decoration: none; }
.btn-compact { padding: 0.5rem 1.1rem; }
.label-uppercase-sm { letter-spacing: 0.5px; }
.cursor-pointer { cursor: pointer; }

.w-90 { width: 90px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-130 { width: 130px; }

/* NavMenu — .mobile-menu-dropdown moved to NavMenu.razor.css (CSS isolation) */

/* Home hero section — moved to Home.razor.css (CSS isolation) */
.text-muted-888 { color: #888; }
/* .testimonial-card* moved to TestimonialCard.razor.css (CSS isolation) */

/* Mystery Spinner page */
.vault-offline-card {
    background-color: var(--dark-card);
    border: var(--thick-border);
    box-shadow: var(--street-shadow);
    padding: 3rem;
    max-width: 600px;
    margin: 0 auto;
}
.offline-title { letter-spacing: -1px; }
.spinner-outer-panel {
    background-color: var(--dark-card);
    border: var(--thick-border);
    box-shadow: var(--street-shadow);
    padding: 2rem;
}
.outcome-alert-panel { background-color: var(--neon-green); box-shadow: var(--street-shadow); }

/* Admin editors */
.tag-textarea { height: 120px; line-height: 1.5; }
.select-compact { cursor: pointer; }
.error-box { background-color: #260011; border-color: #ff0055; color: #ff3385; letter-spacing: 0.5px; }

/* Step Crate Builder summary line — moved to Shop.razor.css (CSS isolation) */

/* Admin login — moved to AdminLogin.razor.css (CSS isolation) */

/* Snack gate — gate CONTENT (heading, disclaimer, buttons) moved to MainLayout.razor.css.
   The overlay/modal SHELL classes below stay here since ProductDetail.razor's review modal
   also reuses .snack-gate-overlay / .snack-gate-modal. */
.snack-gate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* 100vh doesn't account for the mobile browser's address bar, so the overlay
       ends up taller than what's actually visible — 100dvh tracks the real,
       currently-visible viewport. overflow-y is a safety net so content that's
       still too tall to fit (short/foldable viewports) can be scrolled to,
       rather than the buttons being unreachable below the fold. */
    height: 100vh;
    height: 100dvh;
    background-color: rgba(8, 8, 8, 0.98);
    backdrop-filter: blur(15px);
    z-index: 999999;
    display: flex;
    align-items: center;
    align-items: safe center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
}
.snack-gate-modal {
    background-color: #0d0d0d;
    border: 4px solid #000;
    box-shadow: 12px 12px 0px #000, 0 0 50px rgba(var(--neon-green-rgb), 0.15);
    padding: 1.75rem 3rem 3.5rem;
    max-width: 660px;
    width: 100%;
    text-align: center;
    position: relative;
    margin: auto 0;
}
@media (min-width: 768px) {
    .snack-gate-modal {
        max-width: 500px !important;
        padding: 2rem 2.25rem 2.5rem !important;
    }
}
@media (max-width: 480px) {
    .snack-gate-modal {
        padding: 1.5rem 1.5rem 2rem;
    }
}
.snack-gate-modal .street-badge {
    border: 2px solid #ffffff;
    box-shadow: 3px 3px 0px #000000;
}
.snack-gate-modal::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--neon-green);
    pointer-events: none;
    z-index: 1;
}

/* .fw-700 kept global — shared by LiveWinnerFeed.razor and SpinnerReelPanel.razor.
   Everything else moved to LiveWinnerFeed.razor.css (CSS isolation). */
.fw-700 { font-weight: 700; }

/* Markdown post editor (admin) — moved to MarkdownEditor.razor.css (CSS isolation).
   Its Preview tab renders through the shared .intel-post-body rules below, also used by the
   live IntelPost.razor page — kept global here since both components depend on it. */

/* Snack Intel post body — styles the raw HTML Markdig renders from admin-authored Markdown */
.intel-post-body p { margin-bottom: 1.1em; color: #ccc; }
.intel-post-body h1, .intel-post-body h2, .intel-post-body h3, .intel-post-body h4 { margin-top: 1.6em; margin-bottom: 0.6em; color: var(--post-accent); }
.intel-post-body h1:first-child, .intel-post-body h2:first-child, .intel-post-body h3:first-child { margin-top: 0; }
.intel-post-body ul, .intel-post-body ol { padding-left: 1.5em; margin-bottom: 1.1em; color: #ccc; }
.intel-post-body li { margin-bottom: 0.4em; }
.intel-post-body blockquote { border-left: 3px solid var(--post-accent); padding: 0.25em 0 0.25em 1em; margin: 0 0 1.1em; color: #999; font-style: italic; }
.intel-post-body strong { color: #fff; }
.intel-post-body a { color: var(--post-accent); }

/* Drop cap on the post's opening paragraph — purely decorative, no admin field or markup needed */
.intel-post-body > p:first-of-type::first-letter {
    font-family: 'Archivo Black', sans-serif;
    font-size: 3.2em;
    line-height: 0.8;
    float: left;
    margin: 0.04em 0.08em 0 0;
    color: var(--post-accent);
}

/* Callout box (::: callout ... :::) and image caption (::: img-caption ... :::) — both are
   Markdig custom containers, so they render as plain <div class="callout">/<div class="img-caption">
   with normal Markdown-parsed content inside; these rules just give them a distinct look. */
.intel-post-body .callout {
    background: #14141a;
    border-left: 3px solid var(--post-accent);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}
.intel-post-body .callout p:last-child { margin-bottom: 0; }

.intel-post-body .img-caption { margin: 1.5rem 0; }
.intel-post-body .img-caption img { width: 100%; display: block; }
.intel-post-body .img-caption p:last-child {
    font-size: 0.8rem;
    color: #888;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Reading progress bar + back-to-top button — moved to IntelPost.razor.css (CSS isolation) */

/* Keep primary CTA labels on one line on narrow phones */
@media (max-width: 480px) {
    button.product-add-btn {
        font-size: 0.95rem !important;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}

/* The Cloudflare Turnstile widget renders at a fixed 300px wide; without a
   clamp here it silently pushes the whole page wider on narrow screens. */
#turnstile-container {
    max-width: 100%;
    overflow: hidden;
}
/* Product Detail Spin Vault Button + Social Share Block — moved to ProductDetail.razor.css
   (CSS isolation). While consolidating, also fixed a duplicate-rule bug: .share-app-label,
   .share-label-ig, .share-label-tt were each defined twice with different values (0.75rem vs
   0.72rem+width:96px) — cascade order meant the second silently won; only that version moved. */

/* ── Black Market & Stash Markdowns Styling — most rules moved to
   ProductCard.razor.css and Shop.razor.css (CSS isolation). */

/* ── Meet The Plug (/the-plug) Dossier Styling — moved to Home.razor.css
   (homepage promo card) and ThePlug.razor.css (dossier page). ─────────── */

/* ── Site Passcode Lock Overlay — moved to MainLayout.razor.css (CSS isolation) */

/* ── Error Pages (404 / 500) ─────────────────────────────────── */
.error-page-wrap {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 0 2rem;
    position: relative;
    overflow: hidden;
}

.error-glitch-header {
    margin-bottom: 1.5rem;
    line-height: 1;
}

.error-code-big {
    font-size: clamp(6rem, 18vw, 12rem);
    font-weight: 900;
    letter-spacing: -6px;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
    display: block;
    line-height: 0.9;
    user-select: none;
    font-family: 'Archivo Black', sans-serif;
}

.glitch-flicker {
    display: inline-block;
    color: var(--neon-green);
    -webkit-text-stroke: 0;
    animation: glitchFlicker 3s infinite;
    text-shadow: 0 0 30px rgba(var(--neon-green-rgb), 0.5);
}

@keyframes glitchFlicker {
    0%, 88%, 100% { opacity: 1; transform: none; }
    89%           { opacity: 0.3; transform: translateX(-4px) skewX(-6deg); }
    91%           { opacity: 1;   transform: translateX(2px); }
    93%           { opacity: 0.1; transform: translateX(-2px) skewX(4deg); }
    95%           { opacity: 1;   transform: none; }
}

.error-deco-lines {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0.07;
    pointer-events: none;
}

.error-deco-lines span {
    display: block;
    height: 2px;
    background: var(--neon-green);
    animation: scanLine 4s linear infinite;
}

.error-deco-lines span:nth-child(1) { width: 240px; animation-delay: 0s; }
.error-deco-lines span:nth-child(2) { width: 160px; animation-delay: 1s; }
.error-deco-lines span:nth-child(3) { width: 90px;  animation-delay: 2s; }

@keyframes scanLine {
    0%   { transform: scaleX(0); transform-origin: left; }
    50%  { transform: scaleX(1); transform-origin: left; }
    51%  { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* ── Snack Intel Hub & Social Media Feed Styles — moved to Intel.razor.css,
   IntelSocial.razor.css, and IntelArticles.razor.css (CSS isolation). */

/* ── Mobile-Only Meet The Plug Card (Homepage) — moved to Home.razor.css */

/* ── Soda-Can Cursor Easter Egg ────────────────────────────────────────────
   Konami code (↑↑↓↓←→←→BA), entered anywhere on the site, swaps the cursor for
   the site's own favicon (a soda can) and shows a one-time "unlocked" popup.
   See wwwroot/js/soda-cursor.js for the key-sequence listener that adds/removes
   the .soda-cursor-active class and builds the popup below. */

.soda-cursor-active,
.soda-cursor-active * {
    cursor: url('/favicon.png') 16 16, auto !important;
}
/* Text fields keep a real text cursor — losing that would make it hard to tell
   where you're about to type. */
.soda-cursor-active input,
.soda-cursor-active textarea,
.soda-cursor-active [contenteditable="true"] {
    cursor: text !important;
}

.soda-popup-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(6, 6, 6, 0.85);
    backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: sodaFadeIn 0.25s ease-out;
}
.soda-popup-overlay.soda-popup-closing {
    animation: sodaFadeOut 0.25s ease-in forwards;
}
@keyframes sodaFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sodaFadeOut { from { opacity: 1; } to { opacity: 0; } }

.soda-popup-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 2.75rem 2rem 2rem;
    text-align: center;
    background:
        linear-gradient(#0d0d0d, #0d0d0d) padding-box,
        linear-gradient(120deg, var(--neon-green), var(--neon-purple), var(--neon-yellow), var(--neon-green)) border-box;
    background-size: 100% 100%, 300% 300%;
    border: 4px solid transparent;
    box-shadow: 12px 12px 0 #000;
    overflow: hidden;
    animation: sodaPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), sodaBorderShift 3s linear infinite;
}
@keyframes sodaPopIn {
    0%   { opacity: 0; transform: scale(0.7) rotate(-3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes sodaBorderShift {
    0%   { background-position: 0% 0%, 0% 50%; }
    100% { background-position: 0% 0%, 300% 50%; }
}

/* Putting the cursor away (same code, second time) isn't a celebration — reuses the exact same
   popup shell but drops the animated rainbow border, the blinking lights, and the icon bounce, so
   it visibly reads as "calmer" / powered down rather than a repeat of the unlock moment. */
.soda-popup-card.soda-popup-card-calm {
    background:
        linear-gradient(#0d0d0d, #0d0d0d) padding-box,
        linear-gradient(120deg, #3a3a3a, #1a1a1a) border-box;
    animation: sodaPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.soda-popup-card-calm .soda-popup-lights span {
    animation: none;
    opacity: 0.3;
}
.soda-popup-card-calm .soda-popup-icon {
    animation: none;
}

.soda-popup-lights {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}
.soda-popup-lights span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: sodaLightBlink 1s steps(1) infinite;
}
.soda-popup-lights span:nth-child(5n+1) { background: var(--neon-green); animation-delay: 0s; }
.soda-popup-lights span:nth-child(5n+2) { background: var(--neon-purple); animation-delay: 0.1s; }
.soda-popup-lights span:nth-child(5n+3) { background: var(--neon-yellow); animation-delay: 0.2s; }
.soda-popup-lights span:nth-child(5n+4) { background: #00ffff; animation-delay: 0.3s; }
.soda-popup-lights span:nth-child(5n+5) { background: #ffd700; animation-delay: 0.4s; }
@keyframes sodaLightBlink {
    0%, 49%   { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
    50%, 100% { opacity: 0.25; filter: none; }
}

.soda-popup-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: #666;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    z-index: 2;
}
.soda-popup-close:hover { color: #fff; }

.soda-popup-content {
    position: relative;
    z-index: 1;
}

.soda-popup-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    animation: sodaBounce 1.6s ease-in-out infinite;
}
@keyframes sodaBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-6px) rotate(-6deg); }
    75%      { transform: translateY(-6px) rotate(6deg); }
}

.soda-popup-heading {
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    color: #fff;
}
.soda-popup-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.soda-confetti-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.soda-confetti {
    position: absolute;
    top: -10%;
    width: 8px;
    height: 8px;
    opacity: 0.9;
    animation-name: sodaConfettiFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes sodaConfettiFall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(420px) rotate(540deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .soda-popup-overlay,
    .soda-popup-card,
    .soda-popup-icon,
    .soda-popup-lights span,
    .soda-confetti {
        animation: none !important;
    }
}

/* ── Mobile Optimization for /the-plug (Meet The Plug) — moved to ThePlug.razor.css */

/* ── Site-Wide Coming Soon Screen (SiteComingSoon.razor) ────────────────────
   CSS-only flowing exotic soda waves & carbonation bubbles. Uses only GPU-composited
   transform & opacity animations so mobile batteries are unaffected, and pauses all
   motion when prefers-reduced-motion: reduce is set. */
html:has(.soda-coming-soon-viewport) {
    scrollbar-gutter: auto !important;
    overflow-x: hidden !important;
}

body:has(.soda-coming-soon-viewport) {
    overflow-x: hidden !important;
}

/* Sized by inset: 0 alone — not 100vw/100vh, which on phones count the area behind the address bar (and, on
   desktop, the scrollbar). The card is centered by margin: auto on .soda-card-wrap rather than align-items:
   center, because centering a box TALLER than the screen pushes its top edge above the page where it can
   never be scrolled to; margin: auto centers when there is room and scrolls from the top when there isn't. */
.soda-coming-soon-viewport {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: flex;
    padding: 4.5rem 1.25rem calc(7.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 999;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(189, 0, 255, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(139, 0, 255, 0.22) 0%, rgba(57, 255, 20, 0.06) 45%, transparent 75%),
        #06040a;
}

/* Top dripping syrup edge */
.soda-drip-top {
    position: fixed;
    top: 0;
    left: -5vw;
    width: 110vw;
    height: 92px;
    pointer-events: none;
    z-index: 2;
    animation: sodaTopDripSway 9s ease-in-out infinite alternate;
}

.soda-drip-svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes sodaTopDripSway {
    0%   { transform: translate3d(-1.5%, 0, 0) scaleY(0.95); }
    100% { transform: translate3d(1.5%, 0, 0) scaleY(1.06); }
}

/* Same footprint as the card (no z-index of its own, so the cross and card still stack against the
   bubbles and waves exactly as before). */
.soda-card-wrap {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: auto;
}

/* Christian Symbol #1: Subtle Gothic / Streetwear Cross Watermark.
   Sized to the CARD, not the screen: it is as tall as the card plus a few pixels above and below,
   so it sits tucked behind the card with only the tips of the stem peeking out. The drawing keeps its
   proportions inside this box, so the arms stay well inside the card's width. */
.coming-soon-cross-watermark {
    position: absolute;
    top: -18px;
    bottom: -18px;
    left: 0;
    right: 0;
    color: rgba(255, 215, 140, 0.055);
    pointer-events: none;
    z-index: 1;
}

.coming-soon-cross-watermark svg {
    width: 100%;
    height: 100%;
}

/* Rising carbonation fizz bubbles (GPU transform + opacity only) */
.soda-bubbles-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.soda-bubble {
    position: absolute;
    bottom: -24px;
    border-radius: 50%;
    opacity: 0;
    animation: sodaBubbleRise 11s ease-in infinite;
}

.soda-bubble.b1 { left: 12%; width: 8px;  height: 8px;  background: rgba(189, 0, 255, 0.55); animation-duration: 10s; animation-delay: 0s; }
.soda-bubble.b2 { left: 24%; width: 5px;  height: 5px;  background: rgba(57, 255, 20, 0.50); animation-duration: 13s; animation-delay: 2s; }
.soda-bubble.b3 { left: 37%; width: 10px; height: 10px; background: rgba(255, 42, 133, 0.45); animation-duration: 11s; animation-delay: 4s; }
.soda-bubble.b4 { left: 52%; width: 6px;  height: 6px;  background: rgba(189, 0, 255, 0.50); animation-duration: 14s; animation-delay: 1s; }
.soda-bubble.b5 { left: 66%; width: 9px;  height: 9px;  background: rgba(57, 255, 20, 0.45); animation-duration: 12s; animation-delay: 3.5s; }
.soda-bubble.b6 { left: 78%; width: 6px;  height: 6px;  background: rgba(255, 255, 255, 0.35); animation-duration: 9.5s; animation-delay: 5s; }
.soda-bubble.b7 { left: 88%; width: 8px;  height: 8px;  background: rgba(189, 0, 255, 0.50); animation-duration: 12.5s; animation-delay: 2.5s; }
.soda-bubble.b8 { left: 18%; width: 7px;  height: 7px;  background: rgba(255, 42, 133, 0.40); animation-duration: 15s; animation-delay: 6s; }

@keyframes sodaBubbleRise {
    0%   { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
    20%  { opacity: 0.65; }
    80%  { opacity: 0.45; }
    100% { transform: translate3d(14px, -78vh, 0) scale(1.15); opacity: 0; }
}

/* Central Streetwear / Dispensary Vault Card */
.soda-coming-soon-card {
    position: relative;
    z-index: 3;
    max-width: 580px;
    width: 100%;
    background: rgba(10, 7, 16, 0.92);
    border: 2px solid #bd00ff;
    box-shadow: 0 0 48px rgba(189, 0, 255, 0.28), 8px 8px 0 #000;
    padding: 2.25rem 2rem 1.75rem;
    text-align: center;
}

.soda-coming-soon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #bd00ff, #ff2a85, #39ff14, #bd00ff);
}

.soda-pack-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    color: #7a6b8a;
    border-bottom: 1px dashed rgba(189, 0, 255, 0.28);
    padding-bottom: 0.65rem;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.soda-cup-emblem {
    width: 68px;
    height: 78px;
    margin: 0 auto 0.85rem;
    animation: sodaCupFloat 4.5s ease-in-out infinite alternate;
}

.soda-cup-svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes sodaCupFloat {
    0%   { transform: translate3d(0, 0, 0) rotate(-2deg); }
    100% { transform: translate3d(0, -6px, 0) rotate(2deg); }
}

/* Sized so the gradient line ("FIRST DROP LOADING") fits inside the card on one line: widest at 2.6rem
   inside the card's 580px max width, and scaled down with the screen on small phones (media query below). */
.soda-coming-soon-title {
    font-size: clamp(1.85rem, 5.5vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 0.85rem;
}

.soda-title-gradient {
    background: linear-gradient(90deg, #d86bff 0%, #ff3d9a 50%, #39ff14 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

.soda-coming-soon-sub {
    color: #b5a8c4;
    font-size: 0.96rem;
    line-height: 1.55;
    max-width: 470px;
    margin: 0 auto 1.5rem;
}

.soda-signup-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.soda-signup-input {
    flex: 1;
    min-width: 0;
    background: #050308;
    border: 2px solid #352347;
    color: #fff;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: border-color 0.2s;
}

.soda-signup-input:focus {
    outline: none;
    border-color: #39ff14;
}

.soda-signup-input::placeholder {
    color: #5e4f6e;
}

.soda-signup-btn {
    padding: 0.85rem 1.4rem;
    white-space: nowrap;
}

.soda-signup-success {
    background: rgba(57, 255, 20, 0.08);
    border: 1px solid #39ff14;
    color: #39ff14;
    padding: 0.9rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    margin-bottom: 0.85rem;
}

.soda-privacy-note {
    font-size: 0.68rem;
    color: #776a85;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.soda-privacy-note-link {
    color: #a99bbb;
    text-decoration: underline;
}

.soda-privacy-note-link:hover {
    color: #fff;
}

.soda-footer-links {
    display: inline-flex;
    gap: 1.1rem;
}

/* "Have a passcode?" link & inline drawer */
.soda-passcode-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.9rem;
    margin-top: 0.5rem;
}

.soda-passcode-toggle {
    background: none;
    border: none;
    color: #a695b8;
    font-size: 0.75rem;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.soda-passcode-toggle:hover {
    color: #39ff14;
}

.soda-passcode-row {
    display: flex;
    gap: 0.5rem;
    max-width: 380px;
    margin: 0 auto;
}

.soda-passcode-input {
    flex: 1;
    min-width: 0;
    background: #050308;
    border: 1px solid #bd00ff;
    color: #fff;
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-align: center;
}

.soda-passcode-input:focus {
    outline: none;
    border-color: #39ff14;
}

.soda-card-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.35rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 0.62rem;
    letter-spacing: 1.4px;
}

/* "MEET THE PLUG" button under the signup box */
.soda-plug-link-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.25rem 0 0.5rem;
}

.soda-plug-link {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-decoration: none;
}

.soda-admin-link {
    color: #5e4f6e;
    text-decoration: none;
    letter-spacing: 1.5px;
    transition: color 0.15s;
}

.soda-admin-link:hover {
    color: #fff;
}

/* Bottom flowing exotic soda liquid waves (GPU translate3d only) */
.soda-waves-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 125px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.soda-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100vw + 2400px);
    height: 100%;
    background-repeat: repeat-x;
    background-size: 1200px 100%;
    will-change: transform;
}

.soda-wave-back {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,48 C200,105 400,5 600,52 C800,98 1000,12 1200,48 L1200,120 L0,120 Z' fill='%236a00b8' fill-opacity='0.38'/%3E%3C/svg%3E");
    animation: sodaWaveFlow 16s linear infinite;
}

.soda-wave-mid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C180,18 420,106 600,60 C780,14 1020,102 1200,64 L1200,120 L0,120 Z' fill='%23bd00ff' fill-opacity='0.48'/%3E%3C/svg%3E");
    animation: sodaWaveFlowReverse 12s linear infinite;
}

.soda-wave-front {
    height: 78%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,56 C240,104 360,18 600,58 C840,98 960,20 1200,56 L1200,120 L0,120 Z' fill='%23ff1e80' fill-opacity='0.32'/%3E%3C/svg%3E");
    animation: sodaWaveFlow 9s linear infinite;
}

@keyframes sodaWaveFlow {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-1200px, 0, 0); }
}

@keyframes sodaWaveFlowReverse {
    0%   { transform: translate3d(-1200px, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@media (max-width: 576px) {
    /* Less empty space above and below the card, so more of it fits on a small screen. */
    .soda-coming-soon-viewport {
        padding: 3.5rem 0.9rem calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }
    /* Small enough that "FIRST DROP LOADING" stays on one line down to a 320px-wide phone. */
    .soda-coming-soon-title {
        font-size: clamp(1.1rem, 6.4vw, 2rem);
    }
    .soda-coming-soon-card {
        padding: 1.75rem 1.2rem 1.35rem;
    }
    .soda-signup-form,
    .soda-passcode-row {
        flex-direction: column;
    }
    .soda-signup-btn {
        width: 100%;
    }
    .soda-pack-meta {
        flex-direction: column;
        gap: 0.2rem;
    }
    .soda-card-footer {
        flex-direction: column;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .soda-drip-top,
    .soda-bubble,
    .soda-cup-emblem,
    .soda-wave-back,
    .soda-wave-mid,
    .soda-wave-front {
        animation: none !important;
    }
}