/* ------------------------------------------------------------------
   Pixel frame · shared by the pixel-art prototypes (Tower Jump, Fish Leap)
   180×320 canvas scaled up with nearest-neighbour filtering, plus HUD,
   toast and start/game-over overlay. Each game sizes .px-frame from JS.
------------------------------------------------------------------ */

.px-stage {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  background: #1b2a31;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: none;   /* no double-tap zoom, pinch or scroll while tapping to play */
}

.px-frame {
  position: relative;
  /* 9:16; tower.js sets the exact height to fit under the header */
  height: min(calc(100vh - 96px), calc((100vw - 32px) * 16 / 9));
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  touch-action: none;
  cursor: pointer;
}

.px-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.px-hud,
.px-overlay,
.px-toast {
  font-family: 'Press Start 2P', monospace;
  color: #f1f7ee;
  text-shadow: 2px 2px 0 #1b2a31;
  pointer-events: none;
}

.px-hud {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  font-size: clamp(9px, 2.4vh, 13px);
}
.px-hud b { color: #f7c948; font-weight: 400; }

.px-toast {
  position: absolute;
  top: 18%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(10px, 2.6vh, 15px);
  color: #f7c948;
  animation: px-toast 1.8s ease forwards;
}
@keyframes px-toast {
  0%   { opacity: 0; transform: translateY(8px); }
  15%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

.px-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: rgba(27, 42, 49, 0.72);
  font-size: clamp(8px, 1.9vh, 11px);
  line-height: 1.9;
}
.px-overlay[hidden] { display: none; }
.px-overlay p { margin: 0; }
.px-big { font-size: clamp(16px, 4vh, 26px); color: #ff2959; line-height: 1.3; }
.px-blink { color: #f7c948; animation: px-blink 1s steps(2, start) infinite; }
@keyframes px-blink { to { visibility: hidden; } }