/*
 * test7.fastmail.monster — візуальний шар під референс gameshub.
 * Вантажиться після style.css, перекриває тільки те, що відрізняється.
 * Референс: темно-синій hero без ілюстрації, діагональний перехід у світлий контент,
 * індиго-акцент замість блакитного, помаранчевий у лого.
 */

:root {
  --bg-dark: #0c1030;
  --bg-hero: linear-gradient(160deg, #171a4a 0%, #12143a 45%, #0c1030 100%);
  --page: #f7f8fc;
  --pp-blue: #ffffff;
  --pp-cyan: #ff6a2b;      /* акцент у лого і кнопці */
  --accent: #4a41c4;       /* індиго для цитат і активних станів */
  --line: #e4e7f2;
  /* іконка рубрики «Wo es nicht geklappt hat»: маскот сайту (README 6.8).
     Шлях ОБОВ'ЯЗКОВО абсолютний. Відносний тут не працює: браузер резолвить url()
     усередині CSS-змінної від файлу, де змінна ПІДСТАВЛЯЄТЬСЯ (style.css у корені
     теми), а не від того, де вона оголошена. '../assets/' звідси давало
     /wp-content/themes/assets/ без /wpgen/ і мовчазний 404. */
  --note-icon: url('/wp-content/themes/wpgen/assets/mascot-owl.svg');
}

/* ---------- шапка ---------- */

.site-header { border-bottom: 1px solid #1d2150; }
.main-nav { border-top: 1px solid #1d2150; }

.header-cta { color: #fff; }
.header-cta:hover { background: #ff7f49; }

.logo-mark { border-radius: 12px; }
.logo-text .l2 b { color: #fff; }
.logo-text .l2 i { color: var(--pp-cyan); }

/* ---------- hero без ілюстрації ---------- */

.hero { position: relative; padding: 30px 0 64px; overflow: hidden; }
.hero-plain .hero-grid { grid-template-columns: 1fr; }
.hero-plain .hero h1 { max-width: 18ch; }

.hero h1 { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -.8px; }
.hero p.lead { max-width: 62ch; font-size: clamp(16px, 1.35vw, 19px); }

/* діагональний зріз між hero і контентом, як на референсі */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 58px;
  background: var(--page);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  height: 58px;
  background: #4a41c4;
  opacity: .55;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.hero .wrap { position: relative; z-index: 2; }

/* ---------- дисклеймер під byline ---------- */

.hero-disclaimer {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  line-height: 1.5;
  color: #b9c0dd;
  max-width: 80ch;
}
.hero-disclaimer-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border: 1px solid #ff6a2b;
  border-radius: 20px;
  color: #ff9a6b;
  font-weight: 700;
  font-size: 12px;
}

/* ---------- контент ---------- */

.content-area { padding: 30px 0 10px; }
.card { border-radius: 14px; }
.entry h2 { letter-spacing: -.4px; }

.author-quote { border-left-color: var(--accent); }
.faq-item.is-open .faq-icon { background: var(--accent); }

@media (max-width: 980px) {
  .hero { padding: 22px 0 48px; }
  .hero::after, .hero::before { height: 38px; }
  .hero::before { bottom: 28px; }
  .hero-plain .hero h1 { max-width: none; }
}

/* Меню: 11 пунктів верхнього рівня (8 контентних хабів + головна + два EAT).
   Базові 15px і padding 16px їх у рядок не вміщають, тому на десктопі трохи
   щільніше. Випадаючі підменю лишаються в комфортних метриках. */
@media (min-width: 981px) {
  .main-nav a, .main-nav .sub-toggle { font-size: 14px; padding: 12px 9px; }
  .main-nav ul { gap: 2px; }
  .main-nav .sub-menu a { font-size: 14px; padding: 9px 15px; }
}


/* ---------- смуга трастових бейджів над футером ---------- */

/* смуга стоїть впритул до футера: базовий margin-top футера тут зайвий, інакше між
   ними лишається світлий проміжок і смуга висить сама по собі */
.trust-badges + .site-footer { margin-top: 0; }

.trust-badges { background: #eef0f7; border-top: 1px solid var(--line); padding: 20px 0; }
.trust-badges ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.trust-badges a, .trust-badges .tb-static {
  display: flex; align-items: center; gap: 10px;
  min-width: 178px; padding: 10px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; color: #1a1f3d;
}
.trust-badges a:hover { border-color: var(--pp-cyan); }
.trust-badges a:hover .tb-ico { color: var(--pp-cyan); }
.trust-badges .tb-ico { flex: 0 0 auto; color: #4a41c4; }
.trust-badges .tb-txt { display: flex; flex-direction: column; min-width: 0; }
.trust-badges .tb-label { font-weight: 800; font-size: 15px; letter-spacing: .3px; line-height: 1.2; }
.trust-badges .tb-sub { font-size: 12px; color: #5c6480; margin-top: 2px; }

@media (max-width: 720px) {
  .trust-badges { padding: 14px 0; }
  .trust-badges a, .trust-badges .tb-static { min-width: calc(50% - 5px); padding: 9px 12px; }
  .trust-badges .tb-sub { font-size: 11px; }
}


/* ---------- смуга логотипів медіа/партнерських програм у футері ---------- */

.trust-logos { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; }
.trust-logos ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px;
}
.trust-logos li { display: flex; align-items: center; }
.trust-logos img { display: block; width: auto; max-width: 140px; }

@media (max-width: 720px) {
  .trust-logos { padding: 16px 0; }
  .trust-logos ul { gap: 18px; }
  .trust-logos img { max-width: 110px; }
}


/* ---------- портрет на сторінці автора ---------- */

.hero-author .wrap { position: relative; }
.author-portrait {
  position: absolute; right: 0; top: 46px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.author-portrait img {
  width: 190px; height: 190px; border-radius: 50%; object-fit: cover;
  border: 4px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(5,8,26,.45);
}
.author-portrait .ap-city {
  font-size: 13px; color: #aab2c8; letter-spacing: .3px;
}
.hero-author h1, .hero-author p.lead { max-width: 30ch; }

@media (max-width: 900px) {
  .author-portrait { position: static; align-items: flex-start; margin-top: 18px; }
  .author-portrait img { width: 128px; height: 128px; }
  .hero-author h1, .hero-author p.lead { max-width: none; }
}


/* ---------- наскрізний CTA-банер у контенті ---------- */

.cta-img { display: block; margin: 30px 0; }
.cta-img img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 12px 28px rgba(8,11,35,.15);
}
.cta-img--light img { box-shadow: 0 10px 24px rgba(8,11,35,.10); }
@media (max-width: 640px) { .cta-img { margin: 22px 0; } .cta-img img { border-radius: 14px; } }

/* якір до таблиці оферів: невеликий відступ зверху, щоб при переході таблиця
   не впиралась у край вікна */
.offers-anchor { position: relative; top: -18px; display: block; height: 0; }
html { scroll-behavior: smooth; }

/* ---------- пояснювальні схеми ---------- */
.scheme { margin: 28px 0; }
.scheme img { display: block; width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 640px) { .scheme { margin: 20px 0; } }


/* ---------- блок «Perché fidarti di noi» під контентом ---------- */

.why-trust { margin: 34px 0 4px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }

.why-trust .wt-head { display: flex; align-items: center; gap: 10px; background: var(--bg-dark); color: #fff; padding: 14px 20px; }
.why-trust .wt-head .tb-ico { color: #fff; flex: 0 0 auto; }
.why-trust .wt-title { font-weight: 800; letter-spacing: .4px; text-transform: uppercase; font-size: 14px; }
.why-trust .wt-since { margin-left: auto; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }

.why-trust .wt-intro { margin: 0; padding: 18px 20px; font-size: 15px; line-height: 1.5; }

.why-trust .wt-stats { display: flex; background: var(--page); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.why-trust .wt-stat { flex: 1; text-align: center; padding: 16px 10px; border-right: 1px solid var(--line); }
.why-trust .wt-stat:last-child { border-right: 0; }
.why-trust .wt-stat b { display: block; font-size: 26px; letter-spacing: -.5px; }
.why-trust .wt-stat span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: #5c6480; }

.why-trust .wt-list { list-style: none; margin: 0; padding: 0; }
.why-trust .wt-list li { display: flex; align-items: flex-start; gap: 10px; padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.why-trust .wt-list li:last-child { border-bottom: 0; }
.why-trust .wt-list .tb-ico { flex: 0 0 auto; color: #d1372c; margin-top: 1px; }

.why-trust .wt-roles { display: flex; background: var(--page); border-top: 1px solid var(--line); }
.why-trust .wt-role { flex: 1; text-align: center; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; border-right: 1px solid var(--line); }
.why-trust .wt-role:last-child { border-right: 0; }
.why-trust .wt-role .tb-ico { box-sizing: content-box; padding: 9px; border-radius: 50%; background: #fff; color: var(--accent); box-shadow: 0 0 0 1px var(--line); }
.why-trust .wt-role span { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #1a1f3d; }

.why-trust .wt-cta { display: block; text-align: center; padding: 15px; background: #1ea15a; color: #fff; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; text-decoration: none; font-size: 13px; }
.why-trust .wt-cta:hover { background: #178a4c; }

@media (max-width: 640px) {
  .why-trust .wt-stats, .why-trust .wt-roles { flex-wrap: wrap; }
  .why-trust .wt-stat, .why-trust .wt-role { flex: 1 1 50%; }
  .why-trust .wt-stat:nth-child(odd), .why-trust .wt-role:nth-child(odd) { border-right: 1px solid var(--line); }
}


/* ---------- брендова головна (parts/home-brand.php) ---------- */

.home-brand { background: var(--page); padding-bottom: 10px; }
.home-brand .hb-ico { flex: 0 0 auto; }

.hb-hero {
  background: radial-gradient(90% 120% at 50% -20%, #ffe9dd 0%, rgba(255,233,221,0) 60%), #fff;
  border-bottom: 1px solid var(--line); padding: 46px 0 88px; text-align: center;
}
.hb-hero h1 { margin: 0 auto 14px; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.8px; color: #12152e; max-width: 22ch; }
.hb-lead { margin: 0 auto 28px; max-width: 760px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: #3d4460; }
.hb-lead b, .hb-lead strong { color: #12152e; }

.hb-search {
  position: relative; display: flex; align-items: center; gap: 10px;
  max-width: 640px; margin: 0 auto; padding: 8px 8px 8px 22px;
  background: #fff; border: 1px solid #e6e8f2; border-radius: 999px;
  box-shadow: 0 14px 34px rgba(18,21,46,.10);
}
.hb-search > .hb-ico { color: #8a90ab; }
.hb-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 17px; color: #12152e; padding: 10px 0;
}
.hb-search input::placeholder { color: #9aa0b8; }
.hb-search button {
  flex: 0 0 auto; width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #ff8a4c, #ff6a2b 55%, #e24d14);
  box-shadow: 0 6px 16px rgba(255,106,43,.35);
}
.hb-search button:hover { filter: brightness(1.05); }
.hb-search:focus-within { border-color: #ffb48f; box-shadow: 0 14px 34px rgba(18,21,46,.10), 0 0 0 4px rgba(255,106,43,.14); }

.hb-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.hb-hints a {
  padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: 14px; color: #3d4460; text-decoration: none;
}
.hb-hints a:hover { border-color: var(--pp-cyan); color: #12152e; }

.hb-section { padding: 26px 0; }
.hb-section--features { padding-top: 0; margin-top: -62px; position: relative; z-index: 2; }

.hb-head { margin: 0 0 18px; }
.hb-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.4px; color: #12152e; }
.hb-head h2 .hb-ico { color: var(--pp-cyan); width: 26px; height: 26px; }
.hb-head p { margin: 6px 0 0; color: #5c6480; font-size: 16px; }

/* картки розділів з помаранчевою смугою */
.hb-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hb-feature {
  display: flex; flex-direction: column; justify-content: space-between;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: #12152e;
  box-shadow: 0 8px 24px rgba(18,21,46,.06); transition: transform .15s ease, box-shadow .15s ease;
}
a.hb-feature:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18,21,46,.12); }
.hb-feature-top { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 14px; }
.hb-feature-img img { display: block; width: 76px; height: 76px; }
.hb-feature-txt b { display: block; font-size: 15px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; line-height: 1.25; margin-bottom: 4px; }
.hb-feature-txt span { display: block; font-size: 14.5px; line-height: 1.45; color: #4a5170; }
.hb-feature-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 8px 8px; padding: 9px 14px; border-radius: 9px; color: #fff;
  background: linear-gradient(90deg, #ff6a2b, #e8521a);
  font-size: 14.5px;
}
.hb-feature-bar b { font-size: 24px; font-weight: 800; letter-spacing: -.3px; line-height: 1; }
.hb-feature.is-soon .hb-feature-bar { background: #e9ebf3; color: #6a7190; }

/* плитки бонусів */
.hb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hb-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; text-align: center;
  text-decoration: none; color: #12152e; box-shadow: 0 6px 18px rgba(18,21,46,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.hb-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(18,21,46,.10); }
.hb-tile img { width: 84px; height: 84px; }
.hb-tile b { font-size: 14px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.hb-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 15px; color: #1ea15a; }
.hb-go .hb-ico { width: 18px; height: 18px; }
.hb-soon { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef0f6; color: #6a7190; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; }

/* банери ігор */
.hb-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hb-game {
  position: relative; display: flex; align-items: flex-end; min-height: 140px; padding: 16px;
  border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #ff7a3d 0%, #e8481a 100%);
  box-shadow: 0 10px 24px rgba(18,21,46,.12); transition: transform .15s ease;
}
.hb-game::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 85% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
}
.hb-game--1 { background: linear-gradient(135deg, #5a50d6 0%, #2f2790 100%); }
.hb-game--2 { background: linear-gradient(135deg, #1e2350 0%, #0c1030 100%); }
.hb-game--3 { background: linear-gradient(135deg, #7a4be0 0%, #e8481a 120%); }
a.hb-game:hover { transform: translateY(-3px); }
.hb-game img { position: absolute; right: -8px; top: 50%; transform: translateY(-50%) rotate(-6deg); width: 118px; height: 118px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)); }
.hb-game-txt { position: relative; z-index: 1; max-width: 62%; }
.hb-game-txt b { display: block; font-size: 23px; font-weight: 900; line-height: 1.02; letter-spacing: -.2px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.18); }
.hb-game-txt span { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; opacity: .95; }
.hb-game-txt .hb-ico { width: 16px; height: 16px; }
.hb-badge { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 12px; font-weight: 700; }

/* останні гайди */
.hb-latest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hb-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(18,21,46,.05); }
.hb-card-thumb {
  position: relative; display: grid; place-items: center; height: 150px;
  background: radial-gradient(80% 90% at 30% 20%, #fff3ea 0%, #ffe0cc 45%, #dcd9ff 100%);
}
.hb-card:nth-child(3n+2) .hb-card-thumb { background: radial-gradient(80% 90% at 70% 20%, #eeedff 0%, #dcd9ff 50%, #ffd8c4 100%); }
.hb-card:nth-child(3n) .hb-card-thumb { background: radial-gradient(80% 90% at 50% 10%, #fff6d9 0%, #ffe3c8 50%, #ffcdb5 100%); }
.hb-card-thumb img { width: 110px; height: 110px; transition: transform .2s ease; }
.hb-card:hover .hb-card-thumb img { transform: scale(1.06) rotate(-3deg); }
.hb-chip { position: absolute; left: 14px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: #ffd23f; color: #12152e; font-size: 12.5px; font-weight: 700; }
.hb-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.hb-card-body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }
.hb-card-body h3 a { color: #12152e; text-decoration: none; }
.hb-card-body h3 a:hover { color: var(--pp-cyan); }
.hb-card-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: #4a5170; }
.hb-date { margin-top: auto; margin-bottom: 12px; font-size: 13px; color: #8a90ab; }
.hb-btn-outline {
  display: block; text-align: center; padding: 9px 12px; border: 1.5px solid #12152e; border-radius: 9px;
  color: #12152e; font-weight: 800; font-size: 14px; letter-spacing: .3px; text-decoration: none;
}
.hb-btn-outline:hover { background: #12152e; color: #fff; }

/* безпека */
.hb-info { display: grid; gap: 16px; }
.hb-info-card { display: flex; align-items: center; gap: 22px; padding: 18px 26px 18px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.hb-info-img { flex: 0 0 170px; display: grid; place-items: center; height: 150px; border-radius: 12px; background: radial-gradient(70% 70% at 50% 50%, #ffe6d8 0%, #fff4ee 60%, #fff 100%); }
.hb-info-img img { width: 130px; height: 130px; }
.hb-info-card h3 { margin: 0 0 6px; font-size: 20px; color: #12152e; }
.hb-info-card p { margin: 0 0 12px; color: #4a5170; line-height: 1.55; }
.hb-btn { display: inline-block; padding: 9px 16px; border-radius: 9px; background: linear-gradient(90deg, #ff6a2b, #e8521a); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .3px; text-decoration: none; }
.hb-btn:hover { filter: brightness(1.06); }

/* відгуки (рендеряться тільки з реальними джерелами) */
.hb-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hb-review { margin: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.hb-review blockquote { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.hb-stars { color: #f5b301; letter-spacing: 2px; }
.hb-review figcaption a { color: #c2410c; font-size: 14px; }

/* редакція */
.hb-section--team .author-card { margin-top: 0; }
.hb-section--team .why-trust { margin-top: 18px; }

/* лінія допомоги */
.hb-help {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px;
  padding: 16px 22px; border-radius: 14px; background: var(--bg-dark); color: #d7dbef;
}
.hb-help-l { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.hb-help-num { font-size: 24px; font-weight: 900; letter-spacing: 1px; color: #34d27b; text-decoration: none; }
.hb-help-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .hb-features, .hb-tiles, .hb-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-latest, .hb-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hb-hero { padding: 30px 0 78px; }
  .hb-search { padding-left: 16px; }
  .hb-search input { font-size: 16px; }
  .hb-search button { width: 44px; height: 44px; }
  .hb-features, .hb-latest, .hb-reviews { grid-template-columns: 1fr; }
  .hb-tiles { gap: 10px; }
  .hb-tile img { width: 64px; height: 64px; }
  .hb-tile b { font-size: 12.5px; }
  .hb-games { grid-template-columns: 1fr; }
  .hb-info-card { flex-direction: column; align-items: flex-start; padding: 16px; }
  .hb-info-img { flex-basis: auto; width: 100%; }
}

/* банери ігор: довгі назви (es/lt/lv) не наїжджають на картинку й бейдж */
.hb-game { padding-top: 42px; }
.hb-game-txt { max-width: 64%; }
.hb-game-txt b { font-size: clamp(15px, 1.4vw, 20px); letter-spacing: 0; hyphens: manual; }
.hb-game img { width: 104px; height: 104px; right: -12px; }
@media (max-width: 600px) { .hb-game-txt b { font-size: 21px; } .hb-game-txt { max-width: 62%; } }


/* ---------- діаграма «як працює наш рейтинг» (inc/extras.php) ---------- */

.rating-pie { display: flex; align-items: center; gap: 24px 48px; }
.rating-pie--home { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 34px 38px; }
.rating-pie--page { margin: 8px 0 26px; padding: 22px 24px; background: #f7f8fc; border: 1px solid var(--line); border-radius: 14px; }
.rp-text { flex: 1 1 0; min-width: 0; }
.rp-title { margin: 0 0 10px; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.4px; color: #12152e; }
.rp-intro { margin: 0; font-size: 16px; line-height: 1.6; color: #4a5170; }
.rp-slides { position: relative; margin-top: 26px; }
.rating-pie--page .rp-slides { margin-top: 0; }
.rp-slide { animation: rp-fade .45s ease both; }
.rp-slide h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 21px; color: #12152e; }
.rp-slide h3 i {
  font-style: normal; font-weight: 900; font-size: 24px;
  background: linear-gradient(120deg, #ff8a4c 0%, #ff6a2b 45%, #4a41c4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.rp-slide p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: #4a5170; }
@keyframes rp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rp-nav { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.rp-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 0; border-radius: 10px; background: #fff; color: #12152e;
  box-shadow: 0 4px 12px rgba(18,21,46,.12), 0 0 0 1px var(--line);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.rp-arrow:hover { background: #ff6a2b; color: #fff; }
.rp-arrow:active { transform: scale(.94); }
.rp-arrow:focus-visible, .rp-piece:focus-visible { outline: 3px solid rgba(255,106,43,.45); outline-offset: 2px; }
.rp-count { min-width: 56px; text-align: center; font-size: 15px; color: #5c6480; }
.rp-count strong { color: #12152e; font-size: 17px; }
.rp-cta { display: inline-block; margin-top: 18px; font-weight: 800; color: #ff6a2b; text-decoration: none; }
.rp-cta:hover { text-decoration: underline; }

.rp-chart { flex: 0 0 auto; width: min(360px, 100%); }
.rating-pie--page .rp-chart { width: min(300px, 100%); }
.rp-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.rp-piece { cursor: pointer; transition: transform .32s cubic-bezier(.3,.7,.3,1.2); outline: none; }
.rp-piece.is-open { transform: translate(var(--dx), var(--dy)); }
.rp-piece .rp-top { transition: filter .2s ease; stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-linejoin: round; }
.rp-piece .rp-top.rp-hot { stroke: rgba(255,255,255,.35); }
.rp-piece:hover .rp-top { filter: brightness(1.18); }
.rp-wall { fill: #171c33; }
.rp-side { fill: #242b47; }
.rp-hot { opacity: 0; transition: opacity .3s ease; }
.rp-piece.is-open .rp-hot { opacity: 1; }
.rp-label { fill: #fff; font-weight: 800; font-size: 19px; pointer-events: none; font-family: inherit; }
.rp-label.is-small { font-size: 14px; }

@media (max-width: 860px) {
  .rating-pie { flex-direction: column-reverse; align-items: stretch; }
  .rating-pie--home { padding: 24px 18px; }
  .rp-chart, .rating-pie--page .rp-chart { width: min(320px, 100%); margin: 0 auto; }
  .rp-nav { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-piece, .rp-hot, .rp-slide { transition: none; animation: none; }
}

/* ---------- підписка на розсилку (inc/extras.php) ---------- */

.newsletter { padding: 26px 0 30px; background: var(--page); }
.nl-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px;
  padding: 40px 44px; border-radius: 16px; color: #fff;
  background: radial-gradient(60% 120% at 85% 40%, rgba(255,106,43,.28), rgba(255,106,43,0) 60%),
              radial-gradient(50% 90% at 10% 110%, rgba(74,65,196,.45), rgba(74,65,196,0) 70%),
              linear-gradient(135deg, #171b44 0%, #0c1030 100%);
}
.nl-body { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; max-width: 680px; }
.nl-card h2 { margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.5px; color: #fff; }
.nl-text { margin: 0 0 20px; font-size: 16.5px; color: #d6daf0; }
.nl-form { display: flex; gap: 12px; }
.nl-form input[type=email] {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; border: 0; border-radius: 10px;
  font: inherit; font-size: 16px; color: #12152e; background: #fff;
}
.nl-form input[type=email]:focus { outline: 3px solid rgba(255,106,43,.55); }
.nl-form button {
  flex: 0 0 auto; height: 48px; padding: 0 28px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, #ff8a4c, #ff6a2b 55%, #e8521a);
  box-shadow: 0 8px 20px rgba(255,106,43,.35); transition: filter .15s ease, transform .15s ease;
}
.nl-form button:hover { filter: brightness(1.07); }
.nl-form button:active { transform: translateY(1px); }
.newsletter.is-busy .nl-form button { opacity: .7; cursor: progress; }
.newsletter.is-unsub .nl-form button { background: #3a4466; box-shadow: none; }
.nl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-msg { margin: 12px 0 0; padding: 9px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 700; }
.nl-msg.is-ok { background: rgba(52,210,123,.16); color: #7ff0ad; }
.nl-msg.is-err { background: rgba(255,106,43,.16); color: #ffb48f; }
.nl-note { margin: 12px 0 0; font-size: 13.5px; color: #aab2cf; }
.nl-toggle { padding: 0; margin-left: 4px; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nl-art { position: relative; z-index: 2; flex: 0 0 auto; width: 210px; height: 210px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); animation: nl-float 5s ease-in-out infinite; }
.nl-deco { position: absolute; z-index: 1; width: 120px; height: 120px; filter: blur(7px); opacity: .35; pointer-events: none; }
.nl-deco--1 { left: -30px; top: 18px; transform: rotate(-18deg); }
.nl-deco--2 { left: 46%; bottom: -46px; transform: rotate(14deg); }
@keyframes nl-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@media (max-width: 860px) {
  .nl-card { flex-direction: column-reverse; align-items: flex-start; padding: 28px 22px; }
  .nl-art { width: 120px; height: 120px; }
  .nl-form { flex-direction: column; }
  .nl-form button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nl-art { animation: none; } }

.nl-art { margin-left: auto; margin-right: 12px; }
@media (max-width: 860px) { .nl-art { margin: 0; } }

/* картки розділів: іконка не стискається, довгі слова (lv/lt/nl) переносяться всередині тексту */
.hb-feature-top { align-items: center; }
.hb-feature-img { flex: 0 0 68px; width: 68px; height: 68px; display: grid; place-items: center; }
.hb-feature-img img { width: 68px; height: 68px; max-width: none; object-fit: contain; }
.hb-feature-txt { flex: 1 1 auto; min-width: 0; }
.hb-feature-txt b, .hb-feature-txt span { overflow-wrap: break-word; hyphens: auto; }
.home-brand img { object-fit: contain; }
@media (max-width: 1100px) and (min-width: 981px) {
  .hb-feature-img { flex-basis: 56px; width: 56px; height: 56px; }
  .hb-feature-img img { width: 56px; height: 56px; }
  .hb-feature-txt b { font-size: 14px; }
}

/* 981–1180px: іконка над текстом, щоб довгі слова не рвались посередині */
@media (max-width: 1180px) and (min-width: 981px) {
  .hb-feature-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hb-feature-img, .hb-feature-img img { flex-basis: auto; width: 56px; height: 56px; }
  .hb-feature-txt b { font-size: 14.5px; }
}
.hb-feature-txt b { overflow-wrap: normal; word-break: normal; }

/* ---------- логотипи партнерських програм (inc/extras.php) ---------- */

.pl { margin: 26px 0 30px; }
.pl-title { margin: 0 0 16px; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.4px; color: #12152e; }
.pl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pl-item {
  display: grid; place-items: center; min-height: 118px; padding: 16px; border-radius: 14px;
  background: linear-gradient(160deg, #1b2047 0%, #0f1334 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); text-decoration: none; color: #e8ebf7;
  transition: box-shadow .15s ease, transform .15s ease;
}
a.pl-item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,106,43,.75); }
.pl-item img { max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain; }
.pl-item span { font-weight: 800; letter-spacing: .3px; text-align: center; }
@media (max-width: 980px) { .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-item { min-height: 92px; } }

/* ---------- відгуки партнерських менеджерів (inc/extras.php) ---------- */

.pq-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pq-head h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.4px; color: #12152e; }
.pq-arrows { display: flex; gap: 8px; margin-left: auto; }
.pq-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 0; border-radius: 10px; background: #fff; color: #12152e;
  box-shadow: 0 4px 12px rgba(18,21,46,.12), 0 0 0 1px var(--line);
  transition: background .15s ease, color .15s ease;
}
.pq-arrow:hover { background: #ff6a2b; color: #fff; }
.pq-arrow[disabled] { opacity: .4; cursor: default; background: #fff; color: #12152e; }

.pq-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 14px; scrollbar-width: thin;
}
.pq-card {
  scroll-snap-align: start; flex: 0 0 340px; display: flex; flex-direction: column; align-items: center;
  padding: 26px 22px; text-align: center; border-radius: 16px; color: #e8ebf7;
  background: linear-gradient(160deg, #1b2047 0%, #0f1334 100%);
  box-shadow: 0 10px 26px rgba(12,16,48,.18), inset 0 0 0 1px rgba(255,255,255,.07);
}
.pq-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.pq-name { margin: 0 0 4px; font-size: 18px; color: #fff; }
.pq-role { margin: 0; font-size: 14.5px; color: #aab2cf; }
.pq-role a { color: #ffb48f; text-decoration: underline; text-underline-offset: 3px; }
.pq-li {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 18px 0 16px;
  border-radius: 10px; color: #fff; background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .15s ease;
}
.pq-li:hover { background: rgba(255,255,255,.14); }
.pq-quote { font-size: 15px; line-height: 1.6; color: #d7dbef; text-align: left; }
.pq-quote p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
.pq-card.is-open .pq-quote p { -webkit-line-clamp: unset; display: block; }
.pq-more {
  width: 100%; margin-top: 12px; padding: 7px; cursor: pointer; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700;
}
.pq-more:hover { background: rgba(255,255,255,.16); }
.pq-note { margin: 10px 0 0; font-size: 12.5px; color: #8f98ba; }

@media (max-width: 600px) {
  .pq-card { flex-basis: 84%; padding: 22px 18px; }
  .pq-head h2 { font-size: 21px; }
}
/* New Zealand refresh */
:root{--nz-deep:#0b3d3a;--nz-green:#16856b;--nz-red:#c93b45;--nz-cream:#f6fbf8;}
body{background:var(--nz-cream);color:#173b38}.site-header{background:var(--nz-deep)}.main-nav{background:#092d2b}.header-cta,.site-search-trigger{background:var(--nz-red)!important;color:#fff!important;border:0;border-radius:999px;padding:.7rem 1rem;font-weight:700;cursor:pointer}.main-nav .menu a{color:#fff}.main-nav .sub-caret{display:none!important}.main-nav .menu-item-has-children>a:after{display:none!important}.hb-hero{background:linear-gradient(135deg,#0b3d3a,#16856b);color:#fff}.hb-search{border:2px solid #b8e1d2;border-radius:14px;background:#fff;box-shadow:0 12px 30px #062b2933}.hb-search input{color:#173b38}.hb-hints{display:none}.hb-section--features{display:none}.site-search-panel{width:min(620px,calc(100% - 2rem));border:0;border-radius:20px;padding:2rem;background:#fff;color:#173b38;box-shadow:0 25px 70px #061f1e66}.site-search-panel::backdrop{background:#062b2988}.site-search-panel label{display:block;font-weight:800;font-size:1.2rem;margin-bottom:1rem}.site-search-row{display:flex;gap:.6rem}.site-search-row input{flex:1;border:2px solid #b8e1d2;border-radius:10px;padding:.9rem}.site-search-row button{background:var(--nz-red);color:#fff;border:0;border-radius:10px;padding:.9rem 1.2rem;font-weight:800}.site-search-close{position:absolute;right:1rem;top:.7rem;border:0;background:none;font-size:2rem;cursor:pointer;color:#0b3d3a}.newsletter{background:linear-gradient(135deg,#0b3d3a,#16856b)!important;border-radius:24px!important;color:#fff!important;box-shadow:0 16px 40px #0b3d3a33}.newsletter input{border-radius:10px!important;border:2px solid #b8e1d2!important}.newsletter button{background:var(--nz-red)!important;border-radius:10px!important}.site-footer{background:#092d2b;color:#dff5eb}.logo-mark img{object-fit:contain}
/* Header and hero polish */
.site-header{position:relative;background:#0b3d3a;border-bottom:3px solid #d9b83f}.header-bar{min-height:78px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}.logo{grid-column:1;justify-self:start;display:flex;align-items:center;gap:.7rem;text-decoration:none;border:0!important;background:none!important;box-shadow:none!important}.logo-mark{display:flex;align-items:center;justify-content:center;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}.logo-mark img{width:52px;height:52px;object-fit:contain}.logo-text{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.logo-text .l2{display:flex;gap:.35rem;align-items:baseline;font-size:1.55rem;letter-spacing:.02em;color:#f4d35e;font-weight:800}.logo-text .l2 b,.logo-text .l2 i{color:#f4d35e;font-style:normal}.header-side.right{grid-column:3;justify-self:end}.hb-hero{padding:clamp(3.5rem,8vw,7rem) 0 4rem;background:radial-gradient(circle at 15% 20%,#2ca982 0,transparent 36%),linear-gradient(135deg,#0b3d3a 0%,#126b58 58%,#0b3d3a 100%);text-align:center}.hb-hero h1{max-width:920px;margin:0 auto 1.2rem;color:#f4d35e;font-size:clamp(2.2rem,5vw,4.7rem);line-height:1.03;letter-spacing:-.035em;text-wrap:balance;text-shadow:0 3px 0 #082e2b}.hb-lead{max-width:760px!important;margin:0 auto 2rem!important;color:#f7fff9!important;font-size:clamp(1.05rem,1.8vw,1.35rem)!important;line-height:1.65!important}.hb-search{max-width:720px;margin:2rem auto 0!important}.main-nav{border-top:1px solid #ffffff22}.main-nav .menu{justify-content:center}@media(max-width:700px){.header-bar{grid-template-columns:1fr auto}.logo-text{position:static;transform:none;grid-column:1;grid-row:1}.logo{gap:.4rem}.logo-mark{display:none}.logo-text .l2{font-size:1.15rem}.header-side.right{grid-column:2;grid-row:1}.hb-hero h1{font-size:2.35rem}}
.logo-mark img{width:78px;height:78px;max-width:none}.header-bar{min-height:96px}.logo{gap:.9rem}@media(max-width:700px){.logo-mark{display:flex}.logo-mark img{width:54px;height:54px}.header-bar{min-height:76px}.logo-text .l2{font-size:1.05rem}}
/* final logo size override */
.site-header .header-bar .logo-mark{width:92px!important;height:92px!important;min-width:92px!important;display:flex!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.site-header .header-bar .logo-mark img{width:92px!important;height:92px!important;max-width:92px!important;max-height:92px!important;object-fit:contain!important}
.site-header .header-bar{min-height:108px!important}
@media(max-width:700px){.site-header .header-bar .logo-mark{width:64px!important;height:64px!important;min-width:64px!important}.site-header .header-bar .logo-mark img{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important}.site-header .header-bar{min-height:82px!important}}
.site-header .header-bar .logo-mark{width:120px!important;height:120px!important;min-width:120px!important}.site-header .header-bar .logo-mark img{width:120px!important;height:120px!important;max-width:120px!important;max-height:120px!important}.site-header .header-bar{min-height:132px!important}@media(max-width:700px){.site-header .header-bar .logo-mark{width:82px!important;height:82px!important;min-width:82px!important}.site-header .header-bar .logo-mark img{width:82px!important;height:82px!important;max-width:82px!important;max-height:82px!important}.site-header .header-bar{min-height:98px!important}}
.site-header .header-bar .logo-mark img{transform:scale(1.65)!important;transform-origin:left center!important}.site-header .header-bar .logo-mark{overflow:visible!important}@media(max-width:700px){.site-header .header-bar .logo-mark img{transform:scale(1.45)!important}}
.site-header .header-bar .logo-mark{width:100px!important;height:100px!important;min-width:100px!important}.site-header .header-bar .logo-mark img{width:100px!important;height:100px!important;max-width:100px!important;max-height:100px!important;transform:scale(1.35)!important}.site-header .header-bar{min-height:116px!important}@media(max-width:700px){.site-header .header-bar .logo-mark{width:72px!important;height:72px!important;min-width:72px!important}.site-header .header-bar .logo-mark img{width:72px!important;height:72px!important;max-width:72px!important;max-height:72px!important;transform:scale(1.25)!important}.site-header .header-bar{min-height:88px!important}}
.card.entry blockquote{position:relative;margin:2rem 0;padding:1.5rem 1.8rem 1.5rem 3.2rem;border-left:6px solid #d9b83f;border-radius:0 18px 18px 0;background:linear-gradient(135deg,#fff8d8,#e5f7ef);color:#0b3d3a;font-size:1.16rem;line-height:1.65;box-shadow:0 10px 24px rgba(11,61,58,.12)}.card.entry blockquote:before{content:'“';position:absolute;left:1rem;top:.3rem;color:#c93b45;font:800 3.4rem/1 Georgia,serif}.card.entry ul,.card.entry ol{margin:1.2rem 0 1.8rem;padding:0;list-style:none;counter-reset:nz-list}.card.entry li{position:relative;margin:.65rem 0;padding:.75rem 1rem .75rem 2.8rem;border-radius:12px;background:#f0faf5;border:1px solid #c5e8d9;color:#173b38;line-height:1.55}.card.entry ul li:before{content:'✦';position:absolute;left:1rem;top:.72rem;color:#c93b45;font-weight:900}.card.entry ol li{counter-increment:nz-list}.card.entry ol li:before{content:counter(nz-list);position:absolute;left:.75rem;top:.65rem;display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;background:#0b3d3a;color:#f4d35e;font-size:.78rem;font-weight:800}.card.entry table{width:100%;margin:2rem 0;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid #b9dfd0;border-radius:16px;background:#fff;box-shadow:0 10px 25px rgba(11,61,58,.1)}.card.entry th{padding:1rem;text-align:left;background:#0b3d3a;color:#f4d35e}.card.entry td{padding:.9rem 1rem;border-top:1px solid #dcefe7}.card.entry tr:nth-child(even) td{background:#f2faf6}@media(max-width:700px){.card.entry table{display:block;overflow-x:auto;white-space:nowrap}}
/* NZ themed internal page hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 8% 20%,rgba(34,154,123,.55),transparent 32%),linear-gradient(135deg,#082f32 0%,#0b5551 58%,#123b4c 100%)!important;color:#f7fff8!important;border-bottom:4px solid #c93b45!important;box-shadow:inset 0 -1px 0 rgba(244,211,94,.45)}
.hero:after{content:'★  ★\A    ★  ★';white-space:pre;position:absolute;right:clamp(1rem,8vw,8rem);top:50%;transform:translateY(-50%) rotate(-8deg);display:grid;place-items:center;width:116px;height:78px;padding-top:4px;border:3px solid #fff;border-radius:5px;background:#183c66;color:#d94351;font:700 1.25rem/1.05 Georgia,serif;letter-spacing:.2rem;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,.22),inset 0 0 0 2px #d9b83f;opacity:.95}
.hero .wrap{position:relative;z-index:1}.hero h1{max-width:760px;color:#f4d35e!important;font-size:clamp(2rem,4.5vw,3.7rem)!important;line-height:1.06!important;text-shadow:0 2px 0 #062b2b}.hero .lead{max-width:720px;color:#f5fffb!important;font-size:clamp(1rem,1.8vw,1.3rem)!important;line-height:1.6!important}.hero .crumbs,.hero .crumbs a{color:#b9e6d8!important}.hero-author:after{display:none}@media(max-width:700px){.hero{padding-bottom:2.5rem}.hero:after{width:76px;height:52px;right:1rem;font-size:.82rem;letter-spacing:.1rem}.hero h1,.hero .lead{max-width:calc(100% - 5rem)!important}}
/* Compact hero and boxed 18+ notice */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);column-gap:clamp(1.5rem,5vw,5rem);align-items:center}.hero .crumbs{grid-column:1 / -1}.hero h1,.hero .lead,.hero .author-line,.hero .author-portrait{grid-column:1}.hero .hero-disclaimer{grid-column:2;grid-row:2 / span 3;margin:0;padding:1rem 1.1rem;border:1px solid rgba(244,211,94,.85);border-radius:14px;background:rgba(3,34,38,.72);color:#f5fff9;font-size:.82rem;line-height:1.45;box-shadow:0 10px 25px rgba(0,0,0,.2)}.hero-disclaimer-badge{display:inline-grid;place-items:center;float:left;width:2.1rem;height:2.1rem;margin:0 .55rem .2rem 0;border-radius:50%;background:#c93b45;color:#fff;font-weight:800;font-size:.86rem}.hero h1{font-size:clamp(1.7rem,3.5vw,2.8rem)!important}.hero .lead{font-size:clamp(.92rem,1.35vw,1.1rem)!important;line-height:1.45!important}.hero:has(.hero-disclaimer):after{display:none}@media(max-width:760px){.hero .wrap{display:block}.hero .hero-disclaimer{margin:1.2rem 0 0;max-width:none}.hero h1{font-size:2rem!important}.hero .lead{font-size:1rem!important}}
.hero .author-line{grid-column:2!important;grid-row:2 / span 3!important}.hero .author-line .hero-disclaimer{grid-column:auto!important;grid-row:auto!important}@media(max-width:760px){.hero .author-line{display:block!important;margin-top:1.2rem!important}}
.hero .author-portrait{display:none!important}
.hero .author-line .who img{display:none!important}.hero .author-line .who{padding-left:0!important}
.hero .author-line{grid-column:1!important;grid-row:4!important;align-self:start!important}.hero> .wrap > .hero-disclaimer{grid-column:2!important;grid-row:2 / span 3!important;align-self:center!important}
@media(max-width:760px){.hero .author-line{grid-column:auto!important;grid-row:auto!important}.hero> .wrap > .hero-disclaimer{grid-column:auto!important;grid-row:auto!important}}
/* Clickable hub links with visible submenu arrows */
.main-nav li.menu-item-has-children{display:inline-flex!important;align-items:center!important}
.main-nav li.menu-item-has-children>a.sub-parent-link{display:block!important}
.main-nav li.menu-item-has-children>.sub-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;min-width:26px!important;height:38px!important;padding:0!important;margin:0!important;overflow:visible!important;opacity:1!important;background:transparent!important;border:0!important;box-shadow:none!important;color:currentColor!important;cursor:pointer}
.main-nav li.menu-item-has-children>.sub-toggle .sub-caret{display:block!important;width:7px!important;height:7px!important;margin:0!important;border-right:2px solid currentColor!important;border-bottom:2px solid currentColor!important;transform:rotate(45deg) translate(-2px,-2px)!important;transition:transform .18s ease}
.main-nav li.menu-item-has-children.is-open>.sub-toggle .sub-caret{transform:rotate(-135deg) translate(-2px,-2px)!important}
.main-nav li.menu-item-has-children>.sub-menu{display:none!important}
.main-nav li.menu-item-has-children.is-open>.sub-menu{display:block!important}
@media(min-width:641px){.main-nav li.menu-item-has-children:hover>.sub-menu,.main-nav li.menu-item-has-children:focus-within>.sub-menu{display:block!important}}
@media(max-width:640px){.main-nav li.menu-item-has-children{display:grid!important;grid-template-columns:minmax(0,1fr) 30px!important;width:100%!important}.main-nav li.menu-item-has-children>a.sub-parent-link{grid-column:1!important}.main-nav li.menu-item-has-children>.sub-toggle{grid-column:2!important;width:30px!important;min-width:30px!important;height:38px!important}.main-nav li.menu-item-has-children>.sub-menu{grid-column:1 / -1!important;position:static!important;margin:0 0 4px 10px!important;padding:3px 0 3px 8px!important;border-left:2px solid #006847!important;border-radius:0!important;box-shadow:none!important}}
.main-nav li.menu-item-has-children>.sub-toggle,.main-nav li.menu-item-has-children>.sub-toggle:hover,.main-nav li.menu-item-has-children.is-open>.sub-toggle{color:#d9b83f!important}.main-nav li.menu-item-has-children>.sub-toggle .sub-caret{border-color:#d9b83f!important}
.main-nav .menu-item-has-children > button.sub-toggle > span.sub-caret{display:block!important;width:9px!important;height:9px!important;border:0!important;border-right:3px solid #f4d35e!important;border-bottom:3px solid #f4d35e!important;background:transparent!important;color:#f4d35e!important;opacity:1!important}
@media(min-width:641px){
  .main-nav .sub-menu .menu-item-has-children{display:flex!important;align-items:center!important;width:100%!important}
  .main-nav .sub-menu .menu-item-has-children>a{flex:1 1 auto!important;min-width:0!important}
  .main-nav .sub-menu .menu-item-has-children>.sub-toggle{flex:0 0 26px!important;width:26px!important;min-width:26px!important;height:34px!important}
  .main-nav .sub-menu .menu-item-has-children>.sub-menu{top:0!important;left:calc(100% + 6px)!important;right:auto!important;margin:0!important;min-width:210px!important}
}
@media(max-width:640px){.main-nav .sub-menu .menu-item-has-children>.sub-menu{position:static!important;margin-left:8px!important}}
/* Centre casino screenshots on mobile pages */
.entry .casino-screen,.entry figure.casino-screen{display:block!important;width:100%!important;box-sizing:border-box!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.entry .casino-screen img,.entry figure.casino-screen img{display:block!important;margin-left:auto!important;margin-right:auto!important;max-width:100%!important;height:auto!important;object-fit:contain!important}
.entry .casino-screen figcaption{max-width:100%;text-align:center!important}
.entry > figure{display:block!important;width:100%!important;box-sizing:border-box!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}.entry > figure > img{display:block!important;margin-left:auto!important;margin-right:auto!important;max-width:100%!important;height:auto!important;object-fit:contain!important}.entry > figure > figcaption{text-align:center!important}
/* Interactive rating explorer on the home page */
.hb-rating-explorer{background:#eef8f3}.hb-rating-grid{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:34px;align-items:center;max-width:1040px;margin:0 auto}.hb-rating-wheel{position:relative;width:min(330px,80vw);aspect-ratio:1;margin:auto;border-radius:50%;background:conic-gradient(#c93b45 0 25%,#16856b 25% 50%,#d9b83f 50% 75%,#287a8b 75% 100%);box-shadow:0 16px 30px rgba(11,61,58,.18)}.hb-rating-wheel:before{content:'';position:absolute;inset:10px;border:2px solid #ffffffaa;border-radius:50%}.hb-rating-segment{position:absolute;z-index:2;width:50%;height:50%;padding:0;border:0;background:transparent;color:#fff;font:800 14px/1.1 var(--font,Arial);cursor:pointer;text-shadow:0 1px 3px #06352f}.hb-rating-segment span{display:inline-block;padding:8px;border-radius:8px;background:#06352f88}.hb-rating-segment--safety{top:8%;left:4%}.hb-rating-segment--games{top:8%;right:4%}.hb-rating-segment--bonus{bottom:8%;right:4%}.hb-rating-segment--banking{bottom:8%;left:4%}.hb-rating-segment.is-active span{background:#fff;color:#0b3d3a;text-shadow:none;box-shadow:0 4px 12px #05352f44}.hb-rating-wheel-core{position:absolute;z-index:3;inset:31%;display:grid;place-content:center;text-align:center;border-radius:50%;background:#f7fffb;color:#0b3d3a;font-size:22px;font-weight:900;box-shadow:0 5px 16px #05352f33}.hb-rating-wheel-core small{font-size:11px;color:#287565}.hb-rating-detail{padding:26px;border:1px solid #c5e8d9;border-radius:18px;background:#fff;box-shadow:0 12px 28px #0b3d3a14}.hb-rating-detail h3{margin:0 0 8px;color:#0b3d3a;font-size:24px}.hb-rating-detail>p{margin:0 0 18px;color:#49665c;line-height:1.55}.hb-rating-table{width:100%;border-collapse:collapse;font-size:13px}.hb-rating-table th,.hb-rating-table td{padding:8px 10px;border-top:1px solid #dcefe7;text-align:left}.hb-rating-table thead th{background:#0b3d3a;color:#f4d35e;border:0}.hb-rating-table tbody th{color:#c93b45;white-space:nowrap}.hb-rating-link{display:inline-block;margin-top:18px;color:#c93b45;font-weight:800;text-decoration:none}.hb-rating-link:hover{text-decoration:underline}@media(max-width:760px){.hb-rating-grid{grid-template-columns:1fr;gap:22px}.hb-rating-wheel{width:min(290px,82vw)}.hb-rating-detail{padding:18px}.hb-rating-detail h3{font-size:21px}.hb-rating-table{font-size:12px}}
.hero{padding-top:2rem!important;padding-bottom:2rem!important}
.hero h1{font-size:clamp(1.55rem,3vw,2.45rem)!important;line-height:1.08!important}
.hero .lead{font-size:clamp(.88rem,1.2vw,1rem)!important;line-height:1.42!important}
.hero:before{content:'◆';position:absolute;left:clamp(.7rem,4vw,4rem);top:50%;z-index:2;width:58px;height:58px;display:grid;place-items:center;transform:translateY(-50%) rotate(18deg);border:3px solid #0b3d3a;border-radius:12px;background:linear-gradient(145deg,#f4d35e 0 48%,#c93b45 49% 100%);color:#0b3d3a;font:700 2rem/1 Georgia,serif;box-shadow:0 10px 22px rgba(0,0,0,.22);animation:hero-token-float 4s ease-in-out infinite}
@keyframes hero-token-float{0%,100%{margin-top:0;transform:translateY(-50%) rotate(18deg)}50%{margin-top:-12px;transform:translateY(-50%) rotate(28deg)}}
@media(max-width:760px){.hero{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.hero:before{left:.5rem;width:38px;height:38px;font-size:1.25rem;border-width:2px}.hero h1,.hero .lead{max-width:calc(100% - 3rem)!important}}
.mobile-menu-toggle{display:none}
@media(max-width:700px){.header-bar{min-height:64px!important}.mobile-menu-toggle{display:flex;position:absolute;right:1rem;top:calc(50% - 18px);z-index:20;width:42px;height:36px;padding:7px 6px;flex-direction:column;justify-content:space-between;border:2px solid #f4d35e;border-radius:8px;background:#0b3d3a;color:#f4d35e;cursor:pointer}.mobile-menu-toggle span{display:block;height:3px;width:100%;border-radius:3px;background:#f4d35e}.main-nav{display:none!important;border-top:0!important}.main-nav.is-mobile-open{display:block!important;position:absolute;left:0;right:0;top:64px;z-index:15;max-height:calc(100vh - 64px);overflow-y:auto;background:#092d2b;border-top:2px solid #d9b83f;box-shadow:0 12px 28px rgba(0,0,0,.3)}.main-nav .wrap{padding:10px 16px!important}.main-nav .menu{display:block!important;margin:0!important;padding:0!important}.main-nav .menu>li{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;width:100%!important;border-bottom:1px solid rgba(223,245,235,.16)}.main-nav .menu>li>a{display:block!important;padding:14px 4px!important;font-size:16px!important;line-height:1.25}.main-nav li.menu-item-has-children>.sub-toggle{width:42px!important;height:48px!important}.main-nav .sub-menu{grid-column:1/-1!important;margin:0 0 6px 8px!important;padding:0 0 0 12px!important;border-left:2px solid #d9b83f!important}.main-nav .sub-menu a{padding:10px 4px!important;font-size:15px!important}.main-nav .sub-menu .menu-item-has-children{grid-template-columns:minmax(0,1fr) 36px!important}.site-search-trigger{margin-right:3.5rem!important}}
@media(max-width:700px){.header-bar{min-height:86px!important}.mobile-menu-toggle{top:12px!important;right:1rem!important}.main-nav.is-mobile-open{top:86px!important;max-height:calc(100vh - 86px)!important}.main-nav li.menu-item-has-children.is-open>.sub-menu{display:block!important;visibility:visible!important;opacity:1!important}.main-nav li.menu-item-has-children>.sub-menu{visibility:visible!important;opacity:1!important}}
@media(max-width:700px){.mobile-menu-toggle{left:1rem;right:auto!important;top:12px!important}.site-search-trigger{margin-right:0!important;position:relative;z-index:21}.main-nav li.menu-item-has-children>.sub-toggle{position:relative;z-index:30;display:flex!important;align-items:center!important;justify-content:center!important;pointer-events:auto!important}.main-nav li.menu-item-has-children.is-open>.sub-menu{display:block!important;height:auto!important;max-height:none!important;overflow:visible!important}}
@media(max-width:700px){.site-header .logo{display:none!important}.header-bar{grid-template-columns:1fr auto!important}.header-side.right{grid-column:2!important}.mobile-menu-toggle{left:1rem!important;right:auto!important}}
@media(max-width:700px){.site-header .logo{display:flex!important;visibility:visible!important}.site-header .logo-mark{display:none!important}.logo-text{display:block!important;font-size:1.05rem!important;white-space:nowrap!important}.mobile-menu-toggle{top:50%!important;transform:translateY(-50%)!important}.main-nav li.menu-item-has-children>.sub-menu{display:none!important}.main-nav li.menu-item-has-children.is-open>.sub-menu{display:block!important}}
/* Mobile header and independently expandable nested menu levels. */
@media(max-width:700px){
  .site-header{position:relative!important}
  .header-bar{height:86px!important;min-height:86px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important}
  .site-header .logo{display:flex!important;position:absolute!important;left:50%!important;top:43px!important;transform:translate(-50%,-50%)!important;width:auto!important;max-width:calc(100% - 190px)!important;margin:0!important;z-index:19!important}
  .site-header .logo-mark{display:none!important}
  .site-header .logo-text{display:block!important;position:static!important;transform:none!important;max-width:100%!important;overflow:hidden!important}
  .site-header .logo-text .l2{display:flex!important;gap:.2rem!important;white-space:nowrap!important;font-size:clamp(.78rem,3.4vw,1.12rem)!important}
  .mobile-menu-toggle{left:16px!important;right:auto!important;top:43px!important;transform:translateY(-50%)!important}
  .header-side.right{margin-left:auto!important}
  .site-search-trigger{margin:0!important;padding:.65rem .8rem!important}
  .main-nav.is-mobile-open{top:86px!important;max-height:calc(100dvh - 86px)!important}
  .main-nav .menu-item-has-children,.main-nav .sub-menu .menu-item-has-children{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;align-items:center!important;width:100%!important}
  .main-nav .menu-item-has-children>a{grid-column:1!important;min-width:0!important}
  .main-nav .menu-item-has-children>.sub-toggle{grid-column:2!important;grid-row:1!important;width:42px!important;min-width:42px!important;height:44px!important}
  .main-nav .menu-item-has-children>.sub-menu{grid-column:1/-1!important;grid-row:2!important;position:static!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0 0 5px 10px!important;padding:0 0 0 10px!important;border:0!important;border-left:2px solid #d9b83f!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
  .main-nav .menu-item-has-children.is-open>.sub-menu{display:block!important;visibility:visible!important;opacity:1!important}
}
.casino-infographic{width:100%;margin:2rem auto;text-align:center}.casino-infographic img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 12px 28px rgba(11,61,58,.16)}.casino-infographic figcaption{margin-top:.65rem;color:#49665c;font-size:.9rem}.author-profile-photo{max-width:260px;margin:1.5rem auto;text-align:center}.author-profile-photo img{display:block;width:220px;height:220px;margin:auto;border-radius:50%;object-fit:cover;box-shadow:0 10px 24px rgba(11,61,58,.2)}.author-profile-photo figcaption{margin-top:.55rem;color:#49665c;font-size:.9rem}
.mobile-brand{display:none}
@media(max-width:700px){
  .site-header .logo{display:none!important}
  .site-header .mobile-brand{display:block!important;position:absolute;left:50%;top:43px;transform:translate(-50%,-50%);max-width:calc(100% - 190px);overflow:hidden;color:#f4d35e;font-size:clamp(.9rem,4vw,1.18rem);font-weight:800;line-height:1.2;text-decoration:none;white-space:nowrap;z-index:19}
}