/* ══════════════════ Othello section — game-dojo.app/othello ══════════════════
   Layered on top of /assets/style.css. Only pages that explicitly link this
   file are affected. The existing Chess pages never load it, so they stay
   completely unchanged. */

/* 1) Neutralize the decorative chess-piece pseudo-elements defined in style.css
      (faint floating king/rook images) so no chess imagery bleeds into the
      Othello section. */
.page-hero::after,
.page-hero::before,
footer::after,
.features-section::before,
.spotlight-section::after,
.article-cta::after {
  content: none !important;
  display: none !important;
}

/* 2) Section accent — Othello green (#1f6b45), used for highlighted cards and
      the "today" guide card border so the section reads as its own game. */
.oth-accent { color: #1f6b45; }

/* 3) Shared Othello board graphic (SVG), scales to its container. */
.oth-board-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.oth-board {
  width: min(320px, 82vw);
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
/* Hero board sits a touch larger. */
.oth-hero .oth-board { width: min(360px, 78vw); }

/* The shared .board-label (from style.css) is absolutely positioned; give the
   spotlight wrapper room beneath the board for it. */
.oth-board-wrap.oth-labelled { margin-bottom: 3rem; }