.hangman-page {
  font-family:  Arial, sans-serif;
  background: linear-gradient(-45deg, #000000, #5a3b2e, #8b2d2d, #3e2723);
  background-size: 400% 400%;
  animation: gradientBG 8s ease infinite;
  color:#fff;
  padding: 20px;
  box-sizing: border-box;
}

footer {
  margin-top: 0;   
}


.hangman-block {
  display: block;
  text-align: center;
  margin: 20px auto;
  border-radius: 0px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 350px; 
}

.hangman-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.hangman-title {
  font-weight: bold;
  font-size: 1rem;
  color: #e74c3c;
  margin: 10px 0;
}

.hangman-img {
  width: 100%;
  height: auto;
  display: block;
}


.hangman-page .game-card {
  background:rgba(255,255,255,0.1);
  padding:25px;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,0.4);
  max-width:1600px;
  width:100%;
  margin:0 auto;
  box-sizing:border-box;
}

.hangman-page .game-img {
  width:100%;
  max-height:500px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:20px;
}


.hangman-page h1 {
  color:#ffcc00;
  font-size:2.5rem;
  margin-bottom:15px;
  text-align:center;
}

.hangman-page .stats {
  margin:15px 0;
  font-size:1.2rem;
  text-align:center;
}

.hangman-page .hangman {
  margin:20px auto;
  width:120px; height:200px;
  position:relative;
}

.hangman-page .line { background:#fff; position:absolute; }
.hangman-page .base { width:120px; height:6px; bottom:0; left:0; }
.hangman-page .pole { width:6px; height:200px; bottom:0; left:50px; }
.hangman-page .beam { width:70px; height:6px; top:0; left:50px; }
.hangman-page .rope { width:2px; height:30px; top:0; left:120px; }

.hangman-page .head,
.hangman-page .body,
.hangman-page .arm,
.hangman-page .leg {
  border:3px solid #fff;
  position:absolute;
  display:none;
}

.hangman-page .head { width:40px; height:40px; border-radius:50%; top:30px; left:100px; }
.hangman-page .body { width:2px; height:60px; top:70px; left:120px; background:#fff; border:none; }
.hangman-page .arm { width:40px; height:2px; top:90px; background:#fff; border:none; }
.hangman-page .arm.left { left:80px; }
.hangman-page .arm.right { left:120px; }
.hangman-page .leg { width:2px; height:40px; background:#fff; border:none; top:130px; }
.hangman-page .leg.left { left:105px; transform:rotate(20deg); }
.hangman-page .leg.right { left:135px; transform:rotate(-20deg); }

.hangman-page .word {
  font-size:2.2rem;
  letter-spacing:10px;
  margin:20px 0;
  text-align:center;
  white-space:nowrap;
  overflow-x:auto;
}

.hangman-page .letters {
  margin:20px auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  max-width:900px;
}

.hangman-page .letters button {
  margin:4px;
  padding:10px 14px;
  font-size:1.1rem;
  border:none;
  border-radius:6px;
  cursor:pointer;
  background:#ffcc00;
  color:#333;
  transition:0.2s;
}

.hangman-page .letters button:hover:not(:disabled) { background:#ffaa00; }
.hangman-page .letters button:disabled { background:#666; color:#aaa; cursor:not-allowed; }

.hangman-page .message {
  font-size:1.4rem;
  margin-top:20px;
  text-align:center;
}
.hangman-page .message.win { color:#2ecc71; }
.hangman-page .message.lose { color:#e74c3c; }

.hangman-page .reset-btn {
  margin:20px auto 0;
  padding:10px 20px;
  border:none; border-radius:6px;
  font-size:1rem;
  background:#e74c3c; color:#fff;
  cursor:pointer;
  display:block;
}
.hangman-page .reset-btn:hover { background:#c0392b; }

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 768px) {
  .hangman-page .game-img { max-height:300px; }
  .hangman-page .word {
    font-size:1.4rem;
    letter-spacing:5px;
    white-space:normal;
  }
  .hangman-page h1 { font-size:1.8rem; }
}

@media (max-width: 480px) {
  .hangman-page .word {
    font-size:1.1rem;
    letter-spacing:3px;
  }
  .hangman-page .letters button {
    padding:6px 8px;
    font-size:0.85rem;
  }
}

.hangman-page .orientation-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #1e3c72;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 1.5rem;
  z-index: 9999;
}


@media screen and (orientation: landscape) {
  .hangman-page .orientation-overlay { display: none; }
}

@media (max-width: 768px) {
  .hangman-title {
    font-family: Arial, sans-serif; 
    font-size: 1.5rem; 
  }
}

@media (max-width: 768px) {
  .hangman-title {
    font-family: Arial, sans-serif; 
    font-size: 1.5rem; 
  }
}



@media (max-width: 768px) {
  .hangman-title {
    font-family: Arial, sans-serif; 
    font-size: 1.4rem;
  }

  .hangman-word {
    font-family: Arial, sans-serif;
    font-size: 1.6rem;
    letter-spacing: 5px; 
  }

  .hangman-letters button {
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    padding: 8px;
    margin: 3px;
  }
}
@media (max-width: 768px) {

  .hangman-page h1 {
    font-family: Arial, sans-serif; 
    font-size: 1.6rem;
  }

  .hangman-page #word {
    font-family: Arial, sans-serif;
    font-size: 1.4rem;
    letter-spacing: 5px;
  }


  .hangman-page #letters button {
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    padding: 8px;
    margin: 3px;
  }
}

@media (max-width: 768px) {
  .hangman-page {
    font-family: Arial, sans-serif !important; 
  }

  .hangman-page h1 {
    font-size: 1.6rem;
  }

  .hangman-page #word {
    font-size: 1.4rem;
    letter-spacing: 5px;
  }

  .hangman-page #letters button {
    font-size: 0.9rem;
    padding: 8px;
    margin: 3px;
  }
}
@media (max-width: 768px) {
  .hangman-page,
  .hangman-page h1,
  .hangman-page .word,
  .hangman-page .letters button {
    font-family: Arial, sans-serif !important;
  }
}

.hangman-page,
.hangman-page * {
  font-family: Arial, Helvetica, sans-serif !important;
}
.hangman-page .orientation-overlay {
  display: none;
}


@media screen and (max-width: 768px) and (orientation: portrait) {
  .hangman-page .orientation-overlay {
    display: flex;
  }
}

@media (max-width: 600px) {
  .hangman-page .game-card {
    padding: 15px;         /* mai puțin spațiu în interior */
  }

  .hangman-page .game-img {
    max-height: 200px;     /* imaginea mai mică pe mobil */
    margin-bottom: 10px;
  }

  .hangman-page h1 {
    font-size: 1.4rem;     /* titlu mai compact */
    margin-bottom: 10px;
  }

  .hangman-page .stats {
    font-size: 0.9rem;     /* text mai mic */
    margin: 10px 0;
  }

  .hangman-page .hangman {
    width: 80px; 
    height: 140px;         /* micșorat spânzurătoarea */
  }

  .hangman-page .word {
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin: 10px 0;
  }

  .hangman-page .letters {
    gap: 2px;
    margin: 10px auto;
  }

  .hangman-page .letters button {
    padding: 6px 8px;
    font-size: 0.75rem;
    margin: 2px;
  }

  .hangman-page .reset-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    margin-top: 15px;
  }
}