/* ==== HeroVideo ==== */
/* HeroVideo.css - 16:9 brand video at the very top of Home (mounted in .banner-wrapper, which the
   platform re-parents to the top of the phone column / the top of the LEFT desktop column).
   The video is the 30 s partnership film (rtpgroup-hero-30s.mp4/.webm, 1280x720): the first 9 s are the
   logo + "Play Only The Verified" + six partner chips, then the partner cards and the end card; it loops.
   autoplay + muted + playsinline so it starts on iOS/Android; the poster jpg shows until the first frame is
   decoded and stays as the fallback where autoplay is blocked. The whole banner links to the Casinos page;
   the small round button (bottom-right) un-mutes the soundtrack + voice-over (HeroVideo.js). */
.rtp-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #03150a url("../assets/rtpgroup/video/rtpgroup-hero-30s-poster.jpg") center / cover no-repeat;
  box-shadow: inset 0 -1px 0 rgba(76, 242, 50, .35);
}
.rtp-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #03150a;
}
.rtp-hero__link { position: absolute; inset: 0; z-index: 1; }
.rtp-hero__link:focus-visible { outline: 2px solid #f5c400; outline-offset: -2px; }
.rtp-hero__sound {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 36px; height: 36px; padding: 0; margin: 0;
  border-radius: 50%; border: 1.5px solid #f5c400;
  background: rgba(3, 21, 10, .72); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .15s ease;
}
.rtp-hero__sound:hover { background: rgba(15, 122, 46, .9); }
.rtp-hero__sound:active { transform: scale(.94); }
.rtp-hero__sound:focus-visible { outline: 2px solid #4cf232; outline-offset: 2px; }
.rtp-hero__ico { display: block; }
.rtp-hero__ico--on { display: none; }
.rtp-hero--sound .rtp-hero__ico--off { display: none; }
.rtp-hero--sound .rtp-hero__ico--on { display: block; }
.rtp-hero--sound .rtp-hero__sound { border-color: #4cf232; }
/* the platform's banner slot is full-bleed (margin 0 -10px) in the phone column - keep it that way */
#home .box-1-1 .banner-wrapper { margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .rtp-hero__video { display: none; } .rtp-hero__sound { display: none; } }


/* ==== WelcomeCard ==== */
/* WelcomeCard.css - "WELCOME TO RTP GROUP" card (WelcomeCard.html, mounted in #home-refer).
   Replaces the source's single 1280x1893 PNG card with live markup. Every size is in cqw
   (1cqw = 1% of the card width) so the card scales exactly like the image did: 370px in the
   desktop 3-column and 2-column tables, 100vw - 20px in the phone column. Card height = 148cqw.
   Palette: greens #1fbf4a / #14a33b / #0f7a2e / #0b5a22, light-green border #9fd8a8,
   gold #f5c400, neutrals. No blue. Static - no hover, no click, nothing animates
   (nothing to gate behind prefers-reduced-motion).

   Departures from WelcomeCard.spec.md (all measured against the 1280x1893 source png as ink
   bands in cqw; the spec's numbers were estimates and a few of them contradict each other):
   - __inner padding-top 8.8cqw (spec 9.8): with the kicker at 4.4cqw this puts the "WELCOME TO"
     cap top at the source's 10.4cqw (the spec's y=125 -> 9.8 was read to a lighter threshold).
   - __kicker 4.4cqw (spec 3.75): the source kicker's cap band is 3.2cqw tall, the same as the
     sub-headings', so it gets the sub-headings' size. margin-bottom 1cqw (spec 1.2) keeps the
     kicker-to-title gap at the source's 2.35cqw (title cap tops at 15.9 / 21.1cqw, as measured).
   - __title 6.4cqw (spec 7.4): Montserrat Black "BEST ONLINE CASINOS" is 12.1em wide, so anything
     above 7.35cqw wraps to 3 lines inside the 89cqw content box; 6.4cqw reproduces the source's
     cap height (4.69cqw) and line widths (69.5 / 77.6cqw). line-height .82 (spec .95): the source's
     two title lines are 5.23cqw apart (a 0.55cqw gap between the cap bands), .95 would leave 1.5cqw.
   - __badge margin-bottom 1.6cqw (spec 2.8), --verified margin-top 8cqw (spec 8.5): puts the
     first badge at 34.2cqw and the sub-heading cap tops 2.9cqw under the badges like the source.
   - __sub margin-bottom 1.4cqw (spec 1.6): source gap from sub cap bottom to body ascender = 2.7cqw.
   - __text 2.6cqw / line-height 1.18 (spec 2.65 / 1.28): the source body glyph run is 2.5cqw with a
     3.09cqw line pitch; 2.65 wraps a paragraph one line longer. max-width 96% (spec 90%): the
     source text block is 84cqw wide, 90% of the 89cqw content box would be only 80cqw. The RTP copy
     wraps 6 / 3 / 4 lines (source 5 / 4 / 4): same 13 lines, so the last paragraph still ends at
     the source's 115.3cqw, only the second badge sits one line lower (76.2 vs 72.5cqw).
   - __art height 28.9cqw / margin-top 3.2cqw (spec 26 / 4) and the img at 36cqw / bottom -7cqw
     (spec 38 / -3): the spec's numbers are self-contradictory - a 38cqw-wide 868x900 image is
     39.4cqw tall and would sit 6cqw into the last paragraph. As built: image top 117.6cqw, last
     paragraph box bottom 115.8cqw, card height 148cqw (370 x 547.7, 748 x 1107.6).
   - The no-container-query fallback uses calc(var(--cw) * N / 100) with --cw = 370px (the 2- and
     3-column card) and 100vw - 20px below the 850px one-column breakpoint (app.js BP_TWO_COL),
     rather than the spec's plain vw (which would be 3.8x too big on desktop) or plain px (2x too
     small on a 748px tablet card). */

/* Container-query units on an element resolve against its nearest ANCESTOR container, so the
   card's own border / radius / shadow need the mount node to be a container as well. #home-refer
   only ever holds this card and is a plain block whose width already comes from the column, so
   inline-size containment adds no layout of its own. */
#home-refer { container-type: inline-size; }

/* ---------- card ---------- */
.rtp-welcome {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  margin-top: 15px;                       /* = platform's #home-refer .wrapper { margin-top:15px } */
  border-radius: 2.4cqw;
  border: 0.3cqw solid #9fd8a8;
  background: linear-gradient(160deg, #f6f8f6 0%, #e7ebe8 55%, #f3f5f3 100%);
  box-shadow: 0 0.6cqw 1.6cqw rgba(6, 43, 18, .18);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;
  text-transform: none;                   /* platform body { text-transform: capitalize } */
  color: #111;
}
/* diagonal white sheen, top-right -> bottom-left (kept under the content) */
.rtp-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  pointer-events: none;
}
.rtp-welcome__inner,
.rtp-welcome__art { position: relative; z-index: 1; }

/* 8.8cqw + the kicker's half-leading + ascent puts the cap top of "WELCOME TO ..." at 10.4cqw (y=132/1893) */
.rtp-welcome__inner { padding: 8.8cqw 5.5cqw 0; }

/* ---------- headings ---------- */
/* the #home-refer forms out-rank the platform's `#home-refer p { color: #000 }` (1,0,1) */
.rtp-welcome__kicker,
#home-refer .rtp-welcome__kicker {
  margin: 0 0 1cqw;
  font-size: 4.4cqw;
  font-weight: 700;
  letter-spacing: .02em;
  color: #14a33b;
}
/* ---------- rev 2 top block: logo -> pill -> title -> tagline -> rule (own arrangement, not the source's) ---------- */
.rtp-welcome__logo {
  display: block;
  width: 36cqw;
  height: auto;
  margin: 0 auto 2.4cqw;
  filter: drop-shadow(0 0.4cqw 0.8cqw rgba(6, 43, 18, .25));
}
.rtp-welcome__pill,
#home-refer .rtp-welcome__pill {
  display: inline-block;
  margin: 0 0 2.2cqw;
  padding: 0.9cqw 3.2cqw;
  border-radius: 999px;
  background: #062b12;
  color: #4cf232;
  font-size: 2.7cqw;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  box-shadow: 0 0.3cqw 0.8cqw rgba(6, 43, 18, .3);
}
.rtp-welcome__tagline,
#home-refer .rtp-welcome__tagline {
  max-width: 88%;
  margin: 2cqw auto 0;
  font-size: 2.75cqw;
  font-weight: 600;
  line-height: 1.25;
  color: #0b5a22;
}
.rtp-welcome__rule {
  width: 24cqw;
  height: 0.5cqw;
  margin: 3.2cqw auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4cf232, #f5c400);
}

/* 6.4cqw = the source's line widths (WE INTRODUCE THE 69.5cqw / BEST ONLINE CASINOS 77.3cqw);
   Montserrat Black "BEST ONLINE CASINOS" is 12.1em, so anything above 7.35cqw wraps to 3 lines.
   line-height .82 = the source's 5.23cqw line pitch (its two lines almost touch) */
.rtp-welcome__title {
  margin: 0;
  font-size: 5.8cqw;                     /* rev 2 title 'AUSTRALIA'S TOP CASINOS' is longer: keeps the two forced lines */
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #1fbf4a 0%, #0b5a22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.rtp-welcome__sub {
  margin: 0 0 1.4cqw;
  font-size: 4.4cqw;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #14a33b;
}

/* ---------- seal badges (tops at 34.3cqw and 72.5cqw like the source) ----------
   normal-flow margins collapse: the 8.5cqw absorbs the preceding paragraph's 3.2cqw */
.rtp-welcome__badge {
  width: 7.5cqw;
  height: 7.5cqw;
  margin: 8.5cqw auto 1.6cqw;
}
.rtp-welcome__badge--verified { margin-top: 5.5cqw; }   /* follows the rev-2 rule */
.rtp-welcome__badge svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- body copy (6 / 3 / 4 lines, 85cqw wide; source glyph run 2.5cqw, line pitch 3.09cqw) ---------- */
.rtp-welcome__text,
#home-refer .rtp-welcome__text {
  max-width: 96%;
  margin: 0 auto 3.2cqw;
  font-size: 2.6cqw;
  font-weight: 500;
  line-height: 1.18;
  color: #151515;
}

/* ---------- illustration band (source: y 1560 -> 1893; card total = 148cqw) ----------
   the 3.2cqw margin collapses with the last paragraph's 3.2cqw; the band top lands at 118.8cqw */
.rtp-welcome__art {
  height: 28.9cqw;
  margin-top: 3.2cqw;
}
.rtp-welcome__art img {
  position: absolute;
  left: 50%;
  bottom: -7cqw;
  z-index: 1;
  width: 36cqw;                           /* 868x900 -> 37.3cqw tall: top at 117.8cqw, 2.6cqw under the last paragraph */
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.8cqw 1.4cqw rgba(6, 43, 18, .35));
  display: block;
  pointer-events: none;
}
/* soft glows standing in for the source's blue dice: neon-green centred, gold bottom-left */
.rtp-welcome__art::before,
.rtp-welcome__art::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.rtp-welcome__art::before {
  left: 50%;
  bottom: -8cqw;
  width: 40cqw;
  height: 40cqw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(76, 242, 50, .35), transparent 60%);
}
.rtp-welcome__art::after {
  left: -5cqw;
  bottom: -6cqw;
  width: 22cqw;
  height: 22cqw;
  background: radial-gradient(circle, rgba(245, 196, 0, .28), transparent 60%);
}

/* ---------- fallback: no container queries ----------
   --cw stands in for the card width: 370px in the 2- and 3-column tables (td.box-3-1 / td.box-2-2
   = 400px - 2x15px), 100vw - 20px in the one-column layout (app.js switches to box-1-1 below
   850px; .box-1-1 has 10px side padding). Every value is the cqw number above x --cw / 100. */
@supports not (container-type: inline-size) {
  .rtp-welcome {
    --cw: 370px;
    border-radius: calc(var(--cw) * 2.4 / 100);
    border-width: calc(var(--cw) * 0.3 / 100);
    box-shadow: 0 calc(var(--cw) * 0.6 / 100) calc(var(--cw) * 1.6 / 100) rgba(6, 43, 18, .18);
  }
  @media (max-width: 849px) {
    .rtp-welcome { --cw: calc(100vw - 20px); }
  }
  .rtp-welcome__inner { padding: calc(var(--cw) * 8.8 / 100) calc(var(--cw) * 5.5 / 100) 0; }
  .rtp-welcome__kicker,
  #home-refer .rtp-welcome__kicker { margin: 0 0 calc(var(--cw) * 1 / 100); font-size: calc(var(--cw) * 4.4 / 100); }
  .rtp-welcome__title { font-size: calc(var(--cw) * 5.8 / 100); }
  .rtp-welcome__logo { width: calc(var(--cw) * 36 / 100); margin-bottom: calc(var(--cw) * 2.4 / 100); }
  .rtp-welcome__pill, #home-refer .rtp-welcome__pill { margin-bottom: calc(var(--cw) * 2.2 / 100); padding: calc(var(--cw) * 0.9 / 100) calc(var(--cw) * 3.2 / 100); font-size: calc(var(--cw) * 2.7 / 100); }
  .rtp-welcome__tagline, #home-refer .rtp-welcome__tagline { margin-top: calc(var(--cw) * 2 / 100); font-size: calc(var(--cw) * 2.75 / 100); }
  .rtp-welcome__rule { width: calc(var(--cw) * 24 / 100); height: calc(var(--cw) * 0.5 / 100); margin-top: calc(var(--cw) * 3.2 / 100); }
  .rtp-welcome__badge--verified { margin-top: calc(var(--cw) * 5.5 / 100); }
  .rtp-welcome__sub { margin: 0 0 calc(var(--cw) * 1.4 / 100); font-size: calc(var(--cw) * 4.4 / 100); }
  .rtp-welcome__badge { width: calc(var(--cw) * 7.5 / 100); height: calc(var(--cw) * 7.5 / 100); margin: calc(var(--cw) * 8.5 / 100) auto calc(var(--cw) * 1.6 / 100); }
  .rtp-welcome__badge--verified { margin-top: calc(var(--cw) * 8 / 100); }
  .rtp-welcome__text,
  #home-refer .rtp-welcome__text { margin: 0 auto calc(var(--cw) * 3.2 / 100); font-size: calc(var(--cw) * 2.6 / 100); line-height: 1.18; }
  .rtp-welcome__art { height: calc(var(--cw) * 28.9 / 100); margin-top: calc(var(--cw) * 3.2 / 100); }
  .rtp-welcome__art img { bottom: calc(var(--cw) * -7 / 100); width: calc(var(--cw) * 36 / 100); filter: drop-shadow(0 calc(var(--cw) * 0.8 / 100) calc(var(--cw) * 1.4 / 100) rgba(6, 43, 18, .35)); }
  .rtp-welcome__art::before { bottom: calc(var(--cw) * -8 / 100); width: calc(var(--cw) * 40 / 100); height: calc(var(--cw) * 40 / 100); }
  .rtp-welcome__art::after { left: calc(var(--cw) * -5 / 100); bottom: calc(var(--cw) * -6 / 100); width: calc(var(--cw) * 22 / 100); height: calc(var(--cw) * 22 / 100); }
}


/* ==== RecommendationBanner ==== */
/* RecommendationBanner - "LATEST RECOMMENDATION OF RTP GROUP" card.
   Source: #home-movie .movie renders a single 1000x800 gif (blue). Rebuilt as DOM, re-themed
   green/gold. Every box is positioned as a % of the 1000x800 frame; sizes/fonts use cqw so the
   card scales purely with its container (370px column -> 296px tall; 748px -> everything doubles).
   platform.css already supplies #home-movie .movie { margin:10px 0 0; border-radius:8px; cursor:pointer }. */

.rtp-reco {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 800;
  container-type: inline-size;
  box-sizing: border-box;
  overflow: visible;
  text-decoration: none;
  color: #fff;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  text-transform: uppercase;      /* body is text-transform:capitalize on the platform */
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.rtp-reco:focus-visible { outline: 0.3cqw solid #f5c400; outline-offset: 0.3cqw; }
.rtp-reco:hover .rtp-reco__btn { filter: brightness(1.08); }

/* ---- title strip (crown + "LATEST RECOMMENDATION OF RTP GROUP") ----
   The copy is 34 chars (source: 27) and Montserrat Black is wide, so the text is set at 2.3cqw
   (source strip: 3cqw) and the strip starts right after the logo's edge (35.4%) so it fits on one line. */
.rtp-reco__title {
  position: absolute; left: 37%; top: 2%; width: 62%; height: 6%;
  display: flex; align-items: center; gap: 1cqw;
  white-space: nowrap;
}
.rtp-reco__crown {
  flex: 0 0 auto; width: 4.2cqw; height: auto;
  fill: #f5c400; stroke: #b8860b; stroke-width: 1.2; stroke-linejoin: round;
}
.rtp-reco__title span {
  font-size: 2.3cqw; font-weight: 900; line-height: 1;
  color: #0f7a2e; letter-spacing: .01em;
}

/* ---- framed two-panel card ---- */
.rtp-reco__frame {
  position: absolute; left: 1%; top: 7.75%; width: 98%; height: 91%;
  box-sizing: border-box;
  border-radius: 2.8cqw;
  border: 0.3cqw solid #4cf232;
  box-shadow: 0 0 1.4cqw rgba(76, 242, 50, .7), inset 0 0 2cqw rgba(76, 242, 50, .25);
  background: linear-gradient(135deg, #0c3a1a 0%, #062b12 45%, #04200d 100%);
  overflow: visible;              /* the logo must overflow the frame top (see __logo) */
}
/* two faint diagonal light rays; radius = frame radius minus border so they stay inside the corners */
.rtp-reco__frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 2.5cqw;
  background:
    linear-gradient(115deg, transparent 30%, rgba(76, 242, 50, .10) 45%, transparent 60%),
    linear-gradient(115deg, transparent 64%, rgba(76, 242, 50, .06) 74%, transparent 84%);
}

/* ---- left panel ---- */
.rtp-reco__left {
  position: absolute; left: 0; top: 0; width: 39.5%; height: 100%;
  box-sizing: border-box;
  border-right: 0.25cqw solid #4cf232;
}
.rtp-reco__logo {
  position: absolute; left: 50%; top: -4cqw;
  width: 30cqw; height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.6cqw 1cqw rgba(0, 0, 0, .5));
}
.rtp-reco__headline {
  position: absolute; left: 5%; width: 90%; top: 39%; margin: 0;
  font-size: 2.6cqw; font-weight: 900; line-height: 1.05; letter-spacing: .01em;
  text-align: center; color: #fff;
}
.rtp-reco__headline em { font-style: normal; color: #4cf232; }

.rtp-reco__divider {
  position: absolute; left: 15%; width: 70%; top: 50%; height: 0.2cqw;
  background: #f5c400;
}
.rtp-reco__dot {
  position: absolute; left: 50%; top: 50%; width: 1.6cqw; height: 1.6cqw;
  border-radius: 50%; background: #f5c400;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0.8cqw rgba(245, 196, 0, .9);
}

.rtp-reco__trust {
  position: absolute; left: 4%; width: 92%; top: 56%;
  margin: 0; padding: 0; list-style: none;
  display: flex; align-items: flex-start;
}
.rtp-reco__trust li { flex: 1 1 0; min-width: 0; text-align: center; }
.rtp-reco__trust svg {
  display: block; width: 4.6cqw; height: 4.6cqw; margin: 0 auto;
  fill: none; stroke: #4cf232; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.rtp-reco__trust text { fill: #4cf232; stroke: none; font-family: inherit; font-weight: 800; }
.rtp-reco__trust span {
  display: block; margin-top: 0.6cqw;
  font-size: 1.3cqw; font-weight: 800; line-height: 1.15; color: #fff;
}

.rtp-reco__btn {
  position: absolute; left: 5%; width: 90%; top: 71%; height: 8.75cqw;
  box-sizing: border-box; overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, #2fd45a 0%, #14a33b 55%, #0b6b2a 100%);
  border: 0.25cqw solid #b9f542;
  box-shadow: 0 0.6cqw 1.2cqw rgba(0, 0, 0, .45), inset 0 0.4cqw 0.6cqw rgba(255, 255, 255, .35);
  font-size: 3.8cqw; font-weight: 900; letter-spacing: .04em; color: #fff; text-align: center;
  line-height: 8.25cqw;            /* 8.75cqw box minus the two 0.25cqw borders -> optically centred */
  text-shadow: 0 0.2cqw 0.3cqw rgba(0, 0, 0, .35);
}
/* the gif's only motion: a slow shine sweeping across the button every 3s */
.rtp-reco__btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 28%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-22deg);
  animation: rtp-reco-shine 3s linear infinite;
  pointer-events: none;
}
@keyframes rtp-reco-shine { 0% { left: -60%; } 100% { left: 140%; } }

.rtp-reco__cta {
  position: absolute; left: 0; width: 100%; top: 91%;
  font-size: 1.8cqw; font-weight: 800; letter-spacing: .03em; line-height: 1.1;
  text-align: center; color: #fff;
}

/* ---- right panel: three labelled rows of three tiles ---- */
.rtp-reco__right {
  position: absolute; left: 39.5%; top: 0; width: 60.5%; height: 100%;
  display: flex; flex-direction: column;
}
.rtp-reco__row {
  flex: 0 0 33.3%; height: 33.3%; min-height: 0;
  box-sizing: border-box; padding: 1.2cqw 1.6cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rtp-reco__row h4 {
  margin: 0 0 0.8cqw;
  font-size: 2.8cqw; font-weight: 900; line-height: 1.1; letter-spacing: .03em;
  text-align: center; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 0.05cqw #f5c400;
  text-shadow: 0 0 1.2cqw rgba(245, 196, 0, .7);
}
.rtp-reco__tiles { display: flex; justify-content: center; gap: 2cqw; }
.rtp-reco__tile {
  flex: 0 0 auto; width: 15.5cqw; height: 15.5cqw;
  box-sizing: border-box;
  border-radius: 1.8cqw;
  border: 0.3cqw solid #4cf232;
  background: linear-gradient(180deg, #0f4a20, #062b12);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 1cqw rgba(76, 242, 50, .45);
  animation: rtp-reco-glow 2.4s ease-in-out infinite alternate;
}
.rtp-reco__tile:nth-child(2) { animation-delay: .3s; }
.rtp-reco__tile:nth-child(3) { animation-delay: .6s; }
.rtp-reco__tile img { width: 74%; height: 74%; object-fit: contain; border-radius: 1cqw; }
@keyframes rtp-reco-glow {
  from { box-shadow: 0 0 1cqw rgba(76, 242, 50, .45); }
  to   { box-shadow: 0 0 2cqw rgba(76, 242, 50, .7); }
}

@media (prefers-reduced-motion: reduce) {
  .rtp-reco__btn::after, .rtp-reco__tile { animation: none; }
}

/* ---- fallbacks ---- */
@supports not (aspect-ratio: 1 / 1) {
  .rtp-reco { height: 0; padding-top: 80%; }   /* the source's own aspect box */
}
/* No container-query units: px values for the 370px column (1cqw = 3.7px). */
@supports not (container-type: inline-size) {
  .rtp-reco:focus-visible { outline: 1.1px solid #f5c400; outline-offset: 1.1px; }
  .rtp-reco__title { gap: 3.7px; }
  .rtp-reco__crown { width: 15.5px; }
  .rtp-reco__title span { font-size: 8.5px; }
  .rtp-reco__frame {
    border-radius: 10.4px; border-width: 1.1px;
    box-shadow: 0 0 5.2px rgba(76, 242, 50, .7), inset 0 0 7.4px rgba(76, 242, 50, .25);
  }
  .rtp-reco__frame::before { border-radius: 9.3px; }
  .rtp-reco__left { border-right-width: 0.9px; }
  .rtp-reco__logo { top: -14.8px; width: 111px; filter: drop-shadow(0 2.2px 3.7px rgba(0, 0, 0, .5)); }
  .rtp-reco__headline { font-size: 9.6px; }
  .rtp-reco__divider { height: 0.74px; }
  .rtp-reco__dot { width: 5.9px; height: 5.9px; box-shadow: 0 0 3px rgba(245, 196, 0, .9); }
  .rtp-reco__trust svg { width: 17px; height: 17px; }
  .rtp-reco__trust span { margin-top: 2.2px; font-size: 4.8px; }
  .rtp-reco__btn {
    height: 32.4px; line-height: 30.5px; border-width: 0.9px; font-size: 14px;
    box-shadow: 0 2.2px 4.4px rgba(0, 0, 0, .45), inset 0 1.5px 2.2px rgba(255, 255, 255, .35);
    text-shadow: 0 0.7px 1.1px rgba(0, 0, 0, .35);
  }
  .rtp-reco__cta { font-size: 6.7px; }
  .rtp-reco__row { padding: 4.4px 5.9px; }
  .rtp-reco__row h4 { margin-bottom: 3px; font-size: 10.4px; -webkit-text-stroke-width: 0.2px; text-shadow: 0 0 4.4px rgba(245, 196, 0, .7); }
  .rtp-reco__tiles { gap: 7.4px; }
  .rtp-reco__tile { width: 57.4px; height: 57.4px; border-radius: 6.7px; border-width: 1.1px; box-shadow: 0 0 3.7px rgba(76, 242, 50, .45); animation: none; }
  .rtp-reco__tile img { border-radius: 3.7px; }
}


/* ==== TrustBlock ==== */
/* TrustBlock - intentionally empty: the block reuses the source's markup, so every size and spacing rule comes
   from platform.css (#home .footer …). Only a height:auto guard for the explicit width/height attributes. */
#home .footer img { height: auto; }


/* ==== CasinosContent ==== */
/* CasinosContent — RTP GROUP AUSTRALIA (/casinos/)
   Layout (#promotion, .center-wrapper, .packet-group, .packet-title, .packet-wrapper, .packet,
   .promo-footer) is inherited from site/css/platform.css. This file only adds the rtp-* pieces:
   the html title block that replaces the 800x150 banner png, the tile internals that replace the
   500x500 tile png, and the partner search box that lives in the source's empty first group. */

/* ---------- search group (uses the source's empty first .packet-group slot) ---------- */
#promotion .packet-group.rtp-search-group {
  margin: 20px 10px 0;
  padding: 12px 15px;
  display: block !important; /* app.js hides non-matching .packet-groups with an inline style; the search box must stay */
}
.rtp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid #1e6b32;
  border-radius: 999px;
  padding: 0 14px;
  height: 44px;
  box-sizing: border-box;
  cursor: text;
}
.rtp-search svg { width: 20px; height: 20px; flex: none; stroke: #0f7a2e; }
.rtp-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  font: 600 15px "Montserrat", Arial, Helvetica, sans-serif;
  color: #062b12;
  background: transparent;
  text-transform: none;   /* the platform body sets text-transform:capitalize */
  user-select: text;      /* the platform reset sets user-select:none on * */
  -webkit-appearance: none;
  appearance: none;
}
.rtp-search input::placeholder { color: #7a8a7d; opacity: 1; }
.rtp-search input::-webkit-search-decoration,
.rtp-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.rtp-search:focus-within {
  border-color: #4cf232;
  box-shadow: 0 0 0 3px rgba(76, 242, 50, .25);
}
.rtp-search__empty {
  margin: 10px 0 0;
  font: 700 13px "Montserrat", Arial, Helvetica, sans-serif;
  color: #0f7a2e;
  text-align: center;
  text-transform: none;
}

/* ---------- group title block: same footprint as the source's banner png (373x70, absolute, z 50) ---------- */
#promotion .packet-title { position: relative; } /* makes the group (not .center-wrapper) the title's containing block */
.rtp-ptitle {
  position: absolute;
  z-index: 50;
  left: 10px;
  height: 70px;
  width: 373px;
  max-width: calc(100% - 20px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #fff;
  border-radius: 8px;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  color: #111;
  overflow: hidden;
}
.rtp-ptitle__text { min-width: 0; }
.rtp-ptitle__text strong {
  display: block;
  font-size: 13px; /* spec says 15px, but the 222px text column of the 373px block then wraps "COMPANY IN THIS CATEGORY" to 3 lines; 13px is the largest size that keeps every title at 2 lines */
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.1;
  text-transform: uppercase;
}
.rtp-ptitle--b .rtp-ptitle__text { flex: 1; }
.rtp-ptitle--b .rtp-ptitle__text strong { text-align: right; }
.rtp-ptitle__medals { display: flex; gap: 6px; margin-top: 4px; }
.rtp-ptitle__medals i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font: 900 11px/22px "Montserrat", Arial, Helvetica, sans-serif;
  font-style: normal;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.rtp-ptitle__medals .m3 { background: radial-gradient(circle at 35% 30%, #e0a070, #8a4b1c); }
.rtp-ptitle__medals .m2 { background: radial-gradient(circle at 35% 30%, #f0f0f0, #8d8d8d); }
.rtp-ptitle__medals .m1 { background: radial-gradient(circle at 35% 30%, #ffe37a, #c99700); }
.rtp-ptitle__divider { flex: none; width: 2px; align-self: stretch; background: #111; margin: 0 4px; }
/* variant A: RTP GROUP wide logo — .packet-title img is position:absolute in platform.css, put it back in flow */
.packet-title .rtp-ptitle__logo { position: static; z-index: auto; flex: none; height: 44px; width: auto; display: block; }
/* variant B: partner "PARTNERSHIP" pill */
.rtp-ptitle__pill {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #111;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  width: 96px;
  box-sizing: border-box;
}
/* the partner files are full 500x500 tile artworks (dark square, wordmark across the middle band), not standalone
   logos: crop the pill image to the wordmark band instead of shrinking the whole tile to a 30px thumbnail */
.packet-title .rtp-ptitle__pill img {
  position: static;
  z-index: auto;
  width: 82px;
  height: 34px;
  object-fit: cover;
  object-position: 50% 50%;
  margin: 2px 0;
  display: block;
  border-radius: 4px;
}
.rtp-ptitle__pill b {
  display: block;
  width: 100%;
  background: #111;
  color: #fff;
  font: 900 9px/16px "Montserrat", Arial, Helvetica, sans-serif;
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- tiles: replaces the 500x500 tile png at its rendered size (85px) ---------- */
.rtp-tile {
  display: block;
  width: 85px;
  height: 85px;
  background: linear-gradient(180deg, #0f3d1c 0%, #062b12 100%);
  border: 2px solid #1e6b32;
  box-sizing: border-box;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  position: relative;
}
/* platform's `#promotion .packet { border-radius:8px; cursor:pointer }` (1,1,0) out-specifies a bare class, so
   the spec's 6px radius and the Coming Soon default cursor need the id in the selector */
#promotion .packet.rtp-tile { border-radius: 6px; }
#promotion .packet.rtp-tile--soon { cursor: default; }
/* The partner files in assets/rtpgroup/partners are full tile artworks (dark rounded square with the wordmark
   across the middle 40-60% band), not standalone logos, so the art IS the tile face: it fills the 81px inner
   square edge to edge and the html name strip overlays the bottom 19px (as in the reference tiles). The 4px
   overscan hides the artwork's own transparent rim/rounded corners; the widest wordmark (86% of the art) still
   fits inside the visible square. */
.rtp-tile__logo {
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* beats platform's `.packet-wrapper img { width:85px }` and `#promotion .packet img { max-height:100px }` */
#promotion .packet-wrapper .rtp-tile img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0;
  margin: 0;
}
.rtp-tile__name {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 19px;
  background: #03150a;
  color: #fff;
  /* spec: 900 9px + .03em — measured, 10 of the 33 labels then exceed the 81px strip (and 900 9px with 0 tracking
     still overflows 6); 800 8px with 0 tracking fits all but one and keeps the heavy look */
  font: 800 8px/19px "Montserrat", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px; /* spec 3px — 2px lets the 76px-wide "NEW CAMPAIGNS" fit the 81px strip without an ellipsis */
  box-sizing: border-box;
}
.rtp-tile__name--long { font-size: 7px; letter-spacing: 0; padding: 0 2px; } /* 14-char names (BOOMERSTAKEAUS) — 7.5px still ellipsizes in Edge */
/* offer tiles: same partner art face, distinguished by the gold offer label */
.rtp-tile--offer .rtp-tile__name { color: #f5c400; }
/* telegram tile: FontAwesome 4 paper-plane (font embedded in platform.css) — no art, icon centred above the strip */
.rtp-tile--tg .rtp-tile__logo {
  position: static;
  height: 60px;
  font-size: 30px;
  color: #4cf232;
}
/* coming soon tile (a <span>, not a link) */
.rtp-tile--soon { opacity: .75; }
/* hover — the source has none; keep it minimal */
.rtp-tile:hover { border-color: #4cf232; }
.rtp-tile--soon:hover { border-color: #1e6b32; }
/* keyboard focus: platform.css resets `* { outline:0 }`, so mirror the search box's focus treatment (no blue) */
.rtp-tile:focus-visible {
  border-color: #4cf232;
  box-shadow: 0 0 0 3px rgba(76, 242, 50, .35);
}

/* ---------- phones ---------- */
@media (max-width: 480px) {
  /* 340px block at 390: with the 96px pill the text column is 190px, and "COMPANY IN THIS CATEGORY" at 12px needs
     196px — trimming the side padding to 8px gives a 198px column so the spec's 12px keeps its 2-line shape */
  .rtp-ptitle { width: calc(100% - 20px); height: 64px; padding: 6px 8px; }
  .rtp-ptitle__text strong { font-size: 12px; }
  .packet-title .rtp-ptitle__logo { height: 34px; }
}


/* ==== LiveChatContent ==== */
/* LiveChatContent - RTP additions on top of the platform's #chatroom rules (site/css/platform.css).
   Layout, bubble, textarea and tool geometry are inherited; only the small RTP extras live here. */

/* source uses the browser default (~1.3); keep the paragraph text tight */
#chatroom .text { line-height: 1.4; }

/* partner Telegram links inside the second staff bubble */
#chatroom .rtp-chat-partners a {
  color: #0f7a2e;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#chatroom .rtp-chat-partners a:hover { color: #14a33b; }

/* keyboard focus ring on the send / attach tools (gold accent) */
#chatroom .tool:focus-visible { outline: 2px solid #f5c400; border-radius: 20px; }

/* restate the platform's generic textarea width so the pill always spans the tool bar */
#chatroom textarea { width: 100%; box-sizing: border-box; font: 15px Arial, Helvetica, sans-serif; }