/* === RESET BÁSICO === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Playfair Display', serif;
  /* Fondo pergamino + viñeta superior para profundidad */
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(0,0,0,.06), transparent 60%),
    #f9f3e5;
  color: #2c1b10; /* marrón oscuro */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 2rem;
}

/* === ENCABEZADO === */
.header {
  text-align: center;
  margin-bottom: 2rem;
}

.title {
  font-size: 2.5rem;
  color: #7b1919; /* rojo vino */
  text-shadow: 2px 2px #d8b26e; /* efecto dorado viejo */
}

.subtitle {
  font-style: italic;
  font-size: 1.1rem;
  color: #4a3c28;
  margin-top: 0.5rem;
}

/* === CONTENEDOR PRINCIPAL === */
.machine {
  position: relative;
  background: linear-gradient(180deg, #f7e8c9, #fff4df);
  border: 8px solid #b8904c; /* marco dorado */
  border-radius: 16px;
  /* sombra más profunda + brillo interior */
  box-shadow:
    0 20px 40px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 0 10px rgba(255,255,255,0.3);
  padding: 2rem;
  width: 90%;
  max-width: 600px;
}

/* Bisel externo adicional del marco */
.machine::before{
  content:"";
  position:absolute; inset:-10px;
  border-radius:20px;
  box-shadow:
    inset 0 0 0 10px #b8904c,
    inset 0 0 30px rgba(0,0,0,.15);
  pointer-events:none;
}

/* === PANTALLA DE FRASES === */
.screen {
  position: relative;
  background: #fffaf0;
  border: 3px solid #b8904c;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  min-height: 120px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.08);
  /* Para colocar frase, autor y botón copiar */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Efecto “vidrio” en la pantalla */
.screen::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 9px;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent 40%);
  pointer-events:none;
}

.phrase {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.author {
  font-size: 1rem;
  color: #6b5b40;
}

/* Botón Copiar dentro de la pantalla */
#copy-phrase{
  margin-top: 0.8rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  align-self: flex-end;
}

/* === CONTROLES === */
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.categories {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

.category-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* espacio entre filas */
.category-row + .category-row {
  margin-top: 0.5rem;
}

/* === BOTONES === */
button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.2s ease;
}

button:focus-visible{
  outline: 2px dashed #b8904c;
  outline-offset: 3px;
}

.category-btn {
  background-color: #e0c48c;
  color: #3b2a12;
  margin: 0.3rem 0.4rem;
  min-width: 140px;
  text-align: center;
}

.category-btn:hover {
  background-color: #d8b26e;
  transform: scale(1.05);
}

/* Estado activo de la categoría */
.category-btn.active{
  background:#cda45d;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5);
}

.main-btn {
  background-color: #7b1919;
  color: #fff5dc;
  margin-top: 1rem;
  /* Botón “iluminado” con relieve */
  box-shadow: 0 6px 0 #541010, 0 12px 18px rgba(0,0,0,.25);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.main-btn:hover {
  background-color: #a32626;
}

.main-btn:active{
  transform: translateY(2px);
  box-shadow: 0 4px 0 #541010, 0 8px 14px rgba(0,0,0,.2);
}

.secondary-btn {
  background-color: #4a3c28;
  color: #fff;
  margin-top: 0.8rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.secondary-btn:hover {
  background-color: #6b5b40;
}

/* === HISTORIAL === */
.history {
  margin-top: 2rem;
}

.history h2 {
  color: #7b1919;
  margin-bottom: 0.5rem;
}

/* Papel para el historial */
#phrase-history {
  list-style: none;
  padding: 8px 12px;
  background:#fff9ef;
  border:1px solid #d9b77a;
  border-radius:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  /* Scroll si crece mucho */
  max-height: 260px;
  overflow: auto;
  scroll-padding: 6px;
}

#phrase-history li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed #b8904c;
  font-size: 0.95rem;
}

#phrase-history li:last-child{
  border-bottom: none;
}

/* === EFECTO MICROBRILLO EN LA PANTALLA === */
@keyframes flash-screen {
  0% {
    box-shadow:
      inset 0 0 8px rgba(255, 255, 255, 0.2),
      0 0 0 rgba(255, 255, 255, 0);
    filter: brightness(1);
  }
  40% {
    box-shadow:
      inset 0 0 25px rgba(255, 255, 255, 0.9),
      0 0 30px rgba(255, 230, 150, 0.8);
    filter: brightness(1.25);
  }
  100% {
    box-shadow:
      inset 0 0 8px rgba(255, 255, 255, 0.2),
      0 0 0 rgba(255, 255, 255, 0);
    filter: brightness(1);
  }
}

.screen.flash {
  animation: flash-screen 0.8s ease-out;
}

/* === RESPONSIVE (móviles) === */
@media (max-width: 420px){
  .title { font-size: 2rem; }
  .category-btn { min-width: 120px; font-size: 0.95rem; }
  .phrase { font-size: 1.15rem; }
  .author { font-size: 0.95rem; }
}

/* === ACCESIBILIDAD: reducir animaciones === */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; }
  .category-btn:hover { transform: none !important; }
  .screen.flash { animation: none !important; }
}