* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #5ec8f2;
  font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  color: #3b2412;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

canvas#game { display: block; width: 100vw; height: 100vh; cursor: crosshair; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 10px; left: 10px; right: 10px;
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
.hud-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.hud-box {
  background: rgba(255, 250, 235, .9);
  border: 3px solid #6d4420;
  border-radius: 14px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: clamp(13px, 1.6vw, 20px);
  box-shadow: 0 3px 0 #6d4420;
  white-space: nowrap;
}
.hud-btn {
  pointer-events: auto;
  width: 44px; height: 44px;
  font-size: 22px; font-family: inherit; font-weight: 700;
  background: #ffd54f; color: #3b2412;
  border: 3px solid #6d4420; border-radius: 12px;
  box-shadow: 0 3px 0 #6d4420;
  cursor: pointer;
}
.hud-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #6d4420; }

#power-hint {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(59, 36, 18, .85); color: #fff8e1;
  padding: 8px 18px; border-radius: 999px;
  font-size: clamp(13px, 1.5vw, 18px); font-weight: 600;
  pointer-events: none;
  animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse { from { opacity: .75; } to { opacity: 1; transform: translateX(-50%) scale(1.04); } }

/* ---------- Overlay ---------- */
#overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 60, 20, .35);
  padding: 16px;
  overflow-y: auto;
}
.panel {
  background: #fff8e7;
  border: 5px solid #6d4420;
  border-radius: 26px;
  box-shadow: 0 8px 0 #6d4420, 0 20px 40px rgba(0,0,0,.3);
  padding: 26px 30px;
  max-width: 640px; width: 100%;
  text-align: center;
  animation: pop .35s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.panel h2 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 8px; color: #6d4420; }
.panel p { font-size: clamp(15px, 1.8vw, 19px); margin: 8px 0; line-height: 1.35; }
.panel .small { font-size: 14px; opacity: .75; }

.btn {
  font-family: inherit; font-weight: 700; font-size: 20px;
  padding: 10px 26px; margin: 12px 6px 0;
  background: #7cc35a; color: #fff;
  border: 4px solid #3f7a25; border-radius: 16px;
  box-shadow: 0 5px 0 #3f7a25;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #3f7a25; }
.btn.alt { background: #ffb74d; border-color: #b36b00; box-shadow: 0 5px 0 #b36b00; }
.btn.big { font-size: 28px; padding: 12px 48px; }

/* Title */
.title-screen { text-align: center; }
.logo {
  font-size: clamp(48px, 10vw, 120px);
  line-height: .95;
  color: #ffd54f;
  -webkit-text-stroke: 4px #6d4420;
  text-shadow: 0 8px 0 #6d4420, 0 14px 24px rgba(0,0,0,.35);
  animation: wobble 2.4s ease-in-out infinite;
}
.logo span { color: #9ccc65; display: block; }
@keyframes wobble { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) scale(1.03); } }
.tagline {
  margin: 18px 0 6px; font-size: clamp(18px, 2.4vw, 28px); font-weight: 600;
  color: #fff; text-shadow: 0 2px 0 #3b2412, 0 0 12px rgba(0,0,0,.4);
}
.title-screen .small { color: #fff; text-shadow: 0 1px 0 #3b2412; margin-top: 14px; font-size: 16px; }
.menu-snails { display: flex; justify-content: center; gap: 4px; margin: 10px 0; flex-wrap: wrap; }

/* Level select */
.levels-panel { max-width: 900px; }
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin-top: 14px;
}
.lvl {
  font-family: inherit;
  background: #fff; border: 4px solid #6d4420; border-radius: 18px;
  box-shadow: 0 4px 0 #6d4420;
  padding: 8px 6px 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #3b2412;
}
.lvl:hover:not(.locked) { background: #f1fbe8; }
.lvl:active:not(.locked) { transform: translateY(2px); box-shadow: 0 2px 0 #6d4420; }
.lvl .num { font-size: 26px; font-weight: 700; }
.lvl .lname { font-size: 13px; font-weight: 600; min-height: 32px; }
.lvl .stars { color: #f9a825; font-size: 20px; letter-spacing: 2px; }
.lvl .stars .off { color: #d7ccc8; }
.lvl.locked { opacity: .55; cursor: not-allowed; background: #eee; }
.lvl .lock { font-size: 34px; height: 56px; line-height: 56px; }

/* Intro card */
.intro-tag {
  display: inline-block; background: #e53935; color: #fff;
  padding: 4px 16px; border-radius: 999px; font-weight: 700;
  transform: rotate(-3deg); margin-bottom: 6px;
}
.intro-canvas { display: block; margin: 4px auto; }
.intro-name { font-size: 34px; font-weight: 700; color: #6d4420; }
.intro-title { font-style: italic; opacity: .8; }
.intro-power {
  background: #fff; border: 3px dashed #bcaaa4; border-radius: 14px;
  padding: 10px 14px; margin-top: 10px;
}

#rotate {
  display: none;
  position: fixed; inset: 0; z-index: 10;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #5ec8f2; color: #fff; font-size: 60px; text-align: center; padding: 24px;
}
#rotate span { font-size: 22px; font-weight: 700; text-shadow: 0 2px 0 #3b2412; }
@media (orientation: portrait) and (max-width: 700px) and (pointer: coarse) {
  #rotate { display: flex; }
}

.big-stars { font-size: 60px; color: #f9a825; letter-spacing: 6px; text-shadow: 0 3px 0 #b36b00; }
.big-stars .off { color: #d7ccc8; text-shadow: none; }
.big-stars span { display: inline-block; animation: pop .5s both; }
.big-stars span:nth-child(2) { animation-delay: .15s; }
.big-stars span:nth-child(3) { animation-delay: .3s; }
.score-line { font-size: 24px !important; font-weight: 700; }

/* pub Franck Leboeuf incrustée entre deux niveaux */
#franck-pub {
  position: fixed; inset: 0; width: 100%; height: 100%;
  border: 0; z-index: 20;
}