/* ---------------------------------------------------------------------------
   cabinet.css — one tile is one arcade cabinet.

   marquee (lit, the game's colour) → screen (art) → control panel (facts),
   with coloured light spilling onto the floor underneath. The only radius on
   the whole tile is at the top two corners, because that is where a real
   cabinet curves.
--------------------------------------------------------------------------- */

.cab {
  position: relative;
  /* content-visibility implies paint containment, which clips anything drawn
     outside this box — the light spill below and the 3px hover lift above.
     The padding gives both of them room inside the containment box. */
  padding: 4px 0 1.6rem;
  contain-intrinsic-size: auto 22rem;
  content-visibility: auto;
}

.cab__body {
  position: relative;
  isolation: isolate;
  z-index: 1;
  border-radius: 9px 9px 2px 2px;
  overflow: hidden;
  background: var(--riser);
  border: 1px solid var(--edge);
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.95);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}

.cab__link {
  display: block;
}

/* The link's hit area is the entire cabinet, panel included. The two real
   controls sit above it on z-index, so they still get their own clicks. */
.cab__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cab__link:focus-visible {
  outline: none;
}

.cab:has(.cab__link:focus-visible) .cab__body {
  outline: 2px solid var(--attract);
  outline-offset: 2px;
}

/* With a controller (ui/padnav.js), as on a TV's home screen: the cabinet in
   focus lifts and grows over its row, ringed in its own game's colour. */
html.is-pad .cab:has(.cab__link:focus) {
  z-index: 2;
  transform: translateY(-6px) scale(1.04);
  transition: transform 160ms ease-out;
}
html.is-pad .cab:has(.cab__link:focus) .cab__body {
  outline: 3px solid var(--g-light);
  outline-offset: 3px;
  box-shadow:
    0 1.2rem 2.6rem rgba(0, 0, 0, 0.55),
    0 0 2.4rem color-mix(in oklab, var(--g-light) 35%, transparent);
}

/* --- marquee ------------------------------------------------------------ */

.cab__marquee {
  position: relative;
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  padding-block: 0.6rem 0.62rem; padding-inline: 0.85rem 2.35rem;
  /* Translucent plastic lit from behind: brightest across the middle where the
     tube sits, falling off into the metal channel at each edge. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--g-ink) 20%, var(--g-light)) 0%,
    var(--g-light) 26%,
    var(--g-light) 64%,
    color-mix(in srgb, var(--g-ink) 15%, var(--g-light)) 100%
  );
  color: var(--g-ink);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 6px 26px -8px color-mix(in srgb, var(--g-light) 70%, transparent);
}

.cab__name {
  font-size: var(--step-1);
  font-variation-settings: 'wdth' 118, 'wght' 850;
  line-height: 1.02;
  letter-spacing: -0.018em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cab__fave {
  position: absolute;
  z-index: 3;
  top: 0.3rem;
  inset-inline-end: 0.3rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 3px;
  color: var(--g-ink);
  opacity: 0.4;
  transition: opacity 0.16s var(--ease), background 0.16s var(--ease);
}

.cab__fave:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.12);
}

.cab__fave[aria-pressed='true'] {
  opacity: 1;
}

.cab__fave svg {
  width: 1rem;
  height: 1rem;
}

/* --- screen ------------------------------------------------------------- */

.cab__screen {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--g-deep);
  overflow: hidden;
}

.cab__screen > svg,
.cab__screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Specular sheen on the glass, plus the vignette a real tube has. */
.cab__glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(196deg, rgba(255, 255, 255, 0.11) 0%, transparent 38%),
    radial-gradient(130% 96% at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
}

.cab__badge {
  position: absolute;
  inset-inline-start: 0.5rem;
  bottom: 0.5rem;
  padding: 0.16rem 0.44rem;
  border-radius: 2px;
  background: rgba(8, 5, 12, 0.72);
  color: var(--g-light);
  font-size: var(--step--2);
  font-variation-settings: 'wdth' 92, 'wght' 650;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* --- control panel ------------------------------------------------------ */

.cab__panel {
  padding: 0.6rem 0.85rem 0.7rem;
  border-top: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--riser-lit), var(--riser));
}

.cab__tagline {
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--dust);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}

.cab__meta {
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--2);
  color: var(--dust-dim);
  font-variant-numeric: tabular-nums;
}

.cab__meta > * + * {
  padding-inline-start: 0.55rem;
  border-inline-start: 1px solid var(--edge);
}

.cab__info {
  position: relative;
  z-index: 3;
  color: var(--dust);
  font-variation-settings: 'wdth' 92, 'wght' 620;
  border-radius: 2px;
}

.cab__info:hover {
  color: var(--light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A game that plays in a session: the way to play it with friends. */
.cab__friends {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--light);
  font-variation-settings: 'wdth' 92, 'wght' 700;
  white-space: nowrap;
}

.cab__friends .friends-emblem {
  flex: none;
}

.cab__friends:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- light on the floor -------------------------------------------------- */

.cab__spill {
  position: absolute;
  inset-inline-start: -4%;
  inset-inline-end: -4%;
  bottom: 0;
  height: 2.2rem;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background: radial-gradient(50% 108% at 50% -6%, var(--g-glow), transparent 70%);
  transition: opacity 0.24s var(--ease);
}

/* --- states -------------------------------------------------------------- */

@media (hover: hover) {
  .cab:hover .cab__body {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--g-glow) 45%, var(--edge));
  }

  .cab:hover .cab__spill {
    opacity: 0.95;
  }
}

.cab.is-fresh .cab__marquee {
  animation: strike 0.85s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 42ms);
}

/* A fluorescent tube striking: it never comes up cleanly the first time. */
@keyframes strike {
  0% {
    opacity: 0;
  }
  17% {
    opacity: 0.9;
  }
  23% {
    opacity: 0.12;
  }
  36% {
    opacity: 1;
  }
  43% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cab.is-fresh .cab__marquee {
    animation: none;
  }
}

/* --- a stack: several attempts at one game, one cabinet in front --------- */

/* The sheets behind peek out above the marquee. The extra padding gives them
   room inside the paint containment; the negative margin keeps the front
   cabinet level with its neighbours in the row. */
.cab--stack {
  padding-top: 15px;
  margin-top: -11px;
}

.cab__sheet {
  position: absolute;
  z-index: 0;
  height: 2.4rem;
  border: 1px solid var(--edge);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  pointer-events: none;
  transition: transform 0.22s var(--ease);
}

.cab__sheet--1 {
  top: 7px;
  inset-inline-start: 0.55rem;
  inset-inline-end: 0.55rem;
  background: color-mix(in srgb, var(--g-light) 52%, var(--riser));
}

.cab__sheet--2 {
  top: 0;
  inset-inline-start: 1.1rem;
  inset-inline-end: 1.1rem;
  background: color-mix(in srgb, var(--g-light) 26%, var(--riser));
}

@media (hover: hover) {
  .cab--stack:hover .cab__sheet--1 {
    transform: translateY(-4px);
  }

  .cab--stack:hover .cab__sheet--2 {
    transform: translateY(-7px);
  }
}

.cab__badge--stack {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--light);
}

.cab__badge--stack svg {
  color: var(--g-light);
}

.cab__open {
  color: var(--dust);
  font-variation-settings: 'wdth' 92, 'wght' 620;
}


/* --- sizes: one to a row (the default), three, or compact auto fit ------- */

.cab__about {
  display: none;
}

.wall.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The two border pixels leave a 320 × 240 screen inside each cabinet.
   Keep spare row space empty instead of stretching the screenshots. */
.wall.is-auto {
  grid-template-columns: repeat(auto-fill, min(100%, 322px));
}

.wall.is-auto .cab__screen > img {
  object-fit: contain;
}

/* One to a row: the screen on the left, the marquee over it, and the panel
   beside it with room for the whole blurb. */
.wall.is-wide {
  grid-template-columns: minmax(0, 1fr);
}

/* Let the screenshot set the screen's height, shrinking to fit but never
   enlarging beyond its native dimensions. */
.wall.is-wide .cab__screen:has(> img) {
  aspect-ratio: auto;
}

.wall.is-wide .cab__screen > img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .wall.is-wide .cab {
    contain-intrinsic-size: auto 28rem;
  }

  .wall.is-wide .cab__body {
    display: grid;
    grid-template-columns: minmax(0, min(50%, var(--screen-width, 50%))) minmax(0, 1fr);
  }

  /* A wider screen, so a row is a band rather than a wall of its own. */
  .wall.is-wide .cab__screen {
    aspect-ratio: 16 / 10;
  }

  .wall.is-wide .cab__name {
    font-size: var(--step-2);
  }

  .wall.is-wide .cab__panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: clamp(1.2rem, 0.8rem + 1.2vw, 2rem);
    border-top: none;
    border-inline-start: 1px solid var(--edge);
  }

  .wall.is-wide .cab__tagline {
    font-size: var(--step-1);
    line-height: 1.3;
    color: var(--light);
    -webkit-line-clamp: 3;
    min-height: 0;
  }

  .wall.is-wide .cab__about {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--dust);
  }

  .wall.is-wide .cab__meta {
    margin-top: auto;
    font-size: var(--step--1);
  }

  /* The star sits over the panel now, not the lit marquee. */
  .wall.is-wide .cab__fave {
    color: var(--dust);
  }
}

@media (max-width: 64rem) {
  .wall.is-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .wall.is-three {
    grid-template-columns: minmax(0, 1fr);
  }
}