/* Всё крупное: кегль от 20 px, кнопки от 60 px высотой, зоны тапа от 48 px.
   Ни одного модального окна, ни одной мелкой ссылки — экран должен читаться
   с расстояния вытянутой руки на ярком свету. */
:root {
  --amarillo: #ffc800;
  --violeta: #3b1e5e;
  --coral: #f5564a;
  --papel: #fffdf7;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--papel);
  color: var(--violeta);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  overscroll-behavior: none;
}

.pantalla { min-height: 100%; display: flex; flex-direction: column; position: relative; }
.pantalla[hidden] { display: none; }

/* Экран загрузки. Поверх всего: игра под ним успевает разложиться и померить
   картинки, пока человек смотрит на кружок. */
#pantalla-carga {
  position: fixed; inset: 0; z-index: 10; background: var(--papel);
  align-items: center; justify-content: center; gap: 1.4rem;
  padding: 2rem 1.5rem; text-align: center;
}
.rueda {
  width: 56px; height: 56px; border: 6px solid #efe7d6;
  border-top-color: var(--coral); border-radius: 50%;
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
#texto-carga { margin: 0; font-size: 1.2rem; font-weight: 700; max-width: 20rem; }

/* Экран кода */
#pantalla-codigo { align-items: center; justify-content: center; gap: 1.4rem; padding: 2rem 1.5rem; text-align: center; }
.marca { border-radius: 22px; }
#pantalla-codigo h1 { font-size: 1.7rem; line-height: 1.25; margin: 0; }
#codigo {
  font-size: 2rem; text-align: center; letter-spacing: 0.08em;
  padding: 1rem; width: min(100%, 22rem); border: 3px solid var(--violeta);
  border-radius: 16px; background: #fff; color: var(--violeta); font-family: inherit;
}
.error { color: var(--coral); font-weight: 700; margin: 0; max-width: 22rem; }

.boton {
  font: inherit; font-weight: 800; font-size: 1.2rem; color: #fff;
  background: var(--coral); border: 0; border-radius: 999px;
  padding: 1.1rem 2.4rem; min-height: 60px; cursor: pointer;
  box-shadow: 0 6px 0 #d13f34;
}
.boton:active { transform: translateY(3px); box-shadow: 0 3px 0 #d13f34; }

/* Игра */
.barra { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; background: var(--amarillo); }
/* На узком экране шапке нужнее место под название, чем воздух по краям:
   с широкими отступами длинное имя вроде «Солончаки Салинас-Грандес» ломалось
   на три строки. */
@media (max-width: 430px) { .barra { gap: 0.5rem; padding: 0.6rem; } }
/* Низкий экран — телефон в ландшафте: шапка отдаёт картинкам свою высоту.
   Кнопку не трогаем, 48 px под палец остаются. */
@media (max-height: 480px) { .barra { padding: 0.3rem 0.8rem; } }
.barra h2 { font-size: 1.2rem; margin: 0; }
/* Счётчик не переносится: на узком экране флекс ломал «0 из 3» на три строки
   и раздувал шапку втрое. */
.contador { font-weight: 800; font-size: 1.3rem; white-space: nowrap; flex: 0 0 auto; }
/* Название и подсказка занимают середину шапки. */
.centro { flex: 1; min-width: 0; display: grid; gap: 0.1rem; text-align: center; }
/* Кегль смотрит и на ширину, и на высоту окна. Только по ширине выходило, что в
   ландшафте на телефоне (широко, но низко) шапка вырастала на треть экрана. */
.lugar { font-size: clamp(1rem, min(2.2vw + 0.5rem, 5.5vh), 1.5rem); line-height: 1.2; opacity: 0.75; }
.icono {
  font-size: 1.6rem; background: #fff; border: 0; border-radius: 50%;
  width: 48px; height: 48px; cursor: pointer; color: var(--violeta);
  /* Без этого флекс сжимает кнопку под длинный заголовок, и круг становится овалом. */
  flex: 0 0 48px; aspect-ratio: 1;
  /* Символ в кнопке садится на базовую линию текста и выглядит смещённым вверх.
     Сетка с центрированием и сброшенные отступы ставят его ровно в середину. */
  display: grid; place-items: center; line-height: 1; padding: 0;
}

/* Игра умещается в окно целиком. Высота окна берётся в dvh: на телефоне и
   планшете панели браузера то появляются, то уходят, и проценты врут. */
#pantalla-juego { height: 100%; height: 100dvh; }
.tablero { flex: 1; min-height: 0; display: grid; gap: 6px; padding: 6px; }
/* Портрет — картинки друг над другом, ландшафт — рядом. Перестроение на
   поворот, без перезагрузки. */
@media (orientation: landscape) { .tablero { grid-template-columns: 1fr 1fr; } }
/* Строки задаём явно. Автоматические росли по высоте самой картинки, и на
   планшете в портрете нижняя вместе с подписью уезжала за край экрана. */
@media (orientation: portrait) { .tablero { grid-template-rows: 1fr 1fr; } }
/* Без сброса минимумов ячейка грида не даёт себя сжать меньше содержимого. */
.lienzo { position: relative; display: grid; place-items: center; overflow: hidden; min-width: 0; min-height: 0; }
/* Картинка вписывается в ячейку целиком и не обрезается. Позиция absolute тут
   обязательна: высота строки грида «резиновая», и процентам в max-height в
   обычном потоке не от чего считаться — картинка оставалась в натуральный рост,
   а лишнее срезал overflow. */
.lienzo img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  display: block; border-radius: 12px;
}

.marca-hallada, .pista {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
  pointer-events: none; box-sizing: border-box;
}
.marca-hallada { border: 6px solid var(--coral); }
.pista { border: 6px dashed var(--violeta); animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }

.mensaje { margin: 0; font-size: clamp(0.85rem, min(1.4vw + 0.4rem, 4vh), 1.05rem); font-weight: 700; }
.mensaje.bien { color: #2e7d32; }

/* Настройки */
/* Прижаты к низу: язык переключают редко, и он не должен спорить со странами. */
.idiomas { margin: auto 0.9rem 2rem; text-align: center; font-size: 1.05rem; }
.idiomas a { color: var(--violeta); text-decoration: underline; padding: 0.3rem; }
.idiomas a[aria-current='true'] { font-weight: 800; text-decoration: none; }
/* Стрелку назад рисуем вдвое жирнее: тонкий символ на белом кружке терялся,
   а это единственный выход из настроек. Обводка, а не насыщенность: в
   системных шрифтах у стрелки одно начертание, и font-weight её не берёт. */
/* Приподнят сам знак внутри кружка, а кружок и зона нажатия остаются на месте:
   нижнее поле поджимает содержимое вверх, потому что оно центрируется в том,
   что осталось. Выше поднимать некуда — знак упрётся в край окружности. */
#volver { -webkit-text-stroke: 1.4px currentColor; padding-bottom: 4px; }

.paises { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; }
#pantalla-ajustes .paises { flex: 0 0 auto; }
.paises button {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  /* Кегль тянется за шириной экрана: «Estados Unidos» при постоянных 1.3rem
     переносилось на вторую строку, а название страны в две строки читается
     как две страны. */
  font: inherit; font-size: clamp(1rem, 4.6vw, 1.3rem); text-align: left; background: #fff;
  border: 2px solid #efe7d6; border-radius: 16px; padding: 1rem 1.2rem;
  margin-bottom: 0.6rem; min-height: 64px; cursor: pointer; color: var(--violeta);
}
.paises button[aria-current="true"] { border-color: var(--coral); border-width: 3px; }
.paises .bandera { font-size: 2rem; }
.paises .cuantos { margin-left: auto; opacity: 0.6; font-size: 1rem; }

/* Конфетти */
.confeti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.confeti i { position: absolute; top: 0; width: 10px; height: 16px; border-radius: 2px; }