/* Base Reset & Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --neon-green: #bfff00;
    --neon-red: #ff003c;
    --neon-violet: #d000ff;
    --bg-color: #020205;
}

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

body {
    background: url('images/scammunitybackground.jpg') no-repeat center center;
    background-size: cover;
    background-color: var(--bg-color);
    background-attachment: fixed;
    color: white;
    font-family: 'Press Start 2P', cursive;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    position: relative;
}

/* Global Font Enforcement */
body,
p,
h1,
h2,
h3,
a,
input,
button {
    font-family: 'Press Start 2P', cursive;
}

/* Vanta Background Layer - Updated for SVG Mask Trail */
#vanta-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    --mouse-x: 50%;
    --mouse-y: 50%;
    /* Use SVG Mask for Trail Effect */
    mask-image: url(#fog-mask);
    -webkit-mask-image: url(#fog-mask);
    opacity: 0.9;
    pointer-events: none;
}

/* Fix for Fog Mask Container */
.fullscreen-mask-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -9999;
    /* Behind everything */
    pointer-events: none;
}

/* ... existing styles ... */

/* Social Links */
.social-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center vertically */
    gap: 40px;
    /* Increased gap */
    margin-bottom: 30px;
    margin-top: 20px;
    z-index: 10;
    position: relative;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 0.2s;
    min-height: 120px;
    /* Allocate space for huge icons */
}

.social-btn {
    color: var(--neon-violet);
    transition: all 0.2s ease;
    opacity: 0.8;
}

.social-btn svg {
    /* Increase size by 400% (24px * 4 = 96px ~ 100px) */
    width: 100px;
    height: 100px;
}

.social-btn:hover {
    color: var(--neon-green);
    transform: scale(1.1);
    opacity: 1;
    text-shadow: 0 0 20px var(--neon-green);
}

/* CHILL BRO RADIO Styles */
.chill-radio-wrapper {
    position: relative;
    z-index: 10;
    margin: 5px auto 20px auto;
    text-align: center;
    width: 100%;
    max-width: 650px;
    /* Widened further for VU Meter */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 0.3s;
}

.chill-player {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #555;
    border-radius: 4px;
    padding: 8px 15px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    color: var(--neon-green);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
    gap: 15px;
    width: 98%;
    flex-wrap: nowrap;
    /* Force single line */
}

.chill-title {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ccc;
    font-size: 0.6rem;
    /* Fixed width to prevent jumping */
    min-width: 140px;
    text-align: left;
    border-right: 1px solid #333;
    padding-right: 10px;
    margin-right: 10px;
    white-space: nowrap;
}

/* 80s VU Meter */
.vu-meter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 60px;
    height: 20px;
    background: #111;
    padding: 2px;
    border: 1px solid #333;
    margin-right: 10px;
}

.vu-bar {
    height: 4px;
    width: 0%;
    /* Dynamic Width */
    background: linear-gradient(90deg, lime 60%, yellow 80%, red 100%);
    transition: width 0.1s ease-out;
    /* Slow release handled in JS, this is smoothing */
}

.chill-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
    /* Allow controls to expand */
    justify-content: flex-end;
    white-space: nowrap;
}

.chill-btn {
    background: #222;
    border: 1px solid #555;
    color: var(--neon-green);
    font-family: inherit;
    font-size: 0.6rem;
    cursor: pointer;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 2px;
    transition: all 0.1s;
    min-width: 60px;
    text-align: center;
}

/* Volume Slider Styles */
.vol-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.vol-label {
    font-size: 0.5rem;
    color: #888;
}

#vol-control {
    -webkit-appearance: none;
    width: 80px;
    height: 4px;
    background: #333;
    outline: none;
    cursor: pointer;
}

#vol-control::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: var(--neon-green);
    cursor: pointer;
    border-radius: 0;
    /* Retro square thumb */
}

#vol-control::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: var(--neon-green);
    cursor: pointer;
    border: none;
    border-radius: 0;
}

.chill-btn:hover {
    background: #333;
    border-color: var(--neon-green);
    box-shadow: 0 0 5px var(--neon-green);
}

.chill-btn:active {
    transform: translateY(1px);
}

.chill-status {
    color: #444;
    font-size: 0.6rem;
    font-weight: bold;
    min-width: 50px;
    text-align: center;
}

.chill-status.active {
    color: #ff003c;
    text-shadow: 0 0 5px #ff003c;
    animation: blink 1s infinite;
}

.chill-status.silent-warning {
    color: #ff003c;
    text-shadow: none;
    animation: none;
    font-size: 0.45rem;
    white-space: nowrap;
}

/* Remove old radio styles if redundant - cleaning up */
.radio-wrapper,
.radio-player,
.radio-display,
.vu-meter-container {
    display: none;
}

/* Scanlines Overlay */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    z-index: 10;
}

/* Main Container - Transparent as requested */
.container {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 600px;
    padding: 20px;
    text-align: center;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Header & Glitch Title */
header {
    margin-bottom: 20px;
}

h1.glitch {
    font-size: 5rem;
    /* Increased size */
    color: #bfff00;
    /* Acid Green */
    text-shadow: 4px 4px 0 #000;
    /* Hard black shadow */
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 5px;
    position: relative;
    letter-spacing: 2px;
    opacity: 0;
    /* Start hidden for fade-in */
    animation: glitch 1s infinite, fadeInUp 0.8s ease-out forwards;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Progressive Loading Delays */
h1.glitch {
    animation-delay: 0.1s;
}

.timer-box {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 0.3s;
}

.badge-container {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 0.5s;
}

.contract-wrapper {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 0.7s;
}

.story-wrapper {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 0.9s;
}

.radio-wrapper {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 1.1s;
}

.social-wrapper {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 1.3s;
}

.url-text {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 1.5s;
}

/* Glitch Animation Keyframes and pseudos preserved but adapted colors if needed */
h1.glitch::before,
h1.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    /* Changed from bg-color to allow transparency if needed, or keep dark if glitches look weird */
}

/* Revert background to dark for glitch text legibility if transparent background makes it messy, 
   but user asked for transparency. Let's try transparent, or maybe just remove background property so it inherits/is clear. 
   Actually standard glitch effect usually needs opaque background to 'cut' the text. 
   Let's keep the user's transparency request for CONTAINERS, but the gltich might need opacity. 
   For now, I'll set background to var(--bg-color) but ensure main container is transparent.
*/
h1.glitch::before,
h1.glitch::after {
    background: var(--bg-color);
}

/* Wait, if the main container is transparent, var(--bg-color) on text pseudo might look like a box. 
   Let's see. If the body has a background image, we might want the glitch to be transparent background? 
   Standard glitch CSS relies on the background color to hide the 'original' text parts. 
   Let's stick to the existing glitch animation logic which works well on dark backgrounds. 
*/

h1.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--neon-red);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

h1.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--neon-violet);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

/* Keep existing glitch keyframes */
@keyframes glitch-anim {
    0% {
        clip: rect(31px, 9999px, 94px, 0);
    }

    5% {
        clip: rect(70px, 9999px, 11px, 0);
    }

    10% {
        clip: rect(29px, 9999px, 6px, 0);
    }

    15% {
        clip: rect(58px, 9999px, 99px, 0);
    }

    20% {
        clip: rect(23px, 9999px, 35px, 0);
    }

    25% {
        clip: rect(10px, 9999px, 83px, 0);
    }

    30% {
        clip: rect(98px, 9999px, 3px, 0);
    }

    35% {
        clip: rect(61px, 9999px, 15px, 0);
    }

    40% {
        clip: rect(19px, 9999px, 64px, 0);
    }

    45% {
        clip: rect(69px, 9999px, 61px, 0);
    }

    50% {
        clip: rect(85px, 9999px, 7px, 0);
    }

    55% {
        clip: rect(20px, 9999px, 92px, 0);
    }

    60% {
        clip: rect(3px, 9999px, 35px, 0);
    }

    65% {
        clip: rect(66px, 9999px, 73px, 0);
    }

    70% {
        clip: rect(87px, 9999px, 3px, 0);
    }

    75% {
        clip: rect(28px, 9999px, 7px, 0);
    }

    80% {
        clip: rect(6px, 9999px, 20px, 0);
    }

    85% {
        clip: rect(44px, 9999px, 98px, 0);
    }

    90% {
        clip: rect(12px, 9999px, 2px, 0);
    }

    95% {
        clip: rect(72px, 9999px, 47px, 0);
    }

    100% {
        clip: rect(80px, 9999px, 7px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 100px, 0);
    }

    5% {
        clip: rect(52px, 9999px, 74px, 0);
    }

    10% {
        clip: rect(79px, 9999px, 15px, 0);
    }

    15% {
        clip: rect(15px, 9999px, 69px, 0);
    }

    20% {
        clip: rect(2px, 9999px, 30px, 0);
    }

    25% {
        clip: rect(11px, 9999px, 86px, 0);
    }

    30% {
        clip: rect(94px, 9999px, 8px, 0);
    }

    35% {
        clip: rect(32px, 9999px, 56px, 0);
    }

    40% {
        clip: rect(14px, 9999px, 45px, 0);
    }

    45% {
        clip: rect(28px, 9999px, 19px, 0);
    }

    50% {
        clip: rect(24px, 9999px, 69px, 0);
    }

    55% {
        clip: rect(72px, 9999px, 3px, 0);
    }

    60% {
        clip: rect(84px, 9999px, 64px, 0);
    }

    65% {
        clip: rect(96px, 9999px, 76px, 0);
    }

    70% {
        clip: rect(36px, 9999px, 16px, 0);
    }

    75% {
        clip: rect(70px, 9999px, 30px, 0);
    }

    80% {
        clip: rect(32px, 9999px, 76px, 0);
    }

    85% {
        clip: rect(3px, 9999px, 94px, 0);
    }

    90% {
        clip: rect(53px, 9999px, 67px, 0);
    }

    95% {
        clip: rect(33px, 9999px, 79px, 0);
    }

    100% {
        clip: rect(7px, 9999px, 85px, 0);
    }
}

h2.subtitle {
    /* Subtitle Styles */
    color: #bfff00;
    font-family: 'Knewave', cursive;
    /* Knewave Font */
    font-size: 4.3rem;
    /* Decreased by 25% from 5.75rem (5.75 * 0.75 = 4.31) */
    font-weight: 400;
    /* Knewave is typically regular weight */
    text-align: center;
    margin-bottom: 50px;
    margin-top: 70px;
    text-shadow: none;
    /* Shadow added in animation */
    text-transform: none;
    transform: rotate(-3deg);
    opacity: 0;
    /* Initially hidden */
    /* Combine animations: Float (continuous) + Neon Flicker (one-time entry) */
    animation: float 3s ease-in-out infinite, neon-flicker 2s ease-in-out forwards 1.5s;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Floating Animation (unchanged) */
@keyframes float {

    0%,
    100% {
        transform: rotate(-3deg) translateY(0);
    }

    50% {
        transform: rotate(-3deg) translateY(-10px);
    }
}

/* Faulty Neon Flicker Animation */
@keyframes neon-flicker {
    0% {
        opacity: 0;
        text-shadow: none;
    }

    5% {
        opacity: 0;
        text-shadow: none;
    }

    6% {
        opacity: 1;
        text-shadow: 0 0 10px #bfff00, 0 0 20px #bfff00;
    }

    7% {
        opacity: 0;
        text-shadow: none;
    }

    8% {
        opacity: 0;
        text-shadow: none;
    }

    9% {
        opacity: 1;
        text-shadow: 0 0 10px #bfff00;
    }

    10% {
        opacity: 0.1;
        text-shadow: none;
    }

    15% {
        opacity: 1;
        text-shadow: 0 0 10px #bfff00, 0 0 20px #bfff00;
    }

    20% {
        opacity: 0;
        text-shadow: none;
    }

    25% {
        opacity: 1;
        text-shadow: 0 0 10px #bfff00;
    }

    30% {
        opacity: 0.3;
        text-shadow: none;
    }

    40% {
        opacity: 1;
        text-shadow: 0 0 15px #bfff00, 0 0 25px #bfff00;
    }

    50% {
        opacity: 0.8;
        text-shadow: 0 0 5px #bfff00;
    }

    70% {
        opacity: 1;
        text-shadow: 0 0 15px #bfff00, 0 0 25px #bfff00;
    }

    80% {
        opacity: 0.5;
        text-shadow: none;
    }

    90% {
        opacity: 1;
        text-shadow: 0 0 15px #bfff00, 0 0 25px #bfff00;
    }

    100% {
        opacity: 1;
        text-shadow: 3px 3px 0 #000, 0 0 15px #bfff00;
        /* Final state: visible with shadow */
    }
}

/* Floating Animation */
@keyframes float {

    0%,
    100% {
        transform: rotate(-3deg) translateY(0);
    }

    50% {
        transform: rotate(-3deg) translateY(-10px);
    }
}

/* Timer Box - New Style */
.timer-box {
    /* Use !important if needed to override previous styles, but since we are replacing the whole file, standard specificity is fine. */
    background-color: rgba(0, 0, 0, 0.6);
    border: 4px solid #ff003c;
    /* Neon Red */
    border-radius: 6px;
    padding: 20px 10px;
    /* Reduced side padding to 10px */
    margin: 10px auto 30px auto;
    /* Centered between Title and Button (54px each side) */
    box-shadow:
        0 0 15px rgba(255, 0, 60, 0.5),
        inset 0 0 20px rgba(0, 0, 0, 0.8);
    max-width: 600px;
    text-align: center;
    width: 100%;
}

.time {
    font-family: 'Press Start 2P', cursive;
    color: #ff003c;
    font-size: 3rem;
    /* Huge digits */
    text-shadow: 0 0 10px #ff003c;
    letter-spacing: -2px;
    /* Reduced spacing */
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* Reduced gap */
    flex-wrap: nowrap;
    /* Force single line */
    white-space: nowrap;
}

/* Ensure child spans inherit or match the big font */
.time span {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    text-shadow: inherit;
    line-height: 1;
    /* reset line height for better vertical centering */
}

.label {
    font-family: 'Press Start 2P', cursive;
    color: #ff003c;
    font-size: 1.2rem;
    margin-top: 10px;
    text-transform: lowercase;
}

/* Colon animation */
.colon {
    animation: blink 1s infinite;
    position: relative;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Better vertical alignment with digits */
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Transparent Sections */
.contract-wrapper,
.story-wrapper,
.radio-wrapper,
.contract-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contract-wrapper {
    margin-top: 20px;
    /* Reduced spacing for better harmony */
}

/* Badge / Token Button */
/* Keeping existing structure but checking transparency */
.badge-container {
    display: inline-block;
    border: 2px solid var(--neon-green);
    padding: 15px 30px;
    /* transform: skewX(-20deg); Removed per user request to remove 'italic' look */
    box-shadow: 0 0 10px var(--neon-green);
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.badge-container:hover {
    background: var(--neon-green);
    box-shadow: 0 0 20px var(--neon-green);
}

.badge {
    display: block;
    color: var(--neon-green);
    font-size: 1.2rem;
    /* transform: skewX(20deg); Removed */
    text-shadow: 0 0 5px var(--neon-green);
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
    /* Ensure no italic */
}

.badge-container:hover .badge {
    color: #000;
    text-shadow: none;
}

/* Contract Address Section */
.contract-label {
    color: var(--neon-violet);
    font-size: 0.7rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
}

.contract-input-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.contract-input {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--neon-violet);
    color: var(--neon-violet);
    font-family: 'Press Start 2P', cursive;
    padding: 10px;
    font-size: 0.6rem;
    text-align: center;
    width: 70%;
}

.copy-btn {
    background: var(--neon-violet);
    color: #fff;
    border: none;
    padding: 0 15px;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    font-size: 0.6rem;
    text-transform: uppercase;
}

.copy-btn:hover {
    filter: brightness(1.2);
}

/* Story Text - New Style */
.story-box {
    padding: 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05) !important;
    /* Semi-semi transparent gray */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px;
    margin-top: 20px;
}

.story-title {
    color: #bfff00;
    /* Matching H2/Subtitle style or keep white? User said applies pixel font everywhere. */
    font-size: 1rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    border: none;
    text-shadow: 1px 1px 0 #000;
}

.story-text {
    color: #eeeeee;
    /* Off-white */
    font-size: 0.8rem;
    line-height: 1.8;
    text-align: center;
    max-width: 700px;
    /* User asked for 700px, but container is max 600px. It will fit within 600px. */
    margin: 0 auto 40px auto;
    text-shadow: 1px 1px 2px #000;
    font-family: 'Press Start 2P', cursive;
}

/* Radio Player - Simplified */
.radio-player {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 15px;
    margin-top: 40px;
    background: rgba(255, 255, 255, 0.05) !important;
    /* Semi-semi transparent gray */
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-radius: 4px;
}

.radio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    /* Removed internal border */
    padding-bottom: 10px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-title {
    font-size: 0.6rem;
    color: #fff;
}

.live-indicator {
    font-size: 0.5rem;
    color: var(--neon-red);
    display: flex;
    align-items: center;
    gap: 5px;
}

.blink-dot {
    width: 6px;
    height: 6px;
    background: var(--neon-red);
    border-radius: 50%;
    animation: blink 1s infinite;
}

.radio-display {
    background: rgba(0, 0, 0, 0.5);
    /* Slight dark bg for readability or transparent? User said "Enlève les cadres...". Let's keep display slightly visible or transparent */
    background: transparent;
    border: 1px solid #333;
    /* Maybe keep this small border for the display area itself? User said "simplified... border-top... remove borders...". Let's try minimal. */
    border: none;
    /* Let's go fully minimal */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.radio-station {
    font-size: 0.7rem;
    color: var(--neon-green);
}

/* VU Meter styling */
.vu-meter-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0.8;
}

.vu-channel {
    display: flex;
    align-items: center;
    gap: 5px;
}

.vu-label {
    font-size: 0.4rem;
    color: #666;
    width: 10px;
}

.vu-bars {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 1px;
}

.vu-segment {
    flex: 1;
    background: #222;
    transition: background-color 0.05s;
}

.vu-segment.active.green {
    background-color: var(--neon-green);
}

.vu-segment.active.yellow {
    background-color: #ffff00;
}

.vu-segment.active.red {
    background-color: var(--neon-red);
}

.radio-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

.control-btn {
    background: transparent;
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.control-btn:hover {
    background: var(--neon-green);
    color: black;
}

.volume-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 200px;
}

.volume-slider-wrapper {
    flex: 1;
    position: relative;
    height: 4px;
    background: #333;
}

.volume-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.volume-progress {
    height: 100%;
    background: var(--neon-green);
    width: 70%;
}

/* Social Links */
.social-wrapper {
    display: flex;
    gap: 50px;
    /* Increased gap */
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    margin-top: -5%;
    /* Lowered by 10% (from -15% to -5%) */
}

.social-btn {
    color: var(--neon-green);
    transition: all 0.2s;
    font-size: 1.25em;
    /* Increase size by 25% (assuming inherited or default was 1em range, or scaling svg) */
    transform: scale(1.25);
    /* Ensuring visual size increase by 25% */
}

.social-btn:hover {
    color: #fff;
    filter: drop-shadow(0 0 5px var(--neon-green));
}

/* Footer */
.url-text {
    display: block;
    color: var(--neon-violet);
    text-decoration: none;
    font-size: 0.7rem;
    text-shadow: 0 0 5px var(--neon-violet);
    margin-top: 20px;
}

/* Global overflow protection - Prevent any horizontal scrolling */
* {
    max-width: 100%;
}

body,
html {
    overflow-x: hidden;
    max-width: 100vw;
}

.container,
.timer-box,
.chill-player,
.story-box,
.tokenomics-box,
.contract-box {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Medium mobile devices (iPhone 16 Pro: 393px, iPhone 15 Pro Max: 430px, etc.) */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .container {
        padding: 15px;
        max-width: 100%;
        width: 100%;
    }

    /* Adjust titles for medium screens */
    h1.glitch {
        font-size: 2.2rem;
        letter-spacing: 0;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    h2.subtitle {
        font-size: 1.8rem;
        margin-top: 30px;
        margin-bottom: 30px;
        word-break: break-word;
    }

    /* Disable flashlight mask on mobile */
    #vanta-canvas {
        mask-image: none;
        -webkit-mask-image: none;
        opacity: 0.5;
        /* Semi-transparent to see background */
    }

    .fullscreen-mask-container {
        display: none;
        /* Disable SVG mask container */
    }

    /* Enable parallax effect on mobile */
    body {
        background-attachment: scroll;
        /* Allow parallax on mobile */
    }

    /* Social icons adjustment */
    .social-wrapper {
        gap: 35px;
        min-height: 100px;
    }

    .social-btn svg {
        width: 80px;
        height: 80px;
    }

    /* Radio player adjustments - 2 lines layout */
    .chill-radio-wrapper {
        max-width: 100%;
        padding: 0 10px;
    }

    .chill-player {
        width: 100%;
        max-width: 100%;
        padding: 8px 10px;
        gap: 10px;
        font-size: 0.6rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .chill-title {
        font-size: 0.55rem;
        min-width: unset;
        width: 100%;
        text-align: center;
        border-right: none;
        border-bottom: 1px solid #333;
        padding-right: 0;
        padding-bottom: 8px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .vu-meter {
        width: 45px;
        margin-right: 5px;
    }

    .chill-controls {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    #vol-control {
        width: 100px;
    }

    /* Timer adjustments */
    .time {
        font-size: 2rem;
        gap: 4px;
        letter-spacing: -1px;
    }

    .timer-box {
        padding: 18px 10px;
        margin: 10px 10px 25px 10px;
        width: calc(100% - 20px);
    }

    /* Badge and contract */
    .badge-container {
        padding: 14px 25px;
        margin: 0 10px;
    }

    .contract-wrapper {
        padding: 0 15px;
    }

    .contract-input {
        font-size: 0.55rem;
    }

    /* Story and tokenomics */
    .story-wrapper,
    .tokenomics-wrapper {
        padding: 0 15px;
    }

    .story-box,
    .tokenomics-box {
        padding: 18px;
    }

    .story-text,
    .tokenomics-intro {
        font-size: 0.7rem;
    }
}

/* Responsive adjustments */
@media (max-width: 600px) {

    /* Fix container overflow */
    body {
        overflow-x: hidden;
    }

    .container {
        padding: 15px;
        max-width: 100%;
        width: 100%;
    }

    /* Reduce main title size */
    h1.glitch {
        font-size: 1.6rem;
        letter-spacing: 0;
        margin-bottom: 10px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Reduce subtitle size */
    h2.subtitle {
        font-size: 1.3rem;
        margin-top: 20px;
        margin-bottom: 20px;
        word-break: break-word;
    }

    /* Fix countdown timer */
    .time {
        font-size: 1.5rem;
        gap: 3px;
        flex-wrap: nowrap;
        letter-spacing: -1px;
    }

    .timer-box {
        padding: 15px 5px;
        margin: 10px 5px 20px 5px;
        width: calc(100% - 10px);
    }

    .label {
        font-size: 0.9rem;
    }

    /* Disable flashlight mask on small mobile */
    #vanta-canvas {
        mask-image: none;
        -webkit-mask-image: none;
        opacity: 0.4;
        /* Even more transparent on small screens */
    }

    .fullscreen-mask-container {
        display: none;
    }

    /* Parallax effect */
    body {
        background-attachment: scroll;
    }

    /* Reduce social icons size */
    .social-wrapper {
        gap: 30px;
        margin-bottom: 20px;
        min-height: 80px;
    }

    .social-btn svg {
        width: 60px;
        height: 60px;
    }

    /* Fix radio player overflow - simplified 2 lines layout */
    .chill-radio-wrapper {
        max-width: 100%;
        margin: 5px 0 20px 0;
        padding: 0 5px;
    }

    .chill-player {
        width: 100%;
        max-width: 100%;
        padding: 8px 8px;
        gap: 8px;
        font-size: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .chill-title {
        font-size: 0.5rem;
        min-width: unset;
        width: 100%;
        text-align: center;
        border-right: none;
        border-bottom: 1px solid #333;
        padding-right: 0;
        padding-bottom: 6px;
        margin-right: 0;
        margin-bottom: 6px;
    }

    .vu-meter {
        width: 35px;
        height: 16px;
        margin-right: 5px;
    }

    .vu-bar {
        height: 3px;
    }

    .chill-controls {
        width: 100%;
        justify-content: center;
        gap: 6px;
    }

    .chill-btn {
        font-size: 0.45rem;
        padding: 4px 6px;
        min-width: 45px;
    }

    .vol-wrapper {
        gap: 3px;
    }

    .vol-label {
        font-size: 0.45rem;
    }

    #vol-control {
        width: 90px;
    }

    .chill-status {
        font-size: 0.5rem;
        min-width: 70px;
    }

    .chill-status.silent-warning {
        font-size: 0.35rem;
        min-width: 140px;
    }

    /* Fix badge button */
    .badge-container {
        padding: 12px 20px;
        border: 1px solid var(--neon-green);
        margin: 0 5px;
    }

    .badge {
        font-size: 0.9rem;
    }

    /* Fix contract section */
    .contract-wrapper {
        padding: 0 10px;
    }

    .contract-box {
        width: 100%;
        max-width: 100%;
    }

    .contract-label {
        font-size: 0.6rem;
    }

    .contract-input-group {
        flex-direction: column;
        gap: 8px;
    }

    .contract-input {
        width: 100%;
        font-size: 0.5rem;
        padding: 8px;
    }

    .copy-btn {
        width: 100%;
        padding: 10px;
        font-size: 0.5rem;
    }

    /* Fix story section */
    .story-wrapper,
    .tokenomics-wrapper {
        padding: 0 10px;
        margin-top: 15px;
    }

    .story-box,
    .tokenomics-box {
        padding: 15px;
        width: 100%;
        max-width: 100%;
    }

    .story-title,
    .tokenomics-title {
        font-size: 0.8rem;
        margin-bottom: 15px;
    }

    .story-text,
    .tokenomics-intro {
        font-size: 0.65rem;
        line-height: 1.6;
    }

    .tokenomics-tax {
        font-size: 0.7rem;
    }

    .split-title {
        font-size: 0.7rem;
    }

    .split-list {
        font-size: 0.6rem;
        line-height: 1.8;
    }

    /* Fix footer */
    .url-text {
        font-size: 0.6rem;
        margin-top: 15px;
        word-break: break-all;
    }
}

/* Tokenomics Section */
.tokenomics-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 1.7s;
}

.tokenomics-box {
    padding: 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    /* Matching story-box */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.tokenomics-title {
    color: #bfff00;
    font-size: 1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000;
    font-family: 'Press Start 2P', cursive;
}

.tokenomics-intro {
    color: #eeeeee;
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px #000;
    font-family: 'Press Start 2P', cursive;
}

.tokenomics-tax {
    color: var(--neon-red);
    font-size: 0.9rem;
    margin-bottom: 20px;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 0 0 5px var(--neon-red);
}

.split-title {
    color: var(--neon-violet);
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-decoration: underline;
    font-family: 'Press Start 2P', cursive;
}

.split-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    /* Better readability for list */
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    line-height: 2;
}

.split-list li {
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.split-list li:last-child {
    border-bottom: none;
}

.percent {
    color: var(--neon-green);
    font-weight: bold;
    margin-right: 5px;
}

/* Fire Effect for 25% AUTO-BURN */
.fire-effect {
    color: #ff5722;
    /* Brighter orange-red */
    text-shadow:
        0 0 4px rgba(255, 255, 150, 0.6),
        0 -4px 6px rgba(255, 140, 50, 0.5),
        2px -8px 8px rgba(255, 80, 30, 0.4),
        -2px -12px 12px rgba(255, 50, 20, 0.3);
    animation: burn 1.5s ease-in-out infinite alternate;
}

@keyframes burn {
    from {
        text-shadow:
            0 0 4px rgba(255, 255, 150, 0.6),
            0 -4px 6px rgba(255, 140, 50, 0.5),
            2px -8px 8px rgba(255, 80, 30, 0.4),
            -2px -12px 12px rgba(255, 50, 20, 0.3);
    }

    to {
        text-shadow:
            0 0 6px rgba(255, 255, 150, 0.8),
            0 -5px 8px rgba(255, 140, 50, 0.6),
            -2px -10px 10px rgba(255, 80, 30, 0.5),
            2px -15px 15px rgba(255, 50, 20, 0.4);
    }
}
}