/* =====================================================================
   Самоцветы — стили игры (файл style.css)
   ===================================================================== */

/* ===== Цвета и тема =====
   --bw — ширина игрового поля (одинакова для панели, поля и бустеров);
   --n — размер поля в клетках (задаёт game.js для каждого уровня);
   --g0…--g5 — цвета фишек (оранжевый --g1 сейчас не используется);
   padding с env(safe-area-…) — отступы под вырезы и панели телефона */
:root {
  --bw:min(92vw,520px,calc(100vh - 290px));
  --n:8;
  --s:1; /* масштаб интерфейса: 1 на поле 8×8, меньше на маленьких полях (задаёт game.js) */
  --bg:#f1ece4;
  --panel:#e4dccf;
  --ink:#2a2233;
  --mute:#6d6275;
  --accent:#7a3cff;
  --g0:#e0334f;
  --g1:#f29a1f;
  --g2:#e6c800;
  --g3:#2fa866;
  --g4:#2f86e8;
  --g5:#9b4be0;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* Тёмная тема подстраивается под настройки системы */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#171322;--panel:#241d35;--ink:#f1ecf8;--mute:#9a8fae;--accent:#a67bff}}
:root[data-theme="dark"] {
  --bg:#171322;
  --panel:#241d35;
  --ink:#f1ecf8;
  --mute:#9a8fae;
  --accent:#a67bff;
}

/* ===== Базовая вёрстка страницы ===== */
* {
  box-sizing:border-box;
}
html {
  height:100%;
}
body {
  margin:0;
  min-height:100%;
}
body {
  background:var(--bg);
  color:var(--ink);
  font-family:Onest,system-ui,sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:12px;
  overflow-x:hidden;
}
h1 {
  font-family:Unbounded,sans-serif;
  font-weight:700;
  font-size:clamp(20px,5vw,28px);
  margin:0;
  letter-spacing:-.02em;
}

/* ===== Панель: очки, ходы, цель, уровень ===== */
.stats {
  display:flex;
  flex-wrap:wrap; /* на узкой панели «Цель» переносится на вторую строку */
  gap:calc(10px * var(--s));
  width:var(--bw);
}
.stat {
  flex:1 1 0;
  min-width:0; /* без этого широкий шрифт распирает панель и страница «уезжает» вбок */
  background:var(--panel);
  border-radius:12px;
  padding:calc(8px * var(--s)) calc(12px * var(--s));
}
.stat small {
  display:block;
  color:var(--mute);
  font-size:max(9px, calc(12px * var(--s)));
}
.stat b {
  font-family:Unbounded,sans-serif;
  font-weight:500;
  font-size:max(12px, calc(20px * var(--s)));
}

/* ===== Игровое поле: квадрат, размер ограничен шириной и высотой экрана ===== */
#board {
  position:relative;
  width:var(--bw);
  aspect-ratio:1;
  background:var(--panel);
  border-radius:16px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

/* Подложка из клеток 8×8 в шахматном порядке */
#cells {
  position:absolute;
  inset:0;
  display:grid;
  grid-template:repeat(var(--n),1fr)/repeat(var(--n),1fr);
  pointer-events:none;
}
#cells b {
  margin:1.5%;
  border-radius:22%;
  background:color-mix(in srgb,var(--ink) 7%,transparent);
}
#cells b.d {
  background:color-mix(in srgb,var(--ink) 14%,transparent);
}

/* ===== Фишка =====
   Позиция (left/top) задаётся из JS, transition плавно двигает фишку.
   Внутри — элемент <i>: круг со светом и тенью для объёма */
.tile {
  position:absolute;
  width:calc(100% / var(--n));
  height:calc(100% / var(--n));
  padding:calc(6% / var(--n)); /* зазор между шариками — доля клетки, одинаковая на любом размере поля */
  transition:left .22s ease,top .22s ease,transform .2s ease,opacity .2s ease;
  cursor:pointer;
}
.tile i {
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background-color:currentColor;
  background-image:radial-gradient(circle at 32% 26%,rgba(255,255,255,.9) 0,rgba(255,255,255,.4) 14%,transparent 38%),radial-gradient(circle at 50% 45%,transparent 50%,rgba(0,0,0,.38) 100%);
  box-shadow:inset 0 -.35em .5em rgba(0,0,0,.28),inset 0 .12em .25em rgba(255,255,255,.35),0 .25em .4em rgba(0,0,0,.4);
  font-size:calc(var(--bw) / var(--n) * 0.4); /* размер эмодзи и теней растёт вместе с клеткой */
}

/* Цвет каждого типа фишки (круг берёт его через currentColor) */
.t0 {
  color:var(--g0);
}
.t1 {
  color:var(--g2);
}
.t2 {
  color:var(--g3);
}
.t3 {
  color:var(--g4);
}
.t4 {
  color:var(--g5);
}

/* ===== Оживление: лёгкое покачивание и моргание =====
   Задержка --d у каждой фишки своя, поэтому они не двигаются синхронно */
.tile i {
  position:relative;
  animation:bob 2.8s ease-in-out var(--d,0s) infinite alternate;
}
.tile i::before,.tile i::after {
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  pointer-events:none;
}
.tile i::before {
  transform-origin:50% 44%;
  animation:blink 4s var(--d,0s) infinite;
}
@keyframes bob{from{transform:scale(1) translateY(0)}to{transform:scale(1.04) translateY(-2%)}}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.t2 i::before {
  animation:none;
}
@media (prefers-reduced-motion:reduce){.tile i,.tile i::before{animation:none}}

/* ===== Лица смайлов (SVG в data-URI) =====
   ::before — глаза (моргают), ::after — рот и детали.
   t0 красный — влюблённый, t1 жёлтый — радостный, t2 зелёный — в очках,
   t3 синий — улыбка с зубами, t4 фиолетовый — подмигивает */
.t0 i::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate%2834 44%29'%3E%3Cpath id='h' d='M0 -2C-3 -9 -13 -5 -8 3L0 12L8 3C13 -5 3 -9 0 -2Z' fill='%232a1f33'/%3E%3C/g%3E%3Cg transform='translate%2866 44%29'%3E%3Cpath id='h' d='M0 -2C-3 -9 -13 -5 -8 3L0 12L8 3C13 -5 3 -9 0 -2Z' fill='%232a1f33'/%3E%3C/g%3E%3C/svg%3E");
}
.t0 i::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='20' cy='64' rx='7' ry='4.5' fill='white' fill-opacity='.4'/%3E%3Cellipse cx='80' cy='64' rx='7' ry='4.5' fill='white' fill-opacity='.4'/%3E%3Cpath d='M32 64Q50 82 68 64' fill='none' stroke='%232a1f33' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.t1 i::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M25 49Q34 36 43 49' fill='none' stroke='%232a1f33' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M57 49Q66 36 75 49' fill='none' stroke='%232a1f33' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.t1 i::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M28 62Q50 90 72 62Z' fill='%232a1f33'/%3E%3C/svg%3E");
}
.t2 i::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%232a1f33'%3E%3Crect x='18' y='36' width='30' height='18' rx='6'/%3E%3Crect x='52' y='36' width='30' height='18' rx='6'/%3E%3Crect x='46' y='40' width='8' height='4'/%3E%3C/g%3E%3C/svg%3E");
}
.t2 i::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 70Q52 82 70 64' fill='none' stroke='%232a1f33' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.t3 i::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%232a1f33'%3E%3Ccircle cx='34' cy='45' r='7.5'/%3E%3Ccircle cx='66' cy='45' r='7.5'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='36.5' cy='42' r='2.6'/%3E%3Ccircle cx='68.5' cy='42' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}
.t3 i::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M23 32Q33 24 43 31M57 31Q67 24 77 32' fill='none' stroke='%232a1f33' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M27 60Q50 63 73 60Q70 89 50 89Q30 89 27 60Z' fill='%232a1f33'/%3E%3Cpath d='M29 61Q50 64 71 61L70 68Q50 71 30 68Z' fill='white'/%3E%3Cellipse cx='50' cy='83' rx='9' ry='4.5' fill='%23ff7fa6'/%3E%3C/svg%3E");
}
.t4 i::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 49Q33 37 42 49' fill='none' stroke='%232a1f33' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='67' cy='44' r='7' fill='%232a1f33'/%3E%3Ccircle cx='69' cy='42' r='2.2' fill='white'/%3E%3C/svg%3E");
}
.t4 i::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44 69Q45 88 56 88Q64 87 62 69Z' fill='%23ff7fa6' stroke='%232a1f33' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M50 71L50 80' stroke='%23d4527e' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M28 62Q48 74 72 62' fill='none' stroke='%232a1f33' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ===== Бонусы: динамит 🧨, ракета 🚀 и бомба 💣 (тёмный круг с цветным ободком) ===== */
.dyn i {
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#2a2233;
  background-image:radial-gradient(circle at 32% 26%,rgba(255,255,255,.35) 0,transparent 38%);
  box-shadow:inset 0 0 0 .2em currentColor,0 .25em .4em rgba(0,0,0,.4);
}
.dyn i {
  animation:none;
}
.dyn i::before {
  display:none;
}
.dyn i::after {
  content:"🧨";
  position:static;
  background:none;
  font-size:1.5em;
  line-height:1;
}
.dyn.rocket i::after {
  content:"🚀";
}
.dyn.bomb i::after {
  content:"💣";
}

/* ===== Анимация ракеты: летящая ракета, светящаяся полоса, тряска поля ===== */
.rk {
  position:absolute;
  width:calc(100% / var(--n));
  height:calc(100% / var(--n));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:calc(var(--bw) / var(--n) * 0.52);
  z-index:4;
  pointer-events:none;
  transition-property:left;
  transition-timing-function:linear;
  transform:rotate(var(--rot));
  filter:drop-shadow(0 0 6px #ffb347);
}
.beam {
  position:absolute;
  left:0;
  width:100%;
  height:calc(100% / var(--n));
  z-index:3;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(255,200,90,.7) 50%,transparent);
  animation:beam .6s ease-out forwards;
}
@keyframes beam{from{opacity:0;transform:scaleY(.2)}25%{opacity:1;transform:scaleY(1)}to{opacity:0}}
#board.shake {
  animation:shake .35s;
}
@keyframes shake{20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}}
@media (prefers-reduced-motion:reduce){.beam,#board.shake{animation:none}}

/* ===== Анимация динамита: раздувание, волна взрыва, вспышки ===== */
.tile.ignite {
  animation:ignite .3s ease-in forwards;
  z-index:3;
}
.tile.ignite i {
  filter:brightness(1.7);
}
@keyframes ignite{0%{transform:scale(1)}25%{transform:scale(1.2) rotate(-9deg)}50%{transform:scale(1.25) rotate(9deg)}75%{transform:scale(1.3) rotate(-7deg)}100%{transform:scale(1.38)}}
.tile.hit {
  animation:blast .4s ease-in forwards;
}
@keyframes blast{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.2) rotate(-6deg);filter:brightness(1.8)}100%{transform:scale(1.6) rotate(8deg);opacity:0;filter:brightness(2.2)}}
.boom,.wave {
  position:absolute;
  width:calc(100% / var(--n));
  height:calc(100% / var(--n));
  z-index:4;
  pointer-events:none;
  border-radius:50%;
  opacity:0;
}
.boom {
  background:radial-gradient(circle,#fff6c8 0,#ffb347 35%,rgba(255,90,30,0) 70%);
  animation:boom .45s ease-out forwards;
}
.wave {
  border:4px solid #ffb347;
  animation:wave .6s ease-out forwards;
}
@keyframes boom{0%{transform:scale(.2);opacity:0}30%{opacity:.95}100%{transform:scale(2.2);opacity:0}}
@keyframes wave{from{transform:scale(.3);opacity:.9}to{transform:scale(9);opacity:0}}
@media (prefers-reduced-motion:reduce){.tile.ignite,.tile.hit,.boom,.wave{animation:none}}

/* ===== Лёд: замороженная фишка, таяние льда, «дёргание» при нажатии ===== */
.tile.frozen::after,.tile.thaw::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:24%;
  border:2px solid rgba(255,255,255,.85);
  background:linear-gradient(135deg,rgba(235,250,255,.8) 0,rgba(150,205,242,.5) 55%,rgba(200,235,255,.7) 100%);
  box-shadow:inset 0 0 .7em rgba(255,255,255,.9),0 0 .5em rgba(120,200,255,.6);
}
.tile.thaw::after {
  animation:thaw .45s ease-out forwards;
}
@keyframes thaw{40%{transform:scale(1.08) rotate(-3deg);opacity:.9}to{transform:scale(1.4);opacity:0}}
.tile.frozen i {
  animation:none;
  filter:saturate(.7) brightness(1.08);
}
.tile.frozen i::before {
  animation:none;
}
.tile.nope {
  animation:nope .3s;
}
@keyframes nope{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.tile.thaw::after,.tile.nope{animation:none}}

/* ===== Заблокированные клетки (штриховка) ===== */
#cells b.x {
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 22%,transparent) 0 3px,transparent 3px 7px);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 25%,transparent);
}

/* ===== Предметы для сбора: ананас 🍍 и мороженое 🍦, анимация сбора ===== */
.pine i,.ice i {
  background:none;
  box-shadow:none;
  filter:none;
}
.pine i::before,.ice i::before {
  display:none;
}
.pine i::after {
  content:"🍍";
}
.ice i::after {
  content:"🍦";
}
.pine i::after,.ice i::after {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.9em;
  line-height:1;
  background:none;
}
.tile.got {
  animation:got .45s ease-in forwards;
  z-index:6;
}
@keyframes got{to{transform:translateY(-70%) scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.tile.got{animation:none;opacity:0}}

/* ===== Прочее: счётчик цели, подсказка, выбор и исчезновение фишки, кнопки,
   экран конца уровня ===== */
.stat.goal {
  flex:1.6 1 0;
}
.lvlbox { flex:1.1 1 0; }
.movesbox { flex:.9 1 0; }
.scorebox { flex:1.6 1 0; } /* очки — самое длинное число, ему нужно больше места */
.stat.goal b {
  display:flex;
  flex-wrap:wrap; /* ананасы и мороженое могут стоять в две строки */
  gap:0 10px;
  font-size:max(12px, calc(17px * var(--s)));
}
.stat.goal b span { white-space:nowrap; }
.tile.sel {
  transform:scale(1.12);
}
.tile.sel i {
  filter:drop-shadow(0 0 4px var(--ink));
}
.tile.pop {
  transform:scale(0);
  opacity:0;
}
button {
  font:600 15px Onest,sans-serif;
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 20px;
  cursor:pointer;
}
button:focus-visible,.tile:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:2px;
}
#over {
  position:absolute;
  inset:0;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-radius:16px;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  z-index:5;
}
#over.show {
  display:flex;
}
#over h2 {
  font-family:Unbounded,sans-serif;
  margin:0;
  font-size:24px;
}
#over p {
  margin:0;
  color:var(--mute);
}

/* Если в системе включено «уменьшить движение» — отключаем движение фишек */
@media (prefers-reduced-motion:reduce){.tile{transition:none}}

/* ===== Бустеры: кнопки под полем, счётчик остатка, подсказка ===== */
.boosts {
  display:flex;
  gap:calc(10px * var(--s));
  width:var(--bw);
}
.boost {
  flex:1;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:calc(8px * var(--s)) 4px;
  border-radius:12px;
  background:var(--panel);
  color:var(--ink);
  font:600 max(9.5px, calc(12px * var(--s))) Onest,sans-serif;
}
.boost .bi { font-size:max(16px, calc(22px * var(--s))); line-height:1; }
/* Бейдж с числом оставшихся использований */
.boost b {
  position:absolute;
  top:-6px;
  right:-4px;
  min-width:max(16px, calc(20px * var(--s)));
  height:max(16px, calc(20px * var(--s)));
  padding:0 5px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font:600 max(10px, calc(12px * var(--s))) Onest,sans-serif;
  display:grid;
  place-items:center;
}
.boost.active { outline:3px solid var(--accent); }
.boost:disabled { opacity:.4; cursor:default; }
.boostmsg {
  margin:0;
  min-height:1.3em;
  font-size:13px;
  color:var(--mute);
  text-align:center;
}

/* Анимация бустера «Перемешать»: фишки схлопываются и возвращаются */
.tile.shuffle { animation:shuffle .5s ease-in-out; }
@keyframes shuffle{0%{transform:scale(1) rotate(0)}40%{transform:scale(.2) rotate(180deg);opacity:.3}100%{transform:scale(1) rotate(360deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.tile.shuffle{animation:none}}

/* ===== Кнопка «?» рядом с уровнем и окно с правилами ===== */
.help {
  flex:none;
  align-self:center;
  width:max(28px, calc(36px * var(--s)));
  height:max(28px, calc(36px * var(--s)));
  padding:0;
  border-radius:50%;
  font:700 max(13px, calc(16px * var(--s))) Unbounded,sans-serif;
}
/* Окно правил поверх всей страницы; атрибут hidden скрывает его */
.helpwrap {
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(10,8,16,.55);
}
.helpwrap[hidden] { display:none; }
.helpcard {
  max-width:460px;
  max-height:86vh;
  overflow:auto;
  padding:18px 20px;
  border-radius:16px;
  background:var(--bg);
  color:var(--ink);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.helpcard h2 { margin:0 0 10px; font-family:Unbounded,sans-serif; font-size:20px; }
.helpcard ul { display:grid; gap:8px; margin:0 0 14px; padding-left:18px; font-size:14px; line-height:1.4; }

/* Узкая панель (поле меньше 480 px): «Цель» на второй строке, «?» остаётся в первой.
   Класс narrow на <body> ставит game.js по ширине поля */
body.narrow .stat { padding:calc(6px * var(--s)) calc(8px * var(--s)); }
body.narrow .stat b { font-size:max(12px, calc(16px * var(--s))); }
body.narrow .stat.goal b { font-size:max(12px, calc(16px * var(--s))); }
/* Две строки: [Уровень][Цель][?] и [Ходы][Очки] */
body.narrow .stats { display:grid; grid-template-columns:1fr 2fr auto; align-items:stretch; }
body.narrow .lvlbox { grid-area:1 / 1; }
body.narrow .stat.goal { grid-area:1 / 2; }
body.narrow .help { grid-area:1 / 3; align-self:center; }
body.narrow .movesbox { grid-area:2 / 1; }
body.narrow .scorebox { grid-area:2 / 2 / 3 / 4; }
body.narrow .stats, body.narrow .boosts { gap:6px; }
}

/* Кнопка покупки ходов на экране конца уровня */
#buy {
  background:transparent;
  color:var(--ink);
  border:2px solid var(--accent);
}
#buy:disabled { opacity:.5; cursor:default; }
#buy[hidden] { display:none; }