/* =========================
HOME PAGE
========================= */

.home-page{

    min-height:100vh;

    padding:
    clamp(4rem, 7vw, 7rem)
    clamp(1.5rem, 5vw, 5rem);



    position:relative;
}

/* =========================
BACKGROUND TEXTURE
========================= */

.home-page::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0.05;

    background-image:
    radial-gradient(
        rgba(255,255,255,0.8) 0.04rem,
        transparent 0.04rem
    );

    background-size:
    0.7rem 0.7rem;

    pointer-events:none;
}

/* =========================
CONTAINER
========================= */

.home-container{

    width:min(100%, 72rem);

    margin-inline:auto;

    position:relative;

    z-index:2;
}

/* =========================
HERO
========================= */

.hero{

    margin-bottom:
    clamp(3rem, 6vw, 5rem);

    max-width:42rem;
}

.eyebrow{

    color:var(--orange);

    font-size:0.8rem;

    letter-spacing:0.35em;

    text-transform:uppercase;

    margin-bottom:1rem;

    font-weight:700;
}

.hero h1{

    font-size:
    clamp(4rem, 9vw, 7rem);

    line-height:0.88;

    letter-spacing:-0.08em;

    color:var(--paper);

    text-shadow:
    0.3rem 0.3rem 0
    rgba(0,0,0,0.18);

    max-width:8ch;
}

/* =========================
GRID
========================= */

.game-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(15rem, 1fr)
    );

    gap:
    clamp(1.4rem, 2vw, 2rem);

    align-items:start;

    margin-bottom:4rem;
    padding-top
    :2rem;
}

/* =========================
COURSE CARD
========================= */

.game-card{

    position:relative;

    overflow:hidden;

    min-height:15rem;

    padding:
    2rem 1.7rem;

    border:
    0.15rem solid rgba(255,255,255,0.08);

    backdrop-filter:blur(0.5rem);

    transition:0.18s ease;

    isolation:isolate;

    box-shadow:
    1rem 1rem 0
    rgba(16,18,28,0.5);
}

/* =========================
TOP STRIP
========================= */

.game-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:0.7rem;

    background:
    linear-gradient(
        90deg,
        var(--red),
        var(--orange)
    );

    z-index:5;
}

/* =========================
TEXTURE
========================= */

.game-card::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:0.04;

    background-image:
    radial-gradient(
        rgba(255,255,255,0.9) 0.05rem,
        transparent 0.05rem
    );

    background-size:
    0.7rem 0.7rem;

    pointer-events:none;
}

/* =========================
CARD PERSONALITY
========================= */
/* 1, 5, 9, 13... */

.game-card:nth-child(4n + 1){

    background:
    linear-gradient(
        145deg,
        #5C4059,
        #4C4E73
    );

    border-radius:
    2.6rem 2rem 2.8rem 1.8rem;

    transform:
    rotate(-2deg);
}

/* 2, 6, 10, 14... */

.game-card:nth-child(4n + 2){

    background:
    linear-gradient(
        145deg,
        #645C7B,
        #4F4A6B
    );

    border-radius:
    1.8rem 2.5rem 2rem 2.7rem;

    transform:
    rotate(1.5deg);
}

/* 3, 7, 11, 15... */

.game-card:nth-child(4n + 3){

    background:
    linear-gradient(
        145deg,
        #4F547A,
        #45496A
    );

    border-radius:
    2.8rem 1.9rem 2.5rem 2rem;

    transform:
    rotate(-1deg);
}

/* 4, 8, 12, 16... */

.game-card:nth-child(4n){

    background:
    linear-gradient(
        145deg,
        #39445E,
        #313952
    );

    border-radius:
    2rem 2.8rem 2.2rem 2.5rem;

    transform:
    rotate(2deg);
}
/* =========================
5, 11, 17...
========================= */

.game-card:nth-child(6n + 5){

    background:
    linear-gradient(
        145deg,
        #56607F,
        #404764
    );

    border-radius:
    2.7rem 1.7rem 2.4rem 2.9rem;

    transform:
    rotate(-1.3deg);
}

/* =========================
6, 12, 18...
========================= */

.game-card:nth-child(6n){

    background:
    linear-gradient(
        145deg,
        #4D5873,
        #38415B
    );

    border-radius:
    1.9rem 2.9rem 2.1rem 2.6rem;

    transform:
    rotate(1.8deg);
}

/* =========================
SKETCH BORDER
========================= */

.game-card .sketch-border{

    position:absolute;

    inset:0.45rem;

    border:
    0.08rem solid rgba(255,255,255,0.08);

    pointer-events:none;
}

/* =========================
CARD CONTENT
========================= */

.game-card h2{

    font-size:
    clamp(2rem, 3vw, 2.8rem);

    line-height:0.92;

    margin-bottom:1rem;

    color:var(--paper);

    letter-spacing:-0.05em;

    position:relative;

    z-index:6;

    text-shadow:
    0.15rem 0.15rem 0
    rgba(0,0,0,0.14);
}

.game-card p{

    color:
    rgba(248,242,232,0.72);

    line-height:1.7;

    font-size:1rem;


    position:relative;

    z-index:6;
}

/* =========================
HOVER
========================= */

.game-card:hover{

    transform:
    translateY(-0.4rem)
    rotate(0deg);

    box-shadow:
    1.2rem 1.2rem 0
    rgba(16,18,28,0.62);
}

/* =========================
DAILY WORD SECTION
========================= */

.daily-word-wrap{

    display:flex;

    justify-content:flex-start;
}

/* =========================
DAILY WORD CARD
========================= */

.daily-word-card{

    position:relative;

    overflow:hidden;

    width:min(100%, 24rem);

    padding:1.8rem;

    background:
    linear-gradient(
        145deg,
        #434867,
        #353B56
    );

    border:
    0.15rem solid rgba(255,255,255,0.08);

    border-radius:
    2.5rem 1.8rem 2.7rem 2rem;

    box-shadow:
    1rem 1rem 0
    rgba(16,18,28,0.5);

    transform:
    rotate(-2deg);
}

/* TOP STRIP */

.daily-word-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:0.7rem;

    background:
    linear-gradient(
        90deg,
        var(--red),
        var(--orange)
    );
}

/* TEXTURE */

.daily-word-card::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:0.04;

    background-image:
    radial-gradient(
        rgba(255,255,255,0.9) 0.05rem,
        transparent 0.05rem
    );

    background-size:
    0.7rem 0.7rem;

    pointer-events:none;
}

/* SKETCH BORDER */

.daily-word-card .sketch-border{

    position:absolute;

    inset:0.45rem;

    border:
    0.08rem solid rgba(255,255,255,0.08);

    border-radius:
    1.8rem 1.4rem 2rem 1.5rem;

    pointer-events:none;
}

/* =========================
DAILY TEXT
========================= */

.daily-word-label{

    color:var(--muted);

    font-size:0.72rem;

    letter-spacing:0.35em;

    text-transform:uppercase;

    margin-bottom:1rem;

    font-weight:700;

    position:relative;

    z-index:3;
}

.daily-polish{

    font-family:'Fredoka', sans-serif;

    font-size:
    clamp(3rem, 6vw, 4rem);

    line-height:0.9;

    color:var(--paper);

    margin-bottom:0.4rem;

    position:relative;

    z-index:3;

    text-shadow:
    0.15rem 0.15rem 0
    rgba(0,0,0,0.18);
}

.daily-english{

    color:#FFD1B8;

    font-size:1.2rem;

    font-weight:700;

    position:relative;

    z-index:3;
}

/* =========================
MOBILE
========================= */

@media(max-width:48rem){

    .hero h1{

        max-width:7ch;
    }

    .game-grid{

        grid-template-columns:1fr;
    }

    .game-card{

        min-height:13rem;
    }

    .daily-word-wrap{

        justify-content:center;
    }

    .daily-word-card{

        width:100%;
    }
}

.section-title{

    position:relative;

    width:fit-content;

    margin:
    2rem 0 2.2rem;

    font-size:
    clamp(1.8rem, 4vw, 2.6rem);

    font-weight:900;

    line-height:0.95;

    color:#FFF8F2;

    letter-spacing:-0.03em;

    transform:
    rotate(-1deg);
    
    display:flex;

    align-items:center;

    gap:1rem;
}
.section-heading h2{

    margin:0;
}

/* HAND DRAWN UNDERLINE */



.title-icon{

    display:inline-flex;

    margin-left:-0.19rem;

    transform:
    translateY(0.3rem);
}

.title-icon svg{

    width:2rem;

    height:2rem;
}