/* =====================================================
   rhino CASINO — BASE
===================================================== */

:root {
  --bg-main: #050908;
  --text-main: #ffffff;
  --text-soft: #d7dee7;

  --green: #8ee85f;
  --green-dark: #66bf3e;

  --gold: #d8c86a;

  --border: rgba(255, 255, 255, 0.10);
  --border-green: rgba(142, 232, 95, 0.35);

  --container: 1280px;
  --games-container: 1400px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

  color: var(--text-main);
  background: var(--bg-main);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}


/* =====================================================
   START HEADER
===================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;

  background: rgba(5, 9, 8, 0.97);

  border-bottom: 1px solid var(--border-green);

  backdrop-filter: blur(12px);
}

.site-header__inner {
  width: 100%;
  max-width: var(--container);
  min-height: 92px;

  margin: 0 auto;
  padding: 0 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 32px;
}


/* =====================================================
   START LOGO
===================================================== */

.site-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;

  min-width: 150px;

  line-height: 1;
}

.site-logo__main {
  font-family: Georgia, "Times New Roman", serif;

  font-size: 46px;
  font-weight: 700;

  letter-spacing: -3px;

  color: var(--green);
}

.site-logo__number {
  color: var(--text-main);
}

.site-logo__sub {
  margin-top: 5px;
  padding-left: 6px;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 9px;

  color: var(--gold);
}

/* =====================================================
   END LOGO
===================================================== */


/* =====================================================
   START NAVIGATION
===================================================== */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 1;

  gap: 22px;
}

.site-nav a {
  color: var(--text-main);

  font-size: 15px;
  font-weight: 700;

  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: var(--green);
}

/* =====================================================
   END NAVIGATION
===================================================== */


/* =====================================================
   START HEADER BUTTON
===================================================== */

.site-header__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  min-width: 150px;
}

.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;

  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.site-btn--header {
  min-height: 48px;

  padding: 0 26px;

  color: #061006;
  background: var(--green);

  border-radius: 999px;

  box-shadow: 0 0 0 1px rgba(142, 232, 95, 0.4);
}

.site-btn--header:hover {
  background: #9af06b;

  transform: translateY(-1px);

  box-shadow: 0 10px 28px rgba(142, 232, 95, 0.25);
}

/* =====================================================
   END HEADER BUTTON
===================================================== */


/* =====================================================
   END HEADER
===================================================== */


/* =====================================================
   START HERO
===================================================== */

.rhino-hero {
  position: relative;

  width: 100%;

  min-height: calc(100vh - 92px);
  min-height: calc(100svh - 92px);

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(3, 8, 6, 0.94) 0%,
      rgba(3, 8, 6, 0.85) 28%,
      rgba(3, 8, 6, 0.55) 48%,
      rgba(3, 8, 6, 0.16) 68%,
      rgba(3, 8, 6, 0.02) 100%
    ),
    url("../img/hero/hero-bg.png") center right / cover no-repeat;

  border-bottom: 1px solid rgba(142, 232, 95, 0.12);
}

.rhino-hero-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: var(--container);

  margin: 0 auto;
  padding: 80px 24px;
}

.rhino-hero-copy {
  width: 100%;
  max-width: 610px;
}

.rhino-hero-brand {
  margin: 0 0 18px;

  color: var(--gold);

  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 5px;
  text-transform: uppercase;
}

.rhino-hero h1 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(50px, 5.3vw, 78px);
  font-weight: 800;
  line-height: 0.98;

  letter-spacing: -2px;
}

.rhino-hero h1 span {
  color: var(--green);
}

.rhino-hero-intro {
  width: 100%;
  max-width: 580px;

  margin: 28px 0 0;

  color: rgba(255, 255, 255, 0.82);

  font-size: 18px;
  line-height: 1.7;
}

.rhino-hero-action {
  margin-top: 32px;
}

.rhino-hero .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 170px;
  min-height: 54px;

  padding: 14px 30px;

  color: #071006;
  background: var(--green);

  border: 1px solid var(--green);
  border-radius: 6px;

  font-size: 15px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.8px;
  text-transform: uppercase;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.rhino-hero .theme-btn:hover {
  background: #ffffff;
  border-color: #ffffff;

  transform: translateY(-2px);
}

.rhino-hero .theme-btn i,
.rhino-hero .theme-btn::before,
.rhino-hero .theme-btn::after {
  display: none !important;
}

/* =====================================================
   END HERO
===================================================== */


/* =====================================================
   START GAME CATALOGUE
===================================================== */

.gm-library {
  position: relative;

  width: 100%;

  padding: 54px 18px 90px;

  color: #ffffff;
  background: #050807;
}

.gm-library::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(142, 232, 95, 0.055),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 30%,
      rgba(216, 200, 106, 0.035),
      transparent 28%
    );
}

.gm-library > * {
  position: relative;
  z-index: 1;
}


/* =====================================================
   START GAME CATALOGUE HEADER
===================================================== */

.gm-heading {
  width: 100%;
  max-width: var(--games-container);

  margin: 0 auto 24px;
}

.gm-eyebrow {
  margin: 0 0 8px;

  color: var(--gold);

  font-size: 13px;
  font-weight: 800;

  letter-spacing: 4px;
  text-transform: uppercase;
}

.gm-heading h2 {
  margin: 0 0 16px;

  color: #ffffff;

  font-size: clamp(40px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.04;

  letter-spacing: -1.5px;
}

.gm-heading .gm-lead,
.gm-heading > p:not(.gm-eyebrow) {
  width: 100%;
  max-width: 1300px;

  margin: 0 0 8px;

  color: rgba(255, 255, 255, 0.79);

  font-size: 17px;
  line-height: 1.62;
}

/* =====================================================
   END GAME CATALOGUE HEADER
===================================================== */


/* =====================================================
   START GAME SWITCHERS
===================================================== */

.gm-switcher {
  width: 100%;
  max-width: var(--games-container);

  margin-left: auto;
  margin-right: auto;

  padding: 0;

  border: 0;
}

.gm-main-switcher {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 22px;
  margin-bottom: 30px;
}

.gm-category-switcher {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 22px;
  margin-bottom: 20px;
}

.gm-choice {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;
}

.gm-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding: 14px 26px;

  color: rgba(255, 255, 255, 0.80);
  background: #0b100e;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;

  font-size: 15px;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.gm-main-switcher .gm-tab {
  min-height: 54px;

  padding: 15px 30px;

  font-size: 15px;
}

.gm-category-switcher .gm-tab {
  min-height: 50px;

  padding: 13px 25px;

  font-size: 15px;
}

.gm-tab:hover {
  color: #ffffff;

  border-color: rgba(142, 232, 95, 0.50);

  box-shadow: 0 0 0 1px rgba(142, 232, 95, 0.06);
}

.gm-choice:checked + .gm-tab {
  color: #061006;
  background: var(--green);

  border-color: var(--green);

  box-shadow:
    0 0 0 1px rgba(142, 232, 95, 0.25),
    0 8px 20px rgba(142, 232, 95, 0.10);
}

.gm-choice:focus-visible + .gm-tab {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* =====================================================
   END GAME SWITCHERS
===================================================== */


/* =====================================================
   START slots SECTION
===================================================== */

.gm-section {
  width: 100%;
  max-width: var(--games-container);

  margin: 0 auto;
}

.gm-section-head {
  width: 100%;
  max-width: 1300px;
}

.gm-section-head h3,
.gm-section > h3 {
  margin: 0 0 15px;

  color: #ffffff;

  font-size: clamp(34px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.08;

  letter-spacing: -1px;
}

.gm-panel-intro {
  width: 100%;
  max-width: 1300px;

  margin: 0 0 11px;

  color: rgba(255, 255, 255, 0.77);

  font-size: 16.5px;
  line-height: 1.62;
}

/* =====================================================
   END slots SECTION
===================================================== */


/* =====================================================
   START MORE ABOUT slots
===================================================== */

.gm-info {
  width: 100%;
  max-width: 1300px;

  margin: 0 0 26px;

  overflow: hidden;

  background: rgba(142, 232, 95, 0.03);

  border: 1px solid rgba(142, 232, 95, 0.18);
  border-radius: 8px;
}

.gm-info summary {
  position: relative;

  padding: 15px 50px 15px 18px;

  color: var(--green);

  font-size: 14px;
  font-weight: 800;

  cursor: pointer;

  list-style: none;
}

.gm-info summary::-webkit-details-marker {
  display: none;
}

.gm-info summary::marker {
  display: none;
}

.gm-info summary::after {
  content: "+";

  position: absolute;

  right: 18px;
  top: 50%;

  transform: translateY(-50%);

  color: var(--green);

  font-size: 22px;
  line-height: 1;
}

.gm-info[open] summary::after {
  content: "−";
}

.gm-info-content {
  padding: 0 18px 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gm-info-content p {
  max-width: 1240px;

  margin: 13px 0 0;

  color: rgba(255, 255, 255, 0.74);

  font-size: 15.5px;
  line-height: 1.65;
}

/* =====================================================
   END MORE ABOUT slots
===================================================== */


/* =====================================================
   START slots CATEGORY PANEL
===================================================== */

.gm-panel {
  width: 100%;

  margin-top: 0;
}

.gm-category-head {
  width: 100%;
  max-width: 1300px;

  margin-bottom: 20px;
}

.gm-category-head h4,
.gm-panel > h4 {
  position: relative;

  margin: 0 0 12px;
  padding-left: 17px;

  color: #ffffff;

  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 800;
  line-height: 1.12;

  letter-spacing: -0.6px;
}

.gm-category-head h4::before,
.gm-panel > h4::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.08em;

  width: 4px;
  height: 1.08em;

  background: var(--green);

  border-radius: 4px;
}

.gm-category-intro {
  width: 100%;
  max-width: 1300px;

  margin: 0 0 9px;

  color: rgba(255, 255, 255, 0.77);

  font-size: 16.5px;
  line-height: 1.62;
}

/* =====================================================
   END slots CATEGORY PANEL
===================================================== */


/* =====================================================
   START GAME GRID
===================================================== */

.gm-grid {
  position: relative;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 14px;

  margin-top: 18px;
}

.gm-grid:has(.gm-game details[open]) {
  padding-bottom: 250px;
}

.gm-game {
  min-width: 0;
}

.gm-game details {
  height: 100%;

  overflow: visible;

  background: #0b100e;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;

  transform: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.gm-game details:hover {
  border-color: rgba(142, 232, 95, 0.38);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.gm-game details[open] {
  border-color: rgba(142, 232, 95, 0.58);

  box-shadow:
    0 0 0 1px rgba(142, 232, 95, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.22);
}

/* =====================================================
   END GAME GRID
===================================================== */


/* =====================================================
   START GAME CARD
===================================================== */

.gm-game summary {
  position: relative;

  display: block;

  height: 100%;

  overflow: hidden;

  list-style: none;

  cursor: pointer;

  border-radius: 8px;
}

.gm-game summary::-webkit-details-marker {
  display: none;
}

.gm-game summary::marker {
  display: none;
}

.gm-game summary img {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 10;

  object-fit: cover;

  background: #111714;
}

.gm-card-copy {
  position: relative;

  display: block;

  min-height: 80px;

  padding: 14px 34px 14px 14px;
}

.gm-name {
  display: block;

  color: #ffffff;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.32;
}

.gm-hint {
  display: block;

  margin-top: 5px;

  color: var(--green);

  font-size: 12px;
  font-weight: 700;
}

.gm-card-copy::after {
  content: "+";

  position: absolute;

  top: 50%;
  right: 12px;

  transform: translateY(-50%);

  color: var(--green);

  font-size: 20px;
  line-height: 1;
}

.gm-game details[open] .gm-card-copy::after {
  content: "−";
}

/* =====================================================
   END GAME CARD
===================================================== */


/* =====================================================
   START OPEN GAME DESCRIPTION
===================================================== */

.gm-description {
  display: none;
}

.gm-game details[open] > .gm-description {
  position: absolute;

  left: 0;
  right: 0;

  top: calc(100% - 250px);

  display: block;

  min-height: 230px;

  padding: 22px 24px;

  background: #0a0f0d;

  border: 1px solid rgba(142, 232, 95, 0.44);
  border-radius: 9px;

  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);

  z-index: 10;
}

.gm-description dl {
  display: grid;

  grid-template-columns:
    minmax(150px, 0.75fr)
    minmax(0, 1.15fr)
    minmax(0, 1.15fr)
    minmax(0, 1.15fr);

  gap: 0;

  margin: 0;
}

.gm-rule {
  min-width: 0;

  padding: 0 20px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.gm-rule:first-child {
  padding-left: 0;
}

.gm-rule:last-child {
  padding-right: 0;

  border-right: 0;
}

.gm-rule dt {
  margin: 0 0 9px;

  color: var(--gold);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.gm-rule dd {
  margin: 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 13px;
  line-height: 1.58;
}

/* =====================================================
   END OPEN GAME DESCRIPTION
===================================================== */


/* =====================================================
   START RESPONSIVE — HEADER / HERO
===================================================== */

@media (max-width: 991px) {

  .site-header__inner {
    flex-wrap: wrap;

    min-height: auto;

    padding: 16px 20px;

    gap: 16px;
  }

  .site-logo {
    min-width: auto;
  }

  .site-nav {
    order: 3;

    width: 100%;

    flex-wrap: wrap;
    justify-content: flex-start;

    gap: 12px 18px;
  }

  .site-header__action {
    min-width: auto;
  }

  .rhino-hero {
    min-height: calc(100svh - 92px);

    background:
      linear-gradient(
        90deg,
        rgba(3, 8, 6, 0.95) 0%,
        rgba(3, 8, 6, 0.86) 40%,
        rgba(3, 8, 6, 0.48) 67%,
        rgba(3, 8, 6, 0.10) 100%
      ),
      url("../img/hero/hero-bg.png") 65% center / cover no-repeat;
  }

  .rhino-hero-inner {
    padding: 70px 24px;
  }
}


@media (max-width: 767px) {

  .rhino-hero {
    min-height: calc(100svh - 92px);

    align-items: flex-end;

    background:
      linear-gradient(
        180deg,
        rgba(3, 8, 6, 0.14) 0%,
        rgba(3, 8, 6, 0.48) 42%,
        rgba(3, 8, 6, 0.90) 70%,
        #030806 100%
      ),
      url("../img/hero/hero-bg.png") 72% center / cover no-repeat;
  }

  .rhino-hero-inner {
    padding: 180px 20px 55px;
  }

  .rhino-hero-brand {
    font-size: 13px;
    letter-spacing: 3px;
  }

  .rhino-hero h1 {
    font-size: clamp(40px, 11vw, 58px);
    line-height: 1;
  }

  .rhino-hero-intro {
    font-size: 16px;
  }
}


@media (max-width: 560px) {

  .site-header__inner {
    align-items: flex-start;
  }

  .site-logo__main {
    font-size: 38px;
  }

  .site-logo__sub {
    font-size: 9px;
    letter-spacing: 7px;
  }

  .site-nav a {
    font-size: 14px;
  }

  .site-btn--header {
    min-height: 42px;

    padding: 0 18px;

    font-size: 14px;
  }
}

/* =====================================================
   END RESPONSIVE — HEADER / HERO
===================================================== */


/* =====================================================
   START RESPONSIVE — GAME CATALOGUE
===================================================== */

@media (max-width: 1250px) {

  .gm-library {
    padding-left: 20px;
    padding-right: 20px;
  }

  .gm-heading .gm-lead,
  .gm-heading > p:not(.gm-eyebrow),
  .gm-section-head,
  .gm-panel-intro,
  .gm-category-head,
  .gm-category-intro,
  .gm-info {
    max-width: 100%;
  }

  .gm-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gm-grid:has(.gm-game details[open]) {
    padding-bottom: 350px;
  }

  .gm-game details[open] > .gm-description {
    top: calc(100% - 350px);

    min-height: 330px;
  }

  .gm-description dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    row-gap: 24px;
  }

  .gm-rule:nth-child(2) {
    border-right: 0;
  }

  .gm-rule:nth-child(3) {
    padding-left: 0;
  }
}


@media (max-width: 900px) {

  .gm-library {
    padding: 44px 18px 75px;
  }

  .gm-heading h2 {
    font-size: 40px;
  }

  .gm-main-switcher,
  .gm-category-switcher {
    gap: 9px;
  }

  .gm-tab,
  .gm-main-switcher .gm-tab,
  .gm-category-switcher .gm-tab {
    min-height: 48px;

    padding: 13px 20px;

    font-size: 14px;
  }

  .gm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


@media (max-width: 650px) {

  .gm-library {
    padding: 38px 14px 65px;
  }

  .gm-heading {
    margin-bottom: 18px;
  }

  .gm-heading h2 {
    font-size: 34px;
  }

  .gm-heading .gm-lead,
  .gm-heading > p:not(.gm-eyebrow),
  .gm-panel-intro,
  .gm-category-intro {
    font-size: 15px;
    line-height: 1.6;
  }

  .gm-main-switcher,
  .gm-category-switcher {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;
  }

  .gm-main-switcher {
    margin-top: 18px;
    margin-bottom: 24px;
  }

  .gm-category-switcher {
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .gm-tab,
  .gm-main-switcher .gm-tab,
  .gm-category-switcher .gm-tab {
    width: 100%;

    min-height: 50px;

    padding: 12px 14px;

    font-size: 14px;
    line-height: 1.2;
  }

  .gm-section-head h3,
  .gm-section > h3 {
    font-size: 30px;
  }

  .gm-category-head h4,
  .gm-panel > h4 {
    font-size: 26px;
  }

  .gm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gm-grid:has(.gm-game details[open]) {
    padding-bottom: 620px;
  }

  .gm-game details[open] > .gm-description {
    top: calc(100% - 620px);

    min-height: 600px;

    padding: 18px;
  }

  .gm-description dl {
    grid-template-columns: 1fr;
  }

  .gm-rule,
  .gm-rule:first-child,
  .gm-rule:nth-child(3),
  .gm-rule:last-child {
    padding: 13px 0;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .gm-rule:first-child {
    padding-top: 0;
  }

  .gm-rule:last-child {
    border-bottom: 0;
  }
}

/* =====================================================
   END RESPONSIVE — GAME CATALOGUE
===================================================== */


/* =====================================================
   END rhino CASINO STYLES
===================================================== */

/* =====================================================
START LIVE CASINO
===================================================== */

#live-casino-panel {
width: 100%;
max-width: var(--container);
margin: 0 auto;
}

/* =====================================================
LIVE CASINO INTRO
===================================================== */

#live-casino-panel > .gm-section-head {
width: 100%;
max-width: 1180px;
margin-bottom: 24px;
}

#live-casino-panel > .gm-section-head h3 {
margin: 0 0 18px;

color: #ffffff;

font-size: clamp(34px, 3.2vw, 46px);
font-weight: 800;
line-height: 1.08;

letter-spacing: -1px;
}

#live-casino-panel > .gm-section-head .gm-panel-intro {
width: 100%;
max-width: 1160px;

margin: 0 0 12px;

color: rgba(255, 255, 255, 0.78);

font-size: 16px;
line-height: 1.68;
}

/* =====================================================
LIVE CASINO CATEGORY SWITCHER
===================================================== */

#live-casino-panel > .gm-category-switcher {
width: 100%;
max-width: 1180px;

display: flex;
flex-wrap: wrap;

gap: 12px;

margin: 24px 0 34px;
}

#live-casino-panel > .gm-category-switcher .gm-tab {
min-width: 150px;
min-height: 48px;

padding: 13px 24px;

font-size: 14px;
font-weight: 800;
}

/* =====================================================
LIVE CASINO PANEL VISIBILITY
===================================================== */

#live-casino-panel .gm-panel {
display: none;
}

#live-casino-panel:has(#live-roulette-choice:checked)
#live-roulette-panel {
display: block !important;
}

#live-casino-panel:has(#live-blackjack-choice:checked)
#live-blackjack-panel {
display: block !important;
}

#live-casino-panel:has(#live-baccarat-choice:checked)
#live-baccarat-panel {
display: block !important;
}

#live-casino-panel:has(#live-shows-choice:checked)
#live-shows-panel {
display: block !important;
}

/* =====================================================
LIVE CATEGORY HEAD
===================================================== */

#live-casino-panel .gm-category-head {
width: 100%;
max-width: 1180px;

margin: 0 0 24px;
}

#live-casino-panel .gm-category-head h4 {
position: relative;

margin: 0 0 14px;
padding-left: 16px;

color: #ffffff;

font-size: clamp(28px, 2.5vw, 36px);
font-weight: 800;
line-height: 1.16;

letter-spacing: -0.5px;
}

#live-casino-panel .gm-category-head h4::before {
content: "";

position: absolute;

left: 0;
top: 0.12em;

width: 4px;
height: 1.08em;

background: var(--green);

border-radius: 4px;
}

#live-casino-panel .gm-category-intro {
width: 100%;
max-width: 1160px;

margin: 0 0 11px;

color: rgba(255, 255, 255, 0.76);

font-size: 16px;
line-height: 1.68;
}

/* =====================================================
LIVE GAME GRID
===================================================== */

#live-casino-panel .gm-grid {
position: relative;

width: 100%;

display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));

gap: 14px;

margin-top: 22px;
}

/*
Reserve space under the row only when
one live game description is open.
*/

#live-casino-panel .gm-grid:has(.gm-game details[open]) {
padding-bottom: 250px;
}

#live-casino-panel .gm-game {
min-width: 0;
}

/* =====================================================
LIVE GAME CARD
===================================================== */

#live-casino-panel .gm-game details {
height: 100%;

overflow: visible;

background: #0b100e;

border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 9px;

transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}

#live-casino-panel .gm-game details:hover {
border-color: rgba(142, 232, 95, 0.40);

box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

#live-casino-panel .gm-game details[open] {
border-color: rgba(142, 232, 95, 0.58);
}

#live-casino-panel .gm-game summary {
position: relative;

display: block;

height: 100%;

overflow: hidden;

list-style: none;
cursor: pointer;

border-radius: 8px;
}

#live-casino-panel .gm-game summary::-webkit-details-marker {
display: none;
}

#live-casino-panel .gm-game summary::marker {
display: none;
}

#live-casino-panel .gm-game summary img {
display: block;

width: 100%;
height: auto;

aspect-ratio: 16 / 10;

object-fit: cover;

background: #111714;
}

#live-casino-panel .gm-card-copy {
position: relative;

display: block;

min-height: 82px;

padding: 14px 34px 14px 14px;
}

#live-casino-panel .gm-name {
display: block;

color: #ffffff;

font-size: 14px;
font-weight: 800;
line-height: 1.32;
}

#live-casino-panel .gm-hint {
display: block;

margin-top: 5px;

color: var(--green);

font-size: 12px;
font-weight: 700;
}

#live-casino-panel .gm-card-copy::after {
content: "+";

position: absolute;

top: 50%;
right: 12px;

transform: translateY(-50%);

color: var(--green);

font-size: 20px;
line-height: 1;
}

#live-casino-panel .gm-game details[open] .gm-card-copy::after {
content: "−";
}

/* =====================================================
LIVE OPEN DESCRIPTION
===================================================== */

#live-casino-panel .gm-description {
display: none;
}

#live-casino-panel .gm-game details[open] > .gm-description {
position: absolute;

left: 0;
right: 0;

top: calc(100% - 250px);

display: block;

min-height: 230px;

padding: 20px 22px;

background: #0a0f0d;

border: 1px solid rgba(142, 232, 95, 0.44);
border-radius: 9px;

box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30);

z-index: 20;
}

#live-casino-panel .gm-description dl {
display: grid;

grid-template-columns:
minmax(160px, 0.82fr)
minmax(0, 1.06fr)
minmax(0, 1.06fr)
minmax(0, 1.06fr);

gap: 0;

margin: 0;
}

#live-casino-panel .gm-rule {
min-width: 0;

padding: 0 18px;

border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#live-casino-panel .gm-rule:first-child {
padding-left: 0;
}

#live-casino-panel .gm-rule:last-child {
padding-right: 0;

border-right: 0;
}

#live-casino-panel .gm-rule dt {
margin: 0 0 8px;

color: var(--gold);

font-size: 11px;
font-weight: 800;

letter-spacing: 0.5px;
text-transform: uppercase;
}

#live-casino-panel .gm-rule dd {
margin: 0;

color: rgba(255, 255, 255, 0.77);

font-size: 13px;
line-height: 1.58;
}

/* =====================================================
LIVE CASINO — LAPTOP
===================================================== */

@media (max-width: 1200px) {

#live-casino-panel .gm-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

#live-casino-panel .gm-grid:has(.gm-game details[open]) {
padding-bottom: 330px;
}

#live-casino-panel .gm-game details[open] > .gm-description {
top: calc(100% - 330px);

min-height: 310px;
}

#live-casino-panel .gm-description dl {
grid-template-columns: repeat(2, minmax(0, 1fr));

row-gap: 22px;
}

#live-casino-panel .gm-rule:nth-child(2) {
border-right: 0;
}

#live-casino-panel .gm-rule:nth-child(3) {
padding-left: 0;
}
}

/* =====================================================
LIVE CASINO — TABLET
===================================================== */

@media (max-width: 900px) {

#live-casino-panel .gm-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

#live-casino-panel > .gm-category-switcher .gm-tab {
min-width: 130px;
}

#live-casino-panel .gm-category-head,
#live-casino-panel > .gm-section-head {
max-width: 100%;
}
}

/* =====================================================
LIVE CASINO — MOBILE
===================================================== */

@media (max-width: 650px) {

#live-casino-panel > .gm-category-switcher {
display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 8px;
}

#live-casino-panel > .gm-category-switcher .gm-tab {
width: 100%;
min-width: 0;

justify-content: center;
}

#live-casino-panel .gm-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 12px;
}

#live-casino-panel .gm-grid:has(.gm-game details[open]) {
padding-bottom: 610px;
}

#live-casino-panel .gm-game details[open] > .gm-description {
top: calc(100% - 610px);

min-height: 590px;
}

#live-casino-panel .gm-description dl {
grid-template-columns: 1fr;
}

#live-casino-panel .gm-rule,
#live-casino-panel .gm-rule:first-child,
#live-casino-panel .gm-rule:nth-child(3),
#live-casino-panel .gm-rule:last-child {
padding: 13px 0;

border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#live-casino-panel .gm-rule:first-child {
padding-top: 0;
}

#live-casino-panel .gm-rule:last-child {
border-bottom: 0;
}

#live-casino-panel > .gm-section-head h3 {
font-size: 32px;
}

#live-casino-panel .gm-category-head h4 {
font-size: 27px;
}

}

/* =====================================================
END LIVE CASINO
===================================================== */

/* =====================================================
START LIVE CASINO + GAMES FINAL LAYOUT
rhino CASINO
===================================================== */


/* =====================================================
START LIVE CASINO CATEGORY VISIBILITY — FIXED
===================================================== */



#live-casino-panel .gm-panel:not([hidden]) {
display: block;
}

/* =====================================================
END LIVE CASINO CATEGORY VISIBILITY — FIXED
===================================================== */


/* =====================================================
START LIVE CASINO TEXT
===================================================== */

#live-casino-panel {
width: 100%;
max-width: var(--container);
margin: 0 auto;
}

#live-casino-panel > h3,
#games-panel > h3 {
width: 100%;
max-width: 100%;

margin: 0 0 18px;

font-size: clamp(34px, 3vw, 46px);
font-weight: 800;
line-height: 1.1;

color: #ffffff;
letter-spacing: -1px;
}

#live-casino-panel > .gm-panel-intro,
#games-panel > .gm-panel-intro {
width: 100%;
max-width: 1180px;

margin: 0 0 13px;

font-size: 16px;
line-height: 1.68;

color: rgba(255, 255, 255, 0.78);
}

#live-casino-panel .gm-category-head,
#games-panel .gm-category-head {
width: 100%;
max-width: 1180px;

margin: 0 0 24px;
}

#live-casino-panel .gm-category-head h4,
#games-panel .gm-category-head h4,
#live-casino-panel > .gm-panel > h4,
#games-panel > .gm-panel > h4 {
position: relative;

width: 100%;
max-width: 1180px;

margin: 0 0 14px;
padding-left: 16px;

font-size: clamp(27px, 2.5vw, 36px);
font-weight: 800;
line-height: 1.18;

color: #ffffff;
letter-spacing: -0.5px;
}

#live-casino-panel .gm-category-head h4::before,
#games-panel .gm-category-head h4::before,
#live-casino-panel > .gm-panel > h4::before,
#games-panel > .gm-panel > h4::before {
content: "";

position: absolute;

left: 0;
top: 0.12em;

width: 4px;
height: 1.08em;

background: var(--green);
border-radius: 4px;
}

#live-casino-panel .gm-category-intro,
#games-panel .gm-category-intro,
#live-casino-panel .gm-panel > .gm-panel-intro,
#games-panel .gm-panel > .gm-panel-intro {
width: 100%;
max-width: 1180px;

margin: 0 0 12px;

font-size: 16px;
line-height: 1.68;

color: rgba(255, 255, 255, 0.76);
}

/* =====================================================
END LIVE CASINO TEXT
===================================================== */


/* =====================================================
START LIVE CASINO CATEGORY BUTTONS
===================================================== */

#live-casino-panel > .gm-category-switcher,
#games-panel > .gm-category-switcher {
width: 100%;
max-width: 1180px;

display: flex;
flex-wrap: wrap;

gap: 12px;

margin: 24px 0 32px;
}

#live-casino-panel > .gm-category-switcher .gm-tab,
#games-panel > .gm-category-switcher .gm-tab {
min-width: 165px;
min-height: 50px;

padding: 14px 26px;

font-size: 15px;
font-weight: 800;

justify-content: center;

border-radius: 7px;
}

/* =====================================================
END LIVE CASINO CATEGORY BUTTONS
===================================================== */


/* =====================================================
   START GAMES PANEL VISIBILITY
===================================================== */

#games-panel > .gm-panel[hidden] {
  display: none !important;
}

#games-panel > .gm-panel:not([hidden]) {
  display: block;
}

/* =====================================================
   END GAMES PANEL VISIBILITY
===================================================== */

/* =====================================================
START LIVE + GAMES GRID
6 CARDS IN ONE ROW
===================================================== */

#live-casino-panel .gm-grid,
#games-panel .gm-grid {
position: relative;

width: 100%;

display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));

gap: 14px;

margin-top: 22px;

align-items: start;
}



#live-casino-panel .gm-grid:has(.gm-game details[open]),
#games-panel .gm-grid:has(.gm-game details[open]) {
padding-bottom: 270px;
}

#live-casino-panel .gm-game,
#games-panel .gm-game {
position: static;
min-width: 0;
}

/* =====================================================
END LIVE + GAMES GRID
===================================================== */


/* =====================================================
START LIVE + GAMES CARD
===================================================== */

#live-casino-panel .gm-game details,
#games-panel .gm-game details {
position: static;

width: 100%;
height: 100%;

overflow: visible;

background: #0b100e;

border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 9px;

transform: none !important;

transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}

#live-casino-panel .gm-game details:hover,
#games-panel .gm-game details:hover {
transform: none !important;

border-color: rgba(142, 232, 95, 0.38);

box-shadow:
0 12px 28px rgba(0, 0, 0, 0.28);
}

#live-casino-panel .gm-game details[open],
#games-panel .gm-game details[open] {
border-color: rgba(142, 232, 95, 0.58);
}

#live-casino-panel .gm-game summary,
#games-panel .gm-game summary {
position: relative;

display: block;

height: 100%;

overflow: hidden;

list-style: none;
cursor: pointer;

border-radius: 8px;
}

#live-casino-panel .gm-game summary::-webkit-details-marker,
#games-panel .gm-game summary::-webkit-details-marker {
display: none;
}

#live-casino-panel .gm-game summary::marker,
#games-panel .gm-game summary::marker {
display: none;
}

#live-casino-panel .gm-game summary img,
#games-panel .gm-game summary img {
display: block;

width: 100%;
height: auto;

aspect-ratio: 16 / 10;

object-fit: cover;

background: #111714;

transform: none !important;
}

#live-casino-panel .gm-card-copy,
#games-panel .gm-card-copy {
position: relative;

display: block;

min-height: 82px;

padding: 14px 34px 14px 14px;
}

#live-casino-panel .gm-name,
#games-panel .gm-name {
display: block;

font-size: 14px;
font-weight: 800;
line-height: 1.32;

color: #ffffff;
}

#live-casino-panel .gm-hint,
#games-panel .gm-hint {
display: block;

margin-top: 5px;

font-size: 12px;
font-weight: 700;

color: var(--green);
}

#live-casino-panel .gm-card-copy::after,
#games-panel .gm-card-copy::after {
content: "+";

position: absolute;

top: 50%;
right: 12px;

transform: translateY(-50%);

font-size: 20px;
font-weight: 400;
line-height: 1;

color: var(--green);
}

#live-casino-panel .gm-game details[open] .gm-card-copy::after,
#games-panel .gm-game details[open] .gm-card-copy::after {
content: "−";
}

/* =====================================================
END LIVE + GAMES CARD
===================================================== */


/* =====================================================
START LIVE + GAMES OPEN DESCRIPTION
===================================================== */

#live-casino-panel .gm-description,
#games-panel .gm-description {
display: none;
}


#live-casino-panel .gm-game details[open] > .gm-description,
#games-panel .gm-game details[open] > .gm-description {
position: absolute;

left: 0;
right: 0;

top: calc(100% - 270px);

display: block;

width: 100%;
min-height: 250px;

padding: 20px 22px;

background: #0a0f0d;

border: 1px solid rgba(142, 232, 95, 0.44);
border-radius: 9px;

box-shadow:
0 14px 36px rgba(0, 0, 0, 0.30);

z-index: 20;
}



#live-casino-panel .gm-description dl,
#games-panel .gm-description dl {
display: grid;

grid-template-columns:
minmax(135px, 0.78fr)
minmax(0, 1.05fr)
minmax(0, 1.05fr)
minmax(0, 1.05fr)
minmax(0, 1.05fr);

gap: 0;

width: 100%;

margin: 0;
}

#live-casino-panel .gm-rule,
#games-panel .gm-rule {
min-width: 0;

padding: 0 16px;

border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#live-casino-panel .gm-rule:first-child,
#games-panel .gm-rule:first-child {
padding-left: 0;
}

#live-casino-panel .gm-rule:last-child,
#games-panel .gm-rule:last-child {
padding-right: 0;
border-right: 0;
}

#live-casino-panel .gm-rule dt,
#games-panel .gm-rule dt {
margin: 0 0 8px;

font-size: 11px;
font-weight: 800;
line-height: 1.3;

letter-spacing: 0.45px;
text-transform: uppercase;

color: var(--gold);
}

#live-casino-panel .gm-rule dd,
#games-panel .gm-rule dd {
margin: 0;

font-size: 12.5px;
line-height: 1.58;

color: rgba(255, 255, 255, 0.77);
}

/* =====================================================
END LIVE + GAMES OPEN DESCRIPTION
===================================================== */


/* =====================================================
LIVE + GAMES — LARGE TABLET
===================================================== */

@media (max-width: 1180px) {

#live-casino-panel .gm-grid,
#games-panel .gm-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

#live-casino-panel .gm-grid:has(.gm-game details[open]),
#games-panel .gm-grid:has(.gm-game details[open]) {
padding-bottom: 390px;
}

#live-casino-panel .gm-game details[open] > .gm-description,
#games-panel .gm-game details[open] > .gm-description {
top: calc(100% - 390px);

min-height: 370px;
}

#live-casino-panel .gm-description dl,
#games-panel .gm-description dl {
grid-template-columns: repeat(3, minmax(0, 1fr));

row-gap: 24px;
}

#live-casino-panel .gm-rule:nth-child(3),
#games-panel .gm-rule:nth-child(3) {
border-right: 0;
}

#live-casino-panel .gm-rule:nth-child(4),
#games-panel .gm-rule:nth-child(4) {
padding-left: 0;
}

}


/* =====================================================
LIVE + GAMES — TABLET
===================================================== */

@media (max-width: 900px) {

#live-casino-panel .gm-grid,
#games-panel .gm-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

#live-casino-panel .gm-grid:has(.gm-game details[open]),
#games-panel .gm-grid:has(.gm-game details[open]) {
padding-bottom: 500px;
}

#live-casino-panel .gm-game details[open] > .gm-description,
#games-panel .gm-game details[open] > .gm-description {
top: calc(100% - 500px);

min-height: 480px;
}

#live-casino-panel .gm-description dl,
#games-panel .gm-description dl {
grid-template-columns: repeat(2, minmax(0, 1fr));

row-gap: 22px;
}

#live-casino-panel .gm-rule,
#games-panel .gm-rule {
border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#live-casino-panel .gm-rule:nth-child(even),
#games-panel .gm-rule:nth-child(even) {
border-right: 0;
}

#live-casino-panel .gm-rule:nth-child(odd),
#games-panel .gm-rule:nth-child(odd) {
padding-left: 0;
}

}


/* =====================================================
LIVE + GAMES — MOBILE
===================================================== */

@media (max-width: 650px) {

#live-casino-panel > .gm-category-switcher,
#games-panel > .gm-category-switcher {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 8px;

margin-top: 20px;
margin-bottom: 28px;
}

#live-casino-panel > .gm-category-switcher .gm-tab,
#games-panel > .gm-category-switcher .gm-tab {
width: 100%;
min-width: 0;
min-height: 48px;

padding: 12px 10px;

font-size: 13px;
}

#live-casino-panel .gm-grid,
#games-panel .gm-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 12px;
}

#live-casino-panel .gm-grid:has(.gm-game details[open]),
#games-panel .gm-grid:has(.gm-game details[open]) {
padding-bottom: 760px;
}

#live-casino-panel .gm-game details[open] > .gm-description,
#games-panel .gm-game details[open] > .gm-description {
top: calc(100% - 760px);

min-height: 740px;

padding: 18px;
}

#live-casino-panel .gm-description dl,
#games-panel .gm-description dl {
grid-template-columns: 1fr;
}

#live-casino-panel .gm-rule,
#games-panel .gm-rule,
#live-casino-panel .gm-rule:first-child,
#games-panel .gm-rule:first-child,
#live-casino-panel .gm-rule:last-child,
#games-panel .gm-rule:last-child {
padding: 13px 0;

border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#live-casino-panel .gm-rule:first-child,
#games-panel .gm-rule:first-child {
padding-top: 0;
}

#live-casino-panel .gm-rule:last-child,
#games-panel .gm-rule:last-child {
border-bottom: 0;
}

#live-casino-panel > h3,
#games-panel > h3 {
font-size: 31px;
}

#live-casino-panel .gm-category-head h4,
#games-panel .gm-category-head h4,
#live-casino-panel > .gm-panel > h4,
#games-panel > .gm-panel > h4 {
font-size: 26px;
}

#live-casino-panel .gm-category-intro,
#games-panel .gm-category-intro,
#live-casino-panel .gm-panel-intro,
#games-panel .gm-panel-intro {
font-size: 15px;
line-height: 1.65;
}

}


/* =====================================================
END LIVE CASINO + GAMES FINAL LAYOUT
===================================================== */

/* =====================================================
   START GAMES SECTION — rhino
===================================================== */

/* -----------------------------------------------------
   GAMES MAIN SECTION
----------------------------------------------------- */

#games-panel {
  width: 100%;
}

#games-panel .gm-section-head {
  width: 100%;
  max-width: none;

  margin: 0 0 30px;
}

#games-panel .gm-section-head h3 {
  margin: 0 0 18px;

  color: #ffffff;

  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1.08;

  letter-spacing: -1.2px;
}

#games-panel .gm-panel-intro {
  width: 100%;
  max-width: none;

  margin: 0 0 14px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 16px;
  line-height: 1.72;
}


/* -----------------------------------------------------
   GAMES CATEGORY SWITCHER
----------------------------------------------------- */

#games-panel > .gm-category-switcher {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin: 30px 0 42px;
}

#games-panel > .gm-category-switcher .gm-tab {
  width: 100%;

  min-height: 54px;

  padding: 14px 18px;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;

  text-align: center;

  border-radius: 7px;
}


/* -----------------------------------------------------
   CATEGORY INTRO
----------------------------------------------------- */

#games-panel .gm-category-head {
  width: 100%;
  max-width: none;

  margin: 0 0 28px;
}

#games-panel .gm-category-head h4 {
  position: relative;

  margin: 0 0 18px;
  padding-left: 18px;

  color: #ffffff;

  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 800;
  line-height: 1.12;

  letter-spacing: -0.7px;
}

#games-panel .gm-category-head h4::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.1em;

  width: 4px;
  height: 1.05em;

  background: var(--green);

  border-radius: 5px;
}

#games-panel .gm-category-intro {
  width: 100%;
  max-width: none;

  margin: 0 0 14px;

  color: rgba(255, 255, 255, 0.76);

  font-size: 16px;
  line-height: 1.72;
}


/* -----------------------------------------------------
   GAMES GRID — 5 CARDS PER ROW
----------------------------------------------------- */

#games-panel .gm-grid--five {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 16px;

  margin-top: 24px;
}


/* -----------------------------------------------------
   GAME CARDS
----------------------------------------------------- */

#games-panel .gm-grid--five .gm-game {
  min-width: 0;
}

#games-panel .gm-grid--five .gm-game details {
  height: 100%;

  background: #0a100d;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;

  overflow: visible;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#games-panel .gm-grid--five .gm-game details:hover {
  border-color: rgba(142, 232, 95, 0.40);

  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);

  transform: translateY(-2px);
}

#games-panel .gm-grid--five .gm-game details[open] {
  border-color: rgba(142, 232, 95, 0.58);

  transform: none;
}


/* -----------------------------------------------------
   GAME CARD IMAGE
----------------------------------------------------- */

#games-panel .gm-grid--five .gm-game summary img {
  width: 100%;

  aspect-ratio: 16 / 10;

  object-fit: cover;
  object-position: center;

  background: #101713;

  border-radius: 8px 8px 0 0;
}


/* -----------------------------------------------------
   GAME CARD TEXT
----------------------------------------------------- */

#games-panel .gm-grid--five .gm-card-copy {
  min-height: 86px;

  padding: 14px 36px 14px 14px;
}

#games-panel .gm-grid--five .gm-name {
  color: #ffffff;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

#games-panel .gm-grid--five .gm-hint {
  margin-top: 6px;

  color: var(--green);

  font-size: 12px;
  font-weight: 800;
}


/* -----------------------------------------------------
   OPEN GAME DESCRIPTION
----------------------------------------------------- */

#games-panel .gm-grid--five:has(.gm-game details[open]) {
  padding-bottom: 250px;
}

#games-panel .gm-grid--five .gm-game details[open] > .gm-description {
  top: calc(100% - 250px);

  min-height: 230px;

  padding: 22px 24px;

  background:
    linear-gradient(
      180deg,
      rgba(12, 19, 15, 0.98),
      rgba(7, 12, 10, 0.99)
    );

  border: 1px solid rgba(142, 232, 95, 0.42);
  border-radius: 9px;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}


/* -----------------------------------------------------
   DESCRIPTION COLUMNS
----------------------------------------------------- */

#games-panel .gm-description dl {
  display: grid;

  grid-template-columns:
    minmax(150px, 0.7fr)
    repeat(3, minmax(0, 1fr));

  gap: 0;

  margin: 0;
}

#games-panel .gm-rule {
  min-width: 0;

  padding: 0 20px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#games-panel .gm-rule:first-child {
  padding-left: 0;
}

#games-panel .gm-rule:last-child {
  padding-right: 0;

  border-right: 0;
}

#games-panel .gm-rule dt {
  margin: 0 0 9px;

  color: var(--gold);

  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.6px;
  text-transform: uppercase;
}

#games-panel .gm-rule dd {
  margin: 0;

  color: rgba(255, 255, 255, 0.76);

  font-size: 13px;
  line-height: 1.62;
}


/* =====================================================
   GAMES — LARGE TABLET
===================================================== */

@media (max-width: 1180px) {

  #games-panel > .gm-category-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #games-panel .gm-grid--five {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 310px;
  }

  #games-panel .gm-grid--five .gm-game details[open] > .gm-description {
    top: calc(100% - 310px);

    min-height: 290px;
  }

}


/* =====================================================
   GAMES — TABLET
===================================================== */

@media (max-width: 900px) {

  #games-panel .gm-grid--five {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;
  }

  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 400px;
  }

  #games-panel .gm-grid--five .gm-game details[open] > .gm-description {
    top: calc(100% - 400px);

    min-height: 380px;
  }

  #games-panel .gm-description dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    row-gap: 24px;
  }

  #games-panel .gm-rule:nth-child(2) {
    border-right: 0;
  }

  #games-panel .gm-rule:nth-child(3) {
    padding-left: 0;
  }

}


/* =====================================================
   GAMES — MOBILE
===================================================== */

@media (max-width: 650px) {

  #games-panel > .gm-category-switcher {
    grid-template-columns: 1fr;

    gap: 10px;

    margin-bottom: 32px;
  }

  #games-panel > .gm-category-switcher .gm-tab {
    min-height: 50px;
  }

  #games-panel .gm-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
  }

  #games-panel .gm-category-head h4 {
    font-size: 28px;
  }

  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 650px;
  }

  #games-panel .gm-grid--five .gm-game details[open] > .gm-description {
    top: calc(100% - 650px);

    min-height: 630px;

    padding: 20px;
  }

  #games-panel .gm-description dl {
    grid-template-columns: 1fr;
  }

  #games-panel .gm-rule,
  #games-panel .gm-rule:first-child,
  #games-panel .gm-rule:nth-child(3),
  #games-panel .gm-rule:last-child {
    padding: 14px 0;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #games-panel .gm-rule:first-child {
    padding-top: 0;
  }

  #games-panel .gm-rule:last-child {
    border-bottom: 0;
  }

}


/* =====================================================
   GAMES — SMALL MOBILE
===================================================== */

@media (max-width: 430px) {

  #games-panel .gm-grid--five {
    grid-template-columns: 1fr;
  }

  #games-panel .gm-card-copy {
    min-height: 76px;
  }

  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 690px;
  }

  #games-panel .gm-grid--five .gm-game details[open] > .gm-description {
    top: calc(100% - 690px);

    min-height: 670px;
  }

}

/* =====================================================
   END GAMES SECTION — rhino
===================================================== */

/* =====================================================
   START GAMES — FOUR CATEGORY LAYOUT
===================================================== */

/* Main Games section */

#games-panel {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

#games-panel > h3 {
  margin: 0 0 20px;

  color: #ffffff;

  font-size: clamp(38px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1.08;

  letter-spacing: -1.4px;
}


/* =====================================================
   GAMES INTRO TEXT
===================================================== */

#games-panel > .gm-panel-intro {
  width: 100%;
  max-width: none;

  margin: 0 0 15px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 16px;
  line-height: 1.7;
}


/* =====================================================
   GAMES CATEGORY SWITCHER
===================================================== */

#games-panel > .gm-category-switcher {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin: 30px 0 42px;
  padding: 0;
}

#games-panel > .gm-category-switcher .gm-tab {
  width: 100%;
  min-height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 13px 18px;

  color: rgba(255, 255, 255, 0.78);
  background: #0a100d;

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;

  text-align: center;

  cursor: pointer;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#games-panel > .gm-category-switcher .gm-tab:hover {
  color: #ffffff;

  border-color: rgba(142, 232, 95, 0.55);

  transform: translateY(-1px);
}

#games-panel > .gm-category-switcher .gm-choice:checked + .gm-tab {
  color: #061006;
  background: var(--green);

  border-color: var(--green);

  box-shadow: 0 8px 22px rgba(142, 232, 95, 0.15);
}


/* =====================================================
   CATEGORY PANEL
===================================================== */

#games-panel > .gm-panel {
  width: 100%;

  margin: 0;
  padding: 0;
}


/* =====================================================
   CATEGORY INTRO
===================================================== */

#games-panel .gm-category-head {
  width: 100%;
  max-width: none;

  margin: 0 0 30px;
}

#games-panel .gm-category-head h4 {
  position: relative;

  margin: 0 0 20px;
  padding-left: 18px;

  color: #ffffff;

  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 800;
  line-height: 1.15;

  letter-spacing: -0.7px;
}

#games-panel .gm-category-head h4::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.08em;

  width: 4px;
  height: 1.15em;

  background: var(--green);

  border-radius: 4px;
}

#games-panel .gm-category-intro {
  width: 100%;
  max-width: none;

  margin: 0 0 14px;

  color: rgba(255, 255, 255, 0.76);

  font-size: 16px;
  line-height: 1.72;
}

#games-panel .gm-category-intro:last-child {
  margin-bottom: 0;
}


/* =====================================================
   GAMES GRID — 5 CARDS PER ROW
===================================================== */

#games-panel .gm-grid {
  position: relative;

  width: 100%;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 16px;

  margin: 0;
}


/* =====================================================
   GAME CARD
===================================================== */

#games-panel .gm-game {
  min-width: 0;
}

#games-panel .gm-game details {
  height: 100%;

  background: #0a100d;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9px;

  overflow: visible;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#games-panel .gm-game details:hover {
  border-color: rgba(142, 232, 95, 0.38);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);

  transform: translateY(-2px);
}

#games-panel .gm-game details[open] {
  border-color: rgba(142, 232, 95, 0.58);

  transform: none;
}


/* =====================================================
   CARD SUMMARY
===================================================== */

#games-panel .gm-game summary {
  position: relative;

  display: block;

  width: 100%;

  overflow: hidden;

  list-style: none;
  cursor: pointer;

  border-radius: 8px;
}

#games-panel .gm-game summary::-webkit-details-marker {
  display: none;
}

#games-panel .gm-game summary::marker {
  display: none;
}


/* =====================================================
   CARD IMAGE
===================================================== */

#games-panel .gm-game summary img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

  object-fit: cover;
  object-position: center;

  background: #101713;

  border-radius: 8px 8px 0 0;
}


/* =====================================================
   CARD TEXT
===================================================== */

#games-panel .gm-card-copy {
  position: relative;

  display: block;

  min-height: 82px;

  padding: 14px 34px 14px 14px;
}

#games-panel .gm-name {
  display: block;

  color: #ffffff;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

#games-panel .gm-hint {
  display: block;

  margin-top: 7px;

  color: var(--green);

  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

#games-panel .gm-card-copy::after {
  content: "+";

  position: absolute;

  right: 13px;
  top: 50%;

  transform: translateY(-50%);

  color: var(--green);

  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

#games-panel .gm-game details[open] .gm-card-copy::after {
  content: "−";
}


/* =====================================================
   OPEN DESCRIPTION
===================================================== */

#games-panel .gm-description {
  display: none;
}

#games-panel .gm-grid:has(.gm-game details[open]) {
  padding-bottom: 255px;
}

#games-panel .gm-game details[open] > .gm-description {
  position: absolute;

  left: 0;
  right: 0;

  top: calc(100% - 235px);

  display: block;

  min-height: 220px;

  padding: 22px 24px;

  background: #090f0c;

  border: 1px solid rgba(142, 232, 95, 0.42);
  border-radius: 9px;

  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);

  z-index: 20;
}


/* =====================================================
   DESCRIPTION COLUMNS
===================================================== */

#games-panel .gm-description dl {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(150px, 0.75fr)
    minmax(0, 1.2fr)
    minmax(0, 1.2fr)
    minmax(0, 1.25fr);

  gap: 0;

  margin: 0;
}

#games-panel .gm-rule {
  min-width: 0;

  padding: 0 22px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#games-panel .gm-rule:first-child {
  padding-left: 0;
}

#games-panel .gm-rule:last-child {
  padding-right: 0;

  border-right: 0;
}

#games-panel .gm-rule dt {
  margin: 0 0 10px;

  color: var(--gold);

  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.6px;
  text-transform: uppercase;
}

#games-panel .gm-rule dd {
  margin: 0;

  color: rgba(255, 255, 255, 0.76);

  font-size: 13px;
  line-height: 1.62;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

  #games-panel > .gm-category-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #games-panel .gm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #games-panel .gm-grid:has(.gm-game details[open]) {
    padding-bottom: 380px;
  }

  #games-panel .gm-game details[open] > .gm-description {
    top: calc(100% - 360px);

    min-height: 340px;
  }

  #games-panel .gm-description dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    row-gap: 24px;
  }

  #games-panel .gm-rule:nth-child(2) {
    border-right: 0;
  }

  #games-panel .gm-rule:nth-child(3) {
    padding-left: 0;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  #games-panel > .gm-category-switcher {
    grid-template-columns: 1fr;

    gap: 9px;

    margin-bottom: 32px;
  }

  #games-panel > .gm-category-switcher .gm-tab {
    min-height: 50px;
  }

  #games-panel .gm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
  }

  #games-panel .gm-category-head h4 {
    font-size: 28px;
  }

  #games-panel .gm-category-intro {
    font-size: 15px;
    line-height: 1.65;
  }

  #games-panel .gm-grid:has(.gm-game details[open]) {
    padding-bottom: 660px;
  }

  #games-panel .gm-game details[open] > .gm-description {
    top: calc(100% - 640px);

    min-height: 620px;

    padding: 20px;
  }

  #games-panel .gm-description dl {
    grid-template-columns: 1fr;

    row-gap: 0;
  }

  #games-panel .gm-rule,
  #games-panel .gm-rule:first-child,
  #games-panel .gm-rule:nth-child(2),
  #games-panel .gm-rule:nth-child(3),
  #games-panel .gm-rule:last-child {
    padding: 14px 0;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  #games-panel .gm-rule:first-child {
    padding-top: 0;
  }

  #games-panel .gm-rule:last-child {
    border-bottom: 0;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

  #games-panel .gm-grid {
    grid-template-columns: 1fr;
  }

  #games-panel .gm-card-copy {
    min-height: 74px;
  }

}


/* =====================================================
   END GAMES — FOUR CATEGORY LAYOUT
===================================================== */
/* =====================================================
   GAMES CARD VISUAL FIX — FINAL OVERRIDE
===================================================== */

#games-panel .gm-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

#games-panel .gm-game details {
  background: #090e0c;
  border-radius: 10px;
  overflow: hidden;
}

#games-panel .gm-game summary {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

#games-panel .gm-game summary img {
  display: block;
  width: 100%;
  height: auto;

  aspect-ratio: 1.48 / 1;
  object-fit: cover;
  object-position: center;

  border-radius: 9px 9px 0 0;
}

#games-panel .gm-card-copy {
  display: block;
  position: relative;

  min-height: 58px;

  padding: 10px 32px 10px 12px;

  background: #090e0c;
}

#games-panel .gm-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

#games-panel .gm-hint {
  margin-top: 4px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

#games-panel .gm-card-copy::after {
  right: 11px;

  font-size: 20px;
}

@media (max-width: 1100px) {
  #games-panel .gm-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  #games-panel .gm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #games-panel .gm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #games-panel .gm-game summary img {
    aspect-ratio: 1.4 / 1;
  }
}

@media (max-width: 400px) {
  #games-panel .gm-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   END GAMES CARD VISUAL FIX
===================================================== */

/* =====================================================
   FINAL GAME CARD LAYOUT
   slots / LIVE CASINO / GAMES
===================================================== */


/* =====================================================
   slots + LIVE CASINO
   6 CARDS PER ROW
===================================================== */

#slots-panel .gm-grid,
#live-casino-panel .gm-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}


/* Cards */

#slots-panel .gm-game,
#live-casino-panel .gm-game {
  min-width: 0;
}

#slots-panel .gm-game details,
#live-casino-panel .gm-game details {
  width: 100%;
  background: #08100c;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9px;
  overflow: hidden;
}


/* Summary */

#slots-panel .gm-game summary,
#live-casino-panel .gm-game summary {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  overflow: hidden;
}


/* Horizontal casino artwork */

#slots-panel .gm-game summary img,
#live-casino-panel .gm-game summary img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.72 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 8px 8px 0 0;
}


/* =====================================================
   GAMES
   5 CARDS PER ROW = 2 ROWS OF 5
===================================================== */

#games-panel .gm-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

#games-panel .gm-game {
  min-width: 0;
}

#games-panel .gm-game details {
  width: 100%;
  background: #08100c;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9px;
  overflow: hidden;
}

#games-panel .gm-game summary {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  overflow: hidden;
}


/* IMPORTANT:
   Games artwork is much more vertical than slots/live artwork.
*/

#games-panel .gm-game summary img {
  display: block;
  width: 100%;

  height: 220px;

  object-fit: cover;
  object-position: center;

  border-radius: 8px 8px 0 0;
}


/* =====================================================
   CARD INFORMATION STRIP
===================================================== */

#slots-panel .gm-card-copy,
#live-casino-panel .gm-card-copy,
#games-panel .gm-card-copy {
  position: relative;
  display: block;
  width: 100%;

  min-height: 52px;

  padding: 8px 31px 8px 10px;

  background: #08100c;
  box-sizing: border-box;
}


/* Game title */

#slots-panel .gm-name,
#live-casino-panel .gm-name,
#games-panel .gm-name {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}


/* How it works */

#slots-panel .gm-hint,
#live-casino-panel .gm-hint,
#games-panel .gm-hint {
  display: block;
  margin-top: 4px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}


/* Plus */

#slots-panel .gm-card-copy::after,
#live-casino-panel .gm-card-copy::after,
#games-panel .gm-card-copy::after {
  right: 9px;
  bottom: 11px;
  font-size: 18px;
  line-height: 1;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1250px) {

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #games-panel .gm-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}


@media (max-width: 1000px) {

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid,
  #games-panel .gm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #games-panel .gm-game summary img {
    height: 230px;
  }

}


@media (max-width: 700px) {

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid,
  #games-panel .gm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #games-panel .gm-game summary img {
    height: 240px;
  }

}


@media (max-width: 420px) {

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid,
  #games-panel .gm-grid {
    grid-template-columns: 1fr;
  }

  #games-panel .gm-game summary img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

}


/* =====================================================
   END FINAL GAME CARD LAYOUT
===================================================== */
/* =====================================================
   FINAL CARD IMAGE HEIGHT OVERRIDE
   slots / LIVE CASINO / GAMES
===================================================== */

/* slots — keep 6 cards per row */
#slots-panel .gm-game summary img {
  width: 100%;
  height: 150px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}


/* LIVE CASINO — keep 6 cards per row */
#live-casino-panel .gm-game summary img {
  width: 100%;
  height: 160px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}


/* GAMES — keep 5 cards per row */
#games-panel .gm-game summary img {
  width: 100%;
  height: 245px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

  #slots-panel .gm-game summary img {
    height: 160px !important;
  }

  #live-casino-panel .gm-game summary img {
    height: 170px !important;
  }

  #games-panel .gm-game summary img {
    height: 235px !important;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  #slots-panel .gm-game summary img,
  #live-casino-panel .gm-game summary img {
    height: 180px !important;
  }

  #games-panel .gm-game summary img {
    height: 240px !important;
  }

}

/* =====================================================
   FINAL IMAGE HEIGHT TUNING
   KEEP EXISTING CARD WIDTHS / COLUMNS
===================================================== */


/* slots
   6 cards per row
   Slightly taller than current version
----------------------------------------------------- */

#slots-panel .gm-game summary img {
  width: 100%;
  height: 165px !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* LIVE CASINO
   6 cards per row
   Keep horizontal live covers wider and avoid
   excessive side cropping
----------------------------------------------------- */

#live-casino-panel .gm-game summary img {
  width: 100%;
  height: 170px !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* GAMES
   5 cards per row
   Portrait covers need considerably more height
----------------------------------------------------- */

#games-panel .gm-game summary img {
  width: 100%;
  height: 265px !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

  #slots-panel .gm-game summary img {
    height: 170px !important;
  }

  #live-casino-panel .gm-game summary img {
    height: 175px !important;
  }

  #games-panel .gm-game summary img {
    height: 255px !important;
  }

}


@media (max-width: 700px) {

  #slots-panel .gm-game summary img {
    height: 185px !important;
  }

  #live-casino-panel .gm-game summary img {
    height: 190px !important;
  }

  #games-panel .gm-game summary img {
    height: 245px !important;
  }

}


/* =====================================================
   FINAL CASINO CARD IMAGE LAYOUT
   slots: 6 PER ROW
   LIVE CASINO: 6 PER ROW
   GAMES: 5 PER ROW
===================================================== */


/* =====================================================
   slots + LIVE CASINO
   SIX CARDS PER ROW
===================================================== */

#slots-panel .gm-grid,
#live-casino-panel .gm-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
}


/* -----------------------------------------------------
   slots IMAGE AREA
----------------------------------------------------- */

#slots-panel .gm-game summary img {
  display: block !important;

  width: 100% !important;
  height: 145px !important;

  object-fit: contain !important;
  object-position: center center !important;

  aspect-ratio: auto !important;

  background: #081009 !important;
}


/* -----------------------------------------------------
   LIVE CASINO IMAGE AREA
----------------------------------------------------- */

#live-casino-panel .gm-game summary img {
  display: block !important;

  width: 100% !important;
  height: 155px !important;

  object-fit: contain !important;
  object-position: center center !important;

  aspect-ratio: auto !important;

  background: #081009 !important;
}


/* =====================================================
   GAMES
   EXACTLY FIVE CARDS PER ROW
===================================================== */

#games-panel .gm-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}


/* -----------------------------------------------------
   SAME CARD WIDTH / SAME VISUAL HEIGHT
----------------------------------------------------- */

#games-panel .gm-game {
  width: 100% !important;
  min-width: 0 !important;
}


/* -----------------------------------------------------
   GAMES IMAGE AREA

   Important:
   contain = no stretching
   contain = no side cropping
   contain = natural artwork remains visible
----------------------------------------------------- */

#games-panel .gm-game summary img {
  display: block !important;

  width: 100% !important;
  height: 300px !important;

  object-fit: contain !important;
  object-position: center center !important;

  aspect-ratio: auto !important;

  background: #081009 !important;
}


/* =====================================================
   SUMMARY
===================================================== */

#slots-panel .gm-game summary,
#live-casino-panel .gm-game summary,
#games-panel .gm-game summary {
  height: auto !important;
  min-height: 0 !important;
}


/* =====================================================
   CARD TEXT AREA
   KEEP IT COMPACT
===================================================== */

#slots-panel .gm-card-copy,
#live-casino-panel .gm-card-copy,
#games-panel .gm-card-copy {
  min-height: 48px !important;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #games-panel .gm-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

}


@media (max-width: 850px) {

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid,
  #games-panel .gm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

}


@media (max-width: 620px) {

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid,
  #games-panel .gm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}


@media (max-width: 420px) {

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid,
  #games-panel .gm-grid {
    grid-template-columns: 1fr !important;
  }

}
/* =====================================================
   rhino — GAMES SECTION FINAL FIX
   ONLY #games-panel
   5 CARDS PER ROW / 2 ROWS / FULL-WIDTH DESCRIPTION
===================================================== */

/* Main Games section */
#games-panel {
  width: 100% !important;
  max-width: var(--container) !important;
  margin: 0 auto !important;
}

/* Category buttons */
#games-panel > .gm-category-switcher {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  gap: 12px !important;

  margin: 30px 0 42px !important;
  padding: 0 !important;
}

#games-panel > .gm-category-switcher .gm-tab {
  width: 100% !important;
  min-height: 54px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 18px !important;

  text-align: center !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;

  border-radius: 7px !important;
}

/* Category panel visibility */
#games-panel > .gm-panel[hidden] {
  display: none !important;
}

#games-panel > .gm-panel:not([hidden]) {
  display: block !important;
}

/* Category intro */
#games-panel .gm-category-head {
  width: 100% !important;
  max-width: none !important;

  margin: 0 0 30px !important;
}

#games-panel .gm-category-head h4 {
  position: relative !important;

  margin: 0 0 18px !important;
  padding-left: 18px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 2.8vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;

  letter-spacing: -0.7px !important;
}

#games-panel .gm-category-head h4::before {
  content: "" !important;

  position: absolute !important;

  left: 0 !important;
  top: 0.08em !important;

  width: 4px !important;
  height: 1.15em !important;

  background: var(--green) !important;
  border-radius: 4px !important;
}

#games-panel .gm-category-intro {
  width: 100% !important;
  max-width: none !important;

  margin: 0 0 14px !important;

  color: rgba(255, 255, 255, 0.76) !important;

  font-size: 16px !important;
  line-height: 1.72 !important;
}

/* =====================================================
   GAMES GRID — DESKTOP
   5 CARDS PER ROW
===================================================== */

#games-panel .gm-grid,
#games-panel .gm-grid--five {
  position: relative !important;

  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

  gap: 16px !important;

  margin: 0 !important;

  align-items: start !important;
}

/* Card */
#games-panel .gm-game {
  width: 100% !important;
  min-width: 0 !important;
}

#games-panel .gm-game details {
  position: static !important;

  width: 100% !important;
  height: 100% !important;

  overflow: visible !important;

  background: #08100c !important;

  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 10px !important;

  transform: none !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

#games-panel .gm-game details:hover {
  border-color: rgba(142, 232, 95, 0.40) !important;

  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.30) !important;

  transform: none !important;
}

#games-panel .gm-game details[open] {
  border-color: rgba(142, 232, 95, 0.62) !important;

  box-shadow: 0 0 0 1px rgba(142, 232, 95, 0.12) !important;
}

/* Summary/card clickable area */
#games-panel .gm-game summary {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

  list-style: none !important;
  cursor: pointer !important;

  border-radius: 9px !important;
}

#games-panel .gm-game summary::-webkit-details-marker {
  display: none !important;
}

#games-panel .gm-game summary::marker {
  display: none !important;
}

/* Image — portrait games, no squeezing */
#games-panel .gm-game summary img {
  display: block !important;

  width: 100% !important;
  height: 300px !important;

  aspect-ratio: auto !important;

  object-fit: cover !important;
  object-position: center center !important;

  background: #08100c !important;

  border-radius: 9px 9px 0 0 !important;

  transform: none !important;
}

/* Text strip */
#games-panel .gm-card-copy {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  min-height: 58px !important;

  padding: 10px 34px 10px 12px !important;

  background: #08100c !important;

  box-sizing: border-box !important;
}

#games-panel .gm-name {
  display: block !important;

  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

#games-panel .gm-hint {
  display: block !important;

  margin-top: 5px !important;

  color: var(--green) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

#games-panel .gm-card-copy::after {
  content: "+" !important;

  position: absolute !important;

  right: 11px !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  color: var(--green) !important;

  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#games-panel .gm-game details[open] .gm-card-copy::after {
  content: "−" !important;
}

/* =====================================================
   OPEN DESCRIPTION
   Full-width horizontal block under the cards
===================================================== */

#games-panel .gm-description {
  display: none !important;
}

#games-panel .gm-grid:has(.gm-game details[open]),
#games-panel .gm-grid--five:has(.gm-game details[open]) {
  padding-bottom: 325px !important;
}

#games-panel .gm-game details[open] > .gm-description {
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;

  top: calc(100% - 305px) !important;

  display: block !important;

  width: 100% !important;
  min-height: 285px !important;

  padding: 24px 26px !important;

  background:
    linear-gradient(
      180deg,
      rgba(11, 18, 14, 0.99),
      rgba(6, 11, 9, 0.99)
    ) !important;

  border: 1px solid rgba(142, 232, 95, 0.44) !important;
  border-radius: 10px !important;

  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;

  z-index: 50 !important;

  box-sizing: border-box !important;
}

/* Description content — quality text layout */
#games-panel .gm-description dl {
  display: grid !important;

  grid-template-columns:
    minmax(150px, 0.75fr)
    minmax(0, 1.25fr)
    minmax(0, 1.25fr)
    minmax(0, 1.35fr) !important;

  gap: 0 !important;

  width: 100% !important;

  margin: 0 !important;
}

#games-panel .gm-rule {
  min-width: 0 !important;

  padding: 0 22px !important;

  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;

  box-sizing: border-box !important;
}

#games-panel .gm-rule:first-child {
  padding-left: 0 !important;
}

#games-panel .gm-rule:last-child {
  padding-right: 0 !important;

  border-right: 0 !important;
}

#games-panel .gm-rule dt {
  margin: 0 0 10px !important;

  color: var(--gold) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;

  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}

#games-panel .gm-rule dd {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 13px !important;
  line-height: 1.65 !important;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {

  #games-panel .gm-grid,
  #games-panel .gm-grid--five {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #games-panel .gm-game summary img {
    height: 285px !important;
  }

  #games-panel .gm-grid:has(.gm-game details[open]),
  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 390px !important;
  }

  #games-panel .gm-game details[open] > .gm-description {
    top: calc(100% - 370px) !important;

    min-height: 350px !important;
  }

  #games-panel .gm-description dl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    row-gap: 24px !important;
  }

  #games-panel .gm-rule:nth-child(2) {
    border-right: 0 !important;
  }

  #games-panel .gm-rule:nth-child(3) {
    padding-left: 0 !important;
  }

}

@media (max-width: 850px) {

  #games-panel > .gm-category-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #games-panel .gm-grid,
  #games-panel .gm-grid--five {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 14px !important;
  }

  #games-panel .gm-game summary img {
    height: 270px !important;
  }

  #games-panel .gm-grid:has(.gm-game details[open]),
  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 430px !important;
  }

  #games-panel .gm-game details[open] > .gm-description {
    top: calc(100% - 410px) !important;

    min-height: 390px !important;
  }

}

@media (max-width: 650px) {

  #games-panel > .gm-category-switcher {
    grid-template-columns: 1fr !important;

    gap: 10px !important;

    margin-bottom: 32px !important;
  }

  #games-panel .gm-grid,
  #games-panel .gm-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;
  }

  #games-panel .gm-game summary img {
    height: 245px !important;
  }

  #games-panel .gm-card-copy {
    min-height: 56px !important;
  }

  #games-panel .gm-grid:has(.gm-game details[open]),
  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 690px !important;
  }

  #games-panel .gm-game details[open] > .gm-description {
    top: calc(100% - 670px) !important;

    min-height: 650px !important;

    padding: 20px !important;
  }

  #games-panel .gm-description dl {
    grid-template-columns: 1fr !important;

    row-gap: 0 !important;
  }

  #games-panel .gm-rule,
  #games-panel .gm-rule:first-child,
  #games-panel .gm-rule:nth-child(2),
  #games-panel .gm-rule:nth-child(3),
  #games-panel .gm-rule:last-child {
    padding: 14px 0 !important;

    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  #games-panel .gm-rule:first-child {
    padding-top: 0 !important;
  }

  #games-panel .gm-rule:last-child {
    border-bottom: 0 !important;
  }

}

@media (max-width: 420px) {

  #games-panel .gm-grid,
  #games-panel .gm-grid--five {
    grid-template-columns: 1fr !important;
  }

  #games-panel .gm-game summary img {
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
  }

  #games-panel .gm-grid:has(.gm-game details[open]),
  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 760px !important;
  }

  #games-panel .gm-game details[open] > .gm-description {
    top: calc(100% - 740px) !important;

    min-height: 720px !important;
  }

}

/* =====================================================
   END rhino — GAMES SECTION FINAL FIX
===================================================== */
/* =====================================================
   rhino — GAME CATALOGUE UNIFIED LAYOUT V3
   INSERT AT THE VERY END OF style.css
   CSS ONLY — HTML NOT TOUCHED
===================================================== */

/* Wider catalogue area */
.gm-library {
  width: min(1780px, calc(100vw - 56px)) !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Make main catalogue header more compact */
.gm-heading {
  max-width: none !important;
  margin-bottom: 28px !important;
}

.gm-heading h2 {
  max-width: 1180px !important;
  margin-bottom: 18px !important;

  font-size: clamp(42px, 4vw, 66px) !important;
  line-height: 1.05 !important;
}

.gm-heading .gm-lead {
  max-width: 1380px !important;
  margin-bottom: 10px !important;

  font-size: 16px !important;
  line-height: 1.58 !important;
}

/* Main buttons: slots / Live Casino / Games */
.gm-main-switcher {
  width: 100% !important;
  max-width: 860px !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 12px !important;

  margin: 24px 0 32px !important;
}

.gm-main-switcher .gm-tab {
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 15px 20px !important;

  border-radius: 10px !important;

  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

/* =====================================================
   ONE LOGIC FOR ALL THREE SECTIONS
   slots / Live Casino / Games
===================================================== */

#slots-panel,
#live-casino-panel,
#games-panel {
  width: 100% !important;
  max-width: none !important;
}

#slots-panel:not([hidden]),
#live-casino-panel:not([hidden]),
#games-panel:not([hidden]) {
  display: grid !important;

  grid-template-columns: 270px minmax(0, 1fr) !important;
  column-gap: 34px !important;

  align-items: start !important;
}

#slots-panel[hidden],
#live-casino-panel[hidden],
#games-panel[hidden] {
  display: none !important;
}

/* Section intro: title left, text right */
#slots-panel > .gm-section-head,
#live-casino-panel > .gm-section-head,
#games-panel > .gm-section-head {
  grid-column: 1 / -1 !important;

  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  column-gap: 52px !important;

  max-width: none !important;

  margin: 0 0 30px !important;
}

#slots-panel > .gm-section-head h3,
#live-casino-panel > .gm-section-head h3,
#games-panel > .gm-section-head h3 {
  grid-column: 1 !important;
  grid-row: 1 / span 5 !important;

  margin: 0 !important;

  font-size: clamp(36px, 3.1vw, 54px) !important;
  line-height: 1.08 !important;
  letter-spacing: -1px !important;
}

#slots-panel > .gm-section-head .gm-panel-intro,
#live-casino-panel > .gm-section-head .gm-panel-intro,
#games-panel > .gm-section-head .gm-panel-intro {
  grid-column: 2 !important;

  max-width: none !important;

  margin: 0 0 10px !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* =====================================================
   LEFT CATEGORY MENU FOR ALL SECTIONS
===================================================== */

#slots-panel > .gm-category-switcher,
#live-casino-panel > .gm-category-switcher,
#games-panel > .gm-category-switcher {
  grid-column: 1 !important;
  grid-row: 2 / span 3 !important;

  position: sticky !important;
  top: 104px !important;
  z-index: 30 !important;

  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(7, 15, 10, 0.97),
      rgba(4, 9, 7, 0.97)
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;

  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28) !important;
}

#slots-panel > .gm-category-switcher::before {
  content: "slots category" !important;
}

#live-casino-panel > .gm-category-switcher::before {
  content: "Live category" !important;
}

#games-panel > .gm-category-switcher::before {
  content: "Games category" !important;
}

#slots-panel > .gm-category-switcher::before,
#live-casino-panel > .gm-category-switcher::before,
#games-panel > .gm-category-switcher::before {
  display: block !important;

  margin: 0 2px 6px !important;

  color: var(--gold) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

#slots-panel > .gm-category-switcher .gm-tab,
#live-casino-panel > .gm-category-switcher .gm-tab,
#games-panel > .gm-category-switcher .gm-tab {
  width: 100% !important;
  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  padding: 14px 15px !important;

  border-radius: 12px !important;

  text-align: left !important;

  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

#slots-panel > .gm-category-switcher .gm-choice:checked + .gm-tab,
#live-casino-panel > .gm-category-switcher .gm-choice:checked + .gm-tab,
#games-panel > .gm-category-switcher .gm-choice:checked + .gm-tab {
  background: var(--green) !important;
  color: #061008 !important;

  border-color: rgba(142, 232, 95, 0.95) !important;

  box-shadow:
    0 10px 24px rgba(142, 232, 95, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

/* =====================================================
   RIGHT CONTENT AREA
===================================================== */

#slots-panel > .gm-panel,
#live-casino-panel > .gm-panel,
#games-panel > .gm-panel {
  grid-column: 2 !important;
  grid-row: 2 !important;

  min-width: 0 !important;
}

#slots-panel > .gm-panel[hidden],
#live-casino-panel > .gm-panel[hidden],
#games-panel > .gm-panel[hidden] {
  display: none !important;
}

#slots-panel > .gm-panel:not([hidden]),
#live-casino-panel > .gm-panel:not([hidden]),
#games-panel > .gm-panel:not([hidden]) {
  display: block !important;
}

/* slots "More about..." block: move it into right side, compact */
#slots-panel > .gm-info {
  grid-column: 2 !important;
  grid-row: 3 !important;

  margin: 22px 0 0 !important;
}

#slots-panel > .gm-info + .gm-panel {
  margin-top: 0 !important;
}

/* Category heading and text */
#slots-panel .gm-category-head,
#live-casino-panel .gm-category-head,
#games-panel .gm-category-head {
  margin: 0 0 22px !important;
}

#slots-panel .gm-category-head h4,
#live-casino-panel .gm-category-head h4,
#games-panel .gm-category-head h4 {
  position: relative !important;

  margin: 0 0 14px !important;
  padding-left: 18px !important;

  font-size: clamp(28px, 2.35vw, 40px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.7px !important;
}

#slots-panel .gm-category-head h4::before,
#live-casino-panel .gm-category-head h4::before,
#games-panel .gm-category-head h4::before {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  top: 0.08em !important;

  width: 4px !important;
  height: 1.18em !important;

  background: var(--green) !important;
  border-radius: 4px !important;
}

#slots-panel .gm-category-intro,
#live-casino-panel .gm-category-intro,
#games-panel .gm-category-intro {
  max-width: none !important;

  margin: 0 0 9px !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* =====================================================
   GRIDS
===================================================== */

/* slots and Live Casino: 6 in row */
#slots-panel .gm-grid,
#live-casino-panel .gm-grid {
  position: relative !important;

  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;

  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: start !important;
}

/* Games: 5 in row */
#games-panel .gm-grid,
#games-panel .gm-grid--five {
  position: relative !important;

  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

  gap: 16px !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: start !important;
}

/* Common card base */
#slots-panel .gm-game,
#live-casino-panel .gm-game,
#games-panel .gm-game {
  width: 100% !important;
  min-width: 0 !important;
}

#slots-panel .gm-game details,
#live-casino-panel .gm-game details,
#games-panel .gm-game details {
  position: static !important;

  width: 100% !important;

  overflow: visible !important;

  background: #08100c !important;

  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 12px !important;

  transform: none !important;
}

#slots-panel .gm-game details:hover,
#live-casino-panel .gm-game details:hover,
#games-panel .gm-game details:hover {
  border-color: rgba(142, 232, 95, 0.45) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30) !important;
}

#slots-panel .gm-game details[open],
#live-casino-panel .gm-game details[open],
#games-panel .gm-game details[open] {
  border-color: rgba(142, 232, 95, 0.70) !important;
  box-shadow: 0 0 0 1px rgba(142, 232, 95, 0.18) !important;
}

#slots-panel .gm-game summary,
#live-casino-panel .gm-game summary,
#games-panel .gm-game summary {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;

  padding: 0 !important;

  overflow: hidden !important;

  list-style: none !important;
  cursor: pointer !important;

  border-radius: 11px !important;
}

#slots-panel .gm-game summary::-webkit-details-marker,
#live-casino-panel .gm-game summary::-webkit-details-marker,
#games-panel .gm-game summary::-webkit-details-marker {
  display: none !important;
}

#slots-panel .gm-game summary::marker,
#live-casino-panel .gm-game summary::marker,
#games-panel .gm-game summary::marker {
  display: none !important;
}

/* slots and Live images: horizontal banners */
#slots-panel .gm-game summary img,
#live-casino-panel .gm-game summary img {
  display: block !important;

  width: 100% !important;
  height: 145px !important;

  object-fit: cover !important;
  object-position: center center !important;

  background: #08100c !important;

  border-radius: 11px 11px 0 0 !important;
}

/* Games images: vertical posters */
#games-panel .gm-game summary img {
  display: block !important;

  width: 100% !important;
  height: 255px !important;

  object-fit: cover !important;
  object-position: center center !important;

  background: #08100c !important;

  border-radius: 11px 11px 0 0 !important;
}

/* Card text */
#slots-panel .gm-card-copy,
#live-casino-panel .gm-card-copy,
#games-panel .gm-card-copy {
  position: relative !important;

  display: block !important;

  min-height: 58px !important;

  padding: 10px 34px 10px 12px !important;

  background: #08100c !important;

  box-sizing: border-box !important;
}

#slots-panel .gm-name,
#live-casino-panel .gm-name,
#games-panel .gm-name {
  display: block !important;

  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

#slots-panel .gm-hint,
#live-casino-panel .gm-hint,
#games-panel .gm-hint {
  display: block !important;

  margin-top: 5px !important;

  color: var(--green) !important;

  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

#slots-panel .gm-card-copy::after,
#live-casino-panel .gm-card-copy::after,
#games-panel .gm-card-copy::after {
  content: "+" !important;

  position: absolute !important;

  right: 12px !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  color: var(--green) !important;

  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

#slots-panel .gm-game details[open] .gm-card-copy::after,
#live-casino-panel .gm-game details[open] .gm-card-copy::after,
#games-panel .gm-game details[open] .gm-card-copy::after {
  content: "−" !important;
}

/* =====================================================
   OPEN DESCRIPTION
===================================================== */

#slots-panel .gm-description,
#live-casino-panel .gm-description,
#games-panel .gm-description {
  display: none !important;
}

#slots-panel .gm-grid:has(.gm-game details[open]),
#live-casino-panel .gm-grid:has(.gm-game details[open]),
#games-panel .gm-grid:has(.gm-game details[open]),
#games-panel .gm-grid--five:has(.gm-game details[open]) {
  padding-bottom: 300px !important;
}

#slots-panel .gm-game details[open] > .gm-description,
#live-casino-panel .gm-game details[open] > .gm-description,
#games-panel .gm-game details[open] > .gm-description {
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;

  top: calc(100% - 280px) !important;

  display: block !important;

  width: 100% !important;
  min-height: 260px !important;

  padding: 24px 26px !important;

  background:
    linear-gradient(
      180deg,
      rgba(11, 18, 14, 0.99),
      rgba(6, 11, 9, 0.99)
    ) !important;

  border: 1px solid rgba(142, 232, 95, 0.44) !important;
  border-radius: 14px !important;

  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;

  z-index: 50 !important;

  box-sizing: border-box !important;
}

#slots-panel .gm-description dl,
#live-casino-panel .gm-description dl,
#games-panel .gm-description dl {
  display: grid !important;

  grid-template-columns:
    minmax(140px, 0.75fr)
    minmax(0, 1.15fr)
    minmax(0, 1.15fr)
    minmax(0, 1.35fr) !important;

  gap: 0 !important;

  width: 100% !important;

  margin: 0 !important;
}

#slots-panel .gm-rule,
#live-casino-panel .gm-rule,
#games-panel .gm-rule {
  min-width: 0 !important;

  padding: 0 20px !important;

  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;

  box-sizing: border-box !important;
}

#slots-panel .gm-rule:first-child,
#live-casino-panel .gm-rule:first-child,
#games-panel .gm-rule:first-child {
  padding-left: 0 !important;
}

#slots-panel .gm-rule:last-child,
#live-casino-panel .gm-rule:last-child,
#games-panel .gm-rule:last-child {
  padding-right: 0 !important;
  border-right: 0 !important;
}

#slots-panel .gm-rule dt,
#live-casino-panel .gm-rule dt,
#games-panel .gm-rule dt {
  margin: 0 0 9px !important;

  color: var(--gold) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;

  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}

#slots-panel .gm-rule dd,
#live-casino-panel .gm-rule dd,
#games-panel .gm-rule dd {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.80) !important;

  font-size: 13px !important;
  line-height: 1.62 !important;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1400px) {

  #slots-panel:not([hidden]),
  #live-casino-panel:not([hidden]),
  #games-panel:not([hidden]) {
    grid-template-columns: 250px minmax(0, 1fr) !important;
    column-gap: 26px !important;
  }

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #games-panel .gm-grid,
  #games-panel .gm-grid--five {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  #games-panel .gm-game summary img {
    height: 240px !important;
  }

}

@media (max-width: 1180px) {

  #slots-panel:not([hidden]),
  #live-casino-panel:not([hidden]),
  #games-panel:not([hidden]) {
    display: block !important;
  }

  #slots-panel > .gm-section-head,
  #live-casino-panel > .gm-section-head,
  #games-panel > .gm-section-head {
    display: block !important;
  }

  #slots-panel > .gm-section-head h3,
  #live-casino-panel > .gm-section-head h3,
  #games-panel > .gm-section-head h3 {
    margin-bottom: 16px !important;
  }

  #slots-panel > .gm-category-switcher,
  #live-casino-panel > .gm-category-switcher,
  #games-panel > .gm-category-switcher {
    position: static !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    margin: 0 0 28px !important;
  }

  #slots-panel > .gm-category-switcher::before,
  #live-casino-panel > .gm-category-switcher::before,
  #games-panel > .gm-category-switcher::before {
    grid-column: 1 / -1 !important;
  }

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid,
  #games-panel .gm-grid,
  #games-panel .gm-grid--five {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #slots-panel .gm-description dl,
  #live-casino-panel .gm-description dl,
  #games-panel .gm-description dl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 22px !important;
  }

  #slots-panel .gm-rule:nth-child(2),
  #live-casino-panel .gm-rule:nth-child(2),
  #games-panel .gm-rule:nth-child(2) {
    border-right: 0 !important;
  }

  #slots-panel .gm-rule:nth-child(3),
  #live-casino-panel .gm-rule:nth-child(3),
  #games-panel .gm-rule:nth-child(3) {
    padding-left: 0 !important;
  }

  #slots-panel .gm-grid:has(.gm-game details[open]),
  #live-casino-panel .gm-grid:has(.gm-game details[open]),
  #games-panel .gm-grid:has(.gm-game details[open]),
  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 380px !important;
  }

  #slots-panel .gm-game details[open] > .gm-description,
  #live-casino-panel .gm-game details[open] > .gm-description,
  #games-panel .gm-game details[open] > .gm-description {
    top: calc(100% - 360px) !important;
    min-height: 340px !important;
  }

}

@media (max-width: 820px) {

  .gm-library {
    width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .gm-main-switcher {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  #slots-panel > .gm-category-switcher,
  #live-casino-panel > .gm-category-switcher,
  #games-panel > .gm-category-switcher {
    grid-template-columns: 1fr !important;
  }

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid,
  #games-panel .gm-grid,
  #games-panel .gm-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #slots-panel .gm-game summary img,
  #live-casino-panel .gm-game summary img {
    height: 145px !important;
  }

  #games-panel .gm-game summary img {
    height: 235px !important;
  }

  #slots-panel .gm-description dl,
  #live-casino-panel .gm-description dl,
  #games-panel .gm-description dl {
    grid-template-columns: 1fr !important;
  }

  #slots-panel .gm-rule,
  #live-casino-panel .gm-rule,
  #games-panel .gm-rule,
  #slots-panel .gm-rule:first-child,
  #live-casino-panel .gm-rule:first-child,
  #games-panel .gm-rule:first-child,
  #slots-panel .gm-rule:nth-child(2),
  #live-casino-panel .gm-rule:nth-child(2),
  #games-panel .gm-rule:nth-child(2),
  #slots-panel .gm-rule:nth-child(3),
  #live-casino-panel .gm-rule:nth-child(3),
  #games-panel .gm-rule:nth-child(3),
  #slots-panel .gm-rule:last-child,
  #live-casino-panel .gm-rule:last-child,
  #games-panel .gm-rule:last-child {
    padding: 14px 0 !important;

    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  #slots-panel .gm-rule:last-child,
  #live-casino-panel .gm-rule:last-child,
  #games-panel .gm-rule:last-child {
    border-bottom: 0 !important;
  }

  #slots-panel .gm-grid:has(.gm-game details[open]),
  #live-casino-panel .gm-grid:has(.gm-game details[open]),
  #games-panel .gm-grid:has(.gm-game details[open]),
  #games-panel .gm-grid--five:has(.gm-game details[open]) {
    padding-bottom: 690px !important;
  }

  #slots-panel .gm-game details[open] > .gm-description,
  #live-casino-panel .gm-game details[open] > .gm-description,
  #games-panel .gm-game details[open] > .gm-description {
    top: calc(100% - 670px) !important;
    min-height: 650px !important;
    padding: 20px !important;
  }

}

@media (max-width: 480px) {

  #slots-panel .gm-grid,
  #live-casino-panel .gm-grid,
  #games-panel .gm-grid,
  #games-panel .gm-grid--five {
    grid-template-columns: 1fr !important;
  }

  #games-panel .gm-game summary img {
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
  }

}

/* =====================================================
   END rhino — GAME CATALOGUE UNIFIED LAYOUT V3
===================================================== */

/* =========================================================
   RHINO CASINO — BONUSES
========================================================= */

.rhino-bonuses {
  position: relative;
  width: 100%;
  padding: 76px 24px 96px;
  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 12% 4%,
      rgba(122, 255, 77, 0.055),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 92%,
      rgba(82, 190, 51, 0.04),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #050a07 0%,
      #071009 52%,
      #050a07 100%
    );

  border-top: 1px solid rgba(126, 255, 79, 0.09);
  border-bottom: 1px solid rgba(126, 255, 79, 0.07);
}

.rhino-bonuses-shell {
  width: min(1296px, calc(100% - 48px));
  margin: 0 auto;
}


/* =========================================================
   GENERAL BONUS TYPOGRAPHY
========================================================= */

.rhino-bonuses h2,
.rhino-bonuses h3,
.rhino-bonuses h4 {
  color: #ffffff;
}

.rhino-bonuses p,
.rhino-bonuses li {
  color: rgba(255, 255, 255, 0.70);
}

.rhino-bonuses-kicker,
.rhino-bonus-group-kicker {
  margin: 0 0 10px;

  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #d8c95b;
}


/* =========================================================
   BONUS INTRO
========================================================= */

.rhino-bonuses-head {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;

  margin-bottom: 42px;
  padding: 40px 44px;

  border: 1px solid rgba(126, 255, 79, 0.13);
  border-radius: 26px;

  background:
    linear-gradient(
      135deg,
      rgba(126, 255, 79, 0.038),
      rgba(255, 255, 255, 0.006)
    );
}

.rhino-bonuses-heading h2 {
  max-width: 520px;
  margin: 0;

  font-size: clamp(38px, 4vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.rhino-bonuses-intro {
  display: grid;
  gap: 15px;
}

.rhino-bonuses-intro p {
  margin: 0;

  font-size: 16px;
  line-height: 1.7;
}


/* =========================================================
   GROUP HEADINGS
========================================================= */

.rhino-bonus-group {
  margin-top: 44px;
}

.rhino-bonus-group-head {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  gap: 54px;
  align-items: end;

  padding: 0 4px 22px;
}

.rhino-bonus-group-head h3,
.rhino-cashback h3,
.rhino-sports-content h3,
.rhino-bonus-rules h3 {
  margin: 0;

  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.rhino-bonus-group-head > p {
  max-width: 720px;
  margin: 0;

  font-size: 15px;
  line-height: 1.65;
}


/* =========================================================
   WELCOME GRID
========================================================= */

.rhino-welcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;

  /*
   * Cards do not stretch when another card is opened.
   */
  align-items: start;
}


/* =========================================================
   WELCOME CARDS — CLOSED STATE
========================================================= */

.rhino-welcome-card {
  display: flex;
  flex-direction: column;

  height: 360px;
  min-height: 360px;

  padding: 24px;

  cursor: pointer;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    );

  color: #ffffff;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.20);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


/* no permanently highlighted first card */
.rhino-welcome-card--featured {
  border-color: rgba(126, 255, 79, 0.14);

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    );

  color: #ffffff;
}


/* =========================================================
   WELCOME HOVER
========================================================= */

.rhino-welcome-card:hover:not(.is-open) {
  transform: translateY(-2px);

  border-color: rgba(126, 255, 79, 0.46);

  background:
    linear-gradient(
      180deg,
      #102016 0%,
      #09130c 100%
    );

  box-shadow:
    0 14px 30px rgba(72, 205, 41, 0.08);
}


/* =========================================================
   WELCOME ACTIVE / OPEN
========================================================= */

.rhino-welcome-card.is-open {
  height: auto;
  min-height: 360px;

  color: #081006;

  border-color: #90ff60;

  background:
    linear-gradient(
      145deg,
      #96ff67 0%,
      #75ed49 52%,
      #58d934 100%
    );

  box-shadow:
    0 18px 40px rgba(75, 215, 42, 0.23);

  transform: translateY(-3px);
}

.rhino-welcome-card.is-open h4,
.rhino-welcome-card.is-open strong,
.rhino-welcome-card.is-open summary {
  color: #081006 !important;
}

.rhino-welcome-card.is-open p,
.rhino-welcome-card.is-open li,
.rhino-welcome-card.is-open span {
  color: rgba(8, 16, 6, 0.76) !important;
}

.rhino-welcome-card.is-open .rhino-welcome-value span {
  color: #173b0f !important;
}

.rhino-welcome-card.is-open .rhino-welcome-tag {
  border-color: rgba(8, 16, 6, 0.18);
}


/* =========================================================
   WELCOME CARD CONTENT
========================================================= */

.rhino-welcome-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;
  margin-bottom: 22px;
}

.rhino-welcome-tag {
  padding: 7px 10px;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;

  font-size: 10px;
  font-weight: 850;
  line-height: 1;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.74);
}

.rhino-welcome-value {
  display: grid;
  gap: 7px;

  margin-bottom: 21px;
}

.rhino-welcome-value strong {
  display: block;

  font-size: clamp(28px, 2.35vw, 38px);
  font-weight: 850;
  line-height: 0.98;

  letter-spacing: -0.045em;

  color: #ffffff;
}

.rhino-welcome-value span {
  font-size: 14px;
  font-weight: 800;

  color: #7cff4f;
}

.rhino-welcome-card h4 {
  margin: 0 0 12px;

  font-size: 20px;
  line-height: 1.18;
}

.rhino-welcome-card > p {
  margin: 0;

  font-size: 14px;
  line-height: 1.65;
}


/* pushes button to same bottom level in closed cards */
.rhino-welcome-card .rhino-bonus-details {
  margin-top: auto;
}


/* =========================================================
   DETAILS / ACCORDION CONTROL
========================================================= */

.rhino-bonus-details {
  width: 100%;
  margin-top: 22px;
}

.rhino-bonus-details summary {
  position: relative;

  display: block;
  width: 100%;

  padding: 15px 42px 4px 0;

  cursor: pointer;
  list-style: none;

  border-top: 1px solid rgba(255, 255, 255, 0.11);

  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;

  color: #ffffff;
}

.rhino-bonus-details summary::-webkit-details-marker {
  display: none;
}

.rhino-bonus-details summary::marker {
  content: "";
}

.rhino-bonus-details summary::after {
  content: "+";

  position: absolute;
  top: 11px;
  right: 0;

  font-size: 22px;
  font-weight: 700;
  line-height: 1;

  color: currentColor;
}

.rhino-bonus-details[open] summary::after {
  content: "−";
}

.rhino-bonus-details[open] summary {
  padding-bottom: 10px;
}

.rhino-bonus-details ol {
  margin: 10px 0 0;
  padding-left: 21px;
}

.rhino-bonus-details li {
  margin-bottom: 9px;

  font-size: 13px;
  line-height: 1.55;
}

.rhino-bonus-details p {
  margin: 12px 0 0;

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   WELCOME TOTAL
========================================================= */

.rhino-welcome-total {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
  gap: 38px;
  align-items: center;

  margin-top: 14px;
  padding: 22px 26px;

  border: 1px solid rgba(216, 201, 91, 0.22);
  border-radius: 17px;

  background:
    linear-gradient(
      90deg,
      rgba(216, 201, 91, 0.045),
      rgba(255, 255, 255, 0.006)
    );
}

.rhino-welcome-total div {
  display: grid;
  gap: 5px;
}

.rhino-welcome-total span {
  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #d8c95b;
}

.rhino-welcome-total strong {
  font-size: 23px;
  line-height: 1.15;

  color: #ffffff;
}

.rhino-welcome-total p {
  margin: 0;

  font-size: 14px;
  line-height: 1.55;
}


/* =========================================================
   WEEKLY GRID
========================================================= */

.rhino-weekly-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;

  align-items: start;
}


/* =========================================================
   WEEKLY CARDS — CLOSED
========================================================= */

.rhino-weekly-card {
  display: flex;
  flex-direction: column;

  height: 255px;
  min-height: 255px;

  padding: 22px;

  cursor: pointer;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    );

  color: #ffffff;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.rhino-weekly-card:hover:not(.is-open) {
  transform: translateY(-2px);

  border-color: rgba(126, 255, 79, 0.46);

  background:
    linear-gradient(
      180deg,
      #102016 0%,
      #09130c 100%
    );
}


/* =========================================================
   WEEKLY ACTIVE
========================================================= */

.rhino-weekly-card.is-open {
  height: auto;
  min-height: 255px;

  color: #081006;

  border-color: #90ff60;

  background:
    linear-gradient(
      145deg,
      #96ff67 0%,
      #75ed49 52%,
      #58d934 100%
    );

  box-shadow:
    0 16px 36px rgba(75, 215, 42, 0.21);

  transform: translateY(-3px);
}

.rhino-weekly-card.is-open h4,
.rhino-weekly-card.is-open strong,
.rhino-weekly-card.is-open summary {
  color: #081006 !important;
}

.rhino-weekly-card.is-open p,
.rhino-weekly-card.is-open li,
.rhino-weekly-card.is-open span {
  color: rgba(8, 16, 6, 0.76) !important;
}


/* =========================================================
   WEEKLY CONTENT
========================================================= */

.rhino-weekly-day {
  display: block;

  margin-bottom: 7px;

  font-size: 11px;
  font-weight: 700;

  color: #d8c95b;
}

.rhino-weekly-card > strong {
  display: block;

  margin-bottom: 18px;

  font-size: 18px;
  line-height: 1.1;

  color: #7cff4f;
}

.rhino-weekly-card h4 {
  margin: 0 0 12px;

  font-size: 18px;
  line-height: 1.2;
}

.rhino-weekly-card > p {
  margin: 0;

  font-size: 14px;
  line-height: 1.62;
}

.rhino-weekly-card .rhino-bonus-details {
  margin-top: auto;
}


/* =========================================================
   CASHBACK
========================================================= */

.rhino-cashback {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 54px;
  align-items: center;

  margin-top: 44px;
  padding: 40px 44px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(126, 255, 79, 0.032),
      rgba(255, 255, 255, 0.006)
    );
}

.rhino-cashback-copy > p {
  max-width: 720px;
  margin: 14px 0 0;

  font-size: 15px;
  line-height: 1.68;
}

.rhino-cashback-stat {
  padding: 30px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(126, 255, 79, 0.08),
      rgba(126, 255, 79, 0.018)
    );
}

.rhino-cashback-stat > span {
  display: block;

  margin-bottom: 10px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: #d8c95b;
}

.rhino-cashback-stat > strong {
  display: block;

  font-size: clamp(48px, 5vw, 74px);
  line-height: 0.9;

  letter-spacing: -0.055em;

  color: #7cff4f;
}

.rhino-cashback-stat > p {
  margin: 18px 0 0;

  font-size: 14px;
  line-height: 1.55;
}

.rhino-cashback-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
  margin-top: 18px;
}

.rhino-cashback-tags span {
  padding: 8px 10px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;

  color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   SPORTS WELCOME
========================================================= */

.rhino-sports-bonus {
  margin-top: 28px;
  padding: 40px 44px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(126, 255, 79, 0.03),
      rgba(255, 255, 255, 0.006)
    );
}

.rhino-sports-content {
  display: grid;
  grid-template-columns: minmax(330px, 0.8fr) minmax(0, 1.2fr);

  column-gap: 60px;
  row-gap: 18px;

  align-items: start;
}

.rhino-sports-content > .rhino-bonus-group-kicker {
  grid-column: 1;
}

.rhino-sports-content > h3 {
  grid-column: 1;
}

.rhino-sports-content > p:not(.rhino-sports-total) {
  grid-column: 2;
  grid-row: 1 / span 2;

  align-self: center;

  margin: 0;

  font-size: 15px;
  line-height: 1.68;
}

.rhino-sports-stages {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;
  margin-top: 14px;
}

.rhino-sports-stages div {
  padding: 20px 22px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    );
}

.rhino-sports-stages span {
  display: block;

  margin-bottom: 8px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #d8c95b;
}

.rhino-sports-stages strong {
  display: block;

  font-size: 24px;

  color: #7cff4f;
}

.rhino-sports-total {
  grid-column: 1 / -1;

  margin: 0 !important;
  padding: 16px 18px;

  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.014);
}

.rhino-sports-total strong {
  color: #7cff4f;
}

.rhino-sports-content > .rhino-bonus-details {
  grid-column: 1 / -1;
}


/* =========================================================
   BONUS CONDITIONS
========================================================= */

.rhino-bonus-rules {
  display: grid;
  grid-template-columns: minmax(330px, 0.8fr) minmax(0, 1.2fr);
  gap: 54px;
  align-items: start;

  margin-top: 28px;
  padding: 32px 38px;

  border: 1px solid rgba(216, 201, 91, 0.15);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(216, 201, 91, 0.024),
      rgba(255, 255, 255, 0.005)
    );
}

.rhino-bonus-rules-title {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
}

.rhino-bonus-rules-title > span {
  font-size: 34px;
  font-weight: 850;

  color: #7cff4f;
}

.rhino-bonus-rules-copy > p {
  margin: 0;

  font-size: 14px;
  line-height: 1.65;
}

.rhino-bonus-rules-copy ul {
  margin: 17px 0 0;
  padding-left: 18px;
}

.rhino-bonus-rules-copy li {
  margin-bottom: 7px;

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .rhino-bonuses-shell {
    width: min(100%, 980px);
  }

  .rhino-welcome-grid,
  .rhino-weekly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rhino-welcome-card,
  .rhino-weekly-card {
    height: auto;
  }

  .rhino-sports-content {
    grid-template-columns: 1fr;
  }

  .rhino-sports-content > .rhino-bonus-group-kicker,
  .rhino-sports-content > h3,
  .rhino-sports-content > p:not(.rhino-sports-total) {
    grid-column: 1;
    grid-row: auto;
  }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 820px) {

  .rhino-bonuses {
    padding: 60px 18px 76px;
  }

  .rhino-bonuses-shell {
    width: 100%;
  }

  .rhino-bonuses-head,
  .rhino-bonus-group-head,
  .rhino-cashback,
  .rhino-bonus-rules {
    grid-template-columns: 1fr;
  }

  .rhino-bonuses-head {
    gap: 26px;
    padding: 28px;
  }

  .rhino-bonus-group-head {
    gap: 14px;
  }

  .rhino-cashback {
    gap: 28px;
    padding: 30px;
  }

  .rhino-sports-bonus {
    padding: 30px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .rhino-bonuses {
    padding-left: 14px;
    padding-right: 14px;
  }

  .rhino-welcome-grid,
  .rhino-weekly-grid,
  .rhino-sports-stages {
    grid-template-columns: 1fr;
  }

  .rhino-welcome-total {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rhino-welcome-card,
  .rhino-weekly-card {
    height: auto;
    min-height: 0;
  }

}

/* =========================================================
   RHINO SPORTS
========================================================= */

.rhino-sports {
  position: relative;
  width: 100%;
  padding: 90px 24px 100px;
  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 85% 7%,
      rgba(123, 255, 75, 0.09),
      transparent 29%
    ),
    radial-gradient(
      circle at 10% 70%,
      rgba(212, 190, 74, 0.045),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #060b08 0%,
      #08100a 52%,
      #050906 100%
    );

  border-top: 1px solid rgba(126, 255, 79, 0.08);
}

.rhino-sports-shell {
  width: min(1296px, calc(100% - 48px));
  margin: 0 auto;
}


/* =========================================================
   COMMON
========================================================= */

.rhino-sports h2,
.rhino-sports h3,
.rhino-sports h4 {
  color: #ffffff;
}

.rhino-sports p,
.rhino-sports li {
  color: rgba(255, 255, 255, 0.70);
}

.rhino-sports-kicker {
  margin: 0 0 10px;

  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: #d8c85b;
}


/* =========================================================
   HERO
========================================================= */

.rhino-sports-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
  gap: 44px;
  align-items: center;

  min-height: 540px;

  padding: 44px 48px;

  border: 1px solid rgba(126, 255, 79, 0.15);
  border-radius: 30px;

  background:
    linear-gradient(
      120deg,
      rgba(126, 255, 79, 0.05),
      rgba(255, 255, 255, 0.006)
    );
}

.rhino-sports-hero-copy {
  position: relative;
  z-index: 2;
}

.rhino-sports-hero h2 {
  max-width: 650px;
  margin: 0;

  font-size: clamp(46px, 5vw, 72px);
  line-height: 0.95;

  letter-spacing: -0.05em;
}

.rhino-sports-hero h2 span {
  color: #80f650;
}

.rhino-sports-lead {
  max-width: 650px;
  margin: 22px 0 0;

  font-size: 16px;
  line-height: 1.75;
}

.rhino-sports-hero-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
  margin-top: 26px;
}

.rhino-sports-hero-tags span {
  padding: 9px 12px;

  border: 1px solid rgba(126, 255, 79, 0.17);
  border-radius: 999px;

  background: rgba(126, 255, 79, 0.035);

  font-size: 11px;
  font-weight: 700;

  color: rgba(255, 255, 255, 0.80);
}

.rhino-sports-hero-media {
  position: relative;

  min-height: 450px;
}

.rhino-sports-hero-media img {
  position: absolute;
  top: 50%;
  left: 50%;

  width: min(720px, 125%);
  max-width: none;
  height: auto;

  transform: translate(-50%, -50%);

  object-fit: contain;

  filter:
    drop-shadow(0 24px 42px rgba(0, 0, 0, 0.40))
    drop-shadow(0 0 28px rgba(105, 255, 63, 0.14));
}


/* =========================================================
   SPORTS WELCOME
========================================================= */

.rhino-sports-welcome {
  margin-top: 30px;
  padding: 36px 40px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(126, 255, 79, 0.035),
      rgba(255, 255, 255, 0.006)
    );
}

.rhino-sports-welcome-head,
.rhino-sports-section-head {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  gap: 50px;
  align-items: end;
}

.rhino-sports-welcome-head h3,
.rhino-sports-section-head h3 {
  margin: 0;

  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;

  letter-spacing: -0.035em;
}

.rhino-sports-welcome-head > p,
.rhino-sports-section-head > p {
  margin: 0;

  font-size: 15px;
  line-height: 1.65;
}

.rhino-sports-welcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;
  margin-top: 28px;
}

.rhino-sports-welcome-grid article {
  padding: 22px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 17px;

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    );
}

.rhino-sports-welcome-grid span {
  display: block;

  margin-bottom: 9px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #d8c85b;
}

.rhino-sports-welcome-grid strong {
  display: block;

  font-size: 30px;
  line-height: 1;

  color: #7cff4f;
}

.rhino-sports-welcome-grid p {
  margin: 8px 0 0;

  font-size: 13px;
}

.rhino-sports-welcome-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;
  margin-top: 12px;
}

.rhino-sports-welcome-rules span {
  padding: 13px 14px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.025);

  font-size: 12px;

  color: rgba(255, 255, 255, 0.62);
}

.rhino-sports-welcome-rules strong {
  color: #ffffff;
}

.rhino-sports-smallprint {
  margin: 17px 0 0;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   BET TYPES
========================================================= */

.rhino-bet-types,
.rhino-outcomes,
.rhino-sport-markets {
  margin-top: 64px;
}

.rhino-bet-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;
  margin-top: 26px;
}

.rhino-bet-type-card {
  padding: 24px;

  border: 1px solid rgba(126, 255, 79, 0.13);
  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    );
}

.rhino-bet-type-number {
  display: inline-block;

  margin-bottom: 17px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.11em;
  text-transform: uppercase;

  color: #d8c85b;
}

.rhino-bet-type-card h4 {
  margin: 0 0 13px;

  font-size: 21px;
}

.rhino-bet-type-card p {
  margin: 0;

  font-size: 14px;
  line-height: 1.65;
}

.rhino-bet-type-card ul {
  margin: 18px 0 0;
  padding-left: 18px;
}

.rhino-bet-type-card li {
  margin-bottom: 7px;

  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================
   OUTCOME GRID
========================================================= */

.rhino-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;
  margin-top: 26px;
}

.rhino-outcome-grid div {
  padding: 21px 22px;

  border: 1px solid rgba(126, 255, 79, 0.12);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.014);
}

.rhino-outcome-grid strong {
  display: block;

  margin-bottom: 7px;

  font-size: 16px;

  color: #7cff4f;
}

.rhino-outcome-grid span {
  font-size: 13px;
  line-height: 1.5;

  color: rgba(255, 255, 255, 0.64);
}


/* =========================================================
   SPORTS TABS
========================================================= */

.rhino-sport-tabs {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
  margin-top: 28px;
}

.rhino-sport-tab {
  appearance: none;

  padding: 12px 17px;

  cursor: pointer;

  border: 1px solid rgba(126, 255, 79, 0.16);
  border-radius: 999px;

  background: #0a110c;

  font: inherit;
  font-size: 13px;
  font-weight: 750;

  color: rgba(255, 255, 255, 0.76);

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.rhino-sport-tab:hover {
  transform: translateY(-1px);

  border-color: rgba(126, 255, 79, 0.48);

  color: #ffffff;
}

.rhino-sport-tab.is-active {
  border-color: #85ff56;

  background:
    linear-gradient(
      145deg,
      #92ff63,
      #63df3b
    );

  color: #081006;
}


/* =========================================================
   SPORT PANELS
========================================================= */

.rhino-sport-panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);

  gap: 38px;
  align-items: start;

  margin-top: 18px;
  padding: 30px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 22px;

  background:
    linear-gradient(
      130deg,
      rgba(126, 255, 79, 0.035),
      rgba(255, 255, 255, 0.005)
    );
}

.rhino-sport-panel[hidden] {
  display: none;
}

.rhino-sport-panel-label {
  margin: 0 0 10px !important;

  font-size: 11px !important;
  font-weight: 800;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: #d8c85b !important;
}

.rhino-sport-panel-copy h4 {
  margin: 0;

  font-size: 28px;
  line-height: 1.08;

  letter-spacing: -0.025em;
}

.rhino-sport-panel-copy > p:last-child {
  margin: 17px 0 0;

  font-size: 14px;
  line-height: 1.68;
}

.rhino-market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.rhino-market-grid div {
  padding: 16px 17px;

  border: 1px solid rgba(126, 255, 79, 0.11);
  border-radius: 13px;

  background:
    linear-gradient(
      180deg,
      #0b120d,
      #071009
    );
}

.rhino-market-grid strong {
  display: block;

  margin-bottom: 5px;

  font-size: 14px;

  color: #7cff4f;
}

.rhino-market-grid span {
  font-size: 12px;
  line-height: 1.45;

  color: rgba(255, 255, 255, 0.62);
}

.rhino-sports-market-note {
  margin: 14px 0 0;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   RESPONSIBLE
========================================================= */

.rhino-sports-responsible {
  display: flex;
  gap: 22px;
  align-items: center;

  margin-top: 32px;
  padding: 20px 24px;

  border: 1px solid rgba(216, 200, 91, 0.15);
  border-radius: 16px;

  background: rgba(216, 200, 91, 0.025);
}

.rhino-sports-responsible strong {
  flex: 0 0 auto;

  font-size: 27px;

  color: #7cff4f;
}

.rhino-sports-responsible p {
  margin: 0;

  font-size: 13px;
  line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .rhino-sports-hero {
    grid-template-columns: 1fr 1fr;
  }

  .rhino-bet-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rhino-sports-welcome-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 850px) {

  .rhino-sports {
    padding: 68px 18px 78px;
  }

  .rhino-sports-shell {
    width: 100%;
  }

  .rhino-sports-hero,
  .rhino-sports-welcome-head,
  .rhino-sports-section-head,
  .rhino-sport-panel {
    grid-template-columns: 1fr;
  }

  .rhino-sports-hero {
    padding: 32px;
  }

  .rhino-sports-hero-media {
    min-height: 350px;
  }

  .rhino-sports-welcome-grid,
  .rhino-outcome-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 620px) {

  .rhino-sports {
    padding-left: 14px;
    padding-right: 14px;
  }

  .rhino-sports-hero,
  .rhino-sports-welcome,
  .rhino-sport-panel {
    padding: 24px;
  }

  .rhino-bet-type-grid,
  .rhino-sports-welcome-rules,
  .rhino-market-grid {
    grid-template-columns: 1fr;
  }

  .rhino-sports-hero-media {
    min-height: 280px;
  }

  .rhino-sports-hero-media img {
    width: 118%;
  }

}

/* =========================================================
   RHINO CASINO — VIP
========================================================= */

.rhino-vip {
  position: relative;
  width: 100%;
  padding: 88px 24px 100px;
  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(212, 177, 54, 0.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 12% 84%,
      rgba(120, 255, 78, 0.05),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #070b08 0%,
      #0a100b 50%,
      #060a07 100%
    );

  border-top: 1px solid rgba(214, 191, 74, 0.10);
}

.rhino-vip-shell {
  width: min(1296px, calc(100% - 48px));
  margin: 0 auto;
}


/* =========================================================
   COMMON TYPOGRAPHY
========================================================= */

.rhino-vip h2,
.rhino-vip h3,
.rhino-vip h4 {
  color: #ffffff;
}

.rhino-vip p,
.rhino-vip li {
  color: rgba(255, 255, 255, 0.70);
}

.rhino-vip-kicker {
  margin: 0 0 10px;

  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;

  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: #d8c45d;
}


/* =========================================================
   VIP HERO
========================================================= */

.rhino-vip-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.55fr);
  gap: 50px;
  align-items: center;

  padding: 42px 46px;

  border: 1px solid rgba(216, 196, 93, 0.16);
  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(216, 196, 93, 0.055),
      rgba(126, 255, 79, 0.018),
      rgba(255, 255, 255, 0.006)
    );

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22);
}

.rhino-vip-hero-copy {
  position: relative;
  z-index: 2;
}

.rhino-vip-hero h2 {
  max-width: 680px;
  margin: 0;

  font-size: clamp(44px, 5vw, 70px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.rhino-vip-lead {
  max-width: 760px;
  margin: 20px 0 0;

  font-size: 16px;
  line-height: 1.75;
}

.rhino-vip-hero-points {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
  margin-top: 24px;
}

.rhino-vip-hero-points span {
  padding: 9px 12px;

  border: 1px solid rgba(216, 196, 93, 0.16);
  border-radius: 999px;

  background: rgba(216, 196, 93, 0.025);

  font-size: 11px;
  font-weight: 700;

  color: rgba(255, 255, 255, 0.80);
}

.rhino-vip-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 330px;
}

.rhino-vip-hero-media img {
  width: min(390px, 100%);
  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(0 24px 40px rgba(0, 0, 0, 0.40))
    drop-shadow(0 0 28px rgba(215, 190, 65, 0.10));
}


/* =========================================================
   SECTION HEAD
========================================================= */

.rhino-vip-section-head {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: end;

  margin-bottom: 24px;
}

.rhino-vip-section-head h3 {
  margin: 0;

  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.rhino-vip-section-head > p {
  margin: 0;

  font-size: 15px;
  line-height: 1.65;
}


/* =========================================================
   VIP VALUE
========================================================= */

.rhino-vip-value {
  margin-top: 56px;
}

.rhino-vip-value-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.rhino-vip-value-grid article {
  padding: 26px;

  border: 1px solid rgba(126, 255, 79, 0.12);
  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    );
}

.rhino-vip-value-label {
  display: block;

  margin-bottom: 12px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: #d8c45d;
}

.rhino-vip-value-grid strong {
  display: block;

  margin-bottom: 13px;

  font-size: 22px;
  line-height: 1.1;

  color: #ffffff;
}

.rhino-vip-value-grid article > p {
  margin: 0;

  font-size: 14px;
  line-height: 1.65;
}

.rhino-vip-action {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;

  margin-top: 18px;
  padding-top: 16px;

  border-top: 1px solid rgba(126, 255, 79, 0.10);
}

.rhino-vip-action > span {
  font-size: 11px;
  font-weight: 800;

  color: #7cff4f;
}

.rhino-vip-action p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   VIP JOURNEY
========================================================= */

.rhino-vip-journey {
  margin-top: 64px;
}

.rhino-vip-journey-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;
}

.rhino-vip-journey-grid article {
  padding: 24px;

  border: 1px solid rgba(216, 196, 93, 0.14);
  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      rgba(216, 196, 93, 0.028),
      rgba(255, 255, 255, 0.006)
    );
}

.rhino-vip-journey-grid article > span {
  display: block;

  margin-bottom: 12px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #d8c45d;
}

.rhino-vip-journey-grid h4 {
  margin: 0 0 12px;

  font-size: 20px;
  line-height: 1.18;
}

.rhino-vip-journey-grid p {
  margin: 0;

  font-size: 14px;
  line-height: 1.65;
}

.rhino-vip-journey-grid ul {
  margin: 18px 0 0;
  padding-left: 18px;
}

.rhino-vip-journey-grid li {
  margin-bottom: 7px;

  font-size: 12px;
  line-height: 1.5;
}


/* =========================================================
   VIP CASHBACK
========================================================= */

.rhino-vip-cashback {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 48px;
  align-items: center;

  margin-top: 64px;
  padding: 36px 40px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(126, 255, 79, 0.04),
      rgba(255, 255, 255, 0.006)
    );
}

.rhino-vip-cashback-main h3 {
  margin: 0;

  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.rhino-vip-cashback-main p {
  margin: 16px 0 0;

  font-size: 15px;
  line-height: 1.68;
}

.rhino-vip-cashback-stat {
  padding: 28px;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(126, 255, 79, 0.09),
      rgba(126, 255, 79, 0.02)
    );
}

.rhino-vip-cashback-stat > span {
  display: block;

  margin-bottom: 10px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: #d8c45d;
}

.rhino-vip-cashback-stat > strong {
  display: block;

  margin-bottom: 22px;

  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.9;

  color: #7cff4f;
}

.rhino-vip-cashback-checks {
  display: grid;
  gap: 10px;
}

.rhino-vip-cashback-checks div {
  padding: 12px 14px;

  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.015);
}

.rhino-vip-cashback-checks span {
  display: block;

  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;

  color: #7cff4f;
}

.rhino-vip-cashback-checks p {
  margin: 0;

  font-size: 12px;
  line-height: 1.5;
}


/* =========================================================
   VIP OFFERS
========================================================= */

.rhino-vip-offers {
  margin-top: 64px;
}

.rhino-vip-offer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;
}

.rhino-vip-offer-grid article {
  padding: 22px;

  border: 1px solid rgba(126, 255, 79, 0.12);
  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      #0b120d,
      #071009
    );
}

.rhino-vip-offer-grid article > span {
  display: block;

  margin-bottom: 10px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #d8c45d;
}

.rhino-vip-offer-grid strong {
  display: block;

  margin-bottom: 11px;

  font-size: 19px;
  line-height: 1.15;

  color: #ffffff;
}

.rhino-vip-offer-grid p {
  margin: 0;

  font-size: 13px;
  line-height: 1.58;
}


/* =========================================================
   SUPPORT
========================================================= */

.rhino-vip-support {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);

  gap: 42px;
  align-items: start;

  margin-top: 64px;
  padding: 34px 38px;

  border: 1px solid rgba(216, 196, 93, 0.14);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(216, 196, 93, 0.025),
      rgba(255, 255, 255, 0.006)
    );
}

.rhino-vip-support-copy h3 {
  margin: 0;

  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
}

.rhino-vip-support-copy p {
  margin: 16px 0 0;

  font-size: 14px;
  line-height: 1.65;
}

.rhino-vip-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 10px;
}

.rhino-vip-support-grid div {
  padding: 18px;

  border: 1px solid rgba(126, 255, 79, 0.10);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.012);
}

.rhino-vip-support-grid strong {
  display: block;

  margin-bottom: 8px;

  font-size: 15px;

  color: #7cff4f;
}

.rhino-vip-support-grid p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   CHECKLIST
========================================================= */

.rhino-vip-checklist {
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);

  gap: 46px;
  align-items: start;

  margin-top: 34px;
  padding: 30px 34px;

  border: 1px solid rgba(126, 255, 79, 0.12);
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.01);
}

.rhino-vip-checklist h3 {
  margin: 0;

  font-size: 30px;
  line-height: 1.05;
}

.rhino-vip-checklist ul {
  margin: 0;
  padding-left: 19px;
}

.rhino-vip-checklist li {
  margin-bottom: 9px;

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .rhino-vip-journey-grid,
  .rhino-vip-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rhino-vip-support-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 850px) {

  .rhino-vip {
    padding: 68px 18px 78px;
  }

  .rhino-vip-shell {
    width: 100%;
  }

  .rhino-vip-hero,
  .rhino-vip-section-head,
  .rhino-vip-cashback,
  .rhino-vip-support,
  .rhino-vip-checklist {
    grid-template-columns: 1fr;
  }

  .rhino-vip-hero {
    padding: 30px;
  }

  .rhino-vip-hero-media {
    min-height: 260px;
  }

  .rhino-vip-value-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 620px) {

  .rhino-vip {
    padding-left: 14px;
    padding-right: 14px;
  }

  .rhino-vip-journey-grid,
  .rhino-vip-offer-grid {
    grid-template-columns: 1fr;
  }

  .rhino-vip-hero,
  .rhino-vip-cashback,
  .rhino-vip-support,
  .rhino-vip-checklist {
    padding: 24px;
  }

  .rhino-vip-hero-media img {
    width: min(300px, 100%);
  }

}

/* =========================================================
   START RHINO ACCOUNT & SECURITY
========================================================= */

.rhino-account {
  width: 100%;
  padding: 82px 24px 96px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 86% 10%,
      rgba(126, 255, 79, 0.06),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #050a07 0%,
      #071009 100%
    );
}

.rhino-account *,
.rhino-account *::before,
.rhino-account *::after {
  box-sizing: border-box;
}

.rhino-account-shell {
  width: min(1296px, calc(100% - 48px));
  margin: 0 auto;
}

.rhino-account h2,
.rhino-account h3,
.rhino-account h4 {
  color: #ffffff;
}

.rhino-account p {
  color: rgba(255, 255, 255, 0.70);
}

.rhino-account-kicker {
  margin: 0 0 10px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #d8c45d;
}


/* =========================================================
   HERO — TEXT LEFT / IMAGE RIGHT
========================================================= */

.rhino-account-hero {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);

  gap: 30px;
  align-items: center;

  min-height: 455px;
  padding: 44px 46px;

  overflow: hidden;

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 28px;

  background:
    linear-gradient(
      120deg,
      rgba(126, 255, 79, 0.04),
      rgba(255, 255, 255, 0.005)
    );
}

.rhino-account-copy {
  position: relative;
  z-index: 2;
}

.rhino-account-copy h2 {
  max-width: 760px;
  margin: 0;

  font-size: clamp(44px, 5vw, 70px);
  line-height: 0.97;
  letter-spacing: -0.05em;
}

.rhino-account-copy > p {
  max-width: 760px;
  margin: 20px 0 0;

  font-size: 15px;
  line-height: 1.72;
}

.rhino-account-hero-points {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
  margin-top: 24px;
}

.rhino-account-hero-points span {
  padding: 8px 11px;

  border: 1px solid rgba(126, 255, 79, 0.16);
  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;

  color: rgba(255, 255, 255, 0.78);
}

.rhino-account-media {
  position: relative;

  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

  align-self: stretch;
}

.rhino-account-media img {
  position: absolute;
  right: -12px;
  bottom: -20px;

  width: min(470px, 112%);
  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(0 24px 40px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 24px rgba(126, 255, 79, 0.10));
}


/* =========================================================
   REGISTRATION ESSENTIALS — HORIZONTAL
========================================================= */

.rhino-account-essentials {
  margin-top: 16px;
  padding: 28px;

  border: 1px solid rgba(216, 196, 93, 0.14);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(216, 196, 93, 0.024),
      rgba(255, 255, 255, 0.004)
    );
}

.rhino-account-essentials-head {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);

  gap: 40px;
  align-items: end;

  margin-bottom: 20px;
}

.rhino-account-essentials-head h3,
.rhino-account-section-head h3,
.rhino-account-path-head h3,
.rhino-account-protection-head h3 {
  margin: 0;

  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.rhino-account-essentials-head > p,
.rhino-account-section-head > p,
.rhino-account-protection-head > p {
  margin: 0;

  font-size: 14px;
  line-height: 1.65;
}

.rhino-account-essential-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.rhino-account-essential-grid article {
  padding: 19px;

  border: 1px solid rgba(126, 255, 79, 0.10);
  border-radius: 15px;

  background:
    linear-gradient(
      180deg,
      #0b120d,
      #071009
    );
}

.rhino-account-essential-grid span {
  display: block;

  margin-bottom: 8px;

  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;

  color: #7cff4f;
}

.rhino-account-essential-grid strong {
  display: block;

  margin-bottom: 8px;

  font-size: 16px;
  line-height: 1.2;

  color: #ffffff;
}

.rhino-account-essential-grid p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   COMMON SECTION HEAD
========================================================= */

.rhino-account-section-head {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);

  gap: 42px;
  align-items: end;

  margin-bottom: 22px;
}


/* =========================================================
   CHECKPOINTS
========================================================= */

.rhino-account-checkpoints {
  margin-top: 52px;
}

.rhino-account-checkpoint-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.rhino-account-checkpoint-grid article {
  min-height: 205px;
  padding: 21px;

  border: 1px solid rgba(126, 255, 79, 0.11);
  border-radius: 17px;

  background:
    linear-gradient(
      180deg,
      #0b120d,
      #071009
    );
}

.rhino-account-checkpoint-grid article > span {
  display: block;

  margin-bottom: 10px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #d8c45d;
}

.rhino-account-checkpoint-grid strong {
  display: block;

  margin-bottom: 9px;

  font-size: 18px;

  color: #ffffff;
}

.rhino-account-checkpoint-grid p {
  margin: 0;

  font-size: 13px;
  line-height: 1.58;
}


/* =========================================================
   ACCOUNT PATH — HORIZONTAL
========================================================= */

.rhino-account-path {
  margin-top: 54px;
  padding: 28px;

  border: 1px solid rgba(126, 255, 79, 0.13);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(126, 255, 79, 0.028),
      rgba(255, 255, 255, 0.004)
    );
}

.rhino-account-path-head {
  max-width: 850px;
  margin-bottom: 22px;
}

.rhino-account-path-head > p:last-child {
  margin: 14px 0 0;

  font-size: 14px;
  line-height: 1.65;
}

.rhino-account-path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.rhino-account-path-grid article {
  padding: 18px;

  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.012);
}

.rhino-account-path-grid span {
  display: block;

  margin-bottom: 7px;

  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;

  color: #d8c45d;
}

.rhino-account-path-grid strong {
  display: block;

  margin-bottom: 8px;

  font-size: 15px;

  color: #7cff4f;
}

.rhino-account-path-grid p {
  margin: 0;

  font-size: 12px;
  line-height: 1.53;
}


/* =========================================================
   PRACTICAL PROTECTION — HORIZONTAL
========================================================= */

.rhino-account-protection {
  margin-top: 54px;
  padding: 28px;

  border: 1px solid rgba(216, 196, 93, 0.13);
  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(216, 196, 93, 0.024),
      rgba(255, 255, 255, 0.004)
    );
}

.rhino-account-protection-head {
  display: grid;
  grid-template-columns: minmax(330px, 0.9fr) minmax(0, 1.1fr);

  gap: 40px;
  align-items: end;

  margin-bottom: 22px;
}

.rhino-account-protection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;
}

.rhino-account-protection-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;

  gap: 14px;
  align-items: start;

  min-height: 155px;
  padding: 20px;

  border: 1px solid rgba(126, 255, 79, 0.10);
  border-radius: 15px;

  background:
    linear-gradient(
      180deg,
      #0b120d,
      #071009
    );
}

.rhino-account-protection-mark {
  width: 38px;
  height: 38px;

  border: 1px solid rgba(126, 255, 79, 0.25);
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(126, 255, 79, 0.20),
      rgba(126, 255, 79, 0.03)
    );
}

.rhino-account-protection-grid h4 {
  margin: 0 0 8px;

  font-size: 16px;
  line-height: 1.2;
}

.rhino-account-protection-grid p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   IDENTITY / PAYMENTS
========================================================= */

.rhino-account-alignment {
  margin-top: 54px;
}

.rhino-account-alignment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;
}

.rhino-account-alignment-grid article {
  padding: 21px;

  border: 1px solid rgba(126, 255, 79, 0.11);
  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      #0b120d,
      #071009
    );
}

.rhino-account-alignment-grid span {
  display: block;

  margin-bottom: 8px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #d8c45d;
}

.rhino-account-alignment-grid strong {
  display: block;

  margin-bottom: 8px;

  font-size: 16px;

  color: #7cff4f;
}

.rhino-account-alignment-grid p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   MORE
========================================================= */

.rhino-account-more {
  margin-top: 28px;

  overflow: hidden;

  border: 1px solid rgba(126, 255, 79, 0.16);
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(126, 255, 79, 0.026),
      rgba(255, 255, 255, 0.005)
    );
}

.rhino-account-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 20px 23px;

  cursor: pointer;
  list-style: none;

  font-size: 14px;
  font-weight: 800;

  color: #7cff4f;
}

.rhino-account-more summary::-webkit-details-marker {
  display: none;
}

.rhino-account-more summary::marker {
  content: "";
}

.rhino-account-more summary span {
  font-size: 22px;

  transition: transform 0.2s ease;
}

.rhino-account-more[open] summary span {
  transform: rotate(45deg);
}

.rhino-account-more-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;
  padding: 0 22px 22px;
}

.rhino-account-more-grid article {
  padding: 18px;

  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.012);
}

.rhino-account-more-grid h3 {
  margin: 0 0 9px;

  font-size: 15px;
}

.rhino-account-more-grid p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .rhino-account-hero {
    grid-template-columns: 1fr 0.8fr;
  }

  .rhino-account-essential-grid,
  .rhino-account-checkpoint-grid,
  .rhino-account-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rhino-account-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 820px) {

  .rhino-account {
    padding: 62px 18px 76px;
  }

  .rhino-account-shell {
    width: 100%;
  }

  .rhino-account-hero,
  .rhino-account-essentials-head,
  .rhino-account-section-head,
  .rhino-account-protection-head {
    grid-template-columns: 1fr;
  }

  .rhino-account-media {
    min-height: 300px;
  }

  .rhino-account-media img {
    right: 50%;
    bottom: -12px;

    width: min(390px, 100%);

    transform: translateX(50%);
  }

  .rhino-account-protection-grid,
  .rhino-account-alignment-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 620px) {

  .rhino-account {
    padding-left: 14px;
    padding-right: 14px;
  }

  .rhino-account-hero,
  .rhino-account-essentials,
  .rhino-account-path,
  .rhino-account-protection {
    padding: 22px;
  }

  .rhino-account-essential-grid,
  .rhino-account-checkpoint-grid,
  .rhino-account-path-grid,
  .rhino-account-more-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   END RHINO ACCOUNT & SECURITY
========================================================= */

   rhino — MOBILE SECTION
   CSS ONLY — INSERT AT THE VERY END OF style.css
===================================================== */

.rhino-mobile {
  width: min(1780px, calc(100vw - 56px)) !important;
  max-width: none !important;

  margin: 110px auto 0 !important;
  padding: 0 28px !important;

  color: #ffffff !important;
}

.rhino-mobile * {
  box-sizing: border-box !important;
}

.rhino-mobile-layout {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr) !important;
  gap: 30px !important;

  align-items: stretch !important;

  margin-bottom: 24px !important;
}

.rhino-mobile-visual {
  position: relative !important;

  min-height: 720px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    radial-gradient(circle at 50% 34%, rgba(142, 232, 95, 0.20), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(237, 205, 118, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(12, 28, 20, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(142, 232, 95, 0.20) !important;
  border-radius: 30px !important;

  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;

  overflow: hidden !important;
}

/* Phone */

.rhino-mobile-phone {
  position: relative !important;

  width: 310px !important;
  height: 640px !important;

  padding: 14px !important;

  background:
    linear-gradient(180deg, rgba(32, 42, 38, 0.98), rgba(6, 10, 9, 0.98)) !important;

  border: 4px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 42px !important;

  box-shadow:
    0 36px 72px rgba(0, 0, 0, 0.42),
    0 0 44px rgba(142, 232, 95, 0.12),
    inset 0 0 0 1px rgba(142, 232, 95, 0.14) !important;

  animation: rhinoMobileFloat 4.4s ease-in-out infinite !important;
}

.rhino-mobile-phone::before {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  top: 13px !important;

  width: 86px !important;
  height: 8px !important;

  transform: translateX(-50%) !important;

  background: rgba(255, 255, 255, 0.22) !important;

  border-radius: 20px !important;
  z-index: 2 !important;
}

.rhino-mobile-screen {
  position: relative !important;

  height: 100% !important;
  padding: 30px 16px 16px !important;

  background:
    radial-gradient(circle at 80% 12%, rgba(142, 232, 95, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(9, 24, 16, 0.98), rgba(2, 7, 5, 0.98)) !important;

  border-radius: 32px !important;

  overflow: hidden !important;
}

.rhino-mobile-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  margin-bottom: 16px !important;
}

.rhino-mobile-logo {
  color: #ffffff !important;

  font-size: 25px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.rhino-mobile-logo::first-letter {
  color: #ffffff !important;
}

.rhino-mobile-status {
  padding: 7px 9px !important;

  color: #061008 !important;
  background: var(--green) !important;

  border-radius: 9px !important;

  font-size: 10px !important;
  font-weight: 950 !important;
}

.rhino-mobile-promo {
  min-height: 148px !important;

  padding: 17px !important;
  margin-bottom: 14px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;

  background:
    radial-gradient(circle at 82% 18%, rgba(237, 205, 118, 0.30), transparent 34%),
    linear-gradient(135deg, rgba(142, 232, 95, 0.22), rgba(255, 255, 255, 0.045)) !important;

  border: 1px solid rgba(142, 232, 95, 0.22) !important;
  border-radius: 20px !important;
}

.rhino-mobile-promo span {
  margin-bottom: 7px !important;

  color: var(--gold) !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
}

.rhino-mobile-promo strong {
  margin-bottom: 8px !important;

  color: #ffffff !important;

  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
}

.rhino-mobile-promo em {
  color: var(--green) !important;

  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.rhino-mobile-game-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 9px !important;

  margin-bottom: 14px !important;
}

.rhino-mobile-game-row span {
  height: 92px !important;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)) !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 14px !important;
}

.rhino-mobile-game-row span:nth-child(1) {
  background:
    radial-gradient(circle at 50% 36%, rgba(237, 205, 118, 0.32), transparent 38%),
    linear-gradient(145deg, rgba(61, 31, 13, 0.96), rgba(10, 15, 10, 0.96)) !important;
}

.rhino-mobile-game-row span:nth-child(2) {
  background:
    radial-gradient(circle at 50% 36%, rgba(142, 232, 95, 0.30), transparent 38%),
    linear-gradient(145deg, rgba(14, 52, 29, 0.96), rgba(10, 15, 10, 0.96)) !important;
}

.rhino-mobile-game-row span:nth-child(3) {
  background:
    radial-gradient(circle at 50% 36%, rgba(92, 165, 255, 0.25), transparent 38%),
    linear-gradient(145deg, rgba(16, 32, 58, 0.96), rgba(10, 15, 10, 0.96)) !important;
}

.rhino-mobile-cashier {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 9px !important;

  margin-bottom: 14px !important;
}

.rhino-mobile-cashier p {
  margin: 0 !important;
  padding: 13px !important;

  background: rgba(255, 255, 255, 0.055) !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 14px !important;
}

.rhino-mobile-cashier span {
  display: block !important;

  margin-bottom: 5px !important;

  color: rgba(255, 255, 255, 0.62) !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}

.rhino-mobile-cashier strong {
  display: block !important;

  color: var(--green) !important;

  font-size: 13px !important;
  font-weight: 950 !important;
}

.rhino-mobile-nav {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;

  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;

  padding: 10px !important;

  background: rgba(0, 0, 0, 0.34) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;

  backdrop-filter: blur(12px) !important;
}

.rhino-mobile-nav span {
  color: rgba(255, 255, 255, 0.72) !important;

  text-align: center !important;

  font-size: 9px !important;
  font-weight: 900 !important;
}

/* Decorative objects */

.rhino-mobile-chip {
  position: absolute !important;

  width: 72px !important;
  height: 72px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.20) 0 20%, transparent 21%),
    conic-gradient(
      from 0deg,
      var(--green) 0 12%,
      #ffffff 12% 17%,
      var(--green) 17% 32%,
      #ffffff 32% 37%,
      var(--green) 37% 52%,
      #ffffff 52% 57%,
      var(--green) 57% 72%,
      #ffffff 72% 77%,
      var(--green) 77% 100%
    ) !important;

  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}

.rhino-mobile-chip-a {
  left: 46px !important;
  top: 88px !important;

  animation: rhinoMobileChipA 5s ease-in-out infinite !important;
}

.rhino-mobile-chip-b {
  right: 56px !important;
  bottom: 98px !important;

  transform: scale(0.78) !important;

  animation: rhinoMobileChipB 5.4s ease-in-out infinite !important;
}

.rhino-mobile-shield {
  position: absolute !important;

  right: 72px !important;
  top: 104px !important;

  width: 74px !important;
  height: 86px !important;

  background:
    linear-gradient(180deg, rgba(237, 205, 118, 0.98), rgba(161, 104, 28, 0.98)) !important;

  clip-path: polygon(50% 0%, 88% 13%, 82% 67%, 50% 100%, 18% 67%, 12% 13%) !important;

  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.32),
    0 0 30px rgba(237, 205, 118, 0.24) !important;

  animation: rhinoMobileShield 3.2s ease-in-out infinite !important;
}

.rhino-mobile-shield::after {
  content: "✓" !important;

  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #061008 !important;

  font-size: 36px !important;
  font-weight: 950 !important;
}

.rhino-mobile-spark {
  position: absolute !important;

  color: var(--green) !important;

  font-size: 24px !important;

  text-shadow: 0 0 18px rgba(142, 232, 95, 0.85) !important;

  animation: rhinoMobileSpark 2.4s ease-in-out infinite !important;
}

.rhino-mobile-spark-a {
  left: 96px !important;
  bottom: 120px !important;
}

.rhino-mobile-spark-b {
  right: 114px !important;
  top: 54px !important;

  animation-delay: 0.7s !important;
}

/* Copy */

.rhino-mobile-copy {
  padding: 36px !important;

  background:
    linear-gradient(135deg, rgba(10, 23, 18, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(142, 232, 95, 0.14) !important;
  border-radius: 30px !important;

  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.rhino-mobile-kicker {
  margin: 0 0 12px !important;

  color: var(--gold) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

.rhino-mobile-copy h2 {
  margin: 0 0 18px !important;

  color: #ffffff !important;

  font-size: clamp(42px, 4vw, 70px) !important;
  font-weight: 950 !important;
  line-height: 1.03 !important;
  letter-spacing: -1.5px !important;
}

.rhino-mobile-copy > p {
  max-width: 1180px !important;

  margin: 0 0 12px !important;

  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 16px !important;
  line-height: 1.66 !important;
}

.rhino-mobile-points {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;

  margin-top: 24px !important;
}

.rhino-mobile-points article {
  padding: 20px !important;

  background: rgba(255, 255, 255, 0.045) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

.rhino-mobile-points span {
  display: block !important;

  margin-bottom: 9px !important;

  color: var(--gold) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1.7px !important;
  text-transform: uppercase !important;
}

.rhino-mobile-points h3 {
  margin: 0 0 9px !important;

  color: #ffffff !important;

  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
}

.rhino-mobile-points p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.72) !important;

  font-size: 13px !important;
  line-height: 1.52 !important;
}

/* Use guide */

.rhino-mobile-use {
  display: grid !important;
  grid-template-columns: 380px minmax(0, 1fr) !important;
  gap: 24px !important;

  margin-bottom: 22px !important;
  padding: 28px !important;

  background:
    radial-gradient(circle at 0% 0%, rgba(142, 232, 95, 0.10), transparent 36%),
    linear-gradient(135deg, rgba(10, 23, 18, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(142, 232, 95, 0.14) !important;
  border-radius: 24px !important;
}

.rhino-mobile-use-copy h3 {
  margin: 0 0 12px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 2.6vw, 44px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.7px !important;
}

.rhino-mobile-use-copy p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.76) !important;

  font-size: 15px !important;
  line-height: 1.6 !important;
}

.rhino-mobile-use-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.rhino-mobile-use-grid article {
  padding: 18px !important;

  background: rgba(255, 255, 255, 0.045) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

.rhino-mobile-use-grid strong {
  display: block !important;

  margin-bottom: 8px !important;

  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.rhino-mobile-use-grid p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.72) !important;

  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Hidden details */

.rhino-mobile-more {
  margin: 0 !important;

  background:
    linear-gradient(135deg, rgba(13, 24, 20, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(142, 232, 95, 0.24) !important;
  border-radius: 20px !important;

  overflow: hidden !important;
}

.rhino-mobile-more summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;

  padding: 20px 24px !important;

  color: var(--green) !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;

  cursor: pointer !important;
  list-style: none !important;
}

.rhino-mobile-more summary::-webkit-details-marker {
  display: none !important;
}

.rhino-mobile-more summary::marker {
  display: none !important;
}

.rhino-mobile-more[open] summary span {
  transform: rotate(45deg) !important;
}

.rhino-mobile-more-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;

  padding: 0 24px 24px !important;
}

.rhino-mobile-more-grid article {
  padding: 20px !important;

  background: rgba(255, 255, 255, 0.04) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
}

.rhino-mobile-more-grid h3 {
  margin: 0 0 10px !important;

  color: #ffffff !important;

  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.rhino-mobile-more-grid p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.74) !important;

  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Animations */

@keyframes rhinoMobileFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-14px) rotate(1.5deg);
  }
}

@keyframes rhinoMobileChipA {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-16px) rotate(16deg);
  }
}

@keyframes rhinoMobileChipB {
  0%, 100% {
    transform: scale(0.78) translateY(0) rotate(0deg);
  }

  50% {
    transform: scale(0.78) translateY(-14px) rotate(-18deg);
  }
}

@keyframes rhinoMobileShield {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }

  50% {
    transform: scale(1.07);
    opacity: 1;
  }
}

@keyframes rhinoMobileSpark {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

/* Responsive */

@media (max-width: 1280px) {

  .rhino-mobile-layout {
    grid-template-columns: 1fr !important;
  }

  .rhino-mobile-visual {
    min-height: 620px !important;
  }

  .rhino-mobile-phone {
    width: 290px !important;
    height: 600px !important;
  }

}

@media (max-width: 980px) {

  .rhino-mobile {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .rhino-mobile-use {
    grid-template-columns: 1fr !important;
  }

  .rhino-mobile-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}

@media (max-width: 680px) {

  .rhino-mobile {
    margin-top: 80px !important;
  }

  .rhino-mobile-visual {
    min-height: 560px !important;
  }

  .rhino-mobile-copy,
  .rhino-mobile-use {
    padding: 22px !important;
  }

  .rhino-mobile-points,
  .rhino-mobile-use-grid,
  .rhino-mobile-more-grid {
    grid-template-columns: 1fr !important;
  }

  .rhino-mobile-phone {
    width: 255px !important;
    height: 540px !important;
  }

  .rhino-mobile-chip-a {
    left: 26px !important;
  }

  .rhino-mobile-chip-b {
    right: 26px !important;
  }

  .rhino-mobile-shield {
    right: 36px !important;
  }

}

/* =====================================================
   END rhino — MOBILE SECTION
===================================================== */
/* =====================================================
   rhino — MOBILE REAL WEBP IMAGE FIX
===================================================== */

.rhino-mobile-visual {
  min-height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.rhino-mobile-image {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 720px !important;

  object-fit: cover !important;
  object-position: center center !important;

  border-radius: 30px !important;
}

@media (max-width: 1280px) {
  .rhino-mobile-image {
    min-height: 620px !important;
  }
}

@media (max-width: 680px) {
  .rhino-mobile-image {
    min-height: 520px !important;
  }
}
/* =====================================================
   rhino — ABOUT SECTION
   CSS ONLY — INSERT AT THE VERY END OF style.css
===================================================== */

.rhino-about {
  width: min(1780px, calc(100vw - 56px)) !important;
  max-width: none !important;

  margin: 110px auto 0 !important;
  padding: 0 28px !important;

  color: #ffffff !important;
}

.rhino-about * {
  box-sizing: border-box !important;
}

/* Hero */

.rhino-about-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
  gap: 30px !important;

  align-items: stretch !important;

  margin-bottom: 24px !important;
  padding: 34px !important;

  background:
    radial-gradient(circle at 85% 15%, rgba(237, 205, 118, 0.18), transparent 34%),
    radial-gradient(circle at 10% 100%, rgba(142, 232, 95, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(18, 25, 16, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(237, 205, 118, 0.18) !important;
  border-radius: 30px !important;

  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;

  overflow: hidden !important;
}

.rhino-about-kicker {
  margin: 0 0 12px !important;

  color: var(--gold) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

.rhino-about-copy h2 {
  max-width: 980px !important;

  margin: 0 0 18px !important;

  color: #ffffff !important;

  font-size: clamp(42px, 4vw, 70px) !important;
  font-weight: 950 !important;
  line-height: 1.03 !important;
  letter-spacing: -1.6px !important;
}

.rhino-about-copy p {
  max-width: 1120px !important;

  margin: 0 0 12px !important;

  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 16px !important;
  line-height: 1.66 !important;
}

.rhino-about-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;

  margin-top: 24px !important;
}

.rhino-about-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 48px !important;

  padding: 14px 22px !important;

  color: #061008 !important;
  background: var(--green) !important;

  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 14px 28px rgba(142, 232, 95, 0.20) !important;
}

.rhino-about-actions a:nth-child(2) {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.065) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  box-shadow: none !important;
}

/* Visual */

.rhino-about-visual {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 420px !important;

  margin: 0 !important;

  background:
    radial-gradient(circle at center, rgba(142, 232, 95, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;

  border: 1px solid rgba(237, 205, 118, 0.18) !important;
  border-radius: 26px !important;

  overflow: hidden !important;
}

.rhino-about-visual::before {
  content: "" !important;

  position: absolute !important;
  inset: 28px !important;

  border: 1px solid rgba(237, 205, 118, 0.11) !important;
  border-radius: 28px !important;

  pointer-events: none !important;
}

.rhino-about-visual img {
  display: block !important;

  width: 115% !important;
  max-width: none !important;
  height: auto !important;

  object-fit: contain !important;

  filter:
    drop-shadow(0 26px 44px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 28px rgba(142, 232, 95, 0.12)) !important;

  transform: translateY(8px) !important;
}

/* Pillars */

.rhino-about-pillars {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;

  margin-bottom: 24px !important;
}

.rhino-about-pillars article {
  padding: 24px !important;

  background:
    linear-gradient(145deg, rgba(14, 26, 20, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 22px !important;

  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22) !important;
}

.rhino-about-pillars span {
  display: block !important;

  margin-bottom: 10px !important;

  color: var(--gold) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
}

.rhino-about-pillars h3 {
  margin: 0 0 10px !important;

  color: #ffffff !important;

  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.3px !important;
}

.rhino-about-pillars p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.72) !important;

  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Balance block */

.rhino-about-balance {
  display: grid !important;
  grid-template-columns: 410px minmax(0, 1fr) !important;
  gap: 24px !important;

  align-items: start !important;

  margin-bottom: 24px !important;
  padding: 28px !important;

  background:
    radial-gradient(circle at 0% 0%, rgba(237, 205, 118, 0.11), transparent 36%),
    linear-gradient(135deg, rgba(15, 24, 17, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(237, 205, 118, 0.15) !important;
  border-radius: 26px !important;

  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24) !important;
}

.rhino-about-balance-copy h3 {
  margin: 0 0 12px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 2.6vw, 44px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.7px !important;
}

.rhino-about-balance-copy p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.76) !important;

  font-size: 15px !important;
  line-height: 1.62 !important;
}

.rhino-about-balance-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.rhino-about-balance-grid article {
  padding: 18px !important;

  background: rgba(255, 255, 255, 0.045) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

.rhino-about-balance-grid strong {
  display: block !important;

  margin-bottom: 8px !important;

  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.rhino-about-balance-grid p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.72) !important;

  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Hidden details */

.rhino-about-more {
  margin: 0 !important;

  background:
    linear-gradient(135deg, rgba(13, 24, 20, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(142, 232, 95, 0.24) !important;
  border-radius: 20px !important;

  overflow: hidden !important;
}

.rhino-about-more summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;

  padding: 20px 24px !important;

  color: var(--green) !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;

  cursor: pointer !important;
  list-style: none !important;
}

.rhino-about-more summary::-webkit-details-marker {
  display: none !important;
}

.rhino-about-more summary::marker {
  display: none !important;
}

.rhino-about-more[open] summary span {
  transform: rotate(45deg) !important;
}

.rhino-about-more-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;

  padding: 0 24px 24px !important;
}

.rhino-about-more-grid article {
  padding: 20px !important;

  background: rgba(255, 255, 255, 0.04) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
}

.rhino-about-more-grid h3 {
  margin: 0 0 10px !important;

  color: #ffffff !important;

  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.rhino-about-more-grid p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.74) !important;

  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Responsive */

@media (max-width: 1280px) {

  .rhino-about-hero,
  .rhino-about-balance {
    grid-template-columns: 1fr !important;
  }

  .rhino-about-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rhino-about-visual {
    min-height: 360px !important;
  }

  .rhino-about-visual img {
    width: 100% !important;
  }

}

@media (max-width: 980px) {

  .rhino-about {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .rhino-about-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}

@media (max-width: 680px) {

  .rhino-about {
    margin-top: 80px !important;
  }

  .rhino-about-hero,
  .rhino-about-balance {
    padding: 22px !important;
  }

  .rhino-about-pillars,
  .rhino-about-balance-grid,
  .rhino-about-more-grid {
    grid-template-columns: 1fr !important;
  }

  .rhino-about-actions a {
    width: 100% !important;
  }

}

/* =====================================================
   END rhino — ABOUT SECTION
===================================================== */
/* =====================================================
   rhino — ABOUT COMPACT BALANCE FIX
   Removes empty gaps in About section
   INSERT AT THE VERY END OF style.css
===================================================== */

/* Make About balance block compact instead of tall */
.rhino-about-balance {
  display: block !important;

  padding: 28px !important;

  min-height: 0 !important;
}

/* Top row: heading + intro in two columns */
.rhino-about-balance-copy {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.7fr) minmax(0, 1.3fr) !important;
  gap: 26px !important;

  align-items: start !important;

  margin-bottom: 22px !important;
}

.rhino-about-balance-copy .rhino-about-kicker {
  grid-column: 1 / -1 !important;
  margin-bottom: 0 !important;
}

.rhino-about-balance-copy h3 {
  margin: 0 !important;

  max-width: 620px !important;

  font-size: clamp(32px, 2.8vw, 48px) !important;
  line-height: 1.06 !important;
}

.rhino-about-balance-copy p {
  margin: 0 !important;

  max-width: none !important;

  font-size: 15px !important;
  line-height: 1.58 !important;
}

/* Four cards become one balanced horizontal row */
.rhino-about-balance-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.rhino-about-balance-grid article {
  min-height: auto !important;

  padding: 18px !important;

  display: block !important;
}

.rhino-about-balance-grid strong {
  margin-bottom: 8px !important;

  font-size: 15px !important;
  line-height: 1.22 !important;
}

.rhino-about-balance-grid p {
  font-size: 13px !important;
  line-height: 1.48 !important;
}

/* Slightly tighten top pillar cards too */
.rhino-about-pillars article {
  min-height: auto !important;
  padding: 22px !important;
}

.rhino-about-pillars h3 {
  font-size: 20px !important;
}

.rhino-about-pillars p {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Reduce distance before FAQ */
.rhino-about {
  margin-bottom: 70px !important;
}

/* Responsive */
@media (max-width: 1280px) {

  .rhino-about-balance-copy {
    grid-template-columns: 1fr !important;
  }

  .rhino-about-balance-copy h3 {
    max-width: none !important;
  }

  .rhino-about-balance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}

@media (max-width: 680px) {

  .rhino-about-balance {
    padding: 22px !important;
  }

  .rhino-about-balance-grid {
    grid-template-columns: 1fr !important;
  }

}

/* =====================================================
   END rhino — ABOUT COMPACT BALANCE FIX
===================================================== */
/* =====================================================
   rhino — FINAL GLOBAL READABILITY + WIDTH FIX
   INSERT AT THE VERY END OF style.css
===================================================== */

/* 1. Return normal readable page width */
.gm-library,
.rhino-bonuses,
.rhino-vip,
.rhino-banking,
.rhino-account,
.rhino-mobile,
.rhino-about {
  width: min(1500px, calc(100vw - 64px)) !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. Main section spacing */
.rhino-bonuses,
.rhino-vip,
.rhino-banking,
.rhino-account,
.rhino-mobile,
.rhino-about {
  margin-top: 96px !important;
}

/* 3. Normal readable paragraph text everywhere */
.gm-library p,
.rhino-bonuses p,
.rhino-vip p,
.rhino-banking p,
.rhino-account p,
.rhino-mobile p,
.rhino-about p {
  color: rgba(255, 255, 255, 0.84) !important;

  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.68 !important;

  letter-spacing: -0.01em !important;
}

/* 4. Main intro text should be bigger */
.gm-heading .gm-lead,
.gm-panel-intro,
.gm-category-intro,
.rhino-bonuses-copy p,
.rhino-bonuses-intro p,
.rhino-vip-copy p,
.rhino-banking-copy p,
.rhino-account-copy p,
.rhino-mobile-copy > p,
.rhino-about-copy p {
  color: rgba(255, 255, 255, 0.88) !important;

  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.72 !important;
}

/* 5. Card text: not tiny anymore */
.gm-card-copy,
.gm-description dd,
.rhino-bonus-card p,
.rhino-bonus-card li,
.rhino-vip-level p,
.rhino-vip-level li,
.rhino-vip-path-grid p,
.rhino-banking-method-card p,
.rhino-banking-flow-grid p,
.rhino-banking-more-grid p,
.rhino-account-strip p,
.rhino-account-flow-list p,
.rhino-account-protection p,
.rhino-account-more-grid p,
.rhino-mobile-points p,
.rhino-mobile-use-grid p,
.rhino-mobile-more-grid p,
.rhino-about-pillars p,
.rhino-about-balance-grid p,
.rhino-about-more-grid p {
  color: rgba(255, 255, 255, 0.80) !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
}

/* 6. Tables should also be readable */
.rhino-banking-table th,
.rhino-banking-table td,
.rhino-vip-table th,
.rhino-vip-table td {
  color: rgba(255, 255, 255, 0.84) !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.48 !important;
}

.rhino-banking-table tbody th,
.rhino-vip-table tbody th {
  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 900 !important;
}

/* 7. Game card names and hints */
.gm-name {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.gm-hint {
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* 8. Description blocks inside opened game cards */
.gm-rule dt {
  color: var(--gold) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;

  letter-spacing: 0.8px !important;
}

.gm-rule dd {
  font-size: 15px !important;
  line-height: 1.62 !important;
}

/* 9. Headings stay strong but not ridiculous */
.gm-heading h2,
.rhino-bonuses-copy h2,
.rhino-bonuses-title-block h2,
.rhino-vip-copy h2,
.rhino-banking-copy h2,
.rhino-account-copy h2,
.rhino-mobile-copy h2,
.rhino-about-copy h2 {
  color: #ffffff !important;

  font-weight: 950 !important;
  letter-spacing: -1.4px !important;
  line-height: 1.04 !important;
}

/* 10. Smaller card headings */
.rhino-bonus-card h3,
.rhino-banking-method-card h3,
.rhino-account-panel h3,
.rhino-mobile-points h3,
.rhino-about-pillars h3 {
  color: #ffffff !important;

  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
}

/* 11. Stop over-wide lines in text-heavy blocks */
.gm-heading .gm-lead,
.gm-panel-intro,
.gm-category-intro,
.rhino-bonuses-copy p,
.rhino-bonuses-intro p,
.rhino-vip-copy p,
.rhino-banking-copy p,
.rhino-account-copy p,
.rhino-mobile-copy > p,
.rhino-about-copy p,
.rhino-about-balance-copy p,
.rhino-mobile-use-copy p,
.rhino-banking-table-copy p,
.rhino-banking-flow-copy p,
.rhino-account-flow-copy p,
.rhino-vip-path-copy p {
  max-width: 1050px !important;
}

/* 12. Labels/kickers readable but still decorative */
.gm-eyebrow,
.rhino-bonuses-kicker,
.rhino-vip-kicker,
.rhino-banking-kicker,
.rhino-account-kicker,
.rhino-mobile-kicker,
.rhino-about-kicker,
.rhino-bonus-label span,
.rhino-vip-summary span,
.rhino-vip-level span,
.rhino-banking-limit-card span,
.rhino-account-strip span,
.rhino-mobile-points span,
.rhino-about-pillars span {
  color: var(--gold) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;

  letter-spacing: 2.4px !important;
  text-transform: uppercase !important;
}

/* 13. Better button readability */
.gm-tab,
.theme-btn,
.site-btn,
.rhino-about-actions a {
  font-size: 15px !important;
  font-weight: 900 !important;
}

/* 14. Mobile section: reduce image height a little for balance */
.rhino-mobile-image {
  min-height: 640px !important;
  max-height: 720px !important;
}

/* 15. Mobile right panel should not look empty */
.rhino-mobile-copy {
  min-height: auto !important;
}

.rhino-mobile-points article {
  min-height: auto !important;
}

/* 16. About compact symmetry */
.rhino-about-balance {
  min-height: auto !important;
}

.rhino-about-balance-grid article,
.rhino-about-pillars article {
  min-height: auto !important;
}

/* 17. Smooth readable rendering */
body,
.gm-library,
.rhino-bonuses,
.rhino-vip,
.rhino-banking,
.rhino-account,
.rhino-mobile,
.rhino-about {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Responsive */
@media (max-width: 980px) {

  .gm-library,
  .rhino-bonuses,
  .rhino-vip,
  .rhino-banking,
  .rhino-account,
  .rhino-mobile,
  .rhino-about {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .gm-library p,
  .rhino-bonuses p,
  .rhino-vip p,
  .rhino-banking p,
  .rhino-account p,
  .rhino-mobile p,
  .rhino-about p {
    font-size: 16px !important;
  }

}

@media (max-width: 680px) {

  .gm-heading .gm-lead,
  .gm-panel-intro,
  .gm-category-intro,
  .rhino-bonuses-copy p,
  .rhino-bonuses-intro p,
  .rhino-vip-copy p,
  .rhino-banking-copy p,
  .rhino-account-copy p,
  .rhino-mobile-copy > p,
  .rhino-about-copy p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  .rhino-mobile-image {
    min-height: 520px !important;
  }

}

/* =====================================================
   END rhino — FINAL GLOBAL READABILITY + WIDTH FIX
===================================================== */
/* =====================================================
   rhino — FAQ SECTION
   CSS ONLY — INSERT AT THE VERY END OF style.css
===================================================== */

.rhino-faq {
  width: min(1500px, calc(100vw - 64px)) !important;
  max-width: none !important;

  margin: 110px auto 0 !important;
  padding: 0 28px 90px !important;

  color: #ffffff !important;
}

.rhino-faq * {
  box-sizing: border-box !important;
}

/* Header */

.rhino-faq-head {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr) !important;
  gap: 34px !important;

  align-items: end !important;

  margin-bottom: 26px !important;
  padding: 32px !important;

  background:
    radial-gradient(circle at 92% 20%, rgba(142, 232, 95, 0.13), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(237, 205, 118, 0.10), transparent 36%),
    linear-gradient(135deg, rgba(12, 25, 18, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(142, 232, 95, 0.18) !important;
  border-radius: 28px !important;

  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.rhino-faq-kicker {
  margin: 0 0 12px !important;

  color: var(--gold) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

.rhino-faq-head h2 {
  margin: 0 !important;

  color: #ffffff !important;

  font-size: clamp(42px, 4vw, 68px) !important;
  font-weight: 950 !important;
  line-height: 1.03 !important;
  letter-spacing: -1.5px !important;
}

.rhino-faq-head > p {
  margin: 0 !important;

  max-width: 980px !important;

  color: rgba(255, 255, 255, 0.84) !important;

  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.68 !important;
}

/* Columns */

.rhino-faq-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;

  align-items: start !important;
}

.rhino-faq-column {
  padding: 22px !important;

  background:
    linear-gradient(145deg, rgba(12, 24, 18, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 24px !important;

  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24) !important;
}

.rhino-faq-column h3 {
  margin: 0 0 16px !important;

  color: #ffffff !important;

  font-size: 26px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
}

/* FAQ items */

.rhino-faq details {
  margin: 0 0 10px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.026)
    ) !important;

  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 16px !important;

  overflow: hidden !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease !important;
}

.rhino-faq details:last-child {
  margin-bottom: 0 !important;
}

.rhino-faq details[open] {
  border-color: rgba(142, 232, 95, 0.42) !important;

  background:
    linear-gradient(
      180deg,
      rgba(142, 232, 95, 0.075),
      rgba(255, 255, 255, 0.028)
    ) !important;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(142, 232, 95, 0.08) !important;
}

.rhino-faq summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;

  min-height: 68px !important;

  padding: 18px 20px !important;

  color: #ffffff !important;

  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;

  cursor: pointer !important;
  list-style: none !important;
}

.rhino-faq summary::-webkit-details-marker {
  display: none !important;
}

.rhino-faq summary::marker {
  display: none !important;
}

.rhino-faq summary span {
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 30px !important;
  height: 30px !important;

  color: #061008 !important;
  background: var(--green) !important;

  border-radius: 50% !important;

  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  transition: transform 0.2s ease !important;
}

.rhino-faq details[open] summary span {
  transform: rotate(45deg) !important;
}

.rhino-faq-answer {
  padding: 0 20px 20px !important;
}

.rhino-faq-answer p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.80) !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
}

/* Responsive */

@media (max-width: 980px) {

  .rhino-faq {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .rhino-faq-head {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .rhino-faq-columns {
    grid-template-columns: 1fr !important;
  }

}

@media (max-width: 680px) {

  .rhino-faq {
    margin-top: 80px !important;
  }

  .rhino-faq-head,
  .rhino-faq-column {
    padding: 22px !important;
  }

  .rhino-faq summary {
    min-height: 62px !important;

    padding: 16px 17px !important;

    font-size: 15px !important;
  }

  .rhino-faq-answer {
    padding: 0 17px 17px !important;
  }

}

/* =====================================================
   END rhino — FAQ SECTION
===================================================== */

/* =====================================================
   rhino — ACCOUNT PRACTICAL PROTECTION COMPACT FIX
   Removes empty gaps in Account protection cards
   INSERT AT THE VERY END OF style.css
===================================================== */

.rhino-account-protection {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.62fr) minmax(0, 1.38fr) !important;
  gap: 18px !important;

  align-items: start !important;

  margin-bottom: 22px !important;
}

/* Main text block on the left */
.rhino-account-protection-main {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;

  min-height: auto !important;
  height: auto !important;

  padding: 26px !important;

  align-self: stretch !important;
}

/* The 3 practical cards on the right */
.rhino-account-protection article:not(.rhino-account-protection-main) {
  grid-column: 2 !important;

  min-height: auto !important;
  height: auto !important;

  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  row-gap: 6px !important;

  align-items: start !important;

  padding: 18px 20px !important;
}

/* Icon left */
.rhino-account-protection article:not(.rhino-account-protection-main) .rhino-account-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  margin: 0 !important;
}

/* Title and text right */
.rhino-account-protection article:not(.rhino-account-protection-main) h4 {
  grid-column: 2 !important;
  grid-row: 1 !important;

  margin: 0 !important;

  font-size: 18px !important;
  line-height: 1.2 !important;
}

.rhino-account-protection article:not(.rhino-account-protection-main) p {
  grid-column: 2 !important;
  grid-row: 2 !important;

  margin: 0 !important;

  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Make left heading less aggressively tall */
.rhino-account-protection-main h3 {
  max-width: 440px !important;

  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: 1.08 !important;
}

.rhino-account-protection-main p {
  max-width: 480px !important;

  font-size: 15px !important;
  line-height: 1.62 !important;
}

/* Responsive */
@media (max-width: 980px) {

  .rhino-account-protection {
    grid-template-columns: 1fr !important;
  }

  .rhino-account-protection-main,
  .rhino-account-protection article:not(.rhino-account-protection-main) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

}

@media (max-width: 620px) {

  .rhino-account-protection article:not(.rhino-account-protection-main) {
    grid-template-columns: 1fr !important;
  }

  .rhino-account-protection article:not(.rhino-account-protection-main) .rhino-account-icon,
  .rhino-account-protection article:not(.rhino-account-protection-main) h4,
  .rhino-account-protection article:not(.rhino-account-protection-main) p {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .rhino-account-protection article:not(.rhino-account-protection-main) .rhino-account-icon {
    margin-bottom: 12px !important;
  }

}

/* =====================================================
   END rhino — ACCOUNT PRACTICAL PROTECTION COMPACT FIX
===================================================== */
/* =====================================================
   rhino — FOOTER SECTION
   CSS ONLY — INSERT AT THE VERY END OF style.css
===================================================== */

.rhino-footer {
  width: 100% !important;

  margin: 110px 0 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  background:
    radial-gradient(circle at 18% 0%, rgba(142, 232, 95, 0.13), transparent 34%),
    radial-gradient(circle at 86% 100%, rgba(237, 205, 118, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(7, 15, 10, 0.98), rgba(1, 5, 4, 1)) !important;

  border-top: 1px solid rgba(142, 232, 95, 0.18) !important;
}

.rhino-footer * {
  box-sizing: border-box !important;
}

.rhino-footer-main {
  width: min(1500px, calc(100vw - 64px)) !important;

  margin: 0 auto !important;
  padding: 46px 28px 30px !important;

  display: grid !important;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr) !important;
  gap: 42px !important;

  align-items: start !important;
}

/* Brand */

.rhino-footer-brand {
  padding: 28px !important;

  background:
    linear-gradient(145deg, rgba(13, 26, 18, 0.96), rgba(4, 10, 7, 0.96)) !important;

  border: 1px solid rgba(142, 232, 95, 0.18) !important;
  border-radius: 24px !important;

  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.rhino-footer-logo {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  margin-bottom: 18px !important;

  text-decoration: none !important;
}

.rhino-footer-logo-main {
  display: block !important;

  color: var(--green) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 44px !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -1.5px !important;
}

.rhino-footer-logo-main span {
  color: #ffffff !important;
}

.rhino-footer-logo small {
  display: block !important;

  margin-top: 7px !important;
  padding-left: 4px !important;

  color: var(--gold) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  letter-spacing: 8px !important;
}

.rhino-footer-brand p,
.rhino-footer-note p,
.rhino-footer-bottom p {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
}

.rhino-footer-brand p {
  max-width: 520px !important;
  margin-bottom: 22px !important;
}

.rhino-footer-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 48px !important;

  padding: 14px 24px !important;

  color: #061008 !important;
  background: var(--green) !important;

  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: 0 14px 28px rgba(142, 232, 95, 0.20) !important;
}

/* Navigation */

.rhino-footer-nav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.rhino-footer-group {
  padding: 22px !important;

  background:
    linear-gradient(145deg, rgba(12, 23, 17, 0.92), rgba(4, 10, 7, 0.92)) !important;

  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 20px !important;
}

.rhino-footer-group h2 {
  margin: 0 0 15px !important;

  color: var(--gold) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;

  letter-spacing: 2.4px !important;
  text-transform: uppercase !important;
}

.rhino-footer-group a {
  display: block !important;

  padding: 8px 0 !important;

  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;

  transition:
    color 0.2s ease,
    transform 0.2s ease !important;
}

.rhino-footer-group a:hover {
  color: var(--green) !important;
  transform: translateX(4px) !important;
}

/* Note */

.rhino-footer-note {
  width: min(1500px, calc(100vw - 64px)) !important;

  margin: 0 auto !important;
  padding: 0 28px 28px !important;
}

.rhino-footer-note p {
  padding: 20px 22px !important;

  background: rgba(255, 255, 255, 0.035) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
}

/* Bottom */

.rhino-footer-bottom {
  width: min(1500px, calc(100vw - 64px)) !important;

  margin: 0 auto !important;
  padding: 22px 28px 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.rhino-footer-bottom button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  min-height: 42px !important;

  padding: 11px 18px !important;

  color: #061008 !important;
  background: var(--green) !important;

  border: 0 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

.rhino-footer-bottom button span {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Responsive */

@media (max-width: 1180px) {

  .rhino-footer-main {
    grid-template-columns: 1fr !important;
  }

  .rhino-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}

@media (max-width: 680px) {

  .rhino-footer-main,
  .rhino-footer-note,
  .rhino-footer-bottom {
    width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .rhino-footer-nav {
    grid-template-columns: 1fr !important;
  }

  .rhino-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .rhino-footer-bottom button {
    width: 100% !important;
  }

}

/* =====================================================
   END rhino — FOOTER SECTION
===================================================== */
/* =====================================================
   rhino — HEADER FINAL STRUCTURE
   INSERT AT THE VERY END OF style.css
===================================================== */

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;

  width: 100% !important;

  background: rgba(2, 8, 6, 0.96) !important;
  backdrop-filter: blur(14px) !important;

  border-bottom: 1px solid rgba(142, 232, 95, 0.16) !important;
}

.site-header__inner {
  width: min(1500px, calc(100vw - 64px)) !important;
  max-width: none !important;

  margin: 0 auto !important;
  padding: 18px 28px !important;

  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 34px !important;

  align-items: center !important;
}

/* Logo */

.site-logo {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  text-decoration: none !important;
}

.site-logo__main {
  color: var(--green) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -1.4px !important;
}

.site-logo__number {
  color: #ffffff !important;
}

.site-logo__sub {
  display: block !important;

  margin-top: 8px !important;
  padding-left: 5px !important;

  color: var(--gold) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  letter-spacing: 8px !important;
}

/* Navigation */

.site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;

  gap: 18px !important;

  min-width: 0 !important;
}

.site-nav a {
  color: rgba(255, 255, 255, 0.88) !important;

  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  transition:
    color 0.2s ease,
    transform 0.2s ease !important;
}

.site-nav a:hover {
  color: var(--green) !important;
  transform: translateY(-1px) !important;
}

/* Button */

.site-header__action {
  display: flex !important;
  justify-content: flex-end !important;
}

.site-btn--header {
  min-height: 52px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 15px 28px !important;

  color: #061008 !important;
  background: var(--green) !important;

  border-radius: 999px !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow: 0 14px 28px rgba(142, 232, 95, 0.20) !important;
}

/* Tablet */

@media (max-width: 1180px) {

  .site-header__inner {
    grid-template-columns: 1fr auto !important;
    gap: 20px !important;
  }

  .site-nav {
    grid-column: 1 / -1 !important;
    order: 3 !important;

    justify-content: flex-start !important;

    gap: 12px !important;
  }

  .site-nav a {
    padding: 8px 10px !important;

    background: rgba(255, 255, 255, 0.045) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
  }

}

/* Mobile */

@media (max-width: 680px) {

  .site-header__inner {
    width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .site-logo__main {
    font-size: 34px !important;
  }

  .site-logo__sub {
    font-size: 9px !important;
    letter-spacing: 6px !important;
  }

  .site-btn--header {
    min-height: 44px !important;
    padding: 12px 18px !important;

    font-size: 13px !important;
  }

  .site-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;

    padding-bottom: 4px !important;

    scrollbar-width: none !important;
  }

  .site-nav::-webkit-scrollbar {
    display: none !important;
  }

}

/* =====================================================
   END rhino — HEADER FINAL STRUCTURE
===================================================== */
/* =====================================================
   rhino — LEGAL PAGES
   Cookies / Privacy / Terms / Responsible Gambling
===================================================== */

.rhino-legal {
  width: min(1180px, calc(100vw - 64px)) !important;
  max-width: none !important;

  margin: 80px auto 0 !important;
  padding: 0 28px 80px !important;

  color: #ffffff !important;
}

.rhino-legal * {
  box-sizing: border-box !important;
}

.rhino-legal-heading {
  margin-bottom: 26px !important;
  padding: 34px !important;

  background:
    radial-gradient(circle at 92% 12%, rgba(142, 232, 95, 0.14), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(237, 205, 118, 0.10), transparent 38%),
    linear-gradient(135deg, rgba(12, 25, 18, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(142, 232, 95, 0.18) !important;
  border-radius: 28px !important;

  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.rhino-legal-kicker {
  margin: 0 0 12px !important;

  color: var(--gold) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

.rhino-legal-heading h1 {
  margin: 0 0 14px !important;

  color: #ffffff !important;

  font-size: clamp(44px, 4.4vw, 74px) !important;
  font-weight: 950 !important;
  line-height: 1.03 !important;
  letter-spacing: -1.6px !important;
}

.rhino-legal-heading p:last-child {
  margin: 0 !important;

  color: rgba(255, 255, 255, 0.84) !important;

  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.58 !important;
}

.rhino-legal-body {
  display: grid !important;
  gap: 16px !important;
}

.rhino-legal-body section {
  padding: 26px !important;

  background:
    linear-gradient(145deg, rgba(12, 24, 18, 0.98), rgba(5, 12, 9, 0.98)) !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 22px !important;

  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22) !important;
}

.rhino-legal-body h2 {
  margin: 0 0 12px !important;

  color: #ffffff !important;

  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.5px !important;
}

.rhino-legal-body p {
  margin: 0 0 12px !important;

  color: rgba(255, 255, 255, 0.82) !important;

  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.68 !important;
}

.rhino-legal-body p:last-child {
  margin-bottom: 0 !important;
}

.rhino-legal-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;

  margin-top: 18px !important;
}

.rhino-legal-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;

  padding: 12px 18px !important;

  color: #061008 !important;
  background: var(--green) !important;

  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.rhino-legal-links a:nth-child(n + 2) {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.055) !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

@media (max-width: 680px) {
  .rhino-legal {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .rhino-legal-heading,
  .rhino-legal-body section {
    padding: 22px !important;
  }

  .rhino-legal-links a {
    width: 100% !important;
  }
}

/* =====================================================
   END rhino — LEGAL PAGES
===================================================== */

/* =========================================================
   START RHINO ACCOUNT — PRACTICAL PROTECTION FIX
========================================================= */

.rhino-account .rhino-account-protection {
  display: block !important;

  width: 100% !important;

  margin: 54px 0 0 !important;
  padding: 28px !important;

  border: 1px solid rgba(216, 196, 93, 0.13) !important;
  border-radius: 22px !important;

  background:
    linear-gradient(
      135deg,
      rgba(216, 196, 93, 0.024),
      rgba(255, 255, 255, 0.004)
    ) !important;
}


/* ---------------------------------------------------------
   HEADER — ONE NORMAL HORIZONTAL ROW
--------------------------------------------------------- */

.rhino-account .rhino-account-protection-head {
  display: flex !important;

  width: 100% !important;

  align-items: flex-end !important;
  justify-content: space-between !important;

  gap: 60px !important;

  margin: 0 0 24px !important;
  padding: 0 !important;
}

.rhino-account .rhino-account-protection-head > div {
  flex: 0 1 620px !important;
  width: auto !important;
  max-width: 620px !important;
}

.rhino-account .rhino-account-protection-head > p {
  flex: 0 1 620px !important;

  width: auto !important;
  max-width: 620px !important;

  margin: 0 !important;

  color: rgba(255, 255, 255, 0.70) !important;

  font-size: 14px !important;
  line-height: 1.65 !important;
}

.rhino-account .rhino-account-protection-head h3 {
  width: auto !important;
  max-width: 620px !important;

  margin: 0 !important;

  color: #ffffff !important;

  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
}


/* ---------------------------------------------------------
   THREE CARDS — STRICTLY ONE HORIZONTAL ROW
--------------------------------------------------------- */

.rhino-account .rhino-account-protection-grid {
  display: grid !important;

  width: 100% !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 14px !important;

  align-items: stretch !important;
}

.rhino-account .rhino-account-protection-grid article {
  display: grid !important;

  grid-template-columns: 42px minmax(0, 1fr) !important;

  gap: 14px !important;
  align-items: start !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 170px !important;

  margin: 0 !important;
  padding: 22px !important;

  border: 1px solid rgba(126, 255, 79, 0.11) !important;
  border-radius: 16px !important;

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    ) !important;

  box-shadow: none !important;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.rhino-account .rhino-account-protection-mark {
  display: block !important;

  width: 38px !important;
  height: 38px !important;

  margin: 0 !important;

  border: 1px solid rgba(126, 255, 79, 0.27) !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(126, 255, 79, 0.22),
      rgba(126, 255, 79, 0.035)
    ) !important;
}


/* ---------------------------------------------------------
   CARD COPY
--------------------------------------------------------- */

.rhino-account .rhino-account-protection-grid article > div {
  min-width: 0 !important;
}

.rhino-account .rhino-account-protection-grid h4 {
  width: auto !important;

  margin: 0 0 9px !important;

  color: #ffffff !important;

  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.rhino-account .rhino-account-protection-grid p {
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;

  color: rgba(255, 255, 255, 0.70) !important;

  font-size: 13px !important;
  line-height: 1.58 !important;
}


/* ---------------------------------------------------------
   REMOVE OLD PROTECTION RULES
--------------------------------------------------------- */

.rhino-account .rhino-account-protection-main {
  grid-column: auto !important;
}

.rhino-account .rhino-account-protection article {
  grid-column: auto !important;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 980px) {

  .rhino-account .rhino-account-protection-head {
    display: block !important;
  }

  .rhino-account .rhino-account-protection-head > div {
    max-width: 100% !important;
  }

  .rhino-account .rhino-account-protection-head > p {
    max-width: 100% !important;
    margin-top: 14px !important;
  }

  .rhino-account .rhino-account-protection-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 720px) {

  .rhino-account .rhino-account-protection {
    padding: 22px !important;
  }

  .rhino-account .rhino-account-protection-grid {
    grid-template-columns: 1fr !important;
  }

}

/* =========================================================
   END RHINO ACCOUNT — PRACTICAL PROTECTION FIX
========================================================= */

/* =========================================================
   START RHINO — MOBILE + ABOUT LAYOUT FIX
========================================================= */


/* =========================================================
   MOBILE — SIMPLE ROUTINE
========================================================= */

.rhino-mobile .rhino-mobile-routine {
  display: block !important;

  width: 100% !important;

  margin: 54px 0 0 !important;
  padding: 30px !important;

  border: 1px solid rgba(126, 255, 79, 0.14) !important;
  border-radius: 22px !important;

  background:
    linear-gradient(
      135deg,
      rgba(126, 255, 79, 0.025),
      rgba(255, 255, 255, 0.004)
    ) !important;
}


/* Header in one clean horizontal row */

.rhino-mobile .rhino-mobile-routine-copy {
  display: grid !important;

  grid-template-columns:
    minmax(320px, 0.85fr)
    minmax(0, 1.15fr) !important;

  column-gap: 48px !important;
  align-items: end !important;

  width: 100% !important;

  margin: 0 0 24px !important;
  padding: 0 !important;
}

.rhino-mobile .rhino-mobile-routine-copy .rhino-mobile-kicker {
  grid-column: 1 !important;

  margin: 0 0 8px !important;
}

.rhino-mobile .rhino-mobile-routine-copy h3 {
  grid-column: 1 !important;

  width: auto !important;
  max-width: 620px !important;

  margin: 0 !important;

  color: #ffffff !important;

  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
}

.rhino-mobile .rhino-mobile-routine-copy > p:last-child {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;

  align-self: end !important;

  width: auto !important;
  max-width: 720px !important;

  margin: 0 !important;

  color: rgba(255, 255, 255, 0.70) !important;

  font-size: 14px !important;
  line-height: 1.65 !important;
}


/* Four steps in ONE horizontal row */

.rhino-mobile .rhino-mobile-routine-grid {
  display: grid !important;

  width: 100% !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 14px !important;

  align-items: stretch !important;
}

.rhino-mobile .rhino-mobile-routine-grid article {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 190px !important;

  margin: 0 !important;
  padding: 21px !important;

  border: 1px solid rgba(126, 255, 79, 0.11) !important;
  border-radius: 16px !important;

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    ) !important;
}

.rhino-mobile .rhino-mobile-routine-grid article > span {
  display: block !important;

  margin: 0 0 10px !important;

  color: #d8c45d !important;

  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.rhino-mobile .rhino-mobile-routine-grid strong {
  display: block !important;

  margin: 0 0 9px !important;

  color: #7cff4f !important;

  font-size: 16px !important;
  line-height: 1.2 !important;
}

.rhino-mobile .rhino-mobile-routine-grid p {
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;

  color: rgba(255, 255, 255, 0.70) !important;

  font-size: 13px !important;
  line-height: 1.58 !important;
}


/* Mobile recommendations */

.rhino-mobile .rhino-mobile-more {
  width: 100% !important;

  margin: 22px 0 0 !important;
}

.rhino-mobile .rhino-mobile-more-grid {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 14px !important;
}

.rhino-mobile .rhino-mobile-more-grid article {
  width: 100% !important;
  min-width: 0 !important;
}


/* =========================================================
   ABOUT — FULL WIDTH NORMAL STRUCTURE
========================================================= */

.rhino-about {
  width: 100% !important;

  padding-left: 24px !important;
  padding-right: 24px !important;
}

.rhino-about .rhino-about-shell {
  width: min(1296px, calc(100% - 48px)) !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   ABOUT HERO
========================================================= */

.rhino-about .rhino-about-hero {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(390px, 0.72fr) !important;

  gap: 40px !important;
  align-items: center !important;

  width: 100% !important;

  padding: 34px 38px !important;
}

.rhino-about .rhino-about-copy {
  width: auto !important;
  max-width: none !important;
}

.rhino-about .rhino-about-visual {
  width: 100% !important;

  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rhino-about .rhino-about-visual img {
  display: block !important;

  width: min(520px, 100%) !important;
  height: auto !important;

  object-fit: contain !important;
}


/* =========================================================
   ABOUT — MAIN STRENGTHS
========================================================= */

.rhino-about .rhino-about-pillars {
  display: block !important;

  width: 100% !important;

  margin: 54px 0 0 !important;
}


/* Header becomes horizontal */

.rhino-about .rhino-about-section-head {
  display: grid !important;

  grid-template-columns:
    minmax(320px, 0.8fr)
    minmax(0, 1.2fr) !important;

  gap: 48px !important;
  align-items: end !important;

  width: 100% !important;

  margin: 0 0 24px !important;
  padding: 0 !important;
}

.rhino-about .rhino-about-section-head > div {
  width: auto !important;
  max-width: none !important;
}

.rhino-about .rhino-about-section-head h3 {
  width: auto !important;
  max-width: 620px !important;

  margin: 0 !important;

  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.04 !important;
}

.rhino-about .rhino-about-section-head > p {
  width: auto !important;
  max-width: 720px !important;

  margin: 0 !important;

  font-size: 14px !important;
  line-height: 1.65 !important;
}


/* THIS removes the horrible vertical tower */

.rhino-about .rhino-about-pillar-grid {
  display: grid !important;

  width: 100% !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 14px !important;

  align-items: stretch !important;
}

.rhino-about .rhino-about-pillar-grid article {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 230px !important;

  margin: 0 !important;
  padding: 22px !important;

  border: 1px solid rgba(126, 255, 79, 0.11) !important;
  border-radius: 17px !important;

  background:
    linear-gradient(
      180deg,
      #0b120d 0%,
      #071009 100%
    ) !important;
}

.rhino-about .rhino-about-pillar-grid article > span {
  display: block !important;

  margin: 0 0 10px !important;

  color: #d8c45d !important;

  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.rhino-about .rhino-about-pillar-grid h3 {
  width: auto !important;

  margin: 0 0 10px !important;

  color: #ffffff !important;

  font-size: 18px !important;
  line-height: 1.18 !important;
}

.rhino-about .rhino-about-pillar-grid p {
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;

  color: rgba(255, 255, 255, 0.70) !important;

  font-size: 13px !important;
  line-height: 1.58 !important;
}


/* =========================================================
   ABOUT — EACH SECTION HAS ITS OWN LOGIC
========================================================= */

.rhino-about .rhino-about-balance {
  display: block !important;

  width: 100% !important;

  margin: 54px 0 0 !important;
  padding: 30px !important;

  border: 1px solid rgba(216, 196, 93, 0.13) !important;
  border-radius: 22px !important;
}

.rhino-about .rhino-about-balance-copy {
  display: grid !important;

  grid-template-columns:
    minmax(330px, 0.8fr)
    minmax(0, 1.2fr) !important;

  gap: 46px !important;
  align-items: end !important;

  width: 100% !important;

  margin: 0 0 24px !important;
}

.rhino-about .rhino-about-balance-copy .rhino-about-kicker {
  grid-column: 1 !important;
}

.rhino-about .rhino-about-balance-copy h3 {
  grid-column: 1 !important;

  width: auto !important;
  max-width: 580px !important;

  margin: 0 !important;

  font-size: clamp(29px, 3vw, 42px) !important;
  line-height: 1.04 !important;
}

.rhino-about .rhino-about-balance-copy > p:last-child {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;

  align-self: end !important;

  width: auto !important;
  max-width: 720px !important;

  margin: 0 !important;

  font-size: 14px !important;
  line-height: 1.65 !important;
}

.rhino-about .rhino-about-balance-grid {
  display: grid !important;

  width: 100% !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 12px !important;
}

.rhino-about .rhino-about-balance-grid article {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 150px !important;

  margin: 0 !important;
  padding: 19px !important;

  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;

  background:
    rgba(255, 255, 255, 0.018) !important;
}

.rhino-about .rhino-about-balance-grid strong {
  display: block !important;

  margin: 0 0 8px !important;

  color: #7cff4f !important;

  font-size: 15px !important;
}

.rhino-about .rhino-about-balance-grid p {
  width: auto !important;

  margin: 0 !important;

  font-size: 12px !important;
  line-height: 1.55 !important;
}


/* =========================================================
   ABOUT MORE
========================================================= */

.rhino-about .rhino-about-more {
  width: 100% !important;

  margin: 22px 0 0 !important;
}

.rhino-about .rhino-about-more-grid {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 12px !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .rhino-about .rhino-about-pillar-grid,
  .rhino-about .rhino-about-balance-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .rhino-mobile .rhino-mobile-routine-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .rhino-mobile .rhino-mobile-more-grid,
  .rhino-about .rhino-about-more-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


@media (max-width: 820px) {

  .rhino-mobile .rhino-mobile-routine-copy,
  .rhino-about .rhino-about-section-head,
  .rhino-about .rhino-about-balance-copy,
  .rhino-about .rhino-about-hero {
    grid-template-columns: 1fr !important;
  }

  .rhino-mobile .rhino-mobile-routine-copy > p:last-child,
  .rhino-about .rhino-about-balance-copy > p:last-child {
    grid-column: 1 !important;
    grid-row: auto !important;

    margin-top: 14px !important;
  }

}


@media (max-width: 620px) {

  .rhino-mobile .rhino-mobile-routine-grid,
  .rhino-mobile .rhino-mobile-more-grid,
  .rhino-about .rhino-about-pillar-grid,
  .rhino-about .rhino-about-balance-grid,
  .rhino-about .rhino-about-more-grid {
    grid-template-columns: 1fr !important;
  }

  .rhino-about .rhino-about-shell {
    width: 100% !important;
  }

}


/* =========================================================
   END RHINO — MOBILE + ABOUT LAYOUT FIX
========================================================= */
/* =========================================================
   START RHINO ABOUT — FINAL HERO LAYOUT FIX
   APPEND TO THE END OF style.css
========================================================= */

.rhino-about .rhino-about-hero {
  display: block !important;
  width: 100% !important;

  padding: 38px 40px 34px !important;
}


/* TOP: TEXT LEFT + IMAGE RIGHT */

.rhino-about .rhino-about-hero-top {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(360px, 0.65fr) !important;

  gap: 42px !important;
  align-items: start !important;

  width: 100% !important;
}

.rhino-about .rhino-about-copy {
  width: 100% !important;
  max-width: none !important;
}

.rhino-about .rhino-about-copy h2 {
  max-width: 760px !important;
  margin: 0 0 20px !important;
}

.rhino-about .rhino-about-copy > p {
  max-width: 760px !important;

  margin: 0 0 14px !important;

  font-size: 15px !important;
  line-height: 1.7 !important;
}


/* IMAGE IS ACTUALLY AT THE TOP */

.rhino-about .rhino-about-visual {
  align-self: start !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 16px !important;

  border: 1px solid rgba(216, 196, 93, 0.16) !important;
  border-radius: 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(216, 196, 93, 0.05),
      rgba(126, 255, 79, 0.015),
      rgba(255, 255, 255, 0.006)
    ) !important;
}

.rhino-about .rhino-about-visual img {
  display: block !important;

  width: 100% !important;
  max-width: 470px !important;
  height: auto !important;

  margin: 0 !important;

  object-fit: contain !important;
}


/* TEXT CONTINUES BELOW THE IMAGE */

.rhino-about .rhino-about-hero-bottom {
  display: block !important;

  width: 100% !important;

  margin-top: 24px !important;
}

.rhino-about .rhino-about-hero-bottom > p {
  width: 100% !important;
  max-width: none !important;

  margin: 0 0 13px !important;

  color: rgba(255, 255, 255, 0.70) !important;

  font-size: 15px !important;
  line-height: 1.7 !important;
}

.rhino-about .rhino-about-actions {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 10px !important;
  margin-top: 22px !important;
}


/* TABLET */

@media (max-width: 900px) {

  .rhino-about .rhino-about-hero-top {
    grid-template-columns: 1fr !important;
  }

  .rhino-about .rhino-about-visual {
    max-width: 560px !important;
    margin: 0 auto !important;
  }

}


/* MOBILE */

@media (max-width: 620px) {

  .rhino-about .rhino-about-hero {
    padding: 24px !important;
  }

}

/* =========================================================
   END RHINO ABOUT — FINAL HERO LAYOUT FIX
========================================================= */
/* =========================================================
   START RHINO LEGAL PAGES — FINAL
   Terms / Privacy / Responsible Gambling / Cookies
========================================================= */

.rhino-legal-page {
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(126, 255, 79, 0.055),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 35%,
      rgba(216, 196, 93, 0.035),
      transparent 30%
    ),
    #050908;

  color: #ffffff;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.rhino-legal-main {
  width: 100%;

  padding: 64px 24px 90px;
}

.rhino-legal-shell {
  width: min(1320px, calc(100% - 48px));

  margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.rhino-legal-hero {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.85fr)
    minmax(0, 1.15fr);

  gap: 56px;

  align-items: end;

  margin-bottom: 32px;
  padding: 38px 42px;

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(126, 255, 79, 0.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(216, 196, 93, 0.08),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(11, 25, 17, 0.98),
      rgba(5, 12, 9, 0.98)
    );

  border: 1px solid rgba(126, 255, 79, 0.17);
  border-radius: 26px;

  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.rhino-legal-kicker {
  margin: 0 0 12px;

  color: #d8c45d;

  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;

  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.rhino-legal-hero h1 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(42px, 4.5vw, 68px);
  font-weight: 900;
  line-height: 1;

  letter-spacing: -0.045em;
}

.rhino-legal-hero-copy {
  display: grid;

  gap: 16px;
}

.rhino-legal-hero-copy > p {
  margin: 0;

  color: rgba(255, 255, 255, 0.76);

  font-size: 16px;
  line-height: 1.68;
}

.rhino-legal-updated {
  display: inline-flex;

  width: fit-content;

  padding: 8px 12px;

  color: #89f45a;

  background: rgba(126, 255, 79, 0.055);

  border: 1px solid rgba(126, 255, 79, 0.15);
  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;
}


/* =========================================================
   TWO COLUMN LEGAL LAYOUT
========================================================= */

.rhino-legal-layout {
  display: grid;

  grid-template-columns:
    260px
    minmax(0, 1fr);

  gap: 26px;

  align-items: start;
}


/* =========================================================
   TABLE OF CONTENTS
========================================================= */

.rhino-legal-toc {
  position: sticky;

  top: 112px;

  display: grid;

  gap: 8px;

  padding: 20px;

  background:
    linear-gradient(
      180deg,
      rgba(10, 20, 14, 0.98),
      rgba(5, 11, 8, 0.98)
    );

  border: 1px solid rgba(126, 255, 79, 0.14);
  border-radius: 18px;

  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.22);
}

.rhino-legal-toc h2 {
  margin: 0 0 8px;

  color: #d8c45d;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rhino-legal-toc a {
  display: block;

  padding: 10px 11px;

  color: rgba(255, 255, 255, 0.72);

  border: 1px solid transparent;
  border-radius: 10px;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;

  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.rhino-legal-toc a:hover {
  color: #081006;

  background: #7cff4f;

  border-color: #7cff4f;
}


/* =========================================================
   CONTENT
========================================================= */

.rhino-legal-content {
  display: grid;

  gap: 18px;
}

.rhino-legal-content > section {
  padding: 28px 30px;

  background:
    linear-gradient(
      180deg,
      rgba(11, 18, 14, 0.98),
      rgba(6, 11, 9, 0.98)
    );

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.18);
}

.rhino-legal-content > section:hover {
  border-color: rgba(126, 255, 79, 0.16);
}

.rhino-legal-section-label {
  margin: 0 0 8px !important;

  color: #d8c45d !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;

  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.rhino-legal-content h2 {
  margin: 0 0 14px;

  color: #ffffff;

  font-size: clamp(25px, 2.3vw, 34px);
  font-weight: 900;
  line-height: 1.12;

  letter-spacing: -0.025em;
}

.rhino-legal-content h3 {
  margin: 24px 0 10px;

  color: #ffffff;

  font-size: 19px;
  font-weight: 850;
  line-height: 1.25;
}

.rhino-legal-content p {
  margin: 0 0 13px;

  color: rgba(255, 255, 255, 0.74);

  font-size: 15px;
  line-height: 1.68;
}

.rhino-legal-content p:last-child {
  margin-bottom: 0;
}

.rhino-legal-content ul {
  margin: 16px 0 0;
  padding-left: 22px;
}

.rhino-legal-content li {
  margin: 0 0 10px;

  color: rgba(255, 255, 255, 0.74);

  font-size: 15px;
  line-height: 1.6;
}

.rhino-legal-content li::marker {
  color: #7cff4f;
}


/* =========================================================
   CALLOUT SECTION
========================================================= */

.rhino-legal-callout {
  border-color: rgba(126, 255, 79, 0.22) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(126, 255, 79, 0.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(11, 25, 16, 0.99),
      rgba(6, 13, 9, 0.99)
    ) !important;
}


/* =========================================================
   FACT CARDS
========================================================= */

.rhino-legal-facts {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-top: 22px;
}

.rhino-legal-facts > div {
  padding: 18px;

  background: rgba(255, 255, 255, 0.025);

  border: 1px solid rgba(126, 255, 79, 0.11);
  border-radius: 14px;
}

.rhino-legal-facts strong {
  display: block;

  margin-bottom: 7px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 850;
}

.rhino-legal-facts span {
  display: block;

  color: rgba(255, 255, 255, 0.66);

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   CHECKLIST
========================================================= */

.rhino-legal-checklist {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-top: 22px;
}

.rhino-legal-checklist > div {
  padding: 18px 19px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.026),
      rgba(255, 255, 255, 0.01)
    );

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.rhino-legal-checklist strong {
  display: block;

  margin-bottom: 7px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 850;
}

.rhino-legal-checklist p {
  margin: 0;

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   NOTE
========================================================= */

.rhino-legal-note {
  margin-top: 22px;
  padding: 18px 20px;

  background: rgba(216, 196, 93, 0.045);

  border: 1px solid rgba(216, 196, 93, 0.18);
  border-radius: 14px;
}

.rhino-legal-note strong {
  display: block;

  margin-bottom: 8px;

  color: #d8c45d;

  font-size: 14px;
  font-weight: 850;
}

.rhino-legal-note p {
  margin: 0;
}


/* =========================================================
   RELATED LINKS
========================================================= */

.rhino-legal-related {
  border-color: rgba(216, 196, 93, 0.14) !important;
}

.rhino-legal-related-links {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 18px;
}

.rhino-legal-related-links a {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 11px 16px;

  color: #071006;

  background: #7cff4f;

  border: 1px solid #7cff4f;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 850;

  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.rhino-legal-related-links a:hover {
  background: #ffffff;
  color: #071006;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .rhino-legal-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .rhino-legal-layout {
    grid-template-columns: 1fr;
  }

  .rhino-legal-toc {
    position: static;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .rhino-legal-toc h2 {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .rhino-legal-main {
    padding: 38px 14px 64px;
  }

  .rhino-legal-shell {
    width: 100%;
  }

  .rhino-legal-hero {
    padding: 24px;

    border-radius: 20px;
  }

  .rhino-legal-hero h1 {
    font-size: 40px;
  }

  .rhino-legal-toc {
    grid-template-columns: 1fr;
  }

  .rhino-legal-content > section {
    padding: 22px;

    border-radius: 16px;
  }

  .rhino-legal-facts,
  .rhino-legal-checklist {
    grid-template-columns: 1fr;
  }

  .rhino-legal-related-links a {
    width: 100%;
  }

}

/* =========================================================
   END RHINO LEGAL PAGES — FINAL
========================================================= */