/* Import Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Grotesk:wght@600;700&display=swap");

:root {
    /* Colors */
    --surface: #131313;
    --surface-dim: #131313;
    --surface-bright: #393939;
    --surface-container-lowest: #0e0e0e;
    --surface-container-low: #1b1b1b;
    --surface-container: #1f1f1f;
    --surface-container-high: #2a2a2a;
    --surface-container-highest: #353535;
    --on-surface: #e2e2e2;
    --on-surface-variant: #c1caaf;
    --inverse-surface: #e2e2e2;
    --inverse-on-surface: #303030;
    --outline: #8b947c;
    --outline-variant: #414a35;
    --surface-tint: #8edb0d;

    --primary: #b1ff45;
    --on-primary: #203700;
    --primary-container: #94e21a;
    --on-primary-container: #3c6000;
    --inverse-primary: #416900;

    --secondary: #c6c6c7;
    --on-secondary: #2f3132;
    --secondary-container: #454748;
    --on-secondary-container: #b5b5b6;

    --tertiary: #ebe8e8;
    --on-tertiary: #313030;
    --tertiary-container: #cfcccc;
    --on-tertiary-container: #575656;

    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;

    --background: #131313;
    /* Terminal black / dark charcoal base */
    --on-background: #e2e2e2;

    --neon-lime: #94e21a;
    --neon-yellow: #fff01f;
    --neon-red: #ff2a2a;

    /* Spacing */
    --space-unit: 4px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
    --space-gutter: 24px;
    --space-margin: 48px;

    --container-max: 1440px;
}

/* Base Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    background-color: var(--background);
    color: var(--on-background);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Email Block */
.email-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--surface-container-highest);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--background);
    margin-bottom: var(--space-xl);
    transition: border-color 0.2s;
}

.email-block:hover {
    border-color: var(--neon-lime);
}

/* Copy Button */
.btn-copy {
    background: transparent;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-copy:hover {
    color: var(--neon-lime);
    transform: translateY(-2px);
}

.btn-copy:active {
    transform: translateY(0);
}

/* Typography Overrides */
h1,
h2,
h3,
.heading {
    font-family: "Space Grotesk", sans-serif;
    text-transform: uppercase;
    color: var(--on-surface);
}

h1 {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.body-lg {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.body-md {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

.label-caps {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

code,
.code {
    font-family: monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--neon-lime);
    background-color: var(--surface-container-highest);
    padding: 2px 4px;
}

/* Layout & Spacing */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-margin);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-gutter);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-gutter);
}

.section-divider {
    border: 0;
    border-top: 1px solid var(--surface-container-highest);
    margin: var(--space-xl) 0;
}

/* Navigation */
.nav-bar {
    position: sticky !important;
    top: 0;
    z-index: 1100;
}

/* Components */

/* Gameplay GIF Overlay */
.gif-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gif-showcase:hover .gif-overlay {
    opacity: 1;
}

/* Buttons */
button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    /* Sharp (0px) corners */
    transition:
        transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
    border: 2px solid;
}

.btn-primary {
    background-color: var(--neon-lime);
    color: #000000;
    border-color: var(--neon-lime);
    box-shadow: 4px 4px 0px var(--inverse-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #000000;
    color: var(--neon-lime);
}

.btn-primary:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px transparent;
}

.btn-secondary {
    background-color: transparent;
    color: var(--on-surface);
    border-color: var(--surface-container-highest);
    box-shadow: 4px 4px 0px var(--surface-container-highest);
}

.btn-secondary:hover,
.btn-secondary:focus {
    border-color: var(--on-surface);
    background-color: var(--surface-container-highest);
}

.btn-secondary:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px transparent;
}

/* Cards */
.card {
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--surface-container-highest);
    padding: var(--space-lg);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
}

.card-header {
    border-bottom: 1px solid var(--surface-container-highest);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.card-active {
    border-color: var(--neon-lime);
}

.card-active::before,
.card-active::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: var(--neon-lime);
}

.card-active::before {
    top: 0;
    left: 0;
}

.card-active::after {
    top: 0;
    right: 0;
}

.card-active .bottom-accents::before,
.card-active .bottom-accents::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: var(--neon-lime);
    bottom: 0;
}

.card-active .bottom-accents::before {
    left: 0;
}

.card-active .bottom-accents::after {
    right: 0;
}

/* Responsive Card */
.card-responsive {
    transition: border-color 0.2s;
}

.card-responsive:hover {
    border-color: var(--neon-lime);
}

.card-responsive::before,
.card-responsive::after,
.card-responsive .bottom-accents::before,
.card-responsive .bottom-accents::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: var(--neon-lime);
    opacity: 0;
    transition: opacity 0.2s;
}

.card-responsive::before {
    top: 0;
    left: 0;
}

.card-responsive::after {
    top: 0;
    right: 0;
}

.card-responsive .bottom-accents::before {
    bottom: 0;
    left: 0;
}

.card-responsive .bottom-accents::after {
    bottom: 0;
    right: 0;
}

.card-responsive:hover::before,
.card-responsive:hover::after,
.card-responsive:hover .bottom-accents::before,
.card-responsive:hover .bottom-accents::after {
    opacity: 1;
}

.card-responsive:hover .transition-color {
    color: var(--neon-lime);
    transition: color 0.2s;
}

/* Chips / Tags */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--surface-container);
    border: 1px solid var(--surface-container-highest);
    color: var(--on-surface-variant);
}

.chip .status-dot {
    width: 6px;
    height: 6px;
    background-color: var(--neon-lime);
    border-radius: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

/* Accordions */
.accordion {
    border: 1px solid var(--surface-container-highest);
    background-color: var(--surface-container-lowest);
}

.accordion summary {
    padding: var(--space-md);
    cursor: pointer;
    list-style: none;
    /* Hide default arrow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Space Grotesk", sans-serif;
    text-transform: uppercase;
    color: var(--on-surface);
    font-weight: 600;
    transition: background-color 0.2s;
    user-select: none;
    -webkit-user-select: none;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary:hover {
    background-color: var(--surface-container);
    color: var(--neon-lime);
}

.accordion summary::after {
    content: "+";
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    color: var(--neon-lime);
    margin-right: 8px;
}

.accordion[open] summary::after {
    content: "-";
}

.accordion .content {
    padding: var(--space-md);
    border-top: 1px solid var(--surface-container-highest);
}

/* Navigation */
.nav-bar {
    position: sticky;
    top: 0;
    height: 60px;
    background-color: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--surface-container-highest);
    display: flex;
    align-items: center;
    z-index: 100;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-links {
    display: flex;
    gap: var(--space-lg);
}

.nav-links a {
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--neon-lime);
}

.nav-links a::before {
    content: "[";
    opacity: 0;
    margin-right: 4px;
    color: var(--neon-lime);
    transition: opacity 0.2s;
}

.nav-links a::after {
    content: "]";
    opacity: 0;
    margin-left: 4px;
    color: var(--neon-lime);
    transition: opacity 0.2s;
}

.nav-links a:hover::before,
.nav-links a:hover::after,
.nav-links a.active::before,
.nav-links a.active::after {
    opacity: 1;
}

/* Landing Page Refined Navigation */
.refined-link {
    font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: 12px;
    transition:
        transform 0.1s ease-out,
        color 0.2s;
    cursor: pointer;
    user-select: none;
}

.refined-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 4px;
    height: 100%;
    background-color: var(--neon-lime);
    transition: transform 0.35s cubic-bezier(0.36, 0, 0.66, -0.56);
}

.refined-link:hover,
.refined-link.active {
    color: var(--neon-lime);
}

.refined-link:hover::before,
.refined-link.active::before {
    transform: translateY(-50%) scaleY(1);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.refined-link:active {
    transform: translate(4px, 4px);
}

/* Game Cards */
.game-card {
    border: 1px solid var(--surface-container-highest);
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        border-color 0.2s;
}

.game-card:hover:not(.disabled) {
    border-color: var(--neon-lime);
}

.game-card.beta:hover:not(.disabled) {
    border-color: var(--neon-yellow);
}

.game-card-media {
    position: relative;
    border-bottom: 1px solid var(--surface-container-highest);
}

.game-tag {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    background-color: rgba(19, 19, 19, 0.8);
    backdrop-filter: blur(4px);
    color: var(--neon-lime);
    border: 1px solid var(--neon-lime);
}

.game-card-content {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.game-card-action {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--on-surface-variant);
    transition: color 0.2s;
}

.indicator-square {
    width: 8px;
    height: 8px;
    background-color: var(--on-surface-variant);
    transition: background-color 0.2s;
}

.game-card:hover:not(.disabled) .game-card-action {
    color: var(--neon-lime);
}

.game-card:hover:not(.disabled) .indicator-square {
    background-color: var(--neon-lime);
}

.game-card.disabled {
    cursor: not-allowed;
    border-color: var(--surface-container-low);
}

/* Modals */
.modal-wrapper {
    display: flex;
    flex-direction: column;
}

.modal-content {
    border: 1px solid var(--surface-container-highest);
    background-color: var(--surface-container-lowest);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
}

.modal-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    justify-content: flex-end;
}

.modal-close {
    background: none;
    border: none;
    color: var(--on-surface-variant);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
    box-shadow: none;
}

.modal-close:hover {
    color: var(--on-surface);
}

/* Modal Variants */
.modal-info .modal-content {
    border-left: 4px solid var(--neon-lime);
}

.modal-info h3,
.modal-info .modal-close:hover {
    color: var(--neon-lime);
}

.modal-alert .modal-content {
    border-left: 4px solid var(--neon-yellow);
}

.modal-alert h3,
.modal-alert .modal-close:hover {
    color: var(--neon-yellow);
}

.modal-error .modal-content {
    border-left: 4px solid var(--neon-red);
}

.modal-error h3,
.modal-error .modal-close:hover {
    color: var(--neon-red);
}

/* Alert and Error Buttons */
.btn-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition:
        transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
    border: 2px solid var(--neon-yellow);
    background-color: var(--neon-yellow);
    color: #000000;
    box-shadow: 4px 4px 0px #807a00;
}

.btn-alert:hover {
    background-color: #000000;
    color: var(--neon-yellow);
}

.btn-alert:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 transparent;
}

.btn-error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition:
        transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
    border: 2px solid var(--neon-red);
    background-color: var(--neon-red);
    color: #000000;
    box-shadow: 4px 4px 0px #800000;
}

.btn-error:hover {
    background-color: #000000;
    color: var(--neon-red);
}

.btn-error:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 transparent;
}

/* Footer & Social Elements */
.social-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    border: 1px solid transparent;
    background-color: var(--surface-container-highest);
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-btn:hover {
    background-color: var(--surface-dim);
    color: var(--neon-lime);
    border-color: var(--neon-lime);
    transform: translateY(-2px);
}

.social-btn:active {
    transform: translateY(0);
}

.footer-link {
    color: var(--on-surface-variant);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.footer-link .indicator-square {
    background-color: var(--surface-container-highest);
    transition: background-color 0.2s;
    width: 8px;
    height: 8px;
    display: block;
}

.footer-link:hover {
    color: var(--neon-lime);
}

.footer-link:hover .indicator-square {
    background-color: var(--neon-lime);
}

.footer-link.active {
    color: var(--neon-lime);
}

.footer-link.active .indicator-square {
    background-color: var(--neon-lime);
}

/* Terminal Indicators */
.terminal-indicator {
    font-family: monospace;
    color: var(--on-surface-variant);
    font-size: 14px;
}

.terminal-indicator.highlight {
    color: var(--neon-lime);
}

/* GIF Showcase Overlay */
.gif-showcase {
    cursor: pointer;
}

.gif-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--space-xl);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.gif-showcase:hover .gif-overlay {
    opacity: 1;
}

/* Animations */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.blink {
    animation: blink 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Page Specific Nav */
.pp-nav {
    background-color: #000000;
    border-bottom: 1px solid var(--surface-container-highest);
}

.pp-nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100px;
    width: 100%;
}

.pp-nav-logo {
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.pp-nav-logo img {
    max-width: 150px;
    height: auto;
}

.pp-nav-links {
    display: flex;
    gap: var(--space-xl);
    align-items: center;
    justify-content: center;
}

.pp-nav-action {
    display: flex;
    justify-content: flex-end;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--space-lg);
    }
    
    .hero-text-content {
        order: 2;
    }
    
    .hero-video-content {
        order: 1;
        margin-bottom: var(--space-xl);
    }
    
    .gif-overlay {
        opacity: 1 !important;
    }
    
    .main-nav-container {
        grid-template-columns: auto 1fr auto !important;
        gap: var(--space-md) !important;
    }
    
    .desktop-nav-links {
        gap: var(--space-md) !important;
    }
    
    .pp-nav-container {
        grid-template-columns: auto 1fr auto;
        gap: var(--space-md);
    }
    
    .pp-nav-links {
        gap: var(--space-md);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .hero-text-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-text-content > div {
        justify-content: center;
        flex-wrap: wrap;
    }

    .main-nav-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 70px !important;
        padding: 0 var(--space-md) !important;
        gap: var(--space-xs) !important;
    }
    
    .main-nav-logo {
        flex: 0 0 auto !important;
    }
    
    .main-nav-logo img {
        max-width: 100px !important;
    }
    
    .desktop-nav-links {
        display: none !important;
    }
    
    .mobile-explore-btn {
        display: inline-flex !important;
        flex: 0 0 auto;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 1px solid var(--neon-lime);
        color: var(--neon-lime);
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0;
        margin: 0;
    }
    
    .main-nav-action {
        flex: 0 0 auto !important;
    }
    
    .main-nav-action .btn {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }

    .pp-nav-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        padding: 0 var(--space-md);
        gap: var(--space-xs);
    }
    
    .pp-nav-logo {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-start;
    }
    
    .pp-nav-logo img {
        max-width: 100px;
    }
    
    .pp-nav-links {
        flex: 1 1 auto;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0;
        overflow: hidden;
    }
    
    .hide-on-mobile {
        display: none !important;
    }
    
    .mobile-center-link {
        font-size: 14px;
        padding-left: 0;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        letter-spacing: 0.05em;
    }
    
    .mobile-center-link::before {
        display: none;
    }
    
    .pp-nav-action {
        flex: 0 0 auto;
        justify-content: flex-end;
    }
    
    .pp-nav-action .btn {
        padding: 8px 16px !important;
        font-size: 12px;
        border-width: 1px;
        box-shadow: 2px 2px 0px var(--inverse-primary);
    }
    
    .pp-nav-action .btn:active {
        transform: translate(2px, 2px);
        box-shadow: 0px 0px 0px transparent;
    }
    
    main section.container {
        padding-top: 80px !important;
    }
    
    .card {
        padding: var(--space-md) !important;
    }
    
    .btn-copy {
        opacity: 1 !important;
    }

    /* Adjust the heading and terminal indicator in the header section for legal pages */
    main section.container:not([id]) > div:first-child {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--space-xs);
    }
}

/* Mobile Dropdown Menu Styles */
.mobile-dropdown-menu {
    flex-direction: column;
    background: #000000;
    border-bottom: 1px solid var(--surface-container-highest);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: var(--space-md) 0;
}

.mobile-dropdown-menu.show {
    display: flex !important;
}

.mobile-dropdown-link {
    width: 100%;
    text-align: center;
    padding: var(--space-sm) 0;
    justify-content: center;
}
.mobile-dropdown-link::before {
    display: none;
}