/* Playard - Retro Precision Design System */

/* ========== FONTS ========== */
@font-face {
    font-family: 'Silkscreen';
    src: url('../fonts/slkscr.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

/* ========== BASE ========== */
html { scroll-behavior: smooth; }
::selection { background-color: #FCEB55; color: #182828; }
body { overflow-x: hidden; }

/* ========== PIXEL / RETRO PATTERNS ========== */
.pixel-grid {
    background-image:
        linear-gradient(rgba(53, 105, 105, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53, 105, 105, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}

.dot-pattern {
    background-image: radial-gradient(circle, rgba(252, 235, 85, 0.05) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
}

.scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(53, 105, 105, 0.03) 3px,
        rgba(53, 105, 105, 0.03) 6px
    );
    pointer-events: none;
    z-index: 1;
}

/* CRT screen glow effect */
.screen-glow {
    box-shadow:
        0 0 40px rgba(53, 105, 105, 0.3),
        0 0 80px rgba(53, 105, 105, 0.15),
        inset 0 0 30px rgba(53, 105, 105, 0.1);
}

/* ========== GLOW EFFECTS ========== */
.glow-yellow {
    box-shadow: 0 0 20px rgba(252, 235, 85, 0.2), 0 8px 32px rgba(252, 235, 85, 0.1);
}
.glow-yellow-hover:hover {
    box-shadow: 0 0 30px rgba(252, 235, 85, 0.35), 0 8px 40px rgba(252, 235, 85, 0.15);
}

.glow-teal {
    box-shadow: 0 0 20px rgba(53, 105, 105, 0.3), 0 8px 32px rgba(53, 105, 105, 0.15);
}

.card-glow {
    box-shadow: inset 0 0 0 1px rgba(53, 105, 105, 0.15);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card-glow:hover {
    box-shadow: inset 0 0 0 1px rgba(252, 235, 85, 0.3), 0 0 30px rgba(53, 105, 105, 0.1);
    transform: translateY(-4px);
}

/* ========== BUTTONS ========== */
.btn-primary {
    background: #FCEB55;
    color: #182828;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    box-shadow: 0 0 24px rgba(252, 235, 85, 0.35), 0 6px 24px rgba(252, 235, 85, 0.15);
    transform: translateY(-2px);
}
.btn-primary:active {
    transform: translateY(0) scale(0.97);
}

.btn-outline {
    border: 2px solid rgba(53, 105, 105, 0.4);
    color: #b8d4d4;
    transition: all 0.2s ease;
}
.btn-outline:hover {
    border-color: #FCEB55;
    color: #FCEB55;
    background: rgba(252, 235, 85, 0.05);
}

/* ========== MOBILE NAV ========== */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.mobile-menu.open { transform: translateX(0); }

/* ========== NAV SCROLL ========== */
.nav-scrolled {
    background: rgba(18, 30, 30, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(53, 105, 105, 0.15);
}

/* ========== SCROLL ANIMATIONS ========== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger */
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 120ms; }
.stagger > *:nth-child(3) { transition-delay: 240ms; }
.stagger > *:nth-child(4) { transition-delay: 360ms; }

/* ========== KEYFRAMES ========== */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(1deg); }
}
.animate-float { animation: float 5s ease-in-out infinite; }

@keyframes pulse-soft {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.animate-pulse-soft { animation: pulse-soft 3s ease-in-out infinite; }

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.blink { animation: blink-cursor 1s step-end infinite; }

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, transparent, rgba(252, 235, 85, 0.08), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

/* ========== PIXEL TEXT ========== */
.font-pixel { font-family: 'Silkscreen', monospace; }

/* ========== FEATURE ICON CONTAINERS ========== */
.icon-box {
    width: 56px;
    height: 56px;
    background: rgba(53, 105, 105, 0.15);
    border: 1px solid rgba(53, 105, 105, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.group:hover .icon-box {
    background: rgba(252, 235, 85, 0.1);
    border-color: rgba(252, 235, 85, 0.3);
}

/* ========== GRADIENT TEXT ========== */
.text-gradient-yellow {
    background: linear-gradient(135deg, #FCEB55, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-teal {
    background: linear-gradient(135deg, #5ba3a3, #356969);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 639px) {
    /* Tighter section padding */
    section { padding-top: 4rem; padding-bottom: 4rem; }

    /* Hero: smaller device SVG */
    .device-glow svg { max-width: 280px; }

    /* Terminal: prevent overflow */
    pre { font-size: 0.6rem !important; overflow-x: auto; }

    /* Module card icons: shorter on mobile */
    .module-icon-area { height: 140px !important; }

    /* Spec cards: tighter padding */
    .spec-card { padding: 1rem !important; }
    .spec-card .material-symbols-outlined { font-size: 1.5rem !important; margin-bottom: 0.5rem !important; }
    .spec-card .font-display { font-size: 0.875rem !important; }

    /* Philosophy stats: smaller numbers */
    .philosophy-stat { font-size: 2rem !important; }

    /* Value bar: wrap nicely */
    .value-bar { gap: 1rem !important; }
    .value-bar > div { flex: 0 0 calc(50% - 0.5rem); justify-content: flex-start; }

    /* Buttons: full width on mobile */
    .hero-actions { flex-direction: column; }
    .hero-actions > * { width: 100%; justify-content: center; text-align: center; }

    /* Footer grid: single column */
    footer .grid { gap: 2rem; }

    /* Waitlist form */
    .waitlist-form { flex-direction: column !important; }
    .waitlist-form input, .waitlist-form button { width: 100%; }

    /* Game section: reduce SVG game height */
    .game-preview svg { max-height: 250px; }

    /* Hide floating LoRa module hint on small screens */
    .module-hint-float { display: none; }

    /* Terminal font size */
    .font-mono { font-size: 0.7rem; }

    /* Section headings */
    .section-heading { font-size: 1.75rem !important; }
}