/* =========================================
   PLAN VIEW
   ASCE Shear Genius
========================================= */


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

.planview-game {

    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #d5d5d5;

    border-radius: 8px;

}


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

.planview-header {

    text-align: center;

    margin-bottom: 25px;

}


.planview-header h1 {

    margin: 0 0 8px 0;

    font-size: 2rem;

}


.planview-header p {

    margin: 0;

    color: #666;

}


/* =========================================
   PUZZLE IMAGE
========================================= */

.planview-image-container {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 30px;

}


.planview-image-container img {

    display: block;

    max-width: 100%;

    max-height: 600px;

    object-fit: contain;

    border: 1px solid #ccc;

    border-radius: 4px;

}


/* =========================================
   QUESTION
========================================= */

.planview-question {

    text-align: center;

    margin-bottom: 20px;

}


.planview-question h2 {

    margin: 0;

    font-size: 1.25rem;

}


/* =========================================
   ANSWER AREA
========================================= */

.planview-answer-area {

    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

}


#planview-answer {

    width: 100%;

    max-width: 400px;

    padding: 12px 15px;

    font-size: 1rem;

    border: 1px solid #bbb;

    border-radius: 4px;

}


#planview-answer:focus {

    outline: none;

    border-color: #555;

}


#planview-answer.answer-correct {

    border-color: #198754;

}


/* =========================================
   SUBMIT BUTTON
========================================= */

#planview-submit {

    padding: 12px 20px;

    font-size: 1rem;

    font-weight: bold;

    border: none;

    border-radius: 4px;

    cursor: pointer;

}


#planview-submit:disabled {

    cursor: not-allowed;

    opacity: 0.6;

}


/* =========================================
   MESSAGE AREA
========================================= */

.planview-message {

    min-height: 25px;

    margin-top: 15px;

    text-align: center;

    font-weight: 600;

}


.message-success {

    color: #198754;

}


.message-error {

    color: #b02a37;

}


.message-warning {

    color: #8a6d3b;

}


/* =========================================
   LIVES
========================================= */

.planview-lives {

    margin-top: 25px;

    text-align: center;

}


.lives-label {

    display: block;

    margin-bottom: 8px;

    font-weight: bold;

}


.planview-hearts {

    font-size: 1.5rem;

    letter-spacing: 5px;

}


/* =========================================
   HINTS
========================================= */

.planview-hints {

    margin-top: 25px;

}


.planview-hint {

    margin-top: 10px;

    padding: 12px 15px;

    border-left: 4px solid #999;

    background: #f5f5f5;

}


/* =========================================
   GAME OVER PANEL
========================================= */

.planview-gameover {

    margin-top: 30px;

    padding: 25px;

    text-align: center;

    border: 1px solid #ccc;

    border-radius: 6px;

    background: #f5f5f5;

}


.planview-gameover h2 {

    margin: 0 0 10px 0;

}


.planview-gameover p {

    margin: 0 0 8px 0;

}


.planview-correct-answer {

    font-size: 1.3rem;

    font-weight: bold;

}


/* =========================================
   PUZZLE SOLVED PANEL
========================================= */

.planview-solved {

    margin-top: 30px;

    padding: 25px;

    text-align: center;

    border: 1px solid #ccc;

    border-radius: 6px;

    background: #f5f5f5;

}


.planview-solved h2 {

    margin: 0 0 10px 0;

}


.planview-solved p {

    margin: 0 0 15px 0;

}


.planview-solved-answer {

    font-size: 1.3rem;

    font-weight: bold;

}


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

@media (max-width: 600px) {

    .planview-game {

        padding: 20px 15px;

    }


    .planview-header h1 {

        font-size: 1.6rem;

    }


    .planview-question h2 {

        font-size: 1.1rem;

    }


    .planview-answer-area {

        flex-direction: column;

        align-items: stretch;

    }


    #planview-answer {

        max-width: 100%;

    }


    #planview-submit {

        width: 100%;

    }


    .planview-hearts {

        font-size: 1.35rem;

    }


    .planview-gameover,
    .planview-solved {

        padding: 20px 15px;

    }

}