/* Всё крупное, как в остальном ParaAbu: кегль от 20 px, кнопки от 60 px,
   зоны тапа от 48 px. Плитки — самое крупное на экране: доска квадратная и
   масштабируется от меньшей стороны окна, поэтому и в портрете, и в
   ландшафте плитки одинаково большие. */
:root {
  --amarillo: #ffc800;
  --violeta: #3b1e5e;
  --coral: #f5564a;
  --papel: #fffdf7;
  --mesa: #f2e6c4;        /* столешница под плитками */
  --mesa-borde: #e0cd9f;
}

* { 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;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

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

.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; }

/* Игра занимает окно целиком. В портрете панель сверху, в ландшафте — справа;
   доске достаётся всё остальное, и она квадратная. */
#pantalla-juego { height: 100%; height: 100dvh; }

/* Панель ужата под круглую кнопку звука: жёлтая полоса ровно по её размеру.
   Кнопка стоит в правом верхнем углу экрана — в портрете это правый край
   поперечной полосы, в ландшафте верх правого столбца. */
.barra {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0.5rem; background: var(--amarillo);
}
.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%;
  cursor: pointer; box-shadow: 0 3px 0 rgba(59, 30, 94, 0.18);
}
.accion svg { width: 32px; height: 32px; display: block; }
/* Перечёркнутый динамик показывается вместо обычного, когда звук выключен. */
.accion .apagado { display: none; }
.accion[aria-pressed="true"] .encendido { display: none; }
.accion[aria-pressed="true"] .apagado { display: block; }
.accion:active { transform: translateY(2px); box-shadow: none; }
#tablero { flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 8px; }

/* Доска стоит по центру экрана, а не по центру остатка: с той стороны, где
   панели нет, добавляем такой же отступ. Ширину панели кладёт в --barra main.js. */
@media (orientation: portrait) {
  #tablero { padding-bottom: var(--barra, 0px); }
}
/* В ландшафте панель уезжает вправо — под большой палец руки, которая держит
   телефон. row-reverse, а не order: в разметке панель идёт первой, и для
   читалки этот порядок остаётся верным. */
@media (orientation: landscape) {
  #pantalla-juego { flex-direction: row-reverse; }
  .barra { flex-direction: column; justify-content: flex-start; }
  #tablero { padding-left: var(--barra, 0px); }
}

.mesa {
  position: relative;
  background: var(--mesa);
  border: 3px solid var(--mesa-borde);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(59, 30, 94, 0.12);
}

/* Плитки. Объёмная кромка нарисована в самой картинке — докладываем только
   тень, чтобы слои читались. */
.ficha {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 14%;
  filter: none;
  transition: filter 0.25s, transform 0.15s;
}
.ficha img {
  width: 100%; height: 100%; display: block; border-radius: 12%;
  pointer-events: none;
  filter: drop-shadow(2px 3px 3px rgba(59, 30, 94, 0.35));
}
/* Постоянное затемнение заблокированных: свободные яркие, закрытые тёмные.
   После каждого хода пересчитывается — нижние плитки «оживают» на глазах. */
.ficha.bloqueada { filter: brightness(0.55) saturate(0.7); cursor: default; }

/* Выбранная плитка встаёт на слой выше: тот же сдвиг вверх-влево, что у
   верхнего слоя, и тень погуще — как будто её приподняли над доской. Один
   z-index не годится, соседи её просто не перекрывают и подъёма не видно;
   сам z-index ставит render.js инлайном поверх инлайнового номера слоя. */
.ficha.elegida {
  transform: translate(calc(var(--solapa, 4px) * -1.1), calc(var(--solapa, 4px) * -1.8)) scale(1.06);
  outline: 4px solid var(--coral); outline-offset: -2px;
}
.ficha.elegida img { filter: drop-shadow(4px 7px 7px rgba(59, 30, 94, 0.5)); }

/* Жёлтый пунктир на бирюзовой плитке сам по себе теряется, поэтому под ним
   тёмная подложка, а снаружи — жёлтый ореол. */
.ficha.brilla {
  outline: 10px dashed var(--amarillo); outline-offset: -6px;
  box-shadow: 0 0 0 6px rgba(59, 30, 94, 0.55), 0 0 16px 5px rgba(255, 200, 0, 0.9);
  animation: latido 1.1s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { outline-color: rgba(255, 200, 0, 0.45); } 50% { outline-color: var(--amarillo); } }

/* Ходов не осталось: вся доска дрожит, потом плитки съезжаются в кучу и
   выезжают обратно уже перемешанными. */
.ficha.agita { animation: sacudir 0.32s linear infinite; }
.ficha.viaja { transition: transform 0.6s cubic-bezier(0.45, 0, 0.25, 1), filter 0.25s; }

/* Неверная пара: обе плитки коротко дрожат, выбор снимается. */
.ficha.mal { animation: sacudir 0.4s; }
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9%); }
  30% { transform: translateX(8%); }
  45% { transform: translateX(-6%); }
  60% { transform: translateX(4%); }
  80% { transform: translateX(-2%); }
}

/* Снятая пара уходит с easeOutBack: плитка проскакивает нулевой размер и
   возвращается к нему — короткий пружинистый хлопок вместо простого таяния. */
.ficha.fuera {
  animation: irse 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
}
@keyframes irse {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0); opacity: 0; }
}

/* Рука обучения (hand.png, 58×85). Кончик пальца на картинке приходится на
   22.4% ширины и 1.2% высоты — на столько же и сдвигаем, чтобы JS задавал
   просто место нажатия. «Тык» — отвод вниз и возврат к плитке. */
.mano {
  position: absolute; z-index: 70; pointer-events: none;
  transform-origin: 22% 2%;
  animation: tocar 1.6s ease-in-out infinite;
}
.mano[hidden] { display: none; }
.mano img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 5px rgba(59, 30, 94, 0.45)); }
@keyframes tocar {
  0%, 100% { transform: translate(-22.4%, -1.2%) scale(1); }
  40%      { transform: translate(-22.4%, 15%) scale(0.94); }
  58%      { transform: translate(-22.4%, -1.2%) scale(1); }
}

/* Оверлеи победы и тупика */
.velo {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(59, 30, 94, 0.45);
  display: grid; place-items: center; padding: 1.5rem;
}
.velo[hidden] { display: none; }
.tarjeta {
  background: var(--papel); border-radius: 22px;
  padding: 2rem 1.6rem; width: 100%; max-width: 24rem;
  display: grid; gap: 1rem; justify-items: stretch; text-align: center;
}
.tarjeta p { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }

/* Конфетти на победу (confeti.js) — то же, что в app3: полоски сыплются
   сверху. Поверх плиток и руки. */
.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; }

/* Системное «уменьшить движение» глушим точечно: назойливую пульсацию
   подсветки. Движения, которыми игра отвечает на действия — улетающие плитки,
   рука обучения, перемешивание доски, — остаются: без них не видно, что вообще
   произошло, и игра читается как сломанная. Конфетти при этой настройке само
   становится скромнее (см. confeti.js). */
@media (prefers-reduced-motion: reduce) {
  .ficha.brilla { animation: none; outline-color: var(--amarillo); }
}