html,body{
margin:0;
padding:0;
background:#e6f7ff;
font-family:"Baloo 2",sans-serif;
}

.game-container{
width:320px;
margin:90px auto 0;
background:#e6f7ff;
border-radius:18px;
position:relative;
}

.emo-header{
text-align:center;
font-size:20px;
font-weight:800;
color:#ff9051;
}

.emo-status{
  display:flex;
  justify-content:space-between;
  padding: 8px 12px 6px; /* было 11px сверху → стало 9px */
}


.pill{
background:#fff;
padding:4px 10px;
border-radius:999px;
font-size:14px;
}

.emo-task{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
font-size:26px;
font-weight:800;
color:#4e72ae;
margin: 5px 0; /* было 8px → стало 6px */
}

.emo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px;
}


/* =========================================
   TEDDY END PANEL — ONE BLOCK
========================================= */

/* ===== FINAL PANEL ===== */
.teddy-end-panel {
  position: absolute;   /* ← ВОТ ЭТО */
  inset: 0;

  display: flex;
  justify-content: center;
  padding-top: 75px;
  background: transparent;

  opacity: 0;
  pointer-events: none;
  z-index: 10;
}


.teddy-end-panel.show {
  opacity: 1;
  pointer-events: auto;
}

.teddy-end-modal {
  text-align: center;
  background: none;
  max-width: 280px;
}



.teddy-end-modal h2 {
  font-size: 26px;
  font-weight: 800;
  color: #ff9051;
  margin-bottom: 12px;
}

.teddy-end-modal p {
  font-size: 20px;
  font-weight: 600;
  color: #4e72ae;
  line-height: 1.4;
  margin-bottom: 22px;
}

.game-end-restart {
  background: #ffb65c;
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 #e89b3f;
}


.game-container.ended .emo-header,
.game-container.ended .emo-status,
.game-container.ended .emo-task,
.game-container.ended .emo-grid {
  display: none;
}

body.game-ended {
  min-height: auto !important;
  height: auto !important;
}

/* =========================================
   MOBILE TUNING (как на Teddy)
========================================= */
@media (max-width: 480px) {

  /* 1️⃣ Опускаем таймер и звёзды */
  .emo-status {
    padding-top: 18px;   /* было меньше */
    padding-bottom: 3px;
  }

  /* 2️⃣ Уменьшаем расстояние до названия эмоции */
  .emo-task {
    margin-top: -1px;     /* было больше */
    margin-bottom: 6px;  /* оставляем низ как есть */
  }

  /* 3️⃣ Карточки — отступы от краёв */
  .emo-grid {
    padding-left: 7px;
    padding-right: 20px;
    padding-top: 8px;
  }

  /* 4️⃣ Чуть меньше зазор между карточками */
  .emo-grid {
    gap: 9px;
  }

 .game-container {
    margin-top: 150px; /* вместо 90 */
  }

}

/* карточка */
.emo-card {
  background: #fff;
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  padding: 10px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);

  transition: transform .18s ease, box-shadow .2s ease;
}


/* картинка в карточке */
.emo-card img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}


/* “маленькие” — чуть больше */
.emo-card.small img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.emo-card:hover {
  transform: scale(1.04);
}

.emo-card.correct {
  box-shadow: 0 0 0 4px #66d174, 0 6px 16px rgba(0,0,0,0.08);
}

.emo-card.wrong {
  box-shadow: 0 0 0 4px #ff7a7a, 0 6px 16px rgba(0,0,0,0.08);
}

.emo-card:hover {
  transform: scale(1.04);
}

.emo-card.correct {
  box-shadow:
    0 0 0 4px #66d174,
    0 6px 16px rgba(0,0,0,0.08);
}

.emo-card.wrong {
  box-shadow:
    0 0 0 4px #ff7a7a,
    0 6px 16px rgba(0,0,0,0.08);
}


@media (min-width: 768px) {
  .emo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

.emo-task,
.emo-grid {
  transition: opacity 0.25s ease;
}

.game-container::after {
  content: none !important;
}

/* CONFETTI — EMOTIONS (как в Teddy) */
.emo-firework {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
}

@keyframes emoConfettiFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  70% {
    opacity: 1;
    transform: translate(
      calc(-50% + var(--dx)),
      calc(-50% + var(--dy))
    ) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--dx)),
      calc(-50% + var(--dy))
    ) scale(1);
  }
}