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

/* Arcade Mode Styles */
body.arcade-mode {
    --primary-red: #FF0044;
    --primary-red-dark: #CC0033;
    --dark-black: #050505;
    --dark-gray: #1a1a1a;
    --off-white: #e8e8e8;
    --pure-white: #ffffff;
    font-family: 'Press Start 2P', cursive, sans-serif !important;
}

body.arcade-mode h1, 
body.arcade-mode h2, 
body.arcade-mode h3, 
body.arcade-mode p, 
body.arcade-mode a, 
body.arcade-mode span, 
body.arcade-mode div,
body.arcade-mode .btn-cta,
body.arcade-mode .btn-cta-light {
    font-family: 'Press Start 2P', cursive, sans-serif !important;
}

/* Adjust font sizes for pixel font as it tends to be wider */
body.arcade-mode h2.section-title {
    font-size: 1.8rem;
}
body.arcade-mode p {
    font-size: 0.8rem;
    line-height: 2;
}
body.arcade-mode .hero-content .slogan {
    font-size: 1.2rem;
}
body.arcade-mode nav ul li a {
    font-size: 0.7rem;
}

/* Pixelated rendering for images */
body.arcade-mode img, 
body.arcade-mode .hero-slide {
    image-rendering: pixelated;
}

/* CRT Scanline overlay */
body.arcade-mode::after {
    content: "";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 9999;
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
}

/* Toki Sprite Styles */
.toki-sprite {
    height: 59px;
    background-image: url('img/Arcade - Toki _ Juju Densetsu - Characters - Toki.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    transform: scale(4.8);
    transform-origin: center center;
    animation-timing-function: step-end;
}

.toki-sprite.jump {
    animation: toki-dance 1.2s infinite step-end;
}

@keyframes toki-dance {
    0% { background-position: -373px -372px; width: 32px; }
    10% { background-position: -410px -372px; width: 33px; }
    20% { background-position: -449px -372px; width: 36px; }
    30% { background-position: -490px -372px; width: 32px; }
    40% { background-position: -527px -372px; width: 29px; }
    50% { background-position: -562px -372px; width: 37px; }
    60% { background-position: -605px -372px; width: 37px; }
    70% { background-position: -648px -372px; width: 33px; }
    80% { background-position: -685px -372px; width: 39px; }
    90% { background-position: -731px -372px; width: 31px; }
    100% { background-position: -373px -372px; width: 32px; }
}

/* Arcade footer icons */
.arcade-footer-icons {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    animation: blink 2s infinite;
}
.arcade-footer-icons svg {
    width: 40px;
    height: 40px;
    fill: #FF0044;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}