:root { color-scheme: dark; }
html.dark { background: #0b0b11; }
html:not(.dark) { background: #f3f4f6; }
#bg-canvas { position: fixed; inset: 0; z-index: -1; }
.grid-overlay { background-size: 40px 40px; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); }
.avoid-break { break-inside: avoid; page-break-inside: avoid; }
@media print {
  .no-print { display:none !important; }
  header { position: static !important; }
  #bg-canvas { display:none !important; }
  .grid-overlay, .bg-hero-gradient { background: none !important; }
  body { background: #fff; color:#111; }
  a { color:#000; text-decoration:none; }
  .rounded-2xl { box-shadow: none !important; }
  section, article, aside, header, footer { break-inside: avoid; page-break-inside: avoid; }
}
.frog-clue { cursor: pointer; display: inline-block; }
.frog-clue.poked { animation: frog-poke 0.4s ease; }
@keyframes frog-poke {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.3) rotate(5deg); filter: brightness(1.5); }
}
.poke-bubble {
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  color: #111;
  padding: 5px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 0 1px #111, 1px 1px 0 1px #111, -1px -1px 0 1px #111, -1px 1px 0 1px #111, 1px -1px 0 1px #111;
  transform: translate(-105%, -50%);
  opacity: 0;
  animation: bubble-slide-in 0.5s forwards cubic-bezier(0.25, 1, 0.5, 1);
}
.poke-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -3px;
  margin-top: -3px;
  width: 3px;
  height: 3px;
  background-color: #fff;
  box-shadow: 0 0 0 1px #111;
}
@keyframes bubble-slide-in {
  from { opacity: 0; transform: translate(-120%, -50%); }
  to { opacity: 1; transform: translate(-105%, -50%); }
}