/* ═══════════════════════════════════════════════════════════
   BEANOKU — Стили игры
   Кофейная тематика, адаптивный дизайн для Яндекс.Игр
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
  /* Кофейная палитра */
  --bg-primary: #F5E6D3;
  --bg-secondary: #EDD9C4;
  --bg-dark: #4A3728;
  --bg-card: #FFF8F0;
  --text-primary: #3E2723;
  --text-secondary: #6D4C41;
  --text-light: #8D6E63;
  --text-inverse: #FFFFFF;
  --accent: #6F4E37;
  --accent-light: #A67B5B;
  --accent-dark: #3E2723;

  /* Статусные цвета */
  --success: #4CAF50;
  --error: #E53935;
  --warning: #FF9800;
  --gold: #FFD700;

  /* Цвета регионов (зон обжарки) — по степени обжарки, 2.2 */
  --region-0: #E8C39E; /* Латте — тёплый кремовый */
  --region-1: #D9A15B; /* Карамель — янтарный */
  --region-2: #C17F45; /* Корица — оранжево-коричневый */
  --region-3: #B5651D; /* Терракота — красновато-коричневый */
  --region-4: #8B4A34; /* Каштан — глубокий красно-коричневый */
  --region-5: #6F4E37; /* Какао — классический шоколад */
  --region-6: #4A2E23; /* Эспрессо — почти чёрный */
  --region-7: #7A3B46; /* Кофейная вишня — винный акцент */
  --region-8: #4F6F52; /* Мята — холодный зелёный акцент */
  --region-9: #2F6B6E; /* Тил — глубокий бирюзовый акцент */

  /* UI */
  --cell-size: 52px;
  --cell-gap: 2px;
  --border-radius: 8px;
  --btn-radius: 12px;
  --shadow: 0 2px 8px rgba(74, 55, 40, 0.15);
  --shadow-lg: 0 4px 16px rgba(74, 55, 40, 0.2);

  /* Градиенты, 2.3 */
  --gradient-menu: linear-gradient(180deg, #F5E6D3 0%, #EDD9C4 60%, #D4A574 100%);
  --gradient-game: linear-gradient(180deg, #F5E6D3 0%, #FFF8F0 100%);
  --gradient-win: radial-gradient(ellipse at center top, #FFF8E7 0%, #FFE4A8 30%, #FFD700 60%, #D4A574 100%);
  --gradient-lose: radial-gradient(ellipse at center top, #E8D5C4 0%, #C9A882 40%, #8B6F47 100%);
  --gradient-btn-play: linear-gradient(135deg, #6F4E37 0%, #8B6F47 100%);
  --gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);

  /* Текстуры, 2.3 */
  --texture-coffee:
    radial-gradient(circle at 20% 30%, rgba(111,78,55,0.03) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(111,78,55,0.03) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(111,78,55,0.02) 2px, transparent 2px);
  --texture-steam:
    radial-gradient(ellipse at 30% 80%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(255,255,255,0.05) 0%, transparent 40%);

  /* Типографика, 2.4 */
  --font-logo: 'Georgia', serif;
  --font-heading: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
  --font-body: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;
  --font-fact: 'Georgia', serif;

  /* Анимации — премиальные easing-кривые (плавный разгон/торможение) */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-premium-in: cubic-bezier(0.55, 0, 0.45, 1);
  --transition-fast: 0.18s var(--ease-premium);
  --transition-normal: 0.35s var(--ease-premium);
  --transition-slow: 0.55s var(--ease-premium);
}

/* ── Базовые стили (запрет скролла, выделения) ─────────── */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #3E2723;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

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

/* ── Game Container (адаптивное масштабирование) ───────── */
#game-container {
  position: relative;
  width: 375px;
  height: 660px;
  background: var(--bg-primary);
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(0,0,0,0.3);
}

body.orientation-portrait #game-container {
  width: 375px;
  height: 660px;
}

body.orientation-landscape #game-container {
  width: 600px;
  height: 375px;
}

/* ── Экраны ────────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--transition-normal);
  overflow: hidden;
}


.screen.active {
  display: flex;
  opacity: 1;
  z-index: 1;
  animation: slideUpIn var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Переходы между экранами, 5.1 */
@keyframes slideUpIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Главное меню ──────────────────────────────────────── */
.menu-content {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  background: var(--texture-coffee), var(--gradient-menu);
}

/* 3.8: фоновые частицы — 6 едва заметных плавающих SVG-зёрен, очень медленное движение */
.menu-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.menu-particle {
  position: absolute;
  width: 10px;
  height: 14px;
  fill: var(--accent);
  opacity: 0.08;
  animation: menuParticleFloat 14s ease-in-out infinite;
}

.menu-particle.p1 { top: 12%; left: 15%; animation-duration: 13s; animation-delay: 0s; }
.menu-particle.p2 { top: 22%; left: 78%; animation-duration: 16s; animation-delay: 1.5s; }
.menu-particle.p3 { top: 45%; left: 8%;  animation-duration: 12s; animation-delay: 3s; }
.menu-particle.p4 { top: 60%; left: 88%; animation-duration: 15s; animation-delay: 2s; }
.menu-particle.p5 { top: 78%; left: 25%; animation-duration: 14s; animation-delay: 4s; }
.menu-particle.p6 { top: 85%; left: 65%; animation-duration: 17s; animation-delay: 0.8s; }

@keyframes menuParticleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.06; }
  50%      { transform: translateY(-24px) rotate(20deg); opacity: 0.12; }
}

.logo {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 40px;
  background: var(--texture-steam);
}

.logo-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  animation: float 3.4s var(--ease-premium) infinite;
  filter: drop-shadow(0 6px 12px rgba(44, 26, 14, 0.4));
}

.logo-icon svg.logo-beans {
  width: 132px;
  height: 116px;
  overflow: visible;
}

/* Каждое зерно кластера покачивается в своём ритме — живой, премиальный эффект вместо статичной иконки.
   transform-origin: 0 0, т.к. символ зерна нарисован с центром ровно в (0,0) внутри уже
   позиционированной родительской группы — это надёжнее, чем transform-box:fill-box (не везде поддерживается для <use>).
   Переменная --shine-delay передаётся через CSS custom property внутрь <use> (кастом-свойства наследуются
   даже через shadow-дерево use), чтобы блик на каждом зерне запускался не синхронно, а вразнобой. */
.logo-bean {
  transform-origin: 0 0;
  animation: beanWobble 3.6s var(--ease-premium) infinite;
}
.logo-bean-a { animation-duration: 3.8s; animation-delay: 0.15s; --shine-delay: 0s; }
.logo-bean-b { animation-duration: 4.1s; animation-delay: 0.5s; --shine-delay: 1.4s; }
.logo-bean-c { animation-duration: 3.2s; animation-delay: 0s; --shine-delay: 2.7s; }

@keyframes beanWobble {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%      { transform: translateY(-3px) rotate(2.5deg) scale(1.015); }
}

/* Глянцевый блик, "пробегающий" по поверхности зерна по диагонали — премиальный эффект полировки/обжарки */
.bean-shine {
  animation: beanShine 4.6s ease-in-out infinite;
  animation-delay: var(--shine-delay, 0s);
}

@keyframes beanShine {
  0%   { transform: rotate(28deg) translateX(-26px); opacity: 0; }
  10%  { opacity: 1; }
  36%  { opacity: 1; }
  50%, 100% { transform: rotate(28deg) translateX(26px); opacity: 0; }
}

/* Мягкая контактная тень под кластером зёрен — "дышит" синхронно с покачиванием, усиливает объём */
.logo-beans-shadow {
  fill: url(#gradBeanShadow);
  animation: beanShadowBreathe 3.6s var(--ease-premium) infinite;
  transform-origin: 48px 72px;
}

@keyframes beanShadowBreathe {
  0%, 100% { transform: scaleX(1); opacity: 0.55; }
  50%      { transform: scaleX(0.88); opacity: 0.35; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Пар от зёрен, 5.5 — по центру над кластером из трёх зёрен */
.logo-icon::before,
.logo-icon::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 44%;
  width: 8px;
  height: 20px;
  background: linear-gradient(to top, rgba(255,255,255,0.5), transparent);
  border-radius: 50%;
  animation: steam 2s var(--ease-premium) infinite;
  pointer-events: none;
}

.logo-icon::after {
  left: 52%;
  animation-delay: 0.7s;
}

@keyframes steam {
  0%   { transform: translateY(0) scaleX(1); opacity: 0.4; }
  50%  { transform: translateY(-15px) scaleX(1.5); opacity: 0.2; }
  100% { transform: translateY(-30px) scaleX(2); opacity: 0; }
}

.logo h1 {
  font-family: var(--font-logo);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent-dark);
  letter-spacing: 2px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 8px 0 0;
  letter-spacing: 1px;
}

.menu-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 260px;
}

/* ── Кнопки ────────────────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: none;
  border-radius: var(--btn-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 20px;
}

.btn:active {
  transform: scale(0.96);
}

/* Hover-эффект кнопок, 5.3 — только на устройствах с поддержкой hover */
@media (hover: hover) {
  .btn:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
  }
}

.btn-primary {
  background: var(--gradient-btn-play);
  color: var(--text-inverse);
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  background: var(--accent-dark);
}

/* Пульсация кнопки «Играть», 5.3 */
#btn-play {
  animation: playButtonPulse 2s ease-in-out infinite;
}

@keyframes playButtonPulse {
  0%, 100% { box-shadow: var(--shadow); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 4px rgba(111, 78, 55, 0.15); }
}

.btn-secondary {
  background: rgba(111, 78, 55, 0.1);
  color: var(--accent);
  border: 2px solid rgba(111, 78, 55, 0.2);
}

.btn-secondary:hover {
  background: rgba(111, 78, 55, 0.2);
}

.btn-icon {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(111, 78, 55, 0.1);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--accent);
}

.btn-icon svg {
  width: 22px;
  height: 22px;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .btn-icon:hover svg { transform: rotate(45deg); }
}

.btn-icon:active {
  transform: scale(0.9);
}

/* Универсальная маленькая inline-иконка внутри текстовых кнопок (3.3, замена emoji) */
.icon-inline {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  flex-shrink: 0;
  color: currentColor;
}

.icon-inline.icon-hint {
  color: var(--gold);
  animation: hintGlow 2s ease-in-out infinite;
}

@keyframes hintGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,215,0,0)); }
  50%      { filter: drop-shadow(0 0 3px rgba(255,215,0,0.8)); }
}

.btn-back {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(111, 78, 55, 0.1);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.btn-back:active {
  transform: scale(0.9);
}

/* Кнопка выхода из игры на сайт (в шапке игрового экрана, видна только в браузере) */
.btn-exit svg {
  width: 22px;
  height: 22px;
}

body.orientation-landscape .btn-exit {
  width: 36px;
  height: 36px;
}

body.orientation-landscape .btn-exit svg {
  width: 19px;
  height: 19px;
}

/* Кнопка «Выйти на сайт» в окне паузы (только в браузерной версии) */
.btn-exit-site {
  border: 2px dashed rgba(111, 78, 55, 0.35);
  color: var(--text-light);
}

/* ── Экран выбора уровней ──────────────────────────────── */
.screen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid rgba(111, 78, 55, 0.1);
}

.screen-header h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin: 0;
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  overscroll-behavior: contain;
  flex: 1;
}

.level-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(111, 78, 55, 0.08);
  border-radius: var(--border-radius);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.level-cell:active {
  transform: scale(0.92);
}

.level-cell.locked svg {
  width: 18px;
  height: 18px;
  color: var(--text-light);
  opacity: 0.8;
}

.level-stars svg {
  width: 15px;
  height: 15px;
  margin: 0 0.5px;
  vertical-align: middle;
}

@media (hover: hover) {
  .level-cell:not(.locked):hover {
    transform: scale(1.08);
    box-shadow: var(--shadow);
  }
}

.level-cell.completed {
  background: var(--accent);
  color: #FFF;
}

.level-cell.completed::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
}

.level-stars {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 7px;
  line-height: 1;
  letter-spacing: 1px;
}

.level-cell.locked {
  opacity: 0.4;
  pointer-events: none;
}

.levels-footer {
  flex-shrink: 0;
  padding: 12px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-top: 1px solid rgba(111, 78, 55, 0.1);
}

/* ── Игровой экран ─────────────────────────────────────── */
#game-screen {
  background: var(--gradient-game);
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-primary);
  border-bottom: 1px solid rgba(111, 78, 55, 0.1);
}

.lives {
  display: flex;
  gap: 4px;
}

.life {
  position: relative;
  font-size: 28px;
  transition: all var(--transition-normal);
  color: var(--accent);
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

.life-bean {
  width: 28px;
  height: 28px;
  display: block;
  position: relative;
  z-index: 2;
}

.life-ash {
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 26px;
  height: 16px;
  opacity: 0;
  transform: translateX(-50%) scale(0.4);
  pointer-events: none;
  z-index: 1;
}

/* «Жарка»: пока жизнь активна, зерно слегка греется и над ним поднимается пар — 5.5/3.8 */
@media (prefers-reduced-motion: no-preference) {
  .life:not(.lost)::before,
  .life:not(.lost)::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 37%;
    width: 5px;
    height: 11px;
    background: linear-gradient(to top, rgba(255,255,255,0.55), transparent);
    border-radius: 50%;
    animation: steam 2.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
  }

  .life:not(.lost)::after {
    left: 55%;
    animation-delay: 1.1s;
  }

  .life:not(.lost) .life-bean {
    animation: beanRoastGlow 3.2s ease-in-out infinite;
  }
}

@keyframes beanRoastGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,140,0,0)); }
  50%      { filter: drop-shadow(0 0 3px rgba(255,140,0,0.5)); }
}

/* Момент потери жизни: зерно чернеет, съёживается и «осыпается» пеплом, с рывком дыма */
.life.losing .life-bean {
  animation: beanBurnDown 0.9s ease forwards;
}

.life.losing .life-ash {
  animation: ashAppear 0.9s ease forwards, emberFlicker 2.6s ease-in-out infinite 0.9s;
}

.life.losing::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: radial-gradient(circle, rgba(110,110,110,0.55), transparent 70%);
  border-radius: 50%;
  animation: burnSmokeBurst 0.9s ease forwards;
  pointer-events: none;
  z-index: 4;
}

@keyframes beanBurnDown {
  0%   { filter: brightness(1) saturate(1);     transform: scale(1)    rotate(0deg);  opacity: 1; }
  30%  { filter: brightness(0.3) saturate(0.4); transform: scale(1.05) rotate(-4deg); opacity: 1; }
  55%  { filter: brightness(0.15) saturate(0.2); transform: scale(0.85) rotate(5deg); opacity: 1; }
  100% { filter: brightness(0) saturate(0);     transform: scale(0.3) translateY(6px) rotate(8deg); opacity: 0; }
}

@keyframes ashAppear {
  0%, 45% { opacity: 0; transform: translateX(-50%) scale(0.4); }
  70%     { opacity: 1; transform: translateX(-50%) scale(1.15); }
  100%    { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes burnSmokeBurst {
  0%   { opacity: 0;   transform: scale(0.4) translateY(0); }
  30%  { opacity: 0.8; transform: scale(1.3) translateY(-6px); }
  100% { opacity: 0;   transform: scale(2.2) translateY(-22px); }
}

/* Итоговое состояние потерянной жизни: зерно скрыто, остаётся тлеющий пепел */
.life.lost .life-bean {
  opacity: 0;
}

.life.lost .life-ash {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .life.lost:not(.losing) .life-ash {
    animation: emberFlicker 2.6s ease-in-out infinite;
  }
}

@keyframes emberFlicker {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,90,0,0)); }
  50%      { filter: drop-shadow(0 0 2px rgba(255,90,0,0.4)); }
}

.level-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.bean-counter {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(111, 78, 55, 0.1);
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

#level-number {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

#timer {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}

/* ── Игровое поле ──────────────────────────────────────── */
.game-board-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: visible;
  min-height: 0;
}

.game-board {
  display: grid;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  gap: var(--cell-gap);
  padding: 8px;
  background: rgba(111, 78, 55, 0.05);
  border-radius: var(--border-radius);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  animation: boardBreathe 2s ease-in-out infinite;
}

/* 3.8: едва заметная пульсация тени поля — ощущение «живого» поля */
@keyframes boardBreathe {
  0%, 100% { box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), 0 4px 20px rgba(44,26,14,0.08); }
  50%      { box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), 0 6px 25px rgba(44,26,14,0.14); }
}

/* ── Ячейки ────────────────────────────────────────────── */
.cell {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  font-size: 24px;
  user-select: none;
}

.cell:active {
  transform: scale(0.92);
}

/* Цвета регионов */
.cell[data-region="0"] { background: var(--region-0); }
.cell[data-region="1"] { background: var(--region-1); }
.cell[data-region="2"] { background: var(--region-2); }
.cell[data-region="3"] { background: var(--region-3); }
.cell[data-region="4"] { background: var(--region-4); }
.cell[data-region="5"] { background: var(--region-5); }
.cell[data-region="6"] { background: var(--region-6); }
.cell[data-region="7"] { background: var(--region-7); }
.cell[data-region="8"] { background: var(--region-8); }
.cell[data-region="9"] { background: var(--region-9); }

/* Границы регионов */
.cell.border-right { border-right: 2px solid rgba(62, 39, 35, 0.3); }
.cell.border-bottom { border-bottom: 2px solid rgba(62, 39, 35, 0.3); }
.cell.border-left { border-left: 2px solid rgba(62, 39, 35, 0.3); }
.cell.border-top { border-top: 2px solid rgba(62, 39, 35, 0.3); }

/* Зерно, 3.2: реальная SVG-графика вместо emoji-плейсхолдера */
.cell.has-bean {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
}

.bean-svg {
  width: 68%;
  height: 68%;
  display: block;
  pointer-events: none;
  transform-origin: center center;
  animation: beanPlace 0.35s ease;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

/* Зёрна на поле не статичны: лёгкое «дыхание» и живое покачивание */
@media (prefers-reduced-motion: no-preference) {
  .cell.has-bean:not(.given-bean) .bean-svg {
    animation: beanPlace 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), beanIdleBreathe 4.5s ease-in-out infinite 0.35s;
  }
}

@keyframes beanIdleBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
  50%      { transform: scale(1.04) rotate(1.5deg); filter: drop-shadow(0 3px 6px rgba(111,78,55,0.45)); }
}

/* Вспышка пара в момент правильного размещения зерна — реакция на действие игрока, 3.8 */
.cell.place-puff::before,
.cell.place-puff::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 40%;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, rgba(255,255,255,0.75), transparent 70%);
  border-radius: 50%;
  animation: placePuffRise 0.7s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

.cell.place-puff::after {
  left: 55%;
  animation-delay: 0.08s;
}

@keyframes placePuffRise {
  0%   { opacity: 0.85; transform: translateY(0) scale(1); }
  100% { opacity: 0;    transform: translateY(-20px) scale(2.4); }
}

/* Цвета зёрен по номеру (соответствуют цветам регионов) — фон ячейки, SVG-зерно сверху остаётся тематически коричневым/золотым/подгоревшим независимо от региона */
.cell.has-bean[data-bean="1"] { background: var(--region-0) !important; }
.cell.has-bean[data-bean="2"] { background: var(--region-1) !important; }
.cell.has-bean[data-bean="3"] { background: var(--region-2) !important; }
.cell.has-bean[data-bean="4"] { background: var(--region-3) !important; }
.cell.has-bean[data-bean="5"] { background: var(--region-4) !important; }
.cell.has-bean[data-bean="6"] { background: var(--region-5) !important; }
.cell.has-bean[data-bean="7"] { background: var(--region-6) !important; }
.cell.has-bean[data-bean="8"] { background: var(--region-7) !important; }
.cell.has-bean[data-bean="9"] { background: var(--region-8) !important; }
.cell.has-bean[data-bean="10"] { background: var(--region-9) !important; }

/* Первое зерно-подсказка (ориентир) */
.cell.given-bean {
  background: rgba(111, 78, 55, 0.9) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(111, 78, 55, 0.5);
}

/* Зерно-эталон непрерывно «жарится» — тепловое свечение и лёгкий пар, 3.8 */
@media (prefers-reduced-motion: no-preference) {
  .cell.given-bean .bean-svg {
    animation: beanPlace 0.35s ease, beanRoastGlow 3s ease-in-out infinite 0.35s;
  }

  .cell.given-bean::before,
  .cell.given-bean::after {
    content: '';
    position: absolute;
    top: 4%;
    left: 37%;
    width: 4px;
    height: 9px;
    background: linear-gradient(to top, rgba(255,255,255,0.5), transparent);
    border-radius: 50%;
    animation: steam 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
  }

  .cell.given-bean::after {
    left: 56%;
    animation-delay: 1s;
  }
}

.given-bean-badge {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 2px;
  right: 2px;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.4));
}

@keyframes beanPlace {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  45%  { transform: scale(1.35) rotate(12deg); opacity: 1; filter: drop-shadow(0 6px 12px rgba(111,78,55,0.6)); }
  68%  { transform: scale(0.88) rotate(-6deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
  85%  { transform: scale(1.06) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
}

/* 3.6: последовательность «Золотой дождь» — bounce → glow → spin */
@keyframes beanWinSequence {
  0%   { transform: scale(1) translateY(0) rotate(0deg); filter: drop-shadow(0 0 0 transparent); }
  15%  { transform: scale(1.3) translateY(-12px) rotate(-6deg); filter: drop-shadow(0 8px 16px rgba(255,215,0,0.8)); }
  30%  { transform: scale(0.92) translateY(3px) rotate(4deg); filter: drop-shadow(0 0 12px rgba(255,215,0,0.9)); }
  45%  { transform: scale(1.15) translateY(-4px) rotate(-3deg); filter: drop-shadow(0 0 18px rgba(255,215,0,1)); }
  60%  { transform: scale(1.08) translateY(0) rotate(180deg); filter: drop-shadow(0 0 14px rgba(255,215,0,0.85)); }
  80%  { transform: scale(1.04) translateY(0) rotate(360deg); filter: drop-shadow(0 0 8px rgba(255,215,0,0.6)); }
  100% { transform: scale(1) translateY(0) rotate(360deg); filter: drop-shadow(0 0 4px rgba(255,215,0,0.4)); }
}

.bean-svg.bean-win-anim {
  animation: beanWinSequence 1s ease;
}

/* 3.6: последовательность «Подгоревшие зёрна» — darken → crack → crumble */
@keyframes beanLoseSequence {
  0%   { filter: brightness(1) saturate(1); opacity: 1; transform: translateY(0) rotate(0deg); }
  35%  { filter: brightness(0.4) saturate(0.3); opacity: 1; transform: translateY(0) rotate(0deg); }
  65%  { filter: brightness(0.4) saturate(0.3); opacity: 0.85; transform: translateY(4px) rotate(4deg); }
  100% { filter: brightness(0.3) saturate(0.15); opacity: 0.45; transform: translateY(10px) rotate(-4deg); }
}

.bean-svg.bean-lose-anim {
  animation: beanLoseSequence 0.9s ease forwards;
}

/* Трещины поверх подгоревшего зерна — переиспользует паттерн closed-ячейки, 3.6 */
.cell.lose-crack::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 45%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.35) 46%, transparent 46%),
    linear-gradient(-30deg, transparent 40%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.3) 41%, transparent 41%),
    linear-gradient(120deg, transparent 55%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.25) 56%, transparent 56%);
  animation: crackAppear 0.3s ease forwards;
  pointer-events: none;
}

/* 3.8: hover-эффекты — только на устройствах с реальным hover (не залипает на тач-экранах) */
@media (hover: hover) {
  .cell.has-bean:hover .bean-svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.35));
  }

  .cell:not(.has-bean):not(.closed):hover {
    box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.6);
  }
}

/* 3.8: волна подсветки соседних ячеек при правильном размещении зерна */
.cell.cell-wave {
  animation: cellWave 0.3s ease-out;
}

@keyframes cellWave {
  0%   { box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.55); }
  100% { box-shadow: inset 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* ── Закрытая ячейка (потрескавшийся эффект) ───────────── */
.cell.closed {
  opacity: 0.4;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.cell.closed::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Трещины — тонкие линии от центра */
    linear-gradient(45deg, transparent 45%, rgba(62,39,35,0.3) 45%, rgba(62,39,35,0.3) 46%, transparent 46%),
    linear-gradient(-30deg, transparent 40%, rgba(62,39,35,0.25) 40%, rgba(62,39,35,0.25) 41%, transparent 41%),
    linear-gradient(120deg, transparent 55%, rgba(62,39,35,0.2) 55%, rgba(62,39,35,0.2) 56%, transparent 56%),
    linear-gradient(-70deg, transparent 35%, rgba(62,39,35,0.15) 35%, rgba(62,39,35,0.15) 36%, transparent 36%),
    linear-gradient(80deg, transparent 50%, rgba(62,39,35,0.2) 50%, rgba(62,39,35,0.2) 51%, transparent 51%),
    linear-gradient(-15deg, transparent 60%, rgba(62,39,35,0.18) 60%, rgba(62,39,35,0.18) 61%, transparent 61%);
  animation: crackAppear 0.3s ease forwards;
  pointer-events: none;
}

@keyframes crackAppear {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.7; }
  100% { opacity: 1; transform: scale(1); }
}

/* Дополнительный эффект — затемнение при закрытии */
.cell.closed {
  filter: saturate(0.5) brightness(0.85);
}

/* ── Игровые контролы ──────────────────────────────────── */
.game-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px 20px;
}

.btn-control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  background: rgba(111, 78, 55, 0.1);
  border-radius: var(--btn-radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-control:active {
  transform: scale(0.95);
  background: rgba(111, 78, 55, 0.2);
}

.btn-control:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Кнопка подсказки за рекламу (единственная) */
#btn-hint {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
  border: 1.5px solid rgba(255, 215, 0, 0.4);
  color: #B8860B;
}

#btn-hint:active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.2));
}

#btn-hint .ad-hint-count {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 2px;
}

/* Кнопка "+1 жизнь за рекламу» на игровом экране */
.btn-ad-life {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08));
  border: 1.5px solid rgba(76, 175, 80, 0.4);
  color: #2E7D32;
  animation: adLifePulse 2s ease-in-out infinite;
}

.btn-ad-life:active {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.25), rgba(76, 175, 80, 0.15));
}

@keyframes adLifePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
}

/* Таймер обратного отсчёта на кнопке "+1 жизнь за рекламу" */
#ad-life-timer {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: rgba(229, 57, 53, 0.9);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ── Экраны результатов ────────────────────────────────── */
.result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px 20px;
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  text-align: center;
}

#win-screen .result-content {
  background: var(--gradient-win);
  position: relative;
  overflow: hidden;
}

#win-screen .result-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  animation: winGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes winGlow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

#win-screen .result-content h2 {
  background: linear-gradient(135deg, #6F4E37 0%, #8B6F47 50%, #A67B5B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 8px rgba(111, 78, 55, 0.2);
  font-size: 28px;
  font-weight: 700;
}

#win-screen .result-stats {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 4px 16px rgba(111, 78, 55, 0.15);
}

#win-screen .stat-value {
  color: #6F4E37;
  text-shadow: 0 1px 2px rgba(255, 215, 0, 0.3);
}

#lose-screen .result-content {
  background: var(--gradient-lose);
  justify-content: flex-start;
  padding-top: 40px;
  position: relative;
  overflow: hidden;
}

#lose-screen .result-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(139, 111, 71, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 111, 71, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

#lose-screen .result-content h2 {
  color: #4A3728;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#lose-screen .encouragement-card {
  background: rgba(255, 248, 240, 0.9);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(139, 111, 71, 0.2);
  box-shadow: 0 4px 12px rgba(74, 55, 40, 0.15);
}

#lose-screen .result-icon {
  margin-bottom: 16px;
}

.result-icon {
  margin-bottom: 12px;
  animation: resultBounce 0.6s ease;
  position: relative;
}

.result-icon svg {
  width: 108px;
  height: 108px;
}

/* Кубок победы — лучи медленно вращаются, добавляя ощущение «живого» праздника */
.result-icon-win .trophy-rays {
  transform-origin: 32px 32px;
  animation: trophyRaysSpin 8s linear infinite;
}

@keyframes trophyRaysSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Треснувшее зерно поражения: дрожит (трещины «оседают»), затем чернеет,
   съёживается и сгорает дотла, оставляя кучку пепла с угольками */
.result-icon-lose {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 84px;
}

.result-icon-lose .lose-bean {
  position: absolute;
  bottom: 0;
  animation: loseBeanFullSequence 2s ease forwards;
}

.result-icon-lose .lose-ash {
  width: 84px;
  height: 44px;
  position: absolute;
  bottom: -4px;
  opacity: 0;
  transform: scale(0.4);
  animation: loseAshAppear 2s ease forwards;
}

@keyframes loseBeanFullSequence {
  0%   { transform: translateX(0)   rotate(0deg)    scale(1);    filter: brightness(1) saturate(1);       opacity: 1; }
  8%   { transform: translateX(-3px) rotate(-2deg)  scale(1); }
  16%  { transform: translateX(3px)  rotate(1.5deg) scale(1); }
  24%  { transform: translateX(-1.5px) rotate(-0.5deg) scale(1); }
  32%  { transform: translateX(0)   rotate(0deg)    scale(1);    filter: brightness(1) saturate(1);       opacity: 1; }
  55%  { transform: scale(0.95) rotate(-3deg);                   filter: brightness(0.35) saturate(0.3);  opacity: 1; }
  80%  { transform: scale(0.55) translateY(8px) rotate(4deg);    filter: brightness(0.1) saturate(0.1);   opacity: 0.6; }
  100% { transform: scale(0.3) translateY(14px) rotate(7deg);    filter: brightness(0) saturate(0);       opacity: 0; }
}

@keyframes loseAshAppear {
  0%, 45% { opacity: 0; transform: scale(0.4); }
  70%     { opacity: 1; transform: scale(1.15); }
  100%    { opacity: 1; transform: scale(1); }
}

/* Тлеющий пепел на экране поражения: лёгкий дымок продолжает подниматься */
@media (prefers-reduced-motion: no-preference) {
  .result-icon-lose::before,
  .result-icon-lose::after {
    content: '';
    position: absolute;
    bottom: 32px;
    left: 43%;
    width: 6px;
    height: 16px;
    background: linear-gradient(to top, rgba(110,110,110,0.5), transparent);
    border-radius: 50%;
    opacity: 0;
    animation: steam 2.6s ease-in-out infinite 2.1s;
    pointer-events: none;
  }

  .result-icon-lose::after {
    left: 55%;
    animation-delay: 2.8s;
  }
}

/* Конфетти при победе, 5.4 / 3.5: теперь SVG-частицы 4 форм (круг/звезда/зерно/квадрат) вместо простых div */
.confetti {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: confettiFall 2s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

.confetti-svg {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  animation: confettiFall 2s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(500px) rotate(720deg); opacity: 0; }
}

@keyframes resultBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.result-content h2 {
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--text-primary);
}

#lose-screen .result-content h2 {
  margin: 0 0 8px;
}

#lose-screen .result-message {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-secondary);
}

.result-stats {
  display: flex;
  gap: 24px;
  margin: 16px 0;
  padding: 12px 20px;
  background: rgba(111, 78, 55, 0.08);
  border-radius: var(--btn-radius);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

/* Звёзды за уровень на экране победы */
.stars-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.win-star {
  display: inline-flex;
  opacity: 0.25;
  filter: grayscale(1);
  transform: scale(0);
}

.win-star svg {
  width: 28px;
  height: 28px;
}

.win-star.earned {
  animation: starPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.win-star.earned:nth-child(1) { animation-delay: 0.1s; }
.win-star.earned:nth-child(2) { animation-delay: 0.3s; }
.win-star.earned:nth-child(3) { animation-delay: 0.5s; }

@keyframes starPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0.25; filter: grayscale(1); }
  60%  { transform: scale(1.3) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; filter: grayscale(0); }
}

.result-message {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

.encouragement-card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 14px 20px;
  margin: 0 0 16px;
  box-shadow: var(--shadow);
  max-width: 280px;
  width: 100%;
  text-align: center;
}

.encouragement-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.4;
}

.encouragement-card p:first-child {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 15px;
}

.result-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
  margin-top: 16px;
}

.result-buttons .btn {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding: 0 16px;
  min-height: 48px;
  height: auto;
  line-height: 1.3;
}

/* ── Адаптация для маленьких экранов (портретный режим) ── */
@media (max-height: 700px) {
  .result-content {
    padding: 20px 24px;
  }
  
  .result-icon {
    font-size: 56px;
    margin-bottom: 12px;
  }
  
  .result-content h2 {
    font-size: 20px;
    margin-bottom: 6px;
  }
  
  .stars-row {
    margin-bottom: 12px;
  }
  
  .win-star {
    font-size: 28px;
  }
  
  .result-message {
    margin-bottom: 16px;
  }
  
  .encouragement-card {
    margin-bottom: 16px;
  }
  
  .result-stats {
    margin: 16px 0;
    padding: 12px 20px;
  }
  
  .stat-value {
    font-size: 20px;
  }
  
  .result-buttons {
    margin-top: 12px;
  }
}

/* ── Настройки ─────────────────────────────────────────── */
.settings-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.settings-divider {
  height: 1px;
  background: rgba(111, 78, 55, 0.15);
  margin: 4px 0;
}

.btn-danger {
  background: transparent;
  color: var(--error);
  border: 1px solid var(--error);
}

.btn-danger:active {
  background: rgba(229, 57, 53, 0.1);
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: rgba(111, 78, 55, 0.05);
  border-radius: var(--border-radius);
  font-size: 16px;
  font-weight: 500;
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(111, 78, 55, 0.2);
  border-radius: 28px;
  transition: var(--transition-fast);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle input:checked + .toggle-slider {
  background: var(--accent);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Ползунки громкости, 10.3 */
.setting-item-volume {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.volume-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.volume-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(111, 78, 55, 0.2);
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: var(--transition-fast);
}

.volume-slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
  background: var(--accent-dark);
}

.volume-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: var(--transition-fast);
}

.volume-slider::-moz-range-thumb:active {
  transform: scale(1.15);
  background: var(--accent-dark);
}

.volume-slider::-moz-range-progress {
  background: var(--accent);
  height: 6px;
  border-radius: 3px;
}

/* ── Лидерборд ─────────────────────────────────────────── */
.leaderboard-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 16px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(111, 78, 55, 0.05);
  border-radius: var(--border-radius);
  margin-bottom: 8px;
}

.leaderboard-rank {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  min-width: 32px;
  text-align: center;
}

.leaderboard-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-score {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.leaderboard-placeholder {
  text-align: center;
  color: var(--text-light);
  padding: 40px;
  font-size: 14px;
}

/* ── Модальные окна ────────────────────────────────────── */
.modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(62, 39, 35, 0.6);
  z-index: 100;
}

.modal.active {
  display: flex;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  max-width: min(90%, 300px);
  width: 100%;
  animation: modalIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.modal-content h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.modal-content p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  text-align: center;
}

.modal-content .btn {
  width: 100%;
}

/* ── Shake анимация для ошибки, 5.2 ────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-8px) rotate(-2deg); }
  30%      { transform: translateX(7px) rotate(1.5deg); }
  45%      { transform: translateX(-6px) rotate(-1deg); }
  60%      { transform: translateX(5px) rotate(0.5deg); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(2px); }
}

.cell.shake {
  animation: shake 0.45s ease-in-out;
}

/* ── Pulse анимация для подсказки, 5.2 (золотое свечение) ─ */
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 215, 0, 0); }
}

.cell.hint {
  animation: hintPulse 0.5s ease 2;
}

/* ── Ландшафтная ориентация ────────────────────────────── */
body.orientation-landscape .game-header {
  padding: 8px 16px;
}

body.orientation-landscape .game-board-container {
  padding: 8px;
}

body.orientation-landscape .game-controls {
  padding: 8px 16px 12px;
}

body.orientation-landscape .menu-content {
  flex-direction: row;
  gap: 24px;
  padding: 16px 24px;
}

body.orientation-landscape .logo {
  margin-bottom: 0;
}

body.orientation-landscape .logo-icon {
  font-size: 48px;
}

body.orientation-landscape .logo h1 {
  font-size: 32px;
}

body.orientation-landscape .subtitle {
  font-size: 12px;
}

body.orientation-landscape .menu-buttons {
  max-width: 220px;
  gap: 8px;
}

body.orientation-landscape .btn {
  height: 40px;
  font-size: 14px;
  padding: 0 16px;
}

body.orientation-landscape .result-content {
  flex-direction: row;
  gap: 32px;
  padding: 20px 40px;
}


/* ── Адаптивность для маленьких экранов ────────────────── */
@media (max-height: 550px) {
  .game-board-container {
    padding: 8px;
  }
}

@media (max-width: 350px) {
  .game-board-container {
    padding: 8px;
  }
}

/* ── Breakpoints для CSS-переменных (раздел 6.3) ────────── */

/* Маленькие телефоны (320–360px) */
@media (max-width: 360px) {
  :root {
    --cell-size: 40px;
    --btn-height: 40px;
    --font-size: 14px;
  }
}

/* Средние телефоны (361–480px) */
@media (min-width: 361px) and (max-width: 480px) {
  :root {
    --cell-size: 48px;
    --btn-height: 44px;
    --font-size: 15px;
  }
}

/* Большие телефоны / маленькие планшеты (481–768px) */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --cell-size: 52px;
    --btn-height: 48px;
    --font-size: 16px;
  }
}

/* ── Ландшафтный layout для экранов результатов ───── */

/* Двухколоночный layout для ландшафта — экран победы */
body.orientation-landscape #win-screen .result-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 24px 48px;
  padding: 32px 48px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

body.orientation-landscape #win-screen .result-content::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 80%;
  background: linear-gradient(to bottom, transparent, rgba(255, 215, 0, 0.4), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Левая колонка: иконка + заголовок + звёзды */
body.orientation-landscape #win-screen .result-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

body.orientation-landscape #win-screen .result-icon::before {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  animation: landscapeWinGlow 3s ease-in-out infinite;
  z-index: 0;
}

body.orientation-landscape #win-screen .result-icon svg {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
}

@keyframes landscapeWinGlow {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0.9; }
}

body.orientation-landscape #win-screen .result-content h2 {
  grid-column: 1;
  grid-row: 3;
  font-size: 32px;
  margin: 0;
  text-align: center;
  width: 100%;
  background: linear-gradient(135deg, #6F4E37 0%, #8B6F47 50%, #A67B5B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

body.orientation-landscape .stars-row {
  grid-column: 1;
  grid-row: 4;
  margin: 0;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

body.orientation-landscape .win-star {
  font-size: 32px;
}

body.orientation-landscape .win-star svg {
  width: 36px;
  height: 36px;
}

/* Правая колонка: статистика + кнопки */
body.orientation-landscape .result-stats {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  padding: 24px 32px;
  gap: 32px;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(111, 78, 55, 0.2);
  position: relative;
  z-index: 2;
}

body.orientation-landscape .stat {
  gap: 8px;
}

body.orientation-landscape .stat-value {
  font-size: 28px;
  color: #6F4E37;
  text-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

body.orientation-landscape .stat-label {
  font-size: 15px;
  color: #8D6E63;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

body.orientation-landscape #win-screen .result-buttons {
  grid-column: 2;
  grid-row: 3 / span 2;
  flex-direction: column;
  max-width: none;
  margin-top: 0;
  gap: 16px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  position: relative;
  z-index: 2;
}

body.orientation-landscape #win-screen .result-buttons .btn {
  max-width: 280px;
  width: 100%;
  height: 52px;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(111, 78, 55, 0.2);
  transition: all 0.3s var(--ease-premium);
}

body.orientation-landscape #win-screen .result-buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(111, 78, 55, 0.3);
}

/* ── Ландшафтный layout для экрана поражения ───── */
/* Новый дизайн: центральная композиция с пеплом и карточкой */
body.orientation-landscape #lose-screen .result-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-rows: auto auto auto;
  gap: 20px 40px;
  padding: 24px 40px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

/* Декоративная дымка на фоне */
body.orientation-landscape #lose-screen .result-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 25% 50%, rgba(74, 55, 40, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 50%, rgba(139, 111, 71, 0.06) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 12px;
}

/* Левая колонка: иконка + заголовок + сообщение */
body.orientation-landscape #lose-screen .result-icon {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 120px;
  height: 120px;
}

body.orientation-landscape #lose-screen .result-icon::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(74, 55, 40, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

body.orientation-landscape #lose-screen .result-icon svg {
  position: relative;
  z-index: 1;
}

body.orientation-landscape #lose-screen .result-icon .lose-bean {
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

body.orientation-landscape #lose-screen .result-icon .lose-ash {
  width: 100px;
  height: 52px;
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
}

/* Заголовок «Зёрна подгорели!» */
body.orientation-landscape #lose-screen .result-content h2 {
  grid-column: 1;
  grid-row: 2;
  font-size: 26px;
  margin: 0;
  text-align: center;
  width: 100%;
  color: #3E2723;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.3);
  font-weight: 700;
}

/* Подзаголовок «Вы потеряли все жизни» */
body.orientation-landscape #lose-screen .result-message {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
  font-size: 14px;
  text-align: center;
  color: #4A3728;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* Правая колонка: мотивационная карточка */
body.orientation-landscape #lose-screen .encouragement-card {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  text-align: center;
  max-width: 340px;
  width: 100%;
  justify-self: center;
  background: rgba(255, 248, 240, 0.95);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(139, 111, 71, 0.25);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 6px 20px rgba(74, 55, 40, 0.15);
}

body.orientation-landscape #lose-screen .encouragement-card p:first-child {
  font-size: 17px;
  color: #6F4E37;
}

/* Кнопки: «Попробовать снова», «+1 жизнь», «В меню» */
body.orientation-landscape #lose-screen .result-buttons {
  grid-column: 2;
  grid-row: 2 / span 2;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: none;
  margin-top: 0;
  gap: 12px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

body.orientation-landscape #lose-screen .result-buttons .btn {
  max-width: 220px;
  min-width: 160px;
  flex: 1;
  height: 48px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(74, 55, 40, 0.15);
  transition: all 0.3s var(--ease-premium);
}

body.orientation-landscape #lose-screen .result-buttons .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(74, 55, 40, 0.25);
}


/* ── Ландшафтный layout для настроек ───── */
body.orientation-landscape #settings-screen .settings-content {
  overflow-y: auto;
  padding: 10px 20px;
  gap: 8px;
}

body.orientation-landscape .setting-item {
  padding: 8px 14px;
  font-size: 14px;
}

body.orientation-landscape .settings-divider {
  margin: 2px 0;
}

body.orientation-landscape #btn-reset-progress {
  padding: 10px 16px;
  font-size: 14px;
}

body.orientation-landscape #settings-screen .screen-header {
  padding: 8px 12px;
}

body.orientation-landscape #settings-screen .screen-header h2 {
  font-size: 18px;
}

body.orientation-landscape #settings-screen .btn-back {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

/* ── Ландшафтный layout для game-screen (раздел 6.2) ───── */
body.orientation-landscape #game-screen {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "board controls";
}

body.orientation-landscape .game-header {
  grid-area: header;
}

body.orientation-landscape .game-board-container {
  grid-area: board;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

body.orientation-landscape .game-controls {
  grid-area: controls;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}

body.orientation-landscape .btn-control {
  width: 100%;
  max-width: 160px;
  justify-content: center;
}

/* Адаптивная типографика с clamp() (раздел 6.3) */
.logo h1 {
  font-size: clamp(32px, 8vw, 42px);
}

.subtitle {
  font-size: clamp(12px, 3vw, 14px);
}

.screen-header h2 {
  font-size: clamp(18px, 5vw, 22px);
}

.result-content h2 {
  font-size: clamp(20px, 5vw, 24px);
}

.modal-content h3 {
  font-size: clamp(18px, 4.5vw, 20px);
}

.btn {
  font-size: clamp(14px, 3.5vw, 16px);
}


/* ═══════════════════════════════════════════════════════════
   Факты о кофе (раздел 8)
   ═══════════════════════════════════════════════════════════ */

/* Модальное окно факта */
.fact-modal-content {
  max-width: min(92%, 320px);
  text-align: center;
}

.fact-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.fact-modal-icon {
  font-size: 32px;
  display: inline-flex;
}

.fact-modal-icon svg {
  width: 32px;
  height: 32px;
}

.fact-modal-category {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fact-modal-category svg {
  width: 14px;
  height: 14px;
}

.fact-modal-title {
  font-family: var(--font-fact);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 8px !important;
}

.fact-modal-text {
  font-family: var(--font-fact);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 16px !important;
  max-width: 280px;
}

.fact-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Экран коллекции фактов */
.facts-counter {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-mono);
}

.facts-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid rgba(111, 78, 55, 0.1);
  overflow-x: auto;
  overscroll-behavior: contain;
  flex-shrink: 0;
}

.facts-tab {
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.facts-tab svg {
  width: 19px;
  height: 19px;
}

.facts-tab.active {
  background: var(--accent);
  color: var(--text-inverse);
}

.facts-tab:active {
  transform: scale(0.95);
}

.facts-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fact-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all var(--transition-fast);
  animation: factReveal 0.4s ease-out;
}

@keyframes factReveal {
  0%   { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.fact-card:active {
  transform: scale(0.98);
}

.fact-card-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.fact-card-content {
  flex: 1;
  min-width: 0;
}

.fact-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.fact-card-text {
  font-family: var(--font-fact);
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-secondary);
}

.fact-card.locked {
  opacity: 0.5;
  background: rgba(111, 78, 55, 0.05);
}

.fact-card.locked .fact-card-title {
  color: var(--text-light);
}

.fact-card.locked .fact-card-text {
  color: var(--text-light);
  font-style: normal;
}

.fact-card-status {
  flex-shrink: 0;
  font-size: 16px;
  display: inline-flex;
}

.fact-card-status svg {
  width: 18px;
  height: 18px;
}

.facts-footer {
  flex-shrink: 0;
  padding: 12px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-top: 1px solid rgba(111, 78, 55, 0.1);
}

.facts-progress-bar {
  height: 6px;
  background: rgba(111, 78, 55, 0.15);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.facts-progress-fill {
  height: 100%;
  background: var(--gradient-gold);
  border-radius: 3px;
  transition: width 0.3s ease;
}


/* ═══════════════════════════════════════════════════════════
   Достижения (раздел 7)
   ═══════════════════════════════════════════════════════════ */

/* Счетчики достижений */
.achievements-counter {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-mono);
}

/* Статистика монет и медалей */
.achievements-stats {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid rgba(111, 78, 55, 0.1);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  flex: 1;
  justify-content: center;
}

.stat-icon {
  font-size: 24px;
  display: inline-flex;
}

.stat-icon svg {
  width: 24px;
  height: 24px;
}

/* Блик на монете-зерне, «живая» валюта вместо статичного emoji, 3.3 */
.coin-shine {
  animation: coinShine 2.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes coinShine {
  0%, 100% { opacity: 0.75; transform: translate(0, 0) scale(1); }
  50%      { opacity: 0.25; transform: translate(1.5px, 1px) scale(0.85); }
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}

/* Табы категорий достижений */
.achievements-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid rgba(111, 78, 55, 0.1);
  overflow-x: auto;
  overscroll-behavior: contain;
  flex-shrink: 0;
}

.achievements-tab {
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.achievements-tab svg {
  width: 19px;
  height: 19px;
}

.achievements-tab.active {
  background: var(--accent);
  color: var(--text-inverse);
}

.achievements-tab:active {
  transform: scale(0.95);
}

/* Список достижений */
.achievements-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Карточка достижения */
.achievement-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  transition: all var(--transition-fast);
  animation: achievementReveal 0.4s ease-out;
}

@keyframes achievementReveal {
  0%   { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.achievement-card:active {
  transform: scale(0.98);
}

.achievement-card.unlocked {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 215, 0, 0.1) 100%);
  border: 2px solid var(--gold);
}

.achievement-card.locked {
  opacity: 0.5;
  background: rgba(111, 78, 55, 0.05);
}

.achievement-icon {
  font-size: 32px;
  flex-shrink: 0;
  display: inline-flex;
}

.achievement-icon svg {
  width: 26px;
  height: 26px;
  color: var(--text-light);
}

.achievement-card.locked .achievement-icon {
  filter: grayscale(1);
}

.achievement-info {
  flex: 1;
  min-width: 0;
}

.achievement-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.achievement-card.locked .achievement-title {
  color: var(--text-light);
}

.achievement-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.achievement-card.locked .achievement-desc {
  color: var(--text-light);
}

.achievement-reward {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  background: var(--gold);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}

.achievement-reward svg,
.toast-reward svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.achievement-card.locked .achievement-reward {
  background: rgba(111, 78, 55, 0.2);
  color: var(--text-light);
}

.achievement-status {
  flex-shrink: 0;
  font-size: 20px;
  display: inline-flex;
}

.achievement-status svg {
  width: 20px;
  height: 20px;
  animation: statusPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes statusPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Toast-уведомление о достижении */
.achievement-toast {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold) 0%, #FFA500 100%);
  border-radius: 16px;
  padding: 16px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  transition: top 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease, visibility 0.3s ease;
  max-width: 90%;
  opacity: 0;
  visibility: hidden;
}

.achievement-toast.show {
  top: 20px;
  opacity: 1;
  visibility: visible;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toast-icon {
  font-size: 48px;
  animation: toastBounce 0.6s ease-out;
  display: inline-flex;
}

.toast-icon svg {
  width: 40px;
  height: 40px;
}


/* ═══════════════════════════════════════════════════════════
   Ежедневные испытания (раздел 4.8)
   ═══════════════════════════════════════════════════════════ */

.daily-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--gradient-game);
}

.daily-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.daily-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.daily-date {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.daily-card {
  width: 100%;
  max-width: 280px;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--gold);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  animation: dailyCardReveal 0.4s ease-out;
}

@keyframes dailyCardReveal {
  0%   { transform: translateY(16px) scale(0.97); opacity: 0; }
  100% { transform: translateY(0) scale(1);        opacity: 1; }
}

.daily-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.daily-difficulty {
  display: flex;
  gap: 2px;
}

.daily-difficulty svg {
  width: 18px;
  height: 18px;
}

.daily-prize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dark);
  background: rgba(255, 215, 0, 0.15);
  padding: 4px 12px;
  border-radius: 12px;
}

.daily-prize svg {
  width: 16px;
  height: 16px;
}

.daily-play-btn {
  width: 100%;
  max-width: 280px;
}

.daily-play-btn:disabled {
  opacity: 0.6;
  cursor: default;
  background: rgba(111, 78, 55, 0.2);
  color: var(--text-secondary);
  box-shadow: none;
  animation: none;
}

.daily-play-btn:disabled:active {
  transform: none;
}

@media (hover: hover) {
  .daily-play-btn:disabled:hover {
    transform: none;
    box-shadow: none;
    background: rgba(111, 78, 55, 0.2);
  }
}

.daily-streak {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  min-height: 18px;
}

.daily-history-divider {
  width: 100%;
  max-width: 280px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  margin-top: 2px;
}

.daily-history-divider::before,
.daily-history-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: rgba(111, 78, 55, 0.15);
}

.daily-history-divider::before { left: 0; }
.daily-history-divider::after  { right: 0; }

.daily-history {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 300px;
}

.daily-history-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--border-radius);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  min-width: 42px;
  transition: all var(--transition-fast);
}

.daily-history-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.daily-history-icon {
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily-history-icon svg {
  width: 14px;
  height: 14px;
}

.daily-history-item.completed {
  border: 2px solid var(--success);
}

.daily-history-item.missed {
  opacity: 0.5;
}

.daily-history-item.today {
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(255, 215, 0, 0.15);
}

.daily-history-item.today.completed {
  border-color: var(--success);
}

.toast-info {
  flex: 1;
}

.toast-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.toast-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-inverse);
  margin-bottom: 4px;
}

.toast-reward {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-inverse);
}

@keyframes toastBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* ─── Загадка дня на экране «Событие Дня» ─── */
.daily-riddle {
  width: 100%;
  max-width: 280px;
  background: linear-gradient(135deg, rgba(111, 78, 55, 0.08), rgba(111, 78, 55, 0.04));
  border: 1.5px dashed rgba(111, 78, 55, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  animation: dailyCardReveal 0.4s ease-out;
}

.daily-riddle-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.daily-riddle-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
}

.daily-riddle-hint {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

/* ─── Кнопка "Посмотреть ответ" на экране победы ─── */
#btn-view-riddle-answer {
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 14px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.08));
}

.daily-riddle-answer-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.daily-riddle-answer-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

/* Ландшафтная ориентация для ежедневного экрана */
body.orientation-landscape #daily-screen .screen-header {
  padding: 8px 12px;
}

body.orientation-landscape #daily-screen .screen-header h2 {
  font-size: 18px;
}

/* Ландшафт: двухколоночный layout */
body.orientation-landscape .daily-content {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 12px 16px;
  overflow-y: auto;
}

/* Левая колонка: date, card, button, streak */
body.orientation-landscape .daily-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  width: 240px;
}

/* Правая колонка: riddle, history */
body.orientation-landscape .daily-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 1 1 auto;
  max-width: 280px;
  overflow-y: auto;
}

body.orientation-landscape .daily-date {
  font-size: 13px;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

body.orientation-landscape .daily-card {
  max-width: 220px;
  padding: 12px;
  gap: 8px;
}

body.orientation-landscape .daily-card-title {
  font-size: 14px;
}

body.orientation-landscape .daily-difficulty svg {
  width: 18px;
  height: 18px;
}

body.orientation-landscape .daily-prize {
  font-size: 13px;
  padding: 4px 12px;
}

body.orientation-landscape .daily-play-btn {
  max-width: 180px;
  height: 40px;
  font-size: 14px;
}

body.orientation-landscape .daily-streak {
  margin: 0;
  font-size: 12px;
}

body.orientation-landscape .daily-riddle {
  max-width: 260px;
  padding: 12px 14px;
}

body.orientation-landscape .daily-riddle-title {
  font-size: 12px;
  margin-bottom: 8px;
}

body.orientation-landscape .daily-riddle-text {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 6px;
}

body.orientation-landscape .daily-riddle-hint {
  font-size: 11px;
}

body.orientation-landscape .daily-riddle-answer {
  margin-top: 10px;
  padding-top: 10px;
}

body.orientation-landscape .daily-riddle-answer-label {
  font-size: 11px;
}

body.orientation-landscape .daily-riddle-answer-text {
  font-size: 14px;
}

body.orientation-landscape .daily-history-divider {
  margin-top: 0;
  font-size: 11px;
  max-width: 200px;
}

body.orientation-landscape .daily-history {
  max-width: 100%;
  gap: 8px;
}

body.orientation-landscape .daily-history-item {
  padding: 6px 8px;
  min-width: 42px;
}

body.orientation-landscape .daily-history-label {
  font-size: 10px;
}

body.orientation-landscape .daily-history-icon svg {
  width: 14px;
  height: 14px;
}

/* Ландшафтная ориентация для достижений */
body.orientation-landscape #achievements-screen .achievements-stats {
  padding: 8px 16px;
  gap: 12px;
}

body.orientation-landscape .stat-item {
  padding: 6px 12px;
}

body.orientation-landscape .stat-icon {
  font-size: 20px;
}

body.orientation-landscape .stat-value {
  font-size: 16px;
}

body.orientation-landscape .achievements-tabs {
  padding: 6px 12px;
}

body.orientation-landscape .achievements-tab {
  padding: 4px 10px;
  font-size: 12px;
}

body.orientation-landscape .achievements-list {
  padding: 8px;
  gap: 6px;
}

body.orientation-landscape .achievement-card {
  padding: 10px 12px;
  gap: 10px;
}

body.orientation-landscape .achievement-icon {
  font-size: 28px;
}

body.orientation-landscape .achievement-title {
  font-size: 14px;
}

body.orientation-landscape .achievement-desc {
  font-size: 12px;
}

body.orientation-landscape .achievement-reward {
  font-size: 11px;
  padding: 3px 6px;
}


/* ── Пульсация окантовки ячейки-подсказки (givenBean) ────── */
@keyframes given-cell-border-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.5), 0 0 4px rgba(255, 215, 0, 0.2);
  }
  50% {
    box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 1.0), 0 0 10px rgba(255, 215, 0, 0.6);
  }
}

.cell.given-bean-cell {
  animation: given-cell-border-pulse 1.5s ease-in-out infinite;
  border: 2px solid var(--gold) !important;
  border-radius: 6px;
}

/* ── Золотое зерно-пасхалка ──────────────────────────────── */
.golden-bean {
  position: relative;
  animation: golden-glow 2s ease-in-out infinite;
}

@keyframes golden-glow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1));
  }
}

.golden-bean-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  fill: var(--gold);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  animation: badge-spin 3s linear infinite;
}

@keyframes badge-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* ═══════════════════════════════════════════════════════════
   ОБУЧАЮЩИЙ ТУТОРИАЛ (раздел 2.15)
   ═══════════════════════════════════════════════════════════ */

/* Модальное окно туториала */
.tutorial-modal .modal-content {
  max-width: 400px;
  padding: 24px;
  background: linear-gradient(135deg, #FFF8F0 0%, #F5E6D3 100%);
  border: 3px solid #6F4E37;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(111, 78, 55, 0.4);
}

.tutorial-header {
  text-align: center;
  margin-bottom: 16px;
}

.tutorial-step-indicator {
  display: inline-block;
  padding: 6px 16px;
  background: #6F4E37;
  color: #FFF8F0;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.tutorial-title {
  font-size: 22px;
  font-weight: 700;
  color: #6F4E37;
  text-align: center;
  margin: 0 0 16px 0;
}

.tutorial-text {
  font-size: 16px;
  line-height: 1.5;
  color: #4A2C18;
  text-align: center;
  margin: 0 0 24px 0;
}

.tutorial-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.tutorial-buttons .btn {
  min-width: 120px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tutorial-buttons .btn-secondary {
  background: transparent;
  border: 2px solid #A67B5B;
  color: #6F4E37;
}

.tutorial-buttons .btn-secondary:hover {
  background: rgba(166, 123, 91, 0.1);
}

.tutorial-buttons .btn-primary {
  background: linear-gradient(135deg, #6F4E37 0%, #8B5E4A 100%);
  border: none;
  color: #FFF8F0;
  box-shadow: 0 4px 12px rgba(111, 78, 55, 0.3);
}

.tutorial-buttons .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(111, 78, 55, 0.4);
}

/* Подсветка элемента во время туториала */
.tutorial-highlight {
  animation: tutorial-pulse 1.5s ease-in-out infinite;
  position: relative;
  z-index: 100;
}

@keyframes tutorial-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 215, 0, 0);
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 480px) {
  .tutorial-modal .modal-content {
    max-width: 90%;
    padding: 20px;
  }

  .tutorial-title {
    font-size: 20px;
  }

  .tutorial-text {
    font-size: 15px;
  }

  .tutorial-buttons {
    flex-direction: column;
  }

  .tutorial-buttons .btn {
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════
   РЕТЕНШН-МОДАЛКА (ярлык на рабочий стол / оценка игры)
   Показывается после побед — повышает возвраты и рейтинг игры,
   что напрямую снижает CPC при рекламной кампании.
   ═══════════════════════════════════════════════════════════ */
.retention-modal-content {
  text-align: center;
  max-width: 340px;
  padding: 28px 24px 22px;
}

.retention-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.retention-beans {
  width: 88px;
  height: 77px;
}

.retention-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark, #3E2723);
  margin: 0 0 10px;
}

.retention-text {
  font-size: 0.95rem;
  color: var(--text-light, #795548);
  line-height: 1.5;
  margin: 0 0 18px;
}

.retention-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.retention-buttons .btn {
  width: 100%;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   ЭКРАН ПРЕДВАРИТЕЛЬНОЙ ЗАГРУЗКИ
   Полноэкранный оверлей в кофейной теме. Виден до полной готовности
   ресурсов (аудио + облачные данные), затем плавно убирается из game.js.
   ═══════════════════════════════════════════════════════════ */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    var(--texture-coffee),
    var(--gradient-menu);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* После анимации элемент полностью убирается из потока,
   чтобы не перехватывал события ввода */
.loading-screen.is-removed {
  display: none;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  max-width: 320px;
  width: 100%;
}

/* ── Логотип из зёрен (переиспользует спрайт bean-premium-c) ── */
.loading-logo {
  width: 96px;
  height: 84px;
  filter: drop-shadow(0 4px 10px rgba(74, 55, 40, 0.25));
}

.loading-beans {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Раздельная анимация «подпрыгивания» зёрен со сдвигом по фазе */
.loading-bean {
  transform-origin: 50% 80%;
  animation: loadingBeanBob 1.4s ease-in-out infinite;
}
.loading-bean-a { animation-delay: 0s; }
.loading-bean-b { animation-delay: 0.18s; }
.loading-bean-c { animation-delay: 0.36s; }

@keyframes loadingBeanBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.loading-title {
  margin: 0;
  font-size: 26px;
  letter-spacing: 4px;
  font-weight: 800;
  color: var(--text-primary);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ── Прогресс-бар ── */
.loading-bar {
  width: 100%;
  max-width: 240px;
  height: 10px;
  border-radius: 999px;
  background: rgba(74, 55, 40, 0.18);
  box-shadow: inset 0 1px 3px rgba(74, 55, 40, 0.25);
  overflow: hidden;
}

.loading-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-btn-play);
  transition: width 0.25s ease;
}

.loading-percent {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
}

.loading-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
}

/* Небольшое уменьшение на ландшафтных экранах */
@media (orientation: landscape) and (max-height: 420px) {
  .loading-logo { width: 72px; height: 63px; }
  .loading-title { font-size: 20px; letter-spacing: 3px; }
  .loading-content { gap: 10px; }
}