:root {
  --ink: #1d2340;
  --accent: #ff7a45;
  --paper: #fffaf0;
  font-family: "Baloo 2", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #10142a;
  color: var(--ink);
  overflow: hidden;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

#game, #game3d, #hud {
  display: block;
  grid-area: 1 / 1;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
}

/* Los paneles escalan con la altura de la ventana para acompañar al lienzo 16:9. */
.overlay {
  grid-area: 1 / 1;
  z-index: 2;
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.2vh 2vw;
  font-size: min(1.3vw, 2.3vh);
}

.overlay[hidden] { display: none; }
.overlay.center { justify-content: center; }

.lobby-head { text-align: center; }
.logo { height: 22vh; max-width: 60%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(29, 35, 64, 0.25)); }
.logo-text { margin: 0; font-size: 4.5em; font-weight: 800; color: #fff; -webkit-text-stroke: 0.12em var(--ink); paint-order: stroke fill; }
.tagline {
  margin: 0.2em 0 0;
  font-size: 1.5em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(29, 35, 64, 0.6);
}

.slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4vw;
  width: 100%;
  margin: auto 0;
}

.slot {
  background: var(--paper);
  border: 0.3em solid var(--ink);
  border-radius: 1.4em;
  padding: 1em;
  text-align: center;
  box-shadow: 0 0.4em 0 var(--c-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  transition: transform 0.15s;
}

.slot.taken { background: var(--c); }
.slot.offline { opacity: 0.6; filter: grayscale(0.5); }
.slot.pulse { animation: pulse 0.25s ease-out; }

@keyframes pulse {
  40% { transform: translateY(-0.8em) scale(1.05); }
}

.qr { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.qr img { width: 100%; height: 100%; image-rendering: pixelated; border-radius: 0.5em; }
.slot-bird { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.slot-bird img { width: 85%; animation: bob 1.6s ease-in-out infinite; }
.bird-fallback { width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 0.3em solid var(--ink); }
.slot.pulse .slot-bird img { animation: none; transform: translateY(-12%) rotate(-12deg); }

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

.slot.taken { position: relative; }
.mini-qr { position: absolute; right: 0.5em; bottom: 0.5em; width: 22%; border-radius: 0.3em; background: #fff; opacity: 0.9; }
.slot-name { font-size: 1.7em; font-weight: 800; line-height: 1; }
.slot-sub { font-size: 1.05em; font-weight: 600; opacity: 0.85; }

.lobby-foot { display: flex; flex-direction: column; align-items: center; gap: 0.4em; }

.btn {
  font: inherit;
  font-size: 1.8em;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border: 0.15em solid var(--ink);
  border-radius: 999px;
  padding: 0.15em 1.2em;
  box-shadow: 0 0.2em 0 var(--ink);
  cursor: pointer;
}

.btn:disabled { filter: grayscale(1); opacity: 0.6; cursor: default; }
.btn:not(:disabled):active { transform: translateY(0.15em); box-shadow: 0 0.05em 0 var(--ink); }
.btn kbd { font-size: 0.5em; vertical-align: middle; }

.keys {
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: 1.1em;
  text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(29, 35, 64, 0.7);
}

kbd {
  font: inherit;
  font-weight: 800;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-bottom-width: 4px;
  border-radius: 0.4em;
  padding: 0 0.4em;
  text-shadow: none;
}

#game[hidden], #game3d[hidden], #hud[hidden] { display: none; }
#hud { z-index: 1; box-shadow: none; pointer-events: none; }
.options { display: flex; gap: 1.2em; }
.skin { color: #fff; font-weight: 700; text-shadow: 0 1px 0 var(--ink); }
.skin select { font: inherit; border-radius: 0.5em; border: 2px solid var(--ink); }

.count {
  font-size: 14em;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  -webkit-text-stroke: 0.06em var(--ink);
  paint-order: stroke fill;
}

.count.tick { animation: tick 0.4s ease-out; }

@keyframes tick {
  from { transform: scale(1.6); opacity: 0.3; }
}

.count-hint { font-size: 2em; font-weight: 800; color: #fff; text-shadow: 0 2px 0 var(--ink); margin: 0; }

#results h2 {
  margin: 0 0 0.3em;
  font-size: 4em;
  color: #fff;
  -webkit-text-stroke: 0.08em var(--ink);
  paint-order: stroke fill;
}

.ranking {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 40%;
}

.ranking li {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 2em;
  font-weight: 700;
  background: var(--paper);
  border: 0.12em solid var(--ink);
  border-radius: 0.8em;
  padding: 0.15em 0.7em;
  box-shadow: 0 0.15em 0 var(--ink);
}

.ranking li:first-child { background: #ffe58a; font-size: 2.4em; }
.ranking .rank { width: 1.2em; font-weight: 800; }
.ranking .dot { width: 1em; height: 1em; border-radius: 50%; background: var(--c); border: 0.12em solid var(--ink); }
.ranking .name { flex: 1; }
.ranking .time { font-size: 0.6em; opacity: 0.75; font-variant-numeric: tabular-nums; }

.toast {
  position: fixed;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 0.4em 1.2em;
  border-radius: 999px;
}

.skip-hint {
  position: fixed;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  background: rgba(29, 35, 64, 0.82);
  padding: 0.4em 1.1em;
  border-radius: 999px;
  white-space: nowrap;
}
.skip-hint[hidden] { display: none; }

.results-actions { display: flex; gap: 1em; margin-bottom: 0.8em; }
.results-actions .btn { font-size: 1.6em; }
.btn-ghost { background: var(--paper, #fffaf0); color: var(--ink); }