body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align container to top */
    min-height: 100vh;
    background-color: #f0f0f0;
    margin: 20px;
    padding-bottom: 70px; /* Add padding to bottom of body to prevent overlap */
}

.game-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
    /* Removed position: relative; if not needed elsewhere */
}

.controls {
    margin-bottom: 20px;
    /* Buttons inside will now center by default due to game-container text-align */
}

.controls button {
    padding: 10px 15px;
    margin: 5px 5px; /* Added vertical margin */
    font-size: 1em;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50; /* Default green */
    color: white;
    transition: background-color 0.3s ease;
}

.controls button:hover {
    background-color: #45a049;
}

/* Style specifically for the answer button - mainly color */
#btn-answer {
    padding: 10px 15px; /* Ensure padding consistent */
    margin: 0 5px;     /* Ensure margin consistent */
    font-size: 1em;    /* Ensure font-size consistent */
    cursor: pointer;   /* Ensure cursor consistent */
    border: none;      /* Ensure border consistent */
    border-radius: 5px;/* Ensure border-radius consistent */
    background-color: #f44336; /* Red color */
    color: white;      /* White text */
    transition: background-color 0.3s ease;
}

#btn-answer:hover {
    background-color: #da190b;
}


.game-area {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px; /* Add space above bottom button container */
}

.grid-container {
    position: relative;
    display: inline-block;
    border: 2px solid #ccc;
    /* margin-bottom removed, handled by game-area margin */
}

#wordsearch-grid {
    display: grid;
    background-color: #ccc;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Width/Height/Templates set by JS */
}

.grid-cell {
    /* width/height set by JS now via direct style */
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.grid-cell.selected {
    background-color: #a0e6ff;
}

.grid-cell.found {
    background-color: #c8e6c9;
    color: #388e3c;
}

#selection-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

#answer-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.word-found-marker {
    position: absolute;
    border: 3px solid red;
    /* border-radius set by JS based on marker height */
    box-sizing: border-box;
    pointer-events: none;
    /* Top, left, width, height, transform, border-radius set by JS */
}


#word-list-container {
    min-width: 150px;
    text-align: left;
}

#word-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#word-list li {
    margin-bottom: 5px;
    font-size: 1.1em;
    text-transform: uppercase;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

#word-list li.found-word {
    text-decoration: line-through;
    color: #aaa;
}

.message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
    display: none;
    font-size: 1em;
    font-weight: bold;
}

.message.show {
    display: block;
}

/* --- NEW Styles for Bottom Button --- */
.bottom-controls {
    position: fixed; /* Position relative to the viewport */
    bottom: 20px;    /* Distance from the bottom */
    left: 50%;       /* Center horizontally */
    transform: translateX(-50%); /* Fine-tune centering */
    z-index: 100;    /* Ensure it's above other content if needed */
}
/* --- End of NEW Styles --- */
/* 손가락으로 단어를 그을 때 화면이 스크롤되지 않게 */
#wordsearch-grid {
    touch-action: none;
}