/* gabs.games - Watercolor Arcade */
:root {
    --rice-paper: #FDF6EC;
    --arcade-flamingo: #FF2D7B;
    --joystick-lime: #A8FF04;
    --coin-cyan: #00E5FF;
    --sunset-apricot: #FFB88C;
    --inkwell-plum: #2D1B3D;
    --faded-denim: #6B7FA3;
    --vellum-cream: #FFF8F0;
}

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

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--rice-paper);
    color: var(--inkwell-plum);
    overflow-x: hidden;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.65;
}

.paper-grain {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Hero */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-wash {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse 80vw 70vh at 55% 45%, rgba(255,184,140,0.5) 0%, transparent 50%),
                radial-gradient(ellipse 50vw 50vh at 40% 55%, rgba(255,45,123,0.15) 0%, transparent 45%);
    filter: blur(40px);
    pointer-events: none;
}

.morph-hero {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 15%;
    right: 10%;
    background: radial-gradient(ellipse at 40% 30%, rgba(255,45,123,0.15), rgba(168,255,4,0.08));
    border-radius: 40% 60% 55% 45% / 45% 50% 50% 55%;
    animation: heroMorph 20s ease-in-out infinite;
    filter: blur(30px);
    pointer-events: none;
}

@keyframes heroMorph {
    0% { border-radius: 40% 60% 55% 45% / 45% 50% 50% 55%; }
    33% { border-radius: 55% 45% 40% 60% / 60% 40% 55% 45%; }
    66% { border-radius: 45% 55% 60% 40% / 50% 55% 45% 50%; }
    100% { border-radius: 40% 60% 55% 45% / 45% 50% 50% 55%; }
}

.hero-title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(3.5rem, 10vw, 9rem);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: var(--inkwell-plum);
    text-shadow: 0 2px 20px rgba(255,45,123,0.3);
    position: relative;
    z-index: 2;
}

.hero-tagline {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--faded-denim);
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.hero-tagline.visible { opacity: 1; }

.watercolor-edge {
    height: 60px;
    background: linear-gradient(180deg, var(--rice-paper), var(--rice-paper) 40%, rgba(255,184,140,0.2) 60%, var(--rice-paper));
    position: relative;
}

/* Grid */
.grid-zone {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(12px, 2vw, 28px);
    padding: clamp(16px, 4vw, 48px);
    max-width: 1400px;
    margin: 0 auto;
}

.game-card {
    background: var(--vellum-cream);
    border-radius: 12px 18px 14px 20px;
    padding: clamp(16px, 2vw, 28px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s;
}

.game-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(255,45,123,0.12), 0 4px 15px rgba(255,184,140,0.2);
}

.card-span-2 { grid-column: span 4; }
.card-span-3 { grid-column: span 6; }

.card-illustration {
    width: 100%;
    height: 180px;
    border-radius: 8px 12px 10px 14px;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.illust-island {
    background: linear-gradient(180deg, rgba(0,229,255,0.15) 0%, rgba(255,184,140,0.4) 40%, rgba(168,255,4,0.1) 70%, rgba(255,45,123,0.08) 100%);
}

.illust-maze {
    background: repeating-linear-gradient(90deg, rgba(45,27,61,0.08) 0px, rgba(45,27,61,0.08) 20px, transparent 20px, transparent 40px),
                repeating-linear-gradient(0deg, rgba(45,27,61,0.08) 0px, rgba(45,27,61,0.08) 20px, transparent 20px, transparent 40px),
                linear-gradient(135deg, rgba(255,184,140,0.3), rgba(0,229,255,0.15));
}

.illust-sky {
    background: linear-gradient(180deg, rgba(0,229,255,0.2) 0%, rgba(255,184,140,0.15) 50%, rgba(255,45,123,0.1) 100%);
}

.illust-ocean {
    background: linear-gradient(180deg, rgba(107,127,163,0.15) 0%, rgba(0,229,255,0.2) 30%, rgba(0,229,255,0.3) 60%, rgba(45,27,61,0.15) 100%);
}

.illust-market {
    background: linear-gradient(135deg, rgba(255,184,140,0.4), rgba(255,45,123,0.15), rgba(168,255,4,0.1));
}

.illust-forest {
    background: linear-gradient(180deg, rgba(168,255,4,0.15) 0%, rgba(45,27,61,0.08) 50%, rgba(168,255,4,0.2) 100%);
}

.illust-tower {
    background: linear-gradient(0deg, rgba(45,27,61,0.2) 0%, rgba(255,184,140,0.3) 40%, rgba(0,229,255,0.1) 100%);
}

.illust-clock {
    background: radial-gradient(circle at 50% 50%, rgba(255,45,123,0.15) 0%, rgba(255,184,140,0.2) 40%, rgba(0,229,255,0.1) 100%);
}

.card-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    line-height: 1.3;
    color: var(--inkwell-plum);
    margin-bottom: 0.5rem;
}

.card-desc {
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    color: var(--inkwell-plum);
    opacity: 0.8;
    margin-bottom: 0.75rem;
}

.card-label {
    font-family: 'Caveat', cursive;
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    color: var(--faded-denim);
}

/* Palette Tray */
.palette-tray {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 4rem 2rem;
    background: var(--inkwell-plum);
}

.palette-swatch {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.palette-swatch:hover {
    transform: scale(1.15);
}

.palette-swatch::after {
    content: attr(data-name);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Caveat', cursive;
    font-size: 0.75rem;
    color: var(--rice-paper);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

.palette-swatch:hover::after { opacity: 1; }

@media (max-width: 768px) {
    .grid-zone { grid-template-columns: repeat(2, 1fr); }
    .card-span-2, .card-span-3 { grid-column: span 2; }
    .card-illustration { height: 120px; }
}

@media (max-width: 480px) {
    .grid-zone { grid-template-columns: 1fr; }
    .card-span-2, .card-span-3 { grid-column: span 1; }
}