/* dp-home-games.css — the homepage's games (views/home-lbe.ejs), owned by its agent.
 *   1. step 3 "Pick your games": three fanned title cards with logos, each a button (.hg-fan)
 *   2. the game info view on the homepage: /setup's "See Details" sheet (/setup/setup.css .sf-gd,
 *      loaded on first tap by /js/dp-home-games.js) with the page's own stacking + type (.hg-sheet)
 */

/* ── 1. step 3: the fan ─────────────────────────────────────────────── */
.hg-fan {
  /* .hl-step__art gives the box (210px tall, full card width, clipped); the cards size to its width */
  container-type: inline-size;
  --hg-w: min(106px, 31cqw); /* the fan is about 2.6 cards wide once tilted, so this leaves a margin each side */
}
.hg-fan__card {
  position: absolute; top: calc(50% - var(--hg-w) * 0.75 - 6px); left: 50%;
  width: var(--hg-w); aspect-ratio: 2 / 3; margin-left: calc(var(--hg-w) / -2);
  padding: 0; border: 0; border-radius: 13px; overflow: hidden; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  box-shadow: 0 16px 30px var(--lp-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-tap-highlight-color: transparent;
  transform: translateX(var(--hg-x, 0)) rotate(var(--hg-r, 0deg)) translateY(var(--hg-y, 0));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.hg-fan__card--0 { z-index: 3; --hg-y: -4px; }
.hg-fan__card--1 { z-index: 2; --hg-x: calc(var(--hg-w) * -0.6); --hg-r: -10deg; --hg-y: 8px; }
.hg-fan__card--2 { z-index: 1; --hg-x: calc(var(--hg-w) * 0.6); --hg-r: 10deg; --hg-y: 8px; }
/* the fan opens a little under the pointer; the card you point at comes forward */
@media (hover: hover) {
  .hg-fan:hover .hg-fan__card--1 { --hg-x: calc(var(--hg-w) * -0.66); --hg-r: -12deg; }
  .hg-fan:hover .hg-fan__card--2 { --hg-x: calc(var(--hg-w) * 0.66); --hg-r: 12deg; }
  .hg-fan__card:hover { z-index: 4; --hg-y: -10px; box-shadow: 0 22px 38px var(--lp-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
}
.hg-fan__card:focus-visible { z-index: 4; --hg-y: -10px; outline: 3px solid #fff; outline-offset: 3px; }
.hg-fan__card:active { --hg-y: -2px; }

.hg-fan__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-fan__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(18, 6, 50, 0.82) 0%, rgba(18, 6, 50, 0.3) 36%, rgba(18, 6, 50, 0) 58%);
}
.hg-fan__logo {
  position: absolute; left: 0; right: 0; bottom: 8%; margin: 0 auto;
  width: var(--hg-logo-w, 60%); min-width: 62%; max-width: 86%; height: auto; max-height: 42%;
  object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(10, 2, 40, 0.55)) drop-shadow(0 2px 3px rgba(10, 2, 40, 0.4));
}
.hg-fan__name {
  position: absolute; left: 8px; right: 8px; bottom: 9%;
  font: 800 12px/1.1 var(--lp-display); text-align: center; text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) { .hg-fan__card { transition: none; } }

/* ── 2. the game info view on the homepage ──────────────────────────── */
/* over the top bar (900) and the old title modal (1000), under the site menu (1100) */
.sf-gd.hg-sheet { z-index: 1040; }
.sf-gd-clip.hg-sheet { z-index: 1050; }
/* the setup app's body type, which the sheet inherits there */
.hg-sheet {
  font-family: var(--su-body); font-size: 18px; line-height: 1.5; text-align: left;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
.hg-sheet a.su-btn { color: var(--su-bg); }
.hg-sheet a.su-btn:focus-visible { outline: 3px solid var(--su-ink); outline-offset: 3px; }
/* The sheet puts focus on its back button as it opens: no heavy ring there, a soft one still shows keyboard users where they are. */
.hg-sheet .sf-gd__back:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
html.hg-locked, html.hg-locked body { overflow: hidden; }

/* Wide screens: the same view as a centred panel over the page (a full black screen reads as leaving the
   site); the dimmed page behind it closes it on a click. Phones keep the setup's full-screen slide-in. */
@media (min-width: 900px) and (min-height: 560px) {
  .sf-gd.hg-sheet {
    inset: 24px auto 24px 50%; width: min(640px, calc(100vw - 48px)); max-height: 920px; margin: auto 0;
    border-radius: 28px; overflow: hidden;
    box-shadow: 0 0 0 100vmax rgba(18, 6, 50, 0.62), 0 30px 80px rgba(10, 2, 40, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    opacity: 0; transform: translate(-50%, 18px) scale(0.98);
    transition: transform 320ms var(--su-ease), opacity 220ms ease;
  }
  .sf-gd.hg-sheet.is-on { opacity: 1; transform: translate(-50%, 0); }
  /* the panel is the column: the trailer runs edge to edge, the text gets a wider margin */
  .sf-gd.hg-sheet { --su-gutter: 32px; }
  .hg-sheet .sf-gd__inner { max-width: none; }
  .hg-sheet .sf-gd__bar .su-btn { max-width: none; }
  .hg-sheet .sf-gd__top { padding: 12px 12px 6px; }
  .hg-sheet .sf-gd__hero--card { padding-top: 64px; }
  .hg-sheet .sf-gd__card { height: clamp(240px, 44vh, 440px); }
  .hg-sheet .sf-gd__bar { padding-bottom: 18px; }
}
@media (min-width: 900px) and (min-height: 560px) and (prefers-reduced-motion: reduce) {
  .sf-gd.hg-sheet { transition: none; }
}