/* =====================================================================
   GamesZolo — itch.io colour skin (loaded LAST, after zolo.css).
   Layout / grid stay exactly as in the theme. Only colours, fonts,
   corners and shadows change: white page, grey #f4f4f4 rail, dark ink,
   coral accent like itch.io, Lato everywhere, small 3–4px corners.
   Accent in one place: --it-accent / --it-link.
   ===================================================================== */
:root {
  --it-accent: #fa5c5c;
  --it-accent-2: #ff7676;
  --it-link: #c93030;
  --it-ink: #222;
  --it-ink-2: #434343;
  --it-muted: #6b6b6b;
  --it-line: #dadada;
  --it-line-2: #e9e9e9;
  --it-bg: #fff;
  --it-side: #f4f4f4;
  --it-card: #f4f4f4;
  --it-band: #545454;
  --it-r: 4px;

  --f-display: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* theme variables re-pointed to the light palette */
  --zl-bg: #fff;
  --zl-panel: #fff;
  --zl-card: #f4f4f4;
  --zl-card-2: #e9e9e9;
  --zl-line: #e3e3e3;
  --zl-vi: var(--it-accent);
  --zl-vi-2: var(--it-ink-2);
  --zl-vi-3: var(--it-link);
  --zl-lime: var(--it-ink);
  --zl-lime-2: var(--it-ink);
  --zl-hot: var(--it-accent);
  --zl-top: #ffc83d;
  --zl-r: var(--it-r);

  --sgh-bg: #fff;
  --sgh-panel: #fff;
  --sgh-card: #f4f4f4;
  --sgh-card-2: #e9e9e9;
  --sgh-line: #e3e3e3;
  --sgh-line-2: #dadada;
  --sgh-ink: var(--it-ink);
  --sgh-ink-2: var(--it-ink-2);
  --sgh-muted: var(--it-muted);
  --sgh-or: var(--it-accent);
  --sgh-or-2: var(--it-accent-2);
  --sgh-r: var(--it-r);
  --gz-grad: var(--it-accent);
  --gz-glow: none;
  --gz-ring: 0 0 0 2px var(--it-ink);
}

::selection { background: rgba(250, 92, 92, .25); color: var(--it-ink); }
html, body.sgh { background: var(--it-bg); }
body.sgh { color: var(--it-ink-2); font-family: var(--f-body); }
.sgh, .sgh h1, .sgh h2, .sgh h3, .sgh h4, .sgh button, .sgh input { font-family: var(--f-body); }
* { scrollbar-color: #c8c8c8 transparent; }
.sgh-skip { background: var(--it-ink); color: #fff; }
.sgh a { color: inherit; }

/* ---------------------------------------------------------------- logo */
.sgh-logo__mark { width: 40px; height: 40px; border-radius: 10px; filter: none; }
.sgh-logo__mark svg, .sgh-logo__mark img { width: 40px; height: 40px; border-radius: 10px; }
.sgh-logo:hover .sgh-logo__mark { transform: none; }
.sgh-logo__text, .sgh-logo:hover .sgh-logo__text {
  height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--it-ink); font: 900 24px/1 var(--f-display); letter-spacing: -.02em;
}
.sgh-logo__text b { color: var(--it-accent); }
.sgh-logo--footer .sgh-logo__text { height: auto; padding: 0; font-size: 19px; }

/* -------------------------------------------------------------- header */
.sgh-top {
  background: #fff; border-bottom: 1px solid var(--it-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.gpl-menu > li > a {
  height: 38px; padding: 0 12px; border-radius: var(--it-r);
  background: none; color: var(--it-ink); font: 700 15px/1 var(--f-display);
}
.gpl-menu > li:hover > a, .gpl-menu > li:focus-within > a { background: var(--it-side); color: var(--it-ink); }
.gpl-menu > li > a svg, .gpl-menu > li > a::after { color: var(--it-muted); border-color: var(--it-muted); }
.gpl-menu .sub-menu {
  background: #fff; border: 1px solid var(--it-line); border-radius: var(--it-r);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}
.gpl-menu .sub-menu a { border-radius: 0; color: var(--it-ink-2); font-weight: 400; }
.gpl-menu .sub-menu a:hover { background: var(--it-side); color: var(--it-ink); }

.sgh .sgh-search input {
  height: 36px; line-height: 36px; padding: 0 14px 0 38px; border-radius: var(--it-r);
  background: var(--it-side); border: 1px solid var(--it-line-2); color: var(--it-ink); font-size: 14px;
}
.sgh .sgh-search input:hover { background: #efefef; border-color: var(--it-line); }
.sgh .sgh-search input:focus { background: #fff; border-color: var(--it-muted); box-shadow: none; }
.sgh .sgh-search input::placeholder { color: var(--it-muted); }
.sgh-search__ico { left: 13px; width: 16px; height: 16px; color: var(--it-muted); }

.sgh-btn { border-radius: var(--it-r); font-family: var(--f-display); font-weight: 700; }
.sgh-btn--ghost, .sgh-favlink, .sgh-btn--ghost:hover, .sgh-favlink:hover {
  background: #fff; border: 1px solid var(--it-line); color: var(--it-ink-2); box-shadow: none;
}
.sgh-btn--ghost:hover, .sgh-favlink:hover { border-color: var(--it-muted); color: var(--it-ink); }
.sgh-top .sgh-random, .sgh-top .sgh-random:hover {
  height: 36px; padding: 0 14px; border-radius: var(--it-r);
  background: var(--it-accent); color: #fff; border: 0; box-shadow: none; transform: none;
}
.sgh-top .sgh-random:hover { background: var(--it-accent-2); }
.sgh-favlink { width: 36px; height: 36px; border-radius: var(--it-r); }
.sgh-favlink:hover { color: var(--it-accent); }
.sgh-favlink__count { background: var(--it-accent); color: #fff; }
.sgh-burger { background: none; border: 0; border-radius: var(--it-r); color: var(--it-ink); }
.sgh-burger:hover { background: var(--it-side); }

/* ------------------------------------------------------------- sidebar */
.sgh-side, .sgh-side:hover { background: var(--it-side); border-right: 1px solid var(--it-line-2); box-shadow: none; }
.sgh-side__cap { color: var(--it-ink-2); font: 900 13px/1.2 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.sgh-side__item { color: var(--it-ink-2); border-radius: var(--it-r); font: 400 14.5px/1.3 var(--f-body); }
.sgh-side__item:hover { background: #e9e9e9; color: var(--it-ink); }
.sgh-side__item.is-active, .sgh-side__item.is-active:hover { background: #fff; box-shadow: inset 3px 0 0 var(--it-accent); color: var(--it-ink); font-weight: 700; }
.sgh-side__item em { color: var(--it-muted); font-weight: 400; }
.sgh-ico { background: #fff; border-radius: var(--it-r); color: var(--it-ink-2); }
.sgh-ico.zl-ico { background: none; color: var(--it-ink-2); }
.sgh-side__item:hover .zl-ico, .sgh-side__item.is-active .zl-ico { color: var(--it-accent); }
.sgh-ico--img { background: #fff; border-radius: var(--it-r); }
.sgh-scrim { background: rgba(0, 0, 0, .3); }

/* ----------------------------------------------------- section headings */
.sgh .sgh-sec__title, .sgh .games_block .catalog__title.zl-sec__title,
.sgh .games_block .catalog__title .zl-sec__txt {
  color: var(--it-ink); font: 700 22px/1.2 var(--f-display); letter-spacing: -.01em;
}
.sgh-sec__icon, .zl-sec__title .sgh-sec__icon, .sgh .games_block .catalog__title .sgh-sec__icon { color: var(--it-accent); }
.sgh-sec__icon .zl-i { width: 24px; height: 24px; }
.zl-sec__more, .sgh .games_block .catalog__title .zl-sec__more { color: var(--it-muted); font: 400 13.5px/1.2 var(--f-body); }
a.zl-sec__more { color: var(--it-link); }
a.zl-sec__more:hover { color: var(--it-accent); text-decoration: underline; }
.sgh-arrow, .sgh-arrow:hover:not(:disabled) {
  width: 34px; height: 34px; border-radius: var(--it-r); background: #fff; border: 1px solid var(--it-line); color: var(--it-ink-2);
}
.sgh-arrow:hover:not(:disabled) { background: #fff; border-color: var(--it-ink); color: var(--it-ink); }
.sgh-arrow:disabled { opacity: .35; }

/* ---------------------------------------------------------- game tiles */
.zl-gt__media, .sgh-gt--big .zl-gt__media, .sgh .game-card__thumb, #popular .game-card__thumb {
  border-radius: var(--it-r); background: var(--it-card);
}
.sgh-gt:hover .zl-gt__media, .sgh .catalog__list:hover .game-card__thumb {
  transform: none; box-shadow: 0 0 0 2px var(--it-ink);
}
.sgh-gt:hover .sgh-gt__img, .sgh-gt:hover .sgh-gt__art, .sgh .catalog__list:hover .game-card__thumb img { transform: scale(1.03); }
.sgh-gt__name, .sgh-gt--big .sgh-gt__name, .sgh-gt:hover .sgh-gt__name,
.sgh .game-card__name a, .sgh .catalog__list:hover .game-card__name a {
  color: var(--it-ink); font-family: var(--f-display); font-weight: 700;
}
.sgh-gt__name, .sgh .game-card__name a { font-size: 14.5px; }
.sgh-gt--big .sgh-gt__name { font-size: 17px; font-weight: 900; }
.sgh .catalog__list:hover .game-card__name a, .sgh-gt:hover .sgh-gt__name { text-decoration: underline; }

/* badges: flat, small, itch-like */
.sgh-gt__badge, .sgh-gt__badge.is-new, .sgh-gt__badge.is-hot, .sgh-gt__badge.is-trending, .sgh-gt--big .sgh-gt__badge,
.sgh-lead__meta b, .sgh-lead__meta b.is-hot, .sgh-lead__meta b.is-new, .sgh-lead__meta b.is-trend, .sgh-lead__meta b.is-top {
  height: 20px; padding: 0 6px; border-radius: 2px; box-shadow: none;
  font: 900 11px/1 var(--f-display); letter-spacing: .04em; background: var(--it-accent); color: #fff;
}
.sgh-gt__badge.is-new, .sgh-lead__meta b.is-new { background: #fff; color: var(--it-ink); }
.sgh-gt__badge.is-trending, .sgh-lead__meta b.is-trend { background: var(--it-ink); color: #fff; font-size: 0; }
.sgh-gt__badge.is-hot::before, .sgh-lead__meta b.is-hot::before { width: 10px; height: 10px; }
.sgh-gt__rate, .sgh-gt--big .sgh-gt__rate { height: 20px; border-radius: 2px; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ♥ on cards */
.sgh-heart { background: rgba(255, 255, 255, .92); color: var(--it-ink-2); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.sgh-heart:hover, .sgh-heart.is-on { color: var(--it-accent); }

/* "Most Loved" posters (#popular) */
#popular .game-card::before { border-radius: 2px; height: 22px; padding: 0 7px; background: var(--it-ink); color: #fff; font: 900 12px/1 var(--f-display); }
#popular .catalog__list:nth-child(-n+3) .game-card::before { background: var(--it-accent); color: #fff; }
#popular .catalog__list:hover .game-card::before, #popular .catalog__list:hover .game_body { transform: none; }
#popular .game-card__name a, #popular .catalog__list:hover .game-card__name a { color: #fff; text-decoration: none; }

/* "Jump back in" */
.sgh-recent, .sgh-my { background: #fff; border: 1px solid var(--it-line); border-radius: var(--it-r); }
.sgh-recent__ico { color: var(--it-accent); }
.sgh-recent__title { color: var(--it-ink); font-family: var(--f-display); }
.sgh-recent__switch { color: var(--it-link); }
.sgh-recent__switch:hover { color: var(--it-accent); }
.sgh-recent__item img { border-radius: var(--it-r); }

/* tabs */
.sgh-tab, .sgh-tab:hover {
  height: 34px; padding: 0 14px; border-radius: var(--it-r); border: 1px solid var(--it-line);
  background: #fff; color: var(--it-ink-2); font: 700 14px/1 var(--f-display);
}
.sgh-tab:hover { border-color: var(--it-ink); color: var(--it-ink); }
.sgh-tab.is-on, .sgh-tab.is-on:hover { background: var(--it-ink); border-color: var(--it-ink); color: #fff; }

/* pagination */
.sgh .pagination li a, .sgh .pagination li span {
  min-width: 36px; height: 36px; border-radius: var(--it-r); background: #fff; border: 1px solid var(--it-line);
  color: var(--it-ink-2); font: 700 14px/1 var(--f-display);
}
.sgh .pagination li a:hover { background: #fff; border-color: var(--it-ink); color: var(--it-ink); }
.sgh .pagination li.current a, .sgh .pagination li span.current, .sgh .pagination span.current, .sgh .pagination li.current span, .sgh .pagination li.active a {
  background: var(--it-ink) !important; border-color: var(--it-ink); color: #fff;
}

/* genre chips (home bottom) */
.sgh-genres a, .sgh .game_description ul.sgh-genres a {
  height: 38px; padding: 0 12px 0 8px; border-radius: var(--it-r); background: #fff; border: 1px solid var(--it-line);
  color: var(--it-ink-2); font: 700 14px/1 var(--f-display);
}
.sgh-genres a:hover, .sgh .game_description ul.sgh-genres a:hover { background: #fff; border-color: var(--it-ink); box-shadow: none; color: var(--it-ink); }
.sgh-genres .sgh-ico.zl-ico { color: var(--it-accent); }
.sgh-genres em { color: var(--it-muted); background: var(--it-side); border-radius: 2px; }

/* ------------------------------------------------- content panels and text */
.sgh-text .game_description, .main.category .seo_block, .sgh-card,
.content--wide > .catalog > .catalog__description.game_description {
  background: #fff; border: 1px solid var(--it-line-2); border-radius: var(--it-r); box-shadow: none;
}
.game_description, .page_description, .seo_text, .catalog__description { color: var(--it-ink-2); }
.game_description h1, .game_description h2, .game_description h3, .game_description h4,
.page_description h2, .page_description h3, .seo_text h2, .seo_text h3, .seo_block h2,
.sgh h1, .sgh .main h1, .category_name, .sgh-info__title, .sgh-reviews__title, .sgh .sgh-lead__title {
  color: var(--it-ink); font-family: var(--f-display);
}
.sgh-text .game_description h2::before, .main.category .seo_block .page_description h2::before,
.content--wide .catalog__description h2::before { background: var(--it-accent); border-radius: 2px; }
.sgh-text .game_description a, .game_description li a, .page_description a, .seo_text a, .catalog__description a, .game_description p a {
  color: var(--it-link); text-decoration-color: rgba(216, 59, 59, .35);
}
.sgh-text .game_description a:hover, .game_description li a:hover, .page_description a:hover, .catalog__description a:hover, .game_description p a:hover { color: var(--it-accent); }
.game_description ul > li::marker, .page_description ul > li::marker { color: var(--it-accent); }
.game_description ol > li, .page_description ol > li, .seo_text ol > li { background: var(--it-side); border-radius: var(--it-r); color: var(--it-ink-2); }
.game_description ol > li::before, .page_description ol > li::before, .seo_text ol > li::before,
.game_description ol > li:nth-child(3n+2)::before, .page_description ol > li:nth-child(3n+2)::before,
.game_description ol > li:nth-child(3n)::before, .page_description ol > li:nth-child(3n)::before {
  background: var(--it-ink); color: #fff; border-radius: 2px;
}
.game_description table, .page_description table { background: #fff; border: 1px solid var(--it-line-2); border-radius: var(--it-r); }
.game_description th, .page_description th { background: var(--it-side); color: var(--it-ink); }
.game_description td, .page_description td { border-bottom-color: var(--it-line-2); color: var(--it-ink-2); }
.game_description tr td:first-child { color: var(--it-ink); font-weight: 700; }
.sgh-toc { background: var(--it-side); border-radius: var(--it-r); }
.sgh-text .game_description .sgh-toc__title { color: var(--it-ink); }
.sgh-text .game_description .sgh-toc a::before { color: var(--it-accent); }
.sgh-text .game_description .sgh-toc a:hover { color: var(--it-link); }
.game_description blockquote, .page_description blockquote { background: var(--it-side); border-radius: var(--it-r); color: var(--it-ink-2); }
.game_description blockquote::before, .page_description blockquote::before { background: var(--it-accent); border-radius: 2px; }
.game_description .pp-quote, .page_description .pp-quote { background: var(--it-side); border-radius: var(--it-r); color: var(--it-ink-2); }
.game_description .pp-quote::before, .page_description .pp-quote::before { color: var(--it-accent); }
.game_description .pp-tip, .page_description .pp-tip { background: #fff6f6; box-shadow: inset 0 0 0 1px rgba(250, 92, 92, .3); border-radius: var(--it-r); color: var(--it-ink-2); }
.game_description .pp-tip b:first-child, .page_description .pp-tip b:first-child { background: var(--it-accent); color: #fff; border-radius: 2px; }
.sgh-text .game_description .pp-controls li { background: var(--it-side); border-radius: var(--it-r); }
.sgh-text .game_description .pp-controls li b { background: #fff; color: var(--it-ink); border: 1px solid var(--it-line); border-radius: 3px; }
.sgh-text .pp-faq-item, .pp-faq-item { background: var(--it-side); border-radius: var(--it-r); box-shadow: inset 3px 0 0 var(--it-accent); color: var(--it-ink-2); }
.sgh-text .game_description .sgh-outro, .sgh-text .callout { background: var(--it-side); border-radius: var(--it-r); }
.sgh-text .callout::before { background: var(--it-accent); }
.sgh-text .callout .play-btn, .sgh-text .callout .play-btn:hover { background: var(--it-accent); color: #fff; border-radius: var(--it-r); }
.sgh-descr .game_description .sgh-more { background: var(--it-side); border-radius: var(--it-r); }
.sgh-more__list a, .sgh-more__list b { color: var(--it-ink); }
.sgh-more__list small { color: var(--it-muted); }
.guide-card { background: #fff; border: 1px solid var(--it-line); border-radius: var(--it-r); }
.guide-card:hover { box-shadow: 0 0 0 1px var(--it-ink); border-color: var(--it-ink); }
.guide-card__title { color: var(--it-ink); }
.guide-card__excerpt { color: var(--it-ink-2); }
.guide-card__link { color: var(--it-link); }
.breadcrumb a, .sgh-info .breadcrumb a, .breadcrumbs a { color: var(--it-muted); }
.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--it-ink); }
.breadcrumb, .breadcrumbs, .breadcrumb span { color: var(--it-ink-2); }

/* ------------------------------------------------------------- game page */
.sgh-player .game-offer__window { background: #fff; border: 1px solid var(--it-line); border-radius: var(--it-r); overflow: hidden; }
.sgh-game .sgh-player .player-overlay { background: #2b2b2b; border-radius: 0; }
.sgh-player__bg { filter: blur(30px) brightness(.55); }
.sgh-game .sgh-player__cover img { width: 160px; height: 160px; border-radius: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, .45); }
.sgh-game .sgh-player__name { color: #fff; font: 900 clamp(22px, 2.4vw, 30px)/1.1 var(--f-display); }
.sgh-game #js-player-start.sgh-player__play, .sgh-game #js-player-start.sgh-player__play:hover {
  min-width: 240px; height: 52px; padding: 0 30px; border-radius: var(--it-r);
  background: var(--it-accent); color: #fff; font: 900 19px/1 var(--f-display);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25); transform: none;
}
.sgh-game #js-player-start.sgh-player__play:hover { background: var(--it-accent-2); transform: translateY(-1px); }

.sgh-game .sgh-bar { background: #fff; border-top: 1px solid var(--it-line); }
.zl-bar__icon { border-radius: var(--it-r); }
.sgh-bar__name { color: var(--it-ink); font: 900 16px/1.15 var(--f-display); }
.zl-bar__genre { color: var(--it-muted); font: 400 13px/1.2 var(--f-body); }
.zl-bar__genre:hover { color: var(--it-link); text-decoration: underline; }
.sgh-thumbs { height: 36px; background: #fff; border: 1px solid var(--it-line); border-radius: var(--it-r); }
.sgh-thumbs__sep { background: var(--it-line); }
.sgh-thumb { height: 34px; border-radius: 0; color: var(--it-ink-2); }
.sgh-thumb:hover { background: var(--it-side); color: var(--it-ink); }
.sgh-thumb--up.is-on, .sgh-thumb.is-on { color: var(--it-link); }
.sgh-game .sgh-ibtn.sgh-ibtn--icon, .sgh-game .sgh-ibtn.sgh-ibtn--icon:hover {
  width: 36px; height: 36px; border-radius: var(--it-r); background: #fff; border: 1px solid var(--it-line); color: var(--it-ink-2);
}
.sgh-game .sgh-ibtn.sgh-ibtn--icon:hover { border-color: var(--it-ink); color: var(--it-ink); }
.sgh-game .sgh-ibtn.sgh-ibtn--icon:has(.zl-ibtn__label) { padding: 0 13px 0 11px; }
.sgh-game .sgh-ibtn .zl-ibtn__label { font: 700 14px/1 var(--f-display); }
.sgh-game .sgh-favbtn.is-on { color: var(--it-accent); border-color: var(--it-accent); }
.sgh-game .sgh-ibtn.sgh-fs, .sgh-game .sgh-ibtn.sgh-fs:hover { background: var(--it-ink); border-color: var(--it-ink); color: #fff; }
.sgh-game .sgh-ibtn.sgh-fs:hover { background: #000; }

.sgh-game .block_adv.sgh-adv { background: #fff; border: 1px solid var(--it-line-2); border-radius: var(--it-r); }
.sgh-adv__label { color: var(--it-muted); }
.sgh .sgh-info__title { font: 900 clamp(26px, 2.6vw, 34px)/1.1 var(--f-display); color: var(--it-ink); }
.sgh-info__lead { color: var(--it-ink-2); }
.sgh-info__img, .sgh-info__img img { border-radius: var(--it-r); }
.sgh-statbar { background: var(--it-side); border: 0; border-radius: var(--it-r); }
.sgh-statbar b { color: var(--it-ink); font-weight: 900; }
.sgh-statbar small { color: var(--it-muted); }
.sgh-statbar b a { color: var(--it-link); }
.sgh-tags a { height: 32px; padding: 0 12px; background: #fff; border: 1px solid var(--it-line); border-radius: var(--it-r); font: 700 13.5px/1 var(--f-display); color: var(--it-ink-2); }
.sgh-tags a:hover { background: #fff; border-color: var(--it-ink); box-shadow: none; color: var(--it-ink); }
.sgh-tags em { color: var(--it-muted); }

/* right column "Top Played" */
.sgh .sgh-lead__title { color: var(--it-ink); font: 700 20px/1.1 var(--f-display); }
.sgh-lead__title .zl-i { color: var(--it-accent); }
.sgh-lead__card, .sgh-lead__img { border-radius: var(--it-r); }
.sgh-lead__img { background: var(--it-card); }
.sgh-lead__card:hover .sgh-lead__img { transform: none; box-shadow: 0 0 0 2px var(--it-ink); }
.sgh-lead__card:hover .sgh-lead__name, .sgh-lead__card:hover .sgh-lead__meta { transform: none; }

/* reviews */
.sgh-reviews, .block_review { background: transparent; }
.sgh-reviews__title { color: var(--it-ink); font-weight: 700; }

/* share popup */
.sgh-modal__box { background: #fff; color: var(--it-ink-2); border: 0; border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.sgh-modal__backdrop { background: rgba(0, 0, 0, .45); }
.sgh-modal__x { color: var(--it-muted); background: none; }
.sgh-share__head h3 { color: var(--it-ink); }
.sgh-share__head p, .sgh-share__label { color: var(--it-muted); }
.sgh-share__net { color: var(--it-ink-2); }
.sgh-share__copy input { background: #fff; border: 1px solid var(--it-line); color: var(--it-ink-2); border-radius: var(--it-r); }
.sgh-share__copybtn, .sgh-btn--play { background: var(--it-accent); color: #fff; border-radius: var(--it-r); box-shadow: none; }

/* ---------------------------------------------------------------- footer */
footer.footer { background: #fff; border-top: 1px solid var(--it-line-2); color: var(--it-muted); }
footer.footer::before { display: none; }
footer.footer .menu a { color: var(--it-ink-2); font-family: var(--f-body); font-weight: 400; }
footer.footer .menu a:hover { color: var(--it-ink); text-decoration: underline; }
footer.footer .copyright { color: var(--it-muted); }

@media (max-width: 900px) {
  .sgh-side { background: var(--it-side); box-shadow: 10px 0 30px rgba(0, 0, 0, .15); }
}
@media (max-width: 680px) {
  .sgh-logo__mark, .sgh-logo__mark svg, .sgh-logo__mark img { width: 34px; height: 34px; }
  .sgh-logo__text { font-size: 20px; height: auto; padding: 0; }
  .sgh .sgh-search input { height: 36px; line-height: 36px; }
  .sgh-top .sgh-random { height: 36px; padding: 0 10px; }
  .sgh-game #js-player-start.sgh-player__play { min-width: 190px; height: 46px; font-size: 17px; }
}

/* ---------------------------------------------------- fixes after audit */
.sgh-text, .game-offer__content.sgh-text { background: transparent; border: 0; box-shadow: none; }
.sgh .game_description p, .sgh .game_description li, .sgh .page_description p, .sgh .page_description li,
.sgh .seo_text p, .sgh .seo_text li, .sgh .catalog__description p, .sgh-text__intro { color: var(--it-ink-2); }
.game_description table, .page_description table { box-shadow: none; }
.sgh .pagination li, .sgh .pagination li.current, .sgh .pagination li.next, .sgh .pagination li.prev {
  background: none; border: 0; box-shadow: none;
}
.sgh .pagination li a, .sgh .pagination li span { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; line-height: 1; box-shadow: none; }
.sgh .pagination li a::after, .sgh .pagination li a::before { display: none; }
.breadcrumb li, .breadcrumb li[aria-hidden] { color: var(--it-muted); }
.breadcrumb li span, .breadcrumb span[aria-current] { color: var(--it-ink-2); }
.sgh-more__list a { color: var(--it-ink); background: #fff; border: 1px solid var(--it-line-2); border-radius: var(--it-r); }
.sgh-more__list a:hover { border-color: var(--it-ink); }
.sgh-more__list img { border-radius: 3px; }
.sgh-more__all a, .sgh .game_description .sgh-more__all a { color: var(--it-link); }
.sgh-card.sgh-lead { border: 0; }
.block_review .container, .sgh-reviews .reviews { background: #fff; border: 1px solid var(--it-line-2); border-radius: var(--it-r); box-shadow: none; }
.sgh-card, .sgh-info, .sgh-descr { border-radius: var(--it-r); }
footer.footer, footer.footer .menu, footer.footer nav { border-color: var(--it-line-2); }
footer.footer * { border-color: var(--it-line-2) !important; }
.sgh .breadcrumb a, .sgh .breadcrumb li a, .main.category .breadcrumb a { color: var(--it-muted); }
/* header: keep the search field usable next to the menu */
.sgh .sgh-search { min-width: 210px; flex: 1 1 260px; }
.gpl-menu > li > a { padding: 0 9px; font-size: 14.5px; }
@media (max-width: 1500px) { .gpl-menu > li > a { padding: 0 7px; font-size: 14px; } }
@media (max-width: 1600px) {
  .sgh-top .sgh-random { width: 36px; padding: 0; justify-content: center; }
  .sgh-top .sgh-random .sgh-random__label { display: none; }
}

/* =====================================================================
   v3.2 — Homepage "Vitrina" (showcase) + mirrored game page
   ===================================================================== */

/* game tile used across the showcase */
.zl-vt { min-width: 0; }
.zl-vt__media { position: relative; aspect-ratio: 5 / 4; border-radius: var(--it-r); overflow: hidden; background: var(--it-card); }
.zl-vt__media > a, .zl-vt__media img { display: block; width: 100%; height: 100%; }
.zl-vt__media img { object-fit: cover; transition: transform .25s ease; }
.zl-vt:hover .zl-vt__media { box-shadow: 0 0 0 2px var(--it-ink); }
.zl-vt:hover .zl-vt__media img { transform: scale(1.04); }
.zl-vt__badge {
  position: absolute; top: 8px; left: 8px; z-index: 2; height: 20px; padding: 0 6px; border-radius: 2px;
  background: var(--it-accent); color: #fff; font: 900 11px/20px var(--f-display); letter-spacing: .04em; pointer-events: none;
}
.zl-vt__badge.is-new { background: #fff; color: var(--it-ink); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.zl-vt__name { margin-top: 8px; font: 700 14.5px/1.3 var(--f-display); }
.zl-vt__name a { color: var(--it-ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zl-vt:hover .zl-vt__name a { text-decoration: underline; }
.zl-vt__genre { margin-top: 1px; color: #6b6b6b; font-size: 13px; }

/* 1. genre chips */
.zl-chips { position: relative; margin: 0 0 26px; }
.zl-chips__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; }
.zl-chips__track::-webkit-scrollbar { display: none; }
.zl-chip {
  flex: none; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 18px 0 8px; scroll-snap-align: start;
  border: 1px solid var(--it-line); border-radius: var(--it-r); background: #fff;
  color: var(--it-ink) !important; font: 700 14.5px/1 var(--f-display); white-space: nowrap; text-decoration: none !important;
}
.zl-chip:hover { border-color: var(--it-ink); }
.zl-chip__img { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--it-side); color: var(--it-accent); }
.zl-chip__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zl-chip__img .sgh-ico { background: none; }
.zl-chips__arrow {
  position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  border: 1px solid var(--it-line); background: #fff; color: var(--it-ink); font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.zl-chips__arrow.is-prev { left: -12px; } .zl-chips__arrow.is-next { right: -12px; }
.zl-chips__arrow:hover { border-color: var(--it-ink); }

/* 2. Top Games | New Games */
.zl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0 0 28px; }
.zl-duo__panel { padding: 18px 20px 20px; border: 1px solid var(--it-line-2); border-radius: 6px; background: #fff; }
.sgh .zl-duo__title { margin: 0 0 14px; text-align: center; color: var(--it-ink); font: 800 19px/1.2 var(--f-display); }
.zl-duo__title span { color: var(--it-accent); font-size: 14px; }
.zl-duo__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* 3. Editor's Picks carousel */
.zl-car { margin: 0 0 46px; padding: 20px 22px 18px; border-radius: 8px; background: var(--it-side); }
.zl-car__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.zl-car__head .sgh-sec__title { margin: 0; }
.zl-car__nav { margin-left: auto; display: flex; gap: 8px; }
.zl-car__arrow { font-size: 22px; line-height: 1; cursor: pointer; }
.zl-car__arrow[hidden] { display: inline-grid !important; visibility: hidden; }
.zl-car__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 7 * 16px) / 8); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.zl-car__track::-webkit-scrollbar { display: none; }
.zl-car__track > .zl-vt { scroll-snap-align: start; }
.zl-car .zl-vt__media { aspect-ratio: 1 / 1; } /* covers are 166x166 — tiles stay at or below that size */
.zl-car .zl-vt { max-width: 166px; }
.zl-car .zl-vt__name { font-size: 14px; }
.zl-car__dots { display: flex; justify-content: center; gap: 6px; min-height: 8px; margin-top: 14px; }
.zl-car__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #c9c9c9; cursor: pointer; transition: width .2s; }
.zl-car__dots button.is-on { width: 22px; background: var(--it-accent); }

/* 4. All Games */
.zl-all { margin: 0 0 46px; }
.sgh .zl-all__title { margin: 0 0 22px; text-align: center; color: var(--it-ink); font: 900 30px/1.1 var(--f-display); letter-spacing: -.5px; }
.zl-all__title span { color: var(--it-accent); font-size: 18px; vertical-align: middle; }
.zl-all__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 18px; }
.zl-all .pagination-container { margin-top: 30px; }
.zl-all .zl-vt__media { aspect-ratio: 1 / 1; } /* 166x166 covers: square tiles, no cropping */

/* 5. Explore All Genres (home + game page) */
.zl-genres-block { margin: 0 0 40px; padding: 22px 24px; border: 1px solid var(--it-line-2); border-radius: 6px; background: #fff; }
.sgh .zl-genres-block__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--it-ink); font: 700 22px/1.2 var(--f-display); }
.zl-genres-block__title .sgh-sec__icon { color: var(--it-accent); }
.zl-genres-block .sgh-genres a span { color: var(--it-ink); }
.sgh-game .zl-genres-block { margin-top: 30px; }

/* homepage text block sits between grid and genres */
.zl-vitrina .sgh-text { margin-bottom: 30px; }

/* ---------------------------------------------- game page: mirrored */
@media (min-width: 1101px) {
  .sgh-game__grid { grid-template-columns: 340px minmax(0, 1fr); }
  .sgh-game__side { order: -1; }
}
@media (min-width: 1101px) and (max-width: 1180px) {
  .sgh-game__grid { grid-template-columns: 300px minmax(0, 1fr); }
}

/* responsive */
@media (max-width: 1360px) { .zl-all__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .zl-duo { grid-template-columns: 1fr; }
  .zl-car__track { grid-auto-columns: calc((100% - 5 * 14px) / 6); gap: 14px; }
  .zl-all__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .zl-chip { height: 50px; padding-right: 14px; font-size: 13.5px; }
  .zl-chip__img { width: 36px; height: 36px; }
  .zl-chips__arrow { display: none; }
  .zl-duo__panel { padding: 14px; }
  .zl-duo__grid { gap: 10px; }
  .zl-duo__grid .zl-vt__name { font-size: 13px; }
  .zl-car { padding: 16px 14px; margin-left: -4px; margin-right: -4px; }
  .zl-car__track { grid-auto-columns: 40%; gap: 12px; }
  .zl-car__nav { display: none; }
  .zl-all__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .sgh .zl-all__title { font-size: 24px; }
  .zl-genres-block { padding: 18px 16px; }
}

/* ---------------------------------------------- text contrast fixes */
.sgh .game_description b, .sgh .game_description strong,
.sgh .page_description b, .sgh .page_description strong,
.sgh .seo_text b, .sgh .seo_text strong, .sgh .catalog__description b, .sgh .catalog__description strong,
.sgh .game_description td b, .sgh .game_description li b, .sgh .game_description p b { color: var(--it-ink); }
.sgh .game_description .pp-tip b:first-child, .sgh .page_description .pp-tip b:first-child { color: #fff; }
.sgh .game_description td, .sgh .page_description td { color: var(--it-ink-2); }
.sgh .game_description em, .sgh .game_description i { color: inherit; }
.sgh .game_description h2, .sgh .game_description h3, .sgh .game_description h4 { color: var(--it-ink); }
.sgh .game_description .pp-quote, .sgh .game_description .pp-quote p { color: var(--it-ink-2); }
.sgh .pp-faq-item h3 { color: var(--it-ink); }
.sgh .pp-faq-item p { color: var(--it-ink-2); }
.sgh-genres em, .sgh .game_description ul.sgh-genres em, .sgh-tags em, .sgh-side__item em { color: #5f5f5f; }
.sgh-statbar small, .sgh .breadcrumb a, .sgh .breadcrumb li, footer.footer .copyright { color: var(--it-muted); }
.reviews_form p, .reviews_form label, .glsr-form label, .glsr-field label, .glsr-review-date, .glsr-review p { color: var(--it-ink-2); }
.glsr-review-title, .glsr-review-author { color: var(--it-ink); }
.glsr input, .glsr textarea, .glsr select { color: var(--it-ink); background: #fff; border-color: var(--it-line); }
/* FAQ items: same padding everywhere (home text + game description) */
.sgh .game_description .pp-faq-item, .sgh .page_description .pp-faq-item {
  margin: 0 0 10px; padding: 14px 18px 12px 20px; border-radius: var(--it-r);
  background: var(--it-side); box-shadow: inset 3px 0 0 var(--it-accent);
}
.sgh .game_description .pp-faq-item h3, .sgh .page_description .pp-faq-item h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.sgh .game_description .pp-faq-item p, .sgh .page_description .pp-faq-item p { margin: 0; }
.sgh .game_description .pp-faq-item + p { margin-top: 18px; }