* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

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

/* ── Screens ── */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.screen.active { display: flex; }

/* ── Loading screen ── */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: linear-gradient(160deg, #0b2a6a, #1a5cb5, #2a8fd4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.55s ease;
}
#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}
#loading-spinner {
  width: 52px;
  height: 52px;
  border: 5px solid rgba(255,255,255,0.25);
  border-top-color: white;
  border-radius: 50%;
  animation: ls-spin 0.75s linear infinite;
}
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* ── Rotate warning ── */
#rotate-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0d1b2a;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}
@media (orientation: portrait) {
  #rotate-screen { display: flex; }
}
.rotate-icon {
  font-size: 4rem;
  animation: spin90 1.5s ease-in-out infinite;
  display: inline-block;
}
@keyframes spin90 {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
.rotate-text {
  font-size: 1.3rem;
  color: #a0c4ff;
  margin-top: 20px;
  line-height: 1.6;
}

/* ── Splash screen ── */
#splash-screen {
  /* Animated sky: wide gradient scrolls left→right for a living-sky feel */
  background: linear-gradient(160deg,
    #0b2a6a, #1a5cb5, #2a8fd4, #6ac4ee,
    #2a8fd4, #1a5cb5, #0b2a6a
  );
  background-size: 350% 100%;
  background-position: 0% 50%;
  animation: sky-shift 18s ease-in-out infinite;
  overflow: hidden;
  justify-content: flex-end;
  align-items: center;
}
@keyframes sky-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Sky area — clouds live here, clipped so they don't bleed over the scene */
#splash-sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Cloud base shape */
.cloud {
  position: absolute;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
}
.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
}

/* Cloud sizes and drift timings */
.cloud-1 { width: 120px; height: 40px; top: 22%; left: -140px;
  animation: cloud-drift 32s linear -8s infinite; }
.cloud-1::before { width: 70px; height: 70px; top: -38px; left: 12px; }
.cloud-1::after  { width: 50px; height: 50px; top: -26px; left: 58px; }

.cloud-2 { width: 80px;  height: 28px; top: 55%; left: -100px;
  animation: cloud-drift 24s linear -14s infinite; }
.cloud-2::before { width: 46px; height: 46px; top: -24px; left: 8px; }
.cloud-2::after  { width: 34px; height: 34px; top: -16px; left: 38px; }

.cloud-3 { width: 160px; height: 50px; top: 10%; left: -180px;
  animation: cloud-drift 44s linear -22s infinite; }
.cloud-3::before { width: 90px; height: 90px; top: -50px; left: 18px; }
.cloud-3::after  { width: 65px; height: 65px; top: -34px; left: 80px; }

.cloud-4 { width: 90px;  height: 32px; top: 40%; left: -110px;
  animation: cloud-drift 28s linear -3s infinite; }
.cloud-4::before { width: 52px; height: 52px; top: -28px; left: 10px; }
.cloud-4::after  { width: 38px; height: 38px; top: -18px; left: 44px; }

@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

/* Sun with flare effects, upper-right of the sky (behind clouds) */
#splash-sun {
  position: absolute;
  top: 10%;
  right: 8%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffde0 0%, #ffe066 35%, #ffb300 70%, rgba(255,179,0,0) 100%);
  box-shadow: 0 0 60px 20px rgba(255,220,90,0.55), 0 0 120px 60px rgba(255,180,60,0.25);
  z-index: 0;
  pointer-events: none;
  animation: sun-pulse 4s ease-in-out infinite;
}
#splash-sun::before {
  content: '';
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  opacity: 0.55;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.35) 0deg 4deg, transparent 4deg 40deg,
    rgba(255,255,255,0.28) 40deg 44deg, transparent 44deg 80deg,
    rgba(255,255,255,0.35) 80deg 84deg, transparent 84deg 120deg,
    rgba(255,255,255,0.28) 120deg 124deg, transparent 124deg 160deg,
    rgba(255,255,255,0.35) 160deg 164deg, transparent 164deg 200deg,
    rgba(255,255,255,0.28) 200deg 204deg, transparent 204deg 240deg,
    rgba(255,255,255,0.35) 240deg 244deg, transparent 244deg 280deg,
    rgba(255,255,255,0.28) 280deg 284deg, transparent 284deg 360deg
  );
  animation: sun-rotate 40s linear infinite;
}
@keyframes sun-pulse {
  0%, 100% { filter: brightness(1);    transform: scale(1); }
  50%      { filter: brightness(1.15); transform: scale(1.05); }
}
@keyframes sun-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Lens-flare glints trailing diagonally from the sun toward screen center */
.flare {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,220,120,0.15) 60%, transparent 75%);
  pointer-events: none;
  animation: flare-twinkle 3.5s ease-in-out infinite;
}
.flare-1 { width: 22px; height: 22px; top: 150%; left: -60px;  animation-delay: 0s;   }
.flare-2 { width: 14px; height: 14px; top: 230%; left: -110px; animation-delay: 0.8s; }
.flare-3 { width: 34px; height: 34px; top: 320%; left: -180px; opacity: 0.7; animation-delay: 1.6s; }

@keyframes flare-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 0.75; transform: scale(1.15); }
}

/* Nature background: anchored to bottom, full width */
#splash-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  display: block;
}

/* Logo wrapper: handles horizontal centering so the img can animate vertically */
#splash-logo-wrap {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

#splash-logo {
  display: block;
  width: min(62vw, 500px);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
  animation:
    logo-enter 1s cubic-bezier(0.34, 1.6, 0.64, 1) 0.2s both,
    logo-float 3.2s ease-in-out 1.2s infinite;
}
@keyframes logo-enter {
  from { transform: translateY(-90px) scale(0.65); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0);    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)); }
  50%       { transform: translateY(-9px); filter: drop-shadow(0 18px 36px rgba(255,220,80,0.5)); }
}

#splash-tagline {
  margin: 2px 0 0;
  text-align: center;
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 700;
  font-style: italic;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 14px rgba(255,220,90,0.4);
  letter-spacing: 0.02em;
}

/* ── Splash UI panel (bottom, above the nature scene) ── */
#splash-ui {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
}

/* Outer row: [button-group] [mole] */
.splash-btns {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

/* Buttons stacked vertically inside the group */
.splash-btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

/* Mole: inline, aligned to the bottom of the button group */
#splash-mole-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}
#splash-mole {
  height: min(19vh, 145px);
  width: auto;
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
  animation: splash-mole-bob 2.2s ease-in-out infinite;
}
@keyframes splash-mole-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.progress-dots {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: nowrap;
  justify-content: center;
}
.progress-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.25);
  border: 2px solid rgba(255,255,255,0.45);
  transition: all 0.3s;
}
.progress-dot.done {
  background: #ffd700;
  border-color: #ffa000;
}

/* ── Buttons ── */
.btn {
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 4px 0;
  letter-spacing: 0.5px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0; }

.btn-green {
  background: #4caf50;
  color: white;
  box-shadow: 0 4px 0 #2e7d32;
}
.btn-green:hover { background: #66bb6a; }

.btn-blue {
  background: #2196f3;
  color: white;
  box-shadow: 0 4px 0 #1565c0;
}
.btn-blue:hover { background: #42a5f5; }

.btn-outline {
  background: #e67e00;
  color: white;
  border: none;
  box-shadow: 0 4px 0 #b35f00;
}
.btn-outline:hover { background: #f09000; }

.hidden { display: none !important; }

/* ── Level intro screen ── */
#level-screen {
  background: radial-gradient(ellipse at center, #1e3c5a 0%, #0d1b2a 100%);
}
.level-inner {
  text-align: center;
  animation: level-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes level-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.level-label {
  font-size: 1rem;
  color: #7fb3f5;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 8px;
}
.level-name {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  color: #ffd700;
  text-shadow: 3px 3px 0 #8b6914;
  margin-bottom: 12px;
}
.level-emoji {
  font-size: clamp(3rem, 10vw, 6rem);
  display: block;
  margin-bottom: 12px;
  animation: emoji-spin 0.6s ease-out 0.3s both;
}
@keyframes emoji-spin {
  from { transform: rotate(-20deg) scale(0.5); }
  to   { transform: rotate(0deg)  scale(1); }
}
.level-name-fr {
  font-size: 1.2rem;
  color: #a0c4ff;
}

/* ── Levels screen ── */
#levels-screen {
  /* .screen already sets position:absolute; keep it — that still works as the
     containing block for the absolutely-positioned glow blobs below */
  background: linear-gradient(160deg, #0d1b2a, #1a3a5c, #234b73, #1a3a5c, #0d1b2a);
  background-size: 300% 100%;
  animation: sky-shift 24s ease-in-out infinite;
  overflow: hidden;
}

/* Soft drifting glow blobs behind the grid, purely decorative */
.levels-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.levels-glow-1 {
  width: 260px; height: 260px; top: -80px; left: -60px;
  background: radial-gradient(circle, rgba(255,215,0,0.28), transparent 70%);
  animation: glow-drift 16s ease-in-out infinite;
}
.levels-glow-2 {
  width: 320px; height: 320px; bottom: -100px; right: -80px;
  background: radial-gradient(circle, rgba(79,195,247,0.28), transparent 70%);
  animation: glow-drift 20s ease-in-out infinite -6s;
}
.levels-glow-3 {
  width: 200px; height: 200px; top: 40%; left: 60%;
  background: radial-gradient(circle, rgba(76,175,80,0.22), transparent 70%);
  animation: glow-drift 13s ease-in-out infinite -3s;
}
@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -25px) scale(1.15); }
}

.levels-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  position: relative;
  z-index: 1;
  animation: level-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.levels-back {
  position: absolute;
  top: 12px;
  left: 12px;
  transition: transform 0.15s;
}
.levels-back:hover { transform: translateX(-3px) scale(1.08); }
.levels-back:active { transform: translateX(-1px) scale(0.92); }
.levels-title {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 900;
  color: #ffd700;
  text-shadow: 2px 2px 0 #8b6914;
  margin: 4px 0 16px;
  text-align: center;
  animation: title-float 3s ease-in-out 0.6s infinite;
}
@keyframes title-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 900px;
  padding: 6px;
  transform-origin: top center;
}
.level-card {
  --tilt: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 12px 8px;
  cursor: pointer;
  color: white;
  font-family: inherit;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), 0 6px 14px rgba(0,0,0,0.25);
  transform: scale(1) rotate(var(--tilt));
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, border-color 0.15s, box-shadow 0.15s;
  animation: card-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes card-pop {
  from { opacity: 0; transform: scale(0.35) rotate(0deg); }
  to   { opacity: 1; transform: scale(1)   rotate(var(--tilt)); }
}
.level-card::after {
  /* diagonal shine sweep on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.6s ease;
  pointer-events: none;
  border-radius: inherit;
}
.level-card:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,215,0,0.6);
  box-shadow: 0 6px 0 rgba(0,0,0,0.25), 0 10px 20px rgba(0,0,0,0.3);
  transform: scale(1.08) rotate(0deg);
}
.level-card:hover::after { transform: translateX(130%); }
.level-card:active {
  transform: scale(0.94) rotate(0deg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.level-card-emoji {
  font-size: 2.2rem;
  display: inline-block;
  transition: transform 0.2s;
}
.level-card:hover .level-card-emoji {
  animation: emoji-bounce 0.55s ease;
}
@keyframes emoji-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-9px) scale(1.18); }
  60%      { transform: translateY(2px) scale(0.94); }
}
.level-card-name {
  font-size: 0.95rem;
  font-weight: 700;
}
.level-card-name-fr {
  font-size: 0.75rem;
  color: #a0c4ff;
}
.level-card.completed {
  background: rgba(120,120,120,0.18);
  border-color: rgba(150,150,150,0.35);
}
.level-card.completed:hover {
  background: rgba(120,120,120,0.28);
  border-color: rgba(150,150,150,0.5);
}
/* Mute only the emoji/text so the green check badge below stays vivid
   (a filter/opacity on .level-card itself would wash the badge out too) */
.level-card.completed .level-card-emoji { filter: grayscale(0.9) brightness(0.85); }
.level-card.completed .level-card-name { color: rgba(255,255,255,0.55); }
.level-card.completed .level-card-name-fr { color: rgba(160,196,255,0.45); }
.level-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4caf50;
  color: white;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  animation: check-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
}
@keyframes check-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Game screen ── */
#game-screen {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: white;
}
#game-screen.shake {
  animation: screen-shake 0.4s;
}
@keyframes screen-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

#game-header {
  width: 100%;
  height: 50px;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 56px 0 12px; /* extra right padding clears the fixed fullscreen button */
  z-index: 30;
  flex-shrink: 0;
}

.hdr-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.hdr-btn:hover { background: rgba(255,255,255,0.25); }
.hdr-btn.muted { opacity: 0.5; }

/* Fullscreen button: fixed on top of every screen (splash included) */
.hdr-btn-global {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 95;
}

#progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

#progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  overflow: hidden;
}
#progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 0%;
}
#progress-text {
  color: #a0c4ff;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Game area ── */
#game-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: white;
}

#bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* ── Zones overlay ── */
#zones-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.click-zone {
  position: absolute;
  cursor: pointer;
  border-radius: 6px;
  pointer-events: all;
  transition: background 0.15s;
}
.click-zone:hover {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4) inset;
}
.click-zone.flash-correct {
  background: rgba(76,175,80,0.55) !important;
  box-shadow: 0 0 0 3px #4caf50 inset;
  animation: flash-green 0.4s ease;
}
.click-zone.flash-wrong {
  background: rgba(244,67,54,0.55) !important;
  box-shadow: 0 0 0 3px #f44336 inset;
  animation: flash-red 0.4s ease;
}
@keyframes flash-green {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes flash-red {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ── Timer ── */
#timer-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  z-index: 20;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
#timer-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.timer-track {
  fill: none;
  stroke: rgba(255,255,255,0.2);
  stroke-width: 3;
}
.timer-fill {
  fill: none;
  stroke: #4caf50;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.9s linear, stroke 0.5s;
}
.timer-text {
  fill: white;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Urgency pulse on the timer ring for the last few seconds */
#timer-wrap.hurry {
  animation: timer-hurry-pulse 0.6s ease-in-out infinite;
}
@keyframes timer-hurry-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

#hurry-badge {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  white-space: nowrap;
  background: #f44336;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  animation: hurry-badge-pop 0.6s ease-in-out infinite;
}
@keyframes hurry-badge-pop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ── Mole (question side, bottom-left) ── */
#mole-area {
  position: absolute;
  bottom: 0;
  left: 1%;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 2px;
  pointer-events: none;
  /* start hidden below screen */
  transform: translateY(115%);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#mole-area.show {
  transform: translateY(0);
}
#mole-area.sink {
  transform: translateY(115%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 1, 1);
}

/* ── Answer mole (bottom-right) ── */
#answer-area {
  position: absolute;
  bottom: 0;
  right: 1%;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 2px;
  pointer-events: none;
  transform: translateY(115%);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#answer-area.show {
  transform: translateY(0);
}
#answer-area.sink {
  transform: translateY(115%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 1, 1);
}

/* Sprite images */
#mole-img, #answer-mole-img {
  height: min(18vh, 145px);
  width: auto;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}

/* Switch frame without flash */
#mole-img.frame-switch, #answer-mole-img.frame-switch {
  animation: frame-switch 0.08s steps(1);
}
@keyframes frame-switch {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

.bubble {
  background: white;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: clamp(0.85rem, 2.3vw, 1.25rem);
  font-weight: 700;
  color: #1a1a2e;
  box-shadow: 0 4px 15px rgba(0,0,0,0.35);
  position: relative;
  line-height: 1.3;
  pointer-events: none;
  margin-bottom: 14px;
  max-width: 45vw;
}

.bubble-left {
  border-bottom-left-radius: 4px;
  animation: bubble-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bubble-left::before {
  content: '';
  position: absolute;
  left: -16px;
  bottom: 14px;
  border: 8px solid transparent;
  border-right-color: white;
}

.bubble-right {
  border-bottom-right-radius: 4px;
  text-align: right;
  animation: bubble-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bubble-right::after {
  content: '';
  position: absolute;
  right: -16px;
  bottom: 14px;
  border: 8px solid transparent;
  border-left-color: white;
}

/* Easter-egg bubble: double-click the splash mole.
   Must come after .bubble's own `position: relative` (same specificity,
   source order decides) or that overrides this absolute positioning and
   the bubble ends up in normal flow, pushing the mole sideways. */
.bubble-splash {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 14px;
  width: max-content;
  max-width: min(70vw, 280px);
  text-align: center;
  white-space: normal;
  z-index: 20;
  animation: bubble-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bubble-splash::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: white;
}

@keyframes bubble-appear {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.answer-emoji {
  font-size: 1.6em;
  display: block;
  text-align: center;
  margin-top: 4px;
}

/* ── Wrong overlay ── */
#wrong-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  background: rgba(244, 67, 54, 0.15);
  animation: wrong-flash 0.3s ease;
}
@keyframes wrong-flash {
  0% { background: rgba(244,67,54,0.45); }
  100% { background: rgba(244,67,54,0.15); }
}
.bubble-wrong {
  font-size: clamp(1.2rem, 4vw, 2rem);
  animation: wrong-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 4px solid #f44336;
  background: white;
}
@keyframes wrong-pop {
  from { transform: scale(0.3) rotate(-8deg); }
  60%  { transform: scale(1.1) rotate(3deg); }
  to   { transform: scale(1)   rotate(0deg); }
}

/* ── Confetti ── */
#confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.cp {
  position: absolute;
  top: -18px;
  border-radius: 2px;
  animation: cp-fall linear both;
}
@keyframes cp-fall {
  0%   { transform: translateY(0)     rotate(0deg)   scaleX(1);  opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(680deg) scaleX(-1); opacity: 0; }
}

/* ── World complete screen ── */
#world-complete-screen {
  background: radial-gradient(ellipse at center, #1a3a1a 0%, #0a1a0a 100%);
}
.complete-inner {
  text-align: center;
  animation: level-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stars-row {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  margin-bottom: 16px;
  animation: star-dance 1s ease 0.2s both;
}
@keyframes star-dance {
  0% { transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.complete-title {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  color: #ffd700;
  text-shadow: 2px 2px 0 #8b6914;
  margin-bottom: 10px;
}
.complete-world-name {
  font-size: 1.3rem;
  color: #a0e0a0;
  margin-bottom: 28px;
}
.complete-subtitle {
  color: #a0c4ff;
  font-size: 1.1rem;
  margin-bottom: 28px;
}

/* ── Game complete screen ── */
#game-complete-screen {
  background: radial-gradient(ellipse at center, #1a1a4a 0%, #0d1b2a 100%);
}

/* ── Quit dialog ── */
#quit-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
}
#quit-dialog.active { display: flex; }
.dialog-box {
  background: #1e2d4a;
  border-radius: 20px;
  padding: 30px 40px;
  text-align: center;
  border: 2px solid #3a5a8a;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: level-pop 0.25s ease;
}
.dialog-box h3 {
  color: white;
  font-size: 1.4rem;
  margin-bottom: 20px;
}
.dialog-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.btn-red {
  background: #f44336;
  color: white;
  box-shadow: 0 4px 0 #b71c1c;
}
.btn-red:hover { background: #ef5350; }

/* ── Debug mode ── */
#debug-panel {
  position: fixed;
  top: 56px;
  right: 8px;
  z-index: 500;
  background: rgba(0,0,0,0.88);
  color: #00ff88;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  min-width: 200px;
  border: 1px solid #00ff88;
  pointer-events: all;
}
#debug-panel b  { color: #ff0; }
#debug-panel hr { border-color: #00ff8844; margin: 6px 0; }
.dbg-btn {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 4px 0;
  background: #003300;
  color: #00ff88;
  border: 1px solid #00ff88;
  border-radius: 4px;
  cursor: pointer;
  font-family: monospace;
  font-size: 11px;
}
.dbg-btn:hover { background: #005500; }

/* Resize handles — hidden unless edit mode */
.rh {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #ff0;
  border: 1px solid #000;
  border-radius: 2px;
  z-index: 20;
  display: none;
  touch-action: none;
  pointer-events: all;
}
.edit-mode .click-zone .rh { display: block; }
.rh.nw { top: -6px;  left: -6px;              cursor: nw-resize; }
.rh.n  { top: -6px;  left: calc(50% - 5px);   cursor: n-resize;  }
.rh.ne { top: -6px;  right: -6px;             cursor: ne-resize; }
.rh.w  { top: calc(50% - 5px); left: -6px;   cursor: w-resize;  }
.rh.e  { top: calc(50% - 5px); right: -6px;  cursor: e-resize;  }
.rh.sw { bottom: -6px; left: -6px;            cursor: sw-resize; }
.rh.s  { bottom: -6px; left: calc(50% - 5px); cursor: s-resize;  }
.rh.se { bottom: -6px; right: -6px;           cursor: se-resize; }

/* Edit mode delete button */
.del-btn {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 18px;
  height: 18px;
  background: #c00;
  color: #fff;
  border: 1px solid #800;
  border-radius: 50%;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
  cursor: pointer;
  display: none;
  z-index: 25;
  padding: 0;
  pointer-events: all;
}
.del-btn:hover { background: #f00; }
.edit-mode .click-zone .del-btn { display: block; }

/* Debug: highlighted zone (cycle with ◀/▶ buttons) */
.click-zone.dbg-hi {
  outline: 3px solid #fff !important;
  background: rgba(255,255,255,0.3) !important;
  z-index: 5;
}
.click-zone.dbg-hi .dbg-zone-lbl {
  background: #fff;
  color: #000;
  font-size: 11px;
}

/* Edit mode zone appearance */
.edit-mode .click-zone {
  cursor: move !important;
  outline: 2px dashed rgba(255,200,0,0.9) !important;
  background: rgba(255,200,0,0.08) !important;
  transition: none !important;
}
.edit-mode .click-zone:hover {
  background: rgba(255,200,0,0.2) !important;
}

/* Zones visible in debug */
#zones-overlay.dbg .click-zone {
  outline: 2px solid rgba(255,255,0,0.8);
  background: rgba(255,255,0,0.06) !important;
}
#zones-overlay.dbg .click-zone[data-correct="true"] {
  outline-color: #4caf50;
  background: rgba(76,175,80,0.2) !important;
}
.dbg-zone-lbl {
  display: none;
  position: absolute;
  top: 1px;
  left: 2px;
  background: rgba(0,0,0,0.75);
  color: #ff0;
  font: bold 9px monospace;
  padding: 1px 3px;
  border-radius: 2px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 4px);
}
#zones-overlay.dbg .dbg-zone-lbl {
  display: block;
}
#zones-overlay.dbg .click-zone[data-correct="true"] .dbg-zone-lbl {
  color: #4caf50;
}