/* Corrective: shared img rule lacks height:auto; scope a fix to article content. */
    .castle-games-content img { max-width: 100%; height: auto; }
    .castle-games-content h3 { text-align: center; }
    /* Centre the top 728 banner (and its mobile equivalent). The main H1 keeps its default alignment. */
    .cbg-banner { text-align: center; }
    /* Group headings ("Free to Play…", "Paid…") share the game column width so their
       underline lines up with the screenshots below. */
    .castle-games-content .cbg-group-h2 { max-width: 880px; margin: 30px auto 16px; display: flex; align-items: center; gap: 16px; text-align: center; border-bottom: 0; padding-bottom: 0; color: #a03d38; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; }
    .castle-games-content .cbg-group-h2::before, .castle-games-content .cbg-group-h2::after { content: ""; flex: 1 1 auto; border-top: 2px solid #e0c9c7; }
    /* Each game is one centred column: heading, image, copy and CTA share this width. */
    .cbg-game { max-width: 880px; margin-left: auto; margin-right: auto; }
    .cbg-game p { font-size: 16px; }
    .cbg-game .readplay { text-align: center; }
    .cbg-breadcrumb { font-size: 0.85em; margin: 0 0 10px; color: #555; }
    .cbg-breadcrumb a { color: #7a1f1a; }
    .cbg-breadcrumb .sep { margin: 0 6px; color: #999; }

    /* Quick-select: castle bullet + game name + thumbnail (mini-carousel where >1 image). */
    .cbg-quickpicks { background: #eef3fb; border: 1px solid #c7d6ec; border-radius: 6px; padding: 14px 16px; margin: 18px 0 24px; }
    .castle-games-content .cbg-quickpicks h2 { margin-top: 0; font-size: 18px; }
    .cbg-pick-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 12px 0 0; padding: 0; }
    .cbg-pick { background: #fff; border: 1px solid #d3ddee; border-radius: 6px; padding: 8px; margin: 0; float: none; }
    .cbg-pick .cbg-carousel, .cbg-pick .cbg-thumb-single { margin: 0; }
    .cbg-pick .cbg-carousel-viewport, .cbg-pick .cbg-thumb-single { aspect-ratio: 16 / 10; position: relative; width: 100%; background: #14243a; border-radius: 4px; overflow: hidden; }
    .cbg-pick .cbg-thumb-link { display: block; }
    .cbg-pick .cbg-thumb-link img { transition: transform .25s ease; }
    .cbg-pick .cbg-thumb-link:hover img, .cbg-pick .cbg-thumb-link:focus-visible img { transform: scale(1.05); }
    .cbg-pick .cbg-slide, .cbg-pick .cbg-thumb-single img { object-fit: cover; width: 100%; height: 100%; display: block; margin: 0; }
    .castle-games-content .cbg-quickpicks > p { font-size: 13px; color: #4a5560; margin: 6px 0 0; }
    .castle-games-content .cbg-pick-name { display: flex; align-items: center; gap: 5px; margin: 7px 2px 1px; font-weight: bold; font-size: 13px; line-height: 1.25; }
    .cbg-pick-name a { text-decoration: none; color: #7a1f1a; }
    .cbg-pick-name a:hover { color: #a03d38; text-decoration: underline; }
    .castle-games-content .cbg-pick-desc { font-size: 11.5px; color: #55606c; margin: 2px 2px 2px; line-height: 1.3; }
    .cbg-castle-bullet { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; }

    /* Carousel: fixed-ratio viewport, circular translucent arrows overlaid on the image. */
    .cbg-carousel { margin: 12px 0; }
    .cbg-carousel-viewport { position: relative; width: 100%; aspect-ratio: var(--cbg-ar, 16 / 9); background: #14243a; border-radius: 4px; overflow: hidden; }
    .cbg-carousel-track { display: flex; height: 100%; transition: transform .35s ease; will-change: transform; }
    .cbg-carousel .cbg-slide-wrap { flex: 0 0 100%; min-width: 0; height: 100%; position: relative; margin: 0; }
    .cbg-carousel .cbg-slide-wrap > a { display: block; width: 100%; height: 100%; }
    .cbg-carousel .cbg-slide { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0; }
    .cbg-arrow[hidden] { display: none !important; }
    .cbg-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
      width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
      background: rgba(160,61,56,0.55); color: #fff; font-size: 24px; line-height: 40px; text-align: center;
      transition: background .15s, color .15s; }
    .cbg-carousel.cbg-js-ready .cbg-arrow { display: block; }
    .cbg-arrow.cbg-prev { left: 8px; }
    .cbg-arrow.cbg-next { right: 8px; }
    .cbg-arrow span { display: block; margin-top: -2px; font-weight: 900; }
    .cbg-arrow:hover { background: rgba(255,255,255,0.72); color: #a03d38; }
    .cbg-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .cbg-carousel-status { display: none; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 2;
      background: rgba(0,0,0,0.5); color: #fff; font-size: 0.72em; padding: 2px 8px; border-radius: 10px; }
    .cbg-carousel.cbg-js-ready .cbg-carousel-status { display: block; }
    .cbg-thumb-carousel .cbg-arrow { width: 30px; height: 30px; font-size: 18px; line-height: 30px; }
    .cbg-caption { font-size: 0.8em; color: #555; margin: 4px 0 0; text-align: center; }

    /* Language selector in the nav: EN/ES abbreviations + narrow custom WHITE dropdown. */
    .cbg-lang-nav { position: relative; margin-left: 6px; }
    .cbg-lang-toggle { background: transparent; border: 0; color: #fff; font-family: inherit; font-size: 13px;
      font-weight: bold; padding: 8px 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
    .cbg-lang-toggle:hover { color: #d09692; }
    .cbg-lang-toggle:focus-visible { outline: 2px solid #d09692; outline-offset: 1px; }
    .cbg-lang-caret { font-size: 0.7em; }
    ul.nav-menu li.cbg-lang-nav ul.cbg-lang-menu { min-width: 0; width: 52px; top: 30px; left: auto; right: 0;
      background: #fff; border: 1px solid #c7d1de; border-radius: 4px; max-height: 160px; overflow-y: auto;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2); padding: 2px 0; margin: 0; }
    ul.nav-menu li.cbg-lang-nav ul.cbg-lang-menu li { padding: 0; margin: 0; float: none; border: 0; }
    ul.nav-menu li.cbg-lang-nav ul.cbg-lang-menu li a { display: block; color: #555; padding: 5px 10px; font-size: 12px; text-align: left; text-decoration: none; }
    ul.nav-menu li.cbg-lang-nav ul.cbg-lang-menu li a:hover { color: #a03d38; background: #f4f6f9; }
    ul.cbg-lang-menu a[aria-current="true"] { color: #a03d38; font-weight: bold; }
    ul.cbg-lang-menu::-webkit-scrollbar { width: 6px; }
    ul.cbg-lang-menu::-webkit-scrollbar-thumb { background: #c7d1de; border-radius: 3px; }
    .cbg-lang-nav.cbg-js-ready .cbg-lang-toggle[aria-expanded="true"] ~ ul.cbg-lang-menu { display: block; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
    .cbg-lang-nav:not(.cbg-js-ready):focus-within > ul.cbg-lang-menu { display: block; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

    /* ---- Mobile hamburger nav + sticky header (bright/light red bars) ---- */
    .cbg-hamburger { display: none; background: transparent; border: 0; cursor: pointer; width: 42px; height: 40px; padding: 8px 9px; }
    .cbg-hamburger span { display: block; width: 24px; height: 3px; margin: 4px auto; background: #ec6b64; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
    .cbg-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .cbg-hamburger.is-open span:nth-child(2) { opacity: 0; }
    .cbg-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .cbg-sub-toggle { display: none; }
    /* Footer note: text centred and vertically aligned between the two icons. */
    .cbg-footer-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
    @media (max-width: 768px) {
      .site-header, .banner, .title, #navbar, .main-navigation, ul.nav-menu, ul.nav-menu li { box-sizing: border-box; max-width: 100%; }
      .site-header { position: sticky; top: 0; z-index: 1000; float: none; }
      .banner { position: relative; max-width: none; margin: 0; min-height: 54px; }
      .cbg-hamburger { display: block; position: absolute; top: 8px; right: 8px; z-index: 1002; }
      .main-navigation { margin: 0; padding: 0; }
      .title { padding-right: 52px; }
      .site-title { margin-top: 9px; }
      #navbar { width: 100%; float: none; position: static; }
      ul.nav-menu { margin-top: 0; display: none; text-align: left; }
      /* Open menu OVERLAYS the page (in front of content), starting at the bottom of
         the header bar — it does not push the content down. */
      #navbar.cbg-nav-open ul.nav-menu { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 1001; background: #3a3a3a; padding: 4px 0 10px; max-height: calc(100vh - 56px); overflow-y: auto; box-shadow: 0 10px 18px rgba(0,0,0,0.28); }
      ul.nav-menu li { display: block; float: none; width: 100%; padding: 0; text-align: left; }
      ul.nav-menu li a { display: block; padding: 12px 18px; font-size: 14px; text-align: left; }
      ul.nav-menu li.navdivider { display: none; }
      /* Parent items: link full-width with a +/- toggle overlaid top-right; the
         submenu is hidden below and animates open when expanded. */
      ul.nav-menu > li.cbg-has-sub { position: relative; }
      ul.nav-menu > li.cbg-has-sub > a { padding-right: 54px; }
      .cbg-sub-toggle { display: block; position: absolute; top: 0; right: 0; width: 48px; height: 45px; padding: 0; background: transparent; border: 0; color: #ec6b64; font-size: 25px; line-height: 45px; text-align: center; cursor: pointer; }
      .cbg-sub-toggle::before { content: "+"; }
      ul.nav-menu > li.cbg-sub-open > .cbg-sub-toggle::before { content: "\2212"; }
      ul.nav-menu > li:not(.cbg-lang-nav) > ul { display: block; max-height: 0; overflow: hidden; transition: max-height .32s ease; position: static; width: auto; min-width: 0; box-shadow: none; background: rgba(0,0,0,0.18); border: 0; padding: 0; margin: 0; }
      ul.nav-menu > li.cbg-sub-open > ul { max-height: 340px; }
      ul.nav-menu li ul li a { padding: 10px 18px 10px 34px; font-size: 13px; color: #d7d7d7; }
      ul.nav-menu li.cbg-lang-nav { padding: 0; }
      ul.nav-menu li.cbg-lang-nav .cbg-lang-toggle { display: block; width: 100%; padding: 12px 18px; font-size: 14px; text-align: left; }
      /* Collapsed by default on mobile; expands only when the toggle is tapped (aria-expanded=true) */
      ul.nav-menu li.cbg-lang-nav ul.cbg-lang-menu { position: static; display: block; width: auto; max-height: 0; overflow: hidden; transition: max-height .32s ease; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; background: rgba(0,0,0,0.18); }
      ul.nav-menu li.cbg-lang-nav .cbg-lang-toggle[aria-expanded="true"] ~ ul.cbg-lang-menu { max-height: 340px; }
      ul.nav-menu li.cbg-lang-nav ul.cbg-lang-menu li a { color: #d7d7d7; padding: 10px 18px 10px 34px; font-size: 13px; }
    }

    @media (prefers-reduced-motion: reduce) { .cbg-carousel-track { transition: none; } .cbg-hamburger span { transition: none; } }
    @media (max-width: 500px) {
      /* Mobile: shrink the H1 so it never folds to 3 lines (any locale), give the icon
         breathing room, and bring the main body copy down to 14px. */
      .castlebuilding .entry-title { font-size: 16px; line-height: 1.3; margin-bottom: 10px; }
      .castlebuilding .entry-title img { margin-right: 8px; vertical-align: middle; }
      .castle-games-content > p { font-size: 14px; }
      .cbg-game p { font-size: 14px; }
      .castle-games-content .cbg-group-h2 { font-size: 12pt; }
      .cbg-pick-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
      .castle-games-content .cbg-quickpicks > p { font-size: 14px; }
      .castle-games-content .cbg-pick-name { font-size: 14.5px; }
      .castle-games-content .cbg-pick-desc { font-size: 13px; }
    }