/* ant-farm hd: the HD layer sits exactly over the classic canvas. Once it has painted its
   first frame (html.pip-hd) the classic canvas goes transparent but keeps drawing and
   receiving input, so ?hd=0 or any fallback returns the original look instantly. */
#farm-stage { position: relative; }
#farm-stage .hd-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 12px;
  display: block;
}
html.pip-hd #game-canvas { opacity: 0; }
html.pip-hd #game-canvas:focus-visible { opacity: .001; }
html.pip-hd .hud .btn,
html.pip-hd #game-overlay .btn {
  background: linear-gradient(180deg, #f59e0b, #b45309);
  color: #fff;
  border: 0;
  box-shadow: 0 2px 0 #7c3a06, 0 6px 12px rgba(120, 60, 6, .3);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
}
html.pip-hd .hud .btn:active,
html.pip-hd #game-overlay .btn:active { transform: translateY(2px) scale(.97); box-shadow: 0 0 0 #7c3a06; }
html.pip-hd #game-overlay { background: radial-gradient(circle at 50% 40%, rgba(60, 35, 10, .78), rgba(15, 10, 4, .93)); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: reduce) {
  html.pip-hd .hud .btn, html.pip-hd #game-overlay .btn { transition: none; }
}
.hd-about { margin: 1.25rem 0 .5rem; }
.hd-about h2 { margin: 0 0 .5rem; }
.hd-about p { margin: 0 0 .6rem; line-height: 1.55; }