/* fish-tank hd: the HD aquarium 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 taps, so
   ?hd=0 or any fallback returns the original look instantly. */
#tank-wrap .hd-layer { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; display: block; border-radius: 12px; }
#end-overlay { z-index: 3; }
html.pip-hd #game-canvas { opacity: 0; }
html.pip-hd #game-canvas:focus-visible { opacity: .001; }
html.pip-hd #tank-wrap { border-radius: 14px; box-shadow: 0 0 0 4px #7ab6cf, 0 0 0 7px #1f6f8f, 0 12px 24px rgba(8, 50, 70, .3); }
html.pip-hd #end-overlay { background: radial-gradient(circle at 50% 40%, rgba(8, 40, 62, .88), rgba(3, 14, 26, .95)); backdrop-filter: blur(3px); border-radius: 14px; }
html.pip-hd .hud .btn, html.pip-hd #end-overlay .btn {
  background: linear-gradient(180deg, #38bdf8, #0369a1); color: #fff; border: 0;
  box-shadow: 0 3px 0 #054c78, 0 8px 14px rgba(3, 70, 110, .25);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
}
html.pip-hd .hud .btn:active, html.pip-hd #end-overlay .btn:active { transform: translateY(3px) scale(.98); box-shadow: 0 0 0 #054c78; }
html.pip-hd .meter { height: 12px; background: #cfe6f0; box-shadow: inset 0 1px 2px rgba(8, 60, 80, .3); }
.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 #end-overlay .btn { transition: none; } }