/* Rome owner-approved shared page-family visual contract v1.42.47.
   The existing global Rome site header, logo, nav, 1360px chrome, background and footer own their geometry.
   This stylesheet governs content-role parity only. No changes to editorial facts, SEO, scores or CTA targets. */
:root {
  --rome-layout-surface:1180px;
  --rome-layout-inset:18px;
  --rome-ink:#232528;
  --rome-muted:#5a6266;
  --rome-paper:#fffdf8;
  --rome-cream:#fbf7ef;
  --rome-rule:#e7dcc9;
  --rome-deep:#19201e;
  --rome-accent:#dca625;
  --rome-card-radius:6px;
  --rome-focus:#976919;
  --rome-body-font:'Noto Sans',Arial,sans-serif;
  --rome-heading-font:'Zilla Slab',Georgia,serif;
}
:where(.gamePage,.reviewPage,.detailPage,.rome-game-production,.rome-wave001-layout) {
  color:var(--rome-ink);
  font-family:var(--rome-body-font);
  overflow-wrap:break-word;
}
:where(.gamePage,.reviewPage,.detailPage,.rome-game-production,.rome-wave001-layout) :where(h1,h2,h3,h4) {
  font-family:var(--rome-heading-font);
  overflow-wrap:break-word;
}
:where(.gamePage,.reviewPage,.detailPage,.rome-game-production,.rome-wave001-layout) :where(p,li) {line-height:1.62}
:where(.gamePage,.reviewPage,.detailPage,.rome-game-production,.rome-wave001-layout) :where(img,video,iframe) {max-width:100%}
:where(.gamePage,.reviewPage,.detailPage,.rome-game-production,.rome-wave001-layout) :where(a,button,input,select,textarea,[role="button"]):focus-visible {
  outline:3px solid var(--rome-focus);outline-offset:3px;
}
/* One accepted 1180px family body geometry; the 1360px global header remains untouched. */
.gamePage > .container,
.reviewPage > .container,
.detailPage > .container {
  width:calc(100% - 2 * var(--rome-layout-inset));
  max-width:var(--rome-layout-surface);
  margin-inline:auto;
}
.rome-game-production .rgp-surface {max-width:var(--rome-layout-surface);margin-inline:auto}
.rome-wave001-layout.rome-wave001-layout {max-width:var(--rome-layout-surface);margin-inline:auto}
/* Cards and navigation are visually related, not forcibly identical across page archetypes. */
.gamePage .game,
.reviewPage .reviewIntro,
.detailPage .sectionHeader,
.rome-wave001-layout .rwc-article,
.rome-game-production .rgp-card {
  border-radius:var(--rome-card-radius);
}
.gamePage .breadcrumb,
.reviewPage .breadcrumb,
.detailPage .breadcrumb,
.rome-wave001-layout .rwc-breadcrumb,
.rome-game-production .rgp-breadcrumb {
  font-size:.84rem;line-height:1.5;overflow-wrap:anywhere;
}
.gamePage :where(.button,[role="button"]),
.reviewPage :where(.button,[role="button"]),
.detailPage :where(.button,[role="button"]),
.rome-wave001-layout :where(button,[role="button"]),
.rome-game-production :where(button,.rgp-btn,[role="button"]) {
  min-height:42px;
}
/* Do not visually crop the content or force grid columns on narrow screens. */
@media (max-width:760px) {
  .gamePage > .container,
  .reviewPage > .container,
  .detailPage > .container {width:100%;padding-inline:12px;box-sizing:border-box}
  .gamePage .game > .col-66,
  .reviewPage > .container > .col-70,
  .reviewPage > .container > .col-30 {max-width:100%;width:100%;float:none}
  .rome-wave001-layout.rome-wave001-layout {padding-inline:12px}
}
/* Existing WAVE001 content/navigation order stays: hero, compact page navigation, article.
   The early enormous mobile list is collapsed by the accepted scroll.js, with a short visible toggle. */
@media (max-width:870px) {
 .rome-wave001-layout.rome-wave001-layout .rwc-pageanchors {
    max-height:none;box-shadow:0 1px 3px rgba(0,0,0,.08);
 }
 .rome-wave001-layout.rome-wave001-layout .rwc-pageanchors-title {
    min-height:48px;box-sizing:border-box;padding:8px 13px;
 }
 .rome-wave001-layout.rome-wave001-layout .rwc-pageanchors[data-collapsed="true"] .rwc-scroll {display:none!important}
 .rome-wave001-layout.rome-wave001-layout .rwc-pageanchors[data-collapsed="false"] .rwc-scroll {max-height:220px;overflow-y:auto}
 .rome-wave001-layout.rome-wave001-layout .rwc-toggle {min-width:74px;min-height:34px}
}
@media (prefers-reduced-motion: reduce) {
 :where(.gamePage,.reviewPage,.detailPage,.rome-game-production,.rome-wave001-layout) * {scroll-behavior:auto!important}
}
