.game-box {
    margin-top: 35px;
  border-radius: 5px;
  width: 100vw;
  min-width: 350px;
  display: grid;
  gap: 10px;

  max-width: 800px; /* Limit the width for larger screens */
  box-sizing: border-box;
}
.game-box h1{
  padding: 2rem;
}

p{
    text-indent: 1rem;
}
#clue-container{
    display: grid;
    gap: 10px;
}

.clue-pair, .clue-story, #drawing-board_54, #score-section{

    background: #171720;
    width: 100%;

    border-radius: 5px;
    border: solid #0a0a10 5px;
    border-left: none;
    border-right: none;
    box-sizing: border-box;

}

.clue-directions{
    font-style: italic;
    font-size: 0.9rem;
    opacity: 0.8;
}


#drawing-board_54{
    overflow: hidden;
    min-width: 350px;
    max-width: 100%;
}


#incorrect-location-warning{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.1rem;
  margin: 15px;
  box-sizing: border-box;

  background: #171720;
  border: solid #0a0a10 5px;

  border-radius: 5px;

}



#puzzle-canvas,
#puzzle-helper-canvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    image-rendering: pixelated; /* Optional: makes canvas less blurry on resize */
    touch-action: none; /* Prevents touch scrolling interference on mobile */
}




.clue-story{
    padding: 0px 15px ;
    display: grid;
}

.clue{
    border-radius: 5px;
    padding: 0px 0px 10px;
}

canvas.disabled {
    pointer-events: none;

    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}


.clue-wrapper {
    position: relative; /* Ensure that the canvas can be positioned over the image */
}

.clue-image-wrapper canvas {
    width: 100vw;
    box-sizing: border-box;
    height: auto;
    display: block;
}

.clue-image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


:disabled{
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    color: inherit; /* Optional: keeps the text color unchanged */
    border: 1px dashed #999; /* Optional: faded border to indicate disabled state */
    
}

.answered {
    background-color: #404040; /* Light gray background for read-only inputs */
    color: #666; /* Darker text color for better contrast */
}

.clue.answered .drawing-board, .clue.answered #puzzle-canvas{
    opacity: 0.3; /* Make the canvas semi-transparent */
}



.clue input.correct, .clue input.correct:-webkit-autofill {
    background-color: #2ecc71 !important; /* bright green */
    color: #ffffff !important;
    box-shadow: 0 0 5px #27ae60;
    text-shadow: 1px 1px 1px black;
}

.clue input.incorrect, .clue input.incorrect:-webkit-autofill {
    background-color: #e74c3c !important; /* bright red */
    color: #ffffff !important;
    box-shadow: 0 0 5px #c0392b;
    text-shadow: 1px 1px 1px black;
}



.clue input[type="text"]{
    border-radius: 7px;
    margin: 15px 10px;
    width: calc(100% - 20px);
}



.canvas-wrapper img {
    display: block;
    width: 100%;
    height: auto; /* This lets it scale properly */
}


canvas.drawing-board {
    width: 100%;
    height: auto;
    pointer-events: auto;
    border-radius: 5px;
}

.clue-header-wrapper {
    padding: 10px 15px 0px 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    align-items: center;
    box-sizing: border-box;
    
}


.clue-pair hr {
    margin: 5px 0px 10px ;
    height: 5px;
    background-color: #aaaaaa;
    border: none;
}





.hint h3 ~ div {
    padding-left: 1em;
    border-left: 2px dashed #999;
    margin-top: 0.5em;
    font-style: italic;
}

.hint-section{
    margin: 10px;
}





.active, .checkbox-button.active {
    
        
    /* Fake the border with a double background */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent;
    background-image: 
    linear-gradient(to right, rgba(80, 80, 80, 0.8), rgba(60, 60, 60, 0.8)),  
    linear-gradient(to right, #ddddddff, #aaaaaaff); /* border gradient */
}


.checkbox-button {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: transparent;
    margin-top: 0;
    left: 0px;
    gap: 10px;
}
.checkbox-button.active{
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent;
    background-image: 
    linear-gradient(to right, rgba(70, 70, 70, 0.8), rgba(50, 50, 50, 0.8)),  
    linear-gradient(to right, #ddddddff, #aaaaaaff); /* border gradient */
}


.clue-checkboxes input[type="checkbox"] {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    /*color of the checkbox */
    accent-color: #333;
  
    cursor: default;
    margin: 0;

}

.clue-checkboxes input[type="checkbox"]:disabled{
    opacity: 1;
    cursor: default;
}

.feedback{
    text-indent: 1rem;
    font-size: 0.9rem;
    margin: 10px;
}


/* if width smaller than 400px*/

@media(max-width: 400px){
    .clue-header-wrapper {
        flex-direction: column;
    };

    h2 {
        padding: 0;
        margin: 0;
    }
    #puzzle-canvas,
    #puzzle-helper-canvas {
        aspect-ratio: auto; /* Let it grow vertically on very small screens */
    }
}