/* «Мозаика»: вид. Общие токены — в shared/base.css. Всё под .g-mozaika. */

.g-mozaika {
  --accent: #2b7a55;
  --on-accent: #ffffff;
  --accent-tint: #a9d4bd;
  --cell-bg: #ffffff;
  --grid: #cdd8e3;
  --grid-strong: #7d8fa2;
  --clue: #16212c;
  --clue-done: #6b7886;
  --cross: #6f7d8c;
  --star: #b87400;
  --star-off: #9db0c2;
  --hint-ring: #b87400;
}
:root[data-theme='dark'] .g-mozaika {
  --accent: #6fcf9f;
  --on-accent: #06130c;
  --accent-tint: #2c5a44;
  --cell-bg: #1e2832;
  --grid: #34424f;
  --grid-strong: #7a8c9e;
  --clue: #e9eff5;
  --clue-done: #8392a1;
  --cross: #8fa0b0;
  --star: #f0b43c;
  --star-off: #5d7084;
  --hint-ring: #f0b43c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .g-mozaika {
    --accent: #6fcf9f; --on-accent: #06130c; --accent-tint: #2c5a44; --cell-bg: #1e2832;
    --grid: #34424f; --grid-strong: #7a8c9e; --clue: #e9eff5; --clue-done: #8392a1; --cross: #8fa0b0;
    --star: #f0b43c; --star-off: #5d7084; --hint-ring: #f0b43c;
  }
}

.g-mozaika {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  position: relative;
}
.g-mozaika [hidden] { display: none !important; }

/* ---------- шапка: общая (.ghd в base.css) ---------- */

/* ---------- поле ---------- */

.g-mozaika .mz-area {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 4px 3px;
}
.g-mozaika .mz-field {
  display: grid;
  max-width: 100%;
}
.g-mozaika .mz-cols,
.g-mozaika .mz-rows {
  display: grid;
  color: var(--clue);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}
.g-mozaika .mz-cc {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 3px;
}
.g-mozaika .mz-rc {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  padding-right: 4px;
}
.g-mozaika .mz-cc i,
.g-mozaika .mz-rc i { font-style: normal; transition: color 0.2s; }
.g-mozaika .done { color: var(--clue-done); }
.g-mozaika .mz-cc.done i,
.g-mozaika .mz-rc.done i { font-weight: 500; }

.g-mozaika .mz-board {
  display: grid;
  background: var(--cell-bg);
  border-radius: 4px;
  outline: 2px solid var(--grid-strong);
  outline-offset: 0;
  touch-action: none;
  cursor: pointer;
}
.g-mozaika .c {
  position: relative;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
}
.g-mozaika .c.le { border-right-color: transparent; }
.g-mozaika .c.be { border-bottom-color: transparent; }
.g-mozaika .c.tr { border-right: 2px solid var(--grid-strong); }
.g-mozaika .c.tb { border-bottom: 2px solid var(--grid-strong); }

.g-mozaika .c.f::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 3px;
  background: var(--accent);
  animation: mzIn 0.12s ease-out;
}
.g-mozaika .c.x::before,
.g-mozaika .c.x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 2px;
  border-radius: 1px;
  background: var(--cross);
  transform: translate(-50%, -50%) rotate(45deg);
}
.g-mozaika .c.x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.g-mozaika .c.h { box-shadow: inset 0 0 0 2px var(--hint-ring); }
@keyframes mzIn { from { transform: scale(0.6); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* картинка проявляется: сетка и крестики уходят, клетки сливаются волной от угла */
.g-mozaika .mz-board.won { outline-color: transparent; background: transparent; }
.g-mozaika .mz-board.won .c { border: 0; box-shadow: none; }
.g-mozaika .mz-board.won .c.x::before,
.g-mozaika .mz-board.won .c.x::after { opacity: 0; transition: opacity 0.3s; }
.g-mozaika .mz-board.won .c.f::after {
  inset: 0;
  border-radius: 0;
  animation: mzWin 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: var(--d);
}
@keyframes mzWin {
  0% { background: var(--accent-tint); transform: scale(0.9); }
  45% { transform: scale(1.12); }
  100% { background: var(--accent); transform: scale(1); }
}

/* ---------- подсказка-строка ---------- */

.g-mozaika .mz-tip {
  min-height: 40px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 4px;
  transition: opacity 0.25s;
}
.g-mozaika .mz-tip.gone { opacity: 0; }

/* ---------- низ: режимы, потом общая линия кнопок ---------- */

.g-mozaika .mz-bottom {
  flex: none;
  padding: 0 16px 2px;
}
.g-mozaika .mz-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.g-mozaika .mz-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.12s, color 0.12s;
}
.g-mozaika .mz-mode .ic { width: 22px; height: 22px; }
.g-mozaika .mz-mode.on { background: var(--accent); color: var(--on-accent); }

.g-mozaika .ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


@media (prefers-reduced-motion: reduce) {
  .g-mozaika .c.f::after,
  .g-mozaika .mz-board.won .c.f::after { animation: none; }
  .g-mozaika .mz-mode,
  .g-mozaika .mz-tip { transition: none; }
}