body.fg-casino-games {
  --tb-surface: #ffffff;
  --tb-text: #0f172a;
  --tb-muted: #111827;
  --tb-border: #e5e7eb;
  --tb-zebra: #f5f7fb;
  --tb-rail: linear-gradient(180deg, #6cf 0%, #9f7bff 100%);
  --tb-rail-w: 4px;
  --tb-radius: 16px;
  --tb-pad: 14px;
  --tb-gap: 10px;
  --edge: clamp(12px, 3.6vw, 16px);
}

body.fg-casino-games :is(figure.wp-block-table.fg-white, table.fg-white, .fg-providers-table, .fg-compare) {
  color: var(--tb-text);
}

body.fg-casino-games figure.wp-block-table.fg-compare,
body.fg-casino-games table.fg-compare {
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
}

body.fg-casino-games .fg-providers-table {
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
  overflow: hidden;
}

body.fg-casino-games :is(.fg-compare, .fg-providers-table) table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.fg-casino-games :is(.fg-compare, .fg-providers-table) thead th {
  color: #0b1220;
  background: #fff;
  font-weight: 800;
  text-align: left;
  border-bottom: 1px solid var(--tb-border);
  padding: calc(var(--tb-pad) + 2px) var(--tb-pad);
}

body.fg-casino-games :is(.fg-compare, .fg-providers-table) tbody td {
  color: var(--tb-muted);
  border-bottom: 1px solid var(--tb-border);
  vertical-align: top;
  text-align: left;
  padding: calc(var(--tb-pad) + 2px) var(--tb-pad);
}

@media (min-width: 783px) {
  body.fg-casino-games :is(.fg-compare, .fg-providers-table) tbody tr:nth-child(odd) {
    background: var(--tb-zebra);
  }
  body.fg-casino-games :is(.fg-compare, .fg-providers-table) tbody tr:last-child td {
    border-bottom: 0;
  }
}

body.fg-casino-games figure.wp-block-table {
  margin-inline: auto;
  max-width: 100%;
}

@media (max-width: 782px) {
  body.fg-casino-games :is(figure.wp-block-table.fg-compare, .fg-providers-table) {
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
    padding-left: var(--edge);
    padding-right: var(--edge);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body.fg-casino-games :is(.fg-compare, .fg-providers-table) thead { display: none; }
  body.fg-casino-games :is(.fg-compare, .fg-providers-table) :is(table, tbody, tr, td) {
    display: block;
    width: 100%;
  }
  body.fg-casino-games :is(.fg-compare, .fg-providers-table) tbody tr {
    position: relative;
    background: var(--tb-surface);
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
    padding: 12px;
    margin: 0 0 12px;
    overflow: hidden;
    padding-left: calc(12px + var(--tb-rail-w) + 6px);
  }
  body.fg-casino-games :is(.fg-compare, .fg-providers-table) tbody tr::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: var(--tb-rail-w);
    border-radius: 4px;
    background: var(--tb-rail);
    filter: drop-shadow(0 0 8px rgba(159, 123, 255, .45));
  }
  body.fg-casino-games :is(.fg-compare, .fg-providers-table) tbody tr > td:first-child {
    margin: -6px -6px 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--tb-border);
    background: linear-gradient(180deg, #fff, #f7f9fc 88%);
    color: #0b1220;
    font-weight: 800;
    font-size: 17px;
  }
  body.fg-casino-games :is(.fg-compare, .fg-providers-table) tbody td {
    border: 0;
    background: #fff;
    color: var(--tb-muted);
    margin: 8px 0;
    padding: 12px 12px;
    box-shadow: inset 0 0 0 1px var(--tb-border);
    border-radius: 12px;
  }
  body.fg-casino-games .fg-compare tbody td:nth-child(2) {
    display: grid;
    grid-template-columns: 36% 64%;
    gap: 8px;
    align-items: start;
  }
  body.fg-casino-games .fg-compare tbody td:nth-child(3) {
    display: grid;
    grid-template-columns: 36% 64%;
    gap: 8px;
    align-items: start;
  }
  body.fg-casino-games .fg-compare tbody td:nth-child(2)::before { content: "Demo"; }
  body.fg-casino-games .fg-compare tbody td:nth-child(3)::before { content: "Real money"; }
  body.fg-casino-games .fg-compare tbody td:nth-child(n+2)::before {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 10px 0 0;
    line-height: 1;
    font-weight: 700;
    border-radius: 999px;
    background: #e5e7eb;
    color: #0f172a;
    box-shadow: inset 0 0 0 1px #cbd5e1;
    justify-self: start;
    align-self: start;
  }
  body.fg-casino-games .fg-providers-table td:nth-child(3) ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  body.fg-casino-games .fg-providers-table td:nth-child(3) li {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    background: #e5e7eb; color: #0f172a; font-weight: 700; font-size: 13px;
    box-shadow: inset 0 0 0 1px #cbd5e1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.fg-casino-games * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  body.fg-casino-games :is(.fg-compare, .fg-providers-table) * {
    border-color: CanvasText !important;
  }
}

body.fg-casino-games .fg-games.cg-grid > :is(.kb-row-layout-wrap, .kt-row-layout-wrap, .is-layout-constrained) > :is(.kb-row-layout-inner, .kt-row-layout-inner) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  body.fg-casino-games .fg-games.cg-grid > :is(.kb-row-layout-wrap, .kt-row-layout-wrap, .is-layout-constrained) > :is(.kb-row-layout-inner, .kt-row-layout-inner) {
    grid-template-columns: 1fr;
  }
}

body.fg-casino-games .fg-games.cg-grid > :is(.kb-row-layout-wrap, .kt-row-layout-wrap, .is-layout-constrained) > :is(.kb-row-layout-inner, .kt-row-layout-inner) > .wp-block-kadence-column {
  margin: 0 !important; width: auto !important; min-width: 0; flex: initial !important;
}

body.fg-casino-games .fg-games .cg-card > .kt-inside-inner-col {
  position: relative;
  background: linear-gradient(180deg, color-mix(in oklab, var(--cr-surface, #1c2330), white 4%), transparent 92%);
  border: 1px solid var(--cr-border, #2b3442);
  border-radius: 16px;
  color: var(--cr-muted, #cfd6e6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  padding: 14px 16px;
  padding-left: calc(16px + var(--tb-rail-w) + 6px);
  height: 100%;
  display: flex; flex-direction: column; gap: 10px;
}

body.fg-casino-games .fg-games .cg-card > .kt-inside-inner-col::before {
  content: "";
  position: absolute; left: 12px; top: 12px; bottom: 12px; width: var(--tb-rail-w);
  border-radius: 4px; background: var(--tb-rail);
  filter: drop-shadow(0 0 8px rgba(159, 123, 255, .45));
}

body.fg-casino-games .fg-games .cg-card :is(h3, h4) {
  color: var(--cr-muted-strong, #e3eaf7);
  margin: 0 0 8px; line-height: 1.2; font-weight: 800;
}

body.fg-casino-games .fg-games .cg-card :is(p, li) {
  color: var(--cr-muted, #cfd6e6);
}

body.fg-casino-games .fg-games .cg-card :is(.aligncenter, .wp-block-image.aligncenter) {
  width: 100% !important; margin: 0 0 12px !important;
  border-radius: 12px; overflow: hidden; line-height: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

body.fg-casino-games .fg-games .cg-card :is(.aligncenter img, .wp-block-image.aligncenter img) {
  display: block; width: 100% !important; height: auto; border-radius: 12px;
}

body.fg-casino-games .fg-games .cg-picks {
  margin: 4px 0 2px; font-weight: 700; color: var(--cr-muted-strong, #e3eaf7);
}

@media (max-width: 782px) {
  body.fg-casino-games .fg-games.cg-grid {
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
    padding-left: var(--edge);
    padding-right: var(--edge);
  }
}
