/* ══════════════════════════════════
   SHARED GAME RESULT MODAL
   Used by: personaje.php, wordle.php, episodios.php, grid.php, etc.
══════════════════════════════════ */
.hidden {
  display: none !important;
}

.game-result-modal {
  background: linear-gradient(145deg, #CE9D66 0%, #B37D49 100%);
  border: 2px solid #C19A6B;
  border-radius: 16px;
  padding: 24px 20px 20px;
  max-width: 520px;
  margin: 20px auto;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#winMsg.game-result-modal,
#winMsg .game-result-modal {
  background: url('../img/Fondo_Pergamino.webp') center center / cover no-repeat;
  background-color: #a0d4b0;
  background-blend-mode: multiply;
  border-color: #3c7355;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.25), inset 0 0 20px rgba(85, 139, 110, 0.3);
}

#winMsg .game-result-title {
  color: #1A4027;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

#winMsg .character-portrait,
#winMsg .wn-character-portrait {
  border-color: #558B6E;
}

#loseMsg.game-result-modal,
#looseMsg.game-result-modal,
#loseMsg .game-result-modal,
#looseMsg .game-result-modal {
  background: url('../img/Fondo_Pergamino.webp') center center / cover no-repeat;
  background-color: #eaa4a8;
  background-blend-mode: multiply;
  border-color: #a83f47;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.25), inset 0 0 20px rgba(181, 79, 87, 0.3);
}

#loseMsg .game-result-title,
#looseMsg .game-result-title {
  color: #5B1E23;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

#loseMsg .character-portrait,
#looseMsg .character-portrait,
#loseMsg .wn-character-portrait,
#looseMsg .wn-character-portrait {
  border-color: #B54F57;
}

.game-result-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.game-result-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
  border: 3px solid #D2B48C;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.game-result-icon .text-icon {
  font-size: 2.2rem;
  color: #3E2723;
}

.wn-icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.wn-icon-inner.text-icon {
  font-size: 2.2rem;
  color: #3E2723;
}

.wn-character-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #8B5A2B;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.character-portrait {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #8B5A2B;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.game-result-text {
  text-align: left;
}

.game-result-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #4A2E15;
  margin: 0 0 6px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.game-result-desc {
  font-size: 0.88rem;
  color: #5c4033;
  margin: 0;
  font-weight: 600;
}

.game-result-extra {
  font-size: 0.88rem;
  color: #3E2723;
  margin: 4px 0 0;
  font-weight: 700;
}

.game-result-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 10px;
  color: #5c4033;
  font-size: 0.82rem;
}

.game-result-countdown-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.game-result-countdown-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5c4033;
  font-weight: 700;
}

.game-result-countdown-timer {
  font-size: 1.4rem;
  font-weight: 800;
  color: #8B5A2B;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  font-family: 'Segoe UI', system-ui, sans-serif;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.game-result-wrapper {
  width: 100%;
  max-width: 520px;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-result-wrapper.hidden {
  display: none !important;
}

@media (max-width: 600px) {
  .game-result-title {
    font-size: 1.2rem;
  }

  .character-portrait {
    width: 64px;
    height: 64px;
  }

  .game-result-icon {
    width: 64px;
    height: 64px;
  }
}