/*
 * TNT Games hub. Layers on /assets/styles.css — the homepage design system —
 * and only adds what the arcade grid needs.
 *
 * Two constraints inherited from the vhost and the homepage, both non-negotiable:
 *   - The CSP blocks inline styles and inline scripts. Positions and states are
 *     CSS rules here, never style attributes.
 *   - Every grid track uses minmax(0,1fr). A plain 1fr floors at min-content and
 *     pushes the page into horizontal overflow on narrow phones.
 */

/* The homepage hero is a two-column grid with artwork on the right. This one is
   copy only, so it collapses to a single readable measure. */
.games-hero-in{grid-template-columns:minmax(0,1fr)}
.games-hero .hero-copy{max-width:52rem}
.games-title{margin-bottom:22px}

.arcade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:clamp(40px,5vw,60px)}

.arc-card{display:flex;flex-direction:column;background:linear-gradient(160deg,var(--ink-3),var(--ink-2));border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 24px;position:relative;transition:transform .28s var(--ease),border-color .28s,box-shadow .28s}
.arc-card:hover{transform:translateY(-6px);border-color:rgba(234,196,103,.45);box-shadow:0 16px 40px rgba(0,0,0,.5)}

.arc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.arc-ic{font-size:2.1rem;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.arc-tag{padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--cream-dim);font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.arc-tag.hot{border-color:rgba(247,57,45,.45);color:var(--red)}

.arc-card h3{font-family:var(--disp);text-transform:uppercase;font-size:1.7rem;color:var(--gold);margin-bottom:4px;letter-spacing:.01em}
.arc-card h3 a{color:inherit}
.arc-card h3 a:hover{color:var(--cream)}
.arc-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-faint);margin-bottom:14px}
.arc-card>p{font-size:.9rem;color:var(--cream-dim);line-height:1.72}

/* Pushes the button to the card foot so a row of cards lines up regardless of
   how long each description runs. */
.arc-facts{list-style:none;margin:18px 0 20px;padding:16px 0 0;border-top:1px solid var(--line-soft);display:grid;gap:9px;flex:1 0 auto;align-content:start}
.arc-facts li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:.74rem}
.arc-facts span{color:var(--cream-faint);letter-spacing:.08em;text-transform:uppercase;font-size:.64rem}
.arc-facts strong{color:var(--cream);text-align:right}

.arc-card .btn{align-self:flex-start}
.arc-card-alt{border-color:rgba(82,167,90,.3)}
.arc-card-alt h3{color:var(--green)}
.arc-card-alt:hover{border-color:rgba(82,167,90,.55)}

.access-cta{display:flex;justify-content:center;margin-top:clamp(28px,4vw,40px)}

.step p a,.quote a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.step p a:hover,.quote a:hover{color:var(--cream)}

@media (max-width:900px){
  .arcade{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:620px){
  .arcade{grid-template-columns:minmax(0,1fr)}
  .arc-card{padding:22px 20px 20px}
  .arc-facts li{flex-direction:column;gap:2px}
  .arc-facts strong{text-align:left}
}