/* ==========================================================================
   ARKADE LOUNGE — Homepage
   Styles used only by the homepage. Anything reused elsewhere belongs in
   components.css instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO BACKDROP
   Stands in for venue photography. It is built from gradients and a repeating
   angular pattern rather than an image, so the hero is always composed even
   before any art exists — and costs nothing to load.
   -------------------------------------------------------------------------- */

.hero__fallback {
  inline-size: 100%;
  block-size: 100%;
  background:
    /* a soft purple key light from the upper leading edge */
    radial-gradient(120% 90% at 12% 0%,
      rgba(107, 49, 147, 0.55) 0%, transparent 58%),
    /* a magenta rim light, small and low, so it accents rather than competes */
    radial-gradient(70% 60% at 92% 88%,
      rgba(202, 35, 53, 0.28) 0%, transparent 60%),
    /* the angular field that gives the composition its esports geometry */
    repeating-linear-gradient(115deg,
      rgba(237, 239, 241, 0.045) 0px,
      rgba(237, 239, 241, 0.045) 1px,
      transparent 1px,
      transparent 68px),
    var(--surface-void);
}

/* --------------------------------------------------------------------------
   EXPERIENCE CARDS
   -------------------------------------------------------------------------- */

.exp-card__art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-block-end: 1px solid var(--line-soft);
}

.exp-card__icon {
  inline-size: 40%;
  max-inline-size: 7rem;
  color: var(--purple-300);
  opacity: 0.9;
  transition: transform var(--dur-slow) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.card--link:hover .exp-card__icon {
  transform: scale(1.06);
  color: var(--purple-200);
}

@media (prefers-reduced-motion: reduce) {
  .card--link:hover .exp-card__icon { transform: none; }
}

/* Each experience gets its own grade so the three cards read as a family
   without being identical. All three stay within the purple range; magenta
   is held back for the Watch Station's rim only. */
.exp-card__art--ps5 {
  background:
    radial-gradient(90% 80% at 30% 20%, rgba(107, 49, 147, 0.5), transparent 65%),
    var(--surface-void);
}

.exp-card__art--vr {
  background:
    radial-gradient(90% 80% at 70% 25%, rgba(133, 68, 184, 0.45), transparent 65%),
    var(--surface-void);
}

.exp-card__art--watch {
  background:
    radial-gradient(90% 80% at 50% 25%, rgba(83, 38, 114, 0.6), transparent 62%),
    radial-gradient(60% 60% at 85% 90%, rgba(202, 35, 53, 0.22), transparent 70%),
    var(--surface-void);
}

.exp-card__price {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.exp-card__price strong {
  font-size: var(--fs-h4);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   TAKE OVER
   -------------------------------------------------------------------------- */

.takeover {
  display: grid;
  gap: var(--sp-7);
  border-color: var(--purple-500);
  background:
    linear-gradient(135deg, rgba(83, 38, 114, 0.35), transparent 55%),
    var(--bg-raised);
}

@media (min-width: 860px) {
  .takeover {
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    padding: var(--sp-8);
  }
}

.takeover__title {
  font-size: var(--fs-h2);
  margin-block: var(--sp-3) var(--sp-4);
}

.takeover__aside {
  padding: var(--sp-5);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   FEEDS
   Sections whose content comes from the API. The empty state is a real
   message, not a spinner left running, because a venue with nothing on this
   week is a normal condition rather than an error.
   -------------------------------------------------------------------------- */

.feed-empty {
  grid-column: 1 / -1;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   VISIT
   -------------------------------------------------------------------------- */

.visit {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 860px) {
  .visit { grid-template-columns: 1fr 1fr; align-items: start; }
}

.visit__map {
  min-block-size: 20rem;
  display: grid;
  place-items: center;
  text-align: center;
}

/* The closing call to action lives in layout.css, not here: every page ends
   with it, and defining it in the homepage stylesheet left it unstyled on
   pages that do not load home.css. */

/* ==========================================================================
   RELEASE RADAR
   --------------------------------------------------------------------------
   The first thing on the landing page. Artwork-led: the key art IS the card,
   with the detail beneath it.

   ARKADE red carries this section. The eyebrow, the rule under the heading
   and the COMING TO ARKADE badge are all magenta, which makes the top of the
   page read as an announcement rather than as more furniture.
   ========================================================================== */

.radar {
  border-block-end: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(202, 35, 53, 0.10), transparent 70%),
    var(--surface-sunken);
  /* CLEARS THE FIXED HEADER ITSELF.

     This section sits above the hero, so when there is something to show it
     becomes the first thing on the page — and the hero's own top clearance,
     which used to be what kept the site out from under the header, is no
     longer the first thing anybody meets. Without this the eyebrow and part
     of the heading sit behind the navigation bar.

     Only ever applied when the section is shown at all; with nothing coming
     up it stays hidden and the hero is first again, with its own clearance
     intact. */
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
}

.radar__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-block-end: var(--sp-5);
}

.radar__eyebrow { color: var(--alert-text); }
.radar__eyebrow::before { background: var(--brand-magenta); }

.radar__heading {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-display);
  margin: 0;
  position: relative;
}

/* A short red rule under the heading. The same marker language as the
   navigation, so the accent means one thing across the site. */
.radar__heading::after {
  background: var(--brand-magenta);
  block-size: 3px;
  content: '';
  inline-size: 2.5rem;
  inset-block-end: -0.6rem;
  inset-inline-start: 0;
  position: absolute;
}

/* A row that scrolls sideways rather than wrapping. Upcoming releases are a
   sequence, and a grid of them competes with the hero directly beneath. */
.radar__track {
  display: grid;
  gap: var(--sp-4);
  grid-auto-columns: minmax(15rem, 16rem);
  grid-auto-flow: column;
  overflow-x: auto;
  padding-block-end: var(--sp-3);
  scroll-snap-type: x mandatory;
  /* Bleeds to the screen edge so a card is visibly cut off, which is what
     tells somebody there is more to scroll to. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.radar__track > * { scroll-snap-align: start; }

.radar-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.radar-card__art {
  aspect-ratio: 16 / 9;
  background: var(--surface-void);
  position: relative;
}

.radar-card__art img {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

/* Only ever applied by hand, and it means the game will genuinely be
   playable here. It gets the loudest treatment on the page for that reason. */
.radar-card__badge {
  background: var(--brand-magenta);
  border-radius: var(--r-sm);
  color: var(--text-on-accent);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  letter-spacing: var(--tracking-label);
  padding: var(--sp-1) var(--sp-3);
  position: absolute;
  text-transform: uppercase;
}

.radar-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
}

.radar-card__title {
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

.radar-card__facts {
  display: grid;
  gap: var(--sp-1) var(--sp-3);
  grid-template-columns: auto 1fr;
  margin: 0;
}

.radar-card__label {
  color: var(--text-muted);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.radar-card__value {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin: 0;
}

/* The price is the number people look for, so it gets the accent. */
.radar-card__value--price {
  color: var(--alert-text);
  font-weight: var(--fw-bold);
}

.radar-card__trailer { margin-block-start: auto; }

/* --------------------------------------------------------------------------
   Release Radar — the trailer player
   Every trailer a game has, in one dialog, played in place. The list is
   hidden when there is only one.
   -------------------------------------------------------------------------- */
.radar-card__art--playable { cursor: pointer; position: relative; }
.radar-card__art--playable::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M8 5v14l11-7z'/></svg>")
    center / 1.6rem no-repeat,
    rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  opacity: 0.85;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.radar-card__art--playable:hover::after,
.radar-card__art--playable:focus-visible::after { opacity: 1; transform: scale(1.06); }

.radar-dialog {
  border: 0;
  padding: 0;
  /* The reset zeroes every margin; auto is what centres a modal dialog. */
  margin: auto;
  width: min(60rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  background: transparent;
  color: var(--text);
}
.radar-dialog::backdrop { background: rgba(4, 4, 12, 0.86); backdrop-filter: blur(6px); }
.radar-dialog__inner {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem 1rem 1.25rem;
  display: grid;
  gap: 0.85rem;
}
.radar-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.radar-dialog__eyebrow { color: var(--alert-text); }
.radar-dialog__eyebrow::before { background: var(--brand-magenta); }
.radar-dialog__title { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.15; }
.radar-dialog__close {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.radar-dialog__close:hover { background: rgba(255, 255, 255, 0.08); }
.radar-dialog__player {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: 0.6rem;
  overflow: hidden;
}
.radar-dialog__frame { display: block; width: 100%; height: 100%; border: 0; }
.radar-dialog__now { margin: 0; font-weight: 600; }
.radar-dialog__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-height: 14rem;
  overflow: auto;
}
.radar-dialog__pick {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.radar-dialog__pick:hover { background: rgba(255, 255, 255, 0.09); }
.radar-dialog__pick.is-playing { border-color: var(--brand-magenta); background: rgba(255, 0, 170, 0.12); }
.radar-dialog__index {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
}
.radar-dialog__pick.is-playing .radar-dialog__index { background: var(--brand-magenta); color: #fff; }
.radar-dialog__foot { margin: 0; font-size: 0.9rem; }
@media (max-width: 40rem) {
  .radar-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
  .radar-dialog__inner { padding: 0.75rem 0.75rem 1rem; }
}