/* ==========================================================================
   ARKADE LOUNGE — Feed pages (tournaments, what's new, community, live)
   ========================================================================== */

/* The empty state is a real message rather than a spinner left spinning: a
   venue with nothing on this week is a normal condition, not 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);
}

/* --------------------------------------------------------------------------
   TOURNAMENT CARDS
   -------------------------------------------------------------------------- */

.tourney__facts { margin-block-start: var(--sp-3); }

.tourney__funding {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   THE RULES
   --------------------------------------------------------------------------
   Long, and read once. Folded shut so the card stays scannable, but sitting
   above the registration form: somebody should be able to find out they need
   to be at the Lounge in person BEFORE they put their name down, not after.
   -------------------------------------------------------------------------- */

.tourney__rules {
  border-block-start: 1px solid var(--line-soft);
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
}

.tourney__rules-summary {
  cursor: pointer;
  color: var(--purple-300);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

.tourney__rules-summary:focus-visible {
  outline: 2px solid var(--purple-300);
  outline-offset: 3px;
}

.tourney__rules-line {
  color: var(--text-dim);
  font-size: var(--fs-xs);
  margin-block: var(--sp-1) 0;
}

/* Section headings out of the operator's own text, so eight numbered
   sections do not run together into one grey block. */
.tourney__rules-head {
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  margin-block: var(--sp-3) var(--sp-1);
  text-transform: uppercase;
}

.tourney__rules-head:first-of-type {
  margin-block-start: var(--sp-2);
}

.tourney__register {
  border-block-start: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.2);
}

.tourney__register-summary {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--purple-200);
  cursor: pointer;
  list-style: none;
  min-block-size: 2.75rem;
  display: flex;
  align-items: center;
}

.tourney__register-summary::before {
  content: '+';
  margin-inline-end: var(--sp-3);
  color: var(--purple-400);
}

.tourney__register[open] .tourney__register-summary::before { content: '–'; }

.tourney__form { padding: 0 var(--sp-5) var(--sp-5); }

.tourney__form-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

.tourney__submit { margin-block-start: var(--sp-5); }

.tourney__message {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-sm);
  min-block-size: 1.2rem;
}

.tourney__message--error { color: var(--magenta-400); }

.tourney__done { padding: var(--sp-6) var(--sp-5); text-align: center; }

.tourney__done-title {
  font-weight: var(--fw-bold);
  color: var(--success);
}

.tourney__ref {
  margin-block: var(--sp-3);
  font-family: var(--font-pixel);
  font-size: var(--fs-h4);
  letter-spacing: 0.12em;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   ARKADE LIVE CARDS
   -------------------------------------------------------------------------- */

.live-card .card__media {
  aspect-ratio: 16 / 9;
  border-block-end: 1px solid var(--line-soft);
  background:
    radial-gradient(80% 80% at 50% 30%, rgba(83, 38, 114, 0.5), transparent 65%),
    var(--surface-void);
}

.live-card .card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   TOURNAMENT TITLE AS A LINK
   Each tournament has its own page, so the title on the list is the way to
   it. It keeps the heading's colour rather than taking the accent every
   other link has: a wall of cards whose headings are all purple and
   underlined reads as a list of links, not a list of events.
   -------------------------------------------------------------------------- */

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover,
.card__title a:focus-visible {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   TOURNAMENT FACTS ARE NOT PRICES
   --------------------------------------------------------------------------
   `.price-row` holds its value on one line, which is right for "TT$50" and
   wrong for everything a tournament states: a full date, the venue's street
   address, a four-way prize breakdown. On a phone those simply ran off the
   side of the card — the prize list was cut mid-sentence on the page an
   advert sends people to, which is most of them.

   Stacked by default and paired again once there is room for both halves.
   -------------------------------------------------------------------------- */

.tourney__facts .price-row {
  display: grid;
  gap: var(--sp-1);
}

.tourney__facts .price-row__value {
  white-space: normal;
}

@media (min-width: 30rem) {
  .tourney__facts .price-row { display: flex; }
  .tourney__facts .price-row__value { text-align: end; }
}