/* === 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;
  /* Universal desktop size control — applies to every game using the
     auto-fit system (Blackjack, Three Card Poker, and any future game
     built the same way), all from this one place. Change this single
     value to resize all of them at once; no per-game files need
     touching. Height is never set directly — it's always the real
     measured content height at whatever width results from this. */
  max-width:800px;
  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:invert(1); opacity:.7; }
.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:1.45fr .55fr; align-items:center; min-height:220px; padding:28px 34px; margin-bottom:28px; border:1px solid var(--ocg-line); border-radius:12px; background:linear-gradient(105deg,#f4fbf7,#fff); overflow:hidden; }
.single-category__header { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; margin:0; align-items:start; }
.single-category__copy { min-width:0; }
.single-category__header .section-title { margin:4px 0 0; font-size:34px; }
.single-category__meta { background:#eaf5ef; color:var(--ocg-green); }
.single-category__hero-art { height:160px; overflow:hidden; }
.single-category__hero-art img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.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:none; }
  .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; }
}