/* Super Plumber Hangman - Responsive & Mario Themed */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  background: linear-gradient(180deg, #5C94FC 0%, #4ABDFF 50%, #87CEEB 100%);
  font-family: 'Press Start 2P', cursive;
  min-height: 100vh;
  position: relative;
}

/* Mario Character - Center of screen */
#mario-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

/* Retro pixel plumber - CSS box-shadow pixel art */
#mario-character {
  width: 16px;
  height: 16px;
  position: relative;
  box-shadow:
    /* Row 0 - Cap */
    0px 0px 0 0 #E52521,
    16px 0px 0 0 #E52521,
    32px 0px 0 0 #E52521,
    48px 0px 0 0 #E52521,
    /* Row 1 - Cap + face */
    0px 16px 0 0 #E52521,
    16px 16px 0 0 #FFDBAC,
    32px 16px 0 0 #FFDBAC,
    48px 16px 0 0 #E52521,
    /* Row 2 - Face + cap */
    0px 32px 0 0 #E52521,
    16px 32px 0 0 #5D4037,
    32px 32px 0 0 #FFDBAC,
    48px 32px 0 0 #E52521,
    /* Row 3 - Body */
    0px 48px 0 0 #0066CC,
    16px 48px 0 0 #0066CC,
    32px 48px 0 0 #0066CC,
    48px 48px 0 0 #0066CC,
    /* Row 4 - Body */
    0px 64px 0 0 #0066CC,
    16px 64px 0 0 #0066CC,
    32px 64px 0 0 #0066CC,
    48px 64px 0 0 #0066CC,
    /* Row 5 - Legs */
    0px 80px 0 0 #8B4513,
    16px 80px 0 0 #0066CC,
    32px 80px 0 0 #0066CC,
    48px 80px 0 0 #8B4513;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: scale(2);
  transform-origin: bottom center;
  transition: transform 0.3s ease;
}

/* Win animation - Mario grows + bounce + confetti feel */
#mario-character.mario-win {
  animation: marioWin 1.2s ease-out forwards;
}

@keyframes marioWin {
  0% { transform: scale(2); filter: brightness(1); }
  25% { transform: scale(2.8); filter: brightness(1.3); }
  50% { transform: scale(3); filter: brightness(1.5); }
  75% { transform: scale(2.9); filter: brightness(1.4); }
  100% { transform: scale(3.2); filter: brightness(1.5); }
}

/* Win overlay / celebration */
.win-celebration {
  animation: winPulse 0.5s ease-in-out 3;
}

@keyframes winPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

/* Lose animation - Classic Mario death (spin and fall) */
#mario-character.mario-die {
  animation: marioDie 1.2s ease-in forwards;
}

@keyframes marioDie {
  0% {
    transform: scale(2) translateY(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: scale(2) translateY(-40px) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(2) translateY(80vh) rotate(720deg);
    opacity: 0;
  }
}

/* Game Wrapper - Fits on screen */
.game-wrapper {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1vh 2vw 2vh;
  max-width: 100vw;
}

h1 {
  text-align: center;
  font-size: clamp(28px, 8vw, 80px);
  margin: 1vh 0;
  color: #E52521;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000;
}

/* Secret Word / Guessed Letters */
.guessed-letters-con {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(4px, 1vw, 12px);
  padding: 1vh 2vw;
  margin: 1vh 0;
  max-width: 100%;
}

.guessed-letter {
  border-bottom: solid 4px #000;
  height: clamp(40px, 8vh, 80px);
  width: clamp(28px, 6vw, 60px);
  min-width: 28px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: clamp(20px, 4vw, 40px);
  color: #000;
}

/* Letter Container */
.letter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(4px, 1vw, 10px);
  margin: 1vh 0;
  padding: 0 2vw;
  max-width: 100%;
}

.letter-box {
  width: clamp(36px, 8vw, 70px);
  height: clamp(36px, 8vw, 70px);
  min-width: 36px;
  min-height: 36px;
  border: solid 3px #000;
  text-align: center;
  font-size: clamp(16px, 3vw, 32px);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.letter-box:hover {
  background-color: #FDAD16 !important;
  transform: scale(1.05);
}

.letter-box:active {
  transform: scale(0.98);
}

/* Wrong letter: brick image (Mario theme) */
.closed-box {
  background-color: transparent !important;
  background-image: url('images/brick.jpg') !important;
  background-size: cover !important;
  border: solid 3px #663300;
  cursor: default;
  transform: none !important;
}

/* Correct letter: green */
.letter-box.correct-box {
  background-color: #2e7d32 !important;
  background-image: none !important;
  border: solid 3px #1b5e20;
  cursor: default;
}

/* Lives Section */
.lives-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  padding: 1vh 2vw;
}

.lives-label {
  font-size: clamp(12px, 2.5vw, 20px);
  margin-bottom: 0.5vh;
}

.lives-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.lives {
  width: clamp(40px, 10vw, 100px);
  height: auto;
}

/* Game End Message */
.game-end-message {
  font-size: clamp(10px, 2vw, 16px);
  text-align: center;
  margin-bottom: 1vh;
  line-height: 1.8;
  padding: 0 1vw;
}

/* Play Again Button - Mario style (yellow with retro lettering) */
.game-end-message + button,
.play-again-btn {
  font-family: 'Press Start 2P', cursive;
  background: linear-gradient(180deg, #FFE135 0%, #FFC803 50%, #E5A800 100%);
  color: #8B4513;
  border: 4px solid #663300;
  padding: 12px 24px;
  font-size: clamp(10px, 2vw, 14px);
  cursor: pointer;
  margin-top: 12px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
  box-shadow: 3px 3px 0 #663300, inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}

.game-end-message + button:hover,
.play-again-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(180deg, #FFF176 0%, #FFE135 50%, #FFC803 100%);
}

.game-end-message + button:active,
.play-again-btn:active {
  transform: scale(0.98);
  box-shadow: 1px 1px 0 #663300, inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Revealed word on loss */
.revealed-word {
  font-size: clamp(12px, 2.5vw, 18px);
  margin: 1vh 0;
  color: #B71C1C;
  text-transform: uppercase;
  letter-spacing: 4px;
}

/* Mute button - above start overlay so it's always clickable */
.mute-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 150;
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #333;
  cursor: pointer;
  transition: transform 0.1s;
}

.mute-btn:hover {
  transform: scale(1.05);
}

.mute-btn.muted {
  background: rgba(255, 200, 50, 0.9);
}

/* Click to start overlay - enables music on first interaction */
.start-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: pointer;
}

.start-overlay.hidden {
  display: none;
}

.start-overlay span {
  font-size: clamp(14px, 3vw, 24px);
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  padding: 20px 40px;
  background: rgba(229, 37, 33, 0.9);
  border: 4px solid #fff;
  animation: startPulse 1.5s ease-in-out infinite;
}

@keyframes startPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Responsive breakpoints */
@media (max-width: 480px) {
  .game-wrapper {
    padding: 0.5vh 1vw 2vh;
  }
}

@media (max-height: 700px) {
  h1 {
    font-size: clamp(20px, 6vw, 50px);
  }
  
  .guessed-letter {
    height: 36px;
    font-size: 20px;
  }
  
  .letter-box {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}