html, body {
  margin: 0;
  padding: 0;
  background: #1c2036;
  overflow: hidden;
  height: 100%;
  font-family: 'Segoe UI', system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

#c {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

#overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 28%, rgba(20, 24, 48, .62), rgba(9, 11, 22, .93));
  backdrop-filter: blur(6px);
  z-index: 10;
  flex-direction: column;
  gap: 12px;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Animation d'entrée : chaque élément monte en fondu, en cascade */
@keyframes ovRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
#overlay > * { animation: ovRise .38s cubic-bezier(.2, .8, .3, 1) backwards; }
#overlay > *:nth-child(2) { animation-delay: .05s; }
#overlay > *:nth-child(3) { animation-delay: .1s; }
#overlay > *:nth-child(4) { animation-delay: .15s; }
#overlay > *:nth-child(5) { animation-delay: .2s; }
#overlay > *:nth-child(6) { animation-delay: .25s; }
#overlay > *:nth-child(7) { animation-delay: .3s; }
#overlay > *:nth-child(8) { animation-delay: .35s; }
#overlay > *:nth-child(9) { animation-delay: .4s; }

#overlay h1 {
  color: #fff;
  font-size: 34px;
  margin: 0;
  text-align: center;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}

/* ---------- Écran menu ---------- */
#ovLogo {
  display: none;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .55), 0 0 46px rgba(96, 126, 255, .28);
  animation: ovRise .38s cubic-bezier(.2, .8, .3, 1) backwards, logoFloat 3.2s ease-in-out .5s infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
#overlay.menu #ovLogo { display: block; }

#overlay.menu h1 {
  font-size: 42px;
  letter-spacing: .5px;
  background: linear-gradient(180deg, #ffffff 30%, #9fb0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}

#ovStats {
  display: none;
  gap: 8px;
  margin: 2px 0 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(380px, 92vw);
}
#overlay.menu #ovStats { display: flex; }
.stat {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 14px;
  padding: 8px 10px;
  min-width: 64px;
  text-align: center;
}
.stat .v { color: #fff; font-weight: 800; font-size: 16px; }
.stat .k {
  color: #8f98c2;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 2px;
}
.stat.gold .v { color: #ffd23e; }

#overlay p {
  color: #aeb6d8;
  margin: 0;
  font-size: 16px;
  text-align: center;
  white-space: pre-line;
  line-height: 1.5;
}

.coins-line {
  color: #ffd23e !important;
  font-weight: 700;
  font-size: 18px !important;
  min-height: 22px;
}

#overlay button, #shop button {
  background: linear-gradient(180deg, #4cd964, #2fae4a);
  border: none;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 46px;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 5px 0 #1d7a33, 0 8px 18px rgba(0, 0, 0, .4);
  touch-action: manipulation;
}

#overlay button { min-width: 258px; }

/* Reflet qui balaie le bouton principal */
#ovBtn { position: relative; overflow: hidden; }
#ovBtn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: btnShine 3s ease-in-out 1s infinite;
}
@keyframes btnShine {
  0%, 55% { left: -60%; }
  100% { left: 135%; }
}

#overlay button:active, #shop button:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #1d7a33;
}

#overlay button.secondary, #shop button.secondary {
  background: linear-gradient(180deg, #5a6491, #414a71);
  box-shadow: 0 5px 0 #2b3252, 0 8px 18px rgba(0, 0, 0, .4);
  font-size: 17px;
  padding: 11px 36px;
}
#overlay button.secondary:active, #shop button.secondary:active {
  box-shadow: 0 2px 0 #2b3252;
}

#overlay button.ghost {
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
  border: 1.5px solid rgba(174, 182, 216, .38);
  color: #c7cdea;
  font-size: 16px;
  padding: 10px 30px;
  min-width: 0;
}
#overlay button.ghost:active { transform: translateY(2px); }

#overlay button:disabled {
  filter: grayscale(1);
  opacity: .55;
}

/* ---------- Boutique ---------- */
#shop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 18, 35, .85);
  backdrop-filter: blur(4px);
  z-index: 20;
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}

#shopPanel {
  background: #232948;
  border-radius: 20px;
  padding: 20px 16px;
  width: min(400px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .5);
}

#shopPanel h2 {
  color: #fff;
  margin: 0;
  text-align: center;
  font-size: 24px;
}

#shopPanel #shopCoins { text-align: center; margin: 0; }

.shop-item {
  background: rgba(0, 0, 0, .25);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-item .info { flex: 1; min-width: 0; }
.shop-item .name { color: #fff; font-weight: 700; font-size: 16px; }
.shop-item .desc { color: #aeb6d8; font-size: 13px; margin-top: 2px; }
.shop-item .lvl { color: #ffd23e; font-size: 12px; margin-top: 3px; letter-spacing: 2px; }

.shop-item button {
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.shop-item button.maxed {
  background: none;
  box-shadow: none;
  color: #4cd964;
  font-size: 14px;
}
.shop-item button:disabled {
  filter: grayscale(1);
  opacity: .5;
}