:root {
    --bg-color: #f4f0ea;
    --text-color: #111111;
    --border-color: #111111;
    --card-1: #ff90e8;
    /* Pink */
    --card-2: #ffc900;
    /* Yellow */
    --card-3: #22d3ee;
    /* Blue */
    --card-4: #a3e635;
    /* Green */
    --card-5: #c084fc;
    /* Purple */
    --card-6: #fb923c;
    /* Orange */
    --card-7: #ef4444;
    /* Red */
    --card-8: #6366f1;
    /* Indigo */
    --card-9: #d946ef;
    /* Magenta */
    --card-10: #0d9488;
    /* Teal */
    --card-11: #f97316;
    /* Orange-Red */
    --card-12: #581c87;
    /* Deep Purple */
    --card-13: #84cc16;
    /* Lime Green */
    --card-14: #3b82f6;
    /* Sky Blue */
    --card-15: #64748b;
    /* Slate Gray */
    --card-16: #b91c1c;
    /* Dark Red */
    --card-17: #06b6d4;
    /* Cyan */
    --card-18: #ec4899;
    /* Pink */
    --card-19: #8b5cf6;
    /* Violet */
    --card-20: #4f46e5;
    /* Indigo */
}

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.toybox-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    text-align: center;
    margin-bottom: 5rem;
    padding-top: 10rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.title {
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
    color: #ffffff;
    text-shadow:
        -4px -4px 0 var(--border-color),
        4px -4px 0 var(--border-color),
        -4px 4px 0 var(--border-color),
        4px 4px 0 var(--border-color),
        10px 10px 0 var(--border-color);
    display: block;
    width: fit-content;
    transform: rotate(-3deg);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
    margin: 0 auto 0.2rem auto;
    position: relative;
}

.title:hover {
    transform: rotate(0deg) scale(1.05);
}

.subtitle {
    font-family: 'Space Mono', monospace;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    margin: 1rem auto 0 auto;
    background-color: var(--text-color);
    color: #fff;
    padding: 0.6rem 1.4rem;
    display: block;
    width: fit-content;
    transform: rotate(1deg);
    box-shadow: 4px 4px 0 var(--card-3);
    border: 3px solid var(--border-color);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    width: 100%;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: var(--text-color);
    border: 4px solid var(--border-color);
    padding: 2rem;
    height: 260px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 8px 8px 0 var(--border-color);
    cursor: pointer;
    overflow: hidden;
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 2;
}

.card h2 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}

.card-number {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    opacity: 0.8;
    background: #fff;
    border: 2px solid var(--border-color);
    padding: 0.2rem 0.6rem;
    align-self: flex-start;
    border-radius: 20px;
    box-shadow: 2px 2px 0 var(--border-color);
}

.card-deco {
    position: absolute;
    bottom: -10px;
    right: 10px;
    font-size: 6rem;
    opacity: 0.2;
    z-index: 1;
    transition: all 0.4s ease;
    filter: grayscale(100%);
}

.card:hover .card-deco {
    transform: scale(1.3) rotate(-15deg);
    opacity: 0.8;
    filter: grayscale(0%);
    bottom: 10px;
    right: 20px;
}

/* Individual Card Aesthetics (randomized look) */
.card-1 {
    background-color: var(--card-1);
    transform: translateY(20px) rotate(-3deg);
    border-radius: 12px 40px 12px 12px;
}

.card-2 {
    background-color: var(--card-2);
    transform: translateY(-10px) rotate(2deg);
    border-radius: 40px 12px 12px 40px;
}

.card-3 {
    background-color: var(--card-3);
    transform: translateY(30px) rotate(-2deg);
    border-radius: 12px 12px 40px 12px;
}

.card-4 {
    background-color: var(--card-4);
    transform: translateY(-20px) rotate(3deg);
    border-radius: 12px 40px 40px 12px;
}

.card-5 {
    background-color: var(--card-5);
    transform: translateY(15px) rotate(-1deg);
    border-radius: 40px 12px 40px 12px;
}

.card-6 {
    background-color: var(--card-6);
    transform: translateY(40px) rotate(2deg);
    border-radius: 12px 12px 12px 40px;
}

.card-7 {
    background-color: var(--card-7);
    transform: translateY(10px) rotate(-2deg);
    border-radius: 30px 12px 30px 12px;
}

.card-8 {
    background-color: var(--card-8);
    transform: translateY(-5px) rotate(3deg);
    border-radius: 12px 40px 12px 40px;
}

.card-9 {
    background-color: var(--card-9);
    transform: translateY(25px) rotate(-1deg);
    border-radius: 20px;
}

.card-10 {
    background-color: var(--card-10);
    transform: translateY(-15px) rotate(2deg);
    border-radius: 12px 12px 40px 40px;
}

.card-11 {
    background-color: var(--card-11);
    transform: translateY(10px) rotate(-3deg);
    border-radius: 40px 12px 40px 12px;
}

.card-12 {
    background-color: var(--card-12);
    transform: translateY(-20px) rotate(1deg);
    border-radius: 12px 40px 12px 40px;
}

.card-13 {
    background-color: var(--card-13);
    transform: translateY(15px) rotate(-2deg);
    border-radius: 12px 12px 40px 12px;
}

.card-14 {
    background-color: var(--card-14);
    transform: translateY(-10px) rotate(3deg);
    border-radius: 40px 40px 12px 12px;
}

.card-15 {
    background-color: var(--card-15);
    transform: translateY(20px) rotate(-1deg);
    border-radius: 12px 12px 12px 12px;
}

.card-16 {
    background-color: var(--card-16);
    transform: translateY(-5px) rotate(2deg);
    border-radius: 0;
}

.card-17 {
    background-color: var(--card-17);
    transform: translateY(15px) rotate(-3deg);
    border-radius: 40px;
}

.card-18 {
    background-color: var(--card-18);
    transform: translateY(-15px) rotate(1deg);
    border-radius: 12px 12px 40px 12px;
}

.card-19 {
    background-color: var(--card-19);
    transform: translateY(20px) rotate(-2deg);
    border-radius: 40px 12px 12px 40px;
}

.card-20 {
    background-color: var(--card-20);
    transform: translateY(-10px) rotate(1deg);
    border-radius: 20px 40px 20px 40px;
}

/* Hover effects */
.card-1:hover,
.card-2:hover,
.card-3:hover,
.card-4:hover,
.card-5:hover,
.card-6:hover,
.card-7:hover,
.card-8:hover,
.card-9:hover,
.card-10:hover,
.card-11:hover,
.card-12:hover,
.card-13:hover,
.card-14:hover,
.card-15:hover,
.card-16:hover,
.card-17:hover,
.card-18:hover,
.card-19:hover,
.card-20:hover {
    transform: translateY(-5px) rotate(0deg) scale(1.02);
    box-shadow: 12px 12px 0 var(--border-color);
    z-index: 10;
}

@media (max-width: 768px) {
    .cards-container {
        gap: 2rem;
    }

    .card-1,
    .card-2,
    .card-3,
    .card-4,
    .card-5,
    .card-6,
    .card-7,
    .card-8,
    .card-9,
    .card-10,
    .card-11,
    .card-12,
    .card-13,
    .card-14,
    .card-15,
    .card-16,
    .card-17,
    .card-18,
    .card-19,
    .card-20 {
        transform: none !important;
        height: auto;
        min-height: 220px;
    }

    .card-1:hover,
    .card-2:hover,
    .card-3:hover,
    .card-4:hover,
    .card-5:hover,
    .card-6:hover,
    .card-7:hover,
    .card-8:hover,
    .card-9:hover {
        transform: translateY(-5px) scale(1.02) !important;
    }

    header {
        margin-bottom: 3rem;
        padding-top: 6rem;
        padding-left: 0;
        align-items: center;
        text-align: center;
    }

    .title {
        font-size: clamp(2.5rem, 15vw, 4rem);
        transform: rotate(-3deg);
        margin: 0 auto 0.1rem auto;
        left: 0;
        text-shadow:
            -2px -2px 0 var(--border-color),
            2px -2px 0 var(--border-color),
            -2px 2px 0 var(--border-color),
            2px 2px 0 var(--border-color),
            6px 6px 0 var(--border-color);
    }

    .subtitle {
        transform: rotate(1deg);
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        margin: 0.8rem auto 0 auto;
    }
}

footer {
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    padding: 3rem 1rem;
    text-align: center;
    margin-top: 5rem;
    border-top: 4px solid var(--border-color);
}

footer h4 {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 2px;
    opacity: 0.8;
}