/* Всё крупное, как в остальном ParaAbu: кнопки от 60 px, зоны тапа от 48 px.
   Поле — обычные div-клетки, а не холст: буквы так резче, и сброс GPU на
   Android им не страшен. Размеры клеток и место поля считает disposicion.js,
   здесь только вид. */
:root {
  --violeta: #3b1e5e;
  --papel: #fffdf7;
  --fondo: #30184f;
  /* Шесть цветов слов: насыщенный — под пальцем, бледный — у найденного. */
  --c0: #b06fd0; --p0: #ddb2ec;
  --c1: #3aa39a; --p1: #9ed8d2;
  --c2: #e08b3c; --p2: #f3c894;
  --c3: #5aad5f; --p3: #aedcb0;
  --c4: #4f8fd6; --p4: #aecdee;
  --c5: #d8688f; --p5: #f0b3c7;
}

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

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--fondo);
  color: var(--papel);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

.pantalla { position: relative; height: 100%; height: 100dvh; }
/* Экран скрыт, пока main.js не убедится, что сертификат активирован. */
.pantalla[hidden] { display: none; }

/* touch-action: none — иначе iOS обрывает ведение слова событием
   pointercancel, приняв его за прокрутку. */
#escenario {
  position: absolute; inset: 0; overflow: hidden; background: var(--fondo);
  touch-action: none; -webkit-touch-callout: none;
}

/* Щуп safe-area: невидимый блок с отступами env(). main.js читает их и не
   кладёт поле под «чёлку» и полоску жестов. */
#seguro {
  position: absolute; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Поле. touch-action: none — иначе iOS обрывает ведение события
   pointercancel, приняв его за прокрутку. */
#tablero {
  position: absolute; touch-action: none; -webkit-touch-callout: none;
}

.celda {
  position: absolute; display: grid; place-items: center;
  background: var(--papel); color: var(--violeta);
  border-radius: 18%;
  font-weight: 800; line-height: 1;
  transition: background-color 0.12s linear, color 0.12s linear;
}
/* Клетки одного слова сливаются в одну фигуру: у общего ребра скругления нет. */
.celda.sin-arriba { border-top-left-radius: 0; border-top-right-radius: 0; }
.celda.sin-abajo { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.celda.sin-izq { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.celda.sin-der { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Под пальцем — насыщенный цвет и белые буквы; найденное слово — бледный
   цвет того же оттенка и тёмные буквы, как в референсе. */
.celda.traza { color: #fff; }
.celda.traza.c0 { background: var(--c0); } .celda.hallada.c0 { background: var(--p0); }
.celda.traza.c1 { background: var(--c1); } .celda.hallada.c1 { background: var(--p1); }
.celda.traza.c2 { background: var(--c2); } .celda.hallada.c2 { background: var(--p2); }
.celda.traza.c3 { background: var(--c3); } .celda.hallada.c3 { background: var(--p3); }
.celda.traza.c4 { background: var(--c4); } .celda.hallada.c4 { background: var(--p4); }
.celda.traza.c5 { background: var(--c5); } .celda.hallada.c5 { background: var(--p5); }
.celda.punta { transform: scale(1.04); }
/* След руки обучения: клетки, по которым она уже провела. */
.celda.fantasma { background: var(--p0); }
/* Первая буква подсказанного слова медленно мигает. */
.celda.pista { animation: latir 1.6s ease-in-out infinite; }

/* Чип с набираемым словом и строка обучения — «пилюли» на бумаге. Слой выше
   поля: в разметке они идут раньше клеток, а в альбоме чип и вовсе лежит
   поверх поля — без z-index буквы закрывали бы набранное слово. */
.chip, .guia {
  position: absolute; z-index: 15; margin: 0; padding: 0.35rem 0.9rem;
  background: var(--papel); color: var(--violeta);
  border-radius: 999px; font-weight: 800; text-align: center;
  white-space: nowrap; pointer-events: none;
}
.chip { font-size: min(1.5rem, 7vw); letter-spacing: 0.06em; }
.guia { font-size: min(1.1rem, 5vw); max-width: 92vw; white-space: normal; }
.guia:empty, .chip[hidden] { display: none; }
/* Буквы у нас заглавные, и строка отводит место ещё и под хвосты вроде «у» —
   поэтому буква садится ниже середины. Поправку считает main.js по метрикам
   шрифта устройства и кладёт в --tinta; здесь только сдвигаем. */
.celda span, .chip span { display: block; transform: translateY(var(--tinta, 0em)); }

/* HUD: подсказка в левом верхнем углу, настройки в правом, панель выезжает
   вниз из-под настроек. Плашка не ловит касания — сквозь неё ведут слова;
   только кнопки настоящие. */
.hud {
  position: absolute; z-index: 20;
  top: max(0.5rem, env(safe-area-inset-top));
  left: max(0.6rem, env(safe-area-inset-left));
  right: max(0.6rem, env(safe-area-inset-right));
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
  pointer-events: none;
}

.accion {
  width: 60px; height: 60px; flex: 0 0 60px; aspect-ratio: 1;
  display: grid; place-items: center; padding: 0;
  color: var(--violeta); background: #fff; border: 0; border-radius: 50%;
  font: inherit; font-weight: 800; font-size: 1.1rem;
  cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}
.accion svg { width: 32px; height: 32px; display: block; }
.accion:active { transform: translateY(2px); box-shadow: none; }
.accion .apagado { display: none; }
.accion[aria-pressed="true"] .encendido { display: none; }
.accion[aria-pressed="true"] .apagado { display: block; }
/* Рука обучения (hand.png, 58×85) — та же, что в остальных играх. Кончик
   пальца на картинке приходится на 22.4% ширины и 1.2% высоты — на столько же
   и сдвигаем, чтобы JS задавал просто место кончика. */
.mano {
  position: absolute; z-index: 70; pointer-events: none;
  transform: translate(-22.4%, -1.2%);
}
.mano[hidden] { display: none; }
.mano img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)); }

/* Смайл победы по центру с подписью (ширину задаёт main.js — треть короткой
   стороны) — как у верёвочек и пазлов. Поверх поля, руки и HUD, но ниже
   конфетти. Касания не перехватывает: их ловит поле. */
.cara {
  position: absolute; inset: 0; z-index: 75;
  display: grid; place-items: center; align-content: center; gap: 1rem;
  padding: 1rem;
  pointer-events: none;
}
.cara[hidden] { display: none; }
.cara img {
  display: block; height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}
.cara p {
  margin: 0; max-width: 100%; padding: 0.7rem 1rem;
  background: rgba(255, 253, 247, 0.95); color: var(--violeta);
  border-radius: 999px;
  font-size: min(1.4rem, 6vw); font-weight: 800; line-height: 1.3; text-align: center;
  white-space: pre-line;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
/* «Тапни для продолжения» дышит: плавно проступает, держится и так же плавно
   гаснет, и снова — как у судоку (app9). Отсчёт начинается с показа смайла, то
   есть с той секунды, когда победа зафиксирована: элемент до этого display:none,
   и анимация стартует вместе с ним. Круг замкнут (в начале и в конце
   прозрачность 0), поэтому повтор не даёт рывка. */
.cara .continuar {
  font-size: min(1.1rem, 5vw);
  animation: respirar 3.2s ease-in-out infinite;
}
@keyframes respirar {
  0% { opacity: 0; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes latir {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Конфетти на победу (confeti.js) — то же, что в остальных играх. */
.confeti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 80; }
.confeti i { position: absolute; top: 0; width: 10px; height: 16px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .celda { transition: none; }
  .celda.pista { animation: none; }
  /* Подсказку продолжения не трогаем вовсе, как в судоку: она только меняет
     прозрачность, с места не двигается и не мигает резко — укачать таким
     нельзя. Выключить её здесь значило бы оставить надпись висеть неподвижно. */
}