/* Games pages: /games/sirens-melody, /games/pipers-call, /games/puzzling-beasts-of-nyxara.
   Built on site.css tokens (Inknut Antiqua only, deep-sea palette). Specs: README_SITE.md
   "Games pages" + SirensMelody / PipersCall / PuzzlingBeasts .dc.html. */

.g-section { padding: var(--section-y) var(--side); }
.g-alt { background: var(--bg-alt); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.g-alt-top { background: var(--bg-alt); border-top: 1px solid var(--line-soft); }
.g-purple { background: var(--purple); }
.g-wrap { max-width: var(--content); margin: 0 auto; }
.g-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.g-col { display: flex; flex-direction: column; gap: 22px; }
.g-col.tight { gap: 20px; }
.g-lead { margin: 0; font-size: clamp(18px, 2vw, 21px); line-height: 1.8; color: var(--text); text-wrap: pretty; }
.g-body { margin: 0; font-size: 17px; line-height: 1.9; color: var(--text-body); text-wrap: pretty; }
.g-h1 { margin: 0; font-weight: 600; line-height: 1.2; }
.g-h2 { margin: 0; font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.35; text-wrap: balance; }
.g-h3 { margin: 0; font-weight: 600; font-size: clamp(19px, 2vw, 22px); line-height: 1.4; }
.g-img { display: block; width: 100%; border-radius: 4px; border: 1px solid rgba(134,196,207,0.25); }
.g-figure { position: relative; margin: 0; }
.g-list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.g-list li { font-size: 17px; line-height: 1.7; color: var(--text-body); }

/* Chips (players / time / ages) */
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.g-chips li {
  font-size: 13px; letter-spacing: 0.02em; color: var(--quote);
  padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 20px;
}
.g-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.g-actions.center { justify-content: center; }
/* Secondary button on coloured / dark backgrounds */
.btn-sea { background: rgba(11,28,41,0.5); border: 1px solid rgba(134,196,207,0.5); color: var(--text); }
.btn-sea:hover { border-color: var(--accent); color: var(--text); }
.g-link-lilac { color: var(--purple-eyebrow); }
.g-link-lilac:hover { color: #dddbf8; }

/* CTA band (purple) */
.g-cta { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.g-cta.center { align-items: center; text-align: center; }
.g-cta .g-body { color: var(--quote); }

/* ---------- Siren's Melody ---------- */
.sm-hero { background: linear-gradient(160deg, #1f5c7a 0%, #16384d 50%, #3a376e 100%); }
.sm-hero .eyebrow { color: var(--accent-hover); }
.sm-title { margin: 0; }
.sm-title img { display: block; width: min(520px, 100%); height: auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.45)); }
.sm-hero .g-actions { margin-top: 4px; }
.sm-flatlay { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 30px 60px rgba(0,0,0,0.4); height: auto; }
.sm-how-img { aspect-ratio: 16 / 11; object-fit: cover; height: auto; }
.sm-box-h3 { margin: 8px 0 0; font-weight: 600; font-size: 19px; }
.sm-prizes { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.5)); }
.sm-web { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.sm-web-line { margin: 0; max-width: 34ch; font-size: clamp(22px, 2.8vw, 30px); font-weight: 600; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.sm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: stretch; }
.sm-tile-clue {
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg-alt); border: 1px solid rgba(134,196,207,0.25); border-radius: 4px;
}
.sm-tile-clue img { display: block; max-width: 100%; max-height: 360px; height: auto; width: auto; }
.sm-tile-ui { height: 100%; min-height: 240px; object-fit: cover; }
.sm-trailer-sec { padding-top: 0; }
.sm-trailer { display: flex; flex-direction: column; gap: 18px; }
.sm-trailer .g-h2 { font-size: clamp(22px, 2.6vw, 28px); }
.sm-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--card);
  border: 1px solid rgba(134,196,207,0.3); border-radius: 4px; overflow: hidden;
}
.sm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sm-reviews-sec { padding-top: 0; }
.sm-credits { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px); }
.sm-credit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.sm-credit { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sm-credit img, .sm-credit video { aspect-ratio: 278 / 218; object-fit: cover; height: auto; }
.sm-credit video { background: var(--bg); }
.sm-credit img.on-white { background: #fff; }
.sm-credit figcaption { display: flex; flex-direction: column; gap: 4px; }
.sm-credit .role { font-size: 14px; color: var(--text-muted); }
.sm-credit .who { font-size: 17px; font-weight: 500; }
.sm-why .g-actions { margin-top: 6px; }
.sm-insta { margin: 6px 0 0; font-size: 16px; color: var(--quote); }

/* ---------- Piper's Call ---------- */
.pc-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 96px) var(--side) 0; }
.pc-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
  filter: brightness(0.5) saturate(0.75);
}
.pc-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,28,41,0.55) 0%, rgba(11,28,41,0.3) 60%, rgba(11,28,41,0.45) 100%); }
.pc-hero-grid {
  position: relative; max-width: var(--content); margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(8px, 4vw, 56px); align-items: end;
}
.pc-card {
  display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 4vw, 40px); align-self: center;
  background: rgba(11,28,41,0.9); border: 1px solid rgba(134,196,207,0.3); border-radius: 6px;
}
.pc-card .g-h1 { font-size: clamp(34px, 5vw, 56px); }
/* Title artwork (white lettering and the red hat) instead of text; the alt text is the heading. */
.pc-title img { display: block; width: min(100%, 440px); height: auto; }
.pc-bundle-line { margin: 0; font-size: 16px; line-height: 1.7; color: var(--purple-eyebrow); }
.pc-piper {
  position: relative; justify-self: center; display: flex; justify-content: center;
  width: clamp(190px, 30vw, 380px); margin-top: clamp(8px, 2vw, 24px);
}
.pc-piper::before { /* soft elliptical ground shadow under the feet */
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 22px; transform: translateY(45%);
  border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%);
}
.pc-piper img { position: relative; display: block; width: 100%; height: auto; }
.pc-how { padding-bottom: 0; }
.pc-how .g-split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 5vw, 72px); }
.pc-components { display: block; justify-self: center; width: 100%; max-width: 436px; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45)); }
.pc-awaits { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.pc-banner {
  position: relative; overflow: hidden; border-radius: 6px; border: 1px solid rgba(134,196,207,0.25);
  min-height: clamp(220px, 30vw, 340px); display: flex; align-items: flex-end;
}
.pc-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45) saturate(0.7); }
.pc-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,28,41,0) 30%, rgba(11,28,41,0.85) 100%); }
.pc-banner-copy { position: relative; z-index: 1; padding: clamp(22px, 4vw, 40px); display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.pc-banner-copy .g-h2 { font-size: clamp(24px, 3.2vw, 36px); }
.pc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.pc-teaser {
  display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 26px;
  background: var(--bg-alt); border: 1px solid rgba(134,196,207,0.22); border-radius: 6px;
}
.pc-teaser-art {
  position: relative; height: clamp(200px, 26vw, 260px); display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse at 50% 85%, rgba(134,196,207,0.16) 0%, rgba(134,196,207,0) 65%); border-radius: 4px;
}
.pc-teaser-art > img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pc-teaser-art > img.pc-clue {
  position: absolute; right: 6%; bottom: 6%; width: 38%; max-height: none; height: auto;
  transform: rotate(-6deg); filter: drop-shadow(0 8px 14px rgba(0,0,0,0.4));
}
.pc-teaser p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--text-body); text-wrap: pretty; }
.pc-expo .g-split { max-width: 1000px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 64px); }
.pc-video {
  display: block; justify-self: center; width: 100%; max-width: 380px; height: auto;
  border-radius: 6px; border: 1px solid rgba(134,196,207,0.3); background: var(--bg);
}

/* Reviews (same card as Home's reviews; 2 x 2 so four never leave one alone on a row) */
.g-reviews { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.g-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.g-review-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } /* 3 in a row, like Home */
.g-review {
  margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: clamp(24px, 3vw, 32px); background: var(--card); border: 1px solid rgba(134,196,207,0.22); border-radius: 6px;
}
.g-review blockquote { margin: 0; font-style: italic; font-size: 17px; line-height: 1.8; color: var(--quote); text-wrap: pretty; }
.g-review figcaption { display: flex; align-items: center; gap: 14px; }
.g-review figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.g-review figcaption a { font-size: 14px; letter-spacing: 0.02em; padding: 12px 0; }
.g-review figcaption span { font-size: 14px; color: var(--text-body); }

/* ---------- The Puzzling Beasts of Nyxara ---------- */
.pb-hero { border-top: 0; }
.pb-wip {
  align-self: flex-start; font-size: 13px; font-weight: 500; letter-spacing: 0.03em; color: #0b1c29;
  background: var(--purple-eyebrow); padding: 6px 14px; border-radius: 20px;
}
.pb-hero .g-h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.25; text-wrap: balance; }
.pb-hook { margin: 0; font-size: clamp(22px, 2.8vw, 30px); font-weight: 600; line-height: 1.45; color: var(--text); text-wrap: balance; }
.pb-discover { margin: 0; font-size: clamp(17px, 1.9vw, 19px); line-height: 1.85; color: var(--quote); text-wrap: pretty; }
.pb-small { margin: 0; font-size: 15px; line-height: 1.8; color: var(--text-muted); text-wrap: pretty; }
/* Placeholder until the artwork lands: swap the whole block for an <img>. */
.pb-art-placeholder {
  aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 24px; border: 1px dashed rgba(134,196,207,0.5); border-radius: 6px;
  background: repeating-linear-gradient(135deg, rgba(134,196,207,0.04) 0 14px, transparent 14px 28px);
}
.pb-art-placeholder strong { font-size: 18px; font-weight: 500; }
.pb-glimpse { height: auto; box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
.pb-art-placeholder span { font-size: 14px; color: var(--text-muted); }
.pb-steps-sec { padding: clamp(56px, 8vw, 100px) var(--side); }
.pb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.pb-step { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(134,196,207,0.3); }
.pb-step .num { font-size: 15px; font-weight: 500; color: var(--purple-eyebrow); }
.pb-step p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--text-body); text-wrap: pretty; }
.pb-notes-sec { padding: 0 var(--side) var(--section-y); }
.pb-notes {
  max-width: 760px; margin: 0 auto; background: #efe6d2; color: #2a2420; border-radius: 4px;
  padding: clamp(28px, 5vw, 56px); box-shadow: 0 30px 60px rgba(0,0,0,0.4); display: flex; flex-direction: column; gap: 18px;
}
.pb-notes-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid rgba(42,36,32,0.25); }
.pb-notes h2 { margin: 0; font-weight: 600; font-size: clamp(22px, 3vw, 30px); line-height: 1.35; color: #2a2420; }
.pb-notes .sub { font-style: italic; font-size: 16px; color: #5b4e44; }
.pb-notes p { margin: 0; font-size: 17px; line-height: 1.85; color: #2a2420; }
.pb-notes .warn { font-weight: 600; line-height: 1.7; color: #8a2a1f; }
.pb-notes h3 { margin: 6px 0 0; font-weight: 600; font-size: 18px; color: #2a2420; }
.pb-notes ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.pb-notes li { font-size: 17px; line-height: 1.7; }
.pb-notes .signoff { margin-top: 8px; font-style: italic; font-size: 19px; text-align: right; }