/* Vice City Stories — arcade intro screen (index.html only) */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
#wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 960px;
  transform-origin: 0 0;
}
#zoomer {
  position: absolute;
  inset: 0;
  transform-origin: 300px 310px;
}
#zoomer.zoom {
  transition: transform 0.85s cubic-bezier(0.55, 0, 0.85, 0.35);
  transform: scale(3.6);
}
#cab {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
#screenBox {
  position: absolute;
  left: 100px;
  top: 160px;
  width: 400px;
  height: 300px;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 30px #000;
}
#screen {
  width: 400px;
  height: 300px;
  image-rendering: pixelated;
  display: block;
}
#crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}
#glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 24px;
  background:
    linear-gradient(235deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 16%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 25%);
}
#mqGlass {
  position: absolute;
  left: 60px;
  top: 45px;
  width: 480px;
  height: 80px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.85),
    inset 0 2px 3px rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 40%);
}
#fx {
  position: absolute;
  left: -300px;
  top: -100px;
  pointer-events: none;
}
.btn {
  position: absolute;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  touch-action: none;
  cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #2a2238, #07040c);
  box-shadow:
    0 0 0 3px #1a1428,
    0 0 0 4.5px #8a83a0,
    0 5px 6px rgba(0, 0, 0, 0.7),
    inset 0 2px 3px rgba(255, 255, 255, 0.12);
}
.btn.s {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
}
.btn i {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  transition:
    transform 0.05s,
    box-shadow 0.05s,
    filter 0.05s;
  background: radial-gradient(circle at 38% 30%, var(--hi), var(--c) 55%, var(--lo));
  box-shadow:
    0 6px 0 var(--lo),
    0 8px 8px rgba(0, 0, 0, 0.6),
    0 0 12px var(--glow);
}
.btn.s i {
  inset: 5px;
}
.btn i::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 10%;
  width: 46%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn.on i {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 var(--lo),
    0 2px 3px rgba(0, 0, 0, 0.6),
    0 0 22px var(--glow);
  filter: brightness(1.35);
}
#joy {
  position: absolute;
  left: 80px;
  top: 490px;
  width: 120px;
  height: 140px;
  touch-action: none;
  cursor: grab;
}
#joy:active {
  cursor: grabbing;
}
#coin {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  touch-action: none;
  cursor: grab;
  z-index: 6;
  will-change: transform;
  filter: drop-shadow(0 0 8px rgba(255, 210, 60, 0.8));
}
#coin.drag {
  cursor: grabbing;
}
#flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
}