/* screens.css — específico do rosco: home, play, results, ranking, como, legal */

/* ========== HOME ========== */
.pantalla--home .pantalla__cabeceira { margin-top: var(--espazo-l); }

.home-arranque {
  display: flex;
  flex-direction: column;
  gap: var(--espazo-m);
  margin: auto 0;          /* centra verticalmente entre cabeceira e rodape */
}
.subtitulo--home strong { color: var(--cor-verde-escuro); font-weight: 700; }

.home-figura {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.home-figura img {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  background: var(--cor-fondo-suave);
  border: 2px solid var(--cor-area);
  box-shadow: 0 2px 10px rgba(22, 22, 22, 0.08);
}
@media (max-width: 480px) {
  .home-figura img { width: 110px; height: 110px; }
}

.titulo-xogo {
  font-size: clamp(2.3rem, 5vw + 0.5rem, 3rem);
  color: var(--cor-verde-escuro);
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--espazo-s);
}
.titulo-xogo__acento {
  color: var(--cor-area);
  font-size: 0.45em;
  font-style: italic;
  font-weight: 400;
  margin-top: 0.4em;
  letter-spacing: 0.02em;
}

.subtitulo--home {
  margin-top: var(--espazo-m);
  max-width: 36ch;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

.home-rodape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espazo-s);
  text-align: center;
}
.home-rodape p { margin: 0; }

.home-rodape__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espazo-s);
  font-size: 0.88rem;
}
.home-rodape__sep {
  color: var(--cor-texto-suave);
  opacity: 0.45;
  user-select: none;
}

.ligazon-rodape {
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-weight: 500;
  padding: 2px 0;
  transition: color var(--transicion);
}
.ligazon-rodape:hover,
.ligazon-rodape:focus-visible {
  color: var(--cor-verde-escuro);
}

.autoria {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  opacity: 0.7;
}
.ligazon-autoria {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.ligazon-autoria:hover,
.ligazon-autoria:focus-visible {
  color: var(--cor-verde-escuro);
  border-bottom-color: var(--cor-verde-escuro);
}

/* ========== PLAY ========== */
.pantalla--play {
  gap: var(--espazo-m);
  padding-top: var(--espazo-m);
  padding-bottom: var(--espazo-m);
}
.xogo-cabeceira {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espazo-s);
}
.xogo-meta {
  display: flex;
  align-items: center;
  gap: var(--espazo-l);
  font-size: 0.95rem;
  color: var(--cor-texto-suave);
  flex-wrap: wrap;
}
.xogo-meta__contador {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.xogo-meta__contador strong {
  font-family: var(--fonte-titular);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cor-verde-escuro);
  font-variant-numeric: tabular-nums;
}
.xogo-meta__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.85rem;
  font-weight: 700;
}
.xogo-meta__icona--acerto { color: var(--cor-verde-escuro); }
.xogo-meta__icona--erro   { color: var(--cor-prohibido); }

.xogo-meta__contador--tempo strong { color: var(--cor-area); }
.xogo-meta__contador--tempo[data-critico="1"] strong {
  color: var(--cor-prohibido);
  animation: tempo-critico 0.8s ease-in-out infinite;
}
@keyframes tempo-critico {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.xogo-cabeceira__acciones {
  display: inline-flex;
  align-items: center;
  gap: var(--espazo-s);
  flex-shrink: 0;
}
.xogo-meta__boton {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--cor-borde);
  border-radius: 50%;
  background: var(--cor-fondo);
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--transicion), border-color var(--transicion);
}
.xogo-meta__boton:hover,
.xogo-meta__boton:focus-visible {
  color: var(--cor-verde-escuro);
  border-color: var(--cor-verde-escuro);
}
.xogo-meta__rematar:hover,
.xogo-meta__rematar:focus-visible {
  color: var(--cor-prohibido);
  border-color: var(--cor-prohibido);
}
.xogo-meta__son-icona { display: none; }
.xogo-meta__boton[data-son="on"]  .xogo-meta__son-icona--on  { display: block; }
.xogo-meta__boton[data-son="off"] .xogo-meta__son-icona--off { display: block; }
.xogo-meta__boton[data-son="off"] {
  color: var(--cor-prohibido);
  border-color: var(--cor-borde);
}

/* ========== ROSCO ========== */
.rosco-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espazo-m);
}

.rosco-container {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
}

.rosco-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rosco-letra {
  cursor: default;
  transition: fill 250ms ease, stroke 250ms ease, transform 250ms ease;
}
.rosco-letra__circulo {
  transition: fill 250ms ease, stroke 250ms ease;
}
.rosco-letra__texto {
  fill: var(--cor-texto);
  font-family: var(--fonte-titular);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
  transition: fill 250ms ease;
}

/* Estados */
.rosco-letra--pendente .rosco-letra__circulo {
  fill: var(--cor-fondo-suave);
  stroke: var(--cor-area);
  stroke-width: 1.5;
}
.rosco-letra--pendente .rosco-letra__texto { fill: var(--cor-verde-escuro); }

.rosco-letra--activa .rosco-letra__circulo {
  fill: var(--cor-area);
  stroke: var(--cor-area);
  stroke-width: 2;
  animation: rosco-letra-activa 1.4s ease-in-out infinite;
}
.rosco-letra--activa .rosco-letra__texto { fill: var(--cor-fondo); }
@keyframes rosco-letra-activa {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(205, 163, 79, 0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(205, 163, 79, 0.65)); }
}

.rosco-letra--acerto .rosco-letra__circulo {
  fill: var(--cor-verde-escuro);
  stroke: var(--cor-verde-escuro);
}
.rosco-letra--acerto .rosco-letra__texto { fill: var(--cor-fondo); }

.rosco-letra--erro .rosco-letra__circulo {
  fill: var(--cor-prohibido);
  stroke: var(--cor-prohibido);
}
.rosco-letra--erro .rosco-letra__texto { fill: var(--cor-fondo); }

.rosco-letra--pasada .rosco-letra__circulo {
  fill: var(--cor-fondo-suave);
  stroke: var(--cor-verde-escuro);
  stroke-width: 3;
}
.rosco-letra--pasada .rosco-letra__texto { fill: var(--cor-verde-escuro); }

.rosco-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.rosco-centro__letra {
  font-family: var(--fonte-titular);
  font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  color: var(--cor-verde-escuro);
  line-height: 1;
}
.rosco-centro__tipo {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--espazo-xs);
}

.pista-texto {
  width: 100%;
  max-width: 560px;
  min-height: 64px;
  margin: 0;
  padding: var(--espazo-m);
  background: var(--cor-fondo-suave);
  border-left: 3px solid var(--cor-area);
  border-radius: var(--radio-m);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--cor-texto);
  text-align: left;
}

.controis-resposta {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--espazo-s);
}
.controis-resposta__input {
  font-size: 1.05rem;
}
.controis-resposta__botons {
  display: flex;
  gap: var(--espazo-s);
}
.controis-resposta__botons .boton {
  flex: 1;
}

.axuda-teclado {
  margin: 0;
  font-size: 0.76rem;
  color: var(--cor-texto-suave);
  text-align: center;
}

/* ========== RESULTADOS ========== */
.resumo {
  background: var(--cor-fondo-suave);
  border-radius: var(--radio-l);
  padding: var(--espazo-l);
  display: flex;
  flex-direction: column;
  gap: var(--espazo-m);
  margin-top: var(--espazo-m);
}
.resumo__puntos {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--espazo-xs);
}
.resumo__puntos-num {
  font-family: var(--fonte-titular);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--cor-verde-escuro);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.resumo__puntos-etiqueta {
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.resumo__formula {
  margin: 0;
  text-align: center;
  font-family: var(--fonte-titular);
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.resumo__formula:empty { display: none; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espazo-s);
}
.stats-grid__celda {
  background: var(--cor-fondo);
  border-radius: var(--radio-m);
  padding: var(--espazo-s) var(--espazo-m);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stats-grid__valor {
  font-family: var(--fonte-titular);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--cor-verde-escuro);
  font-variant-numeric: tabular-nums;
}
.stats-grid__valor--ok   { color: var(--cor-verde-escuro); }
.stats-grid__valor--erro { color: var(--cor-prohibido); }
.stats-grid__etiqueta {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lista-letras {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--cor-fondo);
  border-radius: var(--radio-m);
  padding: var(--espazo-s) var(--espazo-m);
}
.lista-letras__titulo {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: var(--espazo-xs);
}
.lista-letras__item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  gap: var(--espazo-s);
  padding: 4px 0;
  border-top: 1px solid var(--cor-borde);
  font-size: 0.92rem;
}
.lista-letras__item:first-of-type { border-top: 0; }
.lista-letras__letra {
  font-family: var(--fonte-titular);
  font-weight: 700;
  color: var(--cor-area);
  width: 1.3em;
  text-align: center;
}
.lista-letras__estado {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 5em;
}
.lista-letras__estado--acerto { color: var(--cor-verde-escuro); }
.lista-letras__estado--erro   { color: var(--cor-prohibido); }
.lista-letras__estado--pasada { color: var(--cor-oliva); }
.lista-letras__resposta {
  font-weight: 600;
  color: var(--cor-texto);
  text-align: right;
}
.lista-letras__resposta--apagada {
  color: var(--cor-texto-suave);
  font-weight: 500;
}

.ranking-consentimento {
  display: flex;
  flex-direction: column;
  gap: var(--espazo-s);
  padding: var(--espazo-m);
  background: var(--cor-fondo-suave);
  border-radius: var(--radio-m);
}
.ranking-consentimento p { margin: 0; }
.ranking-consentimento__pregunta {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  margin: 0;
}
.ranking-consentimento__estado {
  font-size: 0.85rem;
  margin: 0;
  min-height: 1em;
  color: var(--cor-texto-suave);
}
.ranking-consentimento__estado:empty { display: none; }
.ranking-consentimento__estado[data-tipo="ok"]   { color: var(--cor-verde-escuro); }
.ranking-consentimento__estado[data-tipo="erro"] { color: var(--cor-prohibido); }
.ranking-consentimento[data-enviado="1"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ========== ACCIÓNS RESULTADOS ========== */
.results-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--espazo-s);
}
.results-acciones__fila {
  display: flex;
  gap: var(--espazo-s);
}
.results-acciones__fila .boton { flex: 1; min-width: 0; }

.results-rrss {
  display: flex;
  justify-content: center;
  gap: var(--espazo-s);
  flex-wrap: wrap;
  width: 100%;
}
.results-rrss__boton {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--cor-borde);
  border-radius: 50%;
  background: var(--cor-fondo);
  color: var(--cor-texto-suave);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion), background var(--transicion);
}
.results-rrss__boton:hover,
.results-rrss__boton:focus-visible {
  color: var(--cor-verde-escuro);
  border-color: var(--cor-verde-escuro);
  background: var(--cor-fondo-suave);
}

.ranking-compartir {
  display: flex;
  flex-direction: column;
  gap: var(--espazo-s);
  padding: var(--espazo-m);
  background: var(--cor-fondo-suave);
  border-radius: var(--radio-m);
  align-items: center;
}
.ranking-compartir[hidden] { display: none; }
.ranking-compartir__texto {
  margin: 0;
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
}

/* ========== RANKING ========== */
.ranking-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espazo-xs);
}
.ranking-fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--espazo-m);
  padding: var(--espazo-s) var(--espazo-m);
  border: 1px solid var(--cor-borde);
  border-radius: var(--radio-m);
}
.ranking-fila--top {
  border-color: var(--cor-area);
  background: rgba(205, 163, 79, 0.08);
}
.ranking-fila--propia {
  border-color: var(--cor-verde-escuro);
  background: var(--cor-positivo-fondo);
}
.ranking-fila__posto {
  font-family: var(--fonte-titular);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cor-texto-suave);
  min-width: 1.5em;
  text-align: center;
}
.ranking-fila--top .ranking-fila__posto { color: var(--cor-area); }
.ranking-fila__nome {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-fila__detalle {
  display: block;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-fila__puntos {
  font-family: var(--fonte-titular);
  font-weight: 700;
  color: var(--cor-verde-escuro);
  font-variant-numeric: tabular-nums;
}
.ranking-mensaxe {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  text-align: center;
  margin: 0;
}

/* ========== COMO SE XOGA ========== */
.pantalla--como-xogar { gap: var(--espazo-l); }
.pantalla--como-xogar .pantalla__cabeceira { margin-bottom: var(--espazo-s); }

.como-pasos {
  display: flex;
  flex-direction: column;
  gap: var(--espazo-l);
}
.como-paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espazo-m);
  align-items: start;
}
.como-paso__num {
  font-family: var(--fonte-titular);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--cor-area);
  line-height: 1;
  min-width: 1.2em;
  text-align: center;
}
.como-paso__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--espazo-s);
  min-width: 0;
}
.como-paso h3 {
  font-family: var(--fonte-titular);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--cor-verde-escuro);
}
.como-paso p {
  font-size: 0.92rem;
  color: var(--cor-texto);
  line-height: 1.55;
  margin: 0;
}
.como-paso kbd {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--cor-borde);
  border-radius: var(--radio-s);
  background: var(--cor-fondo-suave);
  font-family: var(--fonte-corpo);
  font-size: 0.85em;
  font-weight: 600;
  color: var(--cor-verde-escuro);
}
.como-paso__lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.como-paso__lista li {
  position: relative;
  padding-left: var(--espazo-m);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--cor-texto);
}
.como-paso__lista li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cor-area);
}
.como-formula {
  margin: 0;
  padding: var(--espazo-s) var(--espazo-m);
  background: var(--cor-fondo-suave);
  border-left: 3px solid var(--cor-area);
  border-radius: var(--radio-m);
  font-family: var(--fonte-corpo);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--cor-texto);
  white-space: pre-wrap;
  font-variant-numeric: tabular-nums;
}
.pantalla--como-xogar .boton--primario { margin-top: var(--espazo-m); }

/* ========== LEGAL ========== */
.pantalla--legal { gap: var(--espazo-l); }
.pantalla--legal .pantalla__cabeceira { margin-bottom: var(--espazo-s); }

.legal-bloque {
  display: flex;
  flex-direction: column;
  gap: var(--espazo-s);
}
.legal-bloque h3 {
  font-family: var(--fonte-titular);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: var(--cor-verde-escuro);
}
.legal-bloque p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  color: var(--cor-texto);
}
.legal-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espazo-xs);
  margin: 0;
  padding: 0;
}
.legal-lista li {
  position: relative;
  padding-left: var(--espazo-m);
  font-size: 0.92rem;
  line-height: 1.5;
}
.legal-lista li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cor-area);
}

/* ========== RESPONSIVE ========== */
@media (min-width: 768px) {
  .home-acciones { align-items: center; }
  .home-acciones .boton { width: auto; min-width: 280px; }
  .controis-resposta {
    flex-direction: row;
    align-items: center;
  }
  .controis-resposta__input { flex: 1; }
  .controis-resposta__botons { flex: 0 0 auto; }
}

@media (max-width: 480px) {
  .titulo-xogo { font-size: clamp(1.7rem, 8.5vw, 2.2rem); gap: 2px; }
  .titulo-xogo__acento { font-size: 0.42em; margin-top: 0.3em; }
  .subtitulo--home { font-size: 0.86rem; max-width: 32ch; margin-top: var(--espazo-s); }
  .pantalla--home .pantalla__cabeceira { margin-top: var(--espazo-s); }
  .pantalla__cabeceira h2 { font-size: 1.05rem; }

  .xogo-meta { font-size: 0.85rem; gap: var(--espazo-m); }
  .xogo-meta__contador strong { font-size: 1rem; }
  .xogo-meta__boton { width: 28px; height: 28px; }
  .xogo-meta__son-icona { width: 16px; height: 16px; }

  .rosco-container { max-width: 340px; }
  .rosco-centro__letra { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  .rosco-centro__tipo { font-size: 0.7rem; }

  .pista-texto { font-size: 0.92rem; min-height: 56px; padding: var(--espazo-s) var(--espazo-m); }
  .axuda-teclado { font-size: 0.7rem; }

  .resumo { padding: var(--espazo-m); gap: var(--espazo-s); margin-top: var(--espazo-s); }
  .resumo__puntos-num { font-size: 2.5rem; }
  .resumo__puntos-etiqueta { font-size: 0.68rem; }
  .resumo__formula { font-size: 0.82rem; }
  .stats-grid__celda { padding: 8px var(--espazo-s); }
  .stats-grid__valor { font-size: 1.25rem; }
  .stats-grid__etiqueta { font-size: 0.7rem; }
  .lista-letras { padding: 6px var(--espazo-s); }
  .lista-letras__item { font-size: 0.86rem; padding: 3px 0; gap: 6px; }
  .lista-letras__estado { font-size: 0.7rem; width: 4.5em; }

  .ranking-consentimento { padding: var(--espazo-s) var(--espazo-m); gap: var(--espazo-xs); }
  .ranking-consentimento__estado { font-size: 0.78rem; }

  .ranking-fila { padding: 6px var(--espazo-s); gap: var(--espazo-s); }
  .ranking-fila__posto { font-size: 1rem; }
  .ranking-fila__detalle { font-size: 0.72rem; }
  .ranking-fila__nome { font-size: 0.92rem; }
  .ranking-fila__puntos { font-size: 1rem; }

  .como-paso__num { font-size: 1.35rem; }
  .como-paso h3 { font-size: 0.98rem; }
  .como-paso p { font-size: 0.88rem; }
  .como-paso__lista li { font-size: 0.86rem; }
  .como-formula { font-size: 0.8rem; padding: var(--espazo-xs) var(--espazo-s); }

  .legal-bloque h3 { font-size: 1rem; }
  .legal-bloque p, .legal-lista li { font-size: 0.88rem; }

  .home-rodape__menu { font-size: 0.82rem; gap: var(--espazo-xs) 6px; }
  .autoria { font-size: 0.7rem; }
}