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; }
.content > .sidebar {
  align-self: flex-start;
  height: 530px;
}
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 — new light card system
   Background/game palette (lined paper) is untouched below.
   Everything else (blocks, cards, headers) is redrawn here.
   ========================================================= */
:root {
  --ink: #223247;          /* headings / body text on light surfaces */
  --ink-soft: #4d6072;     /* secondary / muted text on light surfaces */
  --card: #fbfaf7;         /* primary card surface, warm ivory */
  --card-mint: #eef7f6;    /* secondary card surface, pale mint */
  --line: #cfe3e2;         /* default hairline border */
  --line-strong: #9fc7c2;  /* emphasized border, hover */

  --accent: #FF4C00;       /* brand orange — CTA / primary highlight, unchanged from old palette */
  --accent-soft: #ffe4d6;
  --accent-ink: #8a2c00;
  --accent-muted: #e2622e; /* softened coral-orange — for decorative use (bars, icons, links) so it doesn't compete with CTAs */

  --teal: #0f8a7a;         /* secondary accent — info / links */
  --teal-soft: #d9f0ec;
  --teal-ink: #0a5b50;

  --gold: #f2a32c;         /* tertiary accent — badges / tips */
  --gold-soft: #fdecd0;
  --gold-ink: #8a5c0c;

  --dark: #22303f;         /* single dark anchor, used sparingly (footer) */
  --dark-soft: #bcd3d0;

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 14px 30px rgba(15, 60, 60, .10);
  --shadow-card-sm: 0 8px 18px rgba(15, 60, 60, .08);
  --shadow-card-xs: 0 4px 10px rgba(15, 60, 60, .06);
}

body {
  font-family: "Gilroy", sans-serif;
  font-style: normal;
  font-weight: normal;
  color: var(--ink);
  letter-spacing: normal;
  font-size: 16px;
  /* page background kept exactly as before — this is the game's own style */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 100%), repeating-linear-gradient(0deg, #daf3f8 0px, #daf3f8 24px, #c4e0e4 24px, #c4e0e4 48px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; }

h1, .h1 { font-size: 34px; font-weight: bold; color: var(--ink); margin-bottom: 20px; }
h2, .h2 { font-size: 24px; font-weight: bold; color: var(--ink); }
h3, .h3 { font-size: 20px; 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: 25px;
  color: var(--ink);
  font-weight: 700;
  position: relative; }

.flex-auto { flex: auto; }

.icon-all_games { display: block; width: 60px; height: 60px; background: url("../img/AllGame.png") 0 0 no-repeat; margin-right: 5px; }
.icon-popular { display: inline-block; width: 60px; height: 60px; background: url("../img/Popular.png") 0 0 no-repeat; margin-right: 5px; }
.icon-best_games { display: inline-block; width: 60px; height: 60px; background: url("../img/BestGames.png") 0 0 no-repeat; margin-right: 5px; }
.icon-top10 { display: inline-block; width: 60px; height: 60px; background: url("../img/Top10.png") 0 0 no-repeat; 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: 24px; height: 24px; background: url("../img/icon-loupe.svg") 0 0 no-repeat; }
.icon-arrow-prev { display: block; width: 24px; height: 24px; background: url("../img/icon-arrow-prev.svg") 0 0 no-repeat; }
.icon-arrow-next { display: block; width: 22px; height: 23px; 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: 60px; height: 60px; border-radius: 50%; outline: 0;
  background: var(--card); border: 1.5px solid var(--line); }
  .btn-search:hover { border-color: var(--accent); }
  .btn-search.active, .btn-search:active { background: var(--accent-soft); border-color: var(--accent); }

.btn-play {
  display: flex; align-items: center; justify-content: center;
  width: 125px; height: 58px; border-radius: 30px; outline: 0;
  background: var(--accent); color: #fff; }
  .btn-play:hover { background: #e04400; }
  .btn-play:active { background: #c93b00; }
  .btn-play span { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 900; text-transform: uppercase; }

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

.page { width: 100%; }

/* ===================== HEADER — now a bordered light card, not an image ===================== */
.header {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--card-mint) 100%);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin: 20px auto 30px;
  max-width: 1200px;
  height: auto;
  padding: 18px 0; }
  .header .wrapper {
    position: relative;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 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: 22px; font-weight: 800; color: var(--ink); }
.logo img { display: block; }

.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: 12px; 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: var(--card);
      border: 1.5px solid var(--line);
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
      .menu ul li a {
        display: flex; justify-content: center; align-items: center;
        width: 100%; height: 100%; flex-direction: column;
        padding: 14px 18px; }
        .menu ul li a span {
          font-family: 'Gilroy Bold', sans-serif;
          font-size: 15px; font-weight: 700; font-style: normal;
          text-align: center; line-height: 1.15; color: var(--ink-soft); }
      .menu ul li:hover, .menu .current-menu-item {
        border-color: var(--accent);
        box-shadow: var(--shadow-card-sm);
        transform: translateY(-3px); }
      .menu ul li:hover span, .menu .current-menu-item span { color: var(--accent-ink); }

.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 ===================== */
.sidebar {
  width: 100%; margin-bottom: 0; margin-right: 40px;
  flex: 1 1 auto;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-card);
  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: 56px;
    background: linear-gradient(180deg, #ffffff 0%, var(--card-mint) 100%);
    border-bottom: 1.5px 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; position: absolute; left: -60px; top: -10px; }
.free_games { display: inline-block; width: 60px; height: 60px; background: url(../img/FreeGames.png) 0 0 no-repeat; position: absolute; left: 3px; top: -10px; }

.main {
  width: 100%; margin-bottom: 30px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-card); }
  .main__head, .main_head {
    position: relative;
    display: flex; justify-content: space-around; align-items: center;
    padding: 0 32px; height: 78px;
    background: linear-gradient(180deg, #ffffff 0%, var(--card-mint) 100%);
    border-bottom: 1.5px 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(34, 48, 63, .85) 0%, rgba(34, 48, 63, .62) 60%, rgba(34, 48, 63, 0) 100%);
  border: none; border-radius: 0 0 16px 16px;
  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; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease; }
.best-games__list .title_recommend { opacity: 0; }
.game_item:hover .title_recommend { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
.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; transform: translateY(0) rotate(1.5deg); }

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

.game-offer__content {
  background: var(--card-mint);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-sm);
  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: 32px; 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: 26px; 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: 20px; 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-muted); }
  .game-offer__content a:hover { text-decoration: none; color: var(--teal); }

/* 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(--teal);
  font-size: 15px;
  line-height: 1.65; }
.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-muted);
  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 10px;
  margin: 20px 0; }
  .game-offer__content table thead th,
  .game-offer__content table th {
    text-align: left;
    font-family: 'Gilroy Bold';
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--teal-ink);
    background: var(--teal-soft);
    padding: 12px 18px; }
    .game-offer__content table thead th:first-child,
    .game-offer__content table th:first-child { border-radius: 12px 0 0 12px; }
    .game-offer__content table thead th:last-child,
    .game-offer__content table th:last-child { border-radius: 0 12px 12px 0; }
  .game-offer__content table tbody tr td,
  .game-offer__content table td {
    background: var(--card);
    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: 14px 0 0 14px; font-family: 'Gilroy Bold'; font-weight: 700; color: var(--accent-muted); white-space: nowrap; }
    .game-offer__content table tbody tr td:last-child,
    .game-offer__content table td:last-child { border-radius: 0 14px 14px 0; }

/* ===================== BEST GAMES / VOTED / RECOMMENDED — light cards, not solid teal fills ===================== */
.best-games {
  background: var(--card-mint);
  border: 1.5px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .best-games__list li {
    margin-bottom: 28px; text-align: center; max-width: 160px;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 20px; padding: 5px;
    transition: transform .2s ease, border-color .2s ease; }
  .best-games__list li:hover { transform: translateY(-4px) rotate(-1.5deg); border-color: var(--accent); }
  .best-games__list li span {
    font-family: 'Gilroy Bold'; font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px;
    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: 28px 0; }
.best-games__list img { width: 157px; aspect-ratio: 1 / 1; object-fit: cover; border: none; border-radius: 16px; box-shadow: var(--shadow-card-sm); transition: transform .2s ease, box-shadow .2s ease; }
.game_item img { transform-origin: 50% 100%; }
.game_item:hover img { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 14px 26px rgba(255, 76, 0, 0.25); }

/* 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: 14px 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: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-sm); }
  .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: 10px; }
  .vouted-games__list li:last-child { margin-bottom: 0; }

.recommended-games {
  padding: 20px 30px;
  background: var(--card-mint);
  border: 1.5px 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: 16px; width: 115px; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: var(--shadow-card-sm); transform-origin: 50% 100%; transition: transform .2s ease; }
    .item:hover .recommended-games__thumb img { transform: translateY(-3px) rotate(1.5deg); }
  .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: 50px; height: 50px;
    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(--accent); }
  .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(--gold); }
      .recommended-games .slick-dots li.slick-active { width: 10px; height: 10px; background: var(--accent); }

/* ===================== CATALOG / GALLERY / GAME CARD ===================== */
.catalog { margin-bottom: 30px; }
  .catalog__title {
    font-family: 'Gilroy'; font-style: normal; font-weight: 700;
    margin-bottom: 40px; font-size: 30px; line-height: 48px; letter-spacing: -0.02em;
    position: relative; color: var(--ink); padding-left: 80px; }
  .catalog__list { display: flex; justify-content: space-between; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }

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

.game-card {
  position: relative; padding: 0; width: 100%; max-width: 198px; height: 238px; margin: 24px;
  overflow: hidden; background: var(--card); border: 1.5px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-card-sm); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-align: center; }
  .game-card:hover { transform: translateY(-5px) rotate(-1.5deg); border-color: var(--accent-muted); box-shadow: 0 16px 30px rgba(226, 98, 46, .16); }
  .game-card .thumb { max-width: 178px; height: 178px; margin: 10px auto; }
  .catalog.related_posts .game-card { margin: 15px; }
    .game-card .thumb img { border-radius: 16px; width: 100%; }
  .game-card .name { text-align: center; padding: 0 10px; }
    .game-card .name a { display: block; font-size: 18px; font-weight: 700; font-family: 'Gilroy'; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--ink); }
  .game-card:hover .name a { color: var(--accent-muted); }

.game-offer {
  background: var(--card-mint);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-sm);
  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: 15px; }
  .game-offer__comments {
    position: relative; max-width: 830px; width: 100%;
    background: var(--card); border: 1.5px solid var(--line);
    padding: 30px; border-radius: var(--radius-md); margin-bottom: 30px;
    color: var(--ink); }
  .game-offer__comments.standalone {
    max-width: none;
    box-shadow: var(--shadow-card); }
  .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: 1.5px solid var(--line); border-bottom: none;
      border-radius: var(--radius-md) var(--radius-md) 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: 26px; line-height: 26px; letter-spacing: -0.02em; color: var(--ink); }
        .game_title img { width: 55px; margin-right: 10px; }
        .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: 30px; background: var(--card-mint); padding: 4px 5px; width: 92px; height: 50px; }
          .game-offer__window__top .ratings .likes-rating .rating-like {
            display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;
            border-top: 3px solid var(--teal-soft); border-bottom: 3px solid var(--gold-soft);
            background: linear-gradient(0deg, var(--teal) 0%, var(--teal-soft) 100%); }
            .game-offer__window__top .ratings .likes-rating .rating-like:hover { background: linear-gradient(0deg, var(--teal-ink) 0%, var(--teal) 100%); }
			.game-offer__window__top .ratings .likes-rating .rating-like.active, .game-offer__window__top .ratings .likes-rating .rating-like:active {
              background: linear-gradient(180deg, var(--teal) 0%, var(--teal-soft) 100%); }
            .game-offer__window__top .ratings .likes-rating .rating-like:first-child { border-bottom-left-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; }
            .game-offer__window__top .ratings .likes-rating .rating-like:last-child { border-bottom-left-radius: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 20px; border-top-right-radius: 20px; }
      .game-offer__window__top .views { display: flex; align-items: center; color: var(--teal); }
        .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: 1.5px solid var(--line); border-top: none;
      border-radius: 0 0 var(--radius-md) var(--radius-md); }
      .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 light system */
.border-block {
  padding: 40px 10px; border-radius: 20px; text-align: center; margin-bottom: 28px;
  box-shadow: var(--shadow-card-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%), var(--card-mint);
  border: 1.5px 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: linear-gradient(180deg, #ffffff 0%, var(--card-mint) 100%);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  display: block; padding: 34px 28px; margin: 0; }
  .main__content.top_text h1, .main_content.top_text h1 { font-family: 'Gilroy'; font-style: normal; font-weight: 700; font-size: 32px; 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-muted); }
  .main__content.top_text a:hover, .main_content.top_text a:hover { text-decoration: none; color: var(--teal); }

.game-day__image { max-width: 185px; width: 100%; margin-right: 20px; }
  .game-day__image img { border-radius: 20px; }
.game-day__title { font-size: 28px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.game-day__views { display: flex; align-items: center; color: var(--teal); }
  .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: 1.5px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-card-sm);
  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(--teal-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: 26px; 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: #f6c6a8; }
.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(--teal);
  font-size: 15px;
  line-height: 1.65; }
/* 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-muted);
  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 10px;
  margin: 20px 0; }
  .block-text table thead th,
  .block-text table th {
    text-align: left;
    font-family: 'Gilroy Bold';
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--teal-ink);
    background: var(--teal-soft);
    padding: 12px 18px; }
    .block-text table thead th:first-child,
    .block-text table th:first-child { border-radius: 12px 0 0 12px; }
    .block-text table thead th:last-child,
    .block-text table th:last-child { border-radius: 0 12px 12px 0; }
  .block-text table tbody tr td,
  .block-text table td {
    background: var(--card-mint);
    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: 14px 0 0 14px; font-family: 'Gilroy Bold'; font-weight: 700; color: var(--accent-muted); white-space: nowrap; }
    .block-text table tbody tr td:last-child,
    .block-text table td:last-child { border-radius: 0 14px 14px 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(--teal);
  font-size: 15px;
  line-height: 1.65; }
.mypoint.dark { color: var(--ink-soft); }
.mypoint.dark li::before { color: var(--teal); }
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; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; }
  .pagination li {
    position: relative; display: flex; justify-content: center; align-items: center;
    width: 50px; height: 50px; margin-right: 10px;
    background: var(--accent); border: none;
    box-shadow: 0 8px 16px rgba(255, 76, 0, 0.25);
    border-radius: 16px; transition: transform .15s ease, box-shadow .15s ease; }
  .pagination li:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(255, 76, 0, 0.35); }
    .pagination li a {
      display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
      background: rgba(255, 255, 255, 0.18); box-shadow: none; border-radius: 10px; color: #fff;
      font-family: 'Gilroy Bold'; font-style: normal; font-weight: 800; font-size: 24px; line-height: 16px; }
     .pagination li a:hover { background: rgba(255, 255, 255, 0.32); box-shadow: none; }
      .pagination li.current { color: #fff; font-family: 'Gilroy Bold'; font-style: normal; font-weight: 800; font-size: 24px; line-height: 16px; background: var(--accent-muted); border: none; box-shadow: 0 8px 16px rgba(255, 76, 0, 0.25); border-radius: 16px; }
      .pagination li a::before { content: ''; top: 0; bottom: 0; left: 0; right: 0; }

.footer-copyright img { height: 57px; }
.footer a { text-decoration: underline; color: var(--teal-ink); }
.footer a:hover { text-decoration: none; color: var(--accent-muted); }
.footer {
  background: linear-gradient(180deg, #ffffff 0%, var(--card-mint) 100%);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin: 0 auto 30px;
  max-width: 1200px;
  padding: 0 20px; }
  .footer-flex { display: flex; align-items: center; justify-content: space-between; height: 80px; }
  .footer-menu ul { list-style: none; margin: 0; padding: 0; }
  .footer-menu { font-family: 'Gilroy'; font-style: normal; font-weight: 600; font-size: 20px; line-height: 32px; text-align: right; letter-spacing: -0.02em; color: var(--ink-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: 2px solid var(--line); border-radius: 10px; width: 50px; }
ul.list_category li { width: 125px; display: flex; align-items: center; float: left; background: var(--card); border-radius: 10px; 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: 40px; line-height: 44px; 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; position: absolute; left: 5px; top: 15px; }

/* "Best Games" block (related_posts) — the title used to be a flex item
   taking up space only on row 1, so every wrapped row after it started
   back at the container's left edge instead of lining up under the
   first row of cards. Pulling the title out of the flex flow and
   reserving that same width as padding makes every row — including the
   second — start at the same X as the cards in row 1. */
.catalog.related_posts .catalog__list {
  position: relative;
  justify-content: flex-end; /* pack every row — including the wrapped bottom row — against the right edge */
  padding-left: 316px; /* keeps cards clear of the absolutely-positioned title on the left */
}
.catalog.related_posts .related__title {
  position: absolute;
  left: 0;
  margin-right: 0; }


/* =========================================================
   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: var(--shadow-card-sm); }

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

.article-section {
  padding-top: 34px; margin-top: 34px; border-top: 1.5px 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: 22px;
  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: 5px;
  background: var(--accent-muted); border-radius: 3px; }
.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: 1.5px solid var(--line-strong);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-xs);
  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: 38px; height: 38px; background: var(--accent-muted);
  border-radius: 12px; color: #fff; font-family: 'Gilroy Bold'; font-weight: 800; font-size: 16px; }
.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: 1.5px solid #f0d9a8;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  max-width: 260px;
  box-shadow: var(--shadow-card-xs);
  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 10px; margin: 20px 0; }
.styled-table thead th {
  text-align: left; font-family: 'Gilroy Bold'; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal-ink); background: var(--teal-soft); padding: 12px 18px; }
.styled-table thead th:first-child { border-radius: 12px 0 0 12px; }
.styled-table thead th:last-child { border-radius: 0 12px 12px 0; }
.styled-table tbody tr td { background: var(--card-mint); 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: 14px 0 0 14px; font-family: 'Gilroy Bold'; font-weight: 700; color: var(--accent-muted); white-space: nowrap; }
.styled-table tbody tr td:last-child { border-radius: 0 14px 14px 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: 1.5px solid var(--line); }
.faq-item h3 { font-size: 17px; 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: #f6c6a8; }
.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: 22px; 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; }