/* Вид — как на лендинге paraadu.com (landing/app/globals.css): светлая бумага,
   жёлтый фон, фиолетовая рамка и органы управления, коралл и маджента в
   акцентах, скругления 20 px, кнопки с «подставкой» из тени. Сами цифры тёплые,
   орехово-коричневые: на жёлтой бумаге они читаются мягче фиолетовых. Всё крупное: кнопки от 52 px, цифры в клетке
   от 17 px. Поле — обычные div-клетки, а не холст: цифры так резче, и сброс GPU
   на Android им не страшен. Линии сетки — это фон поля, который видно в зазорах
   между клетками: рисовать нечего, перерисовывать нечего. Размеры и место
   считает disposicion.js, здесь только вид. */
:root {
  /* Палитра лендинга, один в один. */
  --amarillo: #ffc800;
  --amarillo-suave: #fff4d1;
  --violeta: #3b1e5e;
  --coral: #f5564a;
  --azul: #1160c4;
  --tinta: #2a1745;
  --papel: #fffdf7;
  --borde: #efe7d6;
  --radio: 20px;
  --radio-tablero: 12px;                          /* закругление рамки поля */
  --radio-dentro: calc(var(--radio-tablero) - 3px); /* 3px — BORDE из disposicion.js */

  --boton: 60px;        /* сторона кнопки HUD; на узких экранах мельче */
  --hueco-hud: 6px;
  --sombra: 0 4px 0 rgba(59, 30, 94, 0.18);

  --cifra: #7a4419;           /* выданная условием — тёплый орехово-коричневый */
  --propia: var(--azul);      /* цифра, поставленная игроком */
  --acierto: #2f8f55;         /* открытая подсказкой */
  --fallo: var(--coral);      /* неверная (только на сложном уровне) */
  --par: var(--amarillo-suave); /* строка, столбец и квадрат выбранной клетки */
  --igual: #ffe08a;           /* клетки с той же цифрой */
  --elegida: var(--amarillo); /* сама выбранная клетка */

  /* Сложности светофором: просто — зелёная, средне — янтарная, сложно —
     красная. Цвет виден раньше, чем разберут выражение смайла. */
  --dif-facil: #3f8f55;
  --dif-medio: #e0a200;
  --dif-dificil: #e04b3f;
}

/* На узких экранах пять кнопок HUD в ряд иначе не помещаются: на 320 px
   5×52 + 4×6 + 2×8 = 300. Отступление от «кнопки от 60 px» осознанное. */
@media (max-width: 380px), (max-height: 380px) { :root { --boton: 56px; } }
@media (max-width: 340px), (max-height: 340px) { :root { --boton: 52px; } }

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

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--amarillo-suave);
  color: var(--tinta);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 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; }

#escenario {
  position: absolute; inset: 0; overflow: hidden; background: var(--amarillo-suave);
  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);
}

/* Поле в фиолетовой рамке, как картинки демо на лендинге. Его фон и есть линии
   сетки: клетки лежат поверх с зазорами. */
#tablero {
  position: absolute; background: var(--violeta); border-radius: var(--radio-tablero);
  box-shadow: 0 10px 26px rgba(59, 30, 94, 0.18);
  touch-action: none; -webkit-touch-callout: none;
}

.celda {
  position: absolute; display: grid; place-items: center;
  background: #fff; color: var(--cifra);
  font-weight: 800; line-height: 1;
  transition: background-color 0.12s linear;
}
/* Своя цифра маджентовая, подсказанная зелёная, неверная коралловая — выданные
   условием остаются коричневыми и самыми жирными. */
/* Четыре угловые клетки повторяют закругление рамки изнутри, иначе их прямые
   углы вылезают за скруглённый край и он выглядит срезанным. Радиус — внешний
   минус толщина рамки (BORDE в disposicion.js). */
.celda:nth-child(1) { border-top-left-radius: var(--radio-dentro); }
.celda:nth-child(9) { border-top-right-radius: var(--radio-dentro); }
.celda:nth-child(73) { border-bottom-left-radius: var(--radio-dentro); }
.celda:nth-child(81) { border-bottom-right-radius: var(--radio-dentro); }

.celda.propia { color: var(--propia); font-weight: 700; }
.celda.pista { color: var(--acierto); }
.celda.error { color: var(--fallo); }
/* Подсветка: сперва соседи, потом одинаковые цифры, потом сама клетка. */
.celda.par { background: var(--par); }
.celda.igual { background: var(--igual); }
.celda.sel { background: var(--elegida); }
/* Мимо: клетка и мешающие ей соседи мигают красным полсекунды. */
.celda.malo { animation: malo 0.5s ease-out; }
@keyframes malo {
  0%, 60% { background: #ffd0cc; }
  100% { background: #fff; }
}
/* Обучение: клетка, на которую показывает рука, и её соседи. */
.celda.senalada { animation: latir 1.4s ease-in-out infinite; }
.celda.fantasma { background: var(--par); }

/* Клавиатура и кнопки действий: настоящие кнопки, место каждой задаёт main.js.
   Обёртки касаний не ловят — только сами кнопки. */
#teclado, #acciones { position: absolute; inset: 0; pointer-events: none; }

.tecla {
  position: absolute; display: grid; place-items: center; padding: 0;
  background: #fff; color: var(--cifra);
  border: 2px solid var(--borde); border-radius: var(--radio);
  font: inherit; font-weight: 800; line-height: 1;
  cursor: pointer; box-shadow: var(--sombra);
  pointer-events: auto;
  transition: opacity 0.15s linear;
}
.tecla:active { transform: translateY(3px); box-shadow: none; }
.tecla svg { width: 46%; height: 46%; display: block; }
/* Цифра, которой на поле уже все девять: гаснет и не нажимается. Числа не
   пишем — это подсказка «закончилась», а не счётчик. */
.tecla.agotada { opacity: 0.35; pointer-events: none; box-shadow: none; }
.accion-juego { color: var(--violeta); }  /* значки действий — не цифры, им тёплый цвет ни к чему */

/* Строка обучения — фиолетовая «пилюля»: она ложится поверх белых кнопок, и
   светлая на светлом потерялась бы. */
.guia {
  position: absolute; margin: 0; padding: 0.4rem 1rem;
  background: var(--violeta); color: var(--papel);
  border-radius: 999px; font-weight: 800; text-align: center;
  font-size: min(1.1rem, 5vw); max-width: 92vw;
  box-shadow: 0 6px 18px rgba(59, 30, 94, 0.3);
  pointer-events: none;
}
.guia:empty { display: none; }

/* HUD. В портрете ряд во всю ширину: справка слева, сложности по центру, звук
   справа. В альбоме рейка во всю высоту слева: справка сверху, сложности по
   центру, звук снизу. Плашка касаний не ловит — только сами кнопки. */
.hud {
  position: absolute; z-index: 20;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: var(--hueco-hud);
  pointer-events: none;
}
.fila {
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: var(--hueco-hud);
}
/* Внутренняя тройка сложностей стоит плотно: разводить её незачем. */
#dificultades { flex: 0 0 auto; justify-content: center; }

@media (orientation: landscape) {
  .hud {
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    flex-direction: row;
  }
  .fila { flex-direction: column; }
}

.accion {
  width: var(--boton); height: var(--boton); flex: 0 0 var(--boton); aspect-ratio: 1;
  display: grid; place-items: center; padding: 0;
  color: var(--violeta); background: #fff;
  border: 2px solid var(--borde); border-radius: 50%;
  font: inherit; font-weight: 800; font-size: 1.1rem;
  cursor: pointer; box-shadow: var(--sombra);
  pointer-events: auto;
}
.accion svg { width: 32px; height: 32px; display: block; }
.accion:active { transform: translateY(3px); box-shadow: none; }
.accion .apagado { display: none; }
.accion[aria-pressed="true"] .encendido { display: none; }
.accion[aria-pressed="true"] .apagado { display: block; }
/* Сложности красятся каждая в свой цвет: невыбранная — цветной смайл на белом,
   выбранная — белый смайл на цветном. */
#dif-facil { --dif: var(--dif-facil); }
#dif-medio { --dif: var(--dif-medio); }
#dif-dificil { --dif: var(--dif-dificil); }
.accion.dificultad { color: var(--dif); border-color: var(--dif); }
.accion.dificultad[aria-pressed="true"] { background: var(--dif); color: #fff; }


/* Рука обучения (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(59, 30, 94, 0.45)); }

/* Смайл победы по центру с подписью (ширину задаёт main.js — треть короткой
   стороны) — как у верёвочек и словечек. Поверх всего, но ниже конфетти.
   Касания не перехватывает: их ловит сцена. */
.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 12px 24px rgba(59, 30, 94, 0.35)); }
.cara p {
  margin: 0; max-width: 100%; padding: 0.7rem 1.1rem;
  background: #fff; color: var(--violeta);
  border: 2px solid var(--amarillo); 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: var(--sombra);
}
/* «Тапни для продолжения» дышит: плавно проступает, держится и так же плавно
   гаснет, и снова. Отсчёт начинается с показа смайла, то есть с той секунды,
   когда победа зафиксирована: элемент до этого 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; }
}

/* Справка: четыре схемы со словом-другим под каждой, карточками как на
   лендинге. В портрете столбиком, в альбоме сеткой 2×2. */
/* Наверху справки полоса: заголовок слева, крестик справа — оба вынуты из
   потока, поэтому схемы и сводка стоят ровно по середине экрана по высоте.
   Отступы сверху и снизу одинаковые: блоки стоят ровно по середине экрана, а
   не «по середине того, что осталось под полосой». На тесных экранах полоса
   получает свою высоту отдельным правилом ниже. */
.ayuda {
  position: absolute; inset: 0; z-index: 90;
  display: grid; justify-items: center; align-content: center;
  padding: max(8px, env(safe-area-inset-top)) 1rem 1rem;
  background: rgba(255, 244, 209, 0.97);
  overflow: auto;
}
.ayuda[hidden] { display: none; }
/* На невысоком экране центрировать по всей высоте нельзя: схемы заезжают под
   заголовок и крестик. Там полоса получает свою высоту, и блоки встают по
   середине того, что осталось. На высоком экране этого не нужно — блоки стоят
   ровно по центру. */
@media (max-height: 700px) {
  .ayuda { padding-top: calc(max(8px, env(safe-area-inset-top)) + var(--boton) + 0.4rem); }
}
.ayuda-caja { display: grid; justify-items: center; gap: 0.8rem; max-width: 100%; }
/* Заголовок — в левом верхнем углу экрана, вне потока: иначе он уезжал бы
   вместе с центрированными блоками. Справа от него место под крестик. */
.ayuda-caja h1 {
  position: absolute; margin: 0; color: var(--violeta); font-size: min(1.4rem, 5.2vw);
  top: max(8px, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  right: calc(max(1rem, env(safe-area-inset-right)) + var(--boton) + 0.6rem);
  min-height: var(--boton); display: flex; align-items: center;
}
.ayuda-cuerpo { display: grid; gap: 0.7rem; }
@media (orientation: landscape) { .ayuda-cuerpo { grid-template-columns: 1fr 1fr; } }
.regla {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.9rem;
  background: #fff; border: 2px solid var(--borde); border-radius: var(--radio);
}
.regla p { margin: 0; color: var(--tinta); font-size: min(1.2rem, 4.8vw); font-weight: 700; }
.mini { width: min(110px, 26vw); height: min(110px, 26vw); display: block; }
.regla:last-child .mini { height: min(51px, 12vw); }
/* На низком экране схемы мельче, а заголовок не резервирует целую кнопку:
   иначе крестик уезжает под нижний край. Правила стоят после базовых размеров —
   при равной силе побеждает последнее. */
@media (orientation: landscape), (max-height: 640px) {
  .mini { width: min(78px, 19vw); height: min(78px, 19vw); }
  .regla:last-child .mini { height: min(39px, 9.3vw); }
  .ayuda-cuerpo { gap: 0.5rem; }
  .ayuda-caja { gap: 0.5rem; }
  .colores { gap: 0.15rem 0.7rem; padding: 0.35rem 0.6rem; }
  .color b { font-size: 1.1rem; }
  .color span { font-size: 0.85rem; }
}
/* Низкий и широкий экран (телефон боком): высоты мало, ширины много — значит
   четыре карточки встают в ряд, а схема переезжает над подписью. Так справка
   помещается целиком, вместе со сводкой цветов и крестиком. */
@media (orientation: landscape) and (max-height: 520px) {
  .ayuda-cuerpo { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
  .regla {
    grid-template-columns: 1fr; justify-items: center; text-align: center;
    gap: 0.25rem; padding: 0.4rem 0.5rem;
  }
  .regla p { font-size: min(0.85rem, 2.4vw); line-height: 1.2; }
  .mini { width: min(58px, 11vw); height: min(58px, 11vw); }
  .regla:last-child .mini { height: min(27px, 5.2vw); }
  /* Сводка здесь должна лечь в одну строку: вторая строка стоит 24 px, а их нет. */
  .colores { gap: 0.1rem 0.5rem; padding: 0.3rem 0.5rem; }
  .color b { font-size: min(1.05rem, 3vw); }
  .color span { font-size: min(0.85rem, 2.4vw); }
}

/* Самый низкий экран из тех, что мы держим (360 px в альбоме): схемы ещё мельче,
   зато справка целиком помещается и крестик виден без прокрутки. Смысл несёт
   подпись рядом, схема рядом с ней — картинка, а не чертёж. */
@media (max-height: 400px) {
  /* Полоса сверху здесь ниже: крестик на таком экране 50 px, а не 60. */
  .ayuda { padding: calc(max(4px, env(safe-area-inset-top)) + 50px + 0.3rem) 0.6rem 0.5rem; }
  .ayuda-caja h1 { min-height: 50px; font-size: min(1.2rem, 4.4vw); }
  .mini { width: 68px; height: 68px; }
  .regla:last-child .mini { height: 31px; }
  .regla { padding: 0.4rem 0.7rem; gap: 0.6rem; }
  .ayuda-caja { gap: 0.4rem; }
  .colores { gap: 0.1rem 0.6rem; padding: 0.3rem 0.5rem; }
  .color b { font-size: 1rem; }
  .color span { font-size: 0.78rem; }
  #boton-cerrar-ayuda { width: 50px; height: 50px; flex-basis: 50px; font-size: 1.3rem; }
}
/* Сводка цветов: одна полоса под схемами, четыре пары «цифра — что это».
   Переносится по строкам, поэтому и на узком экране лишней высоты почти не
   занимает. */
/* В портрете сводка идёт в две колонки: сверху «из условия» и «ваша», снизу
   «подсказка» и «ошибка» — так подписи не сбиваются в неровные строки. В
   альбоме ширины хватает на все четыре в ряд. */
.colores {
  display: grid; grid-template-columns: auto auto; justify-content: center;
  gap: 0.25rem 1rem; padding: 0.45rem 0.9rem; max-width: 100%;
  background: #fff; border: 2px solid var(--borde); border-radius: var(--radio);
}
@media (orientation: landscape) {
  .colores { grid-template-columns: repeat(4, auto); }
}
.color { display: flex; align-items: baseline; gap: 0.3rem; }
.color b { font-size: min(1.3rem, 5vw); font-weight: 800; }
.color span { color: var(--tinta); font-size: min(0.95rem, 3.8vw); font-weight: 700; }
.color .dado { color: var(--cifra); }
.color .propia { color: var(--propia); }
.color .pista { color: var(--acierto); }
.color .error { color: var(--fallo); }

/* Крестик — в правом верхнем углу в обеих ориентациях, на одной полосе с
   заголовком. Внизу он мешал: на низком экране уезжал за край, а по центру
   отнимал высоту у схем. */
#boton-cerrar-ayuda {
  position: absolute; font-size: 1.6rem;
  top: max(8px, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
}

/* Конфетти на победу (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, .tecla { transition: none; }
  .celda.senalada { animation: none; }
  /* Подсказку продолжения не трогаем вовсе: она только меняет прозрачность, с
     места не двигается и не мигает резко — укачать таким нельзя. Дышит она и
     здесь, иначе на машине с выключенными анимациями подсказка просто висела
     бы неподвижно. */
  /* Мигание «мимо» не отключаем, а вырождаем в неподвижную красную подсветку:
     на лёгких уровнях цифра не пишется, и без отклика тап был бы пустым. */
  .celda.malo { animation: none; background: #ffd0cc; }
}