/* ── Jungle background ────────────────────────────────── */
body {
  background: var(--bg);
}
body.dark {
  background: #06140a;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  min-height: calc(100vh - 52px);
  /* layered jungle atmosphere — warm, sunlit canopy */
  background:
    /* dappled sunlight breaking through the canopy (warm golden highlights) */
    radial-gradient(ellipse 38% 22% at 18%  8%, rgba(255,225,140,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 30% 18% at 82% 12%, rgba(255,230,150,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 22% 14% at 50% 18%, rgba(255,240,180,0.10) 0%, transparent 75%),
    /* canopy halo at the very top — lit-green glow */
    radial-gradient(ellipse 90% 28% at 50%  0%, rgba(110,200,80,0.22) 0%, transparent 70%),
    /* deeper shadow at the very bottom (forest floor) */
    radial-gradient(ellipse 95% 30% at 50% 100%, rgba(8,18,4,0.55) 0%, transparent 75%),
    /* side shadow gutters (dense undergrowth) */
    radial-gradient(ellipse 30% 100% at  0% 60%, rgba(8,22,4,0.40) 0%, transparent 70%),
    radial-gradient(ellipse 30% 100% at 100% 60%, rgba(8,22,4,0.40) 0%, transparent 70%),
    /* base jungle gradient — lush green top, deeper at bottom */
    linear-gradient(175deg, #2d5e1c 0%, #1f4814 28%, #163610 55%, #0d220a 80%, #060f04 100%);
}

/* ── Foliage layer — leaves + vines + sunbeam shafts ────
   Built from SVG data URIs so we don't ship extra assets. The leaves
   are big stylised drops that flank the playfield; vines drape down
   from the top edge. */
.app::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* top-left leaf cluster */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%23163a0b' stroke='%230a1f04' stroke-width='1.5'><path d='M30 10 Q90 30 90 110 Q60 105 30 80 Q12 50 30 10Z'/><path d='M-10 60 Q60 50 70 130 Q35 130 0 110 Q-20 90 -10 60Z' fill='%23204c10' opacity='0.85'/><path d='M50 -10 Q90 30 60 70 Q35 50 30 20 Q40 0 50 -10Z' fill='%231a4209' opacity='0.9'/></g></svg>"),
    /* top-right leaf cluster (mirrored visually via background-position) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%23163a0b' stroke='%230a1f04' stroke-width='1.5'><path d='M170 10 Q110 30 110 110 Q140 105 170 80 Q188 50 170 10Z'/><path d='M210 60 Q140 50 130 130 Q165 130 200 110 Q220 90 210 60Z' fill='%23204c10' opacity='0.85'/><path d='M150 -10 Q110 30 140 70 Q165 50 170 20 Q160 0 150 -10Z' fill='%231a4209' opacity='0.9'/></g></svg>"),
    /* bottom-left fern frond */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'><g fill='%23123009' stroke='%23071a03' stroke-width='1.2'><path d='M-10 200 Q40 140 100 100 Q40 130 20 200Z'/><path d='M-10 180 Q60 110 130 60 Q70 105 30 180Z' fill='%231a3f0c' opacity='0.85'/><path d='M-10 160 Q80 80 160 30 Q90 80 40 160Z' fill='%23244e10' opacity='0.7'/></g></svg>"),
    /* bottom-right fern frond */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'><g fill='%23123009' stroke='%23071a03' stroke-width='1.2'><path d='M250 200 Q200 140 140 100 Q200 130 220 200Z'/><path d='M250 180 Q180 110 110 60 Q170 105 210 180Z' fill='%231a3f0c' opacity='0.85'/><path d='M250 160 Q160 80 80 30 Q150 80 200 160Z' fill='%23244e10' opacity='0.7'/></g></svg>"),
    /* hanging vines from the top centre — two thin streaks */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 300'><g fill='none' stroke='%231a3f0c' stroke-width='2.5' stroke-linecap='round'><path d='M18 0 Q22 60 14 110 Q4 160 22 220 Q34 260 18 300'/><path d='M42 0 Q38 70 48 130 Q60 180 40 240 Q26 280 40 300'/></g><g fill='%23244e10'><ellipse cx='12' cy='130' rx='6' ry='10'/><ellipse cx='52' cy='160' rx='5' ry='9'/><ellipse cx='18' cy='210' rx='5' ry='8'/></g></svg>"),
    /* angled sunbeam shaft — soft golden gradient stripe */
    linear-gradient(155deg,
      transparent 0%, transparent 38%,
      rgba(255,235,170,0.12) 44%, rgba(255,245,200,0.18) 50%, rgba(255,235,170,0.10) 56%,
      transparent 62%, transparent 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, no-repeat;
  background-size:
    260px 260px,                 /* TL leaves */
    260px 260px,                 /* TR leaves */
    300px 250px,                 /* BL frond */
    300px 250px,                 /* BR frond */
    60px 300px,                  /* vines (repeats horizontally with spacing) */
    100% 100%;                   /* sunbeam covers everything */
  background-position:
    left -30px top -30px,
    right -30px top -30px,
    left -40px bottom -10px,
    right -40px bottom -10px,
    top 0px center,
    center;
}

/* ── Subtle bug-glow / firefly twinkles on top of the foliage ─ */
.app::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle  3px at 12% 42%, rgba(255,230,120,0.65) 0%, transparent 80%),
    radial-gradient(circle 2.5px at 87% 30%, rgba(255,225,110,0.55) 0%, transparent 80%),
    radial-gradient(circle  2px at 22% 78%, rgba(255,235,130,0.6)  0%, transparent 80%),
    radial-gradient(circle 2.5px at 78% 82%, rgba(255,225,110,0.55) 0%, transparent 80%),
    radial-gradient(circle  2px at 45% 55%, rgba(255,235,130,0.5)  0%, transparent 80%);
  filter: blur(0.4px);
  animation: firefly 4.2s ease-in-out infinite alternate;
}
@keyframes firefly {
  0%   { opacity: 0.45; }
  35%  { opacity: 0.95; }
  70%  { opacity: 0.55; }
  100% { opacity: 0.85; }
}

/* Lift the in-page title + toolbar above the foliage pseudo-layers so
   "鱷魚拔牙齒" reads cleanly on top of the leaves at the top corners. */
.app > .header,
.app > .toolbar {
  position: relative;
  z-index: 3;
}

/* ── HUD ──────────────────────────────────────────────── */
.croc-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: min(95vw, 560px);
  padding: 6px 16px 4px;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.player-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 14px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: border-color 0.2s, background 0.2s;
  min-width: 76px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(3px);
}
@keyframes player-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237,194,46,0.55), 0 0 12px rgba(237,194,46,0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(237,194,46,0.05), 0 0 18px rgba(237,194,46,0.55); }
}
.player-box.active {
  border-color: var(--accent);
  background: rgba(237,194,46,0.15);
  /* `--pulse-period` is updated by JS (faster as teeth deplete = rising tension) */
  animation: player-pulse var(--pulse-period, 1.4s) ease-in-out infinite;
}
.player-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(200,240,160,0.65);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.player-score {
  font-size: 1.9rem;
  font-weight: 900;
  color: #e8ffd0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.middle-hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.turn-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(200,240,150,0.8);
  text-align: center;
  min-height: 1.2em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.hud-btns { display: flex; gap: 6px; }
.btn-sm   { font-size: 0.72rem; padding: 4px 10px; }

/* ── Croc image + overlay container ──────────────────── */
.croc-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 531 / 446;
  flex-shrink: 0;
  z-index: 1;
}

/* Spotlight vignette focusing attention on the croc — dimmer outside,
   warm-lit centre. Sits ABOVE the swamp background but BELOW the croc
   image and tooth grid via z-index. */
.croc-wrap::before {
  content: '';
  position: absolute;
  inset: -8% -4% -4% -4%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 48%,
    rgba(120, 50, 10, 0.18) 0%,
    rgba(40, 16, 4, 0.32) 55%,
    rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: multiply;
  filter: blur(10px);
}

@keyframes croc-breathe {
  0%, 100% { transform: scale(1)    translateY(0);     }
  50%      { transform: scale(1.012) translateY(-2px); }
}
#croc-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 1;
  /* idle "alive" breathing — paused during snap-bite animation */
  animation: croc-breathe 3.4s ease-in-out infinite;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6));
}
#croc-img.croc-snap { animation: croc-snap 0.55s cubic-bezier(.36,.07,.19,.97); }

#pliers-el {
  position: absolute;
  z-index: 8;
  pointer-events: none;
}
#pliers-el[hidden] { display: none !important; }
#pliers-el img {
  width: 100%;
  height: auto;
  display: block;
}
/* Lower teeth: pliers come from above, jaws face down */
#pliers-el.pull-lower img { transform: rotate(180deg); }

@keyframes croc-snap {
  0%   { transform: scale(1)    rotate(0deg);  }
  10%  { transform: scale(1.20) rotate(-7deg); }
  22%  { transform: scale(0.88) rotate( 8deg); }
  36%  { transform: scale(1.14) rotate(-5deg); }
  50%  { transform: scale(0.94) rotate( 4deg); }
  68%  { transform: scale(1.06) rotate(-2deg); }
  85%  { transform: scale(0.98) rotate( 1deg); }
  100% { transform: scale(1)    rotate(0deg);  }
}

/* ── CHOMP! red full-screen flash on bite ─────────────── */
@keyframes chomp-flash {
  0%   { opacity: 0; }
  10%  { opacity: 0.85; }
  60%  { opacity: 0.3; }
  100% { opacity: 0; }
}
.chomp-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%,
    rgba(255, 60, 30, 0.45) 0%,
    rgba(180, 30, 10, 0.35) 35%,
    rgba(80, 10, 5, 0.25) 70%,
    transparent 100%);
  z-index: 15;
  animation: chomp-flash 0.55s ease-out forwards;
  mix-blend-mode: screen;
}

/* ── Heart-beat overlay (rising tension) ──────────────── */
@keyframes heartbeat {
  0%, 30%, 100% { opacity: 0; }
  10%, 18%      { opacity: 1; }
}
.heartbeat-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%,
    transparent 30%, rgba(180, 30, 10, 0.18) 75%, rgba(120, 10, 5, 0.32) 100%);
  z-index: 4;
  opacity: 0;
}
.heartbeat-on { animation: heartbeat var(--hb-period, 1.2s) ease-in-out infinite; }

/* ── Result overlay (covers full .app) ───────────────── */
#result-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(140,30,10,0.55) 0%, rgba(0,0,0,0.88) 65%);
  z-index: 20;
  animation: fadein 0.4s ease;
}
#result-overlay[hidden] { display: none !important; }
@keyframes icon-bounce {
  0%   { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  55%  { transform: scale(1.35) rotate(8deg);  opacity: 1; }
  75%  { transform: scale(0.92) rotate(-3deg);              }
  100% { transform: scale(1)    rotate(0);                  }
}
#result-icon {
  font-size: 4.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(255,80,40,0.7));
  animation: icon-bounce 0.65s cubic-bezier(.36,.07,.19,1.3) both;
}
#result-title {
  font-size: 1.85rem;
  font-weight: 900;
  color: #fff5e0;
  text-align: center;
  text-shadow: 0 0 20px rgba(255,100,0,0.85), 0 2px 4px rgba(0,0,0,0.8);
  padding: 0 12px;
  letter-spacing: 1px;
}
#result-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
  text-align: center;
  margin-bottom: 4px;
  padding: 0 12px;
}
@keyframes fadein {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ── Teeth — individually positioned over mouth sockets ─ */
#teeth-grid {
  position: absolute;
  inset: 0;
  z-index: 5;
}
#teeth-grid[hidden] { display: none !important; }

/* ── shared tooth button base ─────────────────────────── */
.tooth-btn {
  position: absolute;
  width: 10%;
  height: 12%;
  background-image: url('images/tooth-normal.png');
  background-size: 78%;
  background-repeat: no-repeat;
  background-position: center 30%;   /* shift toward tip end */
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  transition: transform 0.12s, filter 0.12s;
  -webkit-tap-highlight-color: transparent;
  /* warm dark shadow anchors tooth to the socket */
  filter: drop-shadow(0 2px 3px rgba(40,15,3,0.65))
          drop-shadow(0 0 6px rgba(20,8,2,0.35));
}

/* new sprite: crown/tip is at top by default                    */
/* upper jaw → tip must face DOWN  → rotate 180°                 */
/* lower jaw → tip must face UP    → no rotation                 */
.tooth-btn.upper { transform: rotate(180deg); }
.tooth-btn.lower { transform: none; }

/* Hovering a tooth: scale up, golden glow, and a tiny tremble suggesting
   "is THIS the trap?" The tremble is small enough to read as nervousness
   rather than animation noise. */
@keyframes tooth-tremble-upper {
  0%, 100% { transform: rotate(180deg) scale(1.16) translate(0, 0); }
  25%      { transform: rotate(180deg) scale(1.16) translate(-0.6px, 0.4px); }
  50%      { transform: rotate(180deg) scale(1.16) translate( 0.5px,-0.3px); }
  75%      { transform: rotate(180deg) scale(1.16) translate(-0.4px, 0.5px); }
}
@keyframes tooth-tremble-lower {
  0%, 100% { transform: scale(1.16) translate(0, 0); }
  25%      { transform: scale(1.16) translate(-0.6px, 0.4px); }
  50%      { transform: scale(1.16) translate( 0.5px,-0.3px); }
  75%      { transform: scale(1.16) translate(-0.4px, 0.5px); }
}
.tooth-btn.upper:hover:not(:disabled) {
  background-image: url('images/tooth-hover.png');
  animation: tooth-tremble-upper 0.22s ease-in-out infinite;
  filter: drop-shadow(0 3px 5px rgba(40,15,3,0.7))
          drop-shadow(0 0 10px rgba(255,220,100,0.55))
          drop-shadow(0 0 14px rgba(255,170,40,0.4));
}
.tooth-btn.lower:hover:not(:disabled) {
  background-image: url('images/tooth-hover.png');
  animation: tooth-tremble-lower 0.22s ease-in-out infinite;
  filter: drop-shadow(0 3px 5px rgba(40,15,3,0.7))
          drop-shadow(0 0 10px rgba(255,220,100,0.55))
          drop-shadow(0 0 14px rgba(255,170,40,0.4));
}
.tooth-btn.upper:active:not(:disabled) { transform: rotate(180deg) scale(0.88); filter: none; }
.tooth-btn.lower:active:not(:disabled) { transform: scale(0.88); filter: none; }

/* pulled: just remove the sprite — base image socket hole shows naturally */
.tooth-btn:disabled {
  background-image: none;
  cursor: default;
  opacity: 1;
  filter: none;
}
.tooth-btn.upper:disabled { transform: none; }
.tooth-btn.lower:disabled { transform: none; }

.tooth-btn.bad-tooth { opacity: 1; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 480px) {
  .croc-hud { padding: 4px 10px 2px; }
  .player-box { min-width: 62px; padding: 4px 10px; }
  .player-score { font-size: 1.55rem; }
}