.arcade-preview {
  position: relative;
  scroll-margin-top: 6.2rem;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(217,130,36,.07), transparent 42%),
    #090a08;
}

.arcade-preview::before,
.arcade-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(231,222,200,.08) 3px 4px);
}

.arcade-preview__inner {
  min-height: 34rem;
  padding-block: clamp(3rem, 7vw, 6rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(25rem, 1.18fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
}

.arcade-preview__copy { position: relative; z-index: 1; }
.arcade-preview h2,
.arcade-hero h1,
.cabinet-copy h2,
.arcade-future h2 {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 700;
  line-height: .9;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.arcade-preview h2 { max-width: 9ch; font-size: clamp(3.4rem, 7vw, 6.6rem); }
.arcade-preview__copy > p:not(.section-kicker) { max-width: 31rem; margin: 1.25rem 0 1.6rem; color: var(--muted); font-size: 1.08rem; }
.arcade-preview__machine {
  position: relative;
  margin: 0;
  padding: clamp(.7rem, 1.8vw, 1.15rem);
  border: 1px solid var(--line-strong);
  background: #050604;
  box-shadow: 0 2.2rem 5rem rgba(0,0,0,.58);
  transform: rotate(.35deg);
}
.arcade-preview__machine::after {
  content: "CABINET 001";
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  padding: .45rem .58rem;
  border: 1px solid rgba(231,222,200,.55);
  color: var(--paper);
  background: rgba(5,6,4,.88);
  font: 800 .68rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
}
.arcade-preview__machine img { width: 100%; aspect-ratio: 1200 / 630; display: block; object-fit: cover; }

.arcade-page { background: #060705; }
.arcade-main { overflow: hidden; }
.arcade-hero {
  min-height: 32rem;
  position: relative;
  display: grid;
  align-items: end;
  border-bottom: 1px solid var(--line-strong);
  background:
    linear-gradient(118deg, rgba(217,130,36,.16), transparent 36%),
    linear-gradient(180deg, #12130f, #070806);
}
.arcade-hero__inner { padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 7vw, 5.5rem); position: relative; z-index: 1; }
.arcade-hero__signal { margin: 0 0 .75rem; color: var(--amber); font: 800 .74rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; }
.arcade-hero h1 { font-size: clamp(5rem, 15vw, 11rem); }
.arcade-hero__dek { max-width: 36rem; margin: 1.15rem 0 0; color: var(--paper); font: 500 clamp(1.15rem, 2.3vw, 1.65rem)/1.35 Georgia, "Times New Roman", serif; }

.arcade-floor { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.cabinet-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(24rem, .85fr);
  border: 1px solid var(--line-strong);
  background: #0e0f0c;
  box-shadow: 0 2.2rem 5rem rgba(0,0,0,.46);
}
.cabinet-screen { min-width: 0; padding: clamp(.7rem, 1.7vw, 1.15rem); display: flex; background: #030403; }
.cabinet-screen a { width: 100%; display: block; position: relative; overflow: hidden; border: 1px solid #24251f; }
.cabinet-screen a::after { content: "PLAY"; position: absolute; right: .8rem; bottom: .8rem; padding: .5rem .68rem; border: 1px solid rgba(231,222,200,.62); color: var(--paper); background: rgba(0,0,0,.78); font-size: .72rem; font-weight: 850; letter-spacing: .16em; }
.cabinet-screen img { width: 100%; height: 100%; min-height: 28rem; display: block; object-fit: cover; transition: transform 200ms ease, filter 200ms ease; }
.cabinet-screen a:hover img { transform: scale(1.012); filter: contrast(1.07); }
.cabinet-copy { min-width: 0; padding: clamp(1.6rem, 4vw, 3.6rem); display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); }
.cabinet-number { margin: 0; color: var(--amber); font: 800 .75rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; }
.cabinet-copy h2 { max-width: 100%; margin-top: .85rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.35rem, 3.5vw, 3.25rem); line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.cabinet-tagline { margin: 1rem 0 0; color: var(--paper); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cabinet-description { margin: 1rem 0 0; color: var(--muted); }
.cabinet-controls { margin: 1.6rem 0 1.75rem; padding-block: 1rem; display: flex; flex-wrap: wrap; gap: .55rem 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.cabinet-controls span { display: inline-flex; align-items: center; gap: .35rem; }
.cabinet-controls kbd { min-width: 1.85rem; padding: .18rem .35rem; border: 1px solid #5a574e; color: var(--paper); background: #171813; font: 800 .7rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; }
.cabinet-copy .primary-action { align-self: flex-start; }
.cabinet-exit-note { margin: .8rem 0 0; color: #8f8878; font-size: .74rem; }

.arcade-future {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(1.5rem, 4vw, 3rem) 0 0;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(18rem, 1.2fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  border-top: 1px solid var(--line-strong);
}
.arcade-future h2 { max-width: 9ch; font-size: clamp(2.8rem, 6vw, 5.7rem); }
.arcade-future__note { align-self: end; }
.arcade-future__note p { max-width: 36rem; margin: 0; color: var(--muted); font: 500 clamp(1.05rem, 2vw, 1.35rem)/1.55 Georgia, "Times New Roman", serif; }
.arcade-future__slots { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--line); }
.arcade-future__slots span { min-height: 4rem; padding: 1rem 0; display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--line); color: #777164; font: 800 .7rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .11em; text-transform: uppercase; }
.arcade-future__slots span + span { padding-left: 1rem; border-left: 1px solid var(--line); }
.arcade-future__slots b { color: var(--amber); }

@media (max-width: 900px) {
  .arcade-preview__inner,
  .cabinet-card,
  .arcade-future { grid-template-columns: 1fr; }
  .arcade-preview__machine { transform: none; }
  .cabinet-screen img { min-height: 0; aspect-ratio: 1200 / 630; }
  .cabinet-copy { border-top: 1px solid var(--line); border-left: 0; }
  .arcade-future__note { align-self: start; }
}

@media (max-width: 680px) {
  .arcade-preview__inner { min-height: 0; padding-block: 2.8rem; gap: 2rem; }
  .arcade-preview h2 { font-size: 3.8rem; }
  .arcade-preview__copy > p:not(.section-kicker) { font-size: 1rem; }
  .arcade-preview__machine { padding: .45rem; }
  .arcade-preview__machine::after { right: .75rem; bottom: .75rem; font-size: .61rem; }
  .arcade-hero { min-height: 24rem; }
  .arcade-hero h1 { font-size: clamp(4.1rem, 22vw, 7rem); }
  .arcade-floor { width: 100%; padding-block: 0 3rem; }
  .cabinet-card { border-inline: 0; }
  .cabinet-screen { padding: .45rem; }
  .cabinet-copy { padding: 2rem 1rem 2.5rem; }
  .cabinet-copy h2 { font-size: clamp(2.25rem, 10.5vw, 3.45rem); }
  .cabinet-copy .primary-action { width: 100%; }
  .arcade-future { margin-inline: 1rem; }
  .arcade-future__slots { grid-template-columns: 1fr; }
  .arcade-future__slots span + span { padding-left: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cabinet-screen img { transition: none; }
}

/* The home-page cabinet wall is the Arcade; the old page forwards here. */
.arcade-preview--cabinet-line {
  background:
    radial-gradient(ellipse at 16% 67%, rgba(217,130,36,.13), transparent 37%),
    linear-gradient(180deg, #10110e, #070806 74%);
}
.arcade-preview--cabinet-line .arcade-preview__inner {
  display: block;
  min-height: 0;
  padding-block: clamp(2.8rem, 6vw, 5.3rem) clamp(2.5rem, 5vw, 4rem);
}
.arcade-preview--cabinet-line .arcade-preview__copy {
  display: block;
}
.arcade-preview--cabinet-line h2 {
  max-width: none;
  font-size: clamp(3.2rem, 7.8vw, 7rem);
  white-space: nowrap;
}
.arcade-preview--cabinet-line .arcade-preview__copy > p:not(.section-kicker) {
  margin: .2rem 0 0;
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}
.arcade-preview--cabinet-line .arcade-preview__lineup {
  margin-top: clamp(1.4rem, 3.4vw, 2.8rem);
  display: grid;
  grid-template-columns: 1.34fr repeat(4, 1fr);
  gap: clamp(.25rem, .85vw, .8rem);
  align-items: end;
}
.arcade-preview--cabinet-line .arcade-cabinet {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--paper);
  text-decoration: none;
}
.arcade-preview--cabinet-line .arcade-cabinet img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 27.5rem;
  object-fit: contain;
  object-position: bottom center;
}
.arcade-preview--cabinet-line .arcade-cabinet--unlit img {
  max-height: 21rem;
  filter: brightness(.62) saturate(.55);
}
.arcade-preview--cabinet-line .arcade-cabinet__label {
  min-height: 5.9rem;
  padding: .65rem .2rem .25rem;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #504e44;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.1;
}
.arcade-preview--cabinet-line .arcade-cabinet__label small {
  color: var(--amber);
  font: 800 .58rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.arcade-preview--cabinet-line .arcade-cabinet__label strong {
  margin-top: .2rem;
  font-size: clamp(1.05rem, 1.5vw, 1.65rem);
  font-weight: 700;
}
.arcade-preview--cabinet-line .arcade-cabinet__label b,
.arcade-preview--cabinet-line .arcade-cabinet__label > span {
  margin-top: .2rem;
  font-size: .75rem;
}
.arcade-preview--cabinet-line .arcade-cabinet--live:hover img,
.arcade-preview--cabinet-line .arcade-cabinet--live:focus-visible img {
  filter: brightness(1.1);
}
.arcade-preview--cabinet-line .arcade-cabinet--live:hover .arcade-cabinet__label b,
.arcade-preview--cabinet-line .arcade-cabinet--live:focus-visible .arcade-cabinet__label b { color: var(--amber); }
.arcade-preview--cabinet-line .arcade-cabinet--unlit .arcade-cabinet__label { color: #a49e90; }
.arcade-preview--cabinet-line .arcade-cabinet--unlit .arcade-cabinet__label small { color: #96836c; }
.arcade-preview--cabinet-line .arcade-preview__footnote {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .85rem;
}
.arcade-preview--cabinet-line .arcade-preview__footnote strong { color: var(--paper); }

@media (max-width: 900px) {
  .arcade-preview--cabinet-line h2 { white-space: normal; }
  .arcade-preview--cabinet-line .arcade-preview__lineup {
    width: calc(100vw - 1rem);
    padding: .2rem 1rem .7rem 0;
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }
  .arcade-preview--cabinet-line .arcade-cabinet { flex: 0 0 10rem; scroll-snap-align: start; }
  .arcade-preview--cabinet-line .arcade-cabinet--live { flex-basis: 13.3rem; }
  .arcade-preview--cabinet-line .arcade-cabinet--live img { max-height: 21rem; }
  .arcade-preview--cabinet-line .arcade-cabinet--unlit img { max-height: 17rem; }
}

@media (max-width: 390px) {
  .arcade-preview--cabinet-line h2 { font-size: 3.2rem; }
}