/* Cabinet — bezel + tube + CRT overlay + vignette. Shared between all
   arcade games. Visual fidelity preserved verbatim from rocket-ship. */

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Bezel: dark gradient simulating molded plastic frame, with a soft inner
     shadow giving the bezel depth. */
  background:
    linear-gradient(180deg, #2a2724 0%, #1a1815 50%, #100e0c 100%);
  padding: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 6px rgba(0, 0, 0, 0.6);
}

/* The tube — inset darker than the bezel, pronounced rounded glass corners
   for that bulbous old-CRT look. */
.tube {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  border-radius: 36px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 0 40px rgba(0, 0, 0, 0.85),
    0 0 0 2px rgba(0, 0, 0, 0.7);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: contrast(1.02) brightness(1.18) saturate(1.3);
}

/* Hide the game canvas until the splash dismisses; the game flips
   `.tube.is-ready` once boot completes. */
.tube canvas { visibility: hidden; }
.tube.is-ready canvas { visibility: visible; }

/* CRT scanlines + RGB sub-pixel overlay. Sits ABOVE any panel so the
   scanlines + vignette read on every screen, not just gameplay.
   pointer-events:none means panels below stay interactive. */
.overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/crt.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  opacity: 0.55;
}
.overlay::before {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  content: " ";
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.1), rgba(0, 255, 0, 0.04), rgba(0, 0, 255, 0.1));
  z-index: 2;
  background-size: 100% 3px, 3px 100%;
  pointer-events: none;
}

/* Softer vignette — corners fade toward the bezel, never fully black. */
.vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.22) 80%,
    rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  z-index: 11;
  border-radius: 36px;
}

/* CRT power-on used by splash + any end-state panel — the screen squashes
   to a thin horizontal line, then snaps open. Also used by launchers to
   bring an embedded game iframe online with the iconic CRT-on feel. */
@keyframes splash-poweron {
  0%   { transform: scale(1, 0.005); filter: brightness(3.5); }
  55%  { transform: scale(1, 0.005); filter: brightness(3.5); }
  80%  { transform: scale(1, 1); filter: brightness(2); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}

/* CRT power-off — somebody yanked the plug. Used by launchers when the
   player closes an embedded game; the iframe scales vertically to a
   bright horizontal line, then a single dot, then fades. */
@keyframes crt-shutoff {
  0%   { transform: scale(1, 1);          opacity: 1; filter: brightness(1)   contrast(1);   }
  8%   { transform: scale(1, 1);          opacity: 1; filter: brightness(1.5) contrast(1.2); }
  35%  { transform: scale(1, 0.015);      opacity: 1; filter: brightness(3.2) contrast(1.8); }
  55%  { transform: scale(1, 0.012);      opacity: 1; filter: brightness(3);              }
  85%  { transform: scale(0.008, 0.012);  opacity: 1; filter: brightness(3.5);            }
  100% { transform: scale(0, 0);          opacity: 0; filter: brightness(2);              }
}

/* Crash shake — apply `.is-shaking` to .tube for a brief frame after a
   significant event (collision, death). */
@keyframes crt-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-3px,  2px) rotate(-0.4deg); }
  20% { transform: translate( 4px, -2px) rotate( 0.3deg); }
  30% { transform: translate(-3px,  3px) rotate(-0.3deg); }
  40% { transform: translate( 3px,  2px) rotate( 0.4deg); }
  50% { transform: translate(-3px, -3px) rotate(-0.3deg); }
  60% { transform: translate( 2px, -3px) rotate( 0.2deg); }
  70% { transform: translate(-2px,  2px) rotate(-0.1deg); }
  80% { transform: translate( 1px, -1px) rotate( 0.1deg); }
  90% { transform: translate(-1px,  1px) rotate(0); }
}
.tube.is-shaking { animation: crt-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* Generic arcade-blink (.start, .go-prompt, etc — used by per-game overlays). */
@keyframes arcade-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}