html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, address, big, cite, code, del, dfn, em, img, ins, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, main, nav, output, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none; }
/* Trending Games (.sidebar) must match the height of the text+image block
   (.main) next to it, not be taller. .content already has align-items:stretch,
   so simply not forcing align-self/height here lets both columns stretch to
   the same (tallest) height automatically. */
.content > .sidebar {
  height: auto;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  display: block; }

body { line-height: 1; }
ol, ul, nav { list-style: none; }
* { box-sizing: border-box; }
img, video, canvas { max-width: 100%; }
img { vertical-align: bottom; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a:hover { color: inherit; }
html, body { height: 100%; width: 100%; }
iframe { width: 100%; }
a, button, a:hover, button:hover { cursor: pointer; }
button, button:focus, button:active { outline: none; border: none; }
blockquote { margin: 0; }

@font-face {
  font-family: 'Gilroy';
  src: local('Gilroy'), local('Gilroy'),
      url('../fonts/Gilroy/Gilroy-Regular.woff2') format('woff2'),
      url('../fonts/Gilroy/Gilroy-Regular.woff') format('woff'),
      url('../fonts/Gilroy/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: 'Gilroy Bold';
  src: local('Gilroy'), local('Gilroy'),
      url('../fonts/Gilroy/Gilroy-Bold.woff2') format('woff2'),
      url('../fonts/Gilroy/Gilroy-Bold.woff') format('woff'),
      url('../fonts/Gilroy/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal; }

/* =========================================================
   DESIGN TOKENS — itch.io-inspired flat system
   White/near-white surfaces, near-black ink, thin hairline
   borders, a red brand accent, small (almost square) radii,
   and shadows used only as a faint hover cue, never as decor.
   ========================================================= */
:root {
  --ink: #1a1a1a;          /* headings / body text */
  --ink-soft: #6e6e6e;     /* secondary / muted text (author, genre, meta lines) */
  --card: #ffffff;         /* primary card surface — flat white, itch-style */
  --card-mint: #f4f4f4;    /* secondary / recessed surface, light neutral gray */
  --line: #e3e3e3;         /* default hairline border */
  --line-strong: #c9c9c9;  /* emphasized border, hover */

  --accent: #FA5C5C;       /* itch red — brand / CTA / links */
  --accent-soft: #ffe6e6;
  --accent-ink: #c23b3b;
  --accent-muted: #e2504f; /* softened red — decorative use (bars, icons, badges) */

  --teal: #2b6aa3;         /* secondary accent — info / links / tags */
  --teal-soft: #e7f0f8;
  --teal-ink: #1f4d78;

  --gold: #ffb100;         /* tertiary accent — ratings / badges */
  --gold-soft: #fff2d6;
  --gold-ink: #8a5c0c;

  --dark: #17181a;         /* itch-style dark footer/anchor */
  --dark-soft: #9aa0a6;

  --radius-lg: 6px;
  --radius-md: 5px;
  --radius-sm: 3px;
  --shadow-card: none;
  --shadow-card-sm: 0 1px 3px rgba(20, 20, 20, .07);
  --shadow-card-xs: 0 1px 2px rgba(20, 20, 20, .05);
}

body {
  font-family: "Gilroy", sans-serif;
  font-style: normal;
  font-weight: normal;
  color: var(--ink);
  letter-spacing: normal;
  font-size: 16px;
  /* flat, near-white background — itch.io keeps the page itself plain
     so the color budget goes to thumbnails and the red accent */
  background: #f4f4f4;
  -webkit-font-smoothing: antialiased; }

h1, .h1 { font-size: 32px; font-weight: bold; color: var(--ink); margin-bottom: 20px; }
h2, .h2 { font-size: 22px; font-weight: bold; color: var(--ink); }
h3, .h3 { font-size: 18px; font-weight: bold; color: var(--ink); }
p { margin-bottom: 20px; }
div p:last-child { margin-bottom: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; }

.heading {
  font-family: 'Gilroy Bold';
  font-size: 18px;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  position: relative; }

.flex-auto { flex: auto; }

.icon-all_games { display: block; width: 60px; height: 60px; background: url("../img/AllGame.png") 0 0 no-repeat; background-size: contain; margin-right: 5px; }
.icon-popular { display: inline-block; width: 60px; height: 60px; background: url("../img/Popular.png") 0 0 no-repeat; background-size: contain; margin-right: 5px; }
.icon-best_games { display: inline-block; width: 60px; height: 60px; background: url("../img/BestGames.png") 0 0 no-repeat; background-size: contain; margin-right: 5px; }
.icon-top10 { display: inline-block; width: 60px; height: 60px; background: url("../img/Top10.png") 0 0 no-repeat; background-size: contain; margin-right: 5px; }
.icon-coloring_games { display: inline-block; width: 15px; height: 17px; background: url("../img/icon-coloring_games.svg") 0 0 no-repeat; margin-right: 5px; }
.icon-loupe { display: block; width: 20px; height: 20px; background: url("../img/icon-loupe.svg") 0 0 no-repeat; }
.icon-arrow-prev { display: block; width: 20px; height: 20px; background: url("../img/icon-arrow-prev.svg") 0 0 no-repeat; }
.icon-arrow-next { display: block; width: 20px; height: 20px; background: url("../img/icon-arrow-next.svg") 0 0 no-repeat; transform: rotate(180deg); }
.icon-views { display: block; width: 14px; height: 14px; background: url("../img/icon-show.svg") 0 0 no-repeat; margin-right: 5px; }
.icon-views-orange { display: block; width: 14px; height: 14px; background: url("../img/icon-show-orange.svg") 0 0 no-repeat; margin-right: 5px; }

.btn-search {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm); outline: 0;
  background: var(--card); border: 1.5px solid var(--line); }
  .btn-search:hover { border-color: var(--ink); }
  .btn-search.active, .btn-search:active { background: var(--card-mint); border-color: var(--accent); }

/* itch.io's primary button: rectangular, near-flat, small radius, bold uppercase label */
.btn-play {
  display: flex; align-items: center; justify-content: center;
  width: 125px; height: 46px; border-radius: var(--radius-sm); outline: 0;
  background: var(--accent); color: #fff;
  transition: background-color .12s ease; }
  .btn-play:hover { background: #e14b4b; }
  .btn-play:active { background: #c93a3a; }
  .btn-play span { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

.btn-fullscreen { display: flex; align-items: center; justify-content: center; width: 84px; height: 50px; outline: 0; }

.page { width: 100%; }

/* ===================== HEADER — flat full-width bar with a thin red rule, itch.io style ===================== */
.header {
  position: relative;
  background: #ffffff;
  border: none;
  border-bottom: 3px solid var(--accent);
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 30px;
  max-width: none;
  width: 100%;
  height: auto;
  padding: 0; }
  .header .wrapper {
    position: relative;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 18px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center; }

.top { display: flex; align-items: center; justify-content: flex-end; position: relative; max-width: none; width: 100%; }

.logo { position: relative; flex-shrink: 0; font-family: 'Gilroy Bold'; font-size: 20px; font-weight: 800; color: var(--ink); }
.logo img { display: block; max-height: 40px; width: auto; }

.menu { position: relative; top: auto; right: auto; transform: none; display: flex; align-items: center; padding: 0; z-index: 1; }
  .menu ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
    .menu ul li {
      position: relative;
      width: auto;
      height: auto;
      border-radius: var(--radius-sm);
      z-index: 1;
      overflow: visible;
      flex-shrink: 0;
      background: transparent;
      border: 1.5px solid transparent;
      transition: background-color .12s ease, border-color .12s ease; }
      .menu ul li a {
        display: flex; justify-content: center; align-items: center;
        width: 100%; height: 100%; flex-direction: column;
        padding: 8px 14px; }
        .menu ul li a span {
          font-family: 'Gilroy Bold', sans-serif;
          font-size: 14px; font-weight: 700; font-style: normal;
          text-align: center; line-height: 1.15; color: var(--ink); }
      .menu ul li:hover, .menu .current-menu-item {
        border-color: var(--line);
        background: var(--card-mint);
        box-shadow: none;
        transform: none; }
      .menu ul li:hover span, .menu .current-menu-item span { color: var(--accent-ink); }

/* ===================== HEADER DROPDOWN — "More Games" sub-menu =====================
   WordPress's wp_nav_menu already outputs the child links as a nested
   <ul class="sub-menu"> inside the parent <li class="menu-item-has-children">
   — no PHP change needed. The only thing missing was CSS: without it, the
   nested <ul> just inherited ".menu ul { display:flex }" from the rule
   above and rendered as a second always-visible row of flat pill links
   instead of a hidden dropdown panel. */
.menu ul li.menu-item-has-children > a { padding-right: 22px; position: relative; }
.menu ul li.menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -8px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform .15s ease, border-color .15s ease; }
.menu ul li.menu-item-has-children:hover > a::after { border-color: var(--accent-ink); transform: rotate(225deg); margin-top: -4px; }

/* "More Games" icon — reuses the theme's existing controller artwork
   (.icon-all_games / img/AllGame.png, already used elsewhere for a 60px
   heading icon) but sized down to sit above the label like the other
   top-menu icons (Boys Games, Girls Games, etc). Add this markup to the
   item's Navigation Label in Appearance → Menus:
     <i class="icon-all_games"></i><span>More Games</span> */
.menu .icon-all_games {
  width: 32px;
  height: 32px;
  margin: 0 0 4px;
  flex-shrink: 0; }

.menu ul li .sub-menu {
  display: block;                 /* undo the flex it inherits from ".menu ul" */
  flex-direction: column;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-sm);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 20; }
.menu ul li.menu-item-has-children:hover > .sub-menu,
.menu ul li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0); }

.menu ul li .sub-menu li {
  width: 100%;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent; }
.menu ul li .sub-menu li a {
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 14px; }
.menu ul li .sub-menu li a span {
  text-align: left;
  white-space: nowrap; }
.menu ul li .sub-menu li:hover {
  border-color: transparent;
  background: var(--card-mint); }

.content { display: flex; justify-content: space-between; align-items: stretch; }
.main.single { margin: 0 20px 10px; }
/* single.php's row is 3 flex items: sidebar-column, .main, sidebar-column.
   align-items:stretch only equalizes the OUTER box of each flex item — it doesn't
   make a nested single child (the .sidebar card) grow to fill that stretched box.
   That's why the sidebar cards used to stop short and leave plain page background
   below them while the much taller center card (500px game window) kept going,
   which is what made the next row (Recommended Games) collide with the center card
   once a guessed negative margin tried to pull it up.
   Fix: give .sidebar-column the same margin-bottom as .main, and make the .sidebar
   card itself grow (flex:1) to fill the full stretched height of its column. Now
   all three columns share one real, equal bottom edge, and a normal 10px margin
   produces a genuine uniform gap on every side — no guessing needed. */
.sidebar-column { display: flex; flex-direction: column; max-width: 200px; width: 100%; margin-bottom: 10px; }

/* ===================== SIDEBAR / MAIN block shells — flat white panels, hairline border ===================== */
.sidebar {
  width: 100%; margin-bottom: 0; margin-right: 40px;
  flex: 1 1 auto;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: none;
  display: flex; flex-direction: column; }
  .sidebar__head, .sidebar_head {
    flex-shrink: 0;
    position: relative;
    display: flex; justify-content: space-around; align-items: center;
    padding: 0 32px; height: 50px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .sidebar__head .heading, .sidebar_head .heading { color: var(--ink); }
  .sidebar__content, .sidebar_content { flex: 1 1 auto; margin-top: 0; padding: 10px 0 12px 0; }

.new_games { display: inline-block; width: 48px; height: 48px; background: url(../img/new.png) 0 0 no-repeat; background-size: contain; position: absolute; left: -60px; top: -10px; }
.free_games { display: inline-block; width: 60px; height: 60px; background: url(../img/FreeGames.png) 0 0 no-repeat; background-size: contain; position: absolute; left: 3px; top: -10px; }

.main {
  width: 100%; margin-bottom: 0px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: none; }
  .main__head, .main_head {
    position: relative;
    display: flex; justify-content: space-around; align-items: center;
    padding: 0 32px; height: 64px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .main__head .heading, .main_head .heading { color: var(--ink); }

.game_item { position: relative; }
.game_item > a { display: block; }
.title_recommend {
  left: 0; right: 0; bottom: 0; width: 100%;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,0) 100%);
  border: none; border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: none;
  text-align: left;
  font-family: 'Gilroy'; font-style: normal; font-weight: 600; font-size: 13px; line-height: 1.35;
  letter-spacing: -0.01em;
  color: #ffffff;
  padding: 22px 12px 8px; position: absolute;
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity .15s ease; }
.best-games__list .title_recommend { opacity: 0; }
.game_item:hover .title_recommend { opacity: 1; }
.title_pop_up { width: auto; position: static; }
.recommended-games .item { position: relative; margin: 10px 0; }
.title_pop_up.no-visible, .title_recommend.no-visible { opacity: 0; }
.item:hover .title_pop_up { opacity: 1; }
.item:hover .title_recommend { opacity: 1; }

.main__content, .main_content { padding: 16px 0 20px 0; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

.game-offer__content {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 40px;
  font-family: 'Gilroy'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px;
  letter-spacing: -0.02em;
  color: var(--ink); }

/* text typography — matched to .top_text on the homepage, so single.php
   article copy (top_descript) reads with the same font/sizes/weights */
.game-offer__content p {
  font-family: 'Gilroy'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  margin-bottom: 20px; }
  .game-offer__content p:last-child { margin-bottom: 0; }
.game-offer__content h1 {
  font-family: 'Gilroy'; font-style: normal; font-weight: 700; font-size: 30px; line-height: 36px;
  text-align: left; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px; }
.game-offer__content h2 {
  font-family: 'Gilroy Bold'; font-style: normal; font-weight: 700; font-size: 24px; line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 30px 0 16px; }
  .game-offer__content h2:first-child { margin-top: 0; }
.game-offer__content h3 {
  font-family: 'Gilroy Bold'; font-style: normal; font-weight: 700; font-size: 19px; line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 24px 0 12px; }
  .game-offer__content h3:first-child { margin-top: 0; }
.game-offer__content b,
.game-offer__content strong { font-weight: 700; color: var(--ink); }
.game-offer__content a { text-decoration: underline; color: var(--accent-ink); }
  .game-offer__content a:hover { text-decoration: none; color: var(--accent); }

/* bare lists & tables inside .game-offer__content (single.php top_descript) —
   same treatment as .block-text, so game-page text gets identical list/table styling */
.game-offer__content ul,
.game-offer__content ol {
  list-style: none;
  margin: 20px 0;
  padding: 0; }
  .game-offer__content ul:last-child,
  .game-offer__content ol:last-child { margin-bottom: 0; }
  .game-offer__content ul li,
  .game-offer__content ol li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 28px;
    font-family: 'Gilroy';
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--ink-soft); }
    .game-offer__content ul li:last-child,
    .game-offer__content ol li:last-child { margin-bottom: 0; }
    .game-offer__content ul li ul,
    .game-offer__content ul li ol,
    .game-offer__content ol li ul,
    .game-offer__content ol li ol { margin: 10px 0 0; }
.game-offer__content ul li::before {
  content: '\25CF';
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-size: 12px;
  line-height: 1.8; }
.game-offer__content ol { counter-reset: game-offer-content-counter; }
.game-offer__content ol li { counter-increment: game-offer-content-counter; padding-left: 32px; }
.game-offer__content ol li::before {
  content: counter(game-offer-content-counter) '.';
  position: absolute; left: 0; top: 0;
  color: var(--accent-ink);
  font-family: 'Gilroy Bold'; font-weight: 700;
  font-size: 15px;
  line-height: 1.65; }

.game-offer__content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin: 20px 0; }
  .game-offer__content table thead th,
  .game-offer__content table th {
    text-align: left;
    font-family: 'Gilroy Bold';
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--card-mint);
    padding: 12px 18px; }
    .game-offer__content table thead th:first-child,
    .game-offer__content table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
    .game-offer__content table thead th:last-child,
    .game-offer__content table th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .game-offer__content table tbody tr td,
  .game-offer__content table td {
    background: var(--card);
    border: 1px solid var(--line);
    padding: 14px 18px;
    vertical-align: top;
    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--ink-soft); }
    .game-offer__content table tbody tr td:first-child,
    .game-offer__content table td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-family: 'Gilroy Bold'; font-weight: 700; color: var(--ink); white-space: nowrap; }
    .game-offer__content table tbody tr td:last-child,
    .game-offer__content table td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ===================== BEST GAMES / VOTED / RECOMMENDED — flat white tiles, thin border, no tilt ===================== */
.best-games {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .best-games__list li {
    margin-bottom: 20px; text-align: center; max-width: 160px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md); padding: 4px;
    transition: border-color .15s ease, box-shadow .15s ease; }
  .best-games__list li:hover { border-color: var(--accent); box-shadow: var(--shadow-card-sm); }
  .best-games__list li span {
    font-family: 'Gilroy Bold'; font-style: normal; font-weight: 700; font-size: 15px; line-height: 22px;
    white-space: nowrap; overflow: hidden; display: block; text-overflow: ellipsis; padding: 0 8px; color: var(--ink); }
.best-games__list { display: flex; align-content: flex-start; justify-content: space-around; flex-wrap: wrap; gap: 20px 0; }
.best-games__list img { width: 157px; aspect-ratio: 1 / 1; object-fit: cover; border: none; border-radius: var(--radius-sm); box-shadow: none; transition: none; }
.game_item img { transform-origin: 50% 100%; }
.game_item:hover img { box-shadow: none; }

/* single.php's Popular Games sidebar is nested in .sidebar-column (front-page.php
   is not), and that column is deliberately compact next to the tall game window —
   so keep the smaller thumbnails scoped to single.php only, without touching its markup. */
.sidebar-column .best-games__list {
  gap: 12px 0; }
.sidebar-column .best-games__list li {
  margin-bottom: 0; padding: 4px; }
.sidebar-column .best-games__list img {
  width: 120px; }

.vouted-games {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none; }
  .vouted-games__list li a {
    width: 100%; height: 100%; display: flex; align-items: center;
    background: transparent; padding: 5px 20px; border-radius: var(--radius-sm); }
    .vouted-games__list li a .name { color: var(--ink); }
    .vouted-games__list li a:hover { background: var(--card-mint); }
      .vouted-games__list li a:hover .name { color: var(--accent-ink); }
    .vouted-games__list li a.active, .vouted-games__list li a:active { background: var(--accent-soft); }
      .vouted-games__list li a.active .name, .vouted-games__list li a:active .name { color: var(--accent-ink); }
    .vouted-games__list li a .views { display: flex; align-items: center; margin-top: 4px; color: var(--teal); }
      .vouted-games__list li a .views span { font-size: 13px; line-height: 1; }
  .vouted-games__list li img { width: 45px; height: 45px; margin-right: 10px; border-radius: var(--radius-sm); }
  .vouted-games__list li:last-child { margin-bottom: 0; }

.recommended-games {
  padding: 20px 30px;
  background: var(--card);
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; justify-content: space-around; flex-wrap: wrap; }
  .recommended-games__thumb { display: block; }
    .recommended-games__thumb img { border: none; border-radius: var(--radius-sm); width: 115px; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: none; transform-origin: 50% 100%; transition: opacity .15s ease; }
    .item:hover .recommended-games__thumb img { opacity: .85; }
  .recommended-games__slider { padding: 0; }
  .recommended-games .slick-slide div + div { margin-top: 10px; }
  .recommended-games .slick-prev, .recommended-games .slick-next {
    position: absolute; display: flex; align-items: center; justify-content: center;
    top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
    background: var(--card); border: 1.5px solid var(--line); border-radius: 50%; }
    .recommended-games .slick-prev:hover, .recommended-games .slick-next:hover { border-color: var(--ink); }
  .recommended-games .slick-prev { left: -60px; }
  .recommended-games .slick-next { right: -60px; }
  .recommended-games .slick-dots { display: flex; align-items: center; justify-content: center; max-width: 80%; width: 100%; position: absolute; top: calc(100% + 35px); left: 0; right: 0; margin: 0 auto; }
    .recommended-games .slick-dots li { display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 7px; }
      .recommended-games .slick-dots li button { font-size: 0; border-radius: 50%; padding: 3px; background: var(--line-strong); }
      .recommended-games .slick-dots li.slick-active { width: 8px; height: 8px; background: var(--accent); }

/* ===================== CATALOG / GALLERY / GAME CARD — the itch.io "Top selling" grid ===================== */
.catalog { margin-bottom: 30px; }
  .catalog__title {
    font-family: 'Gilroy'; font-style: normal; font-weight: 700;
    margin-bottom: 24px; font-size: 24px; line-height: 1.3; letter-spacing: -0.01em;
    position: relative; color: var(--ink); padding-left: 80px;
    padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .catalog__list { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }

/* Fresh Games (front page) — stretch the grid to the full container width
   (flush with the boxes above it) using 6 cards per row instead of 5;
   cards are sized down slightly (190px -> 180px) so 6 fit edge to edge:
   6 cards * 180px + 5 gaps * 24px (12px+12px side margins) = 1200px. */
.catalog--fresh { margin-top: 30px; }
@media all and (min-width: 768px) {
  /* scoped to desktop/tablet so it doesn't fight media.css's mobile
     2-per-row .game-card rules, which have lower selector specificity */
  .catalog--fresh .game-card { flex: 0 0 180px; width: 180px; height: 222px; }
  .catalog--fresh .game-card .thumb { height: 169px; }
}

.gallery { display: flex; justify-content: space-between; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
  .gallery__item { margin: 15px; }

/* flat white product tile: square thumbnail, bold black title beneath, a thin
   border that only turns red on hover — no rotation, no colored glow shadow */
.game-card {
  position: relative; padding: 0; flex: 0 0 190px; width: 190px; height: 234px; margin: 16px 12px;
  overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
  text-align: left; }
  .game-card:hover { border-color: var(--ink); box-shadow: var(--shadow-card-sm); }
  .game-card .thumb { max-width: 100%; height: 178px; margin: 0; }
  .catalog.related_posts .game-card { margin: 15px; }
    .game-card .thumb img { border-radius: 0; width: 100%; height: 100%; object-fit: cover; }
  .game-card .name { text-align: left; padding: 10px 12px 0; }
    .game-card .name a { display: block; font-size: 15px; font-weight: 700; font-family: 'Gilroy Bold'; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--ink); }
  .game-card:hover .name a { color: var(--accent-ink); }

.game-offer {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 30px; margin-bottom: 30px; }
  .game-offer h2, .game-offer h3 { margin-bottom: 20px; }
  .game-offer__image { float: left; margin-right: 20px; margin-bottom: 20px; max-width: 185px; }
    .game-offer__image img { border-radius: var(--radius-md); }
  .game-offer__comments {
    position: relative; max-width: 830px; width: 100%;
    background: var(--card); border: 1px solid var(--line);
    padding: 30px; border-radius: var(--radius-lg); margin-bottom: 30px;
    color: var(--ink); }
  .game-offer__comments.standalone {
    max-width: none;
    box-shadow: none; }
  .game-offer__window { margin-bottom: 16px; }
    .game-offer__window__frame { position: relative; min-height: 500px; }
      .game-offer__window__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .game-offer__window__top {
      background: var(--card); border: 1px solid var(--line); border-bottom: none;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      display: flex; justify-content: space-between; align-items: center; padding: 10px; }
      .game-offer__window__top .ratings { display: flex; align-items: center; max-width: 254px; height: 50px; }
        .game_title { display: flex; align-items: center; max-width: 260px; }
        .game_title h1 { font-family: 'Gilroy'; display: inherit; font-style: normal; font-weight: 600; font-size: 24px; line-height: 26px; letter-spacing: -0.02em; color: var(--ink); }
        .game_title img { width: 50px; margin-right: 10px; border-radius: var(--radius-sm); }
        .game-offer__window__top .ratings .star-rating { padding: 0 20px; min-width: 100px; }
        .game-offer__window__top .ratings .likes-rating {
          display: flex; align-items: center; border-radius: var(--radius-sm); background: var(--card-mint); padding: 4px 5px; width: 92px; height: 46px; }
          .game-offer__window__top .ratings .likes-rating .rating-like {
            display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;
            border: none;
            background: var(--card); border: 1px solid var(--line); }
            .game-offer__window__top .ratings .likes-rating .rating-like:hover { background: var(--card-mint); border-color: var(--ink); }
				.game-offer__window__top .ratings .likes-rating .rating-like.active, .game-offer__window__top .ratings .likes-rating .rating-like:active {
              background: var(--accent-soft); border-color: var(--accent); }
            .game-offer__window__top .ratings .likes-rating .rating-like:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
            .game-offer__window__top .ratings .likes-rating .rating-like:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
      .game-offer__window__top .views { display: flex; align-items: center; color: var(--ink-soft); }
        .game-offer__window__top .views span { font-size: 14px; }
        .game-offer__window__top .views i { width: 16px; height: 16px; background-size: cover; }
    .game-offer__window__bottom {
      display: flex; justify-content: space-between; align-items: center; padding: 10px;
      background: var(--card); border: 1px solid var(--line); border-top: none;
      border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
      .game-offer__window__bottom .links { display: flex; align-items: center; margin-top: 10px; }
        .game-offer__window__bottom .links a { margin-right: 7px; }
          .game-offer__window__bottom .links a:last-child { margin-right: 0; }
      .game-offer__window__bottom .fullscreen { width: 100%; max-width: 60px; height: 43px; background: var(--card); display: flex; align-items: center; justify-content: center; }
        .game-offer__window__bottom .fullscreen .btn-fullscreen span { display: none; }

/* single.php wraps its whole game block in class="main__content game-offer".
   .game-offer (used standalone elsewhere) carries its own padding/margin-bottom;
   on this combo those created the large empty strip at the bottom of the card
   (the red-marked area). Flatten that out here, scoped to the combo only, so
   the standalone .game-offer usage elsewhere is untouched. */
.main__content.game-offer,
.main_content.game-offer {
  margin-bottom: 0;
  padding: 16px 24px 6px; }

/* legacy colored block shells — kept working for other pages, recolored to the flat system */
.border-block {
  padding: 40px 10px; border-radius: var(--radius-lg); text-align: center; margin-bottom: 28px;
  box-shadow: none;
  background: var(--card-mint);
  border: 1px solid var(--line);
  color: var(--ink); }
  .border-block_list { padding: 10px 20px; display: flex; align-items: center; justify-content: center; }

.top_text {
  width: 100%;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: block; padding: 30px 28px; margin: 0; }
  .main__content.top_text h1, .main_content.top_text h1 { font-family: 'Gilroy'; font-style: normal; font-weight: 700; font-size: 30px; line-height: 36px; text-align: left; letter-spacing: -0.02em; padding: 0 0 18px; color: var(--ink); }
  .main__content.top_text p, .main_content.top_text p { font-family: 'Gilroy'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: var(--ink-soft); }
  .main__content.top_text a, .main_content.top_text a { text-decoration: underline; color: var(--accent-ink); }
  .main__content.top_text a:hover, .main_content.top_text a:hover { text-decoration: none; color: var(--accent); }

.game-day__image { max-width: 185px; width: 100%; margin-right: 20px; }
  .game-day__image img { border-radius: var(--radius-md); }
.game-day__title { font-size: 26px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.game-day__views { display: flex; align-items: center; color: var(--ink-soft); }
  .game-day__views span { font-size: 13px; line-height: 1; }
.game-day__side { position: relative; flex: 1; }
  .game-day__side__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 35px; }
  .game-day__side--block { display: flex; flex-direction: column; }
  .game-day__side--buttons { margin-left: 20px; }

.block-text {
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: none;
  color: var(--ink);
  margin-bottom: 30px; }
.block-text > p { font-family: 'Gilroy'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; margin-top: 25px; color: var(--ink-soft); }
.block-text a { text-decoration: underline; color: var(--accent-ink); }
.block-text a:hover { text-decoration: none; color: var(--accent); }
.block-text h2 { font-family: 'Gilroy Bold'; font-style: normal; font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.block-text h1, .block-text h3 { margin-bottom: 20px; }
.block-text b, .block-text strong { color: var(--ink); }
.block-text .mypoint, .block-text .mypoint li { color: var(--ink-soft); }
.block-text.c1 { background: var(--accent-soft); border-color: #f3bcbc; }
.block-text.c1 h2 { color: var(--accent-ink); }
.block-text.c2 { background: var(--teal-soft); border-color: var(--line-strong); }
.block-text.c2 h2 { color: var(--teal-ink); }
.block-text.c3 { background: var(--gold-soft); border-color: #f0d9a8; }
.block-text.c3 h2 { color: var(--gold-ink); }

/* =========================================================
   BARE LISTS & TABLES INSIDE .block-text (category page text)
   Category-page content (top_descript / bottom_descript) often
   ships as plain <ul>/<ol>/<table> with no extra class, unlike
   game-page text which already carries .mypoint / .styled-table.
   These rules give the same finished look to unclassed markup
   so category texts don't need manual class edits.
   ========================================================= */
.block-text ul,
.block-text ol {
  list-style: none;
  margin: 20px 0;
  padding: 0; }
  .block-text ul:last-child,
  .block-text ol:last-child { margin-bottom: 0; }
  .block-text ul li,
  .block-text ol li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 28px;
    font-family: 'Gilroy';
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--ink-soft); }
    .block-text ul li:last-child,
    .block-text ol li:last-child { margin-bottom: 0; }
    .block-text ul li ul,
    .block-text ul li ol,
    .block-text ol li ul,
    .block-text ol li ol { margin: 10px 0 0; }
/* unordered — bullet dot, same visual language as .mypoint */
.block-text ul li::before {
  content: '\25CF';
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-size: 12px;
  line-height: 1.8; }
/* ordered — numbered chip, matches .step-list accent color */
.block-text ol { counter-reset: block-text-counter; }
.block-text ol li { counter-increment: block-text-counter; padding-left: 32px; }
.block-text ol li::before {
  content: counter(block-text-counter) '.';
  position: absolute; left: 0; top: 0;
  color: var(--accent-ink);
  font-family: 'Gilroy Bold'; font-weight: 700;
  font-size: 15px;
  line-height: 1.65; }

/* bare tables — same card look as .styled-table, no class needed */
.block-text table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin: 20px 0; }
  .block-text table thead th,
  .block-text table th {
    text-align: left;
    font-family: 'Gilroy Bold';
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--card-mint);
    padding: 12px 18px; }
    .block-text table thead th:first-child,
    .block-text table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
    .block-text table thead th:last-child,
    .block-text table th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .block-text table tbody tr td,
  .block-text table td {
    background: var(--card);
    border: 1px solid var(--line);
    padding: 14px 18px;
    vertical-align: top;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft); }
    .block-text table tbody tr td:first-child,
    .block-text table td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-family: 'Gilroy Bold'; font-weight: 700; color: var(--ink); white-space: nowrap; }
    .block-text table tbody tr td:last-child,
    .block-text table td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.border-block.text-block { text-align: left; padding: 34px 30px; color: var(--ink); }
.border-block.text-block h2 { color: var(--ink); margin-bottom: 20px; }
.border-block.text-block p { color: var(--ink-soft); margin-bottom: 16px; }
.border-block.text-block p:last-child { margin-bottom: 0; }
.border-block.text-block b, .border-block.text-block strong { color: var(--ink); }

.mypoint {
  list-style: none; font-family: 'Gilroy'; font-size: 16px; line-height: 130%; letter-spacing: -.01em; color: var(--ink-soft);
  margin: 20px 0; }
.mypoint li { position: relative; margin-bottom: 14px; padding-left: 26px; }
.mypoint li:last-child { margin-bottom: 0; }
.mypoint li::before {
  content: '\25CF';
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-size: 12px;
  line-height: 1.8; }
.mypoint.dark { color: var(--ink-soft); }
.mypoint.dark li::before { color: var(--accent); }
strong { font-weight: bold; }

.breadcrumbs { position: relative; margin-bottom: 10px; }
.breadcrumb { display: flex; }
  .breadcrumb li { display: flex; }

.pagination-container { margin-top: 20px; margin-bottom: 30px; }
/* itch.io-style pagination: plain bordered squares, current page filled black */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; }
  .pagination li {
    position: relative; display: flex; justify-content: center; align-items: center;
    width: 40px; height: 40px; margin-right: 8px;
    background: var(--card); border: 1px solid var(--line);
    box-shadow: none;
    border-radius: var(--radius-sm); transition: border-color .12s ease; }
  .pagination li:hover { transform: none; border-color: var(--ink); box-shadow: none; }
    .pagination li a {
      display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
      background: transparent; box-shadow: none; border-radius: var(--radius-sm); color: var(--ink);
      font-family: 'Gilroy Bold'; font-style: normal; font-weight: 700; font-size: 15px; line-height: 16px; }
     .pagination li a:hover { background: var(--card-mint); box-shadow: none; }
      .pagination li.current { color: #fff; font-family: 'Gilroy Bold'; font-style: normal; font-weight: 700; font-size: 15px; line-height: 16px; background: var(--ink); border-color: var(--ink); box-shadow: none; border-radius: var(--radius-sm); }
      .pagination li a::before { content: ''; top: 0; bottom: 0; left: 0; right: 0; }

.footer-copyright img { height: 44px; }
.footer a { text-decoration: none; color: var(--dark-soft); }
.footer a:hover { text-decoration: underline; color: var(--accent); }
/* itch.io-style footer: dark, flat, full-width */
.footer {
  background: var(--dark);
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 40px 0 0;
  max-width: none;
  width: 100%;
  padding: 0; }
  .footer .container { padding: 0 40px; }
  .footer-flex { display: flex; align-items: center; justify-content: space-between; height: 76px; flex-wrap: wrap; gap: 10px 0; }
  .footer-menu ul { list-style: none; margin: 0; padding: 0; }
  .footer-menu { font-family: 'Gilroy'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 1.4; text-align: right; letter-spacing: -0.01em; color: var(--dark-soft); }

ul.list_category div { float: right; padding: 0 6px; font-family: 'Gilroy'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 14px; letter-spacing: -0.02em; text-transform: capitalize; color: var(--ink); }
ul.list_category img { padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 50px; }
ul.list_category li { width: 125px; display: flex; align-items: center; float: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 5px; }
ul.list_category li:hover div { color: var(--accent); }
ul.list_category { margin: 20px 0 20px; width: 100%; display: flex; justify-content: center; }

.related__title { max-width: 240px; margin-right: 76px; margin-top: 75px; padding-left: 75px; position: relative; }
.related__title h2 { font-family: 'Gilroy'; font-style: normal; font-weight: 700; font-size: 36px; line-height: 42px; letter-spacing: -0.02em; color: var(--ink); }
.catalog.related_posts { margin-top: 75px; }
.related { display: inline-block; width: 60px; height: 60px; background: url(../img/RelatedGames.png) 0 0 no-repeat; background-size: contain; position: absolute; left: 5px; top: 15px; }

/* "Top Games" block (related_posts) — genuinely flow the cards around the
   trophy title instead of reserving its width on every row. The old fix
   applied the title's width as padding-left on the whole flex list, so
   every row (not just the first) was squeezed down to 4 cards and the
   later rows ended up shifted instead of using the full row width.
   Floating the title and the cards lets normal text-wrap behavior do the
   job: only the row(s) beside the float are narrower (4 cards), and once
   a row clears the float's height it uses the full container width
   (6 cards). Scoped to tablet/desktop; mobile keeps the plain flex-wrap
   grid with the title stacked full-width above it. */
@media all and (min-width: 768px) {
  .catalog.related_posts .catalog__list {
    display: block;
    margin: 0;
  }
  .catalog.related_posts .catalog__list::after {
    content: '';
    display: table;
    clear: both; }
  .catalog.related_posts .related__title {
    float: left;
    width: 400px;
    max-width: 400px;
    height: 234px;
    margin: 15px 0;
    padding-top: 40px;
    box-sizing: border-box; }
  /* 170px cards (down from 190px) with the existing 15px margin fit
     exactly 6 per row across the 1200px container (6 * (170+30) = 1200),
     and exactly 4 next to the 400px-wide title on row 1 (400 + 4*200 = 1200). */
  .catalog.related_posts .game-card {
    float: left;
    width: 170px;
    height: 234px;
    margin: 15px; }
}


/* =========================================================
   ARTICLE FIELD — this is the original .game-offer__comments
   (standalone) text field, restyled. One continuous card holds
   the flowing text; only genuinely distinct content (a tip, a
   sequence, definitions, a table, FAQ) gets its own component.
   ========================================================= */

.article-hero-image { display: block; border-radius: var(--radius-md); margin: 0 0 24px; box-shadow: none; }

.game-offer__comments a { text-decoration: underline; color: var(--accent-ink); }
.game-offer__comments a:hover { color: var(--accent); }

.article-section {
  padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--line); }
.article-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.article-section h2 {
  position: relative;
  font-family: 'Gilroy Bold';
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 16px;
  padding-left: 18px; }
.article-section h2::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px;
  background: var(--accent); border-radius: 2px; }
.article-section p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.article-section p b, .article-section p strong { color: var(--ink); }

/* single-tip callout — for the rare "beginner tip"-style aside inside a section */
.callout {
  background: var(--teal-soft);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 16px 20px;
  margin: 20px 0; }
.callout p { margin: 0; font-size: 15px; color: var(--teal-ink); line-height: 1.55; }
.callout p b { color: var(--teal-ink); }

/* numbered sequence — only used where order genuinely matters */
.step-list { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.step-list li { display: flex; align-items: flex-start; gap: 16px; }
.step-list .num {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; background: var(--accent);
  border-radius: var(--radius-sm); color: #fff; font-family: 'Gilroy Bold'; font-weight: 700; font-size: 15px; }
.step-list .txt { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; padding-top: 6px; }

/* term / definition cards */
.term-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.term-card {
  background: var(--gold-soft);
  border: 1px solid #f0d9a8;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  max-width: 260px;
  box-shadow: none;
  flex: 1 1 220px; }
.term-card b { display: block; font-family: 'Gilroy Bold'; font-weight: 700; font-size: 15px; color: var(--gold-ink); margin-bottom: 6px; }
.term-card span { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

/* data table */
.styled-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; margin: 20px 0; }
.styled-table thead th {
  text-align: left; font-family: 'Gilroy Bold'; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); background: var(--card-mint); padding: 12px 18px; }
.styled-table thead th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.styled-table thead th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.styled-table tbody tr td { background: var(--card); border: 1px solid var(--line); padding: 14px 18px; vertical-align: top; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.styled-table tbody tr td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-family: 'Gilroy Bold'; font-weight: 700; color: var(--ink); white-space: nowrap; }
.styled-table tbody tr td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.styled-table.alt thead th { background: var(--gold-soft); color: var(--gold-ink); }

/* FAQ — alternating tint bubbles, no more heavy saturated gradients */
.faq-wrap { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.faq-item { max-width: 82%; padding: 20px 24px; border-radius: var(--radius-md); border: 1px solid var(--line); }
.faq-item h3 { font-size: 16px; color: var(--ink); margin-bottom: 8px; line-height: 1.35; }
.faq-item p { margin-bottom: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.faq-left { align-self: flex-start; }
.faq-right { align-self: flex-end; text-align: left; }
.faq-c1 { background: var(--accent-soft); border-color: #f3bcbc; }
.faq-c2 { background: var(--teal-soft); border-color: var(--line-strong); }
.faq-c3 { background: var(--gold-soft); border-color: #f0d9a8; }

.section-title { font-family: 'Gilroy'; font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--ink); margin-bottom: 4px; padding-left: 18px; }

/* the one intentional dark block — final summary anchor */
.footer-note { margin: 0; }
.footer-note h2 { color: var(--ink); margin-bottom: 16px; }
.footer-note p { margin-bottom: 0; color: var(--ink-soft); line-height: 1.65; }