/* Keep the whole cabinet in view; only its screen scrolls. */
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  isolation: isolate;
  background: #080613;
}

.arcade-room {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #090515;
  pointer-events: none;
}

.room-photo {
  position: absolute;
  inset: -5%;
  background: url('arcade-room.png') center / cover no-repeat;
  filter: blur(5px) brightness(.48) saturate(1.13);
  transform: scale(1.04);
}

/* Blurred silhouettes provide a little independent motion around the machines. */
.room-player {
  position: absolute;
  bottom: 4%;
  width: 5.5vw;
  height: 28vh;
  min-width: 35px;
  border-radius: 40% 40% 18% 18%;
  background: linear-gradient(90deg, #101024, #231440 55%, #080816);
  opacity: .57;
  filter: blur(5px);
  transform-origin: bottom center;
  animation: player-sway 2.7s ease-in-out infinite alternate;
}

.room-player::before {
  content: '';
  position: absolute;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #160f2a;
  left: 16%;
  top: -19%;
}

.room-player::after {
  content: '';
  position: absolute;
  width: 70%;
  height: 12%;
  border-radius: 30px;
  background: #25173b;
  top: 36%;
  right: -45%;
  transform-origin: left center;
  animation: playing-arm 1.2s ease-in-out infinite alternate;
}

.player-left { left: 11%; }
.player-right { right: 10%; bottom: 9%; animation-delay: -1.1s; transform: scaleX(-1); }
.player-right::after { animation-delay: -.5s; }

.ambient { display: none; }

.arcade {
  width: min(890px, calc(100vw - 24px));
  height: min(100dvh, 1000px);
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto 27px;
  filter: drop-shadow(0 16px 40px #03020be9);
}

.cabinet-top {
  padding-top: 5px;
  padding-bottom: 7px;
  border-width: 6px;
}

.cabinet-top h1 {
  font-size: clamp(40px, 4.4vw, 60px);
}

.marquee-kicker { margin: 3px 0 4px; font-size: 8px; }
.marquee-sub { margin: 4px 0 1px; font-size: 8px; }

.cabinet-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 10px;
}

.screen-bezel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.screen-head,
.screen-bottom { flex: none; }

.screen {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  overscroll-behavior: contain;
}

.control-deck {
  height: 181px;
  padding: 6px 4% 5px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.deck-title { padding-bottom: 4px; }
.controls { min-height: 0; padding: 4px 0 2px; }
.control-label { margin-bottom: 2px; font-size: 8px; }
.joystick { width: 138px; height: 76px; grid-template-columns: 31px 55px 31px; grid-template-rows: 22px 39px 22px; }
.joy-stick { transform: scale(.8); }
.control-hint { display: none; }
.arcade-button { width: 48px; height: 48px; }
.button-legends { display: none; }
.tracker-button { width: 122px; height: 52px; margin-top: 3px; font-size: 15px; }
.tracker-caption { margin-top: 5px; font-size: 8px; }
.deck-footer { padding-top: 3px; }
.cabinet-base { height: 27px; }
.cabinet-base span { line-height: 20px; font-size: 20px; }
.outside-note { display: none; }

@keyframes player-sway {
  from { rotate: -3deg; translate: -3px 0; }
  to { rotate: 3deg; translate: 4px -3px; }
}

@keyframes playing-arm {
  from { transform: rotate(-8deg); }
  to { transform: rotate(9deg); }
}

@media (max-width: 800px) {
  .arcade { width: min(100vw - 12px, 890px); }
  .cabinet-top h1 { font-size: clamp(39px, 5.8vw, 56px); }
  .cabinet-body { padding-top: 7px; padding-bottom: 7px; }
}

@media (max-width: 580px) {
  .arcade {
    width: calc(100vw - 4px);
    grid-template-rows: auto minmax(0, 1fr) auto 17px;
  }
  .cabinet-top { padding-top: 7px; padding-bottom: 6px; }
  .cabinet-top h1 { font-size: clamp(36px, 9.2vw, 52px); }
  .marquee-kicker { margin: 3px 0; }
  .marquee-sub { margin: 5px 0 0; }
  .cabinet-body { padding-top: 5px; padding-bottom: 5px; }
  .screen { height: auto; min-height: 0; }
  .control-deck { height: 236px; padding: 5px 2% 4px; }
  .controls { padding: 6px 0 4px; gap: 4px 2px; }
  .control-label { margin-bottom: 2px; }
  .joystick { height: 76px; }
  .arcade-buttons { gap: 5px; padding: 0; }
  .arcade-button { width: 42px; height: 42px; }
  .tracker-area { padding-top: 5px; }
  .tracker-button { height: 45px; }
  .tracker-caption { margin-top: 0; }
  .deck-footer { margin-top: 4px; padding-top: 5px; }
  .cabinet-base { height: 17px; border-width: 4px; }
  .cabinet-base span { font-size: 12px; line-height: 9px; }
  .room-player { display: none; }
}

@media (max-height: 800px) and (min-width: 581px) {
  .hero-layout { grid-template-columns: 1fr; }
  .hero-panel .mile-display { display: none; }
  .hero-panel h2 { font-size: clamp(42px, 4.4vw, 58px); }
  .hero-panel { padding-top: 24px; }
  .hero-layout { padding-top: 10px; }
}

@media (max-height: 690px) {
  .cabinet-top { padding-top: 7px; padding-bottom: 8px; }
  .cabinet-top h1 { font-size: clamp(33px, 5vw, 60px); }
  .marquee-kicker { display: none; }
  .marquee-sub { margin: 4px 0 0; }
  .control-deck { padding-top: 5px; padding-bottom: 5px; }
  .controls { padding-top: 4px; padding-bottom: 3px; }
  .joystick { height: 75px; }
  .tracker-button { height: 48px; }
  .button-legends,
  .control-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .room-player,
  .room-player::after { animation: none; }
}