/* CSS Variables */
:root {
    --paper: #FFFBEA;
    --ink: #1B1B1B;
    --graph: #D6D1C4;
    --accent: #3BAF5D;
    /* hijau BRET */
    --accent-2: #FFB703;
    /* kuning tombol */
    --shadow: rgba(0, 0, 0, .15);
}

/* Font Families */
@font-face {
    font-family: 'Kitto';
    src: url('../Fonts/Kitto-PersonalUse.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.font-fredoka {
    font-family: 'Kitto', sans-serif;
}

.font-patrick {
    font-family: 'Kitto', sans-serif;
}

.font-inter {
    font-family: 'Kitto', sans-serif;
}

/* Background Noise Effect */
.bg-noise {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.15) 1px, transparent 0);
    background-size: 20px 20px;
    animation: noise 0.2s infinite linear;
}

/* Keyframe Animations */
@keyframes marquee-ltr {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee-rtl {
    0% {
        transform: translateX(-50%);
    }

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

@keyframes pencil-wiggle {
    0% {
        transform: rotate(-0.5deg) translateX(-1px);
    }

    50% {
        transform: rotate(0.5deg) translateX(1px);
    }

    100% {
        transform: rotate(-0.5deg) translateX(-1px);
    }
}

@keyframes noise {
    0% {
        opacity: 0.97;
    }

    50% {
        opacity: 1.0;
    }

    100% {
        opacity: 0.97;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    70% {
        opacity: 1;
        transform: translateY(0);
    }

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

@keyframes scanline {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 20px;
    }
}

/* Helper Classes */
.sketch-border {
    border: 2px solid var(--ink);
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    animation: pencil-wiggle 0.8s infinite alternate;
}

.doodle-button {
    background-color: var(--accent-2);
    border: 2px solid var(--ink);
    border-radius: 0.75rem;
    /* box-shadow removed */
    transition: all 0.1s ease;
    cursor: pointer;
}

.doodle-button:hover {
    /* transform removed */
    /* box-shadow removed */
}

.doodle-button:active {
    /* transform removed */
    /* box-shadow removed */
}

.doodle-button:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Sketch Button - Konsisten dengan tombol pause */
.sketch-button {
    background-color: white;
    border: 2px solid var(--ink);
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    color: var(--ink);
    transition: all 0.2s ease;
    cursor: pointer;
    animation: pencil-wiggle 0.8s infinite alternate;
}

.sketch-button:hover {
    background-color: var(--graph);
    /* transform removed */
}

.sketch-button:active {
    /* transform removed */
}

.sketch-button:focus {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Icon Black Filter */
.icon-black {
    filter: brightness(0) saturate(100%);
}

/* Preloader Container - Vertikal Tinggi seperti gambar */
#preloader .sketch-border {
    width: 100%;
    max-width: 20rem;
    /* 320px - lebih sempit */
    min-width: 16rem;
    /* 256px - minimum width */
    aspect-ratio: 3/4;
    /* Tinggi lebih dari lebar */
}

/* Gallery Container */
.gallery-container {
    max-height: calc(100vh - 150px);
    /* Ensure fits in viewport */
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Full width */
    margin: 0;
    /* Remove any margin */
    padding: 1rem 0;
    /* Only top and bottom padding, no left/right */
}

/* Gallery Scroll Styles */
.gallery-row {
    height: 200px;
    /* Increased height for 2 rows only */
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    /* 24px spacing between rows */
    width: 100%;
    /* Full width */
}

.gallery-row>div {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    will-change: transform;
    white-space: nowrap;
}

/* Ensure rows 1 and 3 have more content */
#gallery-row-1,
#gallery-row-3 {
    width: max-content;
}

.gallery-card {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: white;
    border: 2px solid var(--ink);
    /* box-shadow removed */
    transition: transform 0.2s ease;
}

.gallery-card:hover {
    /* transform removed */
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Navigation Links */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Game Controls */
.d-pad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.1s ease;
    cursor: pointer;
}

.d-pad-btn:hover {
    background-color: var(--graph);
    /* transform removed */
}

.d-pad-btn:active {
    /* transform removed */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .gallery-container {
        max-height: calc(100vh - 120px);
        /* Smaller viewport on mobile */
        padding: 0.5rem 0;
        /* Only top and bottom padding, no left/right */
        width: 100%;
        /* Full width on mobile */
    }

    .gallery-row {
        height: 160px;
        /* Adjusted height for 2 rows on mobile */
        margin-bottom: 0.75rem;
        /* Reduced spacing */
        width: 100%;
        /* Full width */
    }

    .gallery-card {
        width: 140px;
        height: 140px;
    }

    .marquee-ltr {
        animation-duration: 35s;
    }

    .marquee-rtl {
        animation-duration: 28s;
    }

    .sketch-border {
        animation-duration: 1s;
    }
}

@media (max-width: 480px) {
    .gallery-container {
        max-height: calc(100vh - 100px);
        /* Even smaller on small mobile */
        padding: 0.25rem 0;
        /* Only top and bottom padding, no left/right */
        width: 100%;
        /* Full width on small mobile */
    }

    .gallery-row {
        height: 140px;
        /* Adjusted height for 2 rows on small mobile */
        margin-bottom: 0.5rem;
        /* Tighter spacing */
        width: 100%;
        /* Full width */
    }

    .gallery-card {
        width: 120px;
        height: 120px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .sketch-border,
    .marquee-ltr,
    .marquee-rtl,
    .bg-noise {
        animation: none;
    }

    .marquee-row {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .marquee-track {
        width: auto;
        animation: none;
    }

    .marquee-content {
        width: auto;
    }
}

/* Focus Styles for Accessibility */
button:focus,
a:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--ink);
    border-radius: 4px;
}

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

/* Game Canvas Styles */
#game-canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -webkit-crisp-edges;
    image-rendering: crisp-edges;
}

/* Game Container Positioning */
#mini-game .sketch-border {
    position: relative;
}

/* Speed Indicator Styles */
.speed-indicator {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: var(--accent) !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-family: 'Kitto', sans-serif !important;
    font-size: 14px !important;
    z-index: 1000 !important;
    border: 2px solid var(--ink) !important;
    animation: fadeOut 2s ease-out forwards !important;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Error States */
.error {
    border-color: #ef4444;
    background-color: #fef2f2;
}

/* Success States */
.success {
    border-color: var(--accent);
    background-color: #f0fdf4;
}

/* Background Paper */
.bg-paper {
    background-image: url('/assets/bg.jpg');
}

/* Hero Title Shadow - REMOVED */
.hero-title-shadow {
    /* text-shadow removed */
}

/* Hero Container */
.hero-container {
    max-width: min(85vw, 75rem);
    margin: 0 auto;
    padding: 0 1rem;
}

/* Hero Section Spacing */
#hero {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}

/* Hero Video Container */
.hero-video-container {
    width: min(40vh, 40vw);
    height: min(40vh, 40vw);
    max-width: 100%;
    max-height: 100%;
}

/* Responsive Video Container */
@media (max-width: 768px) {
    .hero-video-container {
        width: min(35vh, 35vw);
        height: min(35vh, 35vw);
    }
}

@media (max-width: 480px) {
    .hero-video-container {
        width: min(30vh, 30vw);
        height: min(30vh, 30vw);
    }
}

@media (max-width: 360px) {
    .hero-video-container {
        width: min(25vh, 25vw);
        height: min(25vh, 25vw);
    }
}