/* SlotVerdict — Single Casino Page (1:1 from 03-single-casino-v2.html) */
/* HERO */
.hero {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  margin-bottom: 24px;
}

/* LEFT */
.hero-top { display: flex; gap: 16px; margin-bottom: 16px; }
.c-logo {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.c-verified {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: var(--teal);
  border-radius: 50%;
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-verified svg { width: 10px; height: 10px; color: #fff; }
.c-info { flex: 1; }
.c-name { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.c-url { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.c-url-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
.c-name-cyr { font-weight: 600; color: var(--ink-2); }
.c-alt-names { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin: 10px 0 14px; line-height: 1.5; padding: 10px 14px; background: var(--white); border-radius: var(--r-md); border: 1px solid var(--line); box-sizing: border-box; }
.c-alt-icon { flex-shrink: 0; opacity: 0.4; }
.c-alt-label { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 20px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
.badge-v { background: var(--teal-l); color: var(--teal); border-color: #99F6E4; }
.badge-lic { background: var(--green-l); color: var(--green); border-color: #A7F3D0; }

.c-desc { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 16px; }

/* LIVE STATS ROW — Variant 4 */
.live-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.live-block {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all 0.15s;
}
.live-block:hover {
  border-color: var(--ink-4);
}
.live-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.live-icon.red {
  background: #FEF2F2;
  color: #DC2626;
}
.live-icon.teal {
  background: var(--teal-l);
  color: var(--teal);
}
.live-icon.amber {
  background: var(--amber-l);
  color: var(--amber);
}
.live-content {
  flex: 1;
  min-width: 0;
}
.live-top {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.live-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-1);
}
.live-unit {
  font-size: 12px;
  color: var(--ink-3);
}
.live-pulse-dot {
  width: 6px;
  height: 6px;
  background: #EF4444;
  border-radius: 50%;
  margin-left: 4px;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.live-label {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.live-bar {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.live-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}
.live-bar-fill.teal {
  background: var(--teal);
}
.live-bar-fill.amber {
  background: var(--amber);
}

/* ASPECT SCORES */
/* ═══════════════════════════════════════
   3-grid rating block: Score Tower (desktop) / Left accent line (mobile)
═══════════════════════════════════════ */
.asp-grids-wrap {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.asp-grid {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.asp-grid-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
/* Desktop: hide mobile-only elements */
.asp-grid-title-score  { display: none; }
.asp-mob-verdict       { display: none; }
.asp-mob-moodbar       { display: none; }
.asp-mob-minigrid      { display: none; }
/* Desktop: inner wrapper is transparent, uses parent padding */
.asp-grid-inner {
  display: contents;
}
.asp-grid-total {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: none;
  letter-spacing: 0;
}
/* ── Score Tower summary ── */
.asp-grid-summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
/* Left: score badge */
.asp-gs-badge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.asp-gs-badge.rc-green  { background: #D1FAE5; }
.asp-gs-badge.rc-orange { background: #FFEDD5; }
.asp-gs-badge.rc-yellow { background: #FEF9C3; }
.asp-gs-badge.rc-red    { background: #FEE2E2; }
.asp-gs-score {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}
.asp-gs-score.rc-green  { color: #16a34a; }
.asp-gs-score.rc-orange { color: #ea580c; }
.asp-gs-score.rc-yellow { color: #ca8a04; }
.asp-gs-score.rc-red    { color: #dc2626; }
/* Right: meta */
.asp-gs-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}
/* Verdict pill */
.asp-gs-verdict {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
}
.asp-gs-verdict-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rc-green  .asp-gs-verdict-dot { background: #16a34a; }
.rc-orange .asp-gs-verdict-dot { background: #ea580c; }
.rc-yellow .asp-gs-verdict-dot { background: #ca8a04; }
.rc-red    .asp-gs-verdict-dot { background: #dc2626; }
/* Mini sentiment bar */
.asp-gs-moodbar {
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  gap: 2px;
}
.asp-gs-moodbar-seg { border-radius: 2px; }
/* Stats row */
.asp-gs-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.asp-gs-stat { font-size: 11px; font-weight: 600; }
.asp-gs-stat.pos     { color: #16a34a; }
.asp-gs-stat.neutral { color: var(--ink-3); }
.asp-gs-stat.neg     { color: #dc2626; }
.asp-gs-sep  { font-size: 10px; color: var(--ink-4); }
.asp-gs-count { font-size: 11px; color: var(--ink-4); font-weight: 500; }
/* Bars strip */
.asp-strip { display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Voting bar variant */
.asp-item-vote .asp-item-row { margin-bottom: 4px; }
.asp-vote-cnt { font-size: 12px; font-weight: 700; color: var(--ink-2); flex-shrink: 0; }
.asp-vote-bar-wrap { width: 100%; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.asp-vote-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.asp-vote-bar-fill.rc-green  { background: #22c55e; }
.asp-vote-bar-fill.rc-orange { background: #f97316; }
.asp-vote-bar-fill.rc-yellow { background: #eab308; }
.asp-vote-bar-fill.rc-red    { background: #ef4444; }
/* Responsive */
@media(max-width:900px) {
  /* ══ Left accent line — mobile layout ══ */
  .asp-grids-wrap {
    grid-template-columns: 1fr;
    gap: 10px;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 16px;
  }
  .asp-grid {
    flex-direction: row;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0;
    overflow: hidden;
  }
  /* Colored left bar via ::before */
  .asp-grid::before {
    content: '';
    width: 4px;
    flex-shrink: 0;
    border-radius: 0;
  }
  .asp-grid.grid-reviews::before { background: #0D9488; }
  .asp-grid.grid-expert::before  { background: #7C3AED; }
  .asp-grid.grid-voting::before  { background: #2563EB; }

  /* Inner content area */
  .asp-grid-inner { display: block; flex: 1; padding: 14px 14px 12px; min-width: 0; }

  /* Title row: name left + "score / 5" right */
  .asp-grid-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-1);
    letter-spacing: 0;
    text-transform: none;
  }
  .asp-grid-title svg { display: none; }
  .asp-grid-title-score {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }
  .asp-grid-title-score::after {
    content: '/ 5';
    font-size: 11px;
    font-weight: 500;
    opacity: .5;
    margin-left: 2px;
  }
  .asp-grid-title-score.rc-green  { color: #16a34a; }
  .asp-grid-title-score.rc-orange { color: #ea580c; }
  .asp-grid-title-score.rc-yellow { color: #ca8a04; }
  .asp-grid-title-score.rc-red    { color: #dc2626; }

  /* Mood bar */
  .asp-mob-moodbar {
    display: flex;
    gap: 2px;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
  }
  .asp-mob-moodbar-seg { border-radius: 2px; }

  /* Info line */
  .asp-mob-verdict {
    display: block;
    font-size: 11px;
    color: var(--ink-3);
    margin-bottom: 10px;
  }

  /* Carousel: all chips in horizontal scroll */
  .asp-mob-minigrid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .asp-mob-minigrid::-webkit-scrollbar { display: none; }
  .asp-mob-chip {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    text-align: center;
    flex-shrink: 0;
    min-width: 68px;
  }
  .asp-mob-chip-val {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 3px;
  }
  .asp-mob-chip-lbl {
    font-size: 10px;
    color: var(--ink-3);
    white-space: nowrap;
  }
  /* Vote chips */
  .asp-mob-votechip {
    flex-shrink: 0;
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    min-width: 120px;
  }
  .asp-mob-votechip.good { background: #D1FAE5; border-color: #6ee7b7; }
  .asp-mob-votechip.bad  { background: #FEE2E2; border-color: #fca5a5; }
  .asp-mob-votechip-val  { font-size: 16px; font-weight: 800; line-height: 1; margin-bottom: 3px; }
  .asp-mob-votechip.good .asp-mob-votechip-val { color: #065F46; }
  .asp-mob-votechip.bad  .asp-mob-votechip-val { color: #991B1B; }
  .asp-mob-votechip-lbl  { font-size: 10px; color: var(--ink-3); }
  .asp-mob-votechip.good .asp-mob-votechip-lbl { color: #059669; }
  .asp-mob-votechip.bad  .asp-mob-votechip-lbl { color: #dc2626; }

  /* Hide desktop elements on mobile */
  .asp-grid-summary { display: none; }
  .asp-strip        { display: none; }
}
.asp-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 11px;
  background: var(--bg);
  border-radius: var(--r-sm);
}
.asp-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.asp-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asp-segs {
  display: flex;
  gap: 4px;
  width: 100%;
}
.asp-seg {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  transition: opacity .15s;
}
.asp-seg-off { background: var(--line); }
/* 4-tier color scale: 0-2 red / 2-3 yellow / 3-4 orange / 4-5 green */
.asp-seg-on.rc-green  { background: #22c55e; }
.asp-seg-on.rc-orange { background: #f97316; }
.asp-seg-on.rc-yellow { background: #eab308; }
.asp-seg-on.rc-red    { background: #ef4444; }
.asp-num {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.asp-num.rc-green  { color: #16a34a; }
.asp-num.rc-orange { color: #ea580c; }
.asp-num.rc-yellow { color: #ca8a04; }
.asp-num.rc-red    { color: #dc2626; }

/* SCORE CARD */
.sc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  position: sticky;
  top: 80px;
}
.sc-label { font-size: 10px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; margin-bottom: 8px; }
.sc-big { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sc-num { font-size: 48px; font-weight: 800; line-height: 1; }
.sc-num.ex { color: #0D9488; }
.sc-verdict { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.sc-verdict.ex { color: var(--teal); }
.sc-stars { display: flex; gap: 2px; margin-bottom: 2px; }
.sc-stars svg { width: 14px; height: 14px; }
.sc-count { font-size: 12px; color: var(--ink-3); }

/* Distribution */
.sc-dist { margin-bottom: 14px; }
.sc-dist-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sc-dist-n { font-size: 10px; font-weight: 600; width: 12px; color: var(--ink-3); }
.sc-dist-bar { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; }
.sc-dist-fill { height: 100%; border-radius: 3px; }
.sc-dist-c { font-size: 10px; font-weight: 600; width: 24px; text-align: right; color: var(--ink-3); }

.sc-btns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; font-size: 13px; font-weight: 600; font-family: var(--font); border-radius: var(--r-sm); cursor: pointer; text-decoration: none; border: none; }
.btn-dark { background: var(--ink-1); color: #fff; }
.btn-dark:hover { background: #333; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #0F766E; }

/* Info rows */
.sc-info {}
.info-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.info-row:last-child { border-bottom: none; }
.info-k { color: var(--ink-3); }
.info-v { font-weight: 600; color: var(--ink-1); }
.info-v.teal { color: var(--teal); }
.info-v.green { color: var(--green); }

/* ════════════════════════════════════════════════════ */
/* CASINO STATS CARDS                                    */
/* ════════════════════════════════════════════════════ */
.stats-section {
  margin-bottom: 24px;
}
.stats-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: center;
  transition: all 0.15s;
}
.stat-card:hover {
  border-color: var(--ink-4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.stat-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-icon svg {
  width: 18px;
  height: 18px;
}
.stat-icon.teal { background: var(--teal-l); color: var(--teal); }
.stat-icon.amber { background: var(--amber-l); color: var(--amber); }
.stat-icon.green { background: var(--green-l); color: var(--green); }
.stat-icon.blue { background: var(--blue-l); color: var(--blue); }
.stat-value {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 2px;
}
.stat-label {
  font-size: 11px;
  color: var(--ink-3);
}
.stat-sub {
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 2px;
}
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 10px;
}
.stat-trend.up { background: var(--green-l); color: var(--green); }
.stat-trend.down { background: var(--red-l); color: var(--red); }

/* Wide stat card */
.stat-card-wide {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 16px;
}
.stat-card-wide .stat-icon { margin: 0; }
.stat-card-wide .stat-content { flex: 1; }
.stat-card-wide .stat-value { font-size: 18px; }
.stat-card-wide .stat-bars {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.stat-card-wide .stat-bar-item {
  flex: 1;
  text-align: center;
}
.stat-card-wide .stat-bar-label {
  font-size: 9px;
  color: var(--ink-4);
  margin-bottom: 2px;
}
.stat-card-wide .stat-bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin-bottom: 2px;
}
.stat-card-wide .stat-bar-fill {
  height: 100%;
  border-radius: 2px;
}
.stat-card-wide .stat-bar-num {
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════ */
/* NEW BLOCKS — Common Styles                          */
/* ═══════════════════════════════════════════════════ */
.block-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.block-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-title svg { color: var(--teal); }
.block-tabs { display: flex; gap: 4px; }
.block-tab {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font);
}
.block-tab:hover { background: var(--line); }
.block-tab.active { background: var(--ink-1); color: #fff; border-color: var(--ink-1); }
.block-link { font-size: 12px; font-weight: 600; color: var(--teal); text-decoration: none; }
.block-link:hover { text-decoration: underline; }
.block-badge { padding: 3px 8px; font-size: 10px; font-weight: 700; border-radius: 10px; }
.block-badge.live { background: var(--red-l); color: var(--red); animation: pulse 1.5s infinite; }

/* RATING CHART */
.chart-container {
  display: flex;
  align-items: stretch;
  padding: 16px;
  gap: 12px;
}
.chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-4);
  padding: 10px 0;
}
.chart-area { flex: 1; position: relative; overflow: hidden; }
.chart-svg-wrap { position: relative; }
.chart-svg { width: 100%; height: 150px; display: block; }
.chart-dot { position: absolute; width: 8px; height: 8px; background: var(--teal); border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0 0 0 3px rgba(13,148,136,0.2); }
.chart-x-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 8px;
}
.chart-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-left: 1px solid var(--line);
}
.chart-current-num { font-size: 32px; font-weight: 800; color: var(--teal); }
.chart-current-change { font-size: 12px; font-weight: 600; }
.chart-current-change.up { color: var(--green); }
.chart-current-change.down { color: var(--red); }

/* COMPARISON TABLE */
.compare-table { padding: 0 16px 16px; }
.compare-row {
  display: grid;
  grid-template-columns: 120px repeat(3, 1fr);
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.compare-row:last-child { border-bottom: none; }
.compare-header { padding-bottom: 12px; }
.compare-cell { text-align: center; }
.compare-cell.compare-label { text-align: left; color: var(--ink-3); font-size: 12px; }
.compare-cell.compare-current { background: var(--teal-l); border-radius: var(--r-sm); padding: 6px; }
.compare-logo {
  width: 32px;
  height: 32px;
  background: var(--ink-1);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  margin: 0 auto 4px;
}
.compare-logo.fc { background: #E11D48; }
.compare-logo.cm { background: #7C3AED; }
.compare-cell strong { font-weight: 700; }
.compare-cell .teal { color: var(--teal); }
.compare-cell .green { color: var(--green); }
.compare-cell .amber { color: var(--amber); }

/* WAGER CALCULATOR */
.calc-container { padding: 16px; }
.calc-inputs { display: flex; gap: 16px; margin-bottom: 16px; }
.calc-input-group { flex: 1; }
.calc-label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.calc-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 12px;
}
.calc-input-wrap:focus-within { border-color: var(--teal); }
.calc-input {
  flex: 1;
  border: none;
  background: none;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font);
  outline: none;
  width: 100%;
}
.calc-prefix, .calc-suffix { font-size: 14px; color: var(--ink-3); }
.calc-result {
  background: var(--teal-l);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
}
.calc-result-label { font-size: 12px; color: var(--teal); margin-bottom: 4px; }
.calc-result-value { font-size: 28px; font-weight: 800; color: var(--ink-1); }
.calc-result-note { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.calc-tips { display: flex; gap: 12px; }
.calc-tip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--ink-2);
}
.calc-tip svg { color: var(--teal); flex-shrink: 0; }

/* TOP SLOTS */
.slots-grid { display: flex; flex-direction: column; }
.slot-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.slot-card:last-child { border-bottom: none; }
.slot-card:hover { background: var(--bg); }
.slot-rank {
  width: 28px;
  height: 28px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
}
.slot-card:nth-child(1) .slot-rank { background: var(--amber-l); color: var(--amber); }
.slot-card:nth-child(2) .slot-rank { background: var(--line); color: var(--ink-2); }
.slot-card:nth-child(3) .slot-rank { background: #FED7AA; color: #C2410C; }
.slot-img { font-size: 24px; }
.slot-info { flex: 1; }
.slot-name { font-size: 13px; font-weight: 600; }
.slot-provider { font-size: 11px; color: var(--ink-3); }
.slot-rtp { font-size: 11px; color: var(--ink-3); }
.slot-rtp strong { color: var(--teal); }

/* WINS FEED */
.wins-feed { padding: 0; }
.win-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.win-item:last-child { border-bottom: none; }
.win-item.jackpot { background: var(--amber-l); }
.win-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--teal-l) 0%, var(--green-l) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
}
.win-avatar.jp { background: var(--amber); color: #fff; font-size: 16px; }
.win-info { flex: 1; }
.win-text { font-size: 13px; color: var(--ink-2); }
.win-text strong { color: var(--ink-1); }
.win-amount { font-weight: 700; color: var(--green); }
.win-amount.jackpot { color: var(--amber); font-size: 14px; }
.win-time { font-size: 11px; color: var(--ink-4); margin-top: 2px; }

/* NEWS */
.news-list { padding: 0; }
.news-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.news-item:last-child { border-bottom: none; }
.news-date {
  width: 44px;
  height: 44px;
  background: var(--bg);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.news-day { font-size: 16px; font-weight: 700; line-height: 1; }
.news-month { font-size: 10px; color: var(--ink-3); text-transform: uppercase; }
.news-content { flex: 1; }
.news-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.news-desc { font-size: 12px; color: var(--ink-3); }
.news-tag {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  flex-shrink: 0;
}
.news-tag.new { background: var(--green-l); color: var(--green); }
.news-tag.bonus { background: var(--amber-l); color: var(--amber); }
.news-tag.tournament { background: var(--blue-l); color: var(--blue); }

/* TIMELINE */
.timeline { padding: 16px; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--line);
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  position: relative;
}
.timeline-dot {
  width: 12px;
  height: 12px;
  background: var(--line);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
}
.timeline-dot.current { background: var(--teal); box-shadow: 0 0 0 4px var(--teal-l); }
.timeline-content { flex: 1; }
.timeline-year { font-size: 12px; font-weight: 700; color: var(--teal); margin-bottom: 2px; }
.timeline-text { font-size: 13px; color: var(--ink-2); }

/* ALTERNATIVES */
.alts-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px;
  /* Show 3.5 cards */
}
.alts-grid::-webkit-scrollbar { display: none; }
.alts-grid::after {
  content: '';
  flex-shrink: 0;
  width: 4px;
}
.similar-casinos {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-top: 24px;
  overflow: hidden;
}
.similar-casinos .block-title {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.alt-card {
  flex: 0 0 calc(100% / 3.5);
  min-width: 0;
  scroll-snap-align: start;
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: center;
}
.alt-logo {
  width: 48px;
  height: 48px;
  background: var(--ink-1);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 auto 10px;
}
.alt-logo.fc { background: #E11D48; }
.alt-logo.cm { background: #7C3AED; }
.alt-logo.pm { background: #059669; }
.alt-info { margin-bottom: 8px; }
.alt-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.alt-rating { font-size: 12px; color: var(--amber); display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.alt-rating svg { fill: var(--amber); flex-shrink: 0; }
.alt-rating-num { font-size: 15px; font-weight: 800; }
.alt-rating-num.ex { color: #0D9488; }
.alt-rating-num.good { color: #16a34a; }
.alt-rating-num.avg { color: #ea580c; }
.alt-rating-num.low { color: #dc2626; }
.alt-rating-num.gd { color: var(--green); }
.alt-rating-num.ok { color: var(--amber); }
.alt-rating-label { font-size: 10px; color: var(--ink-3); font-weight: 500; }
.alt-meta { font-size: 11px; color: var(--ink-3); margin-bottom: 10px; }
.alt-meta span { margin: 0 4px; }
.alt-btn {
  display: block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.alt-btn:hover { background: var(--teal-l); border-color: var(--teal); }

/* TABS */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px;
  margin-bottom: 16px;
}
.tab {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font);
}
.tab:hover { background: var(--bg); }
.tab.active { background: var(--ink-1); color: #fff; }
.tab-hidden { position: absolute; left: -9999px; visibility: hidden; height: 0; overflow: hidden; }
.sv-hist-hidden { position: absolute; left: -9999px; visibility: hidden; }
.sv-hist-noscript table { font-size: 12px; border-collapse: collapse; margin: 10px 0; }
.sv-hist-noscript td, .sv-hist-noscript th { border: 1px solid #ddd; padding: 4px 8px; }

/* ════════════════════════════════════════════════════ */
/* REVIEWS — Advanced Design                             */
/* ════════════════════════════════════════════════════ */
.reviews-section { margin-bottom: 24px; }
.reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.reviews-title {
  font-size: 18px;
  font-weight: 700;
}

/* Search & Toolbar */
.reviews-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.reviews-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.reviews-search svg { color: var(--ink-4); flex-shrink: 0; }
.reviews-search-input {
  flex: 1;
  border: none;
  padding: 10px 0;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  background: none;
}
.reviews-sort-select {
  padding: 10px 12px;
  font-size: 12px;
  font-family: var(--font);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  cursor: pointer;
}
.reviews-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.reviews-filter-btn:hover { background: var(--bg); }
.reviews-filter-btn svg { color: var(--teal); }

/* Quick Filters */
.reviews-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.qf-btn {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  cursor: pointer;
}
.qf-btn:hover { background: var(--bg); border-color: var(--ink-4); }
.qf-btn.active { background: var(--ink-1); color: #fff; border-color: var(--ink-1); }
.qf-btn.positive:hover { background: var(--green-l); border-color: var(--green); color: var(--green); }
.qf-btn.negative:hover { background: var(--red-l); border-color: var(--red); color: var(--red); }
.qf-btn.verified:hover { background: var(--teal-l); border-color: var(--teal); color: var(--teal); }

/* Advanced Filters */
.reviews-adv-filters {
  display: flex;
  gap: 20px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.adv-filter-group { flex: 1; }
.adv-filter-label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); margin-bottom: 8px; }
.adv-filter-options { display: flex; flex-direction: column; gap: 6px; }
.adv-filter-options label { font-size: 12px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.adv-filter-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  font-family: var(--font);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
}

/* EXPERT REVIEW */
.expert-review {
  background: linear-gradient(135deg, var(--teal-l) 0%, #E0F2FE 100%);
  border: 2px solid var(--teal);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.expert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.expert-content { padding: 16px; }
.expert-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.expert-avatar { flex-shrink: 0; }
.expert-avatar img { width: 56px; height: 56px; border-radius: 50%; }
.expert-info { flex: 1; }
.expert-name { font-size: 15px; font-weight: 700; }
.expert-role { font-size: 12px; color: var(--ink-2); }
.expert-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.expert-meta span { margin-right: 4px; }
.expert-score {
  text-align: center;
  padding: 12px 16px;
  background: var(--white);
  border-radius: var(--r-md);
}
.expert-score-num { font-size: 32px; font-weight: 800; color: var(--teal); line-height: 1; }
.expert-score-label { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.expert-text { font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.expert-text p { margin: 0 0 10px; }
.expert-text p:last-child { margin-bottom: 0; }
.expert-text strong { color: var(--ink-1); }
.expert-verdict {
  margin-top: 14px;
  padding: 12px;
  background: var(--white);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--teal);
}
.expert-verdict-title { font-size: 11px; font-weight: 700; color: var(--teal); margin-bottom: 4px; }
.expert-verdict-text { font-size: 13px; color: var(--ink-2); }
.expert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,0.5);
  border-top: 1px solid rgba(13,148,136,0.2);
}
.expert-date { font-size: 11px; color: var(--ink-3); }
.expert-share {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--teal);
  background: var(--white);
  border: 1px solid var(--teal);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.expert-share:hover { background: var(--teal); color: #fff; }

/* Featured Review Badge */
.featured-review { margin-bottom: 8px; }
.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--amber-l);
  color: var(--amber);
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
}
.featured-badge svg { color: var(--amber); }

/* Review Summary Bar */
.reviews-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.summary-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  text-align: center;
}
.summary-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.summary-num {
  font-size: 22px;
  font-weight: 800;
}
.summary-num.green { color: var(--green); }
.summary-num.amber { color: var(--amber); }
.summary-num.red { color: var(--red); }
.summary-label {
  font-size: 11px;
  color: var(--ink-3);
}
.summary-bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.summary-bar-fill {
  height: 100%;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════ */
/* PROS & CONS Statistics Block                        */
/* ═══════════════════════════════════════════════════ */
.pros-cons-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.pc-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.pc-subtitle {
  font-size: 12px;
  color: var(--ink-3);
}
.pc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
}
.pc-col {
  padding: 16px;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
}
.pc-col:first-child {
  border-right: 1px solid var(--line);
}
.pc-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.pc-col-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-col-icon svg {
  width: 14px;
  height: 14px;
}
.pc-col-header.pros .pc-col-icon {
  background: var(--green-l);
  color: var(--green);
}
.pc-col-header.cons .pc-col-icon {
  background: var(--red-l);
  color: var(--red);
}
.pc-col-title {
  font-size: 13px;
  font-weight: 700;
}
.pc-col-header.pros .pc-col-title { color: var(--green); }
.pc-col-header.cons .pc-col-title { color: var(--red); }

.pc-list {}
.pc-item {
  margin-bottom: 12px;
}
.pc-item:last-child {
  margin-bottom: 0;
}
.pc-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.pc-item-name {
  font-size: 13px;
  color: var(--ink-1);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-item-count {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.pc-item-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.pc-item-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.pc-item-fill.green { background: var(--green); }
.pc-item-fill.red { background: var(--red); }

@media (max-width: 600px) {
  .pc-grid { grid-template-columns: 1fr; }
  .pc-col:first-child { border-right: none; border-bottom: 1px solid var(--line); }
}

/* Review Card — Enhanced */
.rv {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.rv:hover {
  border-color: var(--ink-4);
}

/* Review Header */
.rv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.rv-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}
.rv-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-l) 0%, var(--amber-l) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
}
.rv-level {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: var(--amber);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-author { flex: 1; }
.rv-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.rv-name {
  font-size: 14px;
  font-weight: 700;
}
.rv-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: var(--teal-l);
  color: var(--teal);
  font-size: 9px;
  font-weight: 600;
  border-radius: 10px;
}
.rv-author-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-3);
}
.rv-author-stat {
  display: flex;
  align-items: center;
  gap: 3px;
}
.rv-score-box {
  text-align: right;
}
.rv-score-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.rv-score-num.rc-green  { color: #16a34a; }
.rv-score-num.rc-orange { color: #ea580c; }
.rv-score-num.rc-yellow { color: #ca8a04; }
.rv-score-num.rc-red    { color: #dc2626; }
.rv-score-num.ex { color: #0D9488; }
.rv-score-num.good { color: #16a34a; }
.rv-score-num.avg { color: #ea580c; }
.rv-score-num.low { color: #dc2626; }
.rv-score-label {
  font-size: 10px;
  color: var(--ink-3);
}

/* Review Body */
.rv-body {
  padding: 14px 16px;
}

/* Mini Aspect Scores */
/* rv-aspects — now defined in new rv-asp block */
.rv-aspects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.rv-asp {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px;
  background: var(--bg);
  border-radius: var(--r-sm);
}
.rv-asp-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rv-asp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rv-asp-num {
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.rv-asp-segs {
  display: flex;
  gap: 3px;
  width: 100%;
}
.rv-asp-seg {
  flex: 1;
  height: 5px;
  border-radius: 2px;
}
.rv-asp-seg-off {
  background: var(--line);
}

/* Review Text */
.rv-text {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 12px;
}

/* Pros/Cons */
.rv-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.rv-pc {
  padding: 10px;
  border-radius: var(--r-sm);
}
.rv-pc.pros { background: var(--green-l); }
.rv-pc.cons { background: var(--red-l); }
.rv-pc-title {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 6px;
}
.rv-pc.pros .rv-pc-title { color: var(--green); }
.rv-pc.cons .rv-pc-title { color: var(--red); }
.rv-pc-title svg {
  vertical-align: -2px;
  margin-right: 2px;
}
.rv-pc.pros .rv-pc-title svg { color: var(--green); }
.rv-pc.cons .rv-pc-title svg { color: var(--red); }
.rv-pc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rv-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.7);
}
.rv-pc.pros .rv-tag { color: var(--green); }
.rv-pc.cons .rv-tag { color: var(--red); }

/* Screenshots */
.rv-screenshots {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.rv-screenshot {
  width: 80px;
  height: 60px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ink-4);
  cursor: pointer;
}
.rv-screenshot:hover {
  border-color: var(--teal);
}
.rv-screenshot-more {
  background: var(--ink-1);
  color: #fff;
  font-weight: 600;
}

/* Review Footer */
.rv-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.rv-helpful {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rv-helpful-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font);
}
.rv-helpful-btn:hover { background: var(--bg); border-color: var(--ink-4); }
.rv-helpful-btn.active { background: var(--teal-l); border-color: var(--teal); color: var(--teal); }
.rv-helpful-btn svg { width: 12px; height: 12px; }
.rv-date {
  font-size: 11px;
  color: var(--ink-4);
  margin-left: auto;
}
.rv-share {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  font-size: 11px;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
}
.rv-share:hover { color: var(--ink-1); }
.rv-share svg { width: 12px; height: 12px; }

/* Casino Response */
.rv-response {
  margin: 0 16px 14px;
  padding: 12px;
  background: var(--teal-l);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.rv-response-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.rv-response-logo {
  width: 24px;
  height: 24px;
  background: var(--ink-1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
}
.rv-response-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  background: var(--teal);
  color: #fff;
  border-radius: 4px;
}
.rv-response-date {
  font-size: 10px;
  color: var(--ink-3);
  margin-left: auto;
}
.rv-response-text {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* 2-COL LAYOUT */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}
.content-main {
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* SIDEBAR WIDGETS */
.sidebar-extended {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-widgets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.widget {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.widget-hd {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-1);
}
.widget-hd svg {
  color: var(--teal);
  flex-shrink: 0;
}
.widget-bd { padding: 12px 16px; }

/* Widget rows */
.w-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.w-row:last-child { border-bottom: none; }
.w-k { color: var(--ink-3); }
.w-v { font-weight: 600; color: var(--ink-1); text-align: right; }
.w-v.teal { color: var(--teal); }
.w-v.green { color: var(--green); }
.w-v.amber { color: var(--amber); }
.w-v.red { color: var(--red); }

/* Mini grid for games breakdown */
.w-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.w-mini {
  text-align: center;
  padding: 6px 4px;
  background: var(--bg);
  border-radius: var(--r-sm);
}
.w-mini-num {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
}
.w-mini-label {
  display: block;
  font-size: 9px;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Bonus highlight */
.w-bonus {
  background: var(--amber-l);
  border-radius: var(--r-sm);
  padding: 10px;
  margin-bottom: 8px;
  text-align: center;
}
.w-bonus-label {
  font-size: 10px;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: 2px;
}
.w-bonus-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-1);
}

/* Trust */
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.trust-item:last-child { border-bottom: none; }
.trust-icon {
  width: 28px;
  height: 28px;
  background: var(--teal-l);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.trust-label { font-size: 12px; font-weight: 600; }
.trust-sub { font-size: 10px; color: var(--ink-3); }

/* Payments */
.pays { display: flex; flex-wrap: wrap; gap: 6px; }
.pay { padding: 4px 8px; font-size: 11px; font-weight: 500; background: var(--bg); border-radius: 4px; }

/* Contact Widget */
.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.contact-item:last-of-type { border-bottom: none; }
.contact-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-icon.chat { background: var(--green-l); color: var(--green); }
.contact-icon.mail { background: var(--blue-l); color: var(--blue); }
.contact-icon.phone { background: var(--amber-l); color: var(--amber); }
.contact-icon.tg { background: #E0F2FE; color: #0EA5E9; }
.contact-info { flex: 1; }
.contact-label { font-size: 10px; color: var(--ink-3); }
.contact-value { font-size: 12px; font-weight: 600; }
.contact-value.green { color: var(--green); }
.contact-badge { font-size: 8px; }
.contact-badge.online { color: var(--green); animation: pulse 1.5s infinite; }
.contact-response {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--ink-3);
}
.contact-response svg { color: var(--teal); }

/* Social Widget */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.social-btn.tg { background: #E0F2FE; color: #0EA5E9; }
.social-btn.tg:hover { background: #0EA5E9; color: #fff; }
.social-btn.ig { background: #FCE7F3; color: #DB2777; }
.social-btn.ig:hover { background: #DB2777; color: #fff; }
.social-btn.fb { background: #DBEAFE; color: #2563EB; }
.social-btn.fb:hover { background: #2563EB; color: #fff; }
.social-btn.yt { background: var(--red-l); color: var(--red); }
.social-btn.yt:hover { background: var(--red); color: #fff; }

/* Legal Widget */
.legal-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.legal-item:last-of-type { border-bottom: none; }
.legal-label { font-size: 10px; color: var(--ink-3); margin-bottom: 2px; }
.legal-value { font-size: 12px; font-weight: 600; }
.legal-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.legal-links a {
  font-size: 11px;
  color: var(--teal);
  text-decoration: none;
}
.legal-links a:hover { text-decoration: underline; }

/* SEO ACCORDION */
.seo-acc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.seo-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
}
.seo-toggle:hover { background: var(--bg); }
.seo-toggle-icon {
  width: 36px;
  height: 36px;
  background: var(--teal-l);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
}
.seo-toggle[aria-expanded="true"] .seo-toggle-icon { background: var(--teal); color: #fff; }
.seo-toggle-icon svg { width: 18px; height: 18px; }
.seo-toggle-txt { flex: 1; }
.seo-toggle-label { font-size: 14px; font-weight: 700; color: var(--ink-1); display: block; }
.seo-toggle-sub { font-size: 12px; color: var(--ink-3); }
.seo-toggle-arrow { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--ink-4); transition: transform 0.2s; }
.seo-toggle[aria-expanded="true"] .seo-toggle-arrow { transform: rotate(180deg); color: var(--teal); }
.seo-toggle-arrow svg { width: 16px; height: 16px; }
.seo-content { display: none; border-top: 1px solid var(--line); }
.seo-content.open { display: block; }
.seo-inner { padding: 20px; }

/* RESPONSIVE */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .sc { position: static; }
  .content-grid { grid-template-columns: 1fr !important; }
  .content-main { width:100% !important; min-width:0 !important; overflow-x:hidden !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .asp-strip { grid-template-columns: repeat(5, 1fr); }
  .nav { display: none; }
  .rv-aspects { flex-wrap: wrap; }
  .rv-asp { flex: 0 0 calc(33.33% - 4px); }
  .rv-pros-cons { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card-wide { grid-column: span 2; }
}

/* ═══ LOGO WRAP (verified badge positioning) ═══ */
.c-logo-wrap {
  position: relative;
  flex-shrink: 0;
}
.c-logo-wrap .sv-logo {
  width: 100px;
  height: 100px;
  border-radius: var(--r-lg);
  border: 2px solid var(--line);
  background: var(--white);
  padding: 8px;
}
.c-logo-wrap .sv-logo img {
  border-radius: var(--r-md);
}
.c-logo-wrap .c-verified {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background: var(--teal);
  border-radius: 50%;
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(13,148,136,0.3);
}
.c-logo-wrap .c-verified svg { width: 11px; height: 11px; color: #fff; }

/* Description block */
.c-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  border-left: 3px solid var(--teal);
}

/* Badges refined */
.badges { margin-top: 4px; }

/* Better spacing between sections */
.asp-strip { margin-bottom: 0; }
.hero-left { padding-bottom: 4px; }

/* ═══ REVIEW VOTES ═══ */
.rv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}
.rv-votes {
  display: flex;
  gap: 8px;
}
.rv-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  color: var(--ink-2);
  transition: all 0.15s;
}
.rv-vote-btn:hover { border-color: var(--ink-4); }
.rv-vote-btn.rv-like:hover,
.rv-vote-btn.rv-like.active { background: var(--teal-l); border-color: var(--teal); color: var(--teal); }
.rv-vote-btn.rv-dislike:hover,
.rv-vote-btn.rv-dislike.active { background: var(--red-l); border-color: var(--red); color: var(--red); }
.rv-vote-btn.voted { opacity: 0.6; pointer-events: none; }
.rv-vote-btn svg { width: 14px; height: 14px; }
.rv-vote-count { min-width: 12px; text-align: center; }
.rv-date { font-size: 12px; color: var(--ink-3); }

/* ═══ EXPERT REVIEW ═══ */
.expert-review {
  background: linear-gradient(135deg, var(--teal-l) 0%, #E0F2FE 100%);
  border: 2px solid var(--teal);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.expert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.expert-badge svg { color: #fff; }
.expert-content { padding: 16px; }
.expert-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.expert-avatar { flex-shrink: 0; }
.expert-info { flex: 1; }
.expert-name { font-size: 15px; font-weight: 700; }
.expert-role { font-size: 12px; color: var(--ink-2); }
.expert-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.expert-meta span { margin-right: 4px; }
.expert-score {
  text-align: center;
  padding: 12px 16px;
  background: var(--white);
  border-radius: var(--r-md);
}
.expert-score-num { font-size: 32px; font-weight: 800; color: var(--teal); line-height: 1; }
.expert-score-label { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.expert-text { font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.expert-text p { margin: 0 0 10px; }
.expert-text p:last-child { margin-bottom: 0; }
.expert-text strong { color: var(--ink-1); }
.expert-verdict {
  margin-top: 14px;
  padding: 12px;
  background: var(--white);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--teal);
}
.expert-verdict-title { font-size: 11px; font-weight: 700; color: var(--teal); margin-bottom: 4px; }
.expert-verdict-text { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.expert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,0.5);
  border-top: 1px solid rgba(13,148,136,0.2);
}
.expert-date { font-size: 11px; color: var(--ink-3); }

/* ═══ FAQ ═══ */
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--white);
}
.faq-item[open] {
  border-color: var(--teal);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  cursor: pointer;
  list-style: none;
  transition: background 0.15s;
}
.faq-q:hover { background: var(--bg); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { display: none; content: ''; }
.faq-q svg {
  color: var(--ink-4);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] .faq-q svg {
  transform: rotate(180deg);
  color: var(--teal);
}
.faq-item[open] .faq-q {
  border-bottom: 1px solid var(--line);
  color: var(--teal);
}
.faq-a {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7;
}

/* Alt card logo */
.alt-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Catalog verified badge */
.cc-verified-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
}
.cc-verified-badge svg { color: #fff; }
.cc-top { position: relative; }

/* rv-reply logo fix */
.rv-reply-header .sv-logo { margin: 0; }

/* ═══ BONUS SECTION ═══ */
.bn-section { padding: 0; }

.bn-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.bn-hd-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.bn-hd-title svg { color: var(--teal); }
.bn-hd-count {
  font-size: 12px;
  color: var(--ink-3);
  background: var(--bg);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--line);
}

.bn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Card ── */
.bn-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  transition: box-shadow .18s, border-color .18s;
}
.bn-item:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.bn-item-accent {
  width: 4px;
  flex-shrink: 0;
}

.bn-item-inner {
  flex: 1;
  padding: 16px 18px;
  min-width: 0;
}

/* ── Top row ── */
.bn-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.bn-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.bn-item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  margin: 0;
  flex: 1;
}

.bn-item-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.bn-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.bn-badge--hot { background: #FEF2F2; color: #B91C1C; }
.bn-badge--new { background: #EFF6FF; color: #1D4ED8; }
.bn-badge--ex  { background: #F5F3FF; color: #6D28D9; }

/* ── Body: value + params ── */
.bn-item-body {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.bn-item-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bn-item-max {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  display: block;
}

.bn-item-params {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  border-left: 1px solid var(--line);
  margin-left: 16px;
  padding-left: 16px;
}

.bn-param {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid var(--line);
}
.bn-param:last-child { border-right: none; padding-right: 0; }
.bn-param:first-child { padding-left: 0; }

.bn-param-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
}
.bn-param-lbl {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap;
}

.bn-item-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .bn-item-body { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bn-item-value { font-size: 20px; }
  .bn-item-params {
    border-left: none;
    border-top: 1px solid var(--line);
    margin-left: 0;
    padding-left: 0;
    padding-top: 12px;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0;
  }
  .bn-param {
    padding: 0 12px 0 0;
    border-right: none;
    align-items: flex-start;
    min-width: 80px;
  }
  .bn-param:first-child { padding-left: 0; }
  .bn-item-top { margin-bottom: 10px; }
}

/* ═══ REACTION BLOCK ═══ */
.reaction-block{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px}
.reaction-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.reaction-title{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--ink-1)}
.reaction-title svg{color:#e11d48;flex-shrink:0}
.reaction-total{font-size:12px;color:var(--ink-3);font-weight:600}
.reaction-pills{display:flex;gap:8px;flex-wrap:wrap}
.reaction-btn{display:flex;align-items:center;gap:7px;padding:8px 14px 8px 8px;background:var(--white);border:1.5px solid var(--line);border-radius:22px;cursor:pointer;transition:all .18s;font-family:var(--font);position:relative}
.reaction-btn-top{display:contents}
.reaction-btn-bottom{display:contents}
.reaction-btn:hover{border-color:var(--rc);background:var(--rb)}
.reaction-btn.picked{border-color:var(--rc);background:var(--rb)}
.reaction-btn-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.reaction-btn-icon svg{width:16px;height:16px}
.reaction-btn-label{font-size:13px;font-weight:600;color:var(--ink-1);white-space:nowrap}
.reaction-btn-count{font-size:12px;font-weight:700;color:var(--ink-2);min-width:20px}
.reaction-btn-pct{font-size:10px;color:var(--ink-3)}
.reaction-voted-mark{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--rc);flex-shrink:0}
.reaction-voted-mark svg{color:#fff}
.reaction-footer{margin-top:12px;font-size:12px;color:var(--ink-3);text-align:center}
.reaction-footer strong{color:var(--ink-2)}

/* ═══════════════════════════════════════════
   MOBILE ADAPTATION v2 — Single Casino Page
   Читабельно, крупно, зручно
   ═══════════════════════════════════════════ */

@media(max-width:1024px){
  .hero{grid-template-columns:1fr;gap:16px}
  .sc{position:static!important;width:100%}
  .content-grid{grid-template-columns:1fr !important;gap:16px}
  .content-main{width:100% !important;min-width:0 !important;overflow-x:hidden !important;box-sizing:border-box !important}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex-shrink:0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){

  /* PAGE */
  .page{padding:14px 16px 90px;overflow-x:hidden}
  .bc{font-size:12px;margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* HERO — logo + name inline */
  .hero{gap:12px;margin-bottom:14px}
  .hero-top{flex-direction:row;align-items:flex-start;gap:12px}
  .c-logo-wrap .sv-logo{width:72px;height:72px;padding:6px}
  .c-logo-wrap .c-verified{width:18px;height:18px;bottom:2px;left:2px;border-width:2px}
  .c-logo-wrap .c-verified svg{width:9px;height:9px}
  .c-info{flex:1;min-width:0}
  .c-name{font-size:20px;font-weight:800;margin-bottom:2px;line-height:1.2}
  .c-url{font-size:11px;margin-bottom:4px}
  .c-url-dot{width:5px;height:5px}
  .c-name-cyr{font-size:11px}
  .c-alt-names{font-size:12px;margin:8px 0 12px;padding:10px 14px;gap:6px;box-sizing:border-box;max-width:100%;word-break:break-word;overflow:hidden}
  .badges{gap:4px;flex-wrap:wrap;margin-top:2px}
  .badge{font-size:10px;padding:3px 7px}
  .badge svg{width:10px;height:10px}
  .c-desc{font-size:13px;line-height:1.5;margin-bottom:12px}

  /* LIVE STATS — 1 per row, horizontal */
  .live-row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
  .live-block{flex-direction:row;align-items:center;gap:14px;padding:12px 14px}
  .live-icon{width:36px;height:36px;border-radius:8px;flex-shrink:0}
  .live-icon svg{width:18px;height:18px}
  .live-content{flex:1;min-width:0}
  .live-top{gap:5px}
  .live-num{font-size:22px;font-weight:800}
  .live-unit{font-size:12px}
  .live-label{font-size:12px;color:var(--ink-3)}
  .live-bar{height:4px;margin-top:5px}
  .live-pulse-dot{width:7px;height:7px}

  /* ASP STRIP — same style as rv-asp, full rows */
  .asp-strip{padding:12px;gap:5px;margin-bottom:14px}
  .asp-item{padding:10px 12px;gap:6px}
  .asp-item-row{}
  .asp-label{font-size:13px}
  .asp-segs{gap:3px}
  .asp-seg{height:6px;border-radius:3px}
  .asp-num{font-size:15px}

  /* SCORE CARD */
  .sc{padding:16px;border-radius:var(--r-lg)}
  .sc-label{font-size:11px;margin-bottom:10px}
  .sc-big{flex-direction:row;align-items:center;gap:16px;margin-bottom:14px}
  .sc-num{font-size:44px;line-height:1}
  .sc-verdict{font-size:14px;font-weight:700}
  .sc-stars svg{width:14px;height:14px}
  .sc-count{font-size:12px}
  .sc-dist{margin-bottom:14px}
  .sc-dist-bar{height:5px}
  .sc-dist-n{font-size:11px}
  .sc-dist-c{font-size:11px}
  .sc-btns{flex-direction:row;gap:10px;margin-bottom:14px;display:none}
  .sc-btns a,.sc-btns button{flex:1;text-align:center;justify-content:center;padding:12px 8px;font-size:13px}
  .info-row{padding:8px 0;font-size:13px}
  .info-k{font-size:12px}
  .info-v{font-size:13px}

  /* STATS GRID */
  .stats-section{margin-bottom:18px}
  .stats-title{font-size:16px;margin-bottom:14px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:16px 14px}
  .stat-icon{width:36px;height:36px;margin-bottom:10px;border-radius:9px}
  .stat-icon svg{width:18px;height:18px}
  .stat-value{font-size:22px;margin-bottom:3px}
  .stat-label{font-size:12px}
  .stat-sub{font-size:11px}
  .stat-card-wide{grid-column:1/-1;padding:14px 16px}
  .stat-card-wide .stat-value{font-size:20px}
  .stat-bars{gap:8px;margin-top:8px}
  .stat-bar-label{font-size:11px}
  .stat-bar-num{font-size:12px}
  .stat-bar{height:5px}

  /* CHART */
  .block-section{margin-bottom:18px}
  .block-header{flex-wrap:wrap;gap:10px;padding:14px 16px}
  .block-title{font-size:15px}
  .block-tab{padding:5px 12px;font-size:12px}
  .chart-container{padding:14px 14px 0}
  .chart-y-axis{font-size:11px}
  .chart-x-axis{font-size:10px}

  /* REACTION BLOCK */
  .reaction-block{padding:16px;margin-bottom:14px}
  .reaction-header{margin-bottom:12px}
  .reaction-title{font-size:15px;gap:7px;font-weight:700}
  .reaction-title svg{width:16px;height:16px}
  .reaction-total{font-size:12px}
  .reaction-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .reaction-btn{
    border-radius:12px;
    padding:12px 14px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    min-height:auto;
  }
  .reaction-btn-top{display:flex;align-items:center;gap:10px;width:100%}
  .reaction-btn-icon{width:36px;height:36px;flex-shrink:0;border-radius:9px}
  .reaction-btn-icon svg{width:18px;height:18px}
  .reaction-btn-label{font-size:14px;font-weight:700;flex:1;color:var(--ink-1)}
  .reaction-btn-bottom{
    display:flex;align-items:center;gap:0;
    width:100%;
    background:var(--bg);
    border-radius:7px;
    padding:7px 10px;
    box-sizing:border-box;
  }
  .reaction-btn-count{
    font-size:16px;font-weight:800;
    color:var(--ink-1);
    margin-right:4px;
    flex-shrink:0;
  }
  .reaction-btn-count::after{
    content:" голосів";
    font-size:11px;font-weight:500;
    color:var(--ink-3);
  }
  .reaction-btn-pct{
    font-size:13px;font-weight:700;
    color:var(--rc);
    margin-left:auto;
    flex-shrink:0;
  }
  .reaction-voted-mark{flex-shrink:0;margin-left:4px}
  .reaction-footer{font-size:12px;margin-top:14px;text-align:center}

  /* PROS CONS SECTION */
  .pros-cons-section{margin-bottom:16px}
  .pc-header{padding:14px 16px}
  .pc-title{font-size:15px}
  .pc-subtitle{font-size:12px}
  .pc-grid{grid-template-columns:1fr}
  .pc-col:first-child{border-right:none;border-bottom:1px solid var(--line)}
  .pc-col{padding:14px 16px}
  .pc-item-name{font-size:13px}
  .pc-item-count{font-size:11px}
  .pc-item-bar{height:6px}

  /* REVIEWS */
  .reviews-section{margin-bottom:18px}
  .reviews-title{font-size:17px;font-weight:700}
  .reviews-toolbar{flex-direction:column;gap:10px;margin-bottom:12px}
  .reviews-search{width:100%;border-radius:10px;height:44px}
  .reviews-search svg{width:16px;height:16px}
  .reviews-search-input{font-size:15px!important;padding:11px 0}
  .reviews-sort-select{width:100%;height:44px;font-size:15px!important;border-radius:10px}
  .reviews-quick-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:7px;margin-bottom:16px;padding-bottom:2px}
  .reviews-quick-filters::-webkit-scrollbar{display:none}
  .qf-btn{flex-shrink:0;white-space:nowrap;padding:8px 16px;font-size:13px;font-weight:600;border-radius:22px;min-height:38px}

  /* SUMMARY CARDS */
  .reviews-summary{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:16px}
  .summary-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:10px;overflow:hidden;text-align:left}
  .summary-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .summary-num{font-size:28px;font-weight:800;line-height:1}
  .summary-label{font-size:13px;color:var(--ink-2);font-weight:600}
  .summary-card-right{display:none}
  .summary-bar{height:7px;border-radius:4px;width:100%;margin-top:0}

  /* REVIEW CARD */
  .rv{margin-bottom:12px;border-radius:14px}
  .rv-header{padding:14px 16px;gap:12px;align-items:flex-start}
  .rv-avatar{width:44px;height:44px;font-size:14px;flex-shrink:0}
  .rv-author{flex:1;min-width:0}
  .rv-author-row{gap:6px;flex-wrap:wrap;margin-bottom:3px}
  .rv-name{font-size:14px;font-weight:700}
  .rv-verified{font-size:10px}
  .rv-author-meta{display:flex;gap:12px;font-size:12px;flex-wrap:wrap;margin-top:2px}
  .rv-author-stat svg{width:13px;height:13px}
  .rv-score-box{text-align:right;flex-shrink:0;padding-left:10px}
  .rv-score-num{font-size:28px;line-height:1}
  .rv-score-label{font-size:11px;margin-top:2px}
  .rv-body{padding:14px 16px}
  /* rv-aspects — same layout as asp-strip */
  .rv-aspects{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
  .rv-asp{padding:9px 12px;gap:5px}
  .rv-asp-label{font-size:12px;font-weight:600}
  .rv-asp-num{font-size:14px;font-weight:800}
  .rv-asp-seg{height:5px;border-radius:2px}
  .rv-text{font-size:14px;line-height:1.65;margin-bottom:12px}
  .rv-pros-cons{grid-template-columns:1fr;gap:8px;margin-bottom:12px}
  .rv-pc{padding:11px 14px}
  .rv-pc-title{font-size:12px;font-weight:700;margin-bottom:8px}
  .rv-tag{font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px}
  .rv-footer{padding:11px 16px;gap:10px}
  .rv-helpful-btn{padding:7px 12px;font-size:12px;border-radius:22px;min-height:36px;gap:5px}
  .rv-helpful-btn svg{width:14px;height:14px}
  .rv-date{font-size:12px;margin-left:auto;white-space:nowrap}

  /* REP SPLIT */
  .rep-split{grid-template-columns:1fr}
  .rep-split-left{padding:18px;border-right:none;border-bottom:1px solid var(--line)}
  .rep-split-right{padding:18px;background:var(--bg)}
  .rep-split-title{font-size:16px}
  .rep-split-desc{font-size:13px}
  .rep-split-btn{width:100%;text-align:center;justify-content:center;padding:13px;font-size:14px}
  .rep-form-actions{flex-direction:column;gap:10px}
  .rep-btn-submit,.rep-btn-cancel{width:100%;justify-content:center;padding:13px;font-size:14px}

  /* SEO */
  .seo-toggle{padding:16px;min-height:56px;gap:14px}
  .seo-toggle-icon{width:36px;height:36px;border-radius:9px}
  .seo-toggle-label{font-size:14px}
  .seo-toggle-sub{font-size:12px}
  .seo-inner{padding:16px}

  /* SIMILAR */
  .alts-grid{padding:12px}
  .alt-card{flex:0 0 calc(100% / 1.5);padding:12px}

  /* STICKY CTA */
  .mobile-cta-bar{display:flex!important;position:fixed;bottom:0;left:0;right:0;width:100%;box-sizing:border-box;background:var(--white);border-top:1px solid var(--line);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:10px;z-index:150;box-shadow:0 -4px 20px rgba(0,0,0,.1)}
  .mobile-cta-bar a{flex:1;display:flex;align-items:center;justify-content:center;padding:13px 10px;font-size:14px;font-weight:700;border-radius:var(--r-sm);text-decoration:none;font-family:var(--font);gap:7px;min-height:46px}
  .mobile-cta-bar .cta-review{background:var(--bg);color:var(--ink-1);border:1px solid var(--line)}
  .mobile-cta-bar .cta-go{background:var(--teal);color:#fff;border:none}

  /* Global overflow */
  .page,main,.hero,.hero-left,.content-grid,.tab-content,
  .pros-cons-section,.stats-section,.block-section,
  .reviews-section,.reaction-block,.rep-cta,.seo-acc,
  .asp-strip{width:100%;max-width:100%;box-sizing:border-box;overflow-x:hidden}
  .hero{grid-template-columns:1fr!important}
  .sc{width:100%!important;box-sizing:border-box!important}

  /* Touch targets */
  input,select,textarea{font-size:16px!important}
  .tab,.qf-btn,.rv-vote-btn,.reaction-btn,.seo-toggle{min-height:40px}
}

@media(max-width:480px){
  .page{padding:12px 14px 90px}
  .c-name{font-size:20px}
  .c-logo-wrap .sv-logo{width:72px;height:72px;padding:6px}

  /* Live stats — compact */
  .live-block{padding:11px 13px;gap:12px}
  .live-icon{width:32px;height:32px;border-radius:7px}
  .live-num{font-size:20px}
  .live-label{font-size:11px}

  /* ASP */
  .asp-item{padding:9px 11px}
  .asp-label{font-size:12px}
  .asp-num{font-size:14px}
  .asp-seg{height:5px}

  /* Stats */
  .stats-grid{gap:8px}
  .stat-card{padding:14px 12px}
  .stat-icon{width:32px;height:32px}
  .stat-icon svg{width:16px;height:16px}
  .stat-value{font-size:20px}
  .stat-label{font-size:11px}

  /* Reviews */
  .summary-card{grid-template-columns:80px 1fr}
  .summary-num{font-size:24px}
  .summary-label{font-size:12px}

  /* Review card */
  .rv-header{padding:13px 14px}
  .rv-body{padding:13px 14px}
  .rv-footer{padding:11px 14px}
  .rv-score-num{font-size:26px}
  .rv-name{font-size:13px}
  .rv-tag{font-size:11px;padding:4px 10px}

  /* Alts */
  .alts-grid{gap:8px;padding:10px}
  .alt-card{flex:0 0 calc(100% / 1.3)}

  /* CTA */
  .mobile-cta-bar a{font-size:13px;padding:12px 8px}
}

/* ── PC SECTION OVERFLOW FIX ── */
@media(max-width:768px){
  .pros-cons-section{
    overflow:visible !important;
    width:calc(100% ) !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .pc-grid{
    grid-template-columns:1fr !important;
    overflow:visible !important;
    width:100% !important;
  }
  .pc-col{
    overflow:visible !important;
    width:100% !important;
    padding:12px 14px !important;
    box-sizing:border-box !important;
  }
  .pc-col:first-child{
    border-right:none !important;
    border-bottom:1px solid var(--line) !important;
  }
  .pc-list{
    width:100% !important;
    overflow:visible !important;
  }
  .pc-item{
    width:100% !important;
    overflow:visible !important;
  }
  .pc-item-row{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    gap:6px !important;
  }
  .pc-item-name{
    flex:1 !important;
    min-width:0 !important;
    font-size:13px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .pc-item-count{
    flex-shrink:0 !important;
    white-space:nowrap !important;
    font-size:11px !important;
    color:var(--ink-3) !important;
  }
  .pc-item-bar{
    width:100% !important;
    height:5px !important;
  }
}

@media(max-width:768px){
  .sidebar-widgets{gap:10px;padding:0 14px 4px}
  .sidebar-extended{gap:10px;padding:0 14px 4px}
  .widget-hd{padding:11px 14px;font-size:12px}
  .widget-bd{padding:10px 14px}
  .w-row{padding:7px 0;font-size:12px}
}

/* ── Similar casinos carousel ── */
.similar-casinos {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-top: 16px;
  overflow: hidden;
}
.similar-casinos .block-title {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.alts-carousel-wrap {
  position: relative;
}
.alts-carousel-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(to right, transparent, var(--white));
  pointer-events: none;
}

/* ── Carousel nav buttons ── */
.similar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.similar-header .block-title {
  padding: 0;
  border-bottom: none;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.alts-nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.alts-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  color: var(--ink-2);
  flex-shrink: 0;
}
.alts-nav-btn:hover {
  background: var(--ink-1);
  color: #fff;
  border-color: var(--ink-1);
}
.alts-nav-btn:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}
.alts-nav-btn svg { display: block; }

/* ═══ SIDEBAR RATING WIDGET ═══ */
.widget-rating-rank{}
.wr-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-bottom:1px solid var(--line);
  transition:background .12s;
}
.wr-row:last-child{border-bottom:none}
.wr-row:hover{background:var(--bg)}
.wr-current{
  background:var(--teal-l)!important;
  border-left:3px solid var(--teal);
}
.wr-pos{
  font-size:13px;
  font-weight:700;
  color:var(--ink-3);
  width:24px;
  flex-shrink:0;
  text-align:center;
}
.wr-name{
  flex:1;
  font-size:12px;
  font-weight:500;
  color:var(--ink-1);
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.wr-name:hover{color:var(--teal)}
.wr-name-active{
  font-weight:700;
  color:var(--teal)!important;
}
.wr-score{
  font-size:12px;
  font-weight:700;
  flex-shrink:0;
  background:var(--bg);
  padding:2px 7px;
  border-radius:10px;
}
.wr-score.rc-green  { color:#16a34a; background:#D1FAE5; }
.wr-score.rc-orange { color:#ea580c; background:#FFEDD5; }
.wr-score.rc-yellow { color:#ca8a04; background:#FEF9C3; }
.wr-score.rc-red    { color:#dc2626; background:#FEE2E2; }
.wr-current .wr-score-pill{
  background:var(--teal) !important;
  color:#fff !important;
  font-size:13px;
  padding:4px 10px;
}
.wr-link{
  display:block;
  text-align:center;
  padding:10px 14px;
  font-size:12px;
  font-weight:700;
  color:var(--teal);
  text-decoration:none;
  border-top:1px solid var(--line);
}
.wr-link:hover{background:var(--teal-l)}
/* ════════════════════════════════════════
   SINGLE CASINO — MOBILE
   ════════════════════════════════════════ */
@media(max-width: 768px){

  .page{
    padding: 0 0 80px !important;
    max-width: 100% !important;
  }

  /* ── Breadcrumb ── */
  .bc{ padding: 12px 14px 10px !important; margin-bottom: 0 !important; }

  /* ── Rating grids: horizontal margin ── */
  .asp-grids-wrap{ padding: 0 14px !important; margin-bottom: 12px !important; margin-top: 4px !important; }

  /* ── SEO desc strip ── */
  .c-desc-strip{ margin: 0 14px 12px !important; }

  /* ── Hero layout ── */
  .hero{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── Casino header ── */
  .hero-top{
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 16px 0 !important;
    flex-wrap: nowrap !important;
  }
  .c-logo{
    width: 56px !important; height: 56px !important;
    font-size: 16px !important; border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .c-name{ font-size: 18px !important; line-height: 1.2 !important; margin-bottom: 4px !important; }
  .c-url{ font-size: 11px !important; margin-bottom: 6px !important; }
  .badges{ gap: 5px !important; flex-wrap: wrap !important; }
  .badge{ font-size: 10px !important; padding: 3px 8px !important; }
  .c-desc{
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 12px 14px !important;
    margin: 0 14px 12px !important;
    background: var(--white) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--teal) !important;
    border-radius: var(--r-md) !important;
  }

  /* ── Live stats: перший блок на всю ширину, 2 наступних в ряд ── */
  .live-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px 16px 16px !important;
    margin-bottom: 0 !important;
  }
  .live-row .live-block:first-child{
    grid-column: 1 / -1 !important;
  }
  .live-block{
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
  }
  .live-icon{ width: 32px !important; height: 32px !important; flex-shrink: 0 !important; }
  .live-icon svg{ width: 15px !important; height: 15px !important; }
  .live-val{ font-size: 15px !important; font-weight: 800 !important; }
  .live-label{ font-size: 10px !important; color: var(--ink-3) !important; }
  .live-bar{ height: 4px !important; margin-top: 6px !important; }

  /* ── Score card ── */
  .sc{
    border-top: 1px solid var(--line) !important;
    padding: 16px !important;
    background: var(--bg) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    margin-top: 4px !important;
  }
  .sc-label{
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin-bottom: 10px !important;
  }
  .sc-big{
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
  }
  .sc-num{ font-size: 48px !important; font-weight: 800 !important; line-height: 1 !important; }
  .sc-verdict{ font-size: 14px !important; font-weight: 700 !important; margin-bottom: 4px !important; }
  .sc-stars svg{ width: 15px !important; height: 15px !important; }
  .sc-count{ font-size: 11px !important; margin-top: 4px !important; }
  .sc-dist{ display: none !important; }

  .sc-btns{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    flex-direction: unset !important;
    margin-bottom: 14px !important;
  }
  .sc-btns a, .sc-btns button{
    text-align: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    font-size: 13px !important;
    border-radius: 9px !important;
  }

  .sc-info{
    display: flex !important;
    flex-direction: column !important;
    background: var(--white) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  .info-row{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 13px !important;
  }
  .info-row:last-child{ border-bottom: none !important; }
  .info-k{ color: var(--ink-3) !important; font-size: 12px !important; }
  .info-v{ font-weight: 600 !important; font-size: 13px !important; text-align: right !important; }

  /* ── Stats section ── */
  .stats-section{
    padding: 16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }
  .stats-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-card{ padding: 12px !important; border-radius: 10px !important; }
  .stat-val{ font-size: 20px !important; }
  .stat-label{ font-size: 10px !important; }

  /* ── Tabs ── */
  .tabs{
    overflow-x: auto !important;
    scrollbar-width: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-top: 10px !important;
  }
  .tabs::-webkit-scrollbar{ display: none !important; }
  .tab{
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
  }

  /* ── Block sections ── */
  .block-section{
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 0 !important;
    margin-top: 10px !important;
  }
  .block-header{
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .block-title{ font-size: 14px !important; }
  .block-title svg{ width: 15px !important; height: 15px !important; }
  .block-body{ padding: 14px 16px !important; }

  /* ── Pros/cons ── */
  .pc-grid{ grid-template-columns: 1fr !important; }
  .pc-col:first-child{
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
  }
  .pc-item{ padding: 7px 0 !important; }
  .pc-item-label{ font-size: 13px !important; }
  .pc-item-bar{ height: 5px !important; }
  .pros-cons-section{ padding: 0 14px !important; }

  /* ── Reviews ── */
  .reviews-section{ padding: 0 14px !important; }
  .rv{
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    border: 1px solid var(--line) !important;
  }
  .rv-head{ padding: 12px 14px 6px !important; gap: 8px !important; flex-wrap: wrap !important; }
  .rv-body{ padding: 0 14px 12px !important; }
  .rv-author{ font-size: 12px !important; }
  .rv-text{ font-size: 12px !important; }

  /* ── Bonus section ── */
  .bonus-section{ padding: 0 14px !important; }
  .bonus-list-item{
    padding: 12px !important;
    border-radius: 10px !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  .bonus-val{ font-size: 14px !important; }

  /* ── Payments ── */
  .payments-grid{ gap: 6px !important; }
  .pay{ font-size: 11px !important; }
  .pay.has-logo{ padding: 4px 8px 4px 4px !important; }
  .pay.has-logo img{ width: 24px !important; height: 15px !important; }

  /* ── FAQ ── */
  .faq-item{ border-radius: 8px !important; margin-bottom: 6px !important; }
  .faq-q{ padding: 13px 14px !important; font-size: 13px !important; }
  .faq-a{ padding: 0 14px 13px !important; font-size: 13px !important; }

  /* ── Reaction block ── */
  .reaction-block{
    padding: 14px 16px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-top: 10px !important;
  }
  .reaction-pills{
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .reaction-btn{ padding: 10px !important; border-radius: 10px !important; }
  .reaction-title{ font-size: 13px !important; }
  .reaction-header{ margin-bottom: 10px !important; }

  /* ── Sidebar: category scores ── */
  .cat-scores-section{
    margin-top: 10px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding: 14px 16px !important;
  }
  .cat-score-row{
    padding: 7px 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .cat-score-row:last-child{ border-bottom: none !important; }
  .cat-score-label{ font-size: 13px !important; }

  /* ── Spacing between sections ── */
  .hero + .stats-section { margin-top: 0 !important; }
  .sc + .stats-section { margin-top: 10px !important; }

  /* ── SEO accordion ── */
  .seo-acc { margin: 10px 14px 0 !important; }

  /* ── Compare table ── */
  .compare-table-wrap { margin: 0 14px !important; overflow-x: auto; }

  /* ── Rep CTA ── */
  .rep-cta { margin: 10px 14px 0 !important; border-radius: var(--r-md) !important; }

  /* ── Similar casinos ── */
  .similar-casinos { margin: 10px 14px 0 !important; border-radius: var(--r-md) !important; }

  /* ── Content grid: gap between main and sidebar on mobile ── */
  .content-grid { gap: 0 !important; }
  .sidebar-widgets { margin-top: 10px !important; }

  /* ── Tab content: horizontal padding for all blocks inside ── */
  .tab-content {
    padding: 0 14px 4px !important;
    box-sizing: border-box !important;
  }
  /* ── Blocks inside tab-content: remove own h-margins (parent padding handles it) ── */
  .tab-content .expert-review  { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 12px !important; }
  .tab-content .sv-ind-block   { margin-left: 0 !important; margin-right: 0 !important; }
  .tab-content .sv-hist-block  { margin-left: 0 !important; margin-right: 0 !important; }
  .tab-content .seo-acc        { margin-left: 0 !important; margin-right: 0 !important; }
  .tab-content .reviews-section  { padding-left: 0 !important; padding-right: 0 !important; }
  .tab-content .block-section {
    border-radius: var(--r-md) !important;
    border: 1px solid var(--line) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }
  /* Reviews section: remove internal h-padding (tab-content handles it) */
  .tab-content .rv { margin-left: 0 !important; margin-right: 0 !important; }
}

@media(max-width: 480px){
  .c-name{ font-size: 16px !important; }
  .sc-btns{ grid-template-columns: 1fr 1fr !important; }
  .sc-btns a, .sc-btns button{ font-size: 12px !important; padding: 11px 6px !important; }
  .stats-grid{ grid-template-columns: 1fr 1fr !important; }
  .reaction-pills{ grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════════════════
   25 INDICATORS BLOCK — Light Variant F
═══════════════════════════════════════════════════════ */
.sv-ind-block {
  background: #fff;
  border: 1.5px solid #0D9488;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 20px;
}

/* Header */
.sv-ind-block__header {
  padding: 22px 26px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}

.sv-ind-block__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e1f5ee;
  border: 1px solid #9fe1cb;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #085041;
  margin-bottom: 10px;
}

.sv-ind-block__title {
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}

.sv-ind-block__sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 5px;
}

.sv-ind-block__header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.sv-ind-block__cat-scores {
  display: flex;
  gap: 3px;
}

.sv-ind-block__mini {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  min-width: 62px;
}

.sv-ind-block__mini-n {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.sv-ind-block__mini-l {
  font-size: 9px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 3px;
  line-height: 1.2;
}

.sv-ind-block__total {
  text-align: right;
  padding-left: 16px;
  border-left: 1px solid #e2e8f0;
}

.sv-ind-block__total-n {
  font-size: 52px;
  font-weight: 700;
  color: #0D9488;
  line-height: 1;
  letter-spacing: -2px;
  display: inline;
}

.sv-ind-block__total-max {
  font-size: 18px;
  color: #94a3b8;
  display: inline;
  margin-left: 2px;
}

.sv-ind-block__total-l {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
}

/* Grid */
.sv-ind-block__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.sv-ind-block__col {
  border-right: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
}

.sv-ind-block__col:last-child {
  border-right: none;
}

.sv-ind-block__col-head {
  padding: 11px 16px 9px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid #f1f5f9;
  background: #fafcff;
}

.sv-ind-block__col-items {
  flex: 1;
  padding: 4px 0;
}

.sv-ind-block__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  gap: 10px;
  border-bottom: 1px solid #f8fafc;
}

.sv-ind-block__item:last-child {
  border-bottom: none;
}

.sv-ind-block__item-name {
  font-size: 12px;
  color: #475569;
  flex: 1;
  line-height: 1.3;
}

.sv-ind-block__item-score {
  width: 30px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.sv-ind-block__col-avg {
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  border-top: 1px solid #f1f5f9;
  background: #fafcff;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Responsive */
@media (max-width: 900px) {
  .sv-ind-block__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sv-ind-block__col:nth-child(3) {
    border-right: none;
  }
  .sv-ind-block__col:nth-child(4) {
    border-top: 1px solid #f1f5f9;
  }
  .sv-hist-block { margin-left: 14px !important; margin-right: 14px !important; }
  .sv-ind-block  { margin-left: 14px !important; margin-right: 14px !important; }
}

@media (max-width: 600px) {
  /* ── Block: reduce outer padding ── */
  .sv-ind-block { margin: 10px 14px 0 !important; }

  /* ── Header: stack vertically ── */
  .sv-ind-block__header {
    flex-direction: column;
    gap: 12px;
    padding: 16px 14px 14px;
  }

  /* ── Header-right: total + cat-scores side by side ── */
  .sv-ind-block__header-right {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 12px;
  }

  /* ── Overall score: compact ── */
  .sv-ind-block__total {
    flex-shrink: 0;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
    text-align: center;
    min-width: 64px;
  }
  .sv-ind-block__total-n  { font-size: 32px; letter-spacing: -1px; }
  .sv-ind-block__total-max{ font-size: 14px; }
  .sv-ind-block__total-l  { font-size: 9px; }

  /* ── Cat-scores: 3-column grid ── */
  .sv-ind-block__cat-scores {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    flex: 1;
  }
  .sv-ind-block__mini {
    min-width: 0;
    padding: 8px 6px;
  }
  .sv-ind-block__mini-n { font-size: 16px; }
  .sv-ind-block__mini-l { font-size: 8px; }
  .sv-ind-block__mini-d { font-size: 9px; }

  /* ── Grid: 1 column on narrow mobile ── */
  .sv-ind-block__grid {
    grid-template-columns: 1fr;
  }
  .sv-ind-block__col:nth-child(2n) {
    border-right: none;
  }
  .sv-ind-block__col:nth-child(n+2) {
    border-top: 1px solid #f1f5f9;
  }
  .sv-ind-block__col-head { padding: 10px 14px 8px; font-size: 9px; }
  .sv-ind-block__item     { padding: 7px 14px; }
  .sv-ind-block__item-name{ font-size: 12px; }
  .sv-ind-block__item-score{ font-size: 11px; width: 24px; height: 20px; }
  .sv-ind-block__col-avg  { padding: 7px 14px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════
   SCORE HISTORY CHART BLOCK
═══════════════════════════════════════════════════════ */
.sv-hist-block {
  background: var(--color-bg, #fff);
  border: 1.5px solid #0D9488;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 20px;
}

.sv-hist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 12px;
}

.sv-hist-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.sv-hist-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.sv-hist-kpis {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.sv-hist-kpi {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  min-width: 72px;
}

.sv-hist-kpi--total {
  background: #e1f5ee;
  border-color: #9fe1cb;
  min-width: 80px;
}

.sv-hist-kpi-n {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.sv-hist-kpi-l {
  font-size: 9px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 3px;
  line-height: 1.2;
}

.sv-hist-kpi-d {
  font-size: 10px;
  font-weight: 700;
  margin-top: 3px;
  line-height: 1;
}

.sv-hist-chart {
  padding: 12px 16px 4px;
  background: #fafcff;
}

.sv-hist-legend {
  display: flex;
  gap: 14px;
  padding: 10px 24px 12px;
  flex-wrap: wrap;
  border-top: 1px solid #f1f5f9;
}

.sv-hist-leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #64748b;
}

.sv-hist-leg-line {
  width: 20px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

.sv-hist-leg-overall .sv-hist-leg-line {
  height: 2.5px;
}

@media (max-width: 600px) {
  .sv-hist-head {
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
  }
  .sv-hist-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    padding: 0 14px 14px;
  }
  .sv-hist-kpi {
    min-width: 0;
    padding: 9px 8px;
    text-align: center;
  }
  .sv-hist-kpi-l {
    font-size: 9px;
    line-height: 1.2;
    word-break: normal;
  }
  .sv-hist-kpi-n { font-size: 15px; }
  .sv-hist-chart { padding: 10px 10px 4px; }
  .sv-hist-legend { padding: 8px 14px 10px; gap: 8px; }
  .sv-hist-leg-item { font-size: 10px; }
}

/* ── Indicator delta arrows ── */
.sv-ind-block__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sv-ind-col-delta {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}
.sv-ind-item-arrow {
  font-size: 9px;
  font-weight: 500;
  margin-left: 1px;
  line-height: 1;
}
.sv-ind-block__mini-d {
  font-size: 10px;
  font-weight: 500;
  margin-top: 2px;
  line-height: 1;
}

/* ── Grouped horizontal bar chart ── */
.sv-hist-bars {
  padding: 16px 22px 18px;
}
.sv-hist-bar-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sv-hist-bar-leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
}
.sv-hist-bar-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.sv-hist-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 44px;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 0.5px solid #f1f5f9;
}
.sv-hist-bar-row:last-child { border-bottom: none; }
.sv-hist-bar-row--overall {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid #e2e8f0;
  border-bottom: none;
}
.sv-hist-bar-label {
  font-size: 12px;
  color: #475569;
}
.sv-hist-bar-tracks {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sv-hist-bar-track {
  height: 16px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.sv-hist-bar-fill {
  height: 100%;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding-right: 6px;
  justify-content: flex-end;
  min-width: 28px;
  transition: width 0.5s ease;
}
.sv-hist-bar-fill--prev {
  background: #cbd5e1 !important;
}
.sv-hist-bar-val {
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  line-height: 1;
}
.sv-hist-bar-val--prev {
  color: #475569;
}
.sv-hist-bar-delta {
  font-size: 12px;
  font-weight: 500;
  text-align: right;
}
@media (max-width: 600px) {
  .sv-hist-bar-row {
    grid-template-columns: 100px 1fr 36px;
    gap: 8px;
  }
}

/* ── History chart tabs + toggles ── */
.sv-hist-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 22px;
}
.sv-hist-tab {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  font-family: inherit;
}
.sv-hist-tab:hover { color: #475569; }
.sv-hist-tab--active { color: #0D9488; border-bottom-color: #0D9488; }

.sv-hist-chart-wrap { padding: 16px 22px 18px; }

.sv-hist-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.sv-hist-tog {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: 1.5px solid var(--c, #0D9488);
  color: #94a3b8;
  background: none;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.sv-hist-tog::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #0D9488);
  opacity: 0.3;
  transition: opacity .15s;
}
.sv-hist-tog--active {
  color: var(--c, #0D9488);
  background: color-mix(in srgb, var(--c, #0D9488) 8%, transparent);
}
.sv-hist-tog--active::before { opacity: 1; }

/* ════════════════════════════════════════════════════════
 * CASINO ARTICLES TIMELINE BLOCK (cat-timeline)
 * ════════════════════════════════════════════════════════ */

.cat-timeline {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--rl, 16px);
    margin-top: 20px;
}

.cat-tl-hd {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cat-tl-hd-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--t1);
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cat-tl-hd-title svg {
    color: var(--amber);
    flex-shrink: 0;
}

.cat-tl-count {
    color: var(--t3);
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}

.cat-tl-hd-link {
    color: var(--t3);
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    transition: color .15s, border-color .15s;
}

.cat-tl-hd-link:hover {
    color: var(--amber);
    border-color: var(--amber);
}

.cat-tl-line {
    position: relative;
    padding: 24px 20px 24px 64px;
}

.cat-tl-line::before {
    content: '';
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 32px;
    width: 1px;
    background: linear-gradient(to bottom, var(--bg-4), var(--line) 50%, transparent);
}

.cat-tl-item {
    position: relative;
    padding-bottom: 28px;
}

.cat-tl-item:last-child {
    padding-bottom: 0;
}

.cat-tl-dot {
    position: absolute;
    left: -36px;
    top: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 2px solid var(--bg-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 9px;
    color: var(--t3);
    transition: all .2s;
    z-index: 1;
}

.cat-tl-item:hover .cat-tl-dot {
    border-color: var(--amber);
    color: var(--amber);
    background: var(--bg-1);
}

.cat-tl-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.cat-tl-tag-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.cat-tl-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: 3px;
    line-height: 1.3;
}

.cat-tl-tag.t-amber {
    color: var(--amber);
    background: var(--amber-bg);
}

.cat-tl-tag.t-purple {
    color: var(--purple);
    background: rgba(108, 92, 231, .12);
}

.cat-tl-tag.t-green {
    color: var(--green);
    background: rgba(14, 203, 129, .12);
}

.cat-tl-tag.t-blue {
    color: var(--blue);
    background: rgba(56, 97, 251, .12);
}

.cat-tl-tag.t-pink {
    color: var(--pink);
    background: rgba(236, 72, 153, .12);
}

.cat-tl-tag.t-red {
    color: var(--red);
    background: rgba(246, 70, 93, .12);
}

.cat-tl-rel {
    color: var(--t4);
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    letter-spacing: .5px;
}

.cat-tl-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--t1);
    line-height: 1.4;
    letter-spacing: -.01em;
    margin-bottom: 6px;
    transition: color .2s;
}

.cat-tl-item:hover .cat-tl-title {
    color: var(--amber);
}

.cat-tl-meta {
    font-size: 11px;
    color: var(--t3);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.cat-tl-meta svg {
    vertical-align: -1.5px;
}

.cat-tl-meta-date {
    color: var(--t4);
}

/* Mobile */
@media (max-width: 600px) {
    .cat-tl-line {
        padding-left: 56px;
    }
    .cat-tl-line::before {
        left: 28px;
    }
    .cat-tl-dot {
        left: -40px;
        width: 28px;
        height: 28px;
        font-size: 8px;
    }
    .cat-tl-title {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════
   TAB SYSTEM v1.6.187
   5 tabs (Огляд / Відгуки / Експерт / Бонуси / FAQ)
   Click → only matching [data-tab-content] is visible
═══════════════════════════════════════════════════════ */

.sv5-tabs {
  /* Non-sticky — scrolls with content, doesn't overlap blocks below */
  position: relative;
  display: flex;
  gap: 4px;
  background: var(--bg-1, #181A20);
  border: 1px solid var(--line, rgba(255,255,255,.06));
  border-radius: 16px;
  padding: 6px 8px;
  margin: 24px 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sv5-tabs::-webkit-scrollbar { display: none; }

.sv5-tabs-i {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  color: var(--t3, #848E9C);
  cursor: pointer;
  border-radius: 10px;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.sv5-tabs-i:hover {
  color: var(--t1, #EAECEF);
  background: var(--bg-2, #1E2329);
}
.sv5-tabs-i.sv5-tabs-on {
  color: #0B0E11;
  background: var(--amber, #F0B90B);
}
.sv5-tabs-i.sv5-tabs-on:hover {
  background: var(--yellow, #FCD535);
}
.sv5-tabs-c {
  font-size: 11px;
  background: var(--bg-3, #2B2F36);
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--t3, #848E9C);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sv5-tabs-i.sv5-tabs-on .sv5-tabs-c {
  background: rgba(11, 14, 17, 0.18);
  color: #0B0E11;
}

/* Tab content visibility — !important to override .sv5-poll/.sv5-fw/.sv5-ach inline display:grid/flex */
[data-tab-content]:not(.sv5-tab-on) {
  display: none !important;
}
[data-tab-content].sv5-tab-on {
  display: block !important;
}
/* Tab pane wrapper (overview) — block-level container */
.sv5-tab-pane {
  display: none !important;
}
.sv5-tab-pane.sv5-tab-on {
  display: block !important;
}

/* Mobile tab nav */
@media (max-width: 720px) {
  .sv5-tabs {
    padding: 4px 6px;
    margin-bottom: 16px;
  }
  .sv5-tabs-i {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* ═══════════════════════════════════════════════════════
   TOC OVERLAY v1.6.192 — single UX for all viewports
   • TOC nav rendered outside sidebar (after content-grid).
   • Hidden by default. Toggled via FAB button.
   • Opens as centered overlay with backdrop on all screens.
═══════════════════════════════════════════════════════ */

.sv5-toc {
  /* Hidden by default everywhere */
  display: none;
  font-family: var(--font);
  background: var(--bg-1, #181A20);
  border: 1px solid var(--line, rgba(255,255,255,.06));
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 16px 56px rgba(0,0,0,.55);
}
.sv5-toc.sv5-toc-open {
  display: block;
  position: fixed;
  z-index: 9999;
  /* Desktop centred panel near right side */
  top: 50%;
  right: 24px;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  width: 320px;
  max-height: min(82vh, 720px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sv5-toc::-webkit-scrollbar,
.sv5-toc.sv5-toc-open::-webkit-scrollbar { width: 4px; }
.sv5-toc::-webkit-scrollbar-thumb,
.sv5-toc.sv5-toc-open::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 2px;
}

/* TOC header */
.sv5-toc-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--t3, #848E9C);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.06));
  position: relative;
}
.sv5-toc-hd svg { color: var(--amber, #F0B90B); }
.sv5-toc-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3, #2B2F36);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t2, #B7BDC6);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: all .15s;
}
.sv5-toc-close:hover {
  background: var(--bg-4, #474D57);
  color: var(--t1, #EAECEF);
}

.sv5-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sv5-toc-grp {
  margin-top: 10px;
  padding: 4px 0 2px;
}
.sv5-toc-grp:first-child { margin-top: 0; }
.sv5-toc-grp-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--amber, #F0B90B);
}
.sv5-toc-i {
  display: block;
  font-size: 13px;
  padding: 8px 12px;
  color: var(--t2, #B7BDC6);
  text-decoration: none;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: all .15s;
  line-height: 1.3;
}
.sv5-toc-i:hover {
  color: var(--t1, #EAECEF);
  background: var(--bg-2, #1E2329);
}
.sv5-toc-i.sv5-toc-on {
  color: var(--amber, #F0B90B);
  background: var(--amber-bg, rgba(240,185,11,.1));
  border-left-color: var(--amber, #F0B90B);
  font-weight: 600;
}

/* Tablet/Mobile: full-width bottom sheet */
@media (max-width: 720px) {
  .sv5-toc.sv5-toc-open {
    top: auto;
    bottom: 80px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 360px;
    margin: 0 auto;
    transform: none;
    max-height: 70vh;
  }
}

/* FAB BUTTON — always visible on all viewports */
.sv5-toc-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 998;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--amber, #F0B90B);
  color: #0B0E11;
  border: 0;
  box-shadow: 0 6px 20px rgba(240, 185, 11, .35), 0 4px 14px rgba(0,0,0,.4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  transition: all .2s ease;
}
.sv5-toc-fab:hover {
  background: var(--yellow, #FCD535);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(240, 185, 11, .45), 0 4px 14px rgba(0,0,0,.4);
}
.sv5-toc-fab:active {
  transform: translateY(0);
}
.sv5-toc-fab svg {
  width: 22px;
  height: 22px;
}
.sv5-toc-fab.sv5-toc-fab-active {
  background: var(--bg-3, #2B2F36);
  color: var(--amber, #F0B90B);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.sv5-toc-fab.sv5-toc-fab-active:hover {
  background: var(--bg-4, #474D57);
}

/* Backdrop when overlay open */
.sv5-toc-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 997;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sv5-toc-backdrop.sv5-toc-backdrop-on {
  display: block;
}

/* ═══════════════════════════════════════════════════════
   FLOATING BONUS CTA BAR v1.6.194
   Compact, animated, fixed bottom bar with bonus info + claim button.
═══════════════════════════════════════════════════════ */

@keyframes sv5-cta-slide-up {
  from {
    opacity: 0;
    transform: translateY(120%) translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}

@keyframes sv5-cta-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(240, 185, 11, 0.5),
      0 8px 24px rgba(240, 185, 11, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(240, 185, 11, 0),
      0 8px 24px rgba(240, 185, 11, 0.55);
  }
}

@keyframes sv5-cta-glow-rotate {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

@keyframes sv5-cta-shine {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(280%) skewX(-20deg); }
}

.sv5-cta {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 996;
  width: min(720px, calc(100vw - 32px));
  padding: 0;
  font-family: var(--font);
  border-radius: 20px;
  background: linear-gradient(135deg, #1E2329 0%, #181A20 100%);
  border: 1px solid rgba(240, 185, 11, 0.25);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 4px 16px rgba(240, 185, 11, 0.18);
  transform: translateX(-50%);
  animation: sv5-cta-slide-up 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) 0.35s backwards;
  overflow: hidden;
  /* Account for iOS safe-area-inset */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Hidden state */
.sv5-cta.sv5-cta-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateY(140%) translateX(-50%);
  transition: opacity 0.3s, transform 0.45s cubic-bezier(0.55, 0, 0.7, 0.4);
}

/* Animated radial glow behind bar */
.sv5-cta-glow {
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(240, 185, 11, 0.12) 70deg,
    transparent 140deg,
    transparent 220deg,
    rgba(252, 213, 53, 0.08) 290deg,
    transparent 360deg
  );
  animation: sv5-cta-glow-rotate 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.sv5-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 48px 12px 16px; /* extra right padding for close button */
}

/* Gift icon */
.sv5-cta-logo {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240, 185, 11, 0.25), rgba(240, 185, 11, 0.08));
  border: 1px solid rgba(240, 185, 11, 0.35);
  color: var(--amber, #F0B90B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Info block — flex-grow */
.sv5-cta-info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sv5-cta-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.25;
}
.sv5-cta-name {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  color: var(--t1, #EAECEF);
  letter-spacing: -0.01em;
}
.sv5-cta-bonus {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  color: var(--amber, #F0B90B);
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sv5-cta-sub {
  font-size: 11px;
  color: var(--t3, #848E9C);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Claim button — gold pulse + shine */
.sv5-cta-btn {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0B0E11;
  background: linear-gradient(135deg, var(--yellow, #FCD535), var(--amber, #F0B90B));
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  animation: sv5-cta-pulse 2.4s ease-in-out infinite;
  transition: transform 0.18s ease;
}
.sv5-cta-btn:hover {
  transform: translateY(-1px) scale(1.02);
  background: linear-gradient(135deg, #FFE055, var(--yellow, #FCD535));
}
.sv5-cta-btn:active {
  transform: translateY(0) scale(0.98);
}
/* Shine sweep across button */
.sv5-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  animation: sv5-cta-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
.sv5-cta-btn-lbl,
.sv5-cta-btn-ico {
  position: relative;
  z-index: 1;
}
.sv5-cta-btn-ico {
  display: inline-flex;
  align-items: center;
}

/* Close button — clearly visible in top-right corner */
.sv5-cta-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(11, 14, 17, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--t1, #EAECEF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.sv5-cta-close:hover {
  background: var(--red, #F6465D);
  border-color: var(--red, #F6465D);
  color: #FFFFFF;
  transform: scale(1.1) rotate(90deg);
}
.sv5-cta-close:active {
  transform: scale(0.95) rotate(90deg);
}
.sv5-cta-close svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* Push body content slightly so CTA doesn't cover footer area */
@media (min-width: 721px) {
  body.single-casino { padding-bottom: 80px; }
}

/* ── Mobile (≤720px) ──────────────────────────────────── */
@media (max-width: 720px) {
  .sv5-cta {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    border-radius: 16px;
    /* override transformX(-50%) translation for mobile */
  }
  /* Re-define keyframe for mobile so transform doesn't include centering */
  @keyframes sv5-cta-slide-up-mobile {
    from { opacity: 0; transform: translateY(120%); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .sv5-cta {
    animation: sv5-cta-slide-up-mobile 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) 0.35s backwards;
  }
  .sv5-cta.sv5-cta-hidden {
    transform: translateY(140%);
  }

  .sv5-cta-inner {
    gap: 10px;
    padding: 10px 42px 10px 12px; /* extra right padding for close button */
  }
  .sv5-cta-close {
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
  }
  .sv5-cta-close svg {
    width: 12px;
    height: 12px;
  }
  .sv5-cta-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .sv5-cta-logo svg {
    width: 18px;
    height: 18px;
  }
  .sv5-cta-name {
    font-size: 12px;
  }
  .sv5-cta-bonus {
    font-size: 13px;
  }
  .sv5-cta-sub {
    font-size: 10px;
  }
  .sv5-cta-btn {
    padding: 10px 14px;
    font-size: 12px;
    gap: 6px;
  }
  .sv5-cta-btn-ico svg {
    width: 14px;
    height: 14px;
  }
  /* On very narrow phones, hide sub-line and casino name to save space */
  @media (max-width: 380px) {
    .sv5-cta-name,
    .sv5-cta-sub { display: none; }
    .sv5-cta-bonus { font-size: 14px; }
  }
  /* Mobile body padding to keep content from being hidden under CTA */
  body.single-casino { padding-bottom: 90px; }
}

/* Don't pulse if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sv5-cta {
    animation: none;
  }
  .sv5-cta-btn {
    animation: none;
  }
  .sv5-cta-btn::before {
    display: none;
  }
  .sv5-cta-glow {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════
   SEO REVIEW TEASER v1.6.197
   Compact preview card with excerpt + "Read full review" CTA
   that opens the SEO popup. Lives inside #history section.
═══════════════════════════════════════════════════════ */

@keyframes sv5-seo-tease-glow-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.sv5-seo-tease {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 24px;
  background: var(--bg-2, #1E2329);
  border: 1px solid rgba(240, 185, 11, 0.18);
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--font);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.sv5-seo-tease:hover {
  border-color: rgba(240, 185, 11, 0.4);
  transform: translateY(-1px);
}

/* Soft amber glow in top-right corner */
.sv5-seo-tease-glow {
  position: absolute;
  top: -50%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle at center,
    rgba(240, 185, 11, 0.12) 0%,
    rgba(240, 185, 11, 0.04) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  animation: sv5-seo-tease-glow-pulse 5s ease-in-out infinite;
}

/* Decorative book icon on the left */
.sv5-seo-tease-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240, 185, 11, 0.18), rgba(240, 185, 11, 0.06));
  border: 1px solid rgba(240, 185, 11, 0.25);
  color: var(--amber, #F0B90B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Body — flexgrow */
.sv5-seo-tease-body {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Meta row — badge + reading time */
.sv5-seo-tease-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sv5-seo-tease-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(240, 185, 11, 0.12);
  color: var(--amber, #F0B90B);
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(240, 185, 11, 0.25);
}
.sv5-seo-tease-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t3, #848E9C);
  font-variant-numeric: tabular-nums;
}
.sv5-seo-tease-author svg {
  color: var(--t4, #5E6673);
  flex-shrink: 0;
}

/* Title */
.sv5-seo-tease-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--t1, #EAECEF);
  margin: 0;
  line-height: 1.3;
}

/* Preview text — fade out at end */
.sv5-seo-tease-preview {
  position: relative;
  font-size: 14px;
  line-height: 1.65;
  color: var(--t2, #B7BDC6);
  margin: 0;
  /* clamp to ~3 lines and add fade */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA button */
.sv5-seo-tease-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 10px 18px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber, #F0B90B);
  background: rgba(240, 185, 11, 0.10);
  border: 1px solid rgba(240, 185, 11, 0.35);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.sv5-seo-tease-cta:hover {
  background: var(--amber, #F0B90B);
  border-color: var(--amber, #F0B90B);
  color: #0B0E11;
  transform: translateX(2px);
}
.sv5-seo-tease-cta:hover svg {
  transform: translateX(3px);
}
.sv5-seo-tease-cta:active {
  transform: translateX(0);
}
.sv5-seo-tease-cta svg {
  transition: transform 0.18s ease;
}

/* ── Mobile (≤720px) ──────────────────────────────────── */
@media (max-width: 720px) {
  .sv5-seo-tease {
    flex-direction: column;
    gap: 14px;
    padding: 18px 16px;
  }
  .sv5-seo-tease-icon {
    width: 40px;
    height: 40px;
  }
  .sv5-seo-tease-icon svg {
    width: 18px;
    height: 18px;
  }
  .sv5-seo-tease-meta {
    gap: 10px;
  }
  .sv5-seo-tease-title {
    font-size: 15px;
  }
  .sv5-seo-tease-preview {
    font-size: 13px;
    -webkit-line-clamp: 4;
  }
  .sv5-seo-tease-cta {
    width: 100%;
    justify-content: center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sv5-seo-tease,
  .sv5-seo-tease-cta,
  .sv5-seo-tease-cta svg {
    transition: none;
  }
  .sv5-seo-tease-glow {
    animation: none;
  }
}

/* ═══ UA License Warning Banner v1.6.208 ═══════════════
   Compact informational alert shown above the main casino card
   when the venue does not hold a Ukrainian (KRAIL) license. */
.sv-uawarn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(246, 70, 93, 0.08), rgba(246, 70, 93, 0.04));
  border: 1px solid rgba(246, 70, 93, 0.25);
  border-left: 3px solid #F6465D;
  border-radius: 12px;
  margin-bottom: 16px;
  color: #EAECEF;
  font-family: 'Onest', sans-serif;
  line-height: 1.5;
}
.sv-uawarn-ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 70, 93, 0.15);
  color: #F6465D;
  border-radius: 8px;
  margin-top: 1px;
}
.sv-uawarn-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.sv-uawarn-t {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: #EAECEF;
  line-height: 1.35;
}
.sv-uawarn-d {
  font-size: 13px;
  color: #B7BDC6;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .sv-uawarn {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 10px;
  }
  .sv-uawarn-ico {
    width: 28px;
    height: 28px;
  }
  .sv-uawarn-t { font-size: 12.5px; }
  .sv-uawarn-d { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════
   Screenshots — Magazine Overlap layout — v1.6.223
   Two phones overlap (one tilted left, second tilted right with amber outline)
   + info block on the right + thumbnail strip below
═══════════════════════════════════════════════════════ */
.sv5-scr-count {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--t3, #848E9C);
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    letter-spacing: 0.03em;
}

/* Magazine wrapper */
.sv5-scr-mag {
    padding: 4px 0;
}

/* Top: phones stage + info side-by-side */
.sv5-scr-mag-top {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: center;
    padding: 24px;
    background: var(--bg-2, #1E2329);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
    border-radius: 16px;
    margin-bottom: 16px;
}

/* ── Phones stage (overlapping) ───────────── */
.sv5-scr-stage {
    position: relative;
    width: 280px;
    height: 360px;
    margin: 0;
}

.sv5-scr-phone {
    margin: 0;
    padding: 6px;
    background: var(--bg-3, #2B2F36);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}

.sv5-scr-phone-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
    aspect-ratio: 9 / 19.5;
}
.sv5-scr-phone-img-on {
    display: block;
}

/* Background phone — tilted left, slightly lower z */
.sv5-scr-phone-bg {
    position: absolute;
    left: 0;
    top: 30px;
    width: 165px;
    transform: rotate(-5deg);
    z-index: 1;
    opacity: 0.92;
}
.sv5-scr-phone-bg:hover {
    transform: rotate(-3deg) translateY(-4px);
    opacity: 1;
}

/* Active phone — tilted right with amber outline glow */
.sv5-scr-phone-active {
    position: absolute;
    right: 0;
    top: 0;
    width: 175px;
    transform: rotate(5deg);
    z-index: 2;
    box-shadow:
        0 0 0 2px var(--amber, #F0B90B),
        0 18px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(240, 185, 11, 0.15);
}
.sv5-scr-phone-active:hover {
    transform: rotate(3deg) translateY(-4px);
}

/* ── Info block ──────────────────────────── */
.sv5-scr-info {
    min-width: 0;
}
.sv5-scr-info-eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber, #F0B90B);
    margin-bottom: 10px;
}
.sv5-scr-info-h {
    font-family: 'Unbounded', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--t1, #EAECEF);
    margin: 0 0 10px;
    line-height: 1.2;
}
.sv5-scr-info-d {
    font-family: 'Onest', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--t2, #B7BDC6);
    margin: 0 0 18px;
}

/* Type chips inside info block */
.sv5-scr-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sv5-scr-info-chip {
    padding: 6px 13px;
    background: var(--bg-3, #2B2F36);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
    color: var(--t2, #B7BDC6);
    font-family: 'Onest', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
}
.sv5-scr-info-chip:hover {
    background: var(--bg-1, #181A20);
    color: var(--t1, #EAECEF);
}
.sv5-scr-info-chip-on,
.sv5-scr-info-chip-on:hover {
    background: rgba(240, 185, 11, 0.12);
    color: var(--amber, #F0B90B);
    border-color: rgba(240, 185, 11, 0.3);
}

/* ── Bottom thumbnail strip ───────────────── */
.sv5-scr-mag-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
.sv5-scr-mag-thumb {
    position: relative;
    padding: 0;
    background: var(--bg-2, #1E2329);
    border: 2px solid var(--line, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.18s ease;
}
.sv5-scr-mag-thumb:hover {
    border-color: var(--t3, #848E9C);
    transform: translateY(-2px);
}
.sv5-scr-mag-thumb-on,
.sv5-scr-mag-thumb-on:hover {
    border-color: var(--amber, #F0B90B);
    box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.18);
    transform: translateY(0);
}
.sv5-scr-mag-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 14;
    object-fit: cover;
    object-position: center top;
}
.sv5-scr-mag-thumb-l {
    display: block;
    padding: 6px 8px;
    font-family: 'Onest', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--t2, #B7BDC6);
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    letter-spacing: 0.02em;
}
.sv5-scr-mag-thumb-on .sv5-scr-mag-thumb-l {
    color: var(--amber, #F0B90B);
}

/* ── Mobile adjustments ────────────────────── */
@media (max-width: 720px) {
    .sv5-scr-mag-top {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
    }
    .sv5-scr-stage {
        width: 100%;
        height: 320px;
        margin: 0 auto;
        max-width: 280px;
    }
    .sv5-scr-phone-bg {
        width: 145px;
        top: 26px;
    }
    .sv5-scr-phone-active {
        width: 155px;
    }
    .sv5-scr-info {
        text-align: center;
    }
    .sv5-scr-info-h {
        font-size: 18px;
    }
    .sv5-scr-info-d {
        font-size: 13px;
    }
    .sv5-scr-info-chips {
        justify-content: center;
    }
    .sv5-scr-mag-thumbs {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 8px;
    }
    .sv5-scr-mag-thumb-l {
        font-size: 10px;
        padding: 4px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv5-scr-phone,
    .sv5-scr-mag-thumb {
        transition: none;
    }
}