/* JokaRoom Australia (jokaroomcasinos-au.com) - brand layer.
 *
 * GENERATED by _assets/pagegen/_derive_css_jkr.py from bri/brand-polish.css.
 * Edit the generator, never this file: the next run overwrites it.
 *
 * Loaded AFTER assets/css/main.min.css on every page. This build ships NO
 * theme.css: main.min.css is the only stylesheet, and it leaves the drop-down
 * panel commented out entirely - `.sub-menu` gets a bare `display:block` on
 * hover and no positioning at all, so a panel would push the header apart
 * rather than float over the page. Everything below therefore *implements* the
 * navigation rather than correcting an existing one.
 *
 * main.min.css declares most of its component colours without !important, so
 * plain specificity wins where it can; `html body` is used where the base sheet
 * is more specific or uses !important itself.
 *
 * THE PALETTE IS IN THE MARK. This builder's upload is not a colourless crop:
 * cropped-1-_1_-min.webp is a gold display serif reading JOKA, with the
 * joker's cap and mask standing inside the O and a white ROOM between two rules
 * below it. The pages currently trading under this name print the same gold -
 * #b98b00 and #b89d51 measured off two of them on 31 August 2026 - on a
 * near-black ground. The accent #d9b451 is that gold opened one step, where it
 * still holds as a one-pixel rule and as 11px type on a dark ground.
 *
 * WHICH COLOUR MEANS WHAT is the decision the file does not make, and here it
 * is the editorial line itself. GOLD marks A CLAIM MADE BY AN ADDRESS WEARING
 * THIS NAME: a game count, a licensor, a payout window, a minimum deposit.
 * VIOLET #8b6ff2 marks WHAT AN INDEPENDENT RECORD RETURNS: the regulator's own
 * blocking list, a registry lookup, a file a reader can download and count for
 * themselves. Every page here is built on holding those two apart, so the pair
 * has to survive being one chart bar wide, and gold against violet is as far as
 * this palette goes. Blocking, refusal and prohibition are the rose #f04668,
 * and nothing else on the site wears it.
 *
 * Geo is read off the domain: `-australia.com`, so Australia, AUD written A$
 * with comma thousands, the ACMA as the enforcing authority under the
 * Interactive Gambling Act 2001, en-AU spelling and 18+. Nothing in this sheet
 * is currency-aware, but the palette notes above are the only place a sister
 * site's wording could have survived.
 *
 * Structure, markup and copy are untouched by this file.
 */

/* ========================================================== 1. palette == */
html body {
  --ink: #07080c;
  --bg:
    radial-gradient(720px 400px at 10% -6%, rgba(217, 180, 81, .16) 0%, rgba(217, 180, 81, .05) 40%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(660px 380px at 90% 4%, rgba(139, 111, 242, .18) 0%, rgba(139, 111, 242, .05) 44%, rgba(0, 0, 0, 0) 74%),
    radial-gradient(900px 620px at 50% 106%, rgba(217, 180, 81, .10) 0%, rgba(0, 0, 0, 0) 66%),
    linear-gradient(180deg, #1b1524 0%, #12101a 48%, #07080c 100%);
  --text: #f0eef6;
  --muted: #b3adc4;
  --card: #191627;
  --card2: #221e33;
  --border: rgba(217, 180, 81, .16);
  --border-strong: rgba(217, 180, 81, .38);
  --accent: #d9b451;
  --accent-lt: #f0dda2;
  --accent2: #8b6ff2;
  --accent2-lt: #c4b4fb;
  --amber: #8b6ff2;
  /* Green sits outside the three-colour scheme above and is used sparingly,
     for a state rather than for a source: a claim that a record confirms, a
     document accepted, a step that completes. It is rare on this site on
     purpose - most of what these pages check comes back unconfirmed rather than
     true or false - so a green bar is worth something when one appears. */
  --steel: #2fcf95;
  /* --accent2 marks what an independent record returns and --danger marks a
     block or a refusal, and the two must never share a hex. The single fact a
     reader of this site has to be able to see without reading is that the
     regulator asked Australian ISPs to block a site under this name, so the
     rose is kept for that class of statement and for nothing else. */
  --danger: #f04668;
  --btn-bg: linear-gradient(135deg, #f4e6b6 0%, #d9b451 46%, #97742a 100%);
  /* The gold carries dark lettering because it has to: white on #d9b451 is
     1.9:1 and cannot be read at button size, while a warm near-black is over
     9:1 on it. The mark itself does the same thing - JOKA is gold letterforms
     with the ground showing through, never a gold field with white on top. */
  --btnText: #1a1206;
  --btn-shadow: 0 0 0 1px rgba(240, 221, 162, .38), 0 10px 26px rgba(217, 180, 81, .24);
  --btn-shadow-hover: 0 0 0 1px rgba(240, 221, 162, .62), 0 12px 34px rgba(217, 180, 81, .4);
  --btn-bg2: linear-gradient(135deg, #a793f7 0%, #5b41c4 52%, #2c1d6b 100%);
  /* The secondary button keeps white lettering: #5b41c4 carries white at
     7.4:1, and a dark ink on a mid violet would read as disabled rather than as
     the alternative action. */
  --btnText2: #ffffff;
  --btn-shadow2: 0 0 0 1px rgba(139, 111, 242, .36), 0 10px 26px rgba(44, 29, 107, .42);
  --btn-shadow-hover2: 0 0 0 1px rgba(139, 111, 242, .6), 0 12px 34px rgba(44, 29, 107, .6);
  --radius: 14px;
  --shadow: 0 18px 46px rgba(0, 0, 0, .5), 0 0 0 1px rgba(217, 180, 81, .07);
  /* This lockup is ALREADY a high-contrast display serif: JOKA is set in a
     heavy roman with bracketed serifs and a strong thick-thin, and ROOM under
     it is spaced capitals between two rules. A transitional serif beside that
     reads as a second logo. The headings take a humanist SLAB instead - serif
     enough to part a heading from body copy, flat enough in its terminals not
     to compete with the mark two centimetres above it. Bookman Old Style ships
     with Windows and Office, Charter and Palatino with macOS, Noto Serif is the
     Android fallback; nothing is fetched. */
  --slab: "Bookman Old Style", Charter, "Palatino Linotype", Cambria, "Noto Serif", Georgia, serif;
}

/* ======================================================= 2. no motion == */
/* The single exception is the fortune wheel, which has to turn when Spin is
   pressed; its rule is restored further down. */
html body *,
html body *::before,
html body *::after {
  animation: none !important;
  transition: none !important;
}

html {
  scroll-behavior: auto !important;
}

/* ==================================================== 3. ground + type == */
html body {
  background: var(--bg) !important;
  background-attachment: fixed !important;
  color: var(--text) !important;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body .section-title,
html body .offer-title,
html body .text-title,
html body .author-title,
html body .faq-item-title,
html body .item__name {
  font-family: var(--slab) !important;
  color: var(--text) !important;
}

html body .section-title {
  position: relative;
  padding-bottom: 14px;
}

html body .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 76px;
  height: 2px;
  margin-left: -38px;
  background: linear-gradient(90deg, rgba(217, 180, 81, 0) 0%, var(--accent) 50%, rgba(217, 180, 81, 0) 100%);
}

html body a {
  color: var(--accent) !important;
}

html body a:hover {
  color: var(--accent-lt) !important;
}

html body p,
html body li,
html body .item__text,
html body .faq-item-answ,
html body .author-desc,
html body .offer-desc {
  color: var(--muted) !important;
}

html body .main-text-content p,
html body .main-text-content li {
  color: #e4e0ee !important;
  line-height: 1.72;
}

html body .main-text-content strong,
html body .main-text-content b {
  color: var(--text) !important;
}

/* ========================================================== 4. header == */
html body .header {
  background: linear-gradient(180deg, rgba(27, 21, 36, .97) 0%, rgba(7, 8, 12, .97) 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(217, 180, 81, .07), 0 10px 30px rgba(0, 0, 0, .4) !important;
}

/* The mark is a landscape lockup: an apricot hexagon with N knocked out of
   it, then NATIONAL over casino, 311x121, so 2.57:1. The brief's "~78px" figure
   was written for a square badge; at this proportion it would leave the
   lowercase second line about six pixels tall, so the size is set as a HEIGHT
   and the width follows the file - 34px tall is 87px wide, a sixteenth of a
   1440px header and well inside the one-sixth ceiling.

   There is no plate and none is possible. The N is a HOLE in the hexagon rather
   than a shape, so anything laid behind the mark shows through the letter: a
   The mark is the brand's OWN upload, cut by logo_jkr.py:
   cropped-1-_1_-min.webp is a gold JOKA over a white ROOM on a dark radial
   burst, and the burst is removed by a flood fill that starts at the border
   and stops at the ink, so the shading inside the letterforms survives. The
   gold is NOT re-inked - it is the identity. Nothing is drawn. The bloom
   underneath is that same gold. */
html body .header .custom-logo-link {
  width: auto !important;
  max-width: 76px !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
}

html body .header .custom-logo-link img {
  height: 34px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 9px rgba(217, 180, 81, .34));
}

/* Every band gives the mark a HEIGHT and a max-width that follows the file's
   own 1.97:1 proportion - 34px is 67px wide, 30px is 59px, 26px is 51px. The
   width limits below carry a few pixels of slack over those figures so that
   the height is always the binding constraint; setting a width without the
   matching height is exactly what squashes a lockup.

   At 1.97:1 the mark is never the element under pressure: 67px at 1440 is a
   twentieth of the header, well inside the brief's one-sixth ceiling, and even
   in the 1101-1319px band, where six drop-downs and both header buttons share
   the row with it, giving back eight pixels changes nothing. It steps down
   there anyway because the row is genuinely tight at 1101px. Below 700px the
   ROOM line is about a third of the total height, so 26px is the floor before
   those four letters stop being letters. */
@media (min-width: 1101px) and (max-width: 1319px) {
  html body .header .custom-logo-link {
    max-width: 64px !important;
  }

  html body .header .custom-logo-link img {
    height: 30px !important;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  html body .header .custom-logo-link {
    max-width: 76px !important;
  }

  html body .header .custom-logo-link img {
    height: 34px !important;
  }
}

@media (max-width: 700px) {
  html body .header .custom-logo-link {
    max-width: 56px !important;
  }

  html body .header .custom-logo-link img {
    height: 26px !important;
  }
}

html body .footer .custom-logo-link {
  width: auto !important;
  max-width: 96px !important;
  line-height: 0 !important;
  display: inline-block !important;
}

html body .footer .custom-logo-link img,
html body .footer .custom-logo {
  height: 44px !important;
  width: auto !important;
  display: block !important;
  filter: drop-shadow(0 2px 10px rgba(217, 180, 81, .3)) !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* ============================================== 5. desktop navigation == */
/* main.min.css has the whole `.sub-menu` block commented out and keeps only
   `.header .menu .menu-item-has-children:hover .sub-menu { display: block }`.
   Everything a floating panel needs — position, ground, the hover bridge — is
   declared here for the first time. */
@media (min-width: 1101px) {
  html body .header .nav {
    flex: 1 1 auto;
    min-width: 0;
  }

  html body .header .nav > .menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }

  html body .header .nav > .menu > li {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    /* The hover bridge goes on EVERY top-level item, parent or not: giving
       half the row a different box is what drops the arrowed items below the
       plain ones by a few pixels. */
    padding-bottom: 16px !important;
    margin-bottom: -16px !important;
  }

  html body .header .nav > .menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    padding: 8px 13px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    border-radius: 9px !important;
    color: var(--text) !important;
    opacity: 1 !important;
  }

  html body .header .nav > .menu > li > a:hover {
    color: var(--accent) !important;
    background: rgba(217, 180, 81, .10) !important;
    opacity: 1 !important;
  }

  /* The arrow is an icon-font glyph with its own metrics; without an explicit
     size and line-height it inflates the anchor's line box and pulls the text
     of the parent items below their neighbours. */
  html body .header .menu .menu-item-has-children > a::after {
    font-size: 12px !important;
    line-height: 1 !important;
    margin-left: 7px !important;
    color: var(--accent) !important;
    vertical-align: baseline !important;
  }

  /* main.min.css ends with a late dark-theme block whose
     `.header .menu-item-has-children .sub-menu` rule is three classes and
     !important — one class more specific than `html body .header .sub-menu`,
     so a shorter selector here loses and the panel keeps its slate-blue
     gradient on an otherwise near-black header. Matching its shape is the fix. */
  html body .header .menu-item-has-children .sub-menu {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 236px !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 8px !important;
    list-style: none !important;
    z-index: 9999 !important;
    background: linear-gradient(180deg, #221e33 0%, #1b1728 100%) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .6) !important;
  }

  html body .header .menu-item-has-children:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* A transparent strip that keeps :hover alive while the cursor travels from
     the parent item down into the panel. It reaches 20px above the panel and
     18px into it: the panel's own 12px corner radius makes its top-left and
     top-right pixels un-hittable, and a cursor travelling straight down the
     centre of a narrow menu item lands exactly on that dead corner. Covering
     the top band with a square pseudo-element removes the gap entirely. */
  html body .header .sub-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -20px !important;
    left: 0 !important;
    right: 0 !important;
    height: 38px !important;
    background: transparent !important;
  }

  html body .header .sub-menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .header .sub-menu li a {
    display: block !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    text-align: left !important;
    color: #e4e0ee !important;
    opacity: 1 !important;
  }

  html body .header .sub-menu li a:hover {
    background: rgba(217, 180, 81, .13) !important;
    color: var(--accent-lt) !important;
    opacity: 1 !important;
  }

  /* The two right-hand clusters open leftwards so a centred panel never
     leaves the viewport. */
  html body .header .nav > .menu > li:nth-last-child(-n+3) > .sub-menu {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) !important;
  }
}

/* Between 992 and 1200 the badge, six menu items and two buttons share one
   row, so the row tightens rather than wrapping. */
@media (min-width: 1101px) and (max-width: 1319px) {
  /* The logo's own squeeze rule lives with the rest of the logo, in section 4;
     what tightens here is the menu around it. */
  html body .header .nav > .menu {
    gap: 6px !important;
  }

  html body .header .nav > .menu > li > a {
    padding: 8px 7px !important;
    font-size: 13px !important;
  }

  html body .header-btns .btn {
    min-width: 90px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }
}

/* ================================================== 6. mobile drawer === */
@media (max-width: 1100px) {
  html body .mobile-wrap {
    background: linear-gradient(180deg, #1b1524 0%, #07080c 100%) !important;
    border-right: 1px solid var(--border) !important;
  }

  html body .mobile-wrap .menu li {
    margin-right: 0 !important;
    width: 100% !important;
  }

  html body .mobile-wrap .menu > li {
    margin-bottom: 0 !important;
  }

  html body .mobile-wrap .menu > li > a {
    font-family: var(--slab) !important;
    font-size: 16px !important;
    padding: 12px 55px 12px 4px !important;
    display: block !important;
    position: relative !important;
    border-bottom: 1px solid rgba(217, 180, 81, .10) !important;
  }

  /* The arrow is an absolutely positioned target inside the last 55px of the
     link, which is the strip the builder's own click handler watches. */
  html body .mobile-wrap .menu-item-has-children > a::after {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin-left: 0 !important;
    color: var(--accent) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 50% !important;
  }

  html body .mobile-wrap .menu-item-has-children.active > a::after {
    transform: translateY(-50%) rotate(180deg) !important;
  }

  /* Closed by default, opened only by .active. Forcing display:block on the
     panel itself is what makes the arrow look dead. */
  html body .mobile-wrap .menu-item-has-children > .sub-menu {
    display: none !important;
    margin-top: 0 !important;
    padding: 4px 0 10px 14px !important;
    border-left: 1px solid rgba(217, 180, 81, .2) !important;
    margin-left: 6px !important;
  }

  html body .mobile-wrap .menu-item-has-children.active > .sub-menu {
    display: block !important;
  }

  html body .mobile-wrap .menu > li .sub-menu li {
    margin-bottom: 0 !important;
  }

  html body .mobile-wrap .sub-menu li a {
    display: block !important;
    padding: 9px 6px !important;
    font-size: 14px !important;
    color: #e4e0ee !important;
  }
}

/* ========================================================= 7. buttons == */
html body .btn,
html body .bonus-btn,
html body .offer-btn,
html body .cookie-btn,
html body .fixed-bar-btn,
html body .wheel-modal-btn,
html body .login-form-submit {
  font-family: Roboto, "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .015em !important;
  white-space: nowrap !important;
  border-radius: 10px !important;
  border: 0 !important;
  text-align: center !important;
}

html body .btn,
html body .btn.btn-green,
html body .btn-green,
html body .bonus-btn,
html body .bonus-btn.btn-green,
html body .offer-btn,
html body .btn.offer-btn,
html body .cookie-btn,
html body .wheel-modal-btn,
html body .login-form-submit,
html body .header-btns .btn:nth-child(2) {
  background: var(--btn-bg) !important;
  background-image: var(--btn-bg) !important;
  background-color: transparent !important;
  color: var(--btnText) !important;
  box-shadow: var(--btn-shadow) !important;
}

html body .btn:hover,
html body .btn.btn-green:hover,
html body .btn-green:hover,
html body .bonus-btn:hover,
html body .offer-btn:hover,
html body .cookie-btn:hover,
html body .wheel-modal-btn:hover,
html body .login-form-submit:hover,
html body .header-btns .btn:nth-child(2):hover {
  filter: brightness(1.07) !important;
  box-shadow: var(--btn-shadow-hover) !important;
}

html body .btn-red,
html body .btn.btn-red,
html body .btn-blue,
html body .btn-orange,
html body .fixed-bar-btn,
html body .header-btns .btn:nth-child(1) {
  background: var(--btn-bg2) !important;
  background-image: var(--btn-bg2) !important;
  background-color: transparent !important;
  color: var(--btnText2) !important;
  box-shadow: var(--btn-shadow2) !important;
}

html body .btn-red:hover,
html body .fixed-bar-btn:hover,
html body .header-btns .btn:nth-child(1):hover {
  filter: brightness(1.07) !important;
  box-shadow: var(--btn-shadow-hover2) !important;
}

/* main.min.css pins every .btn to width:110px, which clips "Registration".
   A floor plus auto width lets the label decide. */
html body .header-btns {
  flex: 0 0 auto !important;
  align-items: center !important;
}

html body .header-btns .btn {
  width: auto !important;
  min-width: 106px !important;
  flex: 0 0 auto !important;
  padding: 0 16px !important;
  height: 40px !important;
  line-height: 40px !important;
}

html body .offer-btns .btn {
  width: auto !important;
  min-width: 168px !important;
  height: 50px !important;
  line-height: 50px !important;
  font-size: 16px !important;
  padding: 0 26px !important;
}

/* ==================================================== 8. banner + wheel == */
html body .banner,
html body .banner.main-banner {
  background: linear-gradient(150deg, #221e33 0%, #16121f 56%, #14111e 100%) !important;
  background-color: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow) !important;
}

html body .banner .offer-title {
  color: var(--accent-lt) !important;
  text-shadow: 0 2px 18px rgba(217, 180, 81, .3);
}

html body .banner .offer-desc {
  color: #e4e0ee !important;
  font-size: 17px !important;
}

html body .banner-img img {
  border-radius: 16px !important;
}

html body .wheel-btn-text {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .8) !important;
}

html body .wheel-btn-inner img {
  filter: brightness(.7) saturate(.6) drop-shadow(0 0 16px rgba(217, 180, 81, .45));
}

html body .wheel-container {
  filter: drop-shadow(0 0 26px rgba(139, 111, 242, .24));
}

/* main.min.css paints the wheel as an eight-colour rainbow that belongs to no
   brand. Gold and blue sectors alternating with the site's own near-black; the
   geometry, sector count and text positions are untouched, and the Spin
   lettering stays white with a dark shadow whatever the rim does. */
html body .wheel-circle-inner {
  background: conic-gradient(from -22.5deg,
      #f0dda2 0deg, #d9b451 45deg,
      #191627 45deg, #14111e 90deg,
      #c4b4fb 90deg, #5b41c4 135deg,
      #191627 135deg, #14111e 180deg,
      #ecd694 180deg, #8b6ff2 225deg,
      #191627 225deg, #14111e 270deg,
      #8b6ff2 270deg, #2c1d6b 315deg,
      #191627 315deg, #14111e 360deg) !important;
}

html body .wheel-circle {
  background:
    linear-gradient(transparent, transparent) padding-box,
    conic-gradient(from 0deg, #d9b451, #8b6ff2, #8b6ff2, #f0dda2, #d9b451) border-box !important;
}

html body .wheel-image > img {
  filter: brightness(.5) saturate(.4) sepia(.4) hue-rotate(10deg) !important;
}

html body .wheel-sector-text {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9) !important;
}

/* The one motion the brief keeps: the wheel must turn on Spin. */
@media (prefers-reduced-motion: no-preference) {
  html body .wheel-body.active {
    animation: wheel-rotate 5s cubic-bezier(.16, .84, .28, 1) forwards !important;
  }
}

/* ========================================================== 9. cards === */
html body .page-item,
html body .main-text-wrap,
html body .inner,
html body .faq-item,
html body .reviews-item .inner,
html body .bonus-item,
html body .advant .item {
  background: linear-gradient(180deg, #221e33 0%, #191627 100%) !important;
  background-color: transparent !important;
  background-image: linear-gradient(180deg, #221e33 0%, #191627 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

html body .bonus-item:hover,
html body .faq-item:hover {
  border-color: var(--border-strong) !important;
}

/* Bonus cards: the text column gives up the space, the button never does, so
   six different calls to action line up down the right-hand edge.

   The row must NOT wrap above the phone breakpoint. With `flex-wrap: wrap` the
   button drops to a second line the moment the copy is long enough to need it —
   which is exactly what the three longest cards do — and it lands on the LEFT,
   under the icon, breaking the column of buttons the block is built around.
   Nowrap plus a text column that is allowed to shrink (`flex: 1 1 auto;
   min-width: 0` below) is what keeps every button on the right; the phone
   layout stacks the card instead, in the `max-width: 767px` block. */
html body .bonus-item-content {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
}

html body .bonus-item-icon {
  flex: 0 0 auto !important;
  max-width: 84px !important;
  margin-right: 0 !important;
}

html body .bonus-item-icon img {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
}

html body .bonus-item-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  color: #e4e0ee !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

html body .bonus-item-text b,
html body .bonus-item-text strong {
  color: var(--accent-lt) !important;
  font-weight: 700 !important;
}

html body .bonus-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 168px !important;
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  /* Pins the button to the right edge even on the shortest card, where the
     text column does not fill the row on its own. */
  margin-left: auto !important;
}

@media (max-width: 767px) {
  html body .bonus-item-content {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  html body .bonus-item-icon {
    margin: 0 auto !important;
  }

  html body .bonus-item-text {
    text-align: center !important;
    margin: 0 auto !important;
  }

  html body .bonus-btn {
    width: 100% !important;
    max-width: 290px !important;
    margin: 0 auto !important;
    white-space: normal !important;
  }
}

/* ======================================================= 10. reviews === */
html body .reviews-item .item__img img {
  border-radius: 50% !important;
  border: 2px solid var(--border-strong) !important;
}

html body .reviews-item .item__name {
  color: var(--accent-lt) !important;
  font-size: 18px !important;
}

html body .reviews-item .item__text {
  color: #e4e0ee !important;
  line-height: 1.68 !important;
}

html body .reviews .slider-nav-item {
  color: var(--accent) !important;
}

/* The row itself is what overflows: the arrows sit at its ends with a negative
   offset that is fine at 1440 and two pixels too wide at 500. Clipping the row
   rather than repositioning the arrows keeps slick's own geometry intact. */
html body .reviews .slider-nav {
  max-width: 100% !important;
  overflow: hidden !important;
}

html body .reviews .slider-nav-dots .slick-dots li button:before {
  color: var(--accent) !important;
}

/* slick sizes each slide independently, so three reviews of different lengths
   leave a ragged row with three different card heights. The track becomes a
   flex row and each card fills its slide, which costs nothing and lines the
   block up — this site shows nine reviews rather than the builder's six, so
   the raggedness was three times as visible. */
html body .reviews-content.slick-initialized .slick-track {
  display: flex !important;
  align-items: stretch !important;
}

html body .reviews-content .slick-slide {
  height: auto !important;
}

html body .reviews-item,
html body .reviews-item .inner {
  height: 100% !important;
}

/* ================================================== 11. article body === */
html body .main-text-wrap {
  padding-top: 26px;
}

html body .breadcrumbs {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted) !important;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  overflow: hidden;
}

html body .breadcrumbs a {
  color: var(--accent) !important;
  white-space: nowrap;
  font-weight: 400 !important;
  text-decoration: none !important;
}

html body .breadcrumbs a:hover {
  color: var(--accent-lt) !important;
}

html body .breadcrumbs > span[aria-current] {
  color: var(--muted) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

html body .breadcrumbs .crumb-sep {
  margin: 0 9px;
  color: rgba(217, 180, 81, .45) !important;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  html body .breadcrumbs a:not(:first-child) {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
}

/* One compact line, label in the brand accent, dates in the body colour. No
   card, no border, no icon. */
html body .editorial-meta {
  font-size: 13px;
  color: var(--accent) !important;
  margin: 0 0 22px;
  line-height: 1.7;
}

html body .editorial-meta time {
  color: var(--text) !important;
  font-variant-numeric: tabular-nums;
}

html body .editorial-meta .meta-sep {
  color: rgba(217, 180, 81, .45) !important;
  margin: 0 8px;
}

html body .hero-widget {
  width: 100%;
  max-width: 440px;
  height: auto;
}

html body .chart-figure {
  margin: 30px 0;
}

html body .chart-figure svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
}

html body .chart-figure figcaption {
  font-size: 13px;
  color: var(--muted) !important;
  margin-top: 10px;
  line-height: 1.65;
}

html body .author-tip {
  margin: 0 !important;
}

html body .author-tip > span {
  display: block;
  padding: 18px 22px !important;
  background: linear-gradient(180deg, #221e33 0%, #191627 100%) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 10px !important;
  color: #e4e0ee !important;
}

html body .author-tip a {
  color: var(--accent) !important;
}

/* ======================================================== 12. tables == */
html body .table-scroll,
html body .table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  margin: 26px 0;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* The builder writes its own tables with `display:block; overflow-x:auto` on
   the table element, which takes thead and tbody out of the table formatting
   context so the header stops lining up with the body. The table is put back
   into one context here at every width; the scrolling lives on the wrapper the
   build adds around any table that did not already have one. */
html body .main-text-content table {
  display: table !important;
  width: 100% !important;
  background: #1b1728 !important;
  color: #e4e0ee !important;
  border-collapse: collapse !important;
  overflow: visible !important;
}

html body .main-text-content thead {
  display: table-header-group !important;
}

html body .main-text-content tbody {
  display: table-row-group !important;
}

html body .main-text-content tr {
  display: table-row !important;
}

html body .main-text-content th,
html body .main-text-content td {
  display: table-cell !important;
}

html body .main-text-content table th {
  background: linear-gradient(180deg, #2a2440 0%, #221e33 100%) !important;
  color: var(--accent) !important;
  border-color: #352e50 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px !important;
}

html body .main-text-content table td {
  border-color: #352e50 !important;
  color: #e4e0ee !important;
}

html body .main-text-content table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, .015) !important;
}

html body .main-text-content table td a {
  color: var(--accent2-lt) !important;
}

@media (max-width: 767px) {
  html body .main-text-content th,
  html body .main-text-content td {
    width: auto !important;
    white-space: normal !important;
    padding: 10px 11px !important;
    font-size: 13px !important;
  }
}

/* =========================================================== 13. FAQ === */
html body .faq-item-title {
  color: var(--text) !important;
}

html body .faq-item-icon,
html body .icon-angle-down {
  color: var(--accent) !important;
}

html body .faq-item-answ {
  color: #e4e0ee !important;
}

html body .faq-item-answ a {
  color: var(--accent2-lt) !important;
}

/* ================================================ 14. footer + chrome == */
html body .footer {
  background: linear-gradient(180deg, rgba(7, 8, 12, .35) 0%, rgba(7, 8, 12, .92) 100%) !important;
  border-top: 1px solid var(--border) !important;
}

html body .footer a {
  color: #e4e0ee !important;
}

html body .footer a:hover {
  color: var(--accent) !important;
}

/* The responsible-gambling row the builder ships is a British and German set —
   GamCare, GambleAware, Gambling Therapy, GamBan, BetBlocker, GGL, BZgA. The
   donor kept the British half because the donor is a British site. Neither half
   is right here and the decision has to be made again from scratch, which is
   the whole point of not inheriting it: GamCare's helpline is a UK number and
   GambleAware funds UK treatment, so an Australian reader who follows either
   one arrives somewhere that cannot help them, and the German pair was never
   relevant to anybody on this site.

   What stays is the age mark and the three that genuinely work from anywhere:
   Gambling Therapy answers from any country, and GamBan and BetBlocker are
   blocking software that installs on an Australian device like any other. The
   Australian services — Gambling Help Online on 1800 858 858 and BetStop, the
   national self-exclusion register — have no badge in this builder's asset set,
   so they are named in the page copy instead, where a phone number is more use
   than a logo.

   The build removes the four anchors from the markup outright; the rule below
   is the belt-and-braces line in case a page is ever restored from a backup
   that still has them. */
html body .footer-logo img[alt="GGL Whitelist"],
html body .footer-logo img[alt="BZgA"],
html body .footer-logo img[alt="GamCare"],
html body .footer-logo img[alt="Gamble Aware"] {
  display: none !important;
}

/* Several of these marks are dark artwork meant for a white page. On this
   ground they need lifting rather than dimming, which is what the donor's
   blanket opacity was doing to them. */
html body .footer-logo img {
  opacity: 1;
  filter: brightness(1.06) saturate(.92) drop-shadow(0 1px 4px rgba(7, 8, 12, .8));
}

/* Three of the seven payment marks in the footer strip belong to other
   markets: Paytm is Indian, AdvCash and Piastrix are Russian-facing, and none
   of the three is offered to an Australian account. Bitcoin stays, because the
   operator's own payments page does list CoinsPaid and crypto is not the
   anomaly here that a rupee wallet would be. The build removes the three
   anchors from the markup; the rule is the belt-and-braces line. */
html body .footer img[alt="paytm"],
html body .footer img[alt="advcash"],
html body .footer img[alt="piastrix"] {
  display: none !important;
}

html body .cookie-banner {
  background: linear-gradient(180deg, #221e33 0%, #1b1728 100%) !important;
  background-color: transparent !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .6) !important;
}

html body .cookie-text {
  color: #e4e0ee !important;
}

html body .cookie-btn {
  min-width: 84px !important;
  height: 40px !important;
  line-height: 40px !important;
}

html body .fixed-bar {
  background: linear-gradient(180deg, rgba(34, 30, 51, .97) 0%, rgba(7, 8, 12, .99) 100%) !important;
  border-top: 1px solid var(--border-strong) !important;
}

html body .fixed-bar-btn {
  width: auto !important;
  min-width: 150px !important;
  height: 42px !important;
  line-height: 42px !important;
}

html body .wheel-modal-btn {
  width: auto !important;
  min-width: 170px !important;
  height: 48px !important;
  line-height: 48px !important;
}

/* ========================================================= 15. inputs == */
html body input,
html body textarea,
html body select {
  background: #1b1728 !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
}

html body input:focus,
html body textarea:focus,
html body select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(217, 180, 81, .18) !important;
}

html body ::placeholder {
  color: #8f88a3 !important;
}

/* ===================================================== 16. slot shelf == */
html body .slots .slot,
html body .slots-item {
  border-radius: 12px !important;
  overflow: hidden;
}

html body .advant .item__title {
  color: var(--text) !important;
}

html body .advant .item__icon,
html body .advant svg {
  color: var(--accent) !important;
}

/* The builder's own article prose carries a couple of hard-coded slate
   colours; these pull them onto the brand ground. */
html body .main-text-content article {
  color: #e4e0ee !important;
}

html body .main-text-content h2,
html body .main-text-content h3 {
  color: var(--text) !important;
}


/* ================================ 19. slot and provider banners === */
/* Section 4 of the brief carves out one exception to the hero-illustration
   rule, and this site is the first in the series where it bites: eight of the
   fourteen builder pages are individual game pages, and on those the picture in
   the banner is the game's OWN artwork. Hiding it and painting a generic
   illustration over the top would remove the one image on the page a reader
   came for. The rule in block 18 hides every `/pages/` photograph, so these
   put the game art back explicitly. */
@supports selector(:has(> img)) {
  html body .banner-img > img[src*="/pages/pokies/"],
  html body .banner-img > img[src*="/pages/aviator/"],
  html body .banner-img > img[src*="/pages/plinko/"],
  html body .banner-img > img[src*="/pages/chicken-road/"],
  html body .banner-img > img[src*="/pages/gold-rush/"],
  html body .banner-img > img[src*="/pages/frozen-fruit/"],
  html body .banner-img > img[src*="/pages/deal-or-no-deal/"],
  html body .banner-img > img[src*="/pages/sweet-bonanza/"],
  html body .banner-img > img[src*="/pages/sugar-rush/"] {
    visibility: visible !important;
    display: block !important;
    max-height: 300px !important;
    width: auto !important;
    max-width: 100% !important;
    border-radius: var(--radius, 14px) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .55), 0 0 0 1px var(--border-strong) !important;
    object-fit: cover !important;
  }
}

/* ==================================== 20. the bonus card button === */
/* Six cards, six different labels, and the longest is two words. The brief's
   failure mode is a button that wraps to two lines because the builder makes it
   a flex item with no width of its own; the fix is a floor under the button and
   a `min-width: 0` on the text beside it, so the text column is what gives way.
   The floor is set from the widest label the build actually ships rather than
   from a round number: `Take reload` at 13px/600 measures 84px, plus 2 x 18px
   of padding, plus a pixel of border each side. */
html body .bonus-item-content .bonus-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 122px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

html body .bonus-item-content .bonus-item-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

@media (max-width: 700px) {
  html body .bonus-item-content {
    flex-wrap: wrap !important;
  }

  html body .bonus-item-content .bonus-btn {
    flex: 1 0 100% !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
}

/* ============================================== 17. table captions === */
/* Printed above the scroller rather than as a <caption>: a caption inside a
   table that is wider than the viewport scrolls away with the columns, and a
   caption on a display:block table takes the thead out of the table formatting
   context entirely. */
html body .main-text-content .table-caption {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted) !important;
  margin: 26px 0 -14px;
}

html body .main-text-content .table-scroll + p,
html body .main-text-content .table-caption + .table-scroll {
  margin-top: 14px;
}

/* ============================================= 18. builder banners === */
/* The jkref forbids changing the markup of an existing page, so the stock
   photograph is hidden and the illustration is painted as the container's
   background. `:has()` is the only way to select a parent from the child that
   identifies it, so the whole block is guarded. */
@supports selector(:has(> img)) {
  html body .banner-img > img[src*="/pages/"] {
    visibility: hidden !important;
  }

  html body .banner-img:has(> img[src*="/pages/app/"]) {
    background-image: url("../img/hero-app-android-steps.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    min-height: 300px;
  }
  html body .banner-img:has(> img[src*="/pages/bonus/"]) {
    background-image: url("../img/hero-bonus-match-stack.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    min-height: 300px;
  }
}