/* styles.css - Playtym Games Global Styles */

body {
    background-color: #FFFDF9; /* theme('colors.bg') fallback */
    color: #111111; /* theme('colors.dark') fallback */
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

/* Base custom classes for the bold, neobrutalist aesthetic */
.btn-playtym {
    display: inline-block;
    border: 3px solid #111111;
    border-radius: 12px;
    font-weight: 800;
    text-align: center;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 6px 6px 0px 0px rgba(17,17,17,1);
}

.btn-playtym:active {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0px 0px rgba(17,17,17,1);
}

.card-playtym {
    border: 3px solid #111111;
    border-radius: 24px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 8px 8px 0px 0px rgba(17,17,17,1);
}

.card-playtym:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px 0px rgba(17,17,17,1);
}

.input-playtym {
    border: 3px solid #111111;
    border-radius: 12px;
    box-shadow: 4px 4px 0px 0px rgba(17,17,17,1);
    transition: all 0.2s ease;
}

.input-playtym:focus {
    outline: none;
    background-color: #ffffff;
    box-shadow: 6px 6px 0px 0px rgba(17,17,17,1);
    transform: translate(-2px, -2px);
}

/* Playful background grid pattern */
.bg-grid-pattern {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(17, 17, 17, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(17, 17, 17, 0.05) 1px, transparent 1px);
}