/* --- Color Palette --- */
/*
  Background: #121212 (Near Black)
  Primary Accent (Text/Borders): #f0f0f0 (Off-White/Light Grey)
  Secondary Accent (Action/Warning): #CC0000 (Deep Red)
  Tertiary Accent (Boxes): #1e1e1e (Dark Grey)
*/

body { min-height: 100vh;background-color: #121212; color: #f0f0f0; font-family: 'Arial', sans-serif; margin: 0; padding: 0; line-height: 1.6; }
.container { width: 90%; /* Use a percentage width */ margin: auto; /* Centers the container */ padding: 20px; /* Allows container to take available space */ }
@media (max-width: 768px) {
  .container {width: 95%; margin: auto; padding: 10px; }
}
/* --- Header & Title --- */
header { border-bottom: 2px solid #CC0000; padding-bottom: 5px; margin-bottom: 20px; }
.logo-title { display: flex; justify-content: start; align-items: center; }
.logo-placeholder { width: 60px; height: 60px; background-color: #CC0000; margin-right: 15px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 24px; }
#game-heading { font-size: 2.5em; color: #CC0000; /* Red heading for high impact */ margin: 0; text-transform: uppercase; letter-spacing: 5px; }
/* --- Main Game Area Layout --- */
.game-area {gap: 10px}
.visual-area { background-color: #1e1e1e; height: 100%; border: 1px solid #333; padding: 10px; border-radius: 8px;  }
#hangman-image { max-width: 100%; max-height: 100%; height: auto; width: auto; object-fit:contain; }
.game-info { gap: 5px; width: 49%;}
@media (max-width: 600px) {
  .game-info { width: 100%; }
}
@media (min-width: 1365px) {
  .game-info { width: 48%; }
}
/* --- Info Boxes --- */
.info-box { margin-bottom: 5px; background-color: #1e1e1e; border: 1px solid #333; padding: 5px; border-radius: 6px; text-align: center; }
.info-box h2 { color: #CC0000; margin-top: 0; font-size: 1.1em; border-bottom: 1px dashed #333; padding-bottom: 5px; margin-bottom: 10px; text-transform: uppercase; }
/* Specific Info Box Styles */
.secret-word-box { }
.secret-word-display { font-size: 2em;  font-weight: bold; color: #f0f0f0; }
/*background-color: #e9ecef;*/
/*#word-progress-container { min-height: 80px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.5rem; color: #343a40; border: 1px dashed #adb5bd !important; overflow: hidden; }*/
.remaining-tries { font-size: 1.5em; font-weight: bold; color: #f0f0f0; padding-bottom:0px; margin-bottom:0px; }
.used-letters-box h2 { padding: 0px; margin-top: 0px; margin-bottom: 0px; }
.used-letters-display { font-size: 1.5em; font-weight: bold; letter-spacing: 2px; color: #f0f0f0; margin-bottom: 0px; margin-top: 0px; padding: 0px; }
/* --- Message Box --- */
.message-box { text-align: center; min-height: 50px;}
 .message-box h3 { margin-top: 1rem; font-weight: bold; font-size: 1.75em; letter-spacing: 2px}
.hidden { /* Class to be toggled by jQuery */ display: none; }
/* --- Guess Input Form --- */
.guess-form { background-color: #1e1e1e; padding: 10px; border-radius: 6px; border: 1px solid #333; margin-bottom: 5px }
.guess-form label { font-size: 1.1em; color: #f0f0f0; }
.guess-input { padding: 2px; font-size: 1.5em; background-color: #2a2a2a; border: 1px solid #444; color: #f0f0f0; border-radius: 4px; margin-right: 5px; }
@media (max-width: 600px) {
  .guess-input { width: 100%; }
}
/* Remove up/down arrows from number input if supported */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Button Styling */
.btn { margin-bottom: 5px; background-color: #CC0000; color: #f0f0f0; border: none; border-radius: 4px; cursor: pointer; font-size: 1.2em; transition: background-color 0.2s ease; text-transform: uppercase; }
.btn:hover { background-color: #ff3333; /* Lighter red on hover */ }
.text-success { color: #0dbe42 !important } /*Brighter green colour*/
.text-danger { color: #ff3333 !important } /*Brighter red colour*/

/* Glowing Effects - Adjusted colors for better contrast */
.glowGreen { animation: glowGreenBorder 2s ease-in-out forwards; }
.glowRed { animation: glowRedBorder 2s ease-in-out forwards; }

@keyframes glowGreenBorder {
  0% { border-color: #333; /* Bootstrap default border */ box-shadow: none; }
  50% { border-color: #28a745; /* Bootstrap success green */ box-shadow: 0 0 35px 10px #0dbe42; /* Green glow */ }
  100% { border-color: #333; box-shadow: none; }
}
@keyframes glowRedBorder {
  0% { border-color: #333; box-shadow: none; }
  50% { border-color: #dc3545; /* Bootstrap danger red */ box-shadow: 0 0 35px 10px #ff3333; /* Red glow */ }
  100% { border-color: #333; box-shadow: none; }
}