/* ========================================
   GAME CORNER
   2000s / 2010s STYLE
======================================== */


/* ========================================
   GENERAL
======================================== */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family: Arial, sans-serif;

    background-color: #fff7fc;

    background-image:
        radial-gradient(
            #ffc8e8 1px,
            transparent 1px
        );

    background-size: 12px 12px;

    color: #4b3850;

}


/* ========================================
   MAIN PAGE
======================================== */

.games-page {

    width: 92%;

    max-width: 900px;

    margin: 30px auto;

}


/* ========================================
   HEADER
======================================== */

.games-header {

    text-align: center;

    padding: 20px;

    background: white;

    border: 3px solid #ffc8e8;

    box-shadow:
        6px 6px 0 #d98abd;

    margin-bottom: 25px;

}


.games-header h1 {

    margin: 8px 0;

    color: #b65b9d;

    font-size: 28px;

    letter-spacing: 4px;

    text-shadow:
        2px 2px 0 #ffc8e8;

}


.games-header p {

    margin: 8px 0;

    color: #8a607d;

    font-size: 13px;

}


.sparkles {

    color: #d98abd;

    letter-spacing: 5px;

    font-size: 14px;

}


/* ========================================
   INTRO
======================================== */

.game-intro {

    padding: 15px;

    margin-bottom: 25px;

    text-align: center;

    background: #fff;

    border: 2px dashed #d98abd;

}


.intro-title {

    color: #b65b9d;

    font-weight: bold;

    letter-spacing: 2px;

    margin-bottom: 7px;

}


.game-intro p {

    margin: 5px;

    font-size: 13px;

}


.small-text {

    color: #b989a9;

    font-size: 10px !important;

}


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

.game-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 22px;

}


/* ========================================
   GAME CARD
======================================== */

.game-card {

    position: relative;

    text-align: center;

    padding: 20px;

    min-height: 230px;

    background: white;

    border: 3px solid #ffc8e8;

    box-shadow:
        5px 5px 0 #d98abd;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


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

.game-card:hover {

    transform:
        translateY(-5px)
        rotate(-1deg);

    box-shadow:
        8px 8px 0 #d98abd;

}


/* ========================================
   GAME ICON
======================================== */

.game-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 75px;

    height: 75px;

    margin: 0 auto 10px;

    background: #fff0f8;

    border: 3px outset #ffc8e8;

    font-size: 35px;

}


/* ========================================
   TITLE
======================================== */

.game-card h2 {

    margin: 8px 0;

    color: #b65b9d;

    font-size: 15px;

    letter-spacing: 1px;

}


.game-card p {

    min-height: 32px;

    margin: 8px 0 15px;

    color: #765d70;

    font-size: 11px;

    line-height: 1.5;

}


/* ========================================
   GAME BUTTON
======================================== */

.game-button {

    display: inline-block;

    padding: 7px 18px;

    border: 3px outset #ffc8e8;

    background: #fff7fc;

    color: #b65b9d;

    font-size: 11px;

    font-weight: bold;

    text-decoration: none;

    letter-spacing: 1px;

}


.game-button:hover {

    background: #ffd9ef;

    color: #9e4b88;

}


.game-button:active {

    border-style: inset;

}


/* ========================================
   COMING SOON
======================================== */

.coming-soon {

    opacity: 0.75;

    border-style: dashed;

}


.coming-soon:hover {

    transform: none;

}


.coming-text {

    display: inline-block;

    padding: 5px 8px;

    border: 1px dotted #d98abd;

    color: #b65b9d;

    font-size: 9px;

    letter-spacing: 1px;

}


/* ========================================
   FOOTER
======================================== */

.games-footer {

    margin-top: 35px;

    text-align: center;

}


.games-footer a {

    display: inline-block;

    margin: 10px;

    padding: 8px 15px;

    border: 3px outset #ffc8e8;

    background: white;

    color: #b65b9d;

    font-size: 11px;

    font-weight: bold;

    text-decoration: none;

}


.games-footer a:hover {

    background: #ffd9ef;

}


.games-footer a:active {

    border-style: inset;

}


.footer-decoration {

    margin: 5px;

    color: #d98abd;

    font-size: 10px;

}


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

@media (max-width: 600px) {

    .games-page {

        width: 94%;

        margin: 20px auto;

    }


    .game-grid {

        grid-template-columns: 1fr;

    }


    .games-header h1 {

        font-size: 21px;

    }

}