/* Moonshores website, based on the selected Moon Atlas direction.
   The logo's moon, seen in a daytime sky, becomes a map of everything the studio is making.
   Solid means real; dashed means not yet (placeholder art, planned platforms). */

:root {
  --navy: #073249;
  --navy-2: #0d4a6b;
  --ink-soft: #2f5569;
  --blue: #1b6a9c;
  --gold: #f4bf55;
  --gold-soft: #f9d98a;
  --cream: #fff7e6;
  --cream-2: #fcecc8;
  --sky: #d6eef8;
  --sky-2: #a9d8ee;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font: 400 1.125rem/1.6 var(--sans);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.sprite { position: absolute; overflow: hidden; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: #fff; font-weight: 700; }

/* POC notice */
.poc-bar { background: var(--navy); color: var(--cream); font-size: .9375rem; line-height: 1.4; }
.poc-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-block: 8px; }
.poc-bar a { display: inline-flex; align-items: center; min-height: 36px; color: var(--gold-soft); font-weight: 700; text-underline-offset: 3px; }
.poc-bar :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }
.poc-short { display: none; }

/* Header */
.site-header { background: var(--sky); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px 8px; }
.logo { display: block; border-radius: 50%; }
.logo img { width: 92px; height: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.site-nav a:hover { background: rgba(255, 255, 255, .7); }
.site-nav .nav-hello { background: var(--navy); color: var(--cream); }
.site-nav .nav-hello:hover { background: var(--navy-2); }

/* Hero */
.hero { background: radial-gradient(circle at 74% 46%, #eef8fc 0, rgba(238, 248, 252, 0) 42%), var(--sky); }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(16px, 3vw, 32px) clamp(56px, 7vw, 96px);
}
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -.015em; max-width: 12.5ch; }
.lead, .section-lead { color: var(--ink-soft); font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; }
.lead { margin-top: 24px; max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 2px solid var(--navy); border-radius: 999px; font-size: 1.0625rem; font-weight: 700; text-decoration: none; }
.btn-primary { background: var(--navy); color: var(--cream); }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-quiet:hover { background: rgba(255, 255, 255, .7); }

/* The atlas */
.atlas { margin: 0; }
.atlas-map { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; margin-inline: auto; }
.atlas-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc-label { font-family: var(--serif); font-size: 30px; fill: var(--navy); letter-spacing: .5px; }

.pin {
  --mark: 34px;
  position: absolute;
  left: calc(var(--x) - var(--mark) / 2);
  top: var(--y);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  animation: pin-drop .55s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i) * 80ms + 250ms);
}
.pin::before { content: ""; position: absolute; inset: -5px -4px; }
.pin-label {
  padding: 4px 12px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--cream);
  box-shadow: 0 2px 0 rgba(7, 50, 73, .28);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.pin:hover .pin-label { background: var(--navy); color: var(--cream); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin-label { background: var(--navy); color: var(--cream); outline: 3px solid var(--blue); outline-offset: 2px; }
.pin-studio { --mark: 44px; }

@keyframes pin-drop { from { opacity: 0; translate: 0 -16px; } }

.pin-mark { --mark: 34px; flex: none; display: grid; place-items: center; width: var(--mark); height: var(--mark); border-radius: 50%; }
.pin .pin-mark { --mark: inherit; }
.mark-game { background: var(--navy); box-shadow: 0 0 0 3px var(--cream); }
.mark-game::after { content: ""; width: 36%; height: 36%; border-radius: 50%; background: var(--gold); }
.mark-app { background: var(--sky-2); box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--navy); }
.mark-app::after { content: ""; width: 30%; height: 30%; border-radius: 50%; background: var(--navy); }
.mark-art { overflow: hidden; box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--navy); }
.mark-art img { width: 100%; height: 100%; object-fit: cover; }
svg.pin-mark { border-radius: 0; overflow: visible; }

.atlas-key { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; margin-top: 8px; font-size: 1rem; font-weight: 700; }
.key-item { display: inline-flex; align-items: center; gap: 10px; }
.key-item .pin-mark { --mark: 20px; }
.key-item .key-umbrella { --mark: 26px; }
.key-hint { flex-basis: 100%; text-align: center; color: var(--ink-soft); font-weight: 400; }

/* Shared section bits */
.games, .studio { padding-block: clamp(72px, 9vw, 120px); }
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.section-head h2 { font-size: clamp(2.75rem, 6vw, 4.5rem); letter-spacing: -.015em; }
.section-lead { flex-basis: 100%; max-width: 40em; margin-top: 4px; }
.region { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 7px; border: 2px solid var(--navy); border-radius: 999px; font-size: 1rem; font-weight: 700; }
.region .pin-mark { --mark: 22px; }

.hl {
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 92% / 0 .42em;
  transition: background-size .7s cubic-bezier(.2, .7, .2, 1) .2s;
}
:target .hl { background-size: 100% .42em; }
.feature, .entry { scroll-margin-top: 24px; }

.status { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 1rem; font-weight: 700; }
.phase { width: 15px; height: 15px; border: 2px solid var(--navy); border-radius: 50%; background: linear-gradient(90deg, var(--navy) 50%, transparent 50%); }

/* Store links */
.store-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 32px; padding: 16px 20px; border-radius: 16px; background: var(--cream-2); font-size: 1rem; }
.store-key h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; }
.store-key p { display: inline-flex; align-items: center; gap: 10px; }
.store-key-note { color: var(--ink-soft); }
.key-sample { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 2px solid var(--navy); border-radius: 10px; font-size: .9375rem; font-weight: 700; }
.key-live { background: var(--navy); color: var(--cream); }
.key-planned { border-style: dashed; }

.stores { margin-top: 20px; }
.stores-title { margin-bottom: 8px; color: var(--ink-soft); font-size: 1rem; font-weight: 700; }
.stores ul { display: flex; flex-wrap: wrap; gap: 8px; }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px 0 16px; border: 2px dashed var(--navy); border-radius: 12px; font-weight: 700; }
.store-tag { padding: 2px 10px; border-radius: 999px; background: var(--gold-soft); font-size: .875rem; }
a.store-live { padding-right: 16px; border-style: solid; background: var(--navy); color: var(--cream); text-decoration: none; }
a.store-live:hover { background: var(--navy-2); }
.store-none { margin-top: 10px; color: var(--ink-soft); font-size: 1rem; }

/* Featured games */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 80px);
}
.feature-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature-flip .feature-art { order: 2; }
.feature-art { display: block; overflow: hidden; border-radius: 24px; box-shadow: 0 26px 48px -30px rgba(7, 50, 73, .6); }
.feature-art img { width: 100%; height: auto; aspect-ratio: 1024 / 500; transition: transform .3s ease; }
.feature-art:hover img { transform: scale(1.02); }
.feature .entry-title { font-size: clamp(2.25rem, 3.6vw, 3rem); }
.tagline { margin-top: 8px; color: var(--ink-soft); font-family: var(--serif); font-size: 1.3125rem; line-height: 1.35; }
.desc { margin-top: 14px; max-width: 36ch; }
.feature .status { margin-top: 16px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--blue); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.text-link:hover { color: var(--navy); }

/* Placeholder entries */
.under-wraps { margin-top: clamp(72px, 9vw, 120px); padding-top: clamp(32px, 4vw, 48px); border-top: 2px dashed rgba(7, 50, 73, .3); }
.under-wraps-intro { max-width: 52ch; color: var(--ink-soft); font-size: 1.1875rem; }
.under-wraps-intro strong { color: var(--navy); }
.entry-grid { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: 32px; }
.entry-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entry-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
.entry .entry-title { font-size: 1.875rem; }
.entry-body { padding-top: 18px; }

.placeholder {
  --tint: var(--sky);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  padding: 16px;
  border: 2px dashed rgba(7, 50, 73, .5);
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, .55) 0 22px, transparent 23px),
    radial-gradient(circle at 84% 76%, rgba(255, 255, 255, .5) 0 34px, transparent 35px),
    radial-gradient(circle at 76% 18%, rgba(7, 50, 73, .06) 0 12px, transparent 13px),
    var(--tint);
  text-align: center;
}
.tint-sky { --tint: var(--sky); }
.tint-gold { --tint: var(--gold-soft); }
.tint-sand { --tint: var(--cream-2); }
.tint-cream { --tint: var(--cream); }
.ph-name { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.ph-note { color: var(--ink-soft); font-size: .875rem; font-weight: 700; }

/* Apps */
.apps {
  padding-block: clamp(88px, 10vw, 136px) clamp(72px, 9vw, 120px);
  border-radius: 50% 50% 0 0 / clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0;
  background: var(--sky);
}
.entry-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.entry-row .entry-body { padding-top: 0; }

/* Studio */
.studio .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: clamp(24px, 5vw, 80px); }
.studio h2 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); letter-spacing: -.01em; }
.studio-umbrella { width: 64px; height: 64px; margin-bottom: 16px; }
.studio-copy p { max-width: 36em; font-size: 1.25rem; line-height: 1.65; }
.studio-copy p + p { margin-top: 16px; color: var(--ink-soft); }

/* Contact */
.contact { padding-block: clamp(72px, 9vw, 120px); background: var(--gold); }
.contact h2 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); letter-spacing: -.015em; }
.contact p { max-width: 40ch; margin-top: 16px; font-size: 1.25rem; }
.email { display: inline-block; margin-top: 28px; font-family: var(--serif); font-size: clamp(1.25rem, 6vw, 3.5rem); line-height: 1.2; text-decoration-thickness: 3px; text-underline-offset: 8px; overflow-wrap: anywhere; }
.email:hover { text-decoration-color: var(--cream); }
.contact :focus-visible { outline-color: var(--navy); }

/* Footer */
.site-footer { background: var(--navy); color: var(--cream); font-size: .9375rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 24px; }
.footer-brand { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; }
.footer-brand img { width: 56px; height: auto; border-radius: 50%; box-shadow: 0 0 0 2px var(--cream); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-soft); font-weight: 700; text-underline-offset: 3px; }

/* Tablet */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1 { max-width: 14ch; }
  .atlas-map { max-width: 560px; }
  .feature, .feature-flip { grid-template-columns: 1fr; }
  .feature-flip .feature-art { order: 0; }
  .desc { max-width: 52ch; }
  .entry-grid-2 { grid-template-columns: 1fr; }
  .studio .wrap { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 720px) {
  .entry-grid-3 { grid-template-columns: 1fr; }
  .entry, .entry-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 18px; }
  .entry .entry-body { padding-top: 0; }
  .entry .entry-title { font-size: 1.625rem; }
  .entry .placeholder { aspect-ratio: 1; padding: 8px; border-radius: 16px; }
  .entry .ph-name { display: none; }
  .store-key { padding: 16px; }
}

@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .poc-bar { font-size: .875rem; }
  .poc-bar .wrap { flex-wrap: nowrap; padding-block: 4px; }
  .poc-long { display: none; }
  .poc-short { display: inline; }
  .poc-bar a { flex: none; min-height: 44px; }
  .site-header .wrap { padding-block: 12px 4px; }
  .logo img { width: 78px; }
  .site-nav ul { display: grid; grid-template-columns: auto auto; gap: 4px; }
  .site-nav a { padding: 0 14px; font-size: 1rem; }
  .hero h1 { font-size: 2.375rem; }
  .lead { margin-top: 18px; }
  .hero-actions { flex-wrap: nowrap; gap: 10px; margin-top: 24px; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .pin { --mark: 26px; gap: 4px; }
  .pin-studio { --mark: 34px; }
  .pin-label { padding: 3px 9px; font-size: .875rem; }
  .atlas-key { gap: 6px 18px; font-size: .9375rem; }
  .section-head { gap: 10px 14px; }
  .store-key { gap: 10px; }
  .store-key p { align-items: flex-start; }
  .key-sample { flex: none; }
  .tagline { font-size: 1.1875rem; }
  .studio-copy p { font-size: 1.125rem; }
  .contact p { font-size: 1.125rem; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pin { animation: none; }
  .hl, .feature-art img { transition: none; }
}

/* V2: preserve the illustrated atlas, individual pins, regions and original typography. */
.hero h1{max-width:15ch;font-size:clamp(2.5rem,4.6vw,4rem)}.hero .wrap{gap:clamp(24px,4vw,54px);padding-bottom:56px}.games,.studio{padding-block:72px}.feature{margin-top:44px}.under-wraps{margin-top:64px;padding-top:32px}.store-note{font-size:1rem;color:var(--ink-soft);margin-top:22px;max-width:55em}.version-links{padding:15px 5%;background:var(--cream);display:flex;justify-content:space-between;gap:15px;font-size:.875rem;color:var(--ink-soft)}.version-links a{font-weight:700}.pin-label{line-height:1.35}.pin::before{inset:-7px -4px}@media(max-width:960px){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px}.hero h1{font-size:2.75rem}.atlas-key{font-size:.875rem;gap:6px 14px}}@media(max-width:720px){.hero .wrap{grid-template-columns:1fr;gap:22px;padding-bottom:40px}.hero h1{max-width:none;font-size:2.5rem}.hero .lead{max-width:40em}.atlas-map{max-width:420px}.hero-actions{margin-top:20px}.games,.studio{padding-block:50px}.feature{margin-top:30px}.under-wraps{margin-top:45px}.entry,.entry-row{grid-template-columns:80px minmax(0,1fr);gap:16px}.entry .ph-note{font-size:.75rem}.entry .entry-title{font-size:1.5rem}.version-links{flex-wrap:wrap}}@media(max-width:560px){.site-nav a{font-size:.9375rem;padding:0 10px}.hero h1{font-size:2.375rem;line-height:1.12}.atlas-key .key-hint{font-size:.8125rem}.pin{--mark:24px;gap:3px}.pin-studio{--mark:30px}.pin-label{font-size:.75rem;padding:4px 7px}.pin[href='#darkestpath']{--x:57%!important}.pin[href='#winions']{--x:58%!important}.pin[href='#studio']{--x:16%!important}.pin[href='#learnkeeper']{--x:40%!important}.pin::before{inset:-8px -3px}.arc-label{font-size:28px}.section-head h2{font-size:2.5rem}.contact .email{overflow-wrap:anywhere}}

/* Website content: keep the Atlas illustration and introduce readable editorial pages. */
.eyebrow{font-size:.8125rem;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.hero-copy>.eyebrow{margin-top:24px}.hero-note{margin-top:18px;color:var(--ink-soft);font-size:1rem;max-width:40ch}
.collection-heading{font-size:clamp(1.75rem,3vw,2.5rem)}
.product-note{height:100%;padding:28px;border:1px solid rgba(7,50,73,.2);border-radius:20px;background:rgba(255,255,255,.35)}
.product-note .entry-body{padding:0}.product-note .entry-title{margin-top:12px}.product-summary{margin-top:18px;max-width:45ch}.product-note .eyebrow{font-size:.75rem}.product-note .text-link{gap:8px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.product-hero{background:var(--sky);padding-block:32px 72px}.product-hero .eyebrow{margin-top:24px}.product-hero h1{margin-top:16px;font-size:clamp(2.75rem,6vw,5rem);overflow-wrap:anywhere}.reading-wide{max-width:960px}.product-tagline{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.3;margin-top:22px;max-width:25ch}.product-hero .lead{max-width:55ch}.platform-note{display:inline-block;margin-top:26px;padding:9px 18px;border:2px dashed var(--navy);border-radius:12px;font-size:1rem;font-weight:700}.breadcrumb{margin-top:0}.product-details{padding-block:64px 80px}.product-details h2,.next-stop h2{font-size:clamp(2rem,4vw,3rem)}.product-details .section-head{display:block}.product-details .section-head h2{margin-top:12px}.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:40px}.detail-grid h3{font-size:1.5rem;line-height:1.3}.detail-grid p{margin-top:14px;color:var(--ink-soft)}.release-note{margin-top:60px;padding:32px;border-radius:24px;background:var(--cream-2)}.release-note h2{font-size:1.875rem}.release-note p{margin-top:14px;max-width:65ch}.release-note .btn{margin-top:24px}.next-stop{background:var(--gold-soft);padding-block:56px}.next-stop h2{margin-top:14px}.next-stop .btn{margin-top:26px}.faq-list{margin-top:32px}.faq-list details{border-bottom:1px solid rgba(7,50,73,.3);padding-block:20px}.faq-list summary{cursor:pointer;font-weight:700;padding:6px 32px 6px 0;min-height:44px;line-height:1.5}.faq-list details p{margin:14px 0 8px;max-width:62ch;color:var(--ink-soft)}
@media(max-width:720px){.product-note,.entry.product-note{display:block;padding:24px}.product-note .entry-title{font-size:1.75rem}.detail-grid{grid-template-columns:1fr;gap:32px}.product-hero{padding-bottom:48px}.product-details{padding-block:44px 56px}.release-note{padding:24px;margin-top:40px}.product-hero h1{font-size:clamp(2.5rem,10vw,4rem)}.hero-copy>.eyebrow{margin-top:18px}.product-hero .lead{font-size:1.125rem}.product-tagline{font-size:1.625rem}.entry-grid-2{gap:24px}}

/* Four additional games share a balanced two-column list. */
.entry-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.entry-grid-4{grid-template-columns:1fr}}

/* Game artwork and galleries. Images retain their native proportions. */
.product-note{padding:0;overflow:hidden}.product-note .entry-body{padding:24px}.entry-art{display:block;background:var(--cream-2)}.entry-art img{display:block;width:100%;height:auto;aspect-ratio:1024/500;object-fit:contain}
.product-icon{width:100px;height:auto;margin-top:24px;border-radius:20px}.product-media{padding-block:48px 8px}.product-cover{margin:0 0 48px}.product-cover>img{width:100%;height:auto;border-radius:24px}.product-cover figcaption,.gallery-note{margin-top:12px;font-size:.9375rem;color:var(--ink-soft)}.product-media h2{font-size:clamp(2rem,4vw,3rem)}
.game-gallery{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:16px 4px 24px;margin-top:24px;scrollbar-color:var(--blue) transparent}.game-gallery figure{flex:0 0 min(80vw,360px);margin:0;scroll-snap-align:start}.game-gallery a{display:flex;align-items:center;justify-content:center;border:1px solid #aabec3;border-radius:16px;background:#f4f2e9;overflow:hidden;min-height:200px}.game-gallery img{display:block;width:100%;height:auto;max-height:500px;object-fit:contain}.game-gallery figcaption{margin-top:12px;font-size:1rem;line-height:1.5}.game-gallery a:focus-visible{outline:3px solid #1b6a9c;outline-offset:3px}
.asset-viewer{padding:18px;border:0;border-radius:16px;background:#fff7e6;color:#073249;max-width:96vw;max-height:96vh;overflow:auto}.asset-viewer::backdrop{background:#04232ee8}.asset-viewer-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.asset-viewer-top p{font:700 1rem/1.5 system-ui;margin:0}.asset-viewer button{flex:none;min-width:44px;min-height:44px;border:1px solid #9fbbbf;border-radius:10px;background:#d6eef8;color:#073249;font:700 1rem system-ui;cursor:pointer}.asset-viewer-body{display:flex;align-items:center;gap:12px;margin-top:12px}.asset-viewer-body img{display:block;max-width:calc(94vw - 144px);max-height:76vh;width:auto;height:auto;object-fit:contain}.asset-viewer :focus-visible{outline:3px solid #1b6a9c;outline-offset:2px}
@media(max-width:720px){.entry.product-note{padding:0}.product-note .entry-body{padding:22px}.product-cover{margin-bottom:36px}.product-media{padding-top:32px}.product-icon{width:80px}.game-gallery{gap:16px}.asset-viewer{padding:10px}.asset-viewer-top{align-items:flex-start}.asset-viewer-body{gap:4px}.asset-viewer-body img{max-width:calc(94vw - 116px)}.asset-viewer-top p{font-size:.875rem}}

@media(max-width:720px){.asset-viewer-body{display:grid;grid-template-columns:44px minmax(0,1fr)44px;justify-items:center}.asset-viewer-body img{grid-column:1/-1;grid-row:1;max-width:calc(94vw - 20px);max-height:65vh}.asset-viewer-body>button:first-child{grid-column:1;grid-row:2}.asset-viewer-body>button:last-child{grid-column:3;grid-row:2}}

/* Homepage cards use real game captures; promotional text stays off the card artwork. */
.card-gameplay{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;height:260px;background:#f7efd9}.card-gameplay img{width:auto;height:100%;max-width:calc(50% - 8px);aspect-ratio:auto;object-fit:contain}.card-gameplay-wide{padding:0;background:#174b43}.card-gameplay-wide img{width:100%;height:100%;max-width:100%;object-fit:contain}#wordwild{height:auto}
@media(max-width:720px){.card-gameplay{height:230px;gap:12px;padding:12px}.card-gameplay-wide{padding:0}}

/* All games share the original wide feature layout. */
.feature-art-pending{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;border:2px dashed #8da9ae;background:var(--cream-2);color:var(--ink-soft)}.feature-art-pending p{font-size:1rem}.feature-art-pending .pin-mark{--mark:48px}.feature .card-gameplay{height:clamp(230px,24vw,300px)}
@media(max-width:960px){.feature .card-gameplay{height:300px}}
@media(max-width:560px){.feature .card-gameplay{height:240px}.feature-art-pending{min-height:240px}}