/* Neuriosity — Fish Tracker playfield.
   Shared chrome lives in ../_shared/game-kit.css */

/* The tank takes whatever room is left after the HUD and status line, and
   stays square so a fish never crosses the screen faster on a phone than it
   does on a desktop. */
/* The stage takes whatever height is left after the HUD and status line; the
   tank then fills it and derives its width from the aspect ratio, so it is
   square on every screen instead of being squashed by whichever side runs
   out first. */
.ft-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.ft-tank {
  position: relative;
  height: 100%;
  aspect-ratio: 1;
  max-width: min(100%, calc(var(--gu) * 86));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, #ffffff, #e6f7fb 62%, #cdeef6);
  border: calc(var(--gu) * 0.34) solid rgba(14, 124, 155, 0.28);
  border-radius: calc(var(--gu) * 3.4);
  box-shadow: inset 0 calc(var(--gu) * 1.4) calc(var(--gu) * 3) rgba(6, 43, 99, 0.05);
}

.ft-tank canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}