/* Landing page — game tiles. Sits on top of css/static-page.css. */

.game-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding-top: 22px;
}

.game-tiles__status {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  margin: 0;
}

.game-tiles__foot {
  margin: 26px 0 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.game-tile {
  position: relative;
  border: 1px solid rgba(243, 206, 19, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  /* Room for the Daily / All links along the bottom. */
  padding-bottom: 44px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.game-tile:hover,
.game-tile:focus-within {
  border-color: rgba(243, 206, 19, 0.75);
  background: rgba(243, 206, 19, 0.07);
  transform: translateY(-2px);
}

/* Logos are trimmed and scaled to a common height by tools/make-game-logos.js,
   so sizing by height here keeps the set at equal visual weight even though the
   aspect ratios run from 1.75 (PUBG) to 5.04 (WARDOGS). */
.game-tile__logo-row {
  display: flex;
  align-items: center;
  height: 56px;
  margin-bottom: 12px;
}

.game-tile__img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Screen-reader-only text. The logo is the visible game name; this keeps the
   name available to assistive tech and in the document outline. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.game-tile__meta {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

.game-tile__actions {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: flex;
  gap: 6px;
}

/* Stretched link: covers the whole tile, sits under the action links. */
.game-tile__overlay {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  text-decoration: none;
}

.game-tile__overlay:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.game-tile__action {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(243, 206, 19, 0.4);
  border-radius: 5px;
  padding: 2px 8px;
}

.game-tile__action:hover {
  background: rgba(243, 206, 19, 0.15);
}

.game-tile__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   daily-all.html — one card per game
   --------------------------------------------------------------------------- */

.daily-all-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0 4px;
}

.daily-all-date {
  margin: 0;
  font-size: 0.92rem;
  color: var(--accent, #f3ce13);
  font-weight: 700;
}

.daily-all-refresh {
  margin-left: auto;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 11px;
  border: 1px solid rgba(243, 206, 19, 0.45);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--accent, #f3ce13);
  cursor: pointer;
}

.daily-all-refresh:hover {
  background: rgba(243, 206, 19, 0.14);
}

.daily-all-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding-top: 16px;
}

.daily-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(243, 206, 19, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

/* Logo and play-mode badge share a row; the category line sits below both, on
   its own full-width row.

   The category used to sit between them in a flex row, which left it only the
   leftover width and forced long names like "Squad drills" or "Citizen-arms
   (Ministry-approved)" to ellipsis. On its own row it wraps instead. */
.daily-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}

/* Logos are all scaled to the same height, so this reads as equal weight.
   The logo carries the game identity on this page (no visible name), so it is
   allowed to be a little larger than it was when it sat beside the name. */
.daily-card__logo {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  flex: 0 1 auto;
  min-width: 0;
}

.daily-card__category {
  margin: -2px 0 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  /* Wrap rather than truncate. Do not reintroduce nowrap + ellipsis here: the
     ellipsis was the reason this line moved out of the head row. */
  overflow-wrap: anywhere;
}

/* The play-mode label, deliberately NOT button-shaped.

   It used to carry a 1px border and a 5px radius, which is exactly what the
   Open daily / Wheel links below it use, so it read as a third button rather
   than as metadata. Now a flat tinted label with no border or radius: still
   scannable, but unmistakably not clickable.

   Keep this visually distinct from .game-tile__action and .daily-card__foot a,
   which are the real controls on this page. */
.daily-card__mode {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, #f3ce13);
  border: 0;
  border-radius: 0;
  padding: 3px 8px;
  background: rgba(243, 206, 19, 0.12);
}

.daily-card__challenge {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--accent, #f3ce13);
  line-height: 1.25;
}

.daily-card__desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.daily-card__desc--muted {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.daily-card__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

@media (max-width: 560px) {
  .game-tiles {
    grid-template-columns: 1fr;
  }

  .daily-all-list {
    grid-template-columns: 1fr;
  }
}