/* ==========================================================
   CUSTOM FONT DECLARATION
   ========================================================== */
@font-face {
    font-family: 'Byrd';
    src: url('fonts/byrd-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================
   CSS VARIABLES (ROOT COLORS) - ENHANCED RETRO THEME
   ========================================================== */
:root {
    /* 🎨 PRIMARY COLORS - ENHANCED RETRO */
    --primary-gray: #c0c0c0;
    --primary-gray-light: #dfdfdf;
    --primary-gray-dark: #808080;
    --primary-gray-darker: #404040;
    --primary-black: #000000;
    --primary-white: #ffffff;

    /* 🌙 ENHANCED RETRO THEME COLORS */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: #111111;
    --bg-overlay: rgba(0, 0, 0, 0.95);
    --bg-navbar: rgba(10, 10, 10, 0.95);

    /* 📝 TEXT COLORS - WHITE THEME */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #aaaaaa;
    --text-gray: #666666;
    --text-gray-light: #888888;
    --text-gray-dark: #333333;

    /* 🔗 BORDER COLORS - WHITE THEME */
    --border-primary: #ffffff;
    --border-gray: #333333;
    --border-gray-light: #444444;
    --border-gray-dark: #222222;

    /* ✨ ENHANCED RETRO EFFECTS - WHITE THEME */
    --shadow-inset: inset 2px 2px 0px 0px #ffffff, inset -2px -2px 0px 0px #444444;
    --shadow-outset: 2px 2px 0px 0px #ffffff;
    --shadow-button: inset 1px 1px 0px 0px #ffffff, inset -1px -1px 0px 0px #444444;

    /* 🌟 SHINE EFFECT COLORS - WHITE THEME */
    --shine-color: rgba(255, 255, 255, 0.25);

    /* 🎯 NOTIFICATION COLORS */
    --success-color: #ffffff;
    --error-color: #ff0000;
    --info-color: #00cc00;

    /* 🎨 BUTTON COLORS - WHITE THEME */
    --btn-buy-bg: #1a1a1a;
    --btn-buy-bg-hover: #333333;
    --btn-buy-border: #ffffff;
    --btn-buy-border-hover: #dddddd;
    --btn-buy-shadow: #ffffff;
    --btn-buy-shadow-hover: #dddddd;
    --btn-buy-shine: #ffffff;

    /* 🎨 TEXT SECTION COLORS - WHITE THEME */
    --text-marketcap: #ffffff;
    --text-volume: #ffffff;
    --text-liquidity: #ffffff;
    --text-fdv: #ffffff;
    --text-supply: #ffffff;
    --text-tokenomics-marketcap: #ffffff;
    --text-tokenomics-priceusd: #ffffff;
    --text-hero-priceusd: #ffffff;
    --text-hero-pricenative: #ffffff;
    --text-hero-change: #ffffff;

    /* 🎨 SECONDARY BUTTON COLORS - WHITE THEME */
    --btn-secondary-bg: #1a1a1a;
    --btn-secondary-bg-hover: #333333;
    --btn-secondary-border: #dddddd;
    --btn-secondary-border-hover: #bbbbbb;
    --btn-secondary-shadow: #dddddd;
    --btn-secondary-shadow-hover: #bbbbbb;
    --btn-secondary-shine: #dddddd;

    --notif-green: #00ff00;

    /* ==========================================================
       WOB KING OF FROG COLOR PALETTE - ENHANCED
       ========================================================== */
    /* PRIMARY (Enhanced Retro) */
    --wob-gray: #1a1a1a;
    --wob-gray-light: #333333;
    --wob-gray-dark: #111111;
    --wob-gray-darker: #0a0a0a;

    /* ACCENT (Enhanced Colors) */
    --wob-blue: #0080ff;
    --wob-red: #ff0000;
    --wob-green: #00ff00;
    --wob-yellow: #ffff00;

    /* BACKGROUND (Enhanced Desktop) */
    --wob-desktop: #0a0a0a;
    --wob-window: #1a1a1a;
    --wob-taskbar: #111111;

    /* GRADIENTS */
    --wob-gradient-main: linear-gradient(90deg, #1a1a1a 0%, #333333 100%);
    --wob-gradient-accent: linear-gradient(90deg, #00ff00 0%, #00cc00 100%);
    --wob-gradient-button: linear-gradient(90deg, #333333 0%, #1a1a1a 100%);
}

/* ==========================================================
   GLOBAL STYLES
   ========================================================== */
body,
html,
* {
    color: var(--text-primary) !important;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Press Start 2P', 'Courier New', 'Courier', monospace;
    background-color: var(--bg-primary);
    min-height: 100vh;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: var(--text-primary);
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ==========================================================
   ANIMATIONS
   ========================================================== */
@keyframes flash-update {
    0% {
        color: inherit;
        transform: scale(1);
    }

    50% {
        color: #22d3ee;
        transform: scale(1.02);
    }

    100% {
        color: inherit;
        transform: scale(1);
    }
}

.flash-update {
    animation: flash-update 0.5s ease-in-out;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes flashGreen {
    0% {
        color: inherit;
        transform: scale(1);
    }

    50% {
        color: #22c55e;
        transform: scale(1.05);
    }

    100% {
        color: inherit;
        transform: scale(1);
    }
}

.flash-green {
    animation: flashGreen 0.6s ease-in-out;
}

@keyframes flashRed {
    0% {
        color: inherit;
        transform: scale(1);
    }

    50% {
        color: #ef4444;
        transform: scale(1.05);
    }

    100% {
        color: inherit;
        transform: scale(1);
    }
}

.flash-red {
    animation: flashRed 0.6s ease-in-out;
}

/* ==========================================================
   UTILITY CLASSES
   ========================================================== */
.font-inter {
    font-family: 'Byrd', 'Inter', sans-serif;
}

.backdrop-blur-md {
    background: var(--bg-navbar);
    border: 2px solid var(--border-gray);
}

.bg-gradient-to-r {
    background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

.text-transparent {
    color: transparent;
}

.shadow-custom {
    box-shadow: var(--shadow-outset);
}

.loading-data {
    color: var(--text-primary);
    font-style: italic;
    animation: pulse 2s infinite;
}

/* ==========================================================
   RESPONSIVE TYPOGRAPHY
   ========================================================== */
@media (max-width: 768px) {
    .text-5xl {
        font-size: 2.5rem;
    }

    .text-6xl {
        font-size: 3rem;
    }

    .text-4xl {
        font-size: 2rem;
    }

    .text-3xl {
        font-size: 1.5rem;
    }
}

/* ==========================================================
   CARD STYLES
   ========================================================== */
.card,
.contract-address-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    padding: 1.5rem;
}

.card:hover,
.contract-address-card:hover {
    transform: scale(0.98);
    box-shadow: var(--shadow-inset);
}

.card:active,
.contract-address-card:active {
    transform: scale(0.95);
}

.card svg,
.contract-address-card svg {
    transition: transform 0.4s ease;
}

.card:hover svg,
.contract-address-card:hover svg {
    transform: scale(1.05);
}

.card::before,
.contract-address-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--shine-color), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.card:hover::before,
.contract-address-card:hover::before {
    left: 100%;
}

/* ==========================================================
   BUTTON STYLES
   ========================================================== */
/* 3D Button Styles */
.btn-buy {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    border-width: 0;
    padding: 0 8px 12px;
    min-width: 150px;
    box-sizing: border-box;
    background: transparent;
    font: inherit;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    font-weight: bold;
}

.btn-buy .button-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    padding: 8px 16px;
    transform: translateY(0);
    text-align: center;
    color: #000000;
    text-shadow: 0 -1px rgba(0, 0, 0, .25);
    transition-property: transform;
    transition-duration: .2s;
    -webkit-user-select: none;
    user-select: none;
}

.btn-buy:active .button-top {
    transform: translateY(6px);
}

.btn-buy .button-top::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    background-image: radial-gradient(#ffb84d, #cc7a00);
    text-align: center;
    color: #ffff00;
    box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
    transition-property: border-radius, padding, width, transform;
    transition-duration: .2s;
}

.btn-buy:active .button-top::after {
    border-radius: 6px;
    padding: 0 2px;
}

.btn-buy .button-bottom {
    position: absolute;
    z-index: -1;
    bottom: 4px;
    left: 4px;
    border-radius: 8px / 16px 16px 8px 8px;
    padding-top: 6px;
    width: calc(100% - 8px);
    height: calc(100% - 10px);
    box-sizing: content-box;
    background-color: #333333;
    background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .22), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .22), transparent), radial-gradient(16px at -4px 0, #ffffff, transparent), radial-gradient(16px at calc(100% + 4px) 0, #ffffff, transparent);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
    transition-property: border-radius, padding-top;
    transition-duration: .2s;
}

.btn-buy:active .button-bottom {
    border-radius: 10px 10px 8px 8px / 8px;
    padding-top: 0;
}

.btn-buy .button-base {
    position: absolute;
    z-index: -2;
    top: 4px;
    left: 0;
    border-radius: 12px;
    width: 100%;
    height: calc(100% - 4px);
    background-color: rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .75), inset 0 2px 2px rgba(0, 0, 0, .25);
}

nav .btn-buy {
    width: auto;
    height: 45px;
    padding: 0 25px;
    font-size: 11px;
    border-width: 2px;
}

.btn-secondary {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    border-width: 0;
    padding: 0 8px 12px;
    min-width: 150px;
    box-sizing: border-box;
    background: transparent;
    font: inherit;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    font-weight: bold;
}

.btn-secondary .button-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    padding: 8px 16px;
    transform: translateY(0);
    text-align: center;
    color: #000000;
    text-shadow: 0 -1px rgba(0, 0, 0, .25);
    transition-property: transform;
    transition-duration: .2s;
    -webkit-user-select: none;
    user-select: none;
}

.btn-secondary:active .button-top {
    transform: translateY(6px);
}

.btn-secondary .button-top::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    background-image: radial-gradient(#ffcc80, #cc7a00);
    text-align: center;
    color: #fff;
    box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
    transition-property: border-radius, padding, width, transform;
    transition-duration: .2s;
}

.btn-secondary:active .button-top::after {
    border-radius: 6px;
    padding: 0 2px;
}

.btn-secondary .button-bottom {
    position: absolute;
    z-index: -1;
    bottom: 4px;
    left: 4px;
    border-radius: 8px / 16px 16px 8px 8px;
    padding-top: 6px;
    width: calc(100% - 8px);
    height: calc(100% - 10px);
    box-sizing: content-box;
    background-color: #333333;
    background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .22), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .22), transparent), radial-gradient(16px at -4px 0, #ffffff, transparent), radial-gradient(16px at calc(100% + 4px) 0, #ffffff, transparent);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
    transition-property: border-radius, padding-top;
    transition-duration: .2s;
}

.btn-secondary:active .button-bottom {
    border-radius: 10px 10px 8px 8px / 8px;
    padding-top: 0;
}

.btn-secondary .button-base {
    position: absolute;
    z-index: -2;
    top: 4px;
    left: 0;
    border-radius: 12px;
    width: 100%;
    height: calc(100% - 4px);
    background-color: rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .75), inset 0 2px 2px rgba(0, 0, 0, .25);
}

.btn-secondary:hover .button-top {
    transform: translateY(-1px);
}

.btn-secondary:hover .button-top::after {
    background-image: radial-gradient(#ffb84d, #ffcc80);
}

.btn-buy:hover .button-top {
    transform: translateY(-1px);
}

.btn-buy:hover .button-top::after {
    background-image: radial-gradient(#ffcc80, #ffb84d);
}

/* ==========================================================
   NAVBAR STYLES
   ========================================================== */
.navbar-overlay {
    position: fixed;
    top: 32px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-navbar);
    border-bottom: 2px solid var(--border-gray);
    box-shadow: var(--shadow-outset);
    height: 2.5rem;
    backdrop-filter: blur(10px);
}

.nav-content {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.5rem;
}

.nav-content .flex.items-center.gap-3 img {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.nav-content .flex.items-center.gap-3 span {
    font-size: 1.125rem !important;
}

.nav-content .hidden.md\:flex.gap-8.text-lg.font-medium {
    gap: 1rem !important;
    font-size: 0.875rem !important;
}

.btn-social img {
    width: 1rem !important;
    height: 1rem !important;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.btn-buy.pixel-button {
    font-size: 0.875rem !important;
    padding: 0.25rem 0.75rem !important;
    height: 1.75rem !important;
    min-width: 0 !important;
}

/* Small 3D Button Styles */
.btn-buy.px-4.py-2.text-xs,
.btn-secondary.px-4.py-2.text-xs {
    min-width: auto;
    padding: 0 4px 8px;
}

.btn-buy.px-4.py-2.text-xs .button-top,
.btn-secondary.px-4.py-2.text-xs .button-top {
    padding: 4px 8px;
    font-size: 0.75rem;
}

.btn-buy.px-4.py-2.text-xs .button-bottom,
.btn-secondary.px-4.py-2.text-xs .button-bottom {
    bottom: 2px;
    left: 2px;
    padding-top: 4px;
    width: calc(100% - 4px);
    height: calc(100% - 6px);
}

.btn-buy.px-4.py-2.text-xs .button-base,
.btn-secondary.px-4.py-2.text-xs .button-base {
    top: 2px;
    height: calc(100% - 2px);
}

/* ==========================================================
   HERO SECTION
   ========================================================== */
.hero-fullscreen {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-fullscreen .hero-content {
    padding-top: 120px;
    padding-bottom: 80px;
    z-index: 10;
    position: relative;
}

/* ==========================================================
   MARQUEE STYLES
   ========================================================== */
.marquee-outer-container {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.marquee-row {
    overflow: hidden;
}

.marquee-content-wrapper {
    display: inline-block;
    white-space: nowrap;
    font-size: 0;
    will-change: transform;
}

.marquee-image {
    height: 240px;
    width: 240px;
    object-fit: cover;
    margin-right: 1.2rem;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--bg-card);
    border: 2px solid var(--border-gray);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-outset);
}

.marquee-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.marquee-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--shine-color), transparent);
    transition: left 0.5s ease;
    z-index: 2;
}

/* ==========================================================
   TWITTER EMBED STYLES
   ========================================================== */
.twitter-embed-container {
    background: var(--bg-card);
    border: 2px solid var(--border-gray);
    padding: 1.5rem;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-outset);
    border-radius: 0;
}

.twitter-tweet {
    width: 100% !important;
    max-width: 100% !important;
}

.twitter-tweet iframe {
    width: 100% !important;
    max-width: 100% !important;
}

.twitter-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    color: var(--text-primary);
    font-size: 1rem;
    min-height: 200px;
}

.twitter-loading::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-gray);
    border-top: 3px solid var(--text-primary);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   RESPONSIVE DESIGN
   ========================================================== */
@media (max-width: 1024px) {
    .twitter-embed-container {
        min-height: 250px;
        padding: 1rem;
    }

    .twitter-loading {
        min-height: 150px;
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .marquee-image {
        height: 180px;
        width: 180px;
        margin-right: 0.9rem;
    }

    .twitter-embed-container {
        min-height: 200px;
        padding: 0.75rem;
    }

    .twitter-loading {
        min-height: 120px;
        font-size: 0.75rem;
    }

    .navbar-overlay,
    .nav-content {
        height: 2rem;
    }

    .nav-content .flex.items-center.gap-3 img {
        width: 1.1rem !important;
        height: 1.1rem !important;
    }

    .nav-content .flex.items-center.gap-3 span {
        font-size: 1rem !important;
    }

    .btn-buy.pixel-button {
        font-size: 0.75rem !important;
        height: 1.25rem !important;
    }
}

@media (max-width: 640px) {
    .marquee-image {
        height: 120px;
        width: 120px;
        margin-right: 0.6rem;
    }

    .twitter-loading {
        min-height: 100px;
        font-size: 0.75rem;
        gap: 0.5rem;
    }

    .twitter-loading::before {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }
}

@media (max-width: 480px) {
    body {
        overflow-x: hidden;
    }

    * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .marquee-image {
        height: 100px;
        width: 100px;
        margin-right: 0.5rem;
    }
}

/* ==========================================================
   UTILITY OVERRIDES
   ========================================================== */
.text-sm,
.text-xs,
small,
.text-muted,
.text-gray-400,
.text-gray-300 {
    color: var(--text-primary) !important;
}

/* ==========================================================
   UTILITY CLASSES
   ========================================================== */
.font-pixel {
    font-family: 'Press Start 2P', monospace;
}

.bg-card {
    background-color: var(--bg-card);
}

.bg-primary {
    background-color: transparent;
}

.bg-secondary {
    background-color: transparent;
}

.border-primary {
    border-color: var(--border-primary);
}

.border-gray {
    border-color: var(--border-gray);
}

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.hover\:border-primary:hover {
    border-color: var(--border-primary);
}

.hover\:bg-primary\/10:hover {
    background-color: rgba(138, 43, 226, 0.1);
}

/* ==========================================================
   ADDITIONAL UTILITY CLASSES
   ========================================================== */
.pt-20 {
    padding-top: 5rem;
}

.w-11\/12 {
    width: 91.666667%;
}

.max-w-6xl {
    max-width: 72rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.m-5 {
    margin: 1.25rem;
}

.min-h-\[500px\] {
    min-height: 500px;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.p-3 {
    padding: 0.75rem;
}

.border-2 {
    border-width: 2px;
}

.cursor-pointer {
    cursor: pointer;
}

.transition-all {
    transition: all 0.3s ease;
}

.duration-300 {
    transition-duration: 300ms;
}

.mt-10 {
    margin-top: 2.5rem;
}

.gap-5 {
    gap: 1.25rem;
}

.p-4 {
    padding: 1rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.w-12 {
    width: 3rem;
}

.h-12 {
    height: 3rem;
}

.bg-gray-600 {
    background-color: #4b5563;
}

.border-3 {
    border-width: 3px;
}

.border-gray-500 {
    border-color: #6b7280;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.text-white {
    color: #ffffff;
}

.font-bold {
    font-weight: 700;
}

.w-20 {
    width: 5rem;
}

.bg-orange-500 {
    background-color: #f97316;
}

.border-orange-400 {
    border-color: #fb923c;
}

.relative {
    position: relative;
}

.z-10 {
    z-index: 10;
}

.p-10 {
    padding: 2.5rem;
}

.text-center {
    text-align: center;
}

@media (min-width: 768px) {
    .md\:text-7xl {
        font-size: 4.5rem;
    }
}

/* ==========================================================
   ADDITIONAL UTILITY CLASSES FOR PLAYER SELECTION
   ========================================================== */
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.border-4 {
    border-width: 4px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.p-8 {
    padding: 2rem;
}

.gap-2 {
    gap: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.w-16 {
    width: 4rem;
}

.h-12 {
    height: 3rem;
}

.rounded {
    border-radius: 0.25rem;
}

.duration-200 {
    transition-duration: 200ms;
}

.hover\:translate-y-\[-1px\]:hover {
    transform: translateY(-1px);
}

.hover\:bg-secondary:hover {
    background-color: var(--bg-secondary);
}

.w-20 {
    width: 5rem;
}

.w-72 {
    width: 18rem;
}

.hover\:bg-primary\/10:hover {
    background-color: rgba(138, 43, 226, 0.1);
}

.w-24 {
    width: 6rem;
}

.text-black {
    color: #000000;
}

.mt-8 {
    margin-top: 2rem;
}

.p-5 {
    padding: 1.25rem;
}

.inline-block {
    display: inline-block;
}

.w-20 {
    width: 5rem;
}

.h-20 {
    height: 5rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.rounded-full {
    border-radius: 9999px;
}

.w-12 {
    width: 3rem;
}

.h-12 {
    height: 3rem;
}

.text-green-400 {
    color: #4ade80;
}

/* ==========================================================
   GRID AND HOVER EFFECTS
   ========================================================== */
.grid {
    display: grid;
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gap-3 {
    gap: 0.75rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.overflow-hidden {
    overflow: hidden;
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:border-primary:hover {
    border-color: var(--border-primary);
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.object-cover {
    object-fit: cover;
}

/* ==========================================================
   RESPONSIVE GRID
   ========================================================== */
@media (max-width: 768px) {
    .grid-cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.transition-all {
    transition: all 0.3s ease;
}

.duration-300 {
    transition-duration: 300ms;
}

/* ==========================================================
   RESPONSIVE UTILITIES
   ========================================================== */
@media (max-width: 768px) {
    .hidden.md\:flex {
        display: none;
    }

    .header-actions {
        gap: 0.5rem;
    }

    .btn-buy.pixel-button,
    .btn-secondary.pixel-button {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
}

/* ==========================================================
   PRELOADER STYLES
   ========================================================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

#preloader.fade-out {
    opacity: 0;
}

.preloader-logo {
    margin-bottom: 20px;
    animation: logoZoomOut 2s ease-in-out;
}

.preloader-logo img {
    width: 128px;
    height: 128px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.5));
}

@keyframes logoZoomOut {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .preloader-logo img {
        width: 192px;
        height: 192px;
    }
}

/* ==========================================================
   ENHANCED RETRO EFFECTS
   ========================================================== */
.retro-header {
    background: var(--bg-navbar);
    border-bottom: 2px solid var(--border-primary);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
}

.retro-arcade-hero {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 2;
}

.arcade-cabinet {
    background: var(--bg-card);
    border: 12px solid var(--border-gray);
    border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.9);
}

.arcade-screen {
    background: var(--bg-primary);
    border: 4px solid var(--border-gray);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.scan-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);
    pointer-events: none;
    z-index: 1;
}

.mechanical-key {
    background: var(--bg-card);
    border: 2px solid var(--border-gray);
    border-radius: 4px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.mechanical-key:hover {
    transform: translateY(-1px);
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

.mechanical-key:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.meme-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
}

.meme-item {
    aspect-ratio: 1;
    background: var(--bg-card);
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.meme-item:hover {
    transform: scale(1.05);
    border-color: var(--border-primary);
}

.meme-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================
   ANIMATIONS FOR RETRO EFFECTS
   ========================================================== */
@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.3;
    }
}

.blinking-text {
    animation: blink 1.5s infinite;
}

@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100vh);
    }
}

.crt-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.1) 50%);
    background-size: 100% 2px;
    animation: scanline 8s linear infinite;
    pointer-events: none;
}





/* ==========================================================
               FOOTER STYLES - ENHANCED RETRO
               ========================================================== */
.retro-footer {
    padding: 2rem 0;
    margin-top: 2.5rem;
}

.footer-container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.footer-content {
    text-align: center;
}

.footer-logo {
    margin-bottom: 1.25rem;
}

.logo-display {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 2px solid var(--border-gray);
    border-radius: 0.5rem;
    padding: 1rem;
}

.logo-icon {
    width: 2rem;
    height: 2rem;
    background: var(--border-gray);
    border: 1px solid var(--border-gray-light);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.footer-link {
    color: var(--text-primary);
    text-decoration: none;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: var(--text-secondary);
}

.footer-copyright {
    margin-top: 2rem;
        padding-top: 1rem;
        font-size: 0.875rem;
    color: var(--text-muted);
}

#ca-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    padding: 10px 15px;
    border-radius: 10px;
}

/* ==========================================================
               ENHANCED UTILITY CLASSES
               ========================================================== */
.bg-black {
    background-color: transparent;
}

.border-t-2 {
    border-top-width: 2px;
}

.border-t {
    border-top-width: 1px;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-8 {
    gap: 2rem;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

.text-muted {
    color: var(--text-muted);
}

.no-underline {
    text-decoration: none;
}

.pt-4 {
    padding-top: 1rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.hover\:text-secondary:hover {
    color: var(--text-secondary);
}

/* ==========================================================
               ENHANCED VISUAL EFFECTS
   ========================================================== */

/* Glitch effect for buttons */
.btn-buy:hover,
.btn-secondary:hover {
    animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Enhanced scan lines effect */
.crt-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 50%,
            rgba(0, 255, 0, 0.03) 50%);
    background-size: 100% 4px;
    animation: scanline 8s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Enhanced arcade screen */
.arcade-screen {
    position: relative;
    background: var(--bg-card);
    border: 3px solid var(--border-primary);
    border-radius: 0.5rem;
    overflow: hidden;
}

.game-title img {
    transition: all 0.3s ease;
}

.game-title img:hover {
    transform: scale(1.01);
}

/* Enhanced mechanical key effects */
.mechanical-key {
    position: relative;
    background: var(--bg-card);
    border: 2px solid var(--border-gray);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mechanical-key:hover {
    transform: translateY(-1px);
    border-color: var(--border-primary);
}

.mechanical-key:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Enhanced meme grid effects */
.meme-item {
    position: relative;
    background: var(--bg-card);
    border: 2px solid var(--border-gray);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.meme-item:hover {
    transform: scale(1.01);
    border-color: var(--border-primary);
}

.meme-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.meme-item:hover::before {
    left: 100%;
}

/* Enhanced header */
.retro-header {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--border-primary);
}

/* Enhanced logo */
.logo-container {
    /* No glow effects */
}

/* Enhanced navigation hover effects */
.nav-item:hover {
    background: rgba(138, 43, 226, 0.1);
}

/* Enhanced social buttons */
.social-btn:hover {
    transform: translateY(-2px);
}

/* Enhanced contract display */
.contract-display {
    /* No glow effects */
}

/* Enhanced copy button */
.copy-btn:hover {
    background: var(--bg-secondary);
}

/* Enhanced retro keyboard */
.retro-keyboard {
    /* No glow effects */
}

/* Enhanced player card */
.player-card {
    /* No glow effects */
}

/* Enhanced footer */
.retro-footer {
    /* No glow effects */
}

.logo-display {
    /* No glow effects */
}

/* Enhanced responsive design */
@media (max-width: 768px) {
    .retro-header {
        padding: 0.5rem;
    }

    .header-container {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-buy,
    .btn-secondary {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .arcade-cabinet {
        margin: 1rem;
    }

    .game-content {
        padding: 2rem 1rem;
    }

    .game-title img {
        max-height: 80px;
    }

    .retro-keyboard {
        padding: 1rem;
    }

    .keyboard-row {
        gap: 0.5rem;
    }

    .mechanical-key {
        width: 3rem;
        height: 2.5rem;
        font-size: 0.6rem;
    }

    .space-bar {
        width: 100%;
    }

    .meme-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .footer-links {
        gap: 1rem;
    }

    .footer-link {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .game-title img {
        max-height: 60px;
    }

    .meme-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mechanical-key {
        width: 2.5rem;
        height: 2rem;
        font-size: 0.5rem;
    }

    .logo-display {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ==========================================================
           ENHANCED NOTIFICATIONS & EFFECTS
           ========================================================== */

/* Ripple effect for buttons */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(138, 43, 226, 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Enhanced notification system */
.enhanced-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
    border-radius: 0.5rem;
    padding: 1rem;
    color: var(--text-primary);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
    z-index: 10000;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.enhanced-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.enhanced-notification.success {
    border-color: var(--success-color);
}

.enhanced-notification.error {
    border-color: var(--error-color);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.enhanced-notification.info {
    border-color: var(--info-color);
    box-shadow: 0 4px 12px rgba(0, 128, 255, 0.3);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notification-icon {
    font-size: 1rem;
    font-weight: bold;
}

.notification-message {
    flex: 1;
}

/* Enhanced meme modal */
#meme-modal {
    transition: all 0.3s ease;
}

#meme-modal .modal-content {
    transition: all 0.3s ease;
}

/* Enhanced button positioning for ripple */
.btn-buy,
.btn-secondary,
.mechanical-key {
    position: relative;
    overflow: hidden;
}

/* Enhanced button effects */
.btn-buy,
.btn-secondary {
    /* No glow animation */
}

/* ==========================================================
   FROG GALLERY STYLES
   ========================================================== */

.frog-gallery {
    margin-bottom: 2rem;
}

.frog-item {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    aspect-ratio: 1;
    min-height: 60px;
}

.frog-item:hover {
    transform: scale(1.02);
    border-color: var(--border-primary);
    z-index: 10;
}

.frog-item img {
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frog-item:hover img {
    transform: scale(1.05);
}

/* Responsive grid adjustments */
@media (max-width: 1200px) {
    .frog-gallery {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (max-width: 768px) {
    .frog-gallery {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 480px) {
    .frog-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

.selected-frog-card {
    position: relative;
    overflow: hidden;
}

.frog-preview img {
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.frog-preview img:hover {
    transform: scale(1.05);
}

.frog-actions {
    margin-top: 1rem;
}

.frog-actions button {
    min-width: 120px;
    height: 40px;
    font-size: 10px;
}

.frog-stats {
    background: rgba(138, 43, 226, 0.05);
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(138, 43, 226, 0.2);
}

.frog-stats div {
    margin: 0.25rem 0;
}

/* Notification animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Enhanced loading text animation */
.loading-dots {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Enhanced section transitions */
section {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Enhanced responsive notifications */
@media (max-width: 768px) {
    .enhanced-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        transform: translateY(-100%);
    }

    .enhanced-notification.show {
        transform: translateY(0);
    }
}

/* ==========================================================
           MATRIX RAIN BACKGROUND EFFECT
           ========================================================== */
.matrix-rain-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: #000;
}

.matrix-rain-background canvas {
    display: block;
}

/* ==========================================================
           FLOATING PIXEL FROGS BACKGROUND
           ========================================================== */
.floating-frogs-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background: transparent;
}

.floating-frogs-background canvas {
    display: block;
}

/* Ensure content is above particles */
.retro-header,
.retro-arcade-hero,
.player-selection-section,
.skills-section,
.contract-section,
.social-section,
.retro-footer {
    position: relative;
    z-index: 2;
}

/* ==========================================================
           GLOBAL CRT EFFECT FOR ENTIRE PAGE
   ========================================================== */

/* Global CRT Effect for entire page */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.08) 50%,
            transparent 50%);
    background-size: 100% 3px;
    pointer-events: none;
    z-index: 9998;
    animation: scanline 8s linear infinite;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at center,
            transparent 0%,
            rgba(0, 0, 0, 0.02) 50%,
            rgba(0, 0, 0, 0.05) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.02"/></svg>');
    pointer-events: none;
    z-index: 9999;
    animation: crt-noise 0.2s infinite;
}

/* Global CRT Flicker for entire page */
html {
    animation: crt-flicker 1.5s infinite;
}

/* CRT Flicker Effect */
.crt-flicker {
    animation: crt-flicker 1.5s infinite;
}

@keyframes crt-flicker {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.98;
    }
}

/* CRT Glow Effect */
.crt-glow {
    box-shadow:
        0 0 20px rgba(0, 255, 0, 0.1),
        0 0 40px rgba(0, 255, 0, 0.05),
        inset 0 0 20px rgba(0, 255, 0, 0.02);
}

/* CRT Screen Curvature */
.crt-curve {
    border-radius: 20px;
    background: radial-gradient(ellipse at center,
            rgba(0, 255, 0, 0.02) 0%,
            transparent 70%);
}

/* Enhanced CRT Scan Lines */
.crt-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px);
    pointer-events: none;
    z-index: 1;
}



/* Individual CRT Noise Effect (for specific elements) */
.crt-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.02"/></svg>');
    pointer-events: none;
    z-index: 3;
    animation: crt-noise 0.2s infinite;
}

@keyframes crt-noise {

    0%,
    100% {
        opacity: 0.02;
    }

    50% {
        opacity: 0.04;
    }
}

/* ==========================================================
           MAC CLASSIC WINDOWS STYLES
           ========================================================== */
.mac-windows-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    /* Ensure windows are above other content */
    pointer-events: none;
}

.mac-window {
    position: absolute;
    width: 320px;
    height: 240px;
    background: #1a1a1a;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.18);
    pointer-events: auto;
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    transition: box-shadow 0.3s ease;
    /* Allow windows to overlap CRT screen more */
    max-width: 55vw;
    max-height: 50vh;
}

.mac-window.dragging {
    box-shadow: 0 12px 40px rgba(138, 43, 226, 0.5);
    z-index: 1001;
}

.mac-window-header {
    background: linear-gradient(135deg, #ffffff, #dddddd);
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid #ffffff;
    border-radius: 6px 6px 0 0;
    position: relative;
    cursor: move;
}

.mac-window-buttons {
    display: flex;
    gap: 6px;
    margin-right: 12px;
}

.mac-button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mac-button:hover {
    transform: scale(1.1);
}

.mac-button.close {
    background: #ff5f57;
}

.mac-button.close:hover {
    background: #ff4444;
}

.mac-button.minimize {
    background: #ffbd2e;
}

.mac-button.minimize:hover {
    background: #ffaa00;
}

.mac-button.maximize {
    background: #28ca42;
}

.mac-button.maximize:hover {
    background: #22aa33;
}

.mac-window-title {
    color: #ffff00;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Press Start 2P', monospace;
    text-shadow: 1px 1px 0 #000;
    flex-grow: 1;
    text-align: center;
    letter-spacing: 1px;
}

.mac-window-content {
    padding: 12px;
    height: calc(100% - 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    border-radius: 0 0 6px 6px;
}

.mac-window-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #ffffff;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.mac-window-image:hover {
    transform: scale(1.05);
}

.mac-window:hover {
    border-color: #ffffff;
    box-shadow: 0 12px 40px rgba(255, 255, 255, 0.22);
}

@media (max-width: 768px) {
    .mac-window {
        width: 280px;
        height: 210px;
        max-width: 50vw;
        max-height: 45vh;
    }

    .mac-window-title {
        font-size: 10px;
    }

    .mac-window-content {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .mac-window {
        width: 240px;
        height: 180px;
        max-width: 45vw;
        max-height: 40vh;
    }

    .mac-window-header {
        height: 25px;
    }

    .mac-button {
        width: 12px;
        height: 12px;
    }

    .mac-window-title {
        font-size: 8px;
    }
}

/* ==========================================================
   FLOATING MATRIX NAVBAR STYLES
   ========================================================== */
.floating-header {
    animation: float 3s ease-in-out infinite;
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.floating-navbar {
    animation: glow 2s ease-in-out infinite alternate;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

@keyframes float {

    0%,
    100% {
        transform: translateX(-50%) translateY(0px);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
    }

    100% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
    }
}

.floating-navbar .nav-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.floating-navbar .logo-container {
    animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    }

    50% {
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.8);
    }
}

/* Responsive navbar positioning */
@media (max-width: 768px) {
    .floating-header {
        top: 16px;
        width: 90%;
        max-width: 500px;
    }

    .floating-navbar {
        padding: 12px 16px;
    }

    .header-container {
        gap: 4px;
    }

    .header-nav {
        gap: 2px;
    }

    .nav-item {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .floating-header {
        top: 12px;
        width: 95%;
    }

    .floating-navbar {
        padding: 8px 12px;
    }

    .header-container {
        gap: 2px;
    }

    .logo-container {
        width: 8px !important;
        height: 8px !important;
    }

    .logo-title {
        font-size: 10px !important;
    }
}

/* ==========================================================
   IMAGE GENERATOR SECTION STYLES
   ========================================================== */
.image-generator-section {
    position: relative;
    z-index: 100;
    min-height: 400px;
    display: block !important;
    visibility: visible !important;
}

.preview-box {
    transition: all 0.3s ease;
}

.preview-box.glitching {
    animation: glitch-shake 0.5s ease-in-out infinite;
}

@keyframes glitch-shake {

    0%,
    100% {
        transform: translateX(0) translateY(0);
        filter: hue-rotate(0deg);
    }

    10% {
        transform: translateX(-2px) translateY(-1px);
        filter: hue-rotate(90deg);
    }

    20% {
        transform: translateX(2px) translateY(1px);
        filter: hue-rotate(180deg);
    }

    30% {
        transform: translateX(-1px) translateY(2px);
        filter: hue-rotate(270deg);
    }

    40% {
        transform: translateX(1px) translateY(-2px);
        filter: hue-rotate(360deg);
    }

    50% {
        transform: translateX(-3px) translateY(0);
        filter: hue-rotate(45deg);
    }

    60% {
        transform: translateX(3px) translateY(0);
        filter: hue-rotate(135deg);
    }

    70% {
        transform: translateX(0) translateY(-3px);
        filter: hue-rotate(225deg);
    }

    80% {
        transform: translateX(0) translateY(3px);
        filter: hue-rotate(315deg);
    }

    90% {
        transform: translateX(-2px) translateY(-2px);
        filter: hue-rotate(90deg);
    }
}

/* Hide scrollbars during glitch effect */
body.glitching {
    overflow: hidden;
}

body.glitching::-webkit-scrollbar {
    display: none;
}

body.glitching {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.generate-btn {
    position: relative;
    overflow: hidden;
}

.generate-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
}

.generate-btn:hover::before {
    left: 100%;
}

.generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Floating Windows Section */
.floating-windows-section {
    position: relative;
    overflow: hidden;
}

.floating-windows-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 255, 0, 0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 255, 0, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 255, 0, 0.02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 255, 0, 0.02) 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
    animation: matrix-pattern-slow 30s linear infinite;
    pointer-events: none;
}

@keyframes matrix-pattern-slow {
    0% {
        background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
    }

    100% {
        background-position: 40px 40px, 40px 60px, 60px 20px, 20px 40px;
    }
}

/* Generate Button Container Styles */
.generate-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    text-align: center;
}

/* Responsive adjustments for image generator */
@media (max-width: 768px) {
    .preview-box {
        width: 350px !important;
        height: 350px !important;
        border-radius: 8px !important;
    }

    .generate-btn {
        font-size: 14px !important;
        padding: 12px 24px !important;
    }

    .generate-button-container {
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    .preview-box {
        width: 280px !important;
        height: 280px !important;
        border-radius: 50% !important;
    }

    .generate-btn {
        font-size: 12px !important;
        padding: 10px 20px !important;
    }
}

/* ==========================================================
   IMAGE SELECTOR SECTION STYLES
   ========================================================== */
.image-selector-section {
    position: relative;
    overflow: hidden;
    z-index: 100;
    min-height: 400px;
    display: block !important;
    visibility: visible !important;
}

.image-selector-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 255, 0, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 255, 0, 0.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 255, 0, 0.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 255, 0, 0.05) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: matrix-pattern 20s linear infinite;
    pointer-events: none;
}

@keyframes matrix-pattern {
    0% {
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }

    100% {
        background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px;
    }
}

.frog-gallery {
    position: relative;
    z-index: 10;
}

.frog-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.frog-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.frog-item:hover::before {
    left: 100%;
}

.frog-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
    border-color: #ffffff !important;
}

.frog-item img {
    transition: all 0.3s ease;
    filter: brightness(0.9) contrast(1.1);
}

.frog-item:hover img {
    filter: brightness(1.1) contrast(1.2);
}

.selected-frog-preview {
    position: relative;
    z-index: 10;
}

.selected-frog-display {
    position: relative;
    transition: all 0.3s ease;
}

.selected-frog-display:hover {
    transform: scale(1.05);
}

.selected-frog-display img {
    transition: all 0.3s ease;
    border: 3px solid #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

.selected-frog-display:hover img {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.35);
    transform: scale(1.02);
}

/* Responsive adjustments for image selector */
@media (max-width: 768px) {
    .frog-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .frog-item img {
        height: 100px;
    }

    .selected-frog-display img {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .frog-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .frog-item img {
        height: 80px;
    }

    .selected-frog-display img {
        width: 80px;
        height: 80px;
    }
}
.nav-item {
    color: #000000 !important;
}

[onclick="copyContractAddress()"] {
    color: #000000 !important;
}

[onclick="copyContractAddress()"]:hover {
    color: #333333 !important;
}

.btn-buy:hover .button-top::after {
    background-image: radial-gradient(#ffcc80, #ffb84d);
}

.nav-item.text-primary {
    color: #000000 !important;
}

button.text-white[onclick="copyContractAddress()"] {
    color: #000000 !important;
}

button.text-white[onclick="copyContractAddress()"]:hover {
    color: #333333 !important;
}

.btn-buy .button-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    padding: 8px 16px;
    transform: translateY(0);
    text-align: center;
    color: #000000;
    text-shadow: 0 -1px rgba(0, 0, 0, .25);
    transition-property: transform;
    transition-duration: .2s;
    -webkit-user-select: none;
    user-select: none;
}

.btn-secondary .button-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    padding: 8px 16px;
    transform: translateY(0);
    text-align: center;
    color: #000000;
    text-shadow: 0 -1px rgba(0, 0, 0, .25);
    transition-property: transform;
    transition-duration: .2s;
    -webkit-user-select: none;
    user-select: none;
}

.btn-buy:hover .button-top::after {
    background-image: radial-gradient(#ffcc80, #ffb84d);
}

.floating-header .nav-item {
    color: #ffffff !important;
}

.floating-header .btn-secondary .button-top {
    color: #ffffff !important;
}

.floating-header .btn-secondary[onclick="buyToken()"] .button-top {
    color: #000000 !important;
}

.button-top i,
.button-top svg {
    color: #000000 !important;
    fill: #000000 !important;
}

.floating-header .button-top i,
.floating-header .button-top svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* OVERRIDE STYLES */
.btn-buy .button-top,
.btn-secondary .button-top {
    color: #000000 !important;
}

.floating-header .nav-item,
.floating-header .btn-secondary .button-top {
    color: #ffffff !important;
}
.button-top i,
.button-top svg {
    color: #000000 !important;
    fill: #000000 !important;
}

.floating-header .button-top i,
.floating-header .button-top svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
[onclick="copyContractAddress()"] {
    color: #000000 !important;
}

[onclick="copyContractAddress()"]:hover {
    color: #333333 !important;
}
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}