*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
}
img, canvas { pointer-events: none; }

:root {
  --forest-dark:   #0d2b18;
  --forest-mid:    #1a4d2e;
  --forest-bright: #2d7a45;
  --forest-light:  #52b469;
  --leaf:          #7ed957;
  --mist:          #b8f0c8;
  --gold:          #f5c842;
  --gold-dark:     #c8960a;
  --red:           #e85535;
  --white:         #f0fff4;
  --panel:         rgba(0,0,0,0.55);
  --panel-border:  rgba(126,217,87,0.22);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--forest-dark);
  font-family: 'Nunito', sans-serif;
  color: var(--white);
}

/* ── BACKGROUND ──────────────────────────────────────── */
#bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, #0d3d1a 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, #153822 0%, transparent 50%),
    linear-gradient(160deg, #0a1f10 0%, #1a4428 50%, #0d2b18 100%);
  z-index: 0;
}
.fireflies { position: absolute; inset: 0; pointer-events: none; }
.firefly {
  position: absolute; width: 4px; height: 4px;
  background: #ccff88; border-radius: 50%;
  box-shadow: 0 0 6px 3px rgba(160,255,80,0.6);
  animation: flyAnim var(--dur) ease-in-out infinite var(--delay);
  opacity: 0;
}
@keyframes flyAnim {
  0%   { opacity:0; transform:translate(0,0); }
  20%  { opacity:1; }
  80%  { opacity:0.8; }
  100% { opacity:0; transform:translate(var(--tx),var(--ty)); }
}

/* ── SCREENS ─────────────────────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10;
  padding: 20px;
}
.screen.active { display: flex; }

/* ── START SCREEN ────────────────────────────────────── */
.logo-frog {
  filter: drop-shadow(0 6px 14px rgba(0,200,80,0.55));
  animation: floatLogo 2.4s ease-in-out infinite;
}
@keyframes floatLogo {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-11px) rotate(5deg); }
}

.title {
  font-family: 'Titan One', cursive;
  font-size: clamp(38px, 9vw, 56px);
  line-height: 1.05;
  color: var(--leaf);
  text-shadow: 3px 3px 0 var(--forest-dark), 5px 5px 0 rgba(0,0,0,0.3);
  text-align: center;
}
.title span {
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--gold-dark), 5px 5px 0 rgba(0,0,0,0.3);
}

.tagline {
  font-size: 15px; font-weight: 700;
  color: var(--mist); opacity: 0.7;
  text-align: center; max-width: 280px;
}

.how-to {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 14px 22px;
  backdrop-filter: blur(8px);
}
.how-item { font-size: 14px; font-weight: 700; color: var(--mist); display: flex; align-items: center; gap: 6px; }
.how-icon { font-size: 16px; }

.best-wrap {
  font-size: 17px; font-weight: 900; color: var(--gold);
  background: rgba(0,0,0,0.3);
  border: 2px solid rgba(245,200,66,0.3);
  border-radius: 50px; padding: 5px 22px;
}

.btn-main {
  font-family: 'Titan One', cursive;
  font-size: 22px; letter-spacing: 1px;
  background: linear-gradient(145deg, var(--leaf) 0%, var(--forest-bright) 100%);
  color: var(--forest-dark);
  border: none; border-radius: 50px;
  padding: 13px 48px; cursor: pointer;
  box-shadow: 0 6px 0 var(--forest-dark), 0 10px 28px rgba(80,200,80,0.3);
  transition: transform .1s, box-shadow .1s;
}
.btn-main:active { transform: translateY(4px);  box-shadow: 0 2px 0 var(--forest-dark); }

.btn-secondary {
  font-family: 'Titan One', cursive;
  font-size: 15px; letter-spacing: 1px;
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px; padding: 7px 22px; cursor: pointer;
  margin-top: 4px;
}

.game-btns {
  display: flex; gap: 10px; align-items: center; margin-top: 4px;
}

.btn-home {
  font-family: 'Titan One', cursive;
  font-size: 15px; letter-spacing: 1px;
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px; padding: 7px 22px; cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: color .2s, border-color .2s;
}

/* ── HUD ─────────────────────────────────────────────── */
.hud {
  width: 100%; max-width: 380px;
  display: flex; align-items: flex-start;
  padding: 10px 16px 8px;
  background: rgba(0,0,0,0.45);
  border-bottom: 2px solid var(--panel-border);
  border-radius: 14px 14px 0 0;
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.hud-cell { display: flex; flex-direction: column; min-width: 64px; }
.hud-center { flex: 1; align-items: center; }
.hud-right  { align-items: flex-end; }
.hud-label  { font-size: 9px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: var(--leaf); opacity: 0.65; }
.hud-val    { font-family: 'Titan One', cursive; font-size: 28px; line-height: 1.1; }
.gold       { color: var(--gold); text-shadow: 0 0 10px rgba(245,200,66,0.4); }

.timer-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.timer-bar-bg { width: 64px; height: 5px; background: rgba(255,255,255,0.12); border-radius: 3px; overflow: hidden; border: 1px solid rgba(126,217,87,0.2); }
.timer-bar { height: 100%; width: 100%; background: var(--leaf); border-radius: 3px; transition: width 1s linear, background .3s; }
.timer-bar.warn   { background: var(--gold); }
.timer-bar.danger { background: var(--red); }

/* ── GAME BOARD ──────────────────────────────────────── */
.game-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 14px;
  width: 100%; max-width: 380px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--panel-border);
  border-top: none;
  border-radius: 0 0 18px 18px;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.pad {
  aspect-ratio: 1;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  transition: transform .08s;
}
.pad:active { transform: scale(0.92); }

.pad-inner {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3d9e38 0%, #1a5e1a 60%, #0d3d0d 100%);
  border: 3px solid rgba(126,217,87,0.35);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.4);
}

/* Lily vein lines on pad */
.pad-inner::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(to bottom, transparent 48%, rgba(0,0,0,0.15) 50%, transparent 52%),
    linear-gradient(to right,  transparent 48%, rgba(0,0,0,0.12) 50%, transparent 52%);
}

.pad.miss .pad-inner {
  animation: missFlash .4s ease;
  border-color: rgba(232,85,53,0.8) !important;
}
@keyframes missFlash {
  0%,100% { box-shadow: inset 0 4px 8px rgba(0,0,0,0.4), 0 0 0 0 rgba(232,85,53,0.8); }
  50%      { box-shadow: inset 0 4px 8px rgba(0,0,0,0.4), 0 0 0 14px rgba(232,85,53,0); }
}

/* ── FROG ON PAD ─────────────────────────────────────── */
.frog-canvas {
  position: absolute;
  inset: 8%;
  pointer-events: none;
  z-index: 2;
}
.frog-canvas.hop-in  { animation: hopIn  .55s cubic-bezier(.36,1.56,.64,1) forwards; }
.frog-canvas.hop-out { animation: hopOut .35s ease-in forwards; }
.frog-canvas.caught  { animation: caught .5s cubic-bezier(.36,1.56,.64,1) forwards; }

@keyframes hopIn {
  0%   { transform: scale(0.1) translateY(30%) rotate(20deg); opacity: 0; }
  60%  { transform: scale(1.15) translateY(-8%) rotate(-5deg); opacity: 1; }
  100% { transform: scale(1) translateY(0) rotate(0); opacity: 1; }
}
@keyframes hopOut {
  0%   { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(0.15) translateY(-40%) rotate(25deg); opacity: 0; }
}
@keyframes caught {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(1.5) rotate(-15deg); filter: brightness(1.8); }
  100% { transform: scale(0.1) translateY(-50%); opacity: 0; }
}

/* ── SCORE POP ───────────────────────────────────────── */
.score-pop {
  position: fixed;
  font-family: 'Titan One', cursive;
  font-size: 26px;
  pointer-events: none;
  z-index: 50;
  animation: scorePop .8s cubic-bezier(.36,1.56,.64,1) forwards;
}
@keyframes scorePop {
  0%   { opacity:1; transform: translateY(0) scale(.7); }
  40%  { opacity:1; transform: translateY(-30px) scale(1.1); }
  100% { opacity:0; transform: translateY(-70px) scale(.9); }
}

/* ── TOAST ───────────────────────────────────────────── */
.toast {
  font-family: 'Titan One', cursive;
  font-size: 22px;
  color: var(--white);
  min-height: 28px;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  transition: opacity .2s;
}

/* ── COMBO BANNER ────────────────────────────────────── */
.combo-banner {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.5);
  font-family: 'Titan One', cursive;
  font-size: 44px;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--forest-dark), 0 0 20px rgba(245,200,66,0.6);
  pointer-events: none; z-index: 60;
  animation: comboPop 1s cubic-bezier(.36,1.56,.64,1) forwards;
}
@keyframes comboPop {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.4); }
  25%  { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-65%) scale(.9); }
}

/* ── PARTICLE ────────────────────────────────────────── */
.particle {
  position: fixed; pointer-events: none; border-radius: 50%; z-index: 55;
  animation: particleFly var(--dur) ease-out forwards;
}
@keyframes particleFly {
  0%   { opacity:1; transform:translate(0,0) scale(1); }
  100% { opacity:0; transform:translate(var(--tx),var(--ty)) scale(.2); }
}

/* ── OVER SCREEN ─────────────────────────────────────── */
.over-frog { font-size: 72px; animation: floatLogo 2s ease-in-out infinite; }
.over-title {
  font-family: 'Titan One', cursive;
  font-size: 48px;
  color: var(--leaf);
  text-shadow: 3px 3px 0 var(--forest-dark);
}
.over-stats {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 16px 40px;
  backdrop-filter: blur(8px); min-width: 220px;
}
.stat-row { display: flex; justify-content: space-between; gap: 32px; font-size: 19px; font-weight: 700; }
.stat-row span { color: var(--mist); opacity: .7; }
.stat-row strong { font-family: 'Titan One', cursive; font-size: 22px; }
.new-best {
  font-family: 'Titan One', cursive; font-size: 16px;
  color: var(--gold); text-align: center;
  text-shadow: 0 0 12px rgba(245,200,66,.6);
  animation: pulse 1s ease-in-out infinite;
  letter-spacing: 2px;
}
.new-best.hidden { display: none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── SHAKE ───────────────────────────────────────────── */
.shake { animation: shake .3s ease; }
@keyframes shake {
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-5px,2px)}
  40%{transform:translate(5px,-2px)}
  60%{transform:translate(-3px,3px)}
  80%{transform:translate(3px,-2px)}
}