/* Playit — the SHARED game-grid + game card + game modal, used by BOTH the "My Games" page
   (/mygames) and the public gallery (/play). The CRT card FRAME comes from tv_card.css; this file
   adds the responsive grid, the per-card chrome (status badge, private lock, title), the pager +
   empty state, and the arcade-CABINET modal the cards open (partial/modal/game.html). Page-specific
   chrome (each page's own heading / filter tabs) stays in that page's own stylesheet.
   Shared design tokens live in global.css. */

/* ---- the grid: 4 across on desktop (bigger boxes), stepping down on narrower screens ---- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
@media (max-width: 900px) {
  .game-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .game-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- one card: the TV frame (tv_card.css) + a title beneath, the whole thing one tap target ---- */
.game-card {
  position: relative;
  cursor: pointer;
  transition: transform .1s;
}
.game-card:hover { transform: translateY(-3px); }
.game-card:focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 4px;
}

/* the game title, centered under the TV (its own copy so it isn't tangled in tv_card.css's
   rendering-state show/hide rules) */
.game-name {
  display: block;
  margin-top: 9px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- the status badge (bottom-left of the screen), only for a not-ready game ---- */
.game-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 4px 5px;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: 3px;
}
.game-badge-building { background: var(--color-cyan); }
.game-badge-failed { background: var(--color-pink-light); }

/* ---- the play count (top-right of the screen): "▶ N" ---- */
.game-plays {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 4;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1;
  color: var(--color-text);
  background: rgba(11, 10, 36, .82);
  border: 1px solid #3a3670;
  border-radius: 3px;
  padding: 3px 6px;
}

/* ---- the gallery's extras (partial/game_card.html's optional keys) ---- */
/* NEW (top-left of the screen): the game joined the gallery within the last few days. The -inline
   variant sits in a line of text instead (the Hall of Fame's game names). */
.game-new {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  line-height: 1;
  padding: 5px 7px;
  color: var(--color-white);
  background: var(--color-pink);
  border: 2px solid var(--color-ink);
  border-radius: 3px;
  box-shadow: 0 2px 0 var(--color-pink-shadow);
}
.game-new-inline { position: static; flex: none; }

/* The rank of a ranked row (bottom-left of the screen): a big outlined number, podium-coloured. */
.game-rank {
  position: absolute;
  left: 8px;
  bottom: 4px;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--color-text);
  text-shadow: 3px 3px 0 var(--color-ink), -2px -2px 0 var(--color-ink),
               2px -2px 0 var(--color-ink), -2px 2px 0 var(--color-ink);
}
.game-rank-1 { color: var(--color-gold); }
.game-rank-2 { color: var(--color-silver); }
.game-rank-3 { color: var(--color-bronze); }

/* "by @maker" under the title — the name in the maker pink, wherever a maker is named. */
.game-maker {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-maker-name { color: var(--color-pink-light); }
/* The name is a link to the maker's page wherever it shows (the cards, the game modal, the play
   page's bar, a game of the day, the Hall of Fame): the same pink name, underlined while pointed at. */
a.game-maker-name { text-decoration: none; }
a.game-maker-name:hover,
a.game-maker-name:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the private lock (top-left of the screen), only on games that aren't shared ---- */
.game-private {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 4;
  display: inline-flex;
  padding: 3px;
  color: var(--color-gold);
  background: rgba(11, 10, 36, .82);
  border: 1px solid #3a3670;
  border-radius: 3px;
}
.game-private svg { display: block; }

/* ---- the NUMBERED pager (partial/pager.html), shared by /play and /mygames: the count left, the
   page buttons right ---- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 34px;
}
.pager-count {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-muted);
}
.pager-pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 0 auto;        /* stays on the right, even when it wraps under the count */
  padding: 0;
  list-style: none;
}
/* One page: a square arcade key, 44px so a thumb can't miss it. */
.pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-text-dim);
  background: var(--color-panel);
  border: 3px solid var(--color-line);
  border-radius: 4px;
  box-shadow: 0 4px 0 var(--color-well);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s, border-color .1s;
}
/* the arcade key lift on hover, sink on press — like .btn */
button.pager-page:hover {
  color: var(--color-text);
  border-color: var(--color-cyan);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--color-well);
}
button.pager-page:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--color-well); }
button.pager-page:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }
.pager-page.is-current {
  color: var(--color-ink);
  background: var(--color-cyan);
  border-color: var(--color-cyan);
  box-shadow: 0 4px 0 var(--color-cyan-shadow);
  cursor: default;
}
.pager-gap {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-muted);
  padding: 0 2px;
}

/* ---- the empty state ---- */
.game-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 44px 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-muted);
}
.game-empty p { margin: 0; }

/* ---- the card modal, styled as a little ARCADE CABINET ----
   Three stacked parts: the MARQUEE title-bar (name + arcade ✕), the CRT SCREEN (cover, reusing
   tv_card.css's .tv-scan/.tv-vign glass), and the action row. Overrides the base .modal-dialog. */
.modal-dialog.cabinet {
  max-width: 460px;
  padding: 0;               /* each part below owns its spacing */
  overflow: hidden;         /* clip the marquee + screen to the cabinet's rounded shell */
  background: linear-gradient(180deg, #241f47, #14112e);
  border: 3px solid var(--color-ink);
  border-radius: 16px 16px 10px 10px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* Marquee — a FLAT dark band (no gradient) with the game's name (left, arcade title-yellow) and the
   arcade ✕ close on the right — the same title-bar shape as the Edit Profile modal. A bright cyan
   rule lights its bottom edge (the marquee's light strip). */
.cabinet-marquee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-ink);
  border-bottom: 3px solid var(--color-cyan);
}
.cabinet-title {
  margin: 0;
  min-width: 0;                 /* let the title ellipsis inside the flex row */
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--color-title-yellow);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cabinet-body { padding: 20px; }

/* Screen — the cover behind CRT glass (.tv-scan / .tv-vign come from tv_card.css). */
.cabinet-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid #000;
  border-radius: 16px / 11px;
  background: #05040f;      /* the "off" screen when a game has no cover yet */
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .7);
}
.cabinet-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The game's blurb under the screen — shown IN FULL (never clamped/cut off), at a readable size. */
.cabinet-brief {
  margin: 14px 2px 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--color-text-dim);
}

/* Who made it, under the blurb (gallery cards only). */
.cabinet-maker {
  margin: 12px 2px 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-muted);
}

/* The play count line under the blurb. */
.cabinet-plays {
  margin: 12px 2px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-muted);
}

/* Action row — a clean full-width row (EDIT when owned, PLAY when playable). Each button shares the
   width equally (flex:1), so one button fills the row and two split it evenly. */
.cabinet-panel {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.cabinet-panel .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* Full-width buttons under the action row: SHARE LINK (copies) or MAKE PUBLIC & SHARE (game_grid.js). */
.cabinet-wide {
  width: 100%;
  margin-top: 10px;
}
.share-link-icon { display: inline-flex; }
.share-link-icon svg { display: block; }