/* pgsamusements.com homepage and Digital Art page sections. Loaded only by
   templates/home.html.j2 and templates/digital-art.html.j2, after player.css
   (tokens, header, buttons) and pp-shared.css (footer, card logos). Class
   prefix hm-. Link colours carry a body.pp prefix because
   `body.pp a { color: inherit }` (0,1,2) beats a plain `.hm-x a` (0,1,1).
   Design: docs/superpowers/specs/2026-09-28-pgsamusements-player-site-rebuild-design.md */

.hm-section { padding: 56px 0; }
.hm-alt { background: #110a20 linear-gradient(180deg, #120a22, #0d0718); }
.hm-h1 { margin: 0 0 14px; font-size: clamp(2.2rem, 4.6vw, 3.1rem); line-height: 1.06; font-weight: 800;
  letter-spacing: -.01em; text-shadow: 0 0 24px rgba(167, 139, 250, .55); }
.hm-h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.12; font-weight: 800; }
.hm-lede { margin: 0 0 22px; max-width: 660px; color: #cfc4e2; font-size: 1.05rem; }
.hm-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.hm-play { color: #a78bfa; text-shadow: 0 0 18px rgba(167, 139, 250, .6); }

/* hero */
.hm-hero { padding: 56px 0 48px; background: radial-gradient(700px 380px at 85% 10%, rgba(123, 29, 177, .55), transparent 70%); }
.hm-hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; }
.hm-hero-art { display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .35), 0 24px 60px rgba(0, 0, 0, .5); }

/* Play Responsibly strip (the solid colour is the gradient's middle, for the contrast check) */
.hm-rsg { background: #2a0f47 linear-gradient(90deg, #1d0934, #3b1263, #1d0934);
  border-top: 1px solid rgba(167, 139, 250, .35); border-bottom: 1px solid rgba(167, 139, 250, .35); }
.hm-rsg p { margin: 0 auto; padding-top: 14px; padding-bottom: 14px; text-align: center; font-size: 1rem; }
.hm-rsg strong { font-weight: 800; }
body.pp .hm-rsg a { color: #c4b5fd; font-weight: 700; text-underline-offset: 3px; }

/* numbered steps */
.hm-steps { list-style: none; margin: 18px 0 24px; padding: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hm-step { background: rgba(255, 255, 255, .05); border: 1px solid rgba(167, 139, 250, .3); border-radius: 14px; padding: 16px; }
.hm-num { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%;
  background: #7c3aed; box-shadow: 0 0 12px rgba(139, 92, 246, .6); font-weight: 800; }
.hm-step-title { display: block; margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }

/* Digital Art steps: platform screenshot on top, the number overlapping its lower edge */
/* the .62/.8 dark overlay is what keeps the step text readable over the photo (real-pixel minimum about 4.9:1); browser_check's flat-colour contrast math cannot see it */
.hm-da-steps { background: linear-gradient(rgba(13, 7, 24, .62), rgba(13, 7, 24, .8)),
  #0d0718 url(/assets/8aef6e2e_69b9b3d4ad027684d857e88b.jpg) center / cover no-repeat; }
.hm-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The step's h2 comes first in the markup on purpose (screen-reader heading
   navigation reaches it before the screenshot); flex order keeps the image on top. */
.hm-step-shot { display: flex; flex-direction: column; padding: 0 0 18px; overflow: hidden; }
.hm-step-shot img { display: block; width: 100%; height: auto; aspect-ratio: 910 / 664; object-fit: cover;
  background: #120a22; border-bottom: 1px solid rgba(167, 139, 250, .25); margin-bottom: 12px; order: -2; }
.hm-step-shot .hm-num { position: relative; margin: -30px 16px 12px; order: -1; }
.hm-step-shot .hm-step-title, .hm-step-shot p { margin-left: 16px; margin-right: 16px; }
.hm-step-shot .hm-step-title { font-size: 1.05rem; }
.hm-step-shot p { margin-top: 8px; margin-bottom: 0; color: #d9d0ea; font-size: .95rem; line-height: 1.5; }

/* the Rules notice */
.hm-notice { margin: 20px 0 0; padding: 14px 16px; border: 1px solid rgba(196, 181, 253, .45); border-radius: 12px;
  background: rgba(124, 58, 237, .1); font-size: .8rem; font-weight: 700; letter-spacing: .02em; line-height: 1.55; }
body.pp .hm-notice a { color: #c4b5fd; text-underline-offset: 3px; }

/* artwork banner: homepage section and Digital Art hero */
/* digital-art.html.j2 preloads this image and the phone copy below; keep the URLs and the 820px breakpoint in step */
.hm-banner { position: relative; display: flex; align-items: center; min-height: clamp(460px, 38vw, 720px); padding: 80px 0;
  background: linear-gradient(90deg, rgba(13, 7, 24, .78) 0%, rgba(13, 7, 24, .38) 42%, rgba(13, 7, 24, 0) 62%),
              #0d0718 url(/assets/45d454e5_69b892d23e607211014e6683.png) 100% 50% / cover no-repeat; }
.hm-banner > .pp-wrap { width: 100%; }
.hm-banner-text { max-width: 520px; }
@media (max-width: 1000px) { .hm-banner-text { max-width: 440px; } }
@media (min-width: 821px) and (max-width: 880px) { .hm-banner-text { max-width: 360px; } .hm-pay-label { max-width: 240px; } }
.hm-banner-title { margin: 0 0 12px; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; font-weight: 800; }
.hm-banner-art { display: none; }
.hm-pay { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(167, 139, 250, .22); }
.hm-pay-label { margin: 0 0 10px; color: #cfc4e2; font-size: .85rem; }
.hm-pay .pp-cards img { height: 34px; }
@media (max-width: 820px) {
  .hm-banner { display: block; min-height: 0; padding: 48px 0 0; background: #0d0718; }
  .hm-banner-art { display: block; height: 280px; margin-top: 28px;
    background: linear-gradient(180deg, #0d0718 0%, rgba(13, 7, 24, 0) 35%),
                url(/assets/90e73aee_69b892d23e607211014e6683.png) 100% 50% / cover no-repeat; }
}

/* game tiles */
.hm-sub { margin: 30px 0 12px; font-size: 1.25rem; font-weight: 800; }
.hm-tiles { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.hm-tiles-free { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-tiles-platforms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hm-tiles img { display: block; width: 100%; height: auto; border-radius: 12px; object-fit: cover; }
.hm-tiles-free img { aspect-ratio: 450 / 249; }
.hm-tiles-platforms img { aspect-ratio: 4 / 3; }

/* Good to Know */
.hm-cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hm-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(167, 139, 250, .28); border-radius: 14px; padding: 18px; }
.hm-card h3 { margin: 0 0 6px; color: #c4b5fd; font-size: 1.06rem; font-weight: 800; }
.hm-card p { margin: 0; color: #e3dcf0; font-size: .92rem; overflow-wrap: anywhere; }
.hm-card .hm-card-note { margin-top: 6px; color: #b9aecf; font-size: .8rem; }
body.pp .hm-card a { color: #c4b5fd; font-weight: 700; text-underline-offset: 3px; }
.hm-card-link { display: inline-block; margin-top: 10px; font-size: .88rem; }

/* closing band */
.hm-ready { padding: 56px 0; text-align: center;
  background: radial-gradient(600px 260px at 50% 0%, rgba(124, 58, 237, .45), transparent 70%), #120a22; }
.hm-ready .hm-lede { margin-left: auto; margin-right: auto; }
.hm-ready .hm-ctas { justify-content: center; margin-top: 16px; }

/* in-page anchors (#how-it-works, #game-platforms) stop 16px below the top; from
   1000px the root's scroll-padding (player.css) clears the sticky header instead */
.hm-section[id] { scroll-margin-top: 16px; }
@media (min-width: 1000px) { .hm-section[id] { scroll-margin-top: 0; } }

@media (max-width: 1000px) {
  .hm-hero-grid { grid-template-columns: 1fr; }
  .hm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tiles-platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hm-steps-4, .hm-cards { grid-template-columns: 1fr; }
  .hm-tiles-free { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-section, .hm-hero { padding: 40px 0; }
}