/* Playit — the public game GALLERY ("/play", html/play/index.html) — page-scoped styles only.
   The cards, their grid, pager, empty state and modal are the SHARED game components
   (game_grid.css + tv_card.css); the endless JUST ADDED row is the shared marquee (marquee.css); the tabs
   are the shared .filter-tab (global.css). The landing's WHAT'S NEW reuses the section head below.
   Everything here is the page around them: the search box,
   the section headings, the GAME OF THE DAY panel and the HALL OF FAME table. Tokens: kit.css.
   Phones first-class: every block below has its phone layout next to it, at the gallery's one
   breakpoint (760px), so nothing is squeezed into a desktop shape. */

.play-gallery {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 18px;
}

/* The showcase sections, spaced out so each reads as its own block. */
.play-showcase {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* SEARCH MODE (play.js): the showcase steps aside so the results sit right under the search box. */
.play-gallery.is-searching .play-showcase { display: none; }

/* ---- the search box: on its own, centred, one big arcade-framed field ---- */
.play-search-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.play-search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 680px;
  min-width: 0;
  min-height: 60px;
  padding: 0 16px;
  background: var(--color-panel);
  border: 3px solid var(--color-line);
  border-radius: 6px;
  box-shadow: 0 6px 0 var(--color-well);
  cursor: text;
}
.play-search:focus-within {
  border-color: var(--color-cyan);
  box-shadow: 0 6px 0 var(--color-well), 0 0 0 5px rgba(36, 229, 255, .12);
}
.play-search-icon { flex: none; display: inline-flex; color: var(--color-cyan); }
.play-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--color-text);
}
.play-search-input::placeholder { color: var(--color-muted-2); }
/* Drop the native clear (✕): the arcade CLEAR button below does that job, the same on every browser. */
.play-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* CLEAR — shown only while searching, a square arcade button beside the box. */
.play-search-clear {
  display: none;
  flex: none;
  width: 60px;
  height: 60px;
  padding: 0;
}
.play-search-clear svg { width: 18px; height: 18px; }
.play-gallery.is-searching .play-search-clear { display: inline-flex; }

/* ---- a section + its heading (play/partial/section_head.html) ---- */
.play-section {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.play-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.play-head-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
}
.play-head-icon { flex: none; display: inline-flex; }
.play-head-icon svg { display: block; }   /* each icon keeps its own drawn size */
.play-head-line {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--color-muted);
}
.play-tone-pink { color: var(--color-pink-light); }
.play-tone-cyan { color: var(--color-cyan); }
.play-tone-gold { color: var(--color-gold); }
.play-tone-green { color: var(--color-green); }

/* The gallery's cards read a little bigger than My Games' (the same shared card), with the title and
   maker set flush left under the screen, as in the design. */
.play-gallery .game-name,
.play-gallery .game-maker { text-align: left; padding-inline: 4px; }
.play-gallery .game-name { font-size: 20px; }
.play-gallery .game-maker { font-size: 17px; }

/* ---- GAME OF THE DAY (play/partial/game_of_the_day.html) ---- */
.gotd {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The heading, centred between two gold rules. */
.gotd-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-gold);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
}
.gotd-heading::before,
.gotd-heading::after {
  content: "";
  flex: 0 1 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.gotd-heading::after { background: linear-gradient(270deg, transparent, var(--color-gold)); }

.gotd-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 24px;
  background: linear-gradient(160deg, var(--color-panel-2) 0%, var(--color-panel) 100%);
  border: 3px solid var(--color-line-2);
  border-radius: 14px;
  box-shadow: 0 8px 0 var(--color-well), 0 0 0 6px rgba(255, 210, 63, .08),
              0 30px 80px rgba(255, 61, 154, .12);
}
/* The big screen: the shared CRT card, wider (16:10) and a tap target of its own. */
.gotd-screen {
  display: block;
  padding: 10px;
  border-radius: 16px;
  transition: transform .15s ease-out;
}
.gotd-screen:hover { transform: translateY(-3px); }
.gotd-screen:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 4px; }
.gotd-screen .tv-screen { display: block; aspect-ratio: 16 / 10; }
.gotd-screen .game-new { left: 12px; top: 12px; font-size: 10px; padding: 7px 10px; }

.gotd-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.gotd-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.35;
  color: var(--color-text);
  text-shadow: 4px 4px 0 var(--color-shadow-ink);
  overflow-wrap: anywhere;
}
.gotd-maker {
  margin: 0;
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--color-muted);
}
/* The blurb: a few lines here; the whole of it is on the play page. */
.gotd-brief {
  margin: 0;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-text-dim);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* The scoreboard strip: one arcade panel split in two halves — PLAYS | HIGH SCORE. Each half is an
   icon tile beside its big number with the label under it, so neither half looks empty. */
.gotd-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  background: var(--color-well);
  border: 2px solid var(--color-line);
  border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35);
}
.gotd-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
}
.gotd-stat + .gotd-stat { border-left: 2px dashed var(--color-line); }
.gotd-stat-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 6px;
}
.gotd-stat-icon svg { width: 18px; height: 18px; display: block; }
.gotd-stat-plays .gotd-stat-icon { color: var(--color-green); background: rgba(62, 240, 139, .1); }
.gotd-stat-best .gotd-stat-icon { color: var(--color-gold); background: rgba(255, 210, 63, .1); }
/* The number first, the label under it (the markup keeps dt before dd for the <dl>). */
.gotd-stat-text {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}
.gotd-stat-text dd { margin: 0; }
.gotd-stat-value {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gotd-stat-plays .gotd-stat-value { color: var(--color-green); }
.gotd-stat-best .gotd-stat-value { color: var(--color-gold); }
.gotd-stat-label {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--color-muted);
}
/* "by NAME" (or "Be the first!") — under the label, since column-reverse stacks it on top otherwise. */
.gotd-stat-by {
  order: -1;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PLAY NOW — the one action, full width of the words column. */
.gotd-play { align-self: stretch; margin-top: 4px; }
.gotd-play-icon { display: inline-flex; }
.gotd-play-icon svg { width: 16px; height: 16px; display: block; }

/* ---- ALL GAMES: the heading on the left, the style tabs on the right ---- */
.play-all-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.play-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* each tab is the shared arcade .filter-tab (global.css), tinted per style by play.js */

/* "N games match …" above the results while searching. */
.play-results-count {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-green);
  overflow-wrap: anywhere;
}

/* ---- HALL OF FAME (play/partial/hall_of_fame.html) ---- */
.hof {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-panel);
  border: 3px solid var(--color-line-2);
  border-radius: 12px;
  box-shadow: 0 6px 0 var(--color-well);
  overflow: hidden;
}
.hof-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.1fr) 150px minmax(0, 1.7fr) 52px;
  grid-template-areas: "rank player score game play";
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
}
.hof-row + .hof-row { border-top: 2px dashed var(--color-line); }
.hof-row:hover { background: rgba(36, 229, 255, .05); }

.hof-rank {
  grid-area: rank;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-muted);
}
.hof-rank-1 { color: var(--color-gold); }
.hof-rank-2 { color: var(--color-silver); }
.hof-rank-3 { color: var(--color-bronze); }
.hof-crown { display: inline-flex; }
.hof-crown svg { width: 14px; height: 12px; display: block; }

.hof-player {
  grid-area: player;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* The player's initial on a coloured tile — six colours, taken in turn down the table. */
.hof-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: 6px;
}
.hof-avatar-0 { background: var(--color-pink); }
.hof-avatar-1 { background: var(--color-cyan); }
.hof-avatar-2 { background: var(--color-green); }
.hof-avatar-3 { background: var(--color-gold); }
.hof-avatar-4 { background: var(--color-pink-light); }
.hof-avatar-5 { background: var(--color-bronze); }
.hof-name {
  min-width: 0;
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hof-score {
  grid-area: score;
  text-align: right;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-title-yellow);
  font-variant-numeric: tabular-nums;
}

.hof-game {
  grid-area: game;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--color-text-dim);
}
/* The cover and the title are links to the game; they keep the row's own colour. */
.hof-thumb,
.hof-game-title { color: inherit; text-decoration: none; }
.hof-game-title:hover { color: var(--color-text); }
/* The game's cover as a little CRT screen. */
.hof-thumb {
  flex: none;
  width: 88px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #05040f;
  border: 2px solid #000;
  border-radius: 10px / 8px;
  box-shadow: 0 0 0 2px #221e40;
}
.hof-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hof-game-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hof-game-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.hof-game-name {
  min-width: 0;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hof-game .game-maker { margin: 0; padding-inline: 0; text-align: left; }

/* PLAY — a square green arcade button straight to the game. */
.hof-play {
  grid-area: play;
  width: 52px;
  height: 52px;
  padding: 0;
}
.hof-play svg { width: 18px; height: 18px; }

/* ---- tablets: GAME OF THE DAY stacks (screen on top) once two columns would squeeze the words ---- */
@media (max-width: 900px) {
  .gotd-panel { grid-template-columns: minmax(0, 1fr); }
}

/* ---- phones and small tablets ---- */
@media (max-width: 760px) {
  .play-gallery { gap: 44px; padding-top: 6px; }
  .play-showcase { gap: 48px; }

  .play-search { min-height: 56px; }
  .play-search-input { font-size: 22px; }
  .play-search-clear { width: 56px; height: 56px; }

  .play-head-title { font-size: 13px; }
  .play-head-line { font-size: 18px; }
  .play-gallery .game-name { font-size: 18px; }
  .play-gallery .game-maker { font-size: 16px; }
  .game-rank { font-size: 22px; }

  /* GAME OF THE DAY: stacked — the screen on top, the words and buttons under it. The heading stays
     on one line: its gold rules give up their room first. */
  .gotd-heading { font-size: 14px; white-space: nowrap; gap: 10px; }
  .gotd-heading::before,
  .gotd-heading::after { flex: 1 1 0; min-width: 12px; }
  .gotd-panel { gap: 16px; padding: 12px 12px 18px; }
  .gotd-screen { padding: 7px; }
  .gotd-info { padding: 0 4px; gap: 12px; }
  .gotd-title { font-size: 20px; text-shadow: 3px 3px 0 var(--color-shadow-ink); }
  .gotd-maker { font-size: 19px; }
  .gotd-brief { font-size: 20px; -webkit-line-clamp: 3; line-clamp: 3; }
  .gotd-stat { gap: 10px; padding: 10px; }
  .gotd-stat-icon { width: 34px; height: 34px; }
  .gotd-stat-icon svg { width: 15px; height: 15px; }
  .gotd-stat-value { font-size: 14px; }
  .gotd-stat-by { font-size: 16px; }

  /* ALL GAMES: the tabs drop under the heading. */
  .play-all-head { align-items: stretch; flex-direction: column; }

  /* HALL OF FAME: each row folds into two lines — player + score, then the game + PLAY. */
  .hof-row {
    grid-template-columns: 30px minmax(0, 1fr) 104px;   /* a fixed score column lines up every row's PLAY */
    grid-template-areas:
      "rank player score"
      "game game play";
    gap: 10px 10px;
    padding: 12px;
  }
  .hof-crown { display: none; }
  .hof-rank { font-size: 12px; }
  .hof-avatar { width: 32px; height: 32px; font-size: 11px; }
  .hof-name { font-size: 22px; }
  .hof-score { font-size: 11px; }
  .hof-game { padding-left: 40px; gap: 10px; }
  .hof-thumb { width: 72px; }
  .hof-game-name { font-size: 20px; }
  .hof-play { width: 48px; height: 48px; justify-self: end; }
}

/* ---- The Google AD at the very bottom of the gallery (html/play/partial/ad_banner.html) ----
   The unit is a fixed standard size (Google fills whatever box it is given), so it is a known 90px
   on a desktop and 50px on a phone, never a surprise tall ad. */
.play-ad {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.play-ad-unit {
  display: inline-block;
  width: 728px;
  height: 90px;
}
@media (max-width: 760px) {
  .play-ad-unit { width: 320px; height: 50px; }
}
/* When Google has no ad to show (it marks the tag "unfilled"), the strip goes away instead of
   leaving an empty band. */
.play-ad:has(.adsbygoogle[data-ad-status="unfilled"]) { display: none; }