:root {
  --sky: #f8efc5;
  --ink: #26361c;
  --muted: #687756;
  --leaf: #5e9b43;
  --leaf-dark: #315d2c;
  --soil: #6a412a;
  --soil-dark: #382217;
  --cream: #fff9df;
  --orange: #ef6a2e;
  --yellow: #ffd64a;
  --panel: rgba(255, 249, 223, .9);
  --atlas: url('assets/bug-atlas.png');
}

[data-theme="dark"] {
  --sky: #132014;
  --ink: #f6f2ce;
  --muted: #afbb93;
  --panel: rgba(29, 43, 25, .94);
  --leaf: #487c37;
  --leaf-dark: #244c28;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 24px 16px 76px;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 12%, rgba(255,214,74,.22) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 22%, rgba(255,255,255,.2) 0 4px, transparent 5px),
    linear-gradient(160deg, var(--sky), color-mix(in srgb, var(--sky), #87b96d 18%));
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  touch-action: manipulation;
  user-select: none;
  overflow-x: hidden;
}

body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 280px;
  height: 280px;
  border-radius: 45% 55% 50% 40%;
  background: rgba(78,137,62,.13);
  transform: rotate(24deg);
}
body::before { left: -120px; top: -100px; }
body::after { right: -140px; bottom: -80px; transform: rotate(-32deg); }

.game-shell { width: min(94vw, 520px); margin: 0 auto; text-align: center; }
.game-header { margin-bottom: 10px; }
.eyebrow, .overlay-kicker {
  margin: 0 0 2px;
  color: var(--orange);
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .2em;
}
h1 { margin: 0; font-size: clamp(2.4rem, 10vw, 3.8rem); line-height: .95; letter-spacing: -.07em; text-shadow: 0 3px 0 rgba(255,255,255,.18); }
h1 span { color: var(--orange); }
#game-status { min-height: 1.4em; margin: 10px 0 0; color: var(--muted); font-size: .93rem; font-weight: 700; }

#stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 8px; }
.stat-card {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ink), transparent 84%);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 4px 0 rgba(38,54,28,.1);
}
.stat-label { display: block; color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.stat-card strong { display: block; font-size: 1.35rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.streak-card.hot { color: var(--orange); border-color: rgba(239,106,46,.55); }

#rush-meter { height: 5px; margin: 0 4px 9px; border-radius: 99px; overflow: hidden; background: rgba(38,54,28,.13); }
#rush-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yellow), var(--orange)); transition: width .4s ease; }

#playfield { position: relative; }
#board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 2.7vw, 15px);
  padding: clamp(14px, 4vw, 22px);
  border: 5px solid rgba(255,255,255,.26);
  border-radius: 32px;
  background:
    radial-gradient(circle at 8% 12%, #f7d94c 0 3px, transparent 4px),
    radial-gradient(circle at 92% 16%, #fff1ad 0 3px, transparent 4px),
    radial-gradient(circle at 17% 88%, #e9724c 0 4px, transparent 5px),
    repeating-radial-gradient(circle at 30% 30%, transparent 0 18px, rgba(255,255,255,.025) 19px 20px),
    linear-gradient(145deg, var(--leaf), var(--leaf-dark));
  box-shadow: 0 16px 34px rgba(32,53,24,.25), inset 0 0 0 2px rgba(0,0,0,.12);
}

.hole {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 48% 52% 47% 53%;
  background: radial-gradient(ellipse at 50% 42%, var(--soil-dark) 0 53%, var(--soil) 55% 72%, #456d32 74% 100%);
  box-shadow: inset 0 8px 10px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.14);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.hole::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%; bottom: 10%; height: 12%;
  border-radius: 50%; background: rgba(0,0,0,.32); filter: blur(3px); opacity: 0;
}
.hole:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.hole.rustling { animation: rustle .12s linear 2; }
.hole.rustling::before {
  content: "•  ·  •";
  position: absolute; inset: 18% 0 auto;
  color: #a9784f; font-size: 1.15rem; font-weight: 1000;
  animation: dirt-pop .28s ease-out;
}
@keyframes rustle { 50% { transform: rotate(1.6deg) scale(1.02); } }
@keyframes dirt-pop { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(-6px); opacity: 1; } }

.bug {
  position: absolute;
  left: 7%; top: 5%; width: 86%; height: 86%;
  background-image: var(--atlas);
  background-repeat: no-repeat;
  background-size: 200% 200%;
  transform: translateY(108%) scale(.55);
  opacity: 0;
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.3));
  transition: transform 180ms cubic-bezier(.2,1.5,.45,1), opacity 100ms;
  pointer-events: none;
  will-change: transform;
}
.bug.ladybug { background-position: 0 0; }
.bug.caterpillar { background-position: 100% 0; }
.bug.beetle { background-position: 0 100%; }
.bug.golden { background-position: 100% 100%; }
.hole.active .bug { transform: translateY(0) scale(1); opacity: 1; animation: bug-bob .65s ease-in-out infinite alternate; }
.hole.active::after { opacity: 1; }
@keyframes bug-bob { to { transform: translateY(-4%) rotate(-2deg) scale(1.02); } }
.hole.fast.active { box-shadow: inset 0 8px 10px rgba(0,0,0,.5), 0 0 0 4px rgba(83,190,255,.75); }
.hole.bonus.active { box-shadow: inset 0 8px 10px rgba(0,0,0,.45), 0 0 0 5px rgba(255,214,74,.85), 0 0 22px rgba(255,214,74,.7); }
.hole.escaping { animation: danger-pulse .3s ease-in-out infinite alternate; }
.hole.escaping .bug { animation: scurry var(--escape-dur, 600ms) ease-in forwards; }
@keyframes danger-pulse { to { box-shadow: inset 0 8px 10px rgba(0,0,0,.5), 0 0 0 5px rgba(239,106,46,.75); } }
@keyframes scurry {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  28% { transform: translateY(-15%) rotate(-9deg); }
  58% { transform: translate(18%,-55%) rotate(12deg); opacity: 1; }
  100% { transform: translate(55%,-145%) rotate(24deg) scale(.65); opacity: 0; }
}
.hole.squashed .bug { animation: squish .22s ease-out forwards; opacity: 1; }
@keyframes squish { 45% { transform: translateY(22%) scale(1.22,.48); } 100% { transform: translateY(28%) scale(1.4,.18); opacity: 0; } }
.hole.splat::before { content: "✦"; position: absolute; inset: 25%; color: #b8df64; font-size: 2rem; animation: splat .35s ease-out; }
@keyframes splat { from { transform: scale(.3) rotate(0); opacity: 1; } to { transform: scale(1.7) rotate(35deg); opacity: 0; } }

.score-pop { position: absolute; z-index: 8; transform: translate(-50%,-50%); color: var(--yellow); font-weight: 1000; font-size: 1.25rem; text-shadow: 0 2px 0 #6b381c, 0 3px 6px #000; pointer-events: none; animation: pop-rise .7s ease-out forwards; }
.score-pop em { display: block; color: #fff; font-size: .55em; font-style: normal; letter-spacing: .08em; }
@keyframes pop-rise { 0% { opacity: 0; transform: translate(-50%,-20%) scale(.4); } 25% { opacity: 1; transform: translate(-50%,-95%) scale(1.18); } 100% { opacity: 0; transform: translate(-50%,-190%) scale(.9); } }
.impact { position: absolute; z-index: 7; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); pointer-events:none; animation: particle .45s ease-out forwards; }
@keyframes particle { to { transform: translate(var(--dx),var(--dy)) scale(0); opacity: 0; } }
#playfield.shake { animation: shake .16s linear; }
@keyframes shake { 33% { transform: translate(-3px,2px); } 66% { transform: translate(3px,-1px); } }

.rush-callout { position: absolute; z-index: 9; left: 50%; top: 47%; transform: translate(-50%,-50%) scale(.4) rotate(-6deg); color: var(--yellow); font-size: clamp(2.2rem,12vw,4.5rem); font-weight: 1000; line-height:.85; text-shadow: 0 5px 0 var(--orange), 0 8px 20px #1a1a0c; opacity:0; pointer-events:none; }
#playfield.rush .rush-callout { animation: rush-call 1s ease-out forwards; }
@keyframes rush-call { 25% { opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(-3deg); } 75% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-75%) scale(1); } }
#playfield.rush #board { animation: rush-glow .7s ease-in-out infinite alternate; }
@keyframes rush-glow { to { box-shadow: 0 16px 34px rgba(239,106,46,.35), inset 0 0 0 3px rgba(255,214,74,.28); } }

#overlay { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:20px; border-radius:30px; background:rgba(19,32,20,.68); backdrop-filter:blur(5px); }
#overlay.hidden, .hidden { display:none !important; }
.overlay-card { width:min(100%,370px); padding:24px 24px 20px; border:2px solid rgba(255,255,255,.28); border-radius:24px; background:var(--panel); color:var(--ink); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.overlay-card h2 { margin:0 0 6px; font-size:2rem; letter-spacing:-.04em; }
.overlay-score { margin:0 auto 12px; max-width:290px; color:var(--muted); font-size:.9rem; line-height:1.35; }
.bug-cast { display:flex; justify-content:center; gap:3px; margin:3px auto 12px; }
.cast-bug { width:54px; height:54px; background-image:var(--atlas); background-repeat:no-repeat; background-size:200% 200%; filter:drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.cast-bug.ladybug { background-position:0 0; }.cast-bug.caterpillar { background-position:100% 0; }.cast-bug.beetle { background-position:0 100%; }.cast-bug.golden { background-position:100% 100%; }
.best-line { margin:0 0 10px; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
#play-btn { min-width:150px; padding:12px 26px; border:0; border-radius:14px; color:#fff; background:linear-gradient(#f98545,var(--orange)); box-shadow:0 5px 0 #a23b19; font-family:inherit; font-size:1.05rem; font-weight:1000; cursor:pointer; }
#play-btn:hover { transform:translateY(-1px); filter:brightness(1.05); }
#play-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #a23b19; }
.overlay-stats { list-style:none; margin:0 auto 14px; padding:0; max-width:250px; color:var(--muted); font-size:.9rem; }
.overlay-stats li { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed rgba(100,120,80,.24); }.overlay-stats li span:last-child { color:var(--ink); font-weight:1000; }

#controls { display:flex; justify-content:center; gap:8px; margin-top:12px; }
#controls button { width:38px; height:34px; padding:0; border:1px solid rgba(100,120,80,.28); border-radius:10px; color:var(--ink); background:var(--panel); cursor:pointer; opacity:.72; }
#controls button:hover { opacity:1; transform:translateY(-1px); }
.combo-bump { animation:combo-bump .3s ease-out; } @keyframes combo-bump { 40% { transform:scale(1.45) rotate(-5deg); color:var(--orange); } }

.potato-home-link { position:fixed; left:14px; bottom:14px; z-index:20; padding:7px 10px; border-radius:999px; color:#fff7e8; background:rgba(23,19,13,.78); border:1px solid rgba(255,247,232,.18); font:700 12px system-ui,sans-serif; text-decoration:none; backdrop-filter:blur(10px); }
button:focus-visible,.potato-home-link:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }

@media (max-width:640px) {
  body { padding-top:20px; }
  .game-shell { width:min(96vw,460px); }
  h1 { font-size:2.75rem; }
  #game-status { margin-top:7px; font-size:.82rem; }
  #stats { margin-top:9px; }
  .stat-card { padding:6px; }
  .stat-card strong { font-size:1.15rem; }
  #board { border-radius:25px; }
  #overlay { border-radius:24px; }
  .overlay-card { padding:18px; }
  .potato-home-link { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}