:root {
  --cell: 56px;          /* размер ячейки, выставляется из JS */
  --cols: 9;
  --rows: 9;
  --pink: #ff5fa2;
  --pink-soft: #ffd6e8;
  --ink: #5a4a52;
  --board-bg: #fff5fb;
  --radius: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Quicksand", "Comic Sans MS", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, #ffe3f1 0%, transparent 60%),
    linear-gradient(160deg, #fff0f7 0%, #fde9ff 45%, #e9f4ff 100%);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Декоративные «лапки»/сердечки на фоне */
.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,160,200,.18) 0 10px, transparent 11px),
    radial-gradient(circle at 82% 16%, rgba(150,200,255,.18) 0 12px, transparent 13px),
    radial-gradient(circle at 88% 70%, rgba(255,190,120,.16) 0 9px, transparent 10px),
    radial-gradient(circle at 18% 78%, rgba(190,160,255,.16) 0 11px, transparent 12px);
  z-index: 0;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 14px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.topbar { text-align: center; }

.title {
  font-family: "Baloo 2", "Comic Sans MS", cursive;
  font-weight: 800;
  font-size: clamp(28px, 7vw, 44px);
  margin: 4px 0 2px;
  color: var(--pink);
  text-shadow: 0 2px 0 #fff, 0 4px 14px rgba(255,95,162,.25);
  letter-spacing: .5px;
}
.title .paw { font-size: .7em; vertical-align: middle; }

.subtitle {
  margin: 0;
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 16px);
  color: #b07c93;
}

/* HUD */
.hud {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255,255,255,.7);
  border: 2px solid #ffd0e6;
  border-radius: 18px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(255,150,195,.18);
  backdrop-filter: blur(4px);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c08aa1;
  font-weight: 700;
}
.stat-value {
  font-family: "Baloo 2", cursive;
  font-weight: 800;
  font-size: 24px;
  color: var(--pink);
  line-height: 1.1;
}
.combo-stat .stat-value { color: #ff8a3c; }
.combo-stat.flash .stat-value { animation: pop-scale .3s ease; }

.hud-buttons {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.btn {
  font-family: "Baloo 2", cursive;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(180deg, #ff7ab3, var(--pink));
  border: none;
  border-radius: 14px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 4px 0 #e23f86, 0 6px 14px rgba(226,63,134,.3);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #e23f86, 0 3px 8px rgba(226,63,134,.3);
}
.btn-icon {
  padding: 9px 12px;
  background: linear-gradient(180deg, #9ec9ff, #5aa8ff);
  box-shadow: 0 4px 0 #3b86df, 0 6px 14px rgba(59,134,223,.3);
}
.btn-icon:active { box-shadow: 0 1px 0 #3b86df; }

/* Поле */
.board-wrap {
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #fff0f8);
  border: 3px solid #ffc4e1;
  border-radius: var(--radius);
  box-shadow:
    0 12px 36px rgba(255,140,190,.28),
    inset 0 0 0 4px rgba(255,255,255,.6);
}

.board {
  position: relative;
  width: calc(var(--cols) * var(--cell));
  height: calc(var(--rows) * var(--cell));
  background:
    repeating-linear-gradient(0deg,  #ffeaf5 0 var(--cell), #fff5fb var(--cell) calc(2 * var(--cell))),
    repeating-linear-gradient(90deg, rgba(255,200,225,.25) 0 var(--cell), transparent var(--cell) calc(2 * var(--cell)));
  border-radius: 14px;
  touch-action: none;
  overflow: hidden;
}

/* Котёнок-фишка */
.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  transform: translate(0, 0);
  transition: transform .24s cubic-bezier(.34, 1.3, .5, 1);
  will-change: transform;
  cursor: pointer;
}
.tile .inner {
  position: absolute;
  inset: 4px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.06), 0 2px 5px rgba(0,0,0,.08);
  transition: transform .18s ease, opacity .2s ease, box-shadow .15s ease;
}
.tile .inner svg { width: 86%; height: 86%; display: block; }

.tile.selected .inner {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink), 0 6px 14px rgba(255,95,162,.4);
  z-index: 5;
}
.tile.hint .inner { animation: hint-bounce .7s ease infinite; }

.tile.pop .inner {
  transform: scale(0) rotate(45deg);
  opacity: 0;
}

@keyframes pop-scale { 0% { transform: scale(1);} 50% { transform: scale(1.4);} 100% { transform: scale(1);} }
@keyframes hint-bounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.16) translateY(-3px); }
}

/* Вспышка супер-уничтожения */
.blast {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
  opacity: .95;
  z-index: 8;
  mix-blend-mode: screen;
  animation: blast-anim .5s ease-out forwards;
}
.blast.small { background: radial-gradient(circle, #fff 0%, #ffd24a 35%, rgba(255,150,60,0) 70%); }
.blast.cross { background: radial-gradient(circle, #fff 0%, #7ad0ff 35%, rgba(90,160,255,0) 72%); }
.blast.big   { background: radial-gradient(circle, #fff 0%, #ff7ab3 30%, #a66bff 55%, rgba(160,107,255,0) 75%); }
@keyframes blast-anim {
  0%   { transform: translate(-50%,-50%) scale(.2); opacity: .95; }
  60%  { opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(1.15); opacity: 0; }
}

/* Всплывающие очки */
.float-score {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Baloo 2", cursive;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 0 #ff5fa2, 0 0 10px rgba(255,95,162,.7);
  pointer-events: none;
  z-index: 9;
  animation: float-up .9s ease-out forwards;
}
@keyframes float-up {
  0%   { transform: translate(-50%,-50%) scale(.6); opacity: 0; }
  20%  { transform: translate(-50%,-70%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%,-160%) scale(1); opacity: 0; }
}

/* Логотип Diversity в шапке */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}
.brand-mark { width: 46px; display: flex; }
.brand-mark svg { width: 100%; height: auto; display: block; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: .9; }
.brand-name {
  font-family: "Baloo 2", cursive;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 1px;
  color: #2b2a28;
}
.brand-sub {
  font-family: "Baloo 2", cursive;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  color: #2b2a28;
}

/* Фирменный взрыв с логотипом (4 / 5 / 6 в ряд) */
.logo-blast {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 11;
}
.lb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: scale(.2);
  opacity: .95;
  mix-blend-mode: screen;
  animation: lb-ring-anim .55s ease-out forwards;
}
.lb-ring.small { background: radial-gradient(circle, #fff 0%, #ffd98a 40%, rgba(244,162,62,0) 70%); }
.lb-ring.cross { background: radial-gradient(circle, #fff 0%, #9ab6ff 40%, rgba(43,78,217,0) 72%); }
.lb-ring.big   { background: radial-gradient(circle, #fff 0%, #ff9bbf 28%, #b59bff 55%, rgba(43,78,217,0) 75%); }
@keyframes lb-ring-anim {
  0%   { transform: scale(.2); opacity: .95; }
  100% { transform: scale(1.25); opacity: 0; }
}

.lb-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  transform: translate(-50%, -50%) scale(0) rotate(-45deg);
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.28));
  animation: lb-mark-anim .82s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
.lb-mark svg { width: 100%; height: auto; display: block; }
@keyframes lb-mark-anim {
  0%   { transform: translate(-50%,-50%) scale(0)    rotate(-45deg); opacity: 0; }
  35%  { transform: translate(-50%,-50%) scale(1.3)  rotate(10deg); opacity: 1; }
  62%  { transform: translate(-50%,-50%) scale(1.0)  rotate(0deg);  opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.18) rotate(0deg);  opacity: 0; }
}

.lb-shard {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 3px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); /* треугольник как в логотипе */
  transform: translate(0, 0) rotate(0) scale(1);
  animation: lb-shard-anim .72s ease-out forwards;
}
@keyframes lb-shard-anim {
  0%   { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.35); opacity: 0; }
}

/* Легенда */
.legend {
  width: 100%;
  background: rgba(255,255,255,.7);
  border: 2px dashed #ffc4e1;
  border-radius: 18px;
  padding: 12px 18px;
}
.legend h2 {
  font-family: "Baloo 2", cursive;
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--pink);
}
.legend ul { margin: 0; padding-left: 20px; }
.legend li { margin: 4px 0; font-weight: 600; font-size: 14px; }
.legend b { color: #e23f86; }

@media (max-width: 480px) {
  .app { padding: 10px 6px 30px; }
  .board-wrap { padding: 8px; }
}