:root{
  --bubble: 42px;
  --bubble-font: 18px;
  --punct-font: 22px;
  --word-gap: 6px;
  --letter-gap: 4px;
  --phrase-pad: 14px;

  /* Ajusta si cambias teclado */
  --keyboard-h: 220px;
}

* { box-sizing: border-box; font-family: system-ui; }
body { background:#f4f4f4; margin:0; }

/* HEADER */
header{
  position: relative;            /* clave para centrar el H1 absoluto */
  display:flex;
  align-items:center;
  padding:1rem;
  background:#fff;
}

/* H1 centrado en TODO el ancho de pantalla */
.page-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  text-align:center;
  font-size:1.2rem;
  font-weight:800;
  line-height:1;

  /* evita que se coma los botones en pantallas pequeñas */
  max-width: calc(100% - 140px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botones siempre a la derecha */
.header-buttons{
  margin-left:auto;
  display:flex;
  gap:.35rem;
  justify-content:flex-end;
}

.icon-btn{
  background:none;
  border:none;
  font-size:1.4rem;
  color:#1e90ff;
  cursor:pointer;
}

.material-symbols-outlined{
  font-family: "Material Symbols Outlined";
  font-variation-settings: "opsz" 24, "wght" 500, "FILL" 0, "GRAD" 0;
  font-size: 28px;
  line-height: 1;
  display: inline-block;
  font-variation-settings:
  'FILL' 1,
  'wght' 600,
  'GRAD' 0,
  'opsz' 24;
}



/* ESPACIO (entre header y teclado) */
#space{
  height: calc(100vh - var(--keyboard-h) - 72px); /* 72px ~ header */
  display:flex;
  flex-direction:column;
  width:100%;
}

/* mitades */
.space-top,
.space-bottom{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

/* FRASE */
#phrase{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: var(--word-gap);
  padding: 0 var(--phrase-pad);
  max-width: 100%;
  perspective: 800px;
  padding: var(--phrase-pad);
  border-radius: 18px;
  background: rgba(0,0,0,0.025);
  margin: 0 auto;
}

.word{
  display:flex;
  gap: var(--letter-gap);
  white-space:nowrap;
  max-width:100%;
}

.letter{
  width: var(--bubble);
  height: var(--bubble);
  border-radius: 50%;
  position: relative;
  transform-style: preserve-3d;
}

.face{
  position:absolute;
  inset:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size: var(--bubble-font);
  line-height:1;
  backface-visibility:hidden;
}

/* cara inicial (azul) */
.front{
  background:#1e90ff;
  color:transparent; /* sin letra */
}

/* cara revelada (verde) */
.back{
  background:#2ecc71;
  color:white;
  transform: rotateY(180deg);
}


.letter.revealed{
  transform: rotateY(180deg);
}

.letter.animate{
  animation: flip3d .75s cubic-bezier(.4,0,.2,1) forwards;
}

/* cara revelada en derrota */
.letter.lost .back{
  background:#e74c3c;
  color:white;
}



.punct{
  height: var(--bubble);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 .15rem;
  font-weight:900;
  font-size: var(--punct-font);
  color:#1e90ff;
  line-height:1;
}

.space{ width:16px; }

@keyframes pop{
  0% { transform:scale(.4); }
  70% { transform:scale(1.3); }
  100% { transform:scale(1); }
}

@keyframes flip3d{
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

@keyframes microShake{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-4px); }
  40%{ transform: translateX(4px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(3px); }
  100%{ transform: translateX(0); }
}

#phrase.shake{
  animation: microShake .35s ease;
}





/* INTENTOS */
#status{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
}

#attemptBox{
  width:52px;
  height:52px;
  border-radius:12px;
  background:#1e90ff;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.7rem;
  font-weight:900;
}

#attemptBox.warning{ background::#f39c12;}
#attemptBox.danger{ background:#e74c3c; }

#status small{
  font-weight:700;
  opacity:.85;
}

/* TECLADO */
#keyboard{
  position:fixed;
  bottom:0;
  width:100%;
  height: var(--keyboard-h);
  padding:.5rem;
  background:#eee;
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:.3rem;
}

/* Letras centradas vertical y horizontalmente */
.key{
  background:#ddd;
  border-radius:6px;
  font-weight:bold;
  user-select:none;

  display:flex;                 /* clave */
  align-items:center;           /* centra vertical */
  justify-content:center;       /* centra horizontal */
  line-height:1;

  /* altura consistente para que el centrado sea real */
  min-height: 44px;
  padding: 0;                   /* evita “falsos centros” por padding */
}

.key.used{ background:#bbb; }
.key.incorrect{ background:#e74c3c; color:white; }
.key.correct{ background:#2ecc71; color:white; }
.key.used.correct{ background:#2ecc71; color:white; }
.key.used.incorrect{ background:#e74c3c; color:white; }

/* MODALES */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.hidden{ display:none; }

.modal-content{
  background:white;
  padding:2rem;
  border-radius:16px;
  text-align:center;
}

.close-btn{
  margin-top:1.5rem;
  width:100%;
  padding:1rem;
  background:#1e90ff;
  color:white;
  border:none;
  border-radius:10px;
  font-size:1.1rem;
}

/* FINAL */
.end.win{ color:#2ecc71; }
.end.lose{ color:#e74c3c; }