/* Estilos comunes. Para aplicar la marca Baricentro basta con cambiar estas variables. */
:root {
  --bg: #0e1a36;
  --bg-2: #1d3270;
  --accent: #ff4f7b;
  --accent-2: #ffd23f;
  --ok: #3ddc97;
  --text: #ffffff;
  --muted: #b9c6e6;
  --card: #ffffff;
  --card-back: #2a4aa8;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  text-align: center;
  padding: 4vmin;
  background: radial-gradient(circle at 50% 30%, var(--bg-2), var(--bg) 70%);
  z-index: 10;
}
.screen.hidden { display: none; }
.screen.overlay { background: rgba(14, 26, 54, 0.9); }

.brand {
  font-size: clamp(14px, 2.4vmin, 28px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.title {
  font-size: clamp(40px, 11vmin, 140px);
  font-weight: 900;
  line-height: 1;
  margin: 0;
}
.subtitle {
  font-size: clamp(18px, 3.6vmin, 44px);
  color: var(--muted);
  margin: 0;
  max-width: 22ch;
}
.big-icon {
  font-size: clamp(70px, 20vmin, 240px);
  line-height: 1;
  animation: bob 2s ease-in-out infinite;
}
.btn {
  font: inherit;
  font-weight: 800;
  font-size: clamp(22px, 4.6vmin, 56px);
  padding: 0.6em 1.6em;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.25);
  animation: pulse 1.4s ease-in-out infinite;
}
.btn:active { transform: translateY(0.15em); box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.25); }

.score-big {
  font-size: clamp(60px, 16vmin, 200px);
  font-weight: 900;
  color: var(--accent-2);
  line-height: 1;
}
.record { font-size: clamp(16px, 3vmin, 36px); color: var(--muted); margin: 0; }

.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6vmin;
  padding: 2.5vmin 4vmin;
  font-size: clamp(18px, 3.6vmin, 44px);
  font-weight: 800;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.hud span { opacity: 0.75; font-weight: 600; margin-right: 0.3em; }

.back {
  position: fixed;
  top: 1.5vmin;
  left: 1.5vmin;
  z-index: 20;
  width: clamp(44px, 8vmin, 90px);
  height: clamp(44px, 8vmin, 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: clamp(22px, 4vmin, 44px);
  text-decoration: none;
}

canvas { display: block; position: fixed; inset: 0; }

/* Pantalla de nombre con teclado en pantalla. */
.title-sm { font-size: clamp(30px, 7vmin, 90px); }
.name-box {
  min-width: 11ch;
  min-height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 0.6em;
  font-size: clamp(30px, 7vmin, 90px);
  font-weight: 900;
  letter-spacing: 0.08em;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.1);
  border: 0.06em solid rgba(255, 255, 255, 0.25);
}
.name-box.bad { border-color: var(--accent); animation: shake 0.4s; }
.name-msg {
  margin: 0;
  min-height: 1.3em;
  font-size: clamp(15px, 2.8vmin, 34px);
  font-weight: 700;
  color: var(--accent);
}
.caret {
  width: 0.08em;
  height: 1em;
  margin-left: 0.05em;
  background: var(--accent-2);
  animation: blink 1s steps(1) infinite;
}
.keyboard { display: flex; flex-direction: column; align-items: center; gap: 1.2vmin; }
.krow { display: flex; gap: 1.2vmin; }
.key {
  font: inherit;
  font-weight: 800;
  font-size: clamp(18px, 3.8vmin, 46px);
  width: clamp(32px, 7.8vmin, 96px);
  height: clamp(32px, 7.8vmin, 96px);
  border: 0;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}
.key:active, .key:focus-visible { background: var(--accent-2); color: var(--bg); outline: none; }
.key.wide { width: auto; padding: 0 1em; }
.key.ok { background: var(--accent); }

/* Pantalla de resultados y ranking. */
.results { gap: 2vmin; }
.results .title { font-size: clamp(28px, 6.5vmin, 80px); }
.results .score-big { font-size: clamp(44px, 11vmin, 140px); }
.results .subtitle { max-width: none; font-size: clamp(16px, 3vmin, 36px); }
.results .btn { font-size: clamp(18px, 3.6vmin, 44px); }
.ranking {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  width: min(90vw, 640px);
  font-size: clamp(15px, 2.8vmin, 34px);
}
.ranking .row {
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  gap: 0.6em;
  padding: 0.3em 0.8em;
  border-radius: 0.4em;
  background: rgba(255, 255, 255, 0.07);
  text-align: left;
}
.ranking .pos { font-weight: 900; color: var(--muted); }
.ranking .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .val { font-weight: 800; color: var(--accent-2); }
.ranking .row.me { background: var(--accent); }
.ranking .row.me .pos, .ranking .row.me .val { color: #fff; }
.ranking .row.gap { display: block; text-align: center; background: none; padding: 0; }
.ranking .row.empty { display: block; text-align: center; color: var(--muted); }

/* Foco del mando. */
.pad-focus {
  outline: 0.7vmin solid var(--accent-2);
  outline-offset: 0.5vmin;
  border-radius: 0.5em;
}
.key.pad-focus { background: var(--accent-2); color: var(--bg); }
.btn.pad-focus { outline-offset: 0.8vmin; border-radius: 999px; }
.card.pad-focus { border-radius: 14%; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes shake {
  20%, 60% { transform: translateX(-0.25em); }
  40%, 80% { transform: translateX(0.25em); }
}

@keyframes bob { 50% { transform: translateY(-6%); } }
@keyframes pulse { 50% { transform: scale(1.06); } }