/*=========================================================
    KOZI WORD SEARCH
    Version 0.1

    responsive.css

    Responsible for:
    - Large Screens
    - Tablets
    - Mobile Phones
    - Small Phones
=========================================================*/


/*=========================================================
    LARGE DESKTOPS
=========================================================*/

@media (min-width: 1600px){

    #game{
        max-width:1500px;
    }

    .grid{
        gap:8px;
    }

    .cell{
        font-size:1.35rem;
    }

}


/*=========================================================
    LAPTOPS
=========================================================*/

@media (max-width:1200px){

    .game-area{
        grid-template-columns:2.5fr 1fr;
    }

}


/*=========================================================
    TABLETS
=========================================================*/

@media (max-width:992px){

    #game{
        width:95%;
        margin:30px auto;
    }

    .header{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }

    .game-area{
        grid-template-columns:1fr;
    }

    .sidebar{
        order:2;
    }

    .grid-panel{
        order:1;
    }

}


/*=========================================================
    LARGE PHONES
=========================================================*/

@media (max-width:768px){

    #game{
        margin:20px auto;
    }

    .logo h1{
        font-size:1.8rem;
    }

    .logo p{
        font-size:.95rem;
    }

    .grid{
        gap:5px;
    }

    .cell{
        font-size:1rem;
        border-radius:6px;
    }

    .btn{
        width:100%;
    }

    .card{
        padding:18px;
    }

}


/*=========================================================
    SMALL PHONES
=========================================================*/

@media (max-width:480px){

    .logo h1{
        font-size:1.5rem;
    }

    .logo p{
        font-size:.85rem;
    }

    .grid-panel{
        padding:15px;
    }

    .grid{
        gap:4px;
    }

    .cell{
        font-size:.9rem;
        border-radius:5px;
    }

    .card{
        padding:15px;
    }

    .card h2{
        font-size:1.05rem;
    }

    #wordList li{
        padding:8px 0;
        font-size:.95rem;
    }

    .message{
        padding:25px 20px;
    }

}


/*=========================================================
    EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:360px){

    .logo h1{
        font-size:1.3rem;
    }

    .cell{
        font-size:.8rem;
    }

    .btn{
        padding:12px;
        font-size:.9rem;
    }

}

/*=========================================================
    RESPONSIVE CATEGORY SCREEN
=========================================================*/

/* Tablets */
@media (max-width: 992px){

    .category-screen{

        width:90%;

        padding:25px;

        margin:40px auto;

    }

    .game-title{

        font-size:2.8rem;

    }

    .game-subtitle{

        font-size:1rem;

    }

    .category-heading{

        font-size:1.7rem;

    }

}


/* Large Phones */
@media (max-width:768px){

    .category-screen{

        width:95%;

        padding:20px;

        margin:30px auto;

    }

    .game-title{

        font-size:2.3rem;

        line-height:1.2;

    }

    .game-subtitle{

        font-size:.95rem;

        margin-bottom:10px;

    }

    .category-heading{

        font-size:1.5rem;

    }

    .category-card{

        padding:16px 18px;

        border-radius:12px;

    }

    .category-name{

        font-size:1rem;

    }

    .category-count{

        font-size:.9rem;

    }

    .primary-btn{

        width:100%;

        max-width:320px;

        padding:15px;

        font-size:1rem;

    }

}


/* Small Phones */
@media (max-width:480px){

    .category-screen{

        width:100%;

        padding:15px;

        margin:20px auto;

    }

    .game-title{

        font-size:1.9rem;

    }

    .game-subtitle{

        font-size:.85rem;

    }

    .category-heading{

        font-size:1.3rem;

    }

    .category-card{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

        padding:15px;

    }

    .category-name{

        font-size:1rem;

    }

    .category-count{

        font-size:.85rem;

        opacity:.8;

    }

    .primary-btn{

        width:100%;

        padding:14px;

        font-size:1rem;

    }

}


/* Very Small Phones */
@media (max-width:360px){

    .game-title{

        font-size:1.6rem;

    }

    .game-subtitle{

        font-size:.8rem;

    }

    .category-heading{

        font-size:1.1rem;

    }

}

/*=========================================================
    CATEGORY SCREEN
=========================================================*/

@media (max-width:768px){

    .category-card{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .category-left{

        width:100%;

    }

    .category-right{

        width:100%;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

    }

    .category-name{

        font-size:1.15rem;

    }

    .category-description{

        font-size:.9rem;

    }

}

@media (max-width:768px){

    .direction-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .game-logo{

        width:140px;

    }

    .game-logo-small{

        width:55px;

    }

    .logo{

        flex-direction:column;

        text-align:center;

    }

}