/* === GREEN FELT BOXES FOR DESCRIPTION & INSTRUCTIONS ONLY === */

/* Box background & structure */
.single-game__description,
.single-game__instructions {
  background: radial-gradient(circle at center, #0d5c2c 0%, #06441f 100%);
  border: 2px solid rgba(255, 215, 0, 0.35);
  border-radius: 14px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.single-game__description:hover,
.single-game__instructions:hover {
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.2);
  transform: translateY(-2px);
}

/* Gold section headings */
.single-game__description h2.single-game__subheading,
.single-game__instructions h2.single-game__subheading {
  color: #FFD700;
  font-weight: 700;
  font-size: 22px;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

/* Add card suits before headings */
.single-game__description h2.single-game__subheading::before,
.single-game__instructions h2.single-game__subheading::before {
  content: "♠️ ♥️ ♦️ ♣️ ";
  font-size: 16px;
  margin-right: 6px;
  opacity: 0.8;
}

/* === WHITE TEXT INSIDE BOX === */
.single-game__description,
.single-game__instructions {
  color: #ffffff;
}

.single-game__description p,
.single-game__instructions p,
.single-game__description ul,
.single-game__instructions ul,
.single-game__description ol,
.single-game__instructions ol,
.single-game__description li,
.single-game__instructions li {
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Lists spacing */
.single-game__description ul,
.single-game__instructions ul,
.single-game__description ol,
.single-game__instructions ol {
  margin-left: 20px;
}

/* === IFRAME AUTO-FIT OVERRIDE === */
/* Scoped to .ocg-autofit specifically — added dynamically by custom.js
   ONLY on games that actually send real resize data (currently
   Blackjack and Three Card Poker). Every other game keeps its
   original position:absolute fill-the-container behavior untouched,
   correctly filling whatever width/height is set in the admin panel. */
.game-iframe-container.ocg-autofit {
  overflow: visible;
  min-height: 0;
}
.game-iframe.ocg-autofit {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  /* THE DEFAULT IS NO CAP. Changed 2026-09-21.

     This rule used to read `max-width:800px`, a value chosen for Blackjack
     and Three Card Poker, and custom.js applies .ocg-autofit to EVERY game
     that reports its size. So every such game inherited an 800px cap inside
     a 1254px container and lost 454px.

     Spider shipped with 70px cards against Klondike's 87px on 2026-09-20.
     TriPeaks shipped with 71px on 2026-09-21. Both fixes were per-game
     exceptions added below, which is exactly why it happened twice: the
     list has to be extended by hand for every new game, and it will be
     forgotten again.

     Inverting it retires the problem. A game is uncapped unless it is
     NAMED below, so the list now describes three existing titles rather
     than growing with the catalogue, and a new game is correct without
     anyone editing this file. Games cap themselves internally (the
     solitaires stop at 1200px), so nothing sprawls on a wide monitor. */
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* The games that DO want a cap, and the only ones. Blackjack is the single
   title still on the original 800px; the four below it were already lifted
   to 1200 by the rule further down, which is why inverting the default
   changes nothing for them. */
.game-iframe.ocg-autofit[src*="blackjack"]:not([src*="single-card-blackjack"]):not([src*="european-blackjack"]):not([src*="atlantic-city-blackjack"]) {
  max-width: 800px;
}
/* 2026-09-24: [src*="blackjack"] matches ANY address containing the word,
   so it was also holding the new Single Deck Blackjack (single-card-blackjack)
   at 800px inside the 1254px container — narrower table, smaller cards than
   Spanish 21. The new blackjack games are excluded by name so the cap keeps
   applying to the original Blackjack only. Spanish 21 (spanish-21-) never
   matched. Any future new blackjack game: add another :not(...) above. */

/* Baccarat Banque is laid out responsively for a 16:9 slot up to
   1200px: the game sizes its own cards, type and felt against whatever
   width it is given, and asks the parent for a matching height. The
   shared 800px cap above is what was keeping it small.

   Scoped to this one game rather than raised globally, because the
   rule above is shared with Blackjack and Three Card Poker, which were
   laid out for 800px and have not been tested wider. Once those two
   have been checked, this block can go away and the shared value can
   simply become min(1200px, 100%).

   Matching on the src rather than data-id so the rule does not depend
   on a database id that could change. */
.game-iframe.ocg-autofit[src*="baccarat-banque"],
.game-iframe.ocg-autofit[src*="three-card-poker"],
.game-iframe.ocg-autofit[src*="hearts"],
.game-iframe.ocg-autofit[src*="five-card-draw"] {
  max-width: min(1200px, 100%);
}

/* === SOLITAIRE IFRAME WIDTH ===
   Added 2026-09-20.

   THE PROBLEM, in one line: Klondike renders at the full 1254px container and
   Spider renders at 800px, so Spider's cards are 70px where Klondike's are 87px.

   Klondike does not send a resize message, so it never gets .ocg-autofit and
   keeps style.css's position:absolute / width:100% — the full container.
   Spider, Pyramid and FreeCell DO send one, so they inherit the 800px cap
   above, which was chosen for Blackjack and Three Card Poker.

   Measured, same build, two container widths:

       game       at 800px      at 1254px
       klondike   card 87px     card 87px
       spider     card 70px     card 87px     <- the whole issue
       pyramid    card 87px     card 87px

   Lifting the cap for these three puts them on Klondike's footing. It also
   removes the loading flash as a side effect, because the pre-autofit state
   (width:100%, 1254px) and the post-autofit state (width:100%, no cap, 1254px)
   are now the same width — there is nothing left to jump between.

   Their boards cap themselves at 1200px internally, so this does not let them
   sprawl on a wide monitor; it just stops the iframe squeezing them first. */

/* SUPERSEDED 2026-09-21 — kept as a comment because it is the history of
   the fault, not a rule. These three needed naming only while the default
   was 800px. With the default inverted they are uncapped automatically,
   and so is TriPeaks, and so is every solitaire built after it.

   .game-iframe.ocg-autofit[src*="spider-solitaire"],
   .game-iframe.ocg-autofit[src*="pyramid-solitaire"],
   .game-iframe.ocg-autofit[src*="free-cell-solitaire"] { max-width: none; }
*/

/* Baccarat Banque and Three Card Poker keep their 1200px cap, so they still
   narrow from 1254px to 1200px while the autofit class is on its way. Giving
   them the same cap BEFORE the class arrives removes that 54px jump. The
   games above need no equivalent rule: both of their states are now
   width:100%. */
.game-iframe[src*="baccarat-banque"],
.game-iframe[src*="three-card-poker"] {
  max-width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* OnlineCardGames light theme */
:root {
  --ocg-green:#087a4b;
  --ocg-green-dark:#05643e;
  --ocg-ink:#111827;
  --ocg-muted:#667085;
  --ocg-line:#e7ebef;
  --ocg-soft:#f6f8f9;
  --ocg-shadow:0 10px 35px rgba(21,34,50,.08);
}
html { scroll-behavior:smooth; }
body { background:#f4f7f8; color:var(--ocg-ink); }
body > .container, main > .container { background:#fff; }
.container { max-width:1280px; }
.top-nav { background:#fff; color:var(--ocg-ink); border-bottom:1px solid var(--ocg-line); margin-bottom:0; padding:12px 0; box-shadow:0 2px 12px rgba(20,31,45,.035); }
.navbar a, .navbar .nav-link { color:#24303d; font-size:14px; font-weight:600; }
.top-nav .navbar-nav, .top-nav .nav-link { white-space:nowrap; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color:var(--ocg-green); }
.navbar-brand img { max-height:38px; width:auto; }
.navbar-toggler { border-color:#d9e0e5; }
.navbar-toggler-icon { filter:none; opacity:1; }
.search-bar input.search { background:#f7f9fa; border:1px solid #dfe5e9; height:42px; max-width:220px; }
.search-bar i { top:9px; }
.dropdown-menu { background:#fff; border:1px solid var(--ocg-line); box-shadow:var(--ocg-shadow); }
.dropdown-menu a { color:var(--ocg-ink); }
.nav-item-child:hover { background:#f1f7f4; }

.ocg-hero { min-height:370px; display:grid; grid-template-columns:1fr 1.12fr; align-items:center; overflow:hidden; position:relative; padding:44px 54px; margin:26px 0 0; border:1px solid var(--ocg-line); border-radius:14px 14px 0 0; background:radial-gradient(circle at 82% 45%,#edf7f1 0,rgba(237,247,241,0) 37%),linear-gradient(110deg,#fff 15%,#f8fbfa 100%); }
.ocg-hero__copy { position:relative; z-index:2; }
.ocg-eyebrow { color:var(--ocg-green); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ocg-hero h1 { font-size:46px; line-height:1.08; letter-spacing:-.045em; margin:12px 0 16px; font-weight:700; }
.ocg-hero h1 span { color:var(--ocg-green); }
.ocg-hero p { max-width:430px; color:#3f4b57; font-size:17px; line-height:1.6; }
.ocg-hero__actions { display:flex; gap:12px; margin-top:24px; }
.ocg-btn { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 24px; border-radius:8px; font-weight:700; transition:.2s ease; }
.ocg-btn--primary { background:var(--ocg-green); color:#fff!important; box-shadow:0 7px 18px rgba(8,122,75,.2); }
.ocg-btn--primary:hover { background:var(--ocg-green-dark); transform:translateY(-1px); }
.ocg-btn--secondary { background:#fff; color:var(--ocg-ink)!important; border:1px solid #dfe4e8; box-shadow:0 3px 8px rgba(22,31,40,.06); }
.ocg-hero__art { align-self:stretch; display:flex; align-items:center; justify-content:center; }
.ocg-hero__art img { width:100%; max-height:330px; object-fit:contain; mix-blend-mode:multiply; }
.ocg-benefits { display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 40px; padding:22px 28px; border:1px solid var(--ocg-line); border-top:0; border-radius:0 0 14px 14px; background:#fff; }
.ocg-benefits > div { display:flex; align-items:center; justify-content:center; gap:12px; border-right:1px solid var(--ocg-line); }
.ocg-benefits > div:last-child { border:0; }
.ocg-benefits i { display:grid; place-items:center; width:36px; height:36px; color:var(--ocg-green); background:#eef8f3; border-radius:50%; font-size:17px; }
.ocg-benefits span { display:flex; flex-direction:column; }
.ocg-benefits strong { font-size:13px; }
.ocg-benefits small { color:var(--ocg-muted); font-size:11px; margin-top:2px; }
section { margin-bottom:46px; }
.section-title, .ocg-section-heading h2 { font-size:25px; letter-spacing:-.02em; }
.section-title i { color:var(--ocg-green); }
.grid-layout-1 { grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; grid-auto-rows:auto; }
.grid-layout-1 .game-card { padding:0; box-shadow:none; border:1px solid var(--ocg-line); border-radius:9px; overflow:hidden; text-align:left; }
.grid-layout-1 .game-card__details { position:static; opacity:1; color:var(--ocg-ink); margin:0; padding:11px 12px; }
.grid-layout-1 .game-card__thumbnail { border-radius:0; }
.grid-layout-1 .game-card:hover .game-card__thumbnail img { opacity:1; transform:scale(1.035); }
.grid-layout-2 .game-card, .grid-layout-3 .game-card { padding:0; overflow:hidden; border-radius:9px; background:#fff; text-align:left; }
.grid-layout-2 .game-card__thumbnail { border-radius:0; }
.grid-layout-2 .game-card__details { padding:0 12px 12px; }
.grid-layout-2 .game-card:hover, .grid-layout-3 .game-card:hover { transform:translateY(-3px); box-shadow:var(--ocg-shadow); }
.game-card__rating > i, .rating > i { color:#ffad0a; }
.ocg-category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.ocg-category { min-height:118px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:20px; border-radius:10px; color:var(--ocg-ink)!important; transition:.2s ease; }
.ocg-category:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(31,45,57,.1); }
.ocg-category img { width:44px; height:44px; object-fit:contain; }
.ocg-site-logo { width:min(300px,52vw); height:40px; object-fit:contain; object-position:left center; }
.page-404 { min-height:calc(100vh - 170px); display:flex; align-items:center; padding:42px 0 64px; background:linear-gradient(180deg,#f8fbfa 0,#fff 70%); }
.ocg-404 { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); align-items:center; gap:42px; padding:42px 54px; border:1px solid var(--ocg-line); border-radius:18px; background:#fff; box-shadow:0 20px 55px rgba(31,45,57,.08); overflow:hidden; }
.ocg-404__art img { display:block; width:100%; max-height:470px; object-fit:contain; }
.ocg-404__copy h1 { margin:12px 0 16px; font-size:42px; line-height:1.1; letter-spacing:-.04em; color:var(--ocg-ink); }
.ocg-404__copy p { max-width:490px; margin:0 0 26px; color:#53606d; font-size:17px; line-height:1.65; }
.ocg-category strong { font-size:14px; }
.ocg-category small { margin-top:3px; color:#66726c; font-size:11px; }
.ocg-category--green { background:#e1f3e9; }.ocg-category--rose{background:#f8e5e6}.ocg-category--blue{background:#e7ebfb}.ocg-category--amber{background:#fbf1dc}.ocg-category--purple{background:#eee7fb}.ocg-category--mint{background:#e1f3ed}

/* Distinct homepage discovery sections */
.ocg-home-section { margin-bottom:52px; }
.ocg-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.ocg-section-heading h2 { margin:0; font-size:25px; color:var(--ocg-ink); }
.ocg-section-heading h2 i { margin-right:8px; color:var(--ocg-green); }
.ocg-section-heading > a { color:var(--ocg-green); font-size:14px; font-weight:600; }
.ocg-new-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); gap:18px; }
.ocg-new-feature { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(210px,.88fr); min-height:360px; overflow:hidden; border:1px solid var(--ocg-line); border-radius:12px; background:#fff; box-shadow:0 10px 28px rgba(31,45,57,.07); }
.ocg-new-feature__image { position:relative; min-height:360px; overflow:hidden; background:#edf4f0; }
.ocg-new-feature__image img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.ocg-new-feature:hover .ocg-new-feature__image img { transform:scale(1.025); }
.ocg-new-badge { position:absolute; z-index:2; top:14px; left:14px; padding:5px 10px; border-radius:999px; color:#fff; background:var(--ocg-green); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.ocg-new-feature__copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:28px; }
.ocg-new-feature__copy h3 { margin:0 0 10px; font-size:24px; line-height:1.2; }
.ocg-new-feature__copy h3 a, .ocg-new-row h3 a { color:var(--ocg-ink); }
.ocg-new-feature__copy p { margin:0 0 22px; color:#56616d; font-size:15px; line-height:1.55; }
.ocg-new-list { display:grid; grid-template-rows:repeat(3,1fr); gap:12px; }
.ocg-new-row { display:grid; grid-template-columns:152px minmax(0,1fr); align-items:center; gap:15px; min-height:112px; padding:10px; border:1px solid var(--ocg-line); border-radius:10px; background:#fff; transition:.2s ease; }
.ocg-new-row:hover { transform:translateY(-2px); box-shadow:0 9px 22px rgba(31,45,57,.08); }
.ocg-new-row__image { height:95px; overflow:hidden; border-radius:8px; background:#edf4f0; }
.ocg-new-row__image img { width:100%; height:100%; object-fit:cover; }
.ocg-new-row h3 { margin:0 0 5px; font-size:15px; line-height:1.25; }
.ocg-new-row p { display:-webkit-box; overflow:hidden; margin:0 0 8px; color:#68737e; font-size:12px; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ocg-new-row__button { display:inline-flex; align-items:center; gap:3px; padding:5px 10px; border-radius:6px; color:#fff!important; background:var(--ocg-green); font-size:12px; font-weight:600; }
.ocg-new-row__button:hover { background:var(--ocg-green-dark); }
.ocg-popular-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.ocg-popular-card { overflow:hidden; border:1px solid var(--ocg-line); border-radius:10px; background:#fff; transition:.2s ease; }
.ocg-popular-card:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(31,45,57,.09); }
.ocg-popular-card figure, .ocg-like-card figure { position:relative; margin:0; overflow:hidden; background:#edf4f0; }
.ocg-popular-card figure { aspect-ratio:16/10; }
.ocg-popular-card img, .ocg-like-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.ocg-popular-card:hover img, .ocg-like-card:hover img { transform:scale(1.035); }
.ocg-popular-card div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 13px 14px; }
.ocg-popular-card h3, .ocg-like-card h3 { overflow:hidden; margin:0; color:var(--ocg-ink); font-size:14px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.ocg-popular-card span { flex:none; color:#68737e; font-size:12px; }
.ocg-popular-card span i { color:#ffad0a; }
.ocg-like-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.ocg-like-card { min-width:0; }
.ocg-like-card figure { aspect-ratio:16/10; border-radius:8px; }
.ocg-like-card h3 { margin-top:8px; padding:0 2px; font-size:13px; }

/* Bottom editorial and FAQ content */
.ocg-seo-panel { position:relative; overflow:hidden; padding:34px 38px; border:1px solid #d8e8df; border-radius:14px; background:linear-gradient(135deg,#f2faf6 0,#fff 68%); box-shadow:0 12px 32px rgba(31,74,50,.06); }
.ocg-seo-panel::after { content:"♣"; position:absolute; right:25px; top:-35px; color:rgba(8,122,75,.055); font-family:Georgia,serif; font-size:180px; line-height:1; pointer-events:none; }
.ocg-seo-lead { position:relative; z-index:1; display:grid; grid-template-columns:62px minmax(0,1fr); gap:20px; align-items:start; padding-bottom:25px; border-bottom:1px solid #d8e8df; }
.ocg-seo-mark { display:flex; width:58px; height:58px; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:var(--ocg-green); font-size:25px; box-shadow:0 8px 20px rgba(8,122,75,.18); }
.ocg-seo-panel h2 { margin:0 0 12px; color:var(--ocg-ink); font-size:27px; line-height:1.25; }
.ocg-seo-panel h3 { margin:0 0 8px; color:var(--ocg-ink); font-size:18px; }
.ocg-seo-panel p { color:#4c5a65; line-height:1.7; }
.ocg-seo-lead p, .ocg-seo-columns p { margin:0; }
.ocg-seo-columns { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:34px; padding:25px 0 20px; }
.ocg-seo-close { position:relative; z-index:1; margin:0; padding:14px 18px; border-left:3px solid var(--ocg-green); border-radius:0 8px 8px 0; background:rgba(255,255,255,.7); }
.ocg-faq-panel { padding:30px 34px; border:1px solid var(--ocg-line); border-radius:14px; background:#fff; }
.ocg-faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.ocg-faq-grid details { border-bottom:1px solid var(--ocg-line); }
.ocg-faq-grid summary { position:relative; padding:15px 30px 15px 0; color:var(--ocg-ink); font-size:14px; font-weight:600; cursor:pointer; list-style:none; }
.ocg-faq-grid summary::-webkit-details-marker { display:none; }
.ocg-faq-grid summary::after { content:"+"; position:absolute; right:4px; top:12px; color:var(--ocg-green); font-size:21px; font-weight:400; }
.ocg-faq-grid details[open] summary::after { content:"−"; }
.ocg-faq-grid details p { margin:0; padding:0 30px 15px 0; color:#5b6670; font-size:14px; line-height:1.55; }

.single-category .container, .game-wrapper, .content-wrapper { padding-top:24px; }
.single-category__hero { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; min-height:260px; padding:28px 34px; margin-bottom:28px; border:1px solid var(--ocg-line); border-radius:12px; background:#fff; overflow:hidden; }
.single-category__header { display:block; margin:0; }
.single-category__copy { min-width:0; }
.single-category__header .section-title { margin:4px 0 12px; font-size:clamp(36px,4.8vw,60px); }
.single-category__meta { background:#eaf5ef; color:var(--ocg-green); }
.single-category__hero-art { display:flex; align-items:center; justify-content:center; width:100%; overflow:visible; }
.ocg-approved-category-art { display:grid; place-items:center; position:relative; width:100%; max-width:630px; height:215px; overflow:hidden; border-radius:48% 52% 43% 57% / 42% 48% 52% 58%; background:linear-gradient(145deg,#074a58,#07323d); }
.ocg-approved-category-art--blue { background:linear-gradient(145deg,#1c5080,#0e244b); }
.ocg-approved-category-art--purple { background:linear-gradient(145deg,#613681,#241d51); }
.ocg-approved-category-art--burgundy { background:linear-gradient(145deg,#9f3d41,#351d35); }
.ocg-approved-category-art::before { content:""; position:absolute; width:145px; height:145px; left:14%; top:5%; border:clamp(12px,2vw,21px) solid #ecc278; border-radius:50%; opacity:.85; }
.ocg-approved-card-fan { position:relative; display:flex; align-items:center; justify-content:center; transform:rotate(-8deg); }
.ocg-approved-card-fan i { display:grid; place-items:center; width:clamp(52px,8vw,83px); aspect-ratio:83 / 125; margin-left:-15px; border:2px solid #e6d8bc; border-radius:8px; background:#fff9ef; box-shadow:3px 5px 8px rgba(4,28,43,.33); color:#13233f; font-size:clamp(22px,3.6vw,37px); font-style:normal; font-weight:800; transform:rotate(var(--rot)); }
.ocg-approved-card-fan i:first-child { margin-left:0; }
.ocg-approved-card-fan i.red { color:#bd2928; }
.single-category .category-description { max-width:720px; margin:14px 0 0; padding:15px 18px; border:1px solid #d5e9dd; border-radius:10px; background:rgba(255,255,255,.66); color:#43534a; text-align:center; line-height:1.6; box-shadow:0 7px 18px rgba(31,74,50,.04); }

.game-wrapper { max-width:1280px; }
.game-content, .game-iframe-container { background:#fff; }
.game-content { border:1px solid #dbe2e6; border-radius:12px; box-shadow:var(--ocg-shadow); }
.single-title { font-size:34px; letter-spacing:-.03em; }
.single-game__header { padding:22px; border:1px solid var(--ocg-line); border-radius:12px; background:#fff; }
.single-game__description, .single-game__instructions { background:#fff; color:#344054; border:1px solid var(--ocg-line); border-radius:12px; box-shadow:none; padding:25px; }
.single-game__description:hover, .single-game__instructions:hover { box-shadow:var(--ocg-shadow); transform:none; }
.single-game__description h2.single-game__subheading, .single-game__instructions h2.single-game__subheading { color:var(--ocg-ink); text-shadow:none; border-color:var(--ocg-line); }
.single-game__description h2.single-game__subheading::before, .single-game__instructions h2.single-game__subheading::before { content:""; }
.single-game__description p, .single-game__instructions p, .single-game__description ul, .single-game__instructions ul, .single-game__description ol, .single-game__instructions ol, .single-game__description li, .single-game__instructions li { color:#344054; }
.btn-play, .grid-layout-2 .game-card__btn-play { background:var(--ocg-green); }
.btn-play:hover { background:var(--ocg-green-dark); }
footer { background:#12231b; color:#b7c5be; }
.footer-copyright { background:#0d1c15; }

@media (max-width:991px) {
  .ocg-hero { grid-template-columns:1fr 1fr; padding:38px 30px; }
  .ocg-hero h1 { font-size:38px; }
  .grid-layout-1 { grid-template-columns:repeat(4,1fr); }
  .ocg-category-grid { grid-template-columns:repeat(3,1fr); }
  .ocg-benefits { grid-template-columns:repeat(2,1fr); gap:20px 0; }
  .ocg-benefits > div:nth-child(2) { border:0; }
  .ocg-new-layout { grid-template-columns:1fr; }
  .ocg-new-list { grid-template-columns:repeat(3,1fr); grid-template-rows:auto; }
  .ocg-new-row { grid-template-columns:1fr; align-items:start; }
  .ocg-new-row__image { height:auto; aspect-ratio:16/10; }
  .ocg-new-row > div { padding:0 4px 4px; }
  .ocg-popular-grid { grid-template-columns:repeat(2,1fr); }
  .ocg-like-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px) {
  body > .container, main > .container { padding-left:14px; padding-right:14px; }
  .ocg-hero { grid-template-columns:1fr; padding:30px 22px 18px; text-align:center; }
  .ocg-hero h1 { font-size:36px; }
  .ocg-hero p { margin-left:auto; margin-right:auto; }
  .ocg-hero__actions { justify-content:center; }
  .ocg-hero__art { height:230px; order:-1; }
  .ocg-benefits { grid-template-columns:1fr 1fr; padding:18px 8px; }
  .ocg-benefits > div { padding:0 8px; justify-content:flex-start; }
  .grid-layout-1 { grid-template-columns:repeat(2,1fr); gap:12px; }
  .ocg-category-grid { grid-template-columns:repeat(2,1fr); }
  .single-category__hero { grid-template-columns:1fr; padding:22px; }
  .single-category__header .section-title { font-size:28px; }
  .single-category__hero-art { display:flex; height:auto; margin-top:12px; }
  .ocg-home-section { margin-bottom:40px; }
  .ocg-new-feature { grid-template-columns:1fr; }
  .ocg-new-feature__image { min-height:0; aspect-ratio:16/10; }
  .ocg-new-feature__copy { padding:22px; }
  .ocg-new-feature__copy h3 { font-size:21px; }
  .ocg-new-list { grid-template-columns:1fr 1fr; }
  .ocg-new-row:last-child { display:none; }
  .ocg-popular-grid { gap:12px; }
  .ocg-popular-card div { display:block; padding:10px; }
  .ocg-popular-card span { display:block; margin-top:5px; }
  .ocg-like-grid { grid-template-columns:repeat(2,1fr); }
  .ocg-seo-panel, .ocg-faq-panel { padding:24px 20px; }
  .ocg-seo-lead { grid-template-columns:1fr; }
  .ocg-seo-mark { width:50px; height:50px; }
  .ocg-seo-panel h2 { font-size:23px; }
  .ocg-seo-columns, .ocg-faq-grid { grid-template-columns:1fr; gap:20px; }
  .ocg-seo-columns { gap:22px; }
  .page-404 { padding:20px 0 42px; }
  .ocg-404 { grid-template-columns:1fr; gap:10px; padding:26px 22px 34px; text-align:center; }
  .ocg-404__art img { max-height:300px; }
  .ocg-404__copy h1 { font-size:32px; }
  .ocg-404__copy p { margin-left:auto; margin-right:auto; }
}

/* Arcade Seven approved homepage */
.ocg-homepage > .container { padding-top:0; }
.ocg-home-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); align-items:center; min-height:330px; margin:0 -12px 34px; padding:38px 42px; overflow:hidden; color:#fff; background:#06244a; }
.ocg-home-hero__copy h1 { margin:0 0 14px; color:#fff; font-size:42px; line-height:1.1; letter-spacing:-.035em; }
.ocg-home-hero__copy > p { max-width:610px; margin:0; color:#fff; font-size:17px; line-height:1.6; }
.ocg-home-hero__benefits { display:flex; flex-wrap:wrap; gap:22px; margin-top:28px; }
.ocg-home-hero__benefits span { display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; }
.ocg-home-hero__benefits i { font-size:22px; }
.ocg-home-hero__art { display:flex; align-items:center; justify-content:center; }
.ocg-home-hero__art img { width:100%; max-width:390px; height:auto; }
.ocg-home-section { margin-bottom:30px; }
.ocg-home-section .ocg-section-heading { justify-content:center; margin-bottom:16px; }
.ocg-home-section .ocg-section-heading h2 { color:#0a2147; font-size:21px; text-align:center; text-transform:uppercase; }
.ocg-new-games-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; max-width:960px; margin-inline:auto; }
.ocg-popular-games-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px 32px; }
.ocg-home-game-card { min-width:0; overflow:hidden; border-radius:10px; background:#fff; box-shadow:0 3px 10px rgba(8,37,71,.08); }
.ocg-home-game-card a { display:block; position:relative; color:#fff!important; }
.ocg-home-game-card img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:10px 10px 0 0; }
.ocg-home-game-card h3:not(.visually-hidden) { display:flex; position:absolute; right:0; bottom:0; left:0; min-height:40px; align-items:center; justify-content:center; margin:0; padding:7px 9px; color:#fff; background:rgba(6,25,54,.93); font-size:13px; line-height:1.2; text-align:center; }
.ocg-home-game-card__rating { display:flex; position:absolute; right:4px; bottom:4px; z-index:2; align-items:center; gap:1px; margin:0; padding:3px 4px; border-radius:4px; color:#ffbf2f; background:#061936; font-size:9px; line-height:1; white-space:nowrap; }
.ocg-home-category-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; }
.ocg-home-category { display:flex; min-height:106px; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px 8px; border:1px solid #edf0f5; border-radius:10px; color:#0a2147!important; background:#f8f9fc; text-align:center; }
.ocg-home-category:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(8,37,71,.08); }
.ocg-home-category img { width:42px; height:42px; object-fit:contain; }
.ocg-home-category strong { font-size:12px; line-height:1.2; }
.ocg-why-play { margin-bottom:16px; padding:14px 28px 20px; border-radius:10px; color:#fff; background:#06244a; }
.ocg-why-play h2 { margin:0 0 12px; color:#fff; font-size:20px; text-align:center; text-transform:uppercase; }
.ocg-why-play__grid { display:grid; grid-template-columns:repeat(3,1fr); }
.ocg-why-play__grid > div { display:grid; grid-template-columns:54px minmax(0,1fr); gap:12px; align-items:center; padding:4px 24px; border-right:1px solid rgba(255,255,255,.2); }
.ocg-why-play__grid > div:last-child { border-right:0; }
.ocg-why-play__grid i { font-size:38px; }
.ocg-why-play__grid span { display:flex; flex-direction:column; }
.ocg-why-play__grid strong { font-size:14px; }
.ocg-why-play__grid small { margin-top:4px; color:#fff; font-size:12px; line-height:1.4; }
.ocg-home-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.ocg-home-info-card { display:flex; min-height:144px; align-items:center; gap:20px; padding:24px; border-radius:10px; background:#f6f7fa; }
.ocg-home-info-card > i { flex:none; color:#d62828; font-size:62px; }
.ocg-home-info-card h2 { margin:0 0 8px; color:#0a2147; font-size:17px; text-transform:uppercase; }
.ocg-home-info-card p { margin:0 0 10px; color:#263a55; font-size:13px; line-height:1.55; }
.ocg-home-info-card a { color:#0a45d8; font-size:13px; font-weight:700; }
.ocg-home-info-links { display:flex; flex-wrap:wrap; gap:4px 18px; }
.ocg-home-faq { margin-bottom:28px; }
.ocg-home-faq > h2 { margin:0 0 10px; color:#0a2147; font-size:18px; text-transform:uppercase; }
.ocg-home-faq__grid { display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.ocg-home-faq details { border:1px solid #dce2eb; border-radius:6px; margin-bottom:8px; background:#fff; }
.ocg-home-faq summary { padding:9px 30px 9px 14px; color:#0a2147; font-size:13px; font-weight:700; cursor:pointer; }
.ocg-home-faq details p { margin:0; padding:0 14px 12px; color:#475569; font-size:13px; line-height:1.5; }

/* Category pages: approved header plus image tiles only */
.ocg-category-game-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px 18px; }
.ocg-category-game-tile { min-width:0; }
.ocg-category-game-tile figure { margin:0; overflow:hidden; border-radius:14px; background:transparent; }
.ocg-category-game-tile img { display:block; width:100%; height:auto; border-radius:14px; transition:transform .2s ease; }
.ocg-category-game-tile h2 { margin:9px 4px 0; overflow:hidden; color:#0a2147; font-size:15px; font-weight:700; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.ocg-category-game-tile a:hover img { transform:scale(1.025); }

/* Game-page sidebar panels */
.game-page-sidebar-panel { margin:0 0 20px; padding:20px; border:1px solid #dfe4ec; border-radius:12px; background:#fff; }
.game-page-sidebar-panel__title { margin:0 0 10px; color:#0a2147; font-size:15px; font-weight:700; text-transform:uppercase; }
.on-this-page__list, .similar-games-sidebar__list { margin:0; padding:0; list-style:none; }
.on-this-page__list li + li, .similar-games-sidebar__list li + li { border-top:1px solid #e5e9ef; }
.on-this-page__list a { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:10px; padding:12px 0; color:#0a2147; }
.on-this-page__list i { text-align:center; }
.similar-games-sidebar__list a { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 0; color:#0a2147; }
.similar-games-sidebar__list img { display:block; width:64px; height:64px; border-radius:8px; object-fit:contain; }
.similar-games-sidebar__list span { font-size:13px; font-weight:700; line-height:1.3; }
.single-game__faq-item summary { font-weight:700; }

/* Approved footer content; social icons intentionally omitted */
.ocg-footer { color:#fff; background:#06244a; }
.ocg-footer > .container { background:transparent; }
.ocg-footer__grid { display:grid; grid-template-columns:1.35fr repeat(4,1fr); gap:28px; padding:34px 0 28px; }
.ocg-footer__brand img { width:190px; height:auto; filter:brightness(0) invert(1); }
.ocg-footer__brand p { max-width:220px; margin:16px 0 0; color:#fff; font-size:12px; line-height:1.5; }
.ocg-footer nav { display:flex; flex-direction:column; gap:6px; }
.ocg-footer nav h2 { margin:0 0 5px; color:#fff; font-size:13px; text-transform:uppercase; }
.ocg-footer nav a { color:#fff; font-size:12px; }
.ocg-footer nav a:hover { text-decoration:underline; }
.ocg-footer__copyright { display:flex; align-items:center; justify-content:center; gap:18px; padding:14px 0; border-top:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; }

@media (max-width:991px) {
  .ocg-home-hero { grid-template-columns:1fr 320px; padding:34px 28px; }
  .ocg-home-hero__copy h1 { font-size:36px; }
  .ocg-popular-games-grid, .ocg-category-game-grid { grid-template-columns:repeat(4,1fr); }
  .ocg-home-category-grid { grid-template-columns:repeat(4,1fr); }
  .ocg-footer__grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px) {
  .ocg-home-hero { grid-template-columns:1fr; margin:0 -14px 28px; padding:28px 20px; text-align:left; }
  .ocg-home-hero__copy h1 { font-size:32px; }
  .ocg-home-hero__art { margin-top:18px; }
  .ocg-home-hero__benefits { gap:14px 18px; }
  .ocg-new-games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:350px; }
  .ocg-popular-games-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .ocg-home-category-grid { grid-template-columns:repeat(2,1fr); }
  .ocg-why-play__grid, .ocg-home-info-grid, .ocg-home-faq__grid { grid-template-columns:1fr; }
  .ocg-why-play__grid > div { border-right:0; border-bottom:1px solid rgba(255,255,255,.2); padding:12px 4px; }
  .ocg-why-play__grid > div:last-child { border-bottom:0; }
  .ocg-category-game-grid { grid-template-columns:repeat(2,1fr); gap:16px 12px; }
  .ocg-footer__grid { grid-template-columns:1fr 1fr; }
  .ocg-footer__brand { grid-column:1 / -1; }
}

/* Approved theme refinements */
.single-category__hero-art img{display:block;width:100%;max-width:630px;height:auto;object-fit:contain}
.ocg-category-game-tile h2{white-space:normal;text-align:center;padding:2px 6px}
.ocg-category-game-tile img{height:auto;object-fit:initial}
.ocg-home-info-card>img{flex:none;max-width:110px;height:auto;object-fit:contain}
.ocg-home-info-card .ocg-home-red-cards{max-width:125px}
.ocg-quick-guide{margin:16px 0;padding:16px 20px;border:1px solid #dce4ed;border-radius:10px;background:#fff;color:#0a2147}
.ocg-quick-guide h2{font-size:16px;margin:0 0 6px;text-transform:uppercase}.ocg-quick-guide p{margin:0}
@media(max-width:767px){.ocg-home-info-card>img{max-width:76px}.ocg-home-info-card .ocg-home-red-cards{max-width:90px}}

.ocg-category-game-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 32px}
@media(max-width:750px){.ocg-category-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Category tiles use the same square artwork size and card shape as homepage game tiles. */
.ocg-category-game-tile{min-width:0;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 3px 10px rgba(8,37,71,.08)}
.ocg-category-game-tile a{display:block;position:relative;color:#fff!important}
.ocg-category-game-tile figure{margin:0;overflow:hidden;border-radius:10px;background:#fff}
.ocg-category-game-tile img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:10px}
.ocg-category-game-tile h2:not(.visually-hidden){display:flex;position:absolute;right:0;bottom:0;left:0;min-height:40px;align-items:center;justify-content:center;margin:0;padding:7px 9px;color:#fff;background:rgba(6,25,54,.93);font-size:13px;line-height:1.2;text-align:center}
@media(max-width:767px){.ocg-category-game-grid{gap:14px}}

.ocg-category-editorial,.ocg-category-faq,.ocg-category-related{margin:28px 0;color:#0a2147}.ocg-category-editorial h2,.ocg-category-faq h2,.ocg-category-related h2{font-size:21px}.ocg-category-faq details{padding:12px 15px;border:1px solid #dce2eb;border-radius:7px;margin-bottom:8px}.ocg-category-faq summary{font-weight:700;cursor:pointer}.ocg-category-related a{display:inline-block;margin:4px 8px 4px 0;padding:9px 13px;border-radius:8px;background:#f2f5fa}.single-category .single-category__hero-art{overflow:visible}
.ocg-category-editorial{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ocg-category-editorial article{padding:20px;border:1px solid #dce2eb;border-radius:12px;background:#f8fafd}
.ocg-category-editorial h2{font-size:17px}
.ocg-category-editorial p,.ocg-category-editorial li{font-size:14px;line-height:1.6}
.ocg-category-editorial ul{margin:0;padding-left:20px}
@media(max-width:767px){.ocg-category-editorial{grid-template-columns:1fr}}
/* Final reference layout: shared dark navigation and white content surface. */
.top-nav{margin-bottom:0;background:#061936;color:#fff}
.top-nav .navbar-brand img{width:200px;height:auto;max-height:56px}
.top-nav .nav-link,.top-nav a{color:#fff}
body{background:#fff;color:#0a2147}
.ocg-home-hero{width:100vw;position:relative;left:50%;margin:0 0 24px -50vw;padding:35px max(5vw,calc((100vw - 1110px)/2));min-height:260px;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);background:#051b3b;border-radius:0 0 45% 45%/0 0 6% 6%}
.ocg-home-hero__copy h1{font-size:clamp(30px,3.7vw,43px)}
.ocg-home-hero__benefits i{font-size:20px}
.ocg-home-category-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ocg-home-category{flex:0 1 116px;min-height:110px}
.ocg-home-info-card>img{width:90px;max-height:104px;object-fit:contain}
.ocg-home-info-card .ocg-home-red-cards{width:130px;max-width:130px}
.ocg-footer__brand img{filter:none;width:190px}
/* The game layout follows the approved mockup and retains the real iframe. */
.ocg-game-page{padding-top:22px}
.ocg-game-breadcrumb{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 18px;font-size:14px}
.ocg-game-breadcrumb a{color:#0a45d8}
.ocg-game-intro{max-width:760px;margin:0 0 22px}
.ocg-game-intro h1{margin:0 0 10px;color:#071e42;font-size:clamp(32px,4vw,48px);letter-spacing:-.035em}
.ocg-game-intro p{margin:0;color:#213452;font-size:17px;line-height:1.6}
.ocg-game-page .content-wrapper{padding-top:0;align-items:start}
.ocg-game-page .game-container{width:100%;max-width:none;margin:0}
.ocg-game-page .game-content{width:100%;overflow:hidden;border:1px solid #dce3ed;border-radius:10px;box-shadow:none}
.ocg-game-page .game-iframe-container{width:100%;max-width:100%}
.ocg-quick-guide{margin:16px 0 20px;border-radius:10px}
.ocg-quick-guide__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ocg-quick-guide__facts span{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:13px}
.ocg-quick-guide__facts strong{color:#0a2147;font-size:12px}
.ocg-game-page .single-game__details{padding:0;background:transparent;box-shadow:none}
.ocg-game-page .single-game__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0 18px;border:0;background:transparent}
.ocg-game-page .single-game__article>.single-game__accordion{margin:0;padding:0 20px;border:1px solid #dce3ed;border-bottom:0;border-radius:0;background:#fff;color:#0a2147;box-shadow:none}
.ocg-game-page .single-game__article>.single-game__accordion:first-child{border-radius:10px 10px 0 0}
.ocg-game-page .single-game__article>.single-game__accordion:last-of-type{border-bottom:1px solid #dce3ed;border-radius:0 0 10px 10px}
.ocg-game-page .single-game__accordion>summary{padding:16px 0;list-style:none}
.ocg-game-page .single-game__accordion>summary h2{display:inline;margin:0;padding:0;border:0;color:#0a2147;font-size:18px;text-shadow:none}
.ocg-game-page .single-game__accordion>summary h2:before{content:none}
.ocg-game-page .single-game__accordion-content{padding:0 0 18px;color:#344054}
.ocg-game-page .single-game__accordion-content p,.ocg-game-page .single-game__accordion-content li{color:#344054}
.ocg-game-page .single-game__strategy .single-game__accordion-content p::first-line{font-weight:700}
.ocg-game-page .game-page-sidebar-panel{margin:0 0 20px}
.ocg-game-page .ocg-game-side{padding-top:16px}
.ocg-game-page .similar-games-sidebar__list img{object-fit:contain;border-radius:8px}
@media(max-width:767px){.ocg-home-hero{grid-template-columns:1fr;padding:28px 20px}.ocg-home-category{flex-basis:calc(33.333% - 10px)}.ocg-game-intro p{font-size:15px}.ocg-quick-guide__facts{grid-template-columns:repeat(2,minmax(0,1fr))}.ocg-game-page .single-game__header{display:block}.ocg-game-page .single-game__header-right{margin-top:12px}}

/* Keep the menu control legible against the header on narrow screens. */
.top-nav .navbar-toggler{align-items:center;gap:9px;border-color:rgba(255,255,255,.8);color:#fff;padding:8px 11px}
.top-nav .navbar-toggler-icon{width:22px;height:22px;filter:none;opacity:1}
.top-nav .ocg-menu-label{color:#fff;font-size:15px;font-weight:700;line-height:1}
@media(max-width:991px){.top-nav .navbar-toggler{display:flex}}
@media(min-width:992px){.top-nav .navbar-toggler{display:none}}

/* The hero and navigation share precisely the same navy. The art is transparent. */
.top-nav,.ocg-home-hero{background-color:#061936}

/* Exact illustrations displayed from the supplied homepage reference image. */
.ocg-home-info-card .ocg-home-book-art,.ocg-home-info-card .ocg-home-red-cards{display:block;flex:none;background-image:url('../images/approved-homepage-reference.png');background-repeat:no-repeat;background-size:1024px 1536px}
.ocg-home-info-card .ocg-home-book-art{width:90px;height:72px;background-position:-74px -1158px}
.ocg-home-info-card .ocg-home-red-cards{width:132px;height:106px;background-position:-784px -1149px}
/* The approved category board places the introduction beside the ring art. */
.single-category .category-description{max-width:600px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#243756;font-size:19px;line-height:1.5;text-align:left}
.single-category .single-category__hero{padding:20px 28px;border:0;box-shadow:none}
.single-category .single-category__header .section-title{margin-bottom:16px}
.single-category .single-category__hero--no-art{display:block}
.ocg-corrected-header-art{position:relative;width:100%;max-width:630px;line-height:0}
.ocg-corrected-header-art img{display:block;width:100%;height:auto}
.ocg-homepage,.single-category,.single-game{overflow-x:clip}
@media(max-width:767px){
  .ocg-home-info-card .ocg-home-book-art{width:72px;height:58px;background-size:819px 1229px;background-position:-59px -926px}
  .ocg-home-info-card .ocg-home-red-cards{width:90px;max-width:90px;height:72px;background-size:698px 1047px;background-position:-535px -783px}
}