/* ── Reset & layout ────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a0a12;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#game-container {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

canvas {
  display: block;
  /* Size is set dynamically by JS – no CSS stretch */
}

/* ── Overlay / modal ──────────────────────────────────── */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(40, 5, 20, 0.75);
  z-index: 10;
}

.overlay.hidden {
  display: none;
}

.modal {
  background: linear-gradient(135deg, #fff0f3, #ffe0e8);
  padding: 44px 60px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(180, 40, 80, 0.5);
  border: 2px solid #ff8fa3;
  animation: popIn 0.4s ease-out;
}

.modal h1 {
  font-size: 34px;
  color: #c9184a;
  margin-bottom: 14px;
}

.modal p {
  font-size: 18px;
  color: #6b2040;
  margin-bottom: 26px;
}

.modal button {
  padding: 14px 36px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #e63956, #c9184a);
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  box-shadow: 0 4px 12px rgba(200, 24, 74, 0.4);
}

.modal button:hover {
  background: linear-gradient(135deg, #ff4d6d, #e63956);
  transform: scale(1.05);
}

/* ── Start screen ─────────────────────────────────────── */
.start-modal {
  padding: 36px 50px 40px;
}

.start-modal h1 {
  font-size: 36px;
  margin-bottom: 8px;
}

.start-modal p {
  font-size: 16px;
  margin-bottom: 28px;
}

.start-modal button {
  font-size: 22px;
  padding: 16px 56px;
}

#start-faces {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
  position: relative;
}

#start-faces img {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 3px solid #ff4d6d;
  box-shadow: 0 4px 16px rgba(200, 24, 74, 0.4);
}

#start-faces img:first-of-type {
  margin-right: -18px;
}

#start-faces img:last-of-type {
  margin-left: -18px;
  z-index: 1;
}

/* Floating hearts above the faces */
.start-heart {
  position: absolute;
  font-size: 18px;
  animation: heartFloat 1.5s ease-in-out infinite;
  opacity: 0.85;
}

.start-heart:nth-child(1) { top: -22px; left: 10%;  animation-delay: 0s;    font-size: 16px; }
.start-heart:nth-child(2) { top: -30px; left: 25%;  animation-delay: 0.3s;  font-size: 22px; }
.start-heart:nth-child(3) { top: -18px; left: 42%;  animation-delay: 0.7s;  font-size: 14px; }
.start-heart:nth-child(4) { top: -28px; left: 58%;  animation-delay: 0.2s;  font-size: 20px; }
.start-heart:nth-child(5) { top: -24px; left: 75%;  animation-delay: 0.5s;  font-size: 16px; }
.start-heart:nth-child(6) { top: -32px; left: 90%;  animation-delay: 0.9s;  font-size: 18px; }
.start-heart:nth-child(7) { top: -16px; left: 5%;   animation-delay: 1.1s;  font-size: 12px; }
.start-heart:nth-child(8) { top: -34px; left: 50%;  animation-delay: 0.4s;  font-size: 24px; }

#start-faces .kiss-heart {
  position: absolute;
  z-index: 2;
  font-size: 28px;
  top: -10px;
  animation: heartFloat 1.5s ease-in-out infinite;
}

@keyframes heartFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.15); }
}

/* ── Win screen ──────────────────────────────────────── */
.win-modal h1 {
  font-size: 32px;
  margin-bottom: 24px;
}

.win-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  position: relative;
  min-height: 60px;
}

#no-btn {
  position: relative;
  transition: none;
}

/* ── Fireworks overlay ───────────────────────────────── */
#fireworksCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}

#fireworksCanvas.hidden {
  display: none;
}

#fireworks-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 21;
  pointer-events: none;
}

#fireworks-overlay.hidden {
  display: none;
}

#fireworks-message {
  text-align: center;
  animation: popIn 0.5s ease-out;
}

#fireworks-message h1 {
  font-size: 42px;
  color: #fff;
  text-shadow: 0 0 20px #ff4d6d, 0 0 40px #e63956, 0 2px 4px rgba(0,0,0,0.5);
  margin-bottom: 24px;
}

#fireworks-message button {
  padding: 14px 36px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #e63956, #c9184a);
  border: none;
  border-radius: 24px;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.2s, transform 0.1s;
  box-shadow: 0 4px 12px rgba(200, 24, 74, 0.4);
}

#fireworks-message button:hover {
  background: linear-gradient(135deg, #ff4d6d, #e63956);
  transform: scale(1.05);
}

@keyframes popIn {
  0%   { transform: scale(0.6) rotate(-3deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}