/*
 * /games/ and /tacky-hunt/ (_functions-includes/tlt-games.php). Loaded on those two pages only, after
 * tlt-redesign.css, whose tokens and buttons it uses.
 * ds-allow-hardcode: tlt-redesign.css has color tokens only; sizes are plain px like the rest of that file,
 * and the printed card uses black on white and inches on purpose.
 */

/* ---------- store buttons: the set for this device (tlt_games_get) ---------- */
.tlt-get { display: none; flex-wrap: wrap; gap: 10px; }
html:not([data-tlt-os]) .tlt-get--desktop,
[data-tlt-os="desktop"] .tlt-get--desktop,
[data-tlt-os="android"] .tlt-get--android,
[data-tlt-os="ios"] .tlt-get--ios { display: flex; }
.tlt-get .tlt-btn { min-height: 48px; height: auto; }
.tlt-get__soon { background: var(--tlt-surface); color: var(--tlt-text-2); }
.tlt-get a.tlt-btn:focus-visible,
.tlt-hunt__actions .tlt-btn:focus-visible { outline: 3px solid var(--tlt-ink); outline-offset: 2px; }

/* ---------- /games/ ---------- */
.tlt-games__head { display: flex; flex-direction: column; gap: 12px; }
.tlt-games__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.tlt-game { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--tlt-border); }
.tlt-game__shot { aspect-ratio: 1; /* the game art is square */ background: var(--tlt-surface); }
.tlt-game__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tlt-game__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; box-sizing: border-box; text-align: center; font-weight: 700; font-size: 22px; color: var(--tlt-text-3); background: repeating-linear-gradient(135deg, var(--tlt-surface) 0 14px, var(--tlt-surface-2) 14px 28px); }
.tlt-game__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 18px 20px; }
.tlt-game__body .tlt-get { margin-top: auto; padding-top: 6px; }
.tlt-game__body .tlt-get .tlt-btn { flex: 1 1 100%; }
.tlt-game__line { margin: 0; color: var(--tlt-text-2); line-height: 1.45; }
.tlt-game__more { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--tlt-red); }

/* ---------- /tacky-hunt/ ---------- */
.tlt-hunt__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 380px); gap: 32px; align-items: center; }
.tlt-hunt__headtext { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tlt-hunt__art { grid-column: 2; grid-row: 1; display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
@media (max-width: 760px) {
  .tlt-hunt__head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tlt-hunt__art { grid-column: 1; max-width: 360px; margin: 0 auto; }
}
.tlt-hunt__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tlt-hunt__alt, .tlt-hunt__signin { margin: 0; color: var(--tlt-text-2); }
.tlt-hunt__alt a, .tlt-hunt__signin a { font-weight: 700; color: var(--tlt-red); }
.tlt-hunt__you { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.tlt-hunt__you p { margin: 0; }
.tlt-hunt__count { font-size: 20px; }
.tlt-hunt__bar { height: 10px; border-radius: 999px; background: var(--tlt-surface); overflow: hidden; }
.tlt-hunt__bar span { display: block; height: 100%; background: var(--tlt-green); }
.tlt-hunt__note { font-size: 14px; color: var(--tlt-text-3); }
.tlt-hunt__badges { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0; padding: 0; list-style: none; }
.tlt-hunt__badge { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 110px; text-align: center; }
.tlt-hunt__badge img { width: 96px; height: 96px; object-fit: contain; }
.tlt-hunt__badge span { font-size: 13px; color: var(--tlt-text-3); }
.tlt-hunt__share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tlt-hunt__share .tlt-btn { min-height: 44px; }
.tlt-hunt__how, .tlt-hunt__list { display: flex; flex-direction: column; gap: 14px; }
.tlt-hunt__steps { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0; padding-left: 1.4em; font-size: 17px; line-height: 1.5; }
.tlt-hunt__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .tlt-hunt__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tlt-hunt__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tlt-hunt__item { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--tlt-border); }
.tlt-hunt__item.is-found { border-color: var(--tlt-green); background: var(--tlt-green-tint); }
.tlt-hunt__tile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; background: var(--tlt-surface); text-align: center; overflow: hidden; }
.tlt-hunt__tile img { width: 72%; height: 72%; object-fit: contain; }
.tlt-hunt__tile span { padding: 8px; font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--tlt-ink); overflow-wrap: anywhere; }
.tlt-hunt__tile .tlt-hunt__x { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; background: var(--tlt-red); color: #fff; font-size: 26px; font-weight: 700; line-height: 1; }
.tlt-hunt__name { margin: 0; font-size: 16px; font-weight: 700; }
.tlt-hunt__hint { margin: 0; font-size: 14px; line-height: 1.4; color: var(--tlt-text-2); }

/* ---------- the printed card: one Letter page, the grid only ---------- */
.tlt-hunt-print { display: none; }
@media print {
  @page { size: letter portrait; margin: 0.45in; }
  body.tlt-page--hunt { background: #fff; padding: 0 !important; }
  body.tlt-page--hunt .tlt-header,
  body.tlt-page--hunt .tlt-footer,
  body.tlt-page--hunt .skip-link,
  body.tlt-page--hunt #tlt-app-banner,
  body.tlt-page--hunt .nmb,
  body.tlt-page--hunt dialog,
  body.tlt-page--hunt .tlt-hunt > :not(.tlt-hunt-print) { display: none !important; }
  body.tlt-page--hunt .tlt-hunt { padding: 0; }
  .tlt-hunt-print { display: block; color: #000; font-family: system-ui, -apple-system, Roboto, sans-serif; }
  .tlt-hunt-print h2 { margin: 0 0 4px; font-size: 28px; font-weight: 800; text-align: center; }
  .tlt-hunt-print p { margin: 0 0 12px; font-size: 12px; text-align: center; }
  .tlt-hunt-print__grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1.42in; border-top: 1.5px solid #000; border-left: 1.5px solid #000; }
  .tlt-hunt-print__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; text-align: center; break-inside: avoid; }
  .tlt-hunt-print__cell img { width: 0.8in; height: 0.8in; object-fit: contain; }
  .tlt-hunt-print__cell span { font-size: 14px; font-weight: 700; line-height: 1.15; }
  .tlt-hunt-print__cell img + span { font-size: 11px; font-weight: 600; }
  .tlt-hunt-print .tlt-hunt-print__url { margin: 8px 0 0; font-size: 9px; color: #444; }
}