/* home.css — landing page: game grid + "Recently updated" strip.
   Built entirely on the shared design tokens in styles.css. */

/* Game cards reuse the hub's project-card styling; tags are plain .tag chips. */
.game-card { --pc: var(--violet); display:flex; flex-direction:column; }
.game-card .play { margin-top:auto; padding-top:.5rem; font-weight:650; color:var(--accent); }
/* Category tags — roomier pills than the plain .tag chip, matching the filter bar so the whole
   page's mechanic tags read as one family. */
.game-card .tags { gap:.4rem; margin:.15rem 0 .1rem; }
.game-card .tags .tag { font-size:.73rem; font-weight:600; letter-spacing:.01em;
  padding:.34rem .72rem; border-radius:999px; color:var(--text-soft);
  background:var(--panel-2); border:1px solid var(--line-2); }
/* Per-game icon sits left of the title in a small header row. */
.game-card .card-head { display:flex; align-items:center; gap:.75rem; margin-bottom:.15rem; }
.game-card .card-head h3 { margin:0; }
.game-card .game-icon { width:56px; height:56px; border-radius:14px; flex:0 0 auto;
  box-shadow:0 2px 8px rgba(0,0,0,.35); }
/* "Updated <date>" line — quiet, above the Play affordance; filled by home.js. */
.game-card .card-updated { margin-top:.6rem; font-size:.72rem; letter-spacing:.02em;
  opacity:.5; font-variant-numeric:tabular-nums; cursor:default; }

/* Recently-updated strip — a quiet pulse of the latest changes, from the shared
   changelog data. Hidden until home.js populates it (JS-off shows nothing). */
.recent-list { display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
.recent-item { display:flex; gap:.85rem; align-items:baseline; }
.recent-item .r-date { flex:0 0 auto; width:92px; font-size:.74rem; color:var(--text-faint);
  font-variant-numeric:tabular-nums; cursor:default; }
.recent-item .r-text { color:var(--text-soft); font-size:.93rem; line-height:1.5;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.recent-item .r-text b { color:var(--text); font-weight:650; }
.recent-more { margin-top:1.05rem; font-size:.86rem; }

/* Tag filter — filter the grid by mechanic, in place. Hidden until home.js wires it
   (a JS-off visitor just sees every game). Roomier pills than the plain .tag chip, with
   a clear solid-accent "on" state so the active mechanic reads at a glance. */
.game-filter { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.6rem; }
.game-filter .tag { cursor:pointer; font:inherit; font-size:.8rem; font-weight:600;
  line-height:1; letter-spacing:.01em; padding:.5rem .95rem; border-radius:999px;
  color:var(--text-soft); background:var(--panel-2); border:1px solid var(--line-2);
  -webkit-appearance:none; appearance:none;
  transition:background .15s var(--ease), border-color .15s, color .15s,
    transform .1s var(--ease), box-shadow .15s; }
.game-filter .tag:hover { color:var(--text);
  border-color:color-mix(in srgb, var(--violet) 45%, var(--line-2)); transform:translateY(-1px); }
.game-filter .tag:active { transform:translateY(0); }
.game-filter .tag.is-on { color:#fff; background:var(--violet-deep); border-color:transparent;
  box-shadow:0 6px 16px -8px var(--glow); }
.game-filter .tag.is-on:hover { background:var(--violet); color:#fff; }
/* .game-card is display:flex, which would beat the default [hidden] rule. */
.game-card[hidden] { display:none; }

/* Per-card "?" — each game's one-line description, tucked into the card's top-right corner so
   the card reads clean (matches the fairyfox home/stories cards). The card is an <article> with
   a stretched play link covering it; the "?" sits above that link. Native <details> → works with
   JS off; home.js adds close-on-outside-click / Escape + single-open. */
.game-card { position:relative; }
.game-card .card-head { padding-right:2.4rem; }        /* keep long titles clear of the "?" */
.game-card .stretch { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.game-card .card-info { position:absolute; top:.85rem; right:.85rem; z-index:2; margin:0; line-height:0; }
.game-card .card-info summary { list-style:none; cursor:pointer; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:.9rem; line-height:1; color:var(--text-soft);
  background:var(--panel-2); border:1px solid var(--line-2); -webkit-tap-highlight-color:transparent;
  transition:color .15s var(--ease), border-color .15s, background .15s; }
.game-card .card-info summary::-webkit-details-marker { display:none; }
.game-card .card-info summary::marker { content:""; }
.game-card .card-info summary:hover { color:var(--text);
  border-color:color-mix(in srgb, var(--violet) 50%, var(--line-2)); }
.game-card .card-info[open] summary { color:#fff; background:var(--violet-deep); border-color:transparent; }
.game-card .card-info-pop { position:absolute; top:calc(100% + .4rem); right:0; width:min(17rem,72vw);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:.75rem .9rem; z-index:3; color:var(--text-soft); font-size:.9rem; line-height:1.5;
  animation:cardInfoIn .15s var(--ease); }
.game-card .card-info-pop::before { content:""; position:absolute; top:-6px; right:11px; width:11px; height:11px;
  background:var(--panel); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg); }
/* Lift the whole card while its blurb is open so the popover clears its neighbours. */
.game-card:has(.card-info[open]) { z-index:5; }
@keyframes cardInfoIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .game-card .card-info-pop { animation:none; } }

/* Masthead logo — the collection's game-farm mark (assets/icon.png). Overrides the shared
   circular avatar (.mast-logo in the vendored styles.css) to a rounded square with
   object-fit:contain, so the whole illustration reads instead of being cropped to a circle —
   matching the game-card icon treatment. Scales down a touch on narrow screens. */
.masthead .mast-logo { width:72px; height:72px; border-radius:16px; object-fit:contain;
  border:none; box-shadow:0 2px 10px rgba(0,0,0,.28); }
@media (max-width:560px){ .masthead .mast-logo { width:56px; height:56px; } }