/* 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/scamunitybackground.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: 800px;
    /* Widened significantly 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;
    font-size: 0.6rem;
    min-width: 110px;
    text-align: left;
    border-right: 1px solid #333;
    padding-right: 15px;
    margin-right: 10px;
    line-height: 1.2;
    font-style: italic;
    color: #fff;
    text-shadow: 2px 2px 0px var(--neon-violet);
}

.chill-title .sub-title {
    font-size: 0.7rem;
    color: var(--neon-green);
    text-shadow: 2px 2px 0px #000;
}

.chill-title .slash {
    color: var(--neon-red);
    margin-right: 3px;
    animation: blink 1s infinite;
}

/* Retrowave VU Canvas */
#vu-canvas {
    height: 40px;
    flex-grow: 1;
    /* Take available space */
    background: #111;
    border: 1px solid #333;
    margin-right: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
    border-radius: 2px;
}

.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;
    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 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.6rem;
    font-weight: bold;
    color: #444;
    margin-right: 20px;
    /* Increased margin for balance */
    width: 100px;
    /* Fixed width to prevent jumping */
    min-width: 100px;
    justify-content: flex-start;
    /* Diode on left, text on right */
}

.chill-status .diode {
    width: 8px;
    height: 8px;
    background-color: #300;
    /* Dark Red (Off) */
    border-radius: 50%;
    box-shadow: inset 0 0 2px #000;
    transition: all 0.3s;
    border: 1px solid #200;
}

.chill-status.active .diode {
    background-color: #ff003c;
    /* Neon Red (On) */
    box-shadow: 0 0 5px #ff003c, 0 0 10px #ff003c;
    border-color: #ffaaaa;
}

.chill-status.active .status-text {
    color: #eee;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.chill-status.silent-warning .status-text {
    color: #ff003c;
    animation: blink 0.5s infinite;
}

/* 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.22),
            rgba(0, 0, 0, 0.22) 1px,
            rgba(20, 255, 180, 0.035) 1px,
            rgba(20, 255, 180, 0.035) 2px,
            transparent 2px,
            transparent 4px);
    pointer-events: none;
    z-index: 10;
    opacity: 0.9;
    animation: global-scan-drift 9s linear infinite;
}

@keyframes global-scan-drift {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(4px);
    }
}

/* 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: clamp(3rem, 8vw, 5rem);
    /* Increased size with responsiveness */
    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;
    white-space: nowrap;
    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-entrance {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 0.3s;
    width: 100%;
}

.timer-box {
    width: 100%;
}

.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;
}

footer {
    padding: 2.5rem 0;
    /* Vertical breathing room */
    margin-top: -2rem;
    /* Pull up slightly */
    z-index: 200;
    position: relative;
    display: flex;
    justify-content: center;
    row-gap: 5px;
}


.url-text {
    opacity: 0;
    display: flex;
    align-items: center;
    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 */
    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; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sub-line1 {
    font-size: 2.5rem;
    display: block;
}

.sub-line2 {
    font-size: 3rem;
    display: block;
    margin-top: -10px;
}

/* 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 {
    background-color: rgba(0, 0, 0, 0.6);
    border: 4px solid #ff003c;
    /* Neon Red */
    border-radius: 6px;
    padding: 30px 15px;
    /* Increased internal margins */
    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%;
    position: relative;
    overflow: hidden;
}

.time {
    font-family: 'Press Start 2P', cursive;
    color: #ff003c;
    font-size: 2.85rem;
    /* Reduced by 5% from 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;
}

.countdown-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1.6rem, 6vw, 3.3rem);
    color: #fff36b;
    text-shadow: 0 0 12px #fff36b, 0 0 28px rgba(255, 243, 107, 0.8);
    letter-spacing: 0.18em;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
}

/* 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;
    }
}

/* Overheating / Surcharge Effect */
.timer-box.surcharge {
    border-color: #ff4500 !important;
    box-shadow: 0 0 30px #ff4500, inset 0 0 20px #ff4500 !important;
    animation: heat-shake 0.12s infinite !important;
}

.timer-box.surcharge .time, 
.timer-box.surcharge .label {
    color: #ff4500 !important;
    text-shadow: 0 0 20px #ff4500 !important;
}

.timer-box.countdown-off {
    border-color: #00f0ff;
    box-shadow:
        0 0 18px rgba(0, 240, 255, 0.55),
        0 0 38px rgba(255, 0, 140, 0.18),
        inset 0 0 25px rgba(0, 0, 0, 0.85);
}

.timer-box.countdown-off::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.07) 0,
        rgba(255, 255, 255, 0.07) 2px,
        transparent 2px,
        transparent 8px
    );
    mix-blend-mode: screen;
    opacity: 0.35;
    pointer-events: none;
    animation: off-scanlines 0.18s linear infinite;
}

.timer-box.countdown-off .time,
.timer-box.countdown-off .label {
    color: #00f0ff;
    text-shadow:
        2px 0 0 rgba(255, 0, 60, 0.85),
        -2px 0 0 rgba(0, 240, 255, 0.9),
        0 0 18px rgba(0, 240, 255, 0.8);
}

.timer-box.countdown-off .label {
    color: #ff7be5;
}

.timer-box.countdown-off.off-effect-shift {
    animation: off-jitter 0.12s steps(2) infinite;
}

.timer-box.countdown-off.off-effect-rgb .time {
    transform: skewX(-8deg) translateX(3px);
    filter: hue-rotate(25deg) saturate(1.4);
}

.timer-box.countdown-off.off-effect-scan::before {
    opacity: 0.6;
    animation-duration: 0.08s;
}

.timer-box.countdown-off.off-effect-tilt .time {
    transform: rotate(-1.5deg) scale(1.02);
}

.timer-box.countdown-off.cooking .time,
.timer-box.countdown-off.cooking .label {
    opacity: 0.15;
}

.timer-box.countdown-off.cooking .countdown-overlay {
    opacity: 1;
}

.countdown-overlay.cooking-effect-pulse {
    animation: cooking-pulse 0.7s ease-in-out infinite;
}

.countdown-overlay.cooking-effect-strobe {
    animation: cooking-strobe 0.14s steps(2) infinite;
}

.countdown-overlay.cooking-effect-shear {
    animation: cooking-shear 0.5s ease-in-out infinite;
}

@keyframes off-scanlines {
    from { transform: translateY(0); }
    to { transform: translateY(8px); }
}

@keyframes off-jitter {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-2px, 1px); }
    75% { transform: translate(2px, 1px); }
    100% { transform: translate(-1px, -1px); }
}

@keyframes cooking-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.96);
        opacity: 0.75;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.06);
        opacity: 1;
    }
}

@keyframes cooking-strobe {
    0%, 49% {
        transform: translate(-50%, -50%) translateX(-2px);
        text-shadow: 0 0 8px #fff36b, -4px 0 0 rgba(255, 0, 60, 0.8), 4px 0 0 rgba(0, 240, 255, 0.8);
    }

    50%, 100% {
        transform: translate(-50%, -50%) translateX(2px);
        text-shadow: 0 0 12px #fff36b, 4px 0 0 rgba(255, 0, 60, 0.8), -4px 0 0 rgba(0, 240, 255, 0.8);
    }
}

@keyframes cooking-shear {
    0%, 100% {
        transform: translate(-50%, -50%) skewX(-8deg);
    }

    50% {
        transform: translate(-50%, -50%) skewX(8deg) scale(1.04);
    }
}

@keyframes heat-shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.game-header-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2rem;
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-green);
    letter-spacing: 2px;
    position: absolute;
    top: -50px;
    /* Moved up to center in space */
    white-space: nowrap;
    /* Force single line */
    left: 0;
    width: 100%;
    text-align: center;
    transform: none;
    z-index: 110;
    pointer-events: none;
}

.game-footer-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7rem;
    color: var(--neon-red);
    line-height: 1.5;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 5px var(--neon-red);
    position: absolute;
    top: -20px;
    /* Moved up away from CRT */
    left: 0;
    width: 100%;
    text-align: center;
    transform: none;
    z-index: 110;
    pointer-events: none;
}

/* 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: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 0.5s;
    z-index: 10;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.buy-trap-text {
    font-family: 'Knewave', cursive;
    font-size: 5rem;
    /* Enlarge by approx 2.5x on desktop */
    color: var(--neon-violet);
    text-shadow: 2px 2px 0 #000, 0 0 10px var(--neon-violet);
    letter-spacing: 1px;
    animation: blink 2s infinite ease-in-out;
}

.badge {
    display: block;
    color: var(--neon-green);
    font-size: 1.2rem;
    text-shadow: 0 0 5px var(--neon-green);
    text-decoration: none;
    font-weight: bold;
    font-style: normal;
    border: 2px solid var(--neon-green);
    padding: 15px 30px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.6);
}

.badge-container:hover .badge {
    background: var(--neon-green);
    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);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-top: 20px;
}

.story-title {
    color: #bfff00;
    font-size: 1rem;
    margin-bottom: 15px;
    /* Homogenized to 15px */
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000;
}

.story-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.story-list li {
    margin-bottom: 15px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: #fff;
    border-left: 2px solid var(--neon-violet);
    padding-left: 15px;
}

.story-list li strong {
    color: var(--neon-violet);
    display: block;
    margin-bottom: 5px;
}

.story-footer {
    font-size: 0.8rem;
    color: var(--neon-green);
    font-style: italic;
    text-shadow: 1px 1px 0 #000;
}

/* 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.0rem;
        letter-spacing: 0;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    h2.subtitle {
        font-size: 1.6rem;
        margin-top: 30px;
        margin-bottom: 30px;
        /* word-break: break-word; */

        /* AJOUTE CECI pour empêcher la coupure */
        word-break: keep-all;
        white-space: normal;
    }

    /* Disable flashlight mask on mobile */
    #vanta-canvas {
        mask-image: none;
        -webkit-mask-image: none;
        opacity: 1;
        /* Reset opacity for fog */
        background: linear-gradient(135deg, rgba(80, 0, 42, 0.25) 0%, rgba(205, 0, 252, 0.25) 50%, rgba(60, 60, 122, 0.25) 100%);
        pointer-events: none;
    }

    .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;
    }

    .vol-wrapper {
        display: none;
    }

    .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;
        order: 0;
    }

    #vu-canvas {
        width: 100%;
        max-width: 280px;
        height: 35px;
        margin: 0 auto 10px auto;
        display: block;
        flex-basis: 100%;
        order: 1;
    }

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

    #vol-control {
        width: 100px;
    }

    .buy-trap-text {
        font-size: 1.7rem;
        /* Revert to smaller size on mobile */
    }

    /* Timer adjustments */
    .time {
        font-size: 1.9rem;
        /* Reduced by 5% from 2rem */
        gap: 4px;
        letter-spacing: -1px;
    }

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

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

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

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

    /* Story and tokenomics */
    .story-wrapper,
    .tokenomics-wrapper,
    .rugalaga-wrapper {
        padding: 0;
        width: calc(100% + 20px);
        margin-left: -10px;
        /* Pulling slightly into container padding for more surface */
    }

    .story-box,
    .tokenomics-box {
        padding: 15px;
        /* Homogenized box padding */
    }

    .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.425rem;
        /* Reduced by 5% from 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: 1;
        background: linear-gradient(135deg, rgba(80, 0, 42, 0.25) 0%, rgba(205, 0, 252, 0.25) 50%, rgba(60, 60, 122, 0.25) 100%);
    }

    .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;
        order: 0;
    }

    #vu-canvas {
        width: 100%;
        max-width: 260px;
        height: 30px;
        margin: 0 auto 8px auto;
        display: block;
        flex-basis: 100%;
        order: 1;
    }

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

    .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: none;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .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;
        align-items: center;
        width: 100%;
    }

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

    .copy-btn {
        width: fit-content;
        min-width: 100px;
        padding: 8px 15px;
    }

    .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.8rem;
    margin-bottom: 25px;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 5px var(--neon-red);
    line-height: 1.6;
}

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

.split-list li {
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    color: #ccc;
}

.split-list li .percent {
    color: var(--neon-green);
    display: block;
    margin-bottom: 5px;
}

.split-list li {
    margin-bottom: 10px;
    border-bottom: 1px solid 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: #ff9800;
    /* Orange */
    display: inline-block;
    animation: burn-oscillate 4s ease-in-out infinite alternate;
}

@keyframes burn-oscillate {
    0% {
        color: #ff9800;
        /* Light Orange */
        text-shadow:
            0 0 4px rgba(255, 255, 150, 0.6),
            0 -4px 6px rgba(255, 140, 50, 0.5);
    }

    50% {
        color: #ff5722;
        /* Intense Fire Orange */
        text-shadow:
            0 0 8px rgba(255, 200, 50, 0.8),
            0 -8px 12px rgba(255, 80, 20, 0.6),
            2px -12px 15px rgba(230, 0, 0, 0.4);
    }

    100% {
        color: #ff3d00;
        /* Darker Red/Orange */
        text-shadow:
            0 0 10px rgba(255, 255, 100, 0.9),
            0 -10px 15px rgba(255, 60, 0, 0.7),
            -3px -18px 20px rgba(200, 0, 0, 0.5);
    }
}


/* Rugalaga Game Styles */
.rugalaga-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 60px auto 40px auto;
    /* Reduced top margin to increase surface */
    text-align: center;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards 1.7s;
    z-index: 10;
}

/* Black backdrop to prevent background transparency bleed-through */
.rugalaga-wrapper::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: #000;
    z-index: 1;
    border-radius: 40px;
    box-shadow: 0 0 50px 20px #000;
}

.rugalaga-container {
    position: relative;
    width: 100%;
    display: inline-block;
}

.crt-frame {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 50;
    pointer-events: none;
}

.game-screen-area {
    position: absolute;
    top: 14%;
    left: 14.2%;
    width: 71.6%;
    height: 59%;
    z-index: 4;
    background: #000;
    overflow: hidden;
    pointer-events: auto;
    touch-action: none;
}

.game-screen-area::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 0%, rgba(0, 0, 0, 0.32) 48%, rgba(0, 255, 180, 0.06) 50%, rgba(0, 0, 0, 0.35) 52%, rgba(18, 16, 16, 0) 100%);
    z-index: 20;
    background-size: 100% 3px;
    pointer-events: none;
    opacity: 0.92;
    animation: crt-screen-scan 6s linear infinite;
}

.game-screen-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(120, 220, 255, 0.05) 48%, rgba(255, 255, 255, 0.18) 50%, rgba(120, 220, 255, 0.04) 52%, transparent 100%),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 2px, rgba(0, 0, 0, 0) 2px 10px);
    opacity: 0;
    mix-blend-mode: screen;
    z-index: 19;
    pointer-events: none;
}

.game-screen-area.reception-fizz::before {
    opacity: 0.68;
    animation: reception-sweep 0.24s linear 1;
}

.game-screen-area.reception-vhs {
    filter: contrast(1.04) saturate(1.05);
}

.game-screen-area.reception-vhs::before {
    opacity: 0.42;
    animation: reception-vhs 0.32s linear 1;
}

@keyframes crt-screen-scan {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(6px);
    }
}

@keyframes reception-sweep {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    25% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes reception-vhs {
    0% {
        transform: translateY(-8%) scaleY(1.01);
        filter: blur(0px);
        opacity: 0.18;
    }

    35% {
        transform: translateY(10%) scaleY(0.995);
        opacity: 0.48;
    }

    65% {
        transform: translateY(4%) scaleY(1.008);
        filter: blur(0.4px);
    }

    100% {
        transform: translateY(18%) scaleY(1);
        filter: blur(0px);
        opacity: 0;
    }
}

#rugalaga-canvas {
    width: 100%;
    height: 100%;
    display: block;
    /* Pixelated look */
    image-rendering: pixelated;
}

.rugalaga-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
    pointer-events: none;
    /* Let clicks pass through to canvas */
}

.rugalaga-logo {
    width: 46%;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    margin-top: 6%;
    z-index: 100;
    /* Re-enable clicks on logo */
    animation: rugalagaFloat 3s infinite ease-in-out;
    filter: drop-shadow(0 0 10px rgba(191, 255, 0, 0.4));
    transition: transform 0.2s, margin 0.25s ease, width 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}

.rugalaga-logo.is-compact {
    width: 26%;
    margin-top: -55%;
    opacity: 0.68;
    filter: drop-shadow(0 0 8px rgba(191, 255, 0, 0.22));
}

.rugalaga-logo:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px rgba(191, 255, 0, 0.8));
}

@keyframes rugalagaFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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

.rugalaga-message {
    font-family: 'Press Start 2P', cursive;
    color: #ff003c;
    font-size: 2rem;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    line-height: 1.5;
    margin-top: 20px;
    display: none;
    /* Hidden by default */
    min-height: 4.5rem;
    /* Stabilize height for multi-line countdown */
    z-index: 100;
    /* Ensure above everything */
    transform: translateZ(0);
    /* GPU Layer Promotion */
    pointer-events: none;
}

.rugalaga-top10 {
    position: absolute;
    top: 57%;
    left: 50%;
    width: min(78%, 420px);
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', monospace;
    color: #bfff00;
    text-shadow: 2px 2px 0 #000;
    text-align: left;
    line-height: 1.55;
    font-size: 0.72rem;
    display: none;
    z-index: 35;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 16, 10, 0.94) 0%, rgba(0, 0, 0, 0.82) 100%);
    border: 2px solid rgba(191, 255, 0, 0.42);
    box-shadow: 0 0 18px rgba(191, 255, 0, 0.18), inset 0 0 18px rgba(191, 255, 0, 0.08);
    padding: 1rem 1.1rem 0.9rem;
}

.rugalaga-top10.is-visible {
    display: block;
}

.rugalaga-top10-title {
    color: #fff36b;
    display: block;
    text-align: center;
    margin-bottom: 0.85rem;
    letter-spacing: 0.18em;
}

.rugalaga-top10-empty {
    text-align: center;
    color: #ff9f1c;
}

.rugalaga-top10-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.08rem 0.2rem;
    border-bottom: 1px solid rgba(191, 255, 0, 0.08);
}

.rugalaga-top10-row.is-champion {
    color: #fff36b;
    background: linear-gradient(90deg, rgba(255, 243, 107, 0.12) 0%, rgba(255, 159, 28, 0.02) 100%);
    border: 1px solid rgba(255, 243, 107, 0.35);
    box-shadow: 0 0 14px rgba(255, 243, 107, 0.12);
    margin-bottom: 0.18rem;
}

.rugalaga-top10-rank {
    color: #ff9f1c;
    width: 2.6rem;
    flex: 0 0 2.6rem;
}

.rugalaga-top10-row.is-champion .rugalaga-top10-rank,
.rugalaga-top10-row.is-champion .rugalaga-top10-score {
    color: #fff36b;
}

.rugalaga-top10-name {
    flex: 1 1 auto;
    min-width: 0;
}

.rugalaga-top10-score {
    color: #fff;
    flex: 0 0 auto;
    text-align: right;
}

/* Score Display */
.score-display {
    position: absolute;
    top: 60px;
    left: 50px;
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: #bfff00;
    /* Same as Hi-Score */
    text-shadow: 2px 2px 0px #000;
    z-index: 20;
    pointer-events: none;
    background: transparent;
    padding: 0;
    border: none;
    text-align: right;
    text-shadow: 2px 2px 0px #000;
    z-index: 30;
    /* Ensure above scanlines (20) */
    line-height: 1.5;
    transform: translateZ(0);
    /* GPU Layer Promotion */
}

/* Updated Highscore Display positioning */
.highscore-display {
    position: absolute;
    top: 60px;
    right: 50px;
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: #bfff00;
    text-shadow: 2px 2px 0px #000;
    z-index: 30;
    /* Ensure above scanlines */
    line-height: 1.5;
    pointer-events: none;
    background: transparent;
    padding: 0;
    border: none;
    transform: translateZ(0);
    /* GPU Layer Promotion */
}

/* Mobile Responsiveness for Game Screen Text */
@media (max-width: 768px) {

    .score-display,
    .highscore-display {
        font-size: 0.6rem;
        /* Much smaller text */
        top: 25px;
        /* Move up */
    }

    .score-display {
        left: 20px;
    }

    .highscore-display {
        right: 20px;
    }

    .rugalaga-message {
        font-size: 1rem;
        /* Smaller Game Over text */
    }

    .rugalaga-logo {
        width: 54%;
        margin-top: 2%;
    }

    .rugalaga-logo.is-compact {
        width: 32%;
        margin-top: -60%;
    }

    .rugalaga-top10 {
        width: min(84%, 300px);
        font-size: 0.46rem;
        line-height: 1.7;
        padding: 0.7rem 0.75rem;
        top: 58%;
    }
}

/* Highscore Input Overlay */
#rugalaga-input-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    z-index: 30;
    background: rgba(0, 0, 0, 0.95);
    padding: 2rem;
    border: 3px solid #bfff00;
    box-shadow: 0 0 20px rgba(191, 255, 0, 0.6), inset 0 0 20px rgba(191, 255, 0, 0.2);
}

#rugalaga-input-overlay p {
    color: #bfff00;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    animation: blink 0.5s infinite;
}

#rugalaga-username {
    background: transparent;
    border: none;
    border-bottom: 4px solid #bfff00;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 2rem;
    width: 200px;
    text-align: center;
    margin-bottom: 2rem;
    outline: none;
    text-transform: uppercase;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#rugalaga-submit-btn {
    display: block;
    margin: 0 auto;
    background: #bfff00;
    color: #000;
    font-family: 'Press Start 2P', monospace;
    border: none;
    padding: 15px 30px;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.1s;
}

#rugalaga-submit-btn:hover {
    background: #fff;
    transform: scale(1.05);
}

#rugalaga-submit-btn:active {
    transform: scale(0.95);
}

/* Mobile Adjustments for Input Overlay */
@media (max-width: 768px) {
    #rugalaga-input-overlay {
        width: 80%;
        padding: 1rem;
        border-width: 2px;
    }

    #rugalaga-input-overlay p {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    #rugalaga-username {
        font-size: 1.2rem;
        width: 120px;
        margin-bottom: 1rem;
    }

    #rugalaga-submit-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* TV Controls Overlay */
.tv-controls {
    position: absolute;
    bottom: 14.4%;
    right: 14%;
    /* Moved right */
    display: flex;
    gap: 1.5%;
    /* Adjusted gap */
    z-index: 200;
    /* Increased z-index significantly */
    width: 28%;
    /* Slightly wider */
    height: 5.2%;
    /* background: rgba(0, 255, 0, 0.3); debug */
    pointer-events: auto;
    /* Ensure clicks are captured */
}

.tv-btn {
    flex: 1;
    height: 100%;
    cursor: pointer;
    border-radius: 50%;
    position: relative;
    /* Ensure absolute children are contained */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    --spark-x: 50%;
    --spark-y: 50%;
    --spark-dx: -6px;
    --spark-dy: -11px;
}

.tv-btn.electric-active::before,
.tv-btn.electric-active::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
}

.tv-btn.electric-active::before {
    inset: 22%;
    background: radial-gradient(circle, rgba(168, 236, 255, 0.18) 0%, rgba(74, 153, 255, 0.12) 44%, rgba(74, 153, 255, 0) 100%);
    box-shadow: 0 0 8px rgba(74, 153, 255, 0.18);
    animation: electric-pulse 0.42s ease-out 1;
}

.tv-btn.electric-active::after {
    width: 9px;
    height: 9px;
    top: var(--spark-y);
    left: var(--spark-x);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(210, 246, 255, 0.7) 0%, rgba(80, 170, 255, 0.28) 58%, rgba(80, 170, 255, 0) 100%);
    box-shadow: -8px 6px 0 -4px rgba(120, 214, 255, 0.24), 5px 12px 0 -6px rgba(120, 214, 255, 0.14);
    animation: electric-particle 0.48s ease-out 1;
}

@keyframes electric-pulse {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

@keyframes electric-particle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
    }

    40% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--spark-dx)), calc(-50% + var(--spark-dy))) scale(1.2);
    }
}


/* removed sparkle styles */

.no-signal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.5rem;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 2px 2px #ff003c, -2px -2px #d000ff;
    z-index: 100;
    pointer-events: none;
    letter-spacing: 5px;
    animation: nosignal-glitch 0.3s infinite;
    text-align: center;
    width: 100%;
}

@keyframes nosignal-glitch {
    0% {
        transform: translate(-50%, -50%) skew(0deg);
        opacity: 1;
        filter: blur(0px);
    }

    10% {
        transform: translate(-52%, -50%) skew(5deg);
        opacity: 0.8;
        filter: blur(1px);
    }

    20% {
        transform: translate(-48%, -50%) skew(-5deg);
        opacity: 1;
    }

    30% {
        transform: translate(-50%, -50%) skew(0deg);
        opacity: 0.5;
    }

    40% {
        transform: translate(-51%, -51%) scaleY(1.1);
        opacity: 1;
        filter: blur(0px);
    }

    50% {
        transform: translate(-49%, -49%) scaleY(0.9);
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) skew(0deg);
        opacity: 1;
    }
}










/* Removed old button-glitch */
/* TV Content (Video/Image) */
.tv-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
}

/* Glitch Animation Classes */
.glitch-active {
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.glitch-active::before,
.glitch-active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: 21;
    opacity: 0.5;
    pointer-events: none;
}

.glitch-active::before {
    animation: glitch-anim-1 0.4s infinite linear alternate-reverse;
    border-radius: 5px;
    /* Slight radius to match screen if needed, or remove */
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-2px);
    background: rgba(255, 0, 0, 0.2);
}

.glitch-active::after {
    animation: glitch-anim-2 0.4s infinite linear alternate-reverse;
    border-radius: 5px;
    clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
    transform: translate(2px);
    background: rgba(0, 0, 255, 0.2);
}

@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }

    20% {
        transform: skew(-2deg);
    }

    40% {
        transform: skew(2deg);
    }

    60% {
        transform: skew(-1deg);
    }

    80% {
        transform: skew(1deg);
    }

    100% {
        transform: skew(0deg);
    }
}

@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(40% 0 61% 0);
    }

    20% {
        clip-path: inset(92% 0 1% 0);
    }

    40% {
        clip-path: inset(43% 0 1% 0);
    }

    60% {
        clip-path: inset(25% 0 58% 0);
    }

    80% {
        clip-path: inset(54% 0 7% 0);
    }

    100% {
        clip-path: inset(58% 0 43% 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(24% 0 29% 0);
    }

    20% {
        clip-path: inset(54% 0 21% 0);
    }

    40% {
        clip-path: inset(5% 0 85% 0);
    }

    60% {
        clip-path: inset(36% 0 35% 0);
    }

    80% {
        clip-path: inset(9% 0 76% 0);
    }

    100% {
        clip-path: inset(62% 0 6% 0);
    }
}

#insert-sol {
    font-family: 'Press Start 2P', cursive;
    color: #bfff00;
    font-size: 1.2rem;
    margin-top: 30px;
    animation: blink 1s infinite;
    z-index: 100;
    pointer-events: auto;
    /* Allow clicks */
    text-shadow: 2px 2px 0 #000;
}