/* ─── Skip Link ──────────────────────────────────────────────────────────── */

.breakpoint-debug-overlay {
  display: none;
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 120;
  padding: 0.25rem 0.45rem;
  background: rgb(21 21 21 / 0.9);
  color: #fff;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  line-height: 1.2;
  pointer-events: none;
}

@media print {
  .breakpoint-debug-overlay {
    display: none;
  }
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-fg);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  transform: translateY(-150%);
}

.skip-link:link,
.skip-link:visited {
  color: var(--color-bg);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

#main:focus {
  outline: none;
}

/* ─── Back To Top ───────────────────────────────────────────────────────── */

.back-to-top-button {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 29;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: #fff;
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

body.back-to-top-visible .back-to-top-button {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top-button:link,
.back-to-top-button:visited {
  color: var(--color-fg);
}

.back-to-top-button:hover,
.back-to-top-button:focus-visible {
  color: var(--color-bg);
  background: var(--color-fg);
  border-color: var(--color-fg);
  text-decoration: none;
}

.back-to-top-button__icon {
  font-size: 1rem;
  line-height: 1;
}

body.resources-panel-open .back-to-top-button {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 64rem) {
  body[data-game-slug]:has(.game-resources-repeat) .back-to-top-button {
    right: calc(20rem + 24px);
  }
}

/* ─── Notification Banner ────────────────────────────────────────────────── */

.notification-banner {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 31;
}

.notification-banner-message {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  margin: 0;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.notification-banner-link {
  color: #fff;
  text-underline-offset: 2px;
}

.notification-banner-close {
  position: absolute;
  right: var(--space-3);
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  opacity: 0.8;
}

.notification-banner-close:hover {
  opacity: 1;
}

/* ─── Profile Menu ───────────────────────────────────────────────────────── */

.profile-menu-wrap {
  position: absolute;
  left: var(--space-3);
}

.profile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  line-height: 1;
  background: var(--color-bg);
  border: 0;
  cursor: pointer;
  color: var(--color-fg);
}

.profile-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.profile-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  width: max-content;
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
  display: grid;
  gap: var(--space-2);
  z-index: 35;
}

.profile-menu[hidden] {
  display: none;
}

.profile-menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.profile-menu-links a,
.profile-menu-logout {
  display: block;
  padding: 0.7rem 0.8rem;
  color: var(--color-fg);
}

.profile-theme-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  display: block;
  padding: 0.7rem 0.8rem;
  color: var(--color-fg);
  cursor: pointer;
}

.profile-theme-toggle:hover,
.profile-theme-toggle:focus-visible {
  color: var(--color-fg);
  background: var(--color-surface);
}

.profile-menu-links a:link,
.profile-menu-links a:visited,
.profile-menu-logout:link,
.profile-menu-logout:visited {
  color: var(--color-fg);
}

.profile-menu-logout {
  border-top: 1px solid var(--color-border);
  padding-top: calc(0.7rem + var(--space-1));
}

/* ─── Menu Toggle (hamburger) ────────────────────────────────────────────── */

.menu-toggle,
.sticky-nav-menu-toggle,
.site-nav {
  display: none !important;
}

.menu-toggle {
  appearance: none;
  background: var(--color-bg);
  color: var(--color-fg);
  border: 0;
  padding: 0;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  line-height: 1;
  font: inherit;
  position: absolute;
  right: var(--space-3);
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
  display: block;
  width: 1.2rem;
  height: 2px;
  background: currentColor;
  content: "";
}

.menu-toggle-icon {
  position: relative;
  transition: background-color 0.15s ease;
}

.menu-toggle-icon::before {
  position: absolute;
  top: -5px;
  left: 0;
  transition: top 0.15s ease, transform 0.15s ease;
}

.menu-toggle-icon::after {
  position: absolute;
  top: 5px;
  left: 0;
  transition: top 0.15s ease, transform 0.15s ease;
}

body.menu-open .menu-toggle-icon {
  background: transparent;
}

body.menu-open .menu-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

body.menu-open .menu-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Mobile Menu ────────────────────────────────────────────────────────── */

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 0.35);
}

.site-nav[hidden] { display: none; }

.site-nav-inner {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(32rem, 100%);
  padding: var(--space-4);
  background: var(--color-bg);
  overflow: auto;
  box-shadow: -6px 0 24px rgb(0 0 0 / 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}

.site-nav-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-nav-context-title {
  margin: 0;
  font-weight: 600;
  color: var(--color-fg);
  font-size: 1.05rem;
}

.site-nav-context-title a {
  color: inherit;
  text-decoration: none;
}

.site-nav-close {
  appearance: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  color: var(--color-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.25rem;
}

.site-nav-close:hover,
.site-nav-close:focus-visible {
  background: var(--color-fg);
  color: var(--color-bg);
}

.site-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  font-variant-caps: small-caps;
}

.site-nav-list > li {
  width: 100%;
}

.site-nav-list--serif {
  font-family: var(--font-serif);
}

.site-nav-list--sans {
  font-family: var(--font-sans);
}

.site-nav-list a,
.site-nav-drilldown-link {
  color: var(--color-link, #06c);
  display: block;
  max-width: 100%;
  letter-spacing: 0.07rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  transition: color 0.15s;
}

.site-nav-drilldown-link {
  font: inherit;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

.site-nav-list a:hover,
.site-nav-list a:focus-visible,
.site-nav-drilldown-link:hover,
.site-nav-drilldown-link:focus-visible,
.site-nav-drilldown-link[aria-expanded="true"] {
  color: var(--color-link-hover, #004080);
}

.site-nav-list--sans a {
  color: var(--color-accent);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.site-nav-game-block {
  display: grid;
  gap: 16px;
}

.site-nav-global-block {
  display: grid;
  gap: 12px;
}

.site-nav-global-block--spaced {
  margin-top: 2px;
}

.site-nav-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 2px 0;
  width: 100%;
}

.site-nav-divider--between {
  margin: 2px 0;
  border: none;
  border-top: 1px solid var(--color-border);
  width: 100%;
}

.site-nav-game-title {
  margin: 0;
  font-weight: 600;
}

.site-nav-game-title a {
  color: var(--color-fg);
  text-decoration: none;
}

.site-nav-subhead {
  margin: 16px 0 8px;
  color: var(--color-muted);
  font-family: var(--font-serif);
  font-variant-caps: small-caps;
  font-size: 0.8rem;
  letter-spacing: 0.07rem;
}

.site-nav [aria-current="page"] {
  font-weight: inherit;
}

.site-nav-panel[hidden] { display: none; }

.site-nav-back {
  appearance: none;
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
}

.site-nav-back:hover,
.site-nav-back:focus-visible {
  text-decoration: none;
}

.site-nav-drilldown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}

.site-nav-drilldown-btn,
.site-nav-drilldown-link {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font: inherit;
}

.site-nav-drilldown-btn {
  color: var(--color-muted);
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: 0.07rem;
}

.site-nav-drilldown-btn:hover,
.site-nav-drilldown-btn:focus-visible {
  color: var(--color-fg);
}

.site-nav-drilldown-btn[aria-expanded="true"] {
  color: var(--color-fg);
}

.site-nav-drilldown-item.is-active {
  border-radius: 2px;
}

body.menu-open {
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

@media (min-width: 40rem) {
  body.menu-open .menu-toggle {
    background: var(--color-accent-dark);
    color: #fff;
  }

  .site-nav {
    background: transparent;
  }

  .site-nav::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.2);
    z-index: 0;
  }

  .site-nav-inner {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: auto;
    overflow-x: clip;
    overflow-y: auto;
    box-shadow: 6px 0 24px rgb(0 0 0 / 0.2);
  }

  .site-nav-inner > .game-search {
    max-width: min(22.5rem, 100%);
  }

  .site-nav-panels {
    display: flex;
    width: min(45rem, 100%);
    max-width: 100%;
    align-items: start;
    gap: 0;
    min-width: 0;
  }

  .site-nav-panel[data-panel="top"] {
    flex: 1 1 22.5rem;
    max-width: 22.5rem;
    min-width: 0;
    padding-right: var(--space-4);
    border-right: 1px solid var(--color-border);
  }

  .site-nav-panel[data-panel^="sections-"] {
    flex: 1 1 22.5rem;
    max-width: 22.5rem;
    min-width: 0;
    padding-left: var(--space-4);
  }

  .site-nav-panel[data-panel^="sections-"] .site-nav-back {
    display: none;
  }

}

/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */

.breadcrumbs {
  display: none;
  margin-top: var(--space-3);
  margin-bottom: 16px;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--color-accent);
  font-size: 0.9rem;
}

.breadcrumbs li + li::before {
  content: "›";
  margin-right: var(--space-2);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-muted);
}

/* ─── Sticky Section Nav ─────────────────────────────────────────────────── */

.rulebook-sticky-wrapper {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

@media (min-width: 64rem) {
  body[data-game-slug]:has(.game-resources-repeat) .rulebook-sticky-wrapper {
    right: 20rem;
  }
}

.sticky-nav-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--color-fg);
  min-height: 2.75rem;
  min-width: 2.75rem;
  flex-shrink: 0;
  font: inherit;
  appearance: none;
}

.sticky-nav-menu-toggle:hover,
.sticky-nav-menu-toggle[aria-expanded="true"] {
  background: var(--color-fg);
  color: var(--color-bg);
}

.section-nav-sticky {
  width: 100%;
  background: var(--color-bg);
  border-top: 1px solid var(--color-fg);
}

.sticky-section-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem 0.25rem;
}

.sticky-section-nav__info {
  display: none;
  width: 100%;
  flex: unset;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  font-family: var(--font-serif);
  text-align: center;
}

.sticky-section-nav__name {
  color: var(--color-fg);
  font-size: 0.98rem;
  font-weight: 700;
}

.sticky-section-nav__count,
.sticky-section-nav__up {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.sticky-section-nav__up {
  text-decoration: none;
}

.sticky-section-nav__up:hover {
  color: var(--color-fg);
  border-bottom: none;
}

.sticky-section-nav__buttons,
.prev-next {
  display: flex;
  width: 100%;
  flex: unset;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01rem;
  text-transform: uppercase;
}

.sticky-section-nav__prev,
.sticky-section-nav__next {
  display: flex;
  width: 100%;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
}

.sticky-section-nav__prev {
  justify-content: center;
}

.sticky-section-nav__next {
  justify-content: center;
}

.prev-next__element {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}

.prev-next__element--prev,
.prev-next__element--prev:visited {
  color: var(--color-fg);
}

a.prev-next__element--next,
a.prev-next__element--next:link,
a.prev-next__element--next:visited {
  color: var(--color-bg);
  background: var(--color-fg);
}

.prev-next__element--prev:hover,
.prev-next__element--prev:active {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: none;
}

a.prev-next__element--next:hover,
a.prev-next__element--next:active {
  color: var(--color-bg);
  background: var(--color-accent);
  text-decoration: none;
  border-bottom: none;
}

.prev-next__extended {
  display: none;
}

.nav-prev,
.nav-next {
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .sticky-nav-menu-toggle {
    display: none;
  }

  .sticky-section-nav {
    flex-direction: row;
    align-items: stretch;
    padding: var(--space-2) var(--space-3);
  }

  .sticky-section-nav__info,
  .sticky-section-nav__buttons,
  .sticky-section-nav__prev,
  .sticky-section-nav__next {
    width: auto;
    align-items: center;
  }

  .sticky-section-nav__info {
    flex: 1 1 0;
    align-items: flex-start;
    text-align: left;
  }

  .sticky-section-nav__buttons,
  .prev-next {
    flex: 1 1 0;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .sticky-section-nav__prev,
  .sticky-section-nav__next {
    flex: 1 1 0;
  }

  .sticky-section-nav__prev {
    justify-content: flex-end;
  }

  .sticky-section-nav__next {
    justify-content: flex-start;
  }

  .prev-next__element {
    width: auto;
    justify-content: unset;
  }

  .prev-next__extended {
    display: inline;
  }
}

@media (min-width: 80rem) {
  .sticky-section-nav__info {
    display: flex;
  }
}

/* ─── Form Controls ─────────────────────────────────────────────────────── */

.search-form input,
.all-games-tools input,
.all-games-tools select,
.newsletter-form__input {
  font: inherit;
  font-size: 20px;
  line-height: calc(2.5rem - 2px);
  height: 2.5rem;
  min-height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: #fff;
  color: var(--color-fg);
  padding-top: 2px;
  padding-bottom: 0;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.search-form input::placeholder,
.newsletter-form__input::placeholder {
  color: var(--color-muted);
}

.search-form input:focus-visible,
.all-games-tools input:focus-visible,
.all-games-tools select:focus-visible,
.newsletter-form__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Search ─────────────────────────────────────────────────────────────── */

.search-form {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-form input {
  padding-right: 2.25rem;
  font-family: var(--font-serif);
  width: 100%;
}

.search-form input::placeholder {
  font-family: var(--font-serif);
}

.search-clear {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  line-height: 1;
  font: inherit;
  appearance: none;
}

.search-clear svg {
  width: 20px;
  height: 20px;
}

.search-clear:hover {
  color: var(--color-fg);
}

.search-results {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

.landing-mobile-search {
  margin: 0 0 var(--space-4);
}

.landing-mobile-search .search-results:empty {
  display: none;
}

/* ─── Divider ────────────────────────────────────────────────────────────── */

.divider {
  border: 0;
  border-top: 1px solid var(--color-border);
}

.divider--full-width {
  width: 100vw;
  margin: var(--space-6) 0 0 calc(50% - 50vw);
}

@media (min-width: 64rem) {
  .divider--full-width {
    width: calc(100vw - 4rem);
    margin-left: calc(50% - 50vw + 2rem);
  }
}

.divider--resources {
  margin: var(--space-5) 0 var(--space-3);
  max-width: var(--content-width);
}

.divider--landing {
  margin: 0 0 var(--space-4);
  max-width: var(--content-width);
}

/* ─── Game Cards ─────────────────────────────────────────────────────────── */

.game-cards-grid {
  margin: var(--space-4) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  column-gap: var(--space-4);
  row-gap: 2rem;
  width: 100%;
}

.game-cards-grid[data-masonry] {
  display: block;
  position: relative;
}

.game-card-item {
  margin: 0;
  width: 100%;
}

.game-cards-grid[data-masonry] .game-card-item {
  position: absolute;
  width: calc((100% - var(--space-4)) / 2);
  margin-bottom: 2rem;
}

.game-cards-grid__sizer {
  width: calc((100% - var(--space-4)) / 2);
}

.game-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  justify-items: center;
  text-align: center;
}

.game-card:hover,
.game-card:focus-visible {
  border-bottom: none;
  text-decoration: none;
  outline: none;
}

.game-card-art {
  width: 100%;
  max-width: 175px;
  margin: 0 auto;
  border-radius: 2px;
}

.game-card-art img {
  display: block;
  margin: 0 auto;
  max-width: 175px;
  max-height: 200px;
  width: auto;
  height: auto;
}

.game-cards-grid .game-card-art img {
  margin: 0 auto;
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
}

.game-card:hover .game-card-art img,
.game-card:focus-visible .game-card-art img {
  outline: solid 4px var(--color-accent);
}

.game-card-art-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-muted);
  padding: var(--space-2);
}

.game-card-title {
  margin: 0;
  font-size: 16px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  text-align: center;
}

@media (min-width: 48rem) {
  .game-cards-grid .game-card-art img {
    max-width: 175px;
  }

  .game-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .game-cards-grid[data-masonry] .game-card-item {
    width: calc((100% - (var(--space-4) * 2)) / 3);
  }

  .game-cards-grid__sizer {
    width: calc((100% - (var(--space-4) * 2)) / 3);
  }
}

@media (min-width: 64rem) {
  .game-cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .game-cards-grid[data-masonry] .game-card-item {
    width: calc((100% - (var(--space-4) * 3)) / 4);
  }

  .game-cards-grid__sizer {
    width: calc((100% - (var(--space-4) * 3)) / 4);
  }
}

/* ─── Featured Games Module ──────────────────────────────────────────────── */

.featured-games-module {
  margin: var(--space-4) 0 var(--space-5);
}

.featured-games-module--landing {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: var(--space-4) 0 0;
}

.featured-games-module--landing::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 50%;
  bottom: 0;
  left: 50%;
  margin-right: -50vw;
  margin-left: -50vw;
  background: #fbfaf7;
}

@media (min-width: 64rem) {
  .featured-games-module--landing::before {
    margin-right: calc(-50vw + 2rem);
    margin-left: calc(-50vw + 2rem);
  }
}

/* ─── Home Page ──────────────────────────────────────────────────────────── */

.home-update,
.home-search {
  max-width: var(--content-width);
}

.home-page > h1,
.home-page > .site-tagline,
.home-page > h2,
.home-page > .home-update,
.home-page > .home-search {
  margin-left: auto;
  margin-right: auto;
}

.home-page > h1,
.home-page > .site-tagline,
.home-page > h2 {
  text-align: center;
}

.home-page > .featured-games-module > .game-cards-grid {
  margin-bottom: 0;
}

.home-update {
  margin: 0 0 var(--space-4);
  text-align: center;
}

.home-page-title {
  font-size: 2rem;
}

.site-tagline {
  margin: 0 0 var(--space-4) 0;
  text-align: center;
  color: var(--color-fg);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.35;
}

@media (min-width: 64rem) {
  .home-page-title {
    font-size: 2.5rem;
  }
}



.home-newsletter {
  margin: var(--space-5) 0;
  max-width: var(--content-width);
}

.home-update-line {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
}

.home-update-pill,
.feedback-survey-pill {
  display: inline-block;
  align-items: center;
  justify-content: center;
  padding: 0.35em 0.55em;
  border-radius: 5px;
  border: 1px solid var(--light-orange);
  background: var(--light-orange);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.75em;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.site-footer-nav .feedback-survey-pill {
  color: #fff;
}

.feedback-survey-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
  border-bottom: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-variant-caps: normal;
  letter-spacing: 0.02rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.feedback-survey-link:link,
.feedback-survey-link:visited {
  color: var(--color-accent);
  border-bottom: none;
}

.site-nav-list .feedback-survey-link,
.site-nav-list .feedback-survey-link:link,
.site-nav-list .feedback-survey-link:visited {
  color: var(--color-accent);
  border-bottom: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-variant-caps: normal;
  letter-spacing: 0.02rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.feedback-survey-link:hover,
.feedback-survey-link:active,
.feedback-survey-link:focus-visible {
  border-bottom: none;
  color: var(--color-accent-dark);
}

.site-nav-list .feedback-survey-link:hover,
.site-nav-list .feedback-survey-link:active,
.site-nav-list .feedback-survey-link:focus-visible {
  border-bottom: none;
  color: var(--color-accent-dark);
}

.feedback-survey-text {
  color: var(--color-muted);
  border-bottom: 1px solid transparent;
  letter-spacing: 0.02rem;
  font-variant-caps: normal;
}

.feedback-survey-link:hover .feedback-survey-text,
.feedback-survey-link:active .feedback-survey-text,
.feedback-survey-link:focus-visible .feedback-survey-text {
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-accent-dark);
}

/* ─── All Games Page ─────────────────────────────────────────────────────── */

.all-games-tools {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  max-width: var(--content-width);
}

.all-games-tools-group {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.all-games-tools-label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-fg);
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  margin-bottom: var(--space-1);
}

#all-games-sort {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235e5e5e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px 20px;
  padding-right: 36px;
}

.all-games-page > h1,
.all-games-page > p,
.all-games-page > .all-games-tools,
.all-games-page > .game-cards-grid,
.all-games-page > .all-games-no-results {
  margin-left: auto;
  margin-right: auto;
}

.all-games-no-results {
  text-align: center;
  color: var(--color-text-muted, #888);
  margin-top: var(--space-4);
}

.all-games-page > h1,
.all-games-page > p {
  text-align: center;
}

.all-games-page > .game-cards-grid {
  margin-top: var(--space-3);
}

/* ─── Not Found ──────────────────────────────────────────────────────────── */

.not-found {
  max-width: var(--content-width);
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-bg);
}

.not-found h1 {
  margin-top: 0;
}

.not-found-links {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.not-found-links a {
  display: inline-block;
}

/* ─── Game Detail ────────────────────────────────────────────────────────── */

.game-headline-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-muted);
  margin-bottom: 0.1em;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: solid 1px transparent;
  width: fit-content;
}

a.game-headline-title:hover,
a.game-headline-title:focus-visible {
  color: var(--color-muted);
  border-bottom: solid 1px var(--color-muted);
}

.game-meta {
  width: min(100%, var(--content-width));
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
}

.game-meta th,
.game-meta td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}

.game-meta th {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.game-cover {
  margin: 0 0 var(--space-3);
  width: min(18rem, 100%);
}

.game-landing .game-cover {
  margin-top: var(--space-2);
}

.game-cover img {
  display: block;
  max-width: 225px;
  max-height: 225px;
  width: auto;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

@media (max-width: 48rem) {
  body[data-game-section="landing"] .game-header--top .game-cover {
    width: 100%;
    max-width: none;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    background: #f7f5ef;
  }

  body[data-game-section="landing"] .game-header--top .game-cover img {
    width: 100%;
    max-width: none;
    height: 380px;
    max-height: 380px;
    object-fit: contain;
    object-position: center;
    border: 0;
  }
}

.game-publication,
.game-designer {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  max-width: var(--content-width);
}

.game-publication {
  color: var(--color-fg);
}

.game-designer {
  color: var(--color-fg);
}

.game-overview-row {
  margin: 0 0 var(--space-4);
  max-width: var(--content-width);
}

.game-overview {
  max-width: var(--content-width);
}

.game-details-label {
  margin: 0 0 var(--space-2);
}

.game-description-label {
  margin: 0 0 var(--space-2);
}

.game-details-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  max-width: var(--content-width);
}

.game-description-wrap {
  max-width: var(--content-width);
}

.game-detail-item {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.game-detail-item .material-icons {
  font-size: 1em;
}

.game-description {
  margin-bottom: var(--space-3);
  max-width: var(--content-width);
}

.game-editions {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.game-editions a {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.85rem;
}

.game-editions .material-icons {
  font-size: 1em;
}

.game-header--top {
  display: block;
}

.game-header--top .game-cover {
  margin-bottom: var(--space-3);
}

.game-header--top h1 {
  margin-top: 0;
  max-width: var(--content-width);
}

.landing-bookmarks-tools {
  margin: 0 0 var(--space-4);
  max-width: var(--content-width);
}

.landing-bookmarks-tools .bookmarks-panel {
  margin-bottom: 0;
}

.game-resources-repeat {
  margin: var(--space-4) 0;
  max-width: var(--content-width);
}

.resources-panel-toggle {
  display: none;
}

.game-resources-close {
  display: none;
}

.game-resources-title {
  margin: 0 0 var(--space-3);
  color: var(--color-fg);
}

.game-resources-repeat h2 {
  margin-top: 0;
  display: none;
}

.game-resources-repeat .game-search {
  margin: 0 0 var(--space-3);
}

.game-resources-repeat .game-search .search-results {
  margin-top: 0;
  padding-top: 0;
}

.game-resources-repeat .game-search .search-results:not(:empty) {
  padding-top: var(--space-4);
}

.game-resources-toc {
  margin: 0 0 var(--space-3);
}

.rulebook-toc {
  display: none;
}

.game-resources-toc h3 {
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
}

.game-resources-toc ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.game-resources-toc li {
  padding: 0.15rem 0;
}

.game-resources-toc-subsection {
  padding-left: var(--space-3);
}

.game-resources-toc a {
  font-family: var(--font-sans);
  text-transform: uppercase;
}

.game-resources-repeat ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
}

.game-resources-repeat ul li a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 10px 12px;
  background: #f7f5ef;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.game-resources-repeat ul li a:hover {
  background: #fff;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.game-resources-repeat ul li a .material-icons {
  font-size: 1.1rem;
  color: var(--color-muted);
  flex-shrink: 0;
}

.game-resources-repeat ul li a:hover .material-icons {
  color: var(--color-accent);
}

@media (max-width: 63.99rem) {
  .resources-panel-toggle {
    position: fixed;
    left: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 32;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: #fff;
    color: var(--color-fg);
    cursor: pointer;
    appearance: none;
  }

  .resources-panel-toggle:hover,
  .resources-panel-toggle:focus-visible {
    background: var(--color-fg);
    color: var(--color-bg);
  }

  .game-resources-repeat {
    display: none;
  }

  body.resources-panel-open {
    overflow: hidden;
  }

  body.resources-panel-open .game-resources-repeat {
    position: fixed;
    inset: 0;
    z-index: 31;
    display: block;
    width: 100%;
    max-width: none;
    height: 100vh;
    margin: 0;
    padding: var(--space-4);
    overflow-y: auto;
    background: #fbfaf7;
  }

  body.resources-panel-open .game-resources-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    margin-left: auto;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: #fff;
    color: var(--color-fg);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    appearance: none;
  }
}

@media (min-width: 64rem) {
  body[data-game-slug]:has(.game-resources-repeat) {
    --resources-sidebar-width: 20rem;
    --resources-sidebar-gap: var(--space-5);
  }

  body[data-game-slug]:has(.game-resources-repeat) .divider--resources {
    display: none;
  }

  body[data-game-slug]:has(.game-resources-repeat) .game-resources-repeat {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20rem;
    z-index: 20;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    max-width: none;
    margin: 0;
    background: #fbfaf7;
    border-left: 1px solid var(--color-border);
    padding: var(--space-3);
  }

  body[data-game-section="landing"] .game-landing > .divider--full-width,
  body[data-game-section="landing"] .game-landing > .featured-games-module {
    grid-column: 1 / -1;
  }

  body[data-game-section="rulebook"] .site-main .container > .rulebook-intro .rulebook-search {
    display: none;
  }
}

/* ─── Rulebook Full ──────────────────────────────────────────────────────── */

.rulebook {
  max-width: var(--content-width);
}

.rulebook-intro {
  max-width: var(--content-width);
}

.rulebook-section,
.content-elements,
.section-group,
.section-groups {
  max-width: var(--content-width);
}

.rulebook-section-heading.rulebook-index ~ ul {
  list-style: none;
  padding-left: 0;
}

.rulebook-section-heading.rulebook-index ~ p:has(+ ul) {
  margin-bottom: 0;
}

.rulebook-section-heading.rulebook-index ~ ul li {
  margin-left: 1rem;
}

.rulebook-search {
  margin-bottom: var(--space-4);
}

.rulebook-search .search-field,
.rulebook-search .search-input,
.rulebook-search .search-input::placeholder {
  font-family: var(--font-serif);
}

.rulebook-toc {
  margin-bottom: var(--space-5);
  scroll-margin-top: var(--scroll-offset);
}



.rulebook-toc ol {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.rulebook-toc li {
  padding: var(--space-1) 0;
}

.rulebook-toc li.rulebook-toc-subsection {
  padding-left: var(--space-3);
}

.rulebook-toc a {
  font-family: var(--font-sans);
  text-transform: uppercase;
}

.rulebook-section-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.rulebook-section-heading--h2 {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.rulebook-section-heading .heading-utilities {
  flex-shrink: 0;
}

.content-card-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.content-card-grid li {
  margin: 0;
  padding: 0;
}

.content-card-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  min-height: 8.5rem;
  text-decoration: none;
  color: inherit;
}

.content-card-grid li > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  min-height: 8.5rem;
}

.content-card-grid a::before {
  content: "";
  width: 4.5rem;
  height: 4.5rem;
  background-image: url("/games/indonesia/images/indonesia-cover.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

.content-card-grid li > span::before {
  content: "";
  width: 4.5rem;
  height: 4.5rem;
  background-image: url("/games/indonesia/images/indonesia-cover.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

.content-card-grid a:hover,
.content-card-grid a:focus-visible {
  text-decoration: underline;
}

/* ─── Image Components ───────────────────────────────────────────────────── */

.image-components-page {
  display: grid;
  gap: var(--space-5);
}

.image-components-page > h1,
.image-components-intro,
.image-demo > h2,
.image-demo > p,
.image-aside-copy {
  max-width: var(--content-width);
}

.image-demo {
  display: grid;
  gap: var(--space-3);
}

.image-demo > h2,
.image-demo > p {
  margin: 0;
}

.image-module {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.image-module img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: #f6f3eb;
}

.image-module figcaption {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.image-module-wide {
  width: min(100%, 72rem);
}

.image-module-text {
  max-width: var(--content-width);
}

.image-pair-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.image-square-row {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: min(100%, 72rem);
  margin: 0 0 var(--space-3);
}

.image-square-row-item {
  margin: 0;
  height: clamp(3.5rem, 12vw, 7rem);
}

.image-square-row-item img {
  aspect-ratio: 1 / 1;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

.image-module-card {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-bg);
}

.image-aside-demo {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.image-module-aside {
  max-width: 18rem;
}

@media (min-width: 40rem) {
  .image-aside-demo {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  }
}

/* ─── Book Index ─────────────────────────────────────────────────────────── */

.book-index {
  max-width: var(--content-width);
}

.index-entries {
  list-style: none;
  padding: 0;
}

.index-entries li {
  padding: var(--space-1) 0;
}

/* ─── Rulebook Image ─────────────────────────────────────────────────────── */

.rulebook-image {
  margin: var(--space-3) 0;
  max-width: var(--content-width);
}

.rulebook-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.rulebook-image figcaption {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* ─── Articles ───────────────────────────────────────────────────────────── */

.articles-page h1 {
  margin-bottom: var(--space-4);
}

.articles-sort {
  margin-bottom: var(--space-4);
}

.articles-sort-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  color: var(--color-muted);
  transition: border-color 0.15s, color 0.15s;
}

.articles-sort-btn:hover,
.articles-sort-btn:focus-visible {
  border-color: var(--color-fg);
  color: var(--color-fg);
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.article-list-empty {
  color: var(--color-muted);
}

.article-card {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-bg);
  max-width: var(--content-width);
}

.article-card-image-link {
  display: block;
  line-height: 0;
}

.article-card-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: 220px;
  object-fit: cover;
}

.article-card-body {
  padding: var(--space-3) var(--space-4);
}

.article-card-title {
  font-size: 1.15rem;
  margin: 0 0 var(--space-1);
  max-width: none;
}

.article-card-title a {
  color: var(--color-fg);
  text-decoration: none;
}

.article-card-title a:hover,
.article-card-title a:focus-visible {
  color: var(--color-accent);
}

.article-card-date {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
  max-width: none;
}

.article-card-preview {
  margin: 0;
  color: var(--color-fg);
  font-size: 0.95rem;
  line-height: 1.5;
}

.article-hero-image {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: var(--space-4);
  display: block;
}

.article-header {
  margin-bottom: var(--space-4);
}

.article-title {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}

.article-date {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin: 0;
}

/* ─── Bookmarks ──────────────────────────────────────────────────────────── */

.bookmarks-rule {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.04);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bookmark-card-content {
  flex: 1 1 auto;
}

.bookmark-card-empty {
  color: var(--color-muted);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

.bookmarks-panel {
  margin: 0 0 var(--space-4);
}

.bookmarks-panel[hidden] { display: none; }

.bookmarks-empty-message {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin: 0;
}

.bookmarks-empty-message[hidden] { display: none; }

.bookmarks-panel h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.bookmarks-panel-list,
.bookmarks-panel-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.bookmarks-rule + .bookmarks-rule {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.bookmarks-panel li ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.bookmark-remove {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0.2rem 0.45rem;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bookmark-remove-icon {
  display: inline-flex;
  align-items: center;
}

.bookmark-remove:hover,
.bookmark-remove:focus-visible {
  color: var(--color-fg);
  border-color: var(--color-fg);
}

.rule-link {
  border-bottom: 1px dashed var(--color-accent);
  color: inherit;
}

.rule-link:hover,
.rule-link:active {
  border-bottom-style: solid;
}

/* ─── Heading Tools ──────────────────────────────────────────────────────── */

.bookmark-toggle,
.anchor-copy,
.section-copy,
.print-page-button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 var(--space-1);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}

.bookmark-toggle .material-symbols-outlined,
.anchor-copy .material-symbols-outlined,
.section-copy .material-symbols-outlined,
.print-page-button .material-symbols-outlined,
.heading-tools-toggle .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.bookmark-toggle:hover,
.anchor-copy:hover,
.section-copy:hover,
.print-page-button:hover {
  color: var(--color-fg);
}

.bookmark-toggle:focus-visible,
.anchor-copy:focus-visible,
.section-copy:focus-visible,
.print-page-button:focus-visible,
.heading-tools-toggle:focus-visible {
  color: var(--color-fg);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.bookmark-toggle[aria-pressed="true"] { color: var(--color-accent); }

.bookmark-toggle .bookmark-icon-on { display: none; }
.bookmark-toggle[aria-pressed="true"] .bookmark-icon-off { display: none; }

/* Newsletter form */
.newsletter-form {
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  max-width: var(--content-width);
  align-items: stretch;
}

.newsletter-form__input {
  font-family: var(--font-serif);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  flex: 1;
}

.newsletter-form__input::placeholder {
  font-family: var(--font-serif);
}

.newsletter-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.newsletter-form__button {
  appearance: none;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  min-height: 2.5rem;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: white;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.newsletter-form__button:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.newsletter-form__button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.newsletter-form__button:active {
  transform: translateY(1px);
}

/* Newsletter form footer variant */
.site-footer-newsletter {
  text-align: center;
  margin: var(--space-5) 0;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.site-footer-newsletter .newsletter-form {
  justify-content: center;
}
.bookmark-toggle[aria-pressed="true"] .bookmark-icon-on { display: inline; }

.heading-tools-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 var(--space-1);
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}

.heading-tools-toggle:hover,
.heading-tools-toggle:focus-visible {
  color: var(--color-fg);
}

.heading-utilities {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin-left: 0.5rem;
}

.page-heading {
  display: flex;
  align-items: last baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-heading > h1 {
  margin-right: 0;
}

@media (min-width: 40rem) {
  .heading-tools-toggle {
    display: none;
  }

  .heading-utilities[hidden] {
    display: inline-flex !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .page-heading .bookmark-toggle,
  .page-heading .anchor-copy,
  .page-heading .section-copy,
  .page-heading .print-page-button,
  .rulebook-section-heading .bookmark-toggle,
  .rulebook-section-heading .anchor-copy,
  .rulebook-section-heading .section-copy {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .page-heading:hover .bookmark-toggle,
  .page-heading:hover .anchor-copy,
  .page-heading:hover .section-copy,
  .page-heading:hover .print-page-button,
  .page-heading:focus-within .bookmark-toggle,
  .page-heading:focus-within .anchor-copy,
  .page-heading:focus-within .section-copy,
  .page-heading:focus-within .print-page-button,
  .rulebook-section-heading:hover .bookmark-toggle,
  .rulebook-section-heading:hover .anchor-copy,
  .rulebook-section-heading:hover .section-copy,
  .rulebook-section-heading:focus-within .bookmark-toggle,
  .rulebook-section-heading:focus-within .anchor-copy,
  .rulebook-section-heading:focus-within .section-copy {
    opacity: 1;
  }

}
.content-notice {
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border-left: 3px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}