/* evolution-sim hd: the HD pond layer sits exactly over the classic canvas. After its first painted
   frame (html.pip-hd) the classic canvas goes transparent but keeps drawing and taking input, so
   ?hd=0 or any fallback returns the original look instantly. */
#play-area .hd-layer { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; display: block; border-radius: 12px; }
#over-overlay { z-index: 5; }
html.pip-hd #game-canvas { opacity: 0; }
html.pip-hd #game-canvas:focus-visible { opacity: .001; }
html.pip-hd #play-area { border-radius: 14px; box-shadow: 0 0 0 3px #0b5f73, 0 10px 22px rgba(8, 60, 70, .28); }
html.pip-hd #over-overlay { background: radial-gradient(circle at 50% 40%, rgba(8, 52, 66, .86), rgba(4, 22, 30, .95)); backdrop-filter: blur(3px); border-radius: 14px; }
html.pip-hd .hud .btn:not(.btn-ghost), html.pip-hd #over-overlay .btn {
  background: linear-gradient(180deg, #34d399, #0f8f6a); color: #fff; border: 0;
  box-shadow: 0 3px 0 #0a5f47, 0 8px 14px rgba(8, 80, 60, .25);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
}
html.pip-hd .hud .btn:not(.btn-ghost):active, html.pip-hd #over-overlay .btn:active { transform: translateY(3px) scale(.98); box-shadow: 0 0 0 #0a5f47; }
html.pip-hd .evo-bar { height: 11px; background: #cfe9ee; box-shadow: inset 0 1px 2px rgba(8, 60, 70, .3); }
html.pip-hd .evo-bar i { background: linear-gradient(180deg, #4fd1b0, #0f9d84); }
html.pip-hd #nutri-bar { background: linear-gradient(180deg, #a3e635, #4d9d1c); }
.hd-about { max-width: 400px; margin: 1.25rem auto .5rem; }
.hd-about h2 { margin: 0 0 .5rem; }
.hd-about p { margin: 0 0 .6rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { html.pip-hd .hud .btn, html.pip-hd #over-overlay .btn { transition: none; } }