/* ============================================================
   ROLLIT — ARCADE  (css/arcade.a1ce533a.css)
   ------------------------------------------------------------
   Spotlight + tile wall. Every game colours itself through one
   custom property, --arc-accent, set inline by js/arcade.bcb2b4d6.js from the
   game's own theme variable — so a new game needs no CSS at all.
   ============================================================ */

.arc-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.2rem 1.25rem 4rem;
}

/* ---- header ---- */

.arc-head {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.arc-head-copy { min-width: 0; }

/* The one way into the leaderboard. Outlined in gold rather than filled: the
   filled gold button on this page is a CTA to PLAY something, and the board
   should not compete with the spotlight for that press. */
.arc-board-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  padding: 8px 15px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 8px;
  transition: background .15s, border-color .15s;
}

.arc-board-link:hover {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-color: var(--gold);
}

.arc-board-link i { font-size: 15px; }

.arc-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.6rem;
  letter-spacing: 3px;
  line-height: 1;
  margin: 0 0 .4rem;
  color: var(--text);
}

.arc-lede {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  max-width: 46ch;
  line-height: 1.5;
}

/* ---- spotlight ---- */

.arc-spot {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin-bottom: 1.6rem;
  transition: border-color .18s, transform .18s;
}

.arc-spot:hover { border-color: var(--arc-accent); transform: translateY(-2px); }

/* The art panel is a flat wash of the game's accent rather than an image:
   there is no artwork for a game that isn't built yet, and a placeholder
   poster would age badly the moment real key art exists. */
.arc-spot-art {
  width: 210px;
  flex-shrink: 0;
  background: var(--surface2);
  color: var(--arc-accent);
  font-size: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arc-spot-body { padding: 1.4rem 1.5rem; }

.arc-spot-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 2px;
  line-height: 1;
  margin: .5rem 0 .35rem;
  color: var(--text);
}

.arc-spot-blurb {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 52ch;
}

.arc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--arc-accent);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
}

.arc-cta i { font-size: 15px; }

/* ---- tile wall ---- */

.arc-grid {
  display: grid;
  /* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, so a wall
     holding one or two games stretches those tiles across the whole row and
     they stop reading as tiles at all — the spotlight is the only thing on
     this page that should span the full width. Keeping the empty tracks holds
     every tile at one honest size no matter how many games there are. */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.arc-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, transform .18s;
}

.arc-tile:hover { border-color: var(--arc-accent); transform: translateY(-2px); }

.arc-tile-art {
  height: 96px;
  background: var(--surface2);
  color: var(--arc-accent);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arc-tile-body { padding: 11px 12px 13px; }

.arc-tile-name { font-size: 14px; font-weight: 600; color: var(--text); }

.arc-tile-tag {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 9px;
  line-height: 1.35;
}

/* ---- pills ---- */

.arc-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--surface2);
  color: var(--muted);
}

.arc-pill-on {
  background: color-mix(in srgb, var(--arc-accent) 16%, transparent);
  color: var(--arc-accent);
}

/* ---- phone ---- */

@media (max-width: 768px) {
  .arc-wrap { padding: 1.4rem 1rem calc(2rem + var(--tabbar-h)); }
  .arc-h1 { font-size: 2.1rem; }

  /* The button drops under the lede rather than shrinking beside it: at this
     width, side by side leaves the lede about 18 characters a line. */
  .arc-head { flex-direction: column; gap: .9rem; }
  .arc-board-link { align-self: flex-start; }

  /* The spotlight stacks: a 210px art panel beside text leaves about 100px
     for the blurb on a small phone, which wraps to six lines. */
  .arc-spot { flex-direction: column; }
  .arc-spot-art { width: 100%; height: 118px; font-size: 42px; }
  .arc-spot-body { padding: 1.1rem 1.1rem 1.3rem; }
  .arc-spot-name { font-size: 1.7rem; }

  .arc-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .arc-tile-art { height: 80px; font-size: 26px; }
}

/* ============================================================
   HOW TO PLAY
   ------------------------------------------------------------
   Every game on the shelf carries a "?" that opens its guided
   demo run (js/howto.0ed0ed85.js). It has to be a SIBLING of the tile's
   <a>, never a child — a button inside an anchor is invalid and
   browsers disagree about which of the two a tap belongs to. So
   the grid item became a wrapper, the anchor fills it, and the
   "?" floats above both in the corner.

   The hover lift moved to the wrapper for the same reason: left
   on the tile, the tile would rise and leave its own "?" behind.
   ============================================================ */

.arc-tile-wrap {
  position: relative;
  display: flex;
  transition: transform .18s;
}
.arc-tile-wrap:hover { transform: translateY(-2px); }
.arc-tile-wrap .arc-tile { flex: 1 1 auto; min-width: 0; }
.arc-tile-wrap:hover .arc-tile { transform: none; }

.arc-spot-wrap { position: relative; }
.arc-spot-wrap:hover .arc-spot { transform: none; }
.arc-spot-wrap:hover { transform: translateY(-2px); transition: transform .18s; }

.arc-howto {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-size: 15px;
  cursor: pointer;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border: 1px solid var(--border2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: color .15s, border-color .15s;
  padding: 0;
  text-decoration: none;
}
.arc-howto:hover {
  color: var(--arc-accent, var(--gold));
  border-color: var(--arc-accent, var(--gold));
}

/* Two outlined links now sit where one used to. They wrap onto their own row
   before they squeeze the heading, which on a phone they always do. */
.arc-head-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

@media (max-width: 620px) {
  .arc-head { flex-direction: column; }
  .arc-head-links { width: 100%; }
  .arc-head-links .arc-board-link { flex: 1 1 auto; justify-content: center; }
}