/* Montserrat (SIL OFL), self-hosted: the closest free match to Gotham. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  font-weight: 400;
  position: relative;
}

/* Painted Argentine flag behind everything: faded and blurred on purpose (opacity is baked in the SVG). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14, 15, 18, 0) 55%, rgba(14, 15, 18, 0.7) 100%),
    url("../img/fondo-bandera.svg") center / cover no-repeat;
}

/* Landscape screens (PC): the portrait art would be cropped to a thin middle strip, so use a horizontal one. */
@media (min-aspect-ratio: 1/1) {
  body::before {
    background:
      linear-gradient(to bottom, rgba(14, 15, 18, 0) 88%, rgba(14, 15, 18, 0.35) 100%),
      url("../img/fondo-bandera-horizontal.svg") center / cover no-repeat;
  }
}

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--space-2); top: var(--space-2); background: var(--accent-1); color: var(--text-on-accent); padding: var(--space-1) var(--space-2); border-radius: 8px; z-index: 10; }

.topbar { text-align: center; padding: var(--space-3) var(--space-2) var(--space-2); }
.logo { margin: 0; font-size: clamp(2.25rem, 9vw, 3.5rem); font-weight: 800; letter-spacing: 0.03em; line-height: 1.05; text-transform: uppercase; }
.logo span { color: var(--accent-1); text-shadow: 0 0 14px rgba(0, 229, 255, 0.6); }
.genre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: var(--space-1) 0 0;
  padding: 0.25rem 0.9rem 0.25rem 0.7rem;
  border: 1px solid var(--accent-2);
  border-radius: 999px;
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  box-shadow: var(--glow-2);
}
.flag { display: block; flex: none; width: 22px; height: 15px; border-radius: 2px; }

/* How to play */
.rules p { margin: 0 0 var(--space-2); }
.points { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
.points li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.6rem 0.4rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.points strong { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--accent-2); }
.points span { font-size: 0.75rem; color: var(--text-secondary); }
@media (max-width: 480px) { .points { grid-template-columns: repeat(2, 1fr); } }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--space-2); flex: 1; }

.card {
  background: rgba(22, 24, 29, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.card h2 { margin-top: 0; font-size: clamp(1.6rem, 5.5vw, 2.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }

.muted { color: var(--text-muted); }
.error, .feedback.error { color: var(--danger); }
.ok { color: var(--accent-2); margin: var(--space-1) 0; }

label { display: block; margin: var(--space-2) 0 0.25rem; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary, var(--text)); }
input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus { outline: none; border-color: var(--accent-1); box-shadow: var(--glow-1); }

.btn {
  margin-top: var(--space-2);
  padding: 0.75rem 1.5rem;
  background: var(--accent-1);
  color: var(--text-on-accent);
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}
.btn:hover { box-shadow: var(--glow-1); }
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.btn-ghost { background: transparent; color: var(--accent-1); border: 1px solid var(--accent-1); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.clues { list-style: none; padding: 0; margin: var(--space-2) 0; display: grid; gap: var(--space-1); }
.clues li {
  padding: var(--space-2);
  border-left: 3px solid var(--accent-1);
  background: var(--surface-2);
  border-radius: 0 10px 10px 0;
  font-weight: 500;
}
.clues li small { display: block; color: var(--text-muted); font-style: normal; margin-bottom: 0.25rem; }
.clues li:last-child { box-shadow: var(--glow-2); border-left-color: var(--accent-2); }

.feedback { margin: var(--space-2) 0 0; font-weight: 600; color: var(--accent-1); }

.score { font-size: 4.5rem; line-height: 1.1; font-weight: 800; margin: var(--space-1) 0; color: var(--accent-2); text-shadow: 0 0 24px rgba(29, 255, 194, 0.5); }
.score { display: flex; align-items: baseline; gap: 0.5rem; }
.score small { font-size: 1rem; color: var(--text-muted); text-shadow: none; }

.footer { text-align: center; color: var(--text-muted); padding: var(--space-2); font-size: 0.875rem; }

@media (max-width: 480px) {
  .card { padding: var(--space-2); }
  .actions .btn { flex: 1 1 100%; }
}

/* Autocomplete */
.ac { position: relative; }
.ac-list {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--accent-1);
  border-radius: 10px;
  box-shadow: var(--glow-1);
}
.ac-list li { padding: 0.6rem 0.75rem; border-radius: 8px; cursor: pointer; }
.ac-list li:hover, .ac-list li[aria-selected="true"] { background: var(--accent-1); color: var(--text-on-accent); }

.note { font-size: 0.875rem; border-left: 3px solid var(--accent-2); padding-left: var(--space-2); }

/* Weekly ranking */
.ranking-box { margin: var(--space-3) 0; padding: var(--space-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.ranking-box h3 { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 800; }
.ranking { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 0.35rem; }
.ranking li { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--space-1); padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--surface); }
.ranking .pos { display: grid; place-items: center; justify-self: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 0.8125rem; font-weight: 800; background: var(--surface-2); color: var(--text); }
.ranking .pos.rank-1 { background: #f6c744; color: #1a1400; }
.ranking .pos.rank-2 { background: #c9d1d9; color: #10151a; }
.ranking .pos.rank-3 { background: #d08a4d; color: #1a0e03; }
.ranking .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .pts { font-weight: 700; color: var(--accent-2); }
.ranking li.is-you { border: 1px solid var(--accent-1); box-shadow: var(--glow-1); }
.ranking-me { margin: var(--space-2) 0 0; font-weight: 700; color: var(--accent-1); }