/* ==========================================================================
   88M — desktop build (/web)
   ========================================================================== */

body { padding-top: var(--header-h); }

.container-x {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  z-index: 50;
  display: flex;
  align-items: center;
}
.site-header .hdr-inner {
  width: 100%;
  padding-inline: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 8px;
}
.main-nav a {
  position: relative;
  font-size: 14px;
  color: var(--c-ink);
  white-space: nowrap;
  padding: 6px 0;
}
.main-nav a:hover { color: var(--c-orange); }
.main-nav a.active { color: var(--c-orange); }
.main-nav a.hovering { color: var(--c-orange); }
.main-nav a .tag-new {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-red-badge);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 3px;
}

/* Clock stacks above the controls in normal flow — absolutely positioning it
   over the header made it collide with the buttons at some widths. */
.hdr-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.hdr-clock {
  font-size: 11px;
  color: var(--c-ink);
  white-space: nowrap;
  line-height: 1;
}
.hdr-controls { display: flex; align-items: center; gap: 16px; }

/* Join and Login as a matched pair in the logo's own two colours, the same
   way the mobile build paints them: green to join, orange to sign in. */
/* --- The site's buttons ---------------------------------------------------
   The header's Login/Join pair was the only button drawn off the logo; every
   other one had picked up its own fill somewhere down the file. They are one
   family now, so a member coming off the header onto a cashier page is still
   pressing the same button.

   **The three colours mean something.** Orange is the mark's own and says
   "this is the thing you came here to do" — Login, Submit, Save, Claim,
   Confirm. Blue is the route *to* one of those, never the doing of it —
   Deposit, Add Bank, Upload Receipt, More Info. Green is the logo's other
   half, kept for Join Now alone so that registering never looks like anything
   else on the page.

   Written here and not in theme.css: that file is shared with /m, which has
   its own `--m-*` look and is not part of this.

   **Only the look is shared — the sizes are not.** A header button is 32px
   tall and a cashier Submit is 283px wide because of where each one sits, and
   each keeps its own line further down the file. What is unified is the
   shape, the weight, the fill and the way it lifts under the cursor. */
.hdr-cta,
.btn-deposit,
.btn-orange,
.btn-info-blue,
.btn-upload,
.btn-addbank,
.acc-submit,
.vf-ghost {
  /* The fill rides on variables, so a colour below is three lines instead of
     a repeat of this whole rule. Unset it is the logo orange — which makes
     every confirm button right by default and leaves only the exceptions with
     anything to say. */
  --cta-a: var(--c-logo-orange-lit);
  --cta-b: var(--c-logo-orange-deep);
  --cta-glow: rgba(182, 72, 55, .26);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--cta-a), var(--cta-b));
  box-shadow: 0 4px 10px var(--cta-glow);
  color: #fff;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: center;
  transition: filter .15s ease, box-shadow .15s ease;
}

.hdr-cta:hover,
.btn-deposit:hover,
.btn-orange:hover,
.btn-info-blue:hover,
.btn-upload:hover,
.btn-addbank:hover,
.acc-submit:hover,
.vf-ghost:hover {
  /* Restated, because theme.css's own `.btn-orange:hover` still sets the flat
     `--c-orange` it used to be and nothing above would replace it — the fill
     would snap back to the old colour under the cursor. */
  background: linear-gradient(135deg, var(--cta-a), var(--cta-b));
  color: #fff;
  filter: brightness(1.07);
}

/* A button that cannot be pressed still has to read as a button. Bootstrap's
   `.btn:disabled` sets its own grey background, so the fill is restated here
   and the *opacity* is what says it is locked. */
.hdr-cta:disabled,
.btn-deposit:disabled,
.btn-orange:disabled,
.btn-info-blue:disabled,
.btn-upload:disabled,
.btn-addbank:disabled,
.acc-submit:disabled,
.vf-ghost:disabled {
  background: linear-gradient(135deg, var(--cta-a), var(--cta-b));
  color: #fff;
  opacity: .45;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}

/* Blue — the routes to money, never the confirming of it. */
.btn-deposit,
.btn-info-blue,
.btn-upload,
.btn-addbank {
  --cta-a: var(--c-blue-light);
  --cta-b: var(--c-blue);
  --cta-glow: rgba(10, 78, 162, .26);
}

/* The header pair's own height, and the general-purpose orange button's own
   padding — theme.css still sizes `.btn-orange` for /m, and /web wants it a
   little taller now that it has a shadow under it. */
.hdr-cta { height: 32px; padding: 0 16px; font-size: 14px; }
.btn-orange { padding: 9px 20px; font-size: 15px; }

/* Green — Join Now, and nothing else. */
.hdr-cta.join {
  --cta-a: var(--c-logo-green-lit);
  --cta-b: var(--c-logo-green-deep);
  --cta-glow: rgba(63, 139, 104, .26);
}

/* Cancel, standing beside a confirm. Flat and quiet on purpose: two filled
   buttons side by side are two things asking to be pressed. */
.vf-ghost, .vf-ghost:disabled {
  background: var(--c-soft);
  border: 1px solid var(--c-line);
  color: var(--c-body);
  box-shadow: none;
}
.vf-ghost:hover { background: var(--c-soft-2); color: var(--c-body); filter: none; }

/* Language switcher ------------------------------------------------------- */
.lang-pick {
  display: flex;
  align-items: center;
  background: #f3f5f6;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 5px 8px;
  height: 32px;
  color: var(--c-muted);
}
.lang-pick .flag { width: 25px; height: 25px; flex-basis: 25px; }
.lang-pick .flag > i { font-size: 15px; }
.lang-pick .caret { font-size: 11px; margin-left: 4px; transition: transform .18s ease; }
.lang-pick[aria-expanded="true"] .caret { transform: rotate(180deg); }

.lang-panel {
  position: absolute;
  top: 68px;
  /* Right edge lines up with the trigger button, i.e. the header's own
     inline padding — keep in sync with .site-header .hdr-inner. */
  right: 28px;
  width: 320px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: rgba(0, 0, 0, .2) 5px 5px 5px -2px;
  padding: 26px 24px 0;
  display: none;
  z-index: 51;
}
.lang-panel.open { display: block; }
.lang-panel .lang-head {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 2px solid #f7f7f7;
  margin-bottom: 15px;
}
.lang-panel .lang-head .globe { font-size: 26px; color: var(--c-blue-light); line-height: 1; }
.lang-panel .lang-head p { font-size: 14px; color: var(--c-ink); margin: 0 0 0 20px; }
.lang-panel .region-row:last-child { padding-bottom: 26px; }

/* --- Product submenu -----------------------------------------------------
   Measured off the reference: a full-bleed translucent navy bar hanging from
   the header, its contents centred in a 1000px six-column grid, 45px rows.
   The header is fixed, so `top: 100%` pins the bar to its lower edge. */
.submenu-bar {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 15, 76, .8);
  backdrop-filter: blur(6px);
  padding: 20px 0 0;
  display: none;
}
.submenu-bar.open { display: block; }
/* A product with a lot of cards would otherwise run off the screen. */
.submenu-bar { max-height: 78vh; overflow-y: auto; }

.submenu-panel { display: none; width: 1000px; margin-inline: auto; }
.submenu-panel.on { display: block; }

.submenu-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.submenu-item {
  position: relative;
  padding-bottom: 30px;
  text-align: center;
  transition: opacity .15s;
}
/* Like the reference: the logo is an image at 70% of the column, its height
   left to the artwork. The image is whatever was uploaded against the platform
   row in /admin → 平台设定; a row with none gets the plate below. */
.submenu-item .logo {
  display: inline-block;
  width: 70%;
  height: auto;
  vertical-align: middle;
}
/* Fallback when a provider has no file yet. */
.submenu-item .logo.plate {
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  line-height: 1.25;
}
/* Platform tiles: seven across, as the artwork sheets are laid out.
   Named "tile" because Bootstrap owns .card — using that class here painted a
   white panel and a border behind every picture. */
.submenu-grid.tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding-bottom: 20px; }
.submenu-item.tile { padding-bottom: 0; }
.submenu-item.tile img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  transition: transform .15s;
}
.submenu-item.tile:hover img { transform: translateY(-3px); }

/* Hovering one entry dims the rest, exactly as the reference does. */
.submenu-grid:hover .submenu-item { opacity: .5; }
.submenu-grid .submenu-item:hover { opacity: 1; }

.submenu-item .pill-hot,
.submenu-item .pill-new {
  position: absolute;
  top: -5px;
  right: 12%;
  font-style: normal;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: normal;
}
.submenu-item .pill-hot { background: #ff650f; color: #fff; }
.submenu-item .pill-new { background: #e0092c; color: #fff; }

/* Mega menu behind the burger */
.mega {
  position: fixed;
  top: var(--header-h);
  left: 18px;
  width: 530px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 26px 30px 22px;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  z-index: 49;
}
.mega.open { display: grid; }
.mega-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 4px;
  font-size: 15px;
  color: var(--c-ink);
  border-radius: var(--radius-sm);
}
.mega-item:hover { background: var(--c-soft); color: var(--c-blue-mid); }
.mega-item .ico {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--c-blue-mid);
  font-size: 18px;
}
.mega-item.small { font-size: 15px; font-weight: 500; }
.mega-links {
  grid-column: 1;
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
}
.mega-links li { font-size: 12px; color: var(--c-muted); margin-bottom: 6px; }
.mega-links li::before { content: '•'; margin-right: 8px; color: var(--c-faint); }
.mega-links a:hover { color: var(--c-blue-mid); }
/* The drawer's own Login / Log Out, drawn as the header pair are. */
.mega .hdr-cta { grid-column: 1; margin-top: 10px; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  /* Follows the slideshow slot's shape (1920×430) instead of a fixed height,
     so an uploaded banner fills it edge to edge at every width and is never
     cropped. At 1920px wide this is the reference's 430px exactly. */
  aspect-ratio: 1920 / 430;
  height: auto;
  background: #000;
  overflow: hidden;
  /* Let the page still scroll vertically when a drag starts on the hero. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  outline: none;
}
.hero:active { cursor: grabbing; }
.hero-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-slide img { pointer-events: none; }
.hero-copy {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 60px;
  position: relative;
  z-index: 2;
  color: #fff;
}
.hero-copy .kicker { font-size: 18px; font-weight: 600; }
.hero-copy h1 { font-size: 40px; font-weight: 700; line-height: 1.15; margin: 6px 0 10px; }
.hero-copy p { font-size: 14px; opacity: .85; max-width: 420px; }

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-670px);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero-dots button {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  border: 0;
  background: #fff;
  opacity: .75;
  padding: 0;
  transition: width .2s ease;
}
.hero-dots button.active { width: 26px; background: var(--c-orange); opacity: 1; }

/* --- Promo strip --------------------------------------------------------- */
.promo-strip { padding: 26px 0 0; }
.promo-strip .rail-wrap { position: relative; }
.promo-strip .rail-btn { position: absolute; top: 50%; transform: translateY(-50%); }
.promo-strip .rail-btn.prev { left: -6px; }
.promo-strip .rail-btn.next { right: -6px; }
/* --- Uploaded artwork ----------------------------------------------------
   Managed pictures arrive pre-padded to the exact box, so they only ever need
   to fill it. */
/* contain, not cover: the whole banner shows. The padding baked into the file
   and this background are the same colour, so the seam is invisible. */
.hero-img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.hero-link { position: absolute; inset: 0; }
.promo-card.img { padding: 0; background: var(--c-soft); }
.promo-card.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-item .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.auth-side img.banner { width: 100%; height: 320px; object-fit: cover; display: block; }

/* --- Scrolling notice ----------------------------------------------------- */
.ticker-bar { background: #fff; border-bottom: 1px solid var(--c-line); }
.ticker-bar .container-x { display: flex; align-items: center; gap: 12px; height: 44px; }
.ticker-bar .ico { color: var(--c-red-badge); font-size: 15px; flex: 0 0 auto; }
.ticker-view { flex: 1; overflow: hidden; }
.ticker-track {
  display: inline-flex;
  gap: 70px;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll 34s linear infinite;
}
.ticker-view:hover .ticker-track { animation-play-state: paused; }
.ticker-msg { font-size: 13px; color: var(--c-body); }
.ticker-msg a { color: var(--c-blue-mid); text-decoration: underline; margin-left: 8px; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* --- Promotion detail ----------------------------------------------------- */
.promo-detail { max-width: 860px; }
.promo-detail .back-link { font-size: 13px; color: var(--c-muted); }
.promo-detail-img { width: 100%; border-radius: var(--radius-lg); margin: 16px 0 22px; display: block; }
.promo-detail h1 { font-size: 30px; font-weight: 600; margin-bottom: 12px; }
.promo-detail .lead { font-size: 15px; color: var(--c-body); margin-bottom: 20px; }
.rich { font-size: 14px; line-height: 1.75; color: var(--c-body); }
.rich table { border-collapse: collapse; margin: 14px 0; width: 100%; }
.rich table td, .rich table th { border: 1px solid var(--c-line); padding: 8px 12px; }
.rich img { max-width: 100%; height: auto; }
.rich ul, .rich ol { padding-left: 22px; margin: 10px 0; }

.promo-card {
  width: 268px;
  height: 84px;
  border-radius: var(--radius);
  padding: 12px 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.promo-card b { display: block; font-size: 14px; font-weight: 600; }
.promo-card span { font-size: 11px; opacity: .85; line-height: 1.3; display: block; }

/* --- Section scaffolding ------------------------------------------------- */
.sec { padding: 26px 0; }
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sec-head h2 {
  font-size: var(--fs-section);
  font-weight: 600;
  color: var(--c-ink);
  margin: 0;
}
.sec-head .see-all { font-size: 16px; text-decoration: underline; }

.tab-pills { display: flex; align-items: center; gap: 8px; }
.tab-pill {
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--c-muted);
  padding: 4px 18px;
  border-radius: var(--radius-pill);
  height: 28px;
  line-height: 20px;
}
.tab-pill.active { background: var(--c-orange); color: #fff; }

/* --- Live matches -------------------------------------------------------- */
.matches-panel {
  background: var(--c-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.match-hero { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
.match-hero .banner {
  height: 200px;
  border-radius: var(--radius);
  position: relative;
  padding: 22px 26px;
  color: #fff;
}
.match-hero .banner h3 { font-size: 18px; font-weight: 600; margin: 34px 0 12px; }
.match-hero .video {
  height: 200px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
.match-hero .video .play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #222;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.match-rail { margin-top: 14px; position: relative; }
.match-card {
  width: 330px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.match-card .mc-head {
  background: linear-gradient(to right, var(--c-purple-1), var(--c-purple-2));
  color: #fff;
  font-size: 13px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.match-card .mc-body { padding: 12px; display: flex; align-items: center; justify-content: space-between; }
.mc-odds { display: flex; gap: 8px; padding: 0 12px 12px; }
.mc-odds div {
  flex: 1;
  background: var(--c-soft);
  border-radius: 4px;
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.mc-odds div span { color: var(--c-muted); }

/* --- How to register -----------------------------------------------------
   Four cards read left to right with a chevron between them. The icon sits in
   a white disc that overhangs the top edge of its card, which is what stops
   the row reading as four boxes of text. */
.howto { text-align: center; padding: 54px 0 40px; }
.howto .eyebrow { font-size: 14px; font-weight: 600; color: var(--c-ink); }
.howto h2 { font-size: 34px; font-weight: 700; color: #14307d; margin: 4px 0 46px; }

.howto-steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  max-width: 1100px;
  margin-inline: auto;
}
.howto-arrow { align-self: center; font-size: 15px; color: #c9a45a; flex: 0 0 auto; }

.howto-step {
  /* minmax(0,…) in flex terms: the copy is translated and must be allowed to
     wrap rather than push its neighbours out of the row. */
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  margin-top: 22px;
  padding: 34px 16px 22px;
  border: 1px solid #eceff5;
  border-radius: 14px;
  background: linear-gradient(#fbfcfe, #f7f9fc);
}
/* The disc straddles the card's top border, so the card's own background
   would show through the gap without a solid fill of its own. */
.howto-step .ico {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #eef1f7, 0 4px 14px rgba(23, 43, 87, .07);
  display: grid;
  place-items: center;
}
.howto-step .ico .ic-svg { width: 27px; height: 27px; }
.howto-step b { display: block; font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.howto-step p { margin: 7px 0 0; font-size: 13px; color: var(--c-body); line-height: 1.55; }

/* --- Feature row ---------------------------------------------------------
   One wide dark band under the steps, carrying the artwork uploaded in /admin
   and, over its right-hand side, the match card typed there. More than one
   entry runs it on the hero's carousel script, so the shapes match: a flex
   track of full-width slides that the script translates by whole percentages
   of the band. */
.feature-row { padding: 18px 0 6px; }
.fr-band {
  position: relative;
  /* Follows the upload slot's shape (2000×620) rather than a fixed height, so
     an uploaded banner fills it edge to edge at every width. */
  aspect-ratio: 2000 / 620;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0a1730;
  touch-action: pan-y;
  user-select: none;
}
.fr-track { display: flex; height: 100%; will-change: transform; }
.fr-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }

.fr-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Covers the whole slide so the banner is clickable anywhere the card is not;
   the card sits above it on z-index and keeps its own links. */
.fr-link { position: absolute; inset: 0; z-index: 2; }

/* Drawn only when this language has no artwork. */
.fr-plate {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 78% 30%, rgba(56, 108, 205, .55), transparent 60%),
    linear-gradient(115deg, #071129 0%, #0d2148 52%, #14315f 100%);
}
.fr-copy {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 46px;
  color: #fff;
}
/* Only pulled back off the right-hand third when there is a card to make room
   for — a banner without one keeps the whole width for its copy. */
.fr-slide.has-card .fr-copy { max-width: 62%; }
.fr-copy .kicker { font-size: 15px; font-weight: 600; color: #f3cf86; }
.fr-copy h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  margin: 8px 0 6px;
  background: linear-gradient(#fbeec4, #d8ab52);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fr-copy p { font-size: 14px; color: rgba(255, 255, 255, .82); margin: 0 0 16px; }

.fr-chips { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
.fr-chips span {
  display: grid;
  grid-template-columns: 30px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  font-size: 12.5px;
}
.fr-chips i {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #cfe0ff;
}
.fr-chips b { font-weight: 600; color: #fff; }
.fr-chips em { font-style: normal; color: rgba(255, 255, 255, .68); }

.fr-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 34px;
  border-radius: var(--radius-pill);
  background: linear-gradient(#f6d999, #d2a34c);
  color: #2a1c05;
  font-size: 16px;
  font-weight: 700;
}
.fr-cta:hover { color: #2a1c05; filter: brightness(1.05); }

/* The match card. Glass over the artwork, so it reads on any banner without
   the operator having to leave a gap in their picture for it. */
.fr-match {
  position: absolute;
  z-index: 4;
  top: 6%;
  right: 3.2%;
  width: 31%;
  min-width: 290px;
  padding: 14px 16px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(12, 28, 58, .72);
  backdrop-filter: blur(9px);
  color: #fff;
}
.fm-head { text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 12px; }

.fm-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; }
.fm-side { text-align: center; min-width: 0; }
.fm-side .logo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  max-width: 76px;
  margin: 0 auto 6px;
  border-radius: 10px;
  background: #fff;
  color: var(--c-muted);
  font-size: 22px;
  overflow: hidden;
}
.fm-side .logo img { width: 100%; height: 100%; object-fit: contain; }
.fm-side b { display: block; font-size: 12px; font-weight: 500; line-height: 1.3; }

.fm-mid { text-align: center; padding-top: 12px; }
.fm-mid .vs { display: block; font-size: 22px; font-weight: 800; }
.fm-mid time { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; }

.fm-bet {
  display: block;
  margin: 12px auto 0;
  max-width: 60%;
  padding: 7px 0;
  border-radius: 7px;
  background: var(--c-red, #d8342c);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.fm-bet:hover { color: #fff; filter: brightness(1.08); }

.fm-odds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.fm-odds span {
  border-radius: 8px;
  padding: 7px 4px;
  text-align: center;
  background: rgba(255, 255, 255, .9);
  color: #17325e;
}
.fm-odds .o-a { background: linear-gradient(#dbe9ff, #c3d9fb); }
.fm-odds .o-b { background: linear-gradient(#fbe0e0, #f4cccc); }
.fm-odds b { display: block; font-size: 12.5px; font-weight: 600; }
.fm-odds em { display: block; font-style: normal; font-size: 14px; margin-top: 2px; }

.fm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .85);
}
.fm-foot b { font-weight: 700; color: #fff; }
.fm-foot .watchers { display: inline-flex; align-items: center; gap: 4px; }

.fr-dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 7px;
}
.fr-dots button {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, .55);
}
.fr-dots button.active { background: var(--c-orange); }

/* Under about 1000px the copy plate and the card would collide, so the card
   comes off and the banner is just the banner. */
@media (max-width: 1000px) {
  .fr-match { display: none; }
  .fr-slide.has-card .fr-copy { max-width: 100%; }
  .fr-copy { padding: 0 26px; }
  .fr-copy h2 { font-size: 30px; }
  .fr-chips { display: none; }
  .fr-dots { left: 26px; }
}

/* --- Game cards ---------------------------------------------------------- */
.game-rail-wrap { position: relative; }
.game-rail-wrap .rail-btn { position: absolute; top: 96px; }
.game-rail-wrap .rail-btn.prev { left: -10px; }
.game-rail-wrap .rail-btn.next { right: -10px; }

.game-card { width: 186px; }
.game-card .thumb {
  width: 186px;
  height: 140px;
  border-radius: var(--radius);
  position: relative;
}
.game-card .name {
  font-size: 13px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-card .name b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.game-card .prov { font-size: 12px; color: var(--c-muted); }
.game-card .pill-rtp { margin-top: 6px; }
.game-card .badge-corner { position: absolute; top: 8px; left: 8px; }

/* --- Partners / testimonials / news -------------------------------------- */
.partner-strip {
  background: var(--c-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  overflow: hidden;
}
/* The track holds the list twice and slides exactly one pass to the left, so
   the second copy is standing where the first started when the animation
   restarts and the loop has no seam. `--partner-n` comes from the markup and
   ties the duration to the length, so the marks travel at the same speed
   whether a country sells eight platforms or thirty. */
.partner-track {
  display: flex;
  width: max-content;
  animation: partner-slide calc(var(--partner-n, 10) * 2.6s) linear infinite;
}
.partner-strip:hover .partner-track { animation-play-state: paused; }
@keyframes partner-slide { to { transform: translateX(-50%); } }
.partner-strip .p-logo {
  /* A margin, not `gap` on the track: a gap would sit between the two passes as
     well as inside them, so half of it would be left over and the loop would
     jump by that much every time round. */
  flex: 0 0 auto;
  /* 2:1 — the shape /admin stores a logo at (PLATFORM_LOGO_BOX, 240×120), so
     the cell is the upload's own proportion and the artwork lands in it at the
     size it was saved, neither cropped nor letterboxed. **No card behind it**:
     the logo keeps the transparent background it was uploaded with, and a white
     rectangle would put one back. */
  width: 140px;
  height: 70px;
  margin-right: 12px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-body);
  text-align: center;
}
.partner-strip .p-logo img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .partner-track { animation: none; } }

/* --- Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--c-line); padding: 34px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1fr 1.1fr 1.2fr; gap: 30px; }
.foot-grid h5 { font-size: 13px; font-weight: 500; color: var(--c-ink); margin-bottom: 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 10px; }
.foot-grid li a { font-size: 13px; color: var(--c-muted); }
.foot-grid li a:hover { color: var(--c-blue-mid); }
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 200px; }
.cert-grid i {
  height: 30px;
  border-radius: 3px;
  background: var(--c-soft-2);
  display: block;
}
.foot-icons { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; padding: 30px 0; }
.foot-icons h5 { font-size: 12px; color: var(--c-body); margin-bottom: 14px; }

.seo-panel {
  background: var(--c-soft);
  border-radius: var(--radius-lg);
  padding: 22px 26px 26px;
  margin-bottom: 40px;
}
.seo-panel h6 { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.seo-panel p { font-size: 12px; color: var(--c-body); line-height: 1.7; margin: 0; }
.seo-panel a { color: var(--c-blue-light); }

/* --- Inner page furniture ------------------------------------------------ */
.page-hero {
  height: 370px;
  display: flex;
  align-items: center;
  color: #fff;
}
.page-hero h1 { font-size: 46px; font-weight: 700; margin-bottom: 6px; }
.page-hero .sub { font-size: 18px; font-weight: 500; line-height: 1.3; }
.page-hero .sub small { display: block; font-size: 13px; font-weight: 400; opacity: .85; margin-top: 8px; }

/* Equal cells, not a wrapping row of pills: a chip sized to its own text gives
   every row a different rhythm, and the logos need a box of a fixed shape to
   line up in. `minmax(150px, 1fr)` rather than a fixed count so the bar fills
   whatever width it is given. */
.provider-bar {
  background: var(--c-soft);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 26px;
}
.provider-chip {
  border: 1px solid transparent;
  background: #fff0;
  border-radius: var(--radius);
  padding: 8px 12px;
  min-height: 64px;
  min-width: 0;                 /* or a long name widens its own column */
  font-size: 13px;
  line-height: 1.3;
  color: var(--c-muted);
  display: grid;
  place-items: center;
  text-align: center;
  overflow-wrap: anywhere;
  position: relative;
}
.provider-chip img { max-width: 100%; max-height: 46px; object-fit: contain; }
.provider-chip.active { background: #fff; border-color: var(--c-orange); color: var(--c-ink); }
/* All three tags sit in the cell's own top-right corner. They used to hang
   outside it, which a wrapping row of pills had room for; a tight grid does
   not — the tag would land on the row above. */
.provider-chip .pill-hot,
.provider-chip .pill-new,
.provider-chip.maint .pill-maint { position: absolute; top: 4px; right: 4px; font-size: 9px; padding: 3px 5px; }

.filter-row { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 18px; gap: 16px; }
.filter-row .text-muted-2 { white-space: nowrap; }
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  min-width: 180px;
  color: var(--c-muted);
}
.search-box input { border: 0; outline: none; font-size: 13px; width: 100%; }
.sort-select {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  padding: 6px 14px;
  color: var(--c-muted);
  min-width: 150px;
}

/* minmax(0,…), not 1fr: the auto minimum of a grid item is its min-content
   width, and for a game card that is the game's own name — so one long name
   from a synced catalogue widens its column at the others' expense. */
.game-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.game-grid .game-card, .game-grid .game-card .thumb { width: 100%; }
.game-grid .game-card .thumb { height: 150px; }

.tile-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.tile-card .thumb {
  aspect-ratio: 1;
  border-radius: 22px;
  position: relative;
}
.tile-card .thumb .pill-new { position: absolute; top: 8px; left: 8px; }
.tile-card .name { font-size: 13px; margin-top: 10px; }
.tile-card .prov { font-size: 12px; color: var(--c-muted); }

/* Promotions */
.promo-item { display: grid; grid-template-columns: 430px 1fr; gap: 40px; padding: 22px 0; }
.promo-item .thumb { height: 140px; border-radius: var(--radius); }
.promo-item h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.promo-item p { font-size: 13px; color: var(--c-body); max-width: 380px; }
.promo-item .acts { display: flex; gap: 12px; margin-top: 30px; }
/* Size only — the blue fill and the shape come from the button family. */
.btn-info-blue { font-size: 14px; padding: 9px 22px; }

/* Auth pages */
.auth-wrap { background: var(--c-soft); min-height: calc(100vh - var(--header-h)); padding: 40px 0 70px; }
.auth-title { font-size: 22px; font-weight: 500; margin-bottom: 22px; }
.auth-grid { display: grid; grid-template-columns: 345px 1fr; gap: 18px; align-items: start; }
.auth-card { background: #fff; border-radius: var(--radius-lg); padding: 26px; }
.auth-card label { font-size: 13px; color: var(--c-body); margin-bottom: 5px; display: block; }
.auth-card label i { color: var(--c-red); font-style: normal; }
.auth-card .form-control, .auth-card .form-select {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  height: 38px;
  font-size: 14px;
}
.auth-card .field { margin-bottom: 14px; }
.auth-submit { width: 100%; height: 40px; font-size: 15px; margin-top: 16px; }
.auth-meta { text-align: center; font-size: 13px; color: var(--c-body); margin-top: 12px; }
.auth-meta a { color: var(--c-blue-light); text-decoration: underline; }
.auth-meta .create { color: var(--c-orange); text-decoration: none; }
.auth-note { text-align: center; font-size: 13px; color: var(--c-body); line-height: 1.6; border-top: 1px solid var(--c-line); margin-top: 20px; padding-top: 18px; }
/* Stands in for the login or registration form while that switch is off. */
.service-closed {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--c-soft);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  padding: 22px;
  margin: 10px 0 4px;
}
.service-closed i { font-size: 24px; color: var(--c-muted); }
.service-closed p { margin: 0; font-size: 14px; color: var(--c-body); line-height: 1.6; }

.auth-side { background: #fff; border-radius: var(--radius-lg); padding: 26px; text-align: center; }
.auth-side .banner { height: 260px; border-radius: var(--radius); }
.auth-side h3 { font-size: 26px; font-weight: 600; margin: 26px 0 22px; }
.auth-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.auth-perks .ico { font-size: 34px; color: var(--c-blue-mid); margin-bottom: 10px; }
.auth-perks b { font-size: 15px; font-weight: 500; display: block; }
.auth-perks span { font-size: 11px; color: var(--c-muted); }

/* --- Logged-in header ---------------------------------------------------- */
.hdr-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
}
.hdr-avatar:hover { color: #fff; }
.hdr-mail { position: relative; color: var(--c-blue-mid); font-size: 22px; line-height: 1; }
.hdr-mail:hover { color: var(--c-blue-mid); }
.hdr-mail .dot {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--c-red-badge);
  color: #fff;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}
.hdr-wallet { line-height: 1.2; }
.hdr-wallet .lbl { display: block; font-size: 12px; color: #0071e3; }
.hdr-wallet .amt { display: block; font-size: 17px; color: var(--c-ink); }
.hdr-wallet .amt i { font-size: 13px; color: var(--c-blue-light); margin-left: 2px; cursor: pointer; }
/* The header pair sets the height, so Deposit matches it rather than sitting
   a few pixels proud of Login beside it. */
.btn-deposit { height: 32px; padding: 0 18px; font-size: 15px; }

/* --- Header hover panels -------------------------------------------------
   The panel is padded away from the trigger by a transparent strip so the
   pointer can travel into it without the hover dropping. */
.hdr-item { position: relative; }
.hdr-pop {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 9px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(15, 22, 31, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 55;
}
.hdr-pop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  height: 13px;
}
.hdr-item:hover .hdr-pop,
.hdr-item:focus-within .hdr-pop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Message counts */
.pop-mail { width: 172px; padding: 10px 0; }
.pop-mail a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 18px;
  font-size: 13px;
  color: var(--c-muted);
}
.pop-mail a:hover { background: var(--c-soft); color: var(--c-blue-mid); }
.pop-mail em { font-style: normal; }

/* Cashier shortcuts */
.pop-cashier { width: 200px; padding: 13px; display: grid; gap: 8px; }
.pop-cashier a {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-soft);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--c-ink);
}
.pop-cashier a:hover { background: var(--c-soft-2); color: var(--c-blue-mid); }
.pop-cashier i { font-size: 18px; color: var(--c-blue-mid); }

/* Account summary */
.pop-account { width: 245px; padding: 18px 16px 10px; }
.pa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pa-head .hi { font-size: 14px; color: var(--c-ink); margin-bottom: 8px; }
.tier-pill {
  display: inline-block;
  background: var(--c-blue-mid);
  color: #fff;
  font-size: 11px;
  border-radius: var(--radius-pill);
  padding: 3px 14px;
}
.pa-head .vip { font-size: 10px; color: var(--c-muted); text-align: right; line-height: 1.5; }
.pa-head .vip b { display: block; font-size: 14px; font-weight: 400; color: var(--c-blue-light); }

.pa-progress {
  margin-top: 14px;
  background: #1b2430;
  border-radius: 6px;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #8f98a3;
}
.pa-progress a { color: #fff; font-size: 13px; white-space: nowrap; }

.pa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--c-soft);
  padding: 12px 14px;
}
.pa-row b { display: block; font-size: 13px; font-weight: 500; }
.pa-row span { font-size: 12px; color: var(--c-muted); }
.pa-row .btn-orange { font-size: 12px; padding: 5px 14px; }
.pa-row.muted { background: #eef0f2; color: var(--c-muted); }
.pa-row.muted b { color: var(--c-muted); }
.pa-row .kyc { display: inline-flex; align-items: center; gap: 6px; }

.pa-nav { padding-top: 6px; }
.pa-nav details { border-bottom: 1px solid var(--c-line); }
.pa-nav details:last-child { border-bottom: 0; }
.pa-nav summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pa-nav summary::-webkit-details-marker { display: none; }
.pa-nav summary > .bi:first-child { color: var(--c-blue-mid); font-size: 15px; }
.pa-nav summary .chev { margin-left: auto; font-size: 10px; color: var(--c-muted); font-weight: 400; }
.pa-nav details[open] summary .chev { transform: rotate(180deg); }
.pa-nav ul { list-style: none; margin: 0; padding: 0 0 8px; }
.pa-nav li a { display: block; padding: 7px 16px; font-size: 13px; color: var(--c-muted); border-radius: var(--radius-sm); }
.pa-nav li a:hover { background: var(--c-soft); color: var(--c-blue-mid); }

/* --- Member area --------------------------------------------------------- */
.acc-wrap { background: var(--c-soft); min-height: 70vh; padding: 30px 0 60px; }
.acc-grid { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }

/* Every group is open at once and every item wears its glyph — the supplied
   screen shows the whole menu, and eleven items over four headings do not need
   folding away. */
.acc-side { background: #fff; border-radius: var(--radius); padding: 10px 0 6px; }
.acc-group + .acc-group { border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 8px; }
.acc-group-hd {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 8px 18px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
}
.acc-group-hd .bi { font-size: 16px; color: var(--c-blue-mid); }
.acc-group ul { list-style: none; margin: 0; padding: 0 10px 6px; }
.acc-group li a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 8px;
  font-size: 14px;
  color: var(--c-body);
  border-radius: var(--radius-sm);
}
.acc-group li a .bi { flex: 0 0 18px; font-size: 15px; color: var(--c-muted); text-align: center; }
.acc-group li a:hover { background: var(--c-soft); color: var(--c-blue-mid); }
.acc-group li a:hover .bi { color: var(--c-blue-mid); }
.acc-group li a.active { background: #e7effc; color: var(--c-blue-mid); font-weight: 600; }
.acc-group li a.active .bi { color: var(--c-blue-mid); }

.acc-referral {
  margin-top: 14px;
  border-radius: var(--radius);
  padding: 22px 24px 30px;
  background: linear-gradient(160deg, #cfe2fb, #e5eeff 60%, #dfeafd);
  position: relative;
  overflow: hidden;
}
.acc-referral h4 { font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: 12px; }
.acc-referral p { font-size: 13px; color: var(--c-body); line-height: 1.5; }
.acc-referral .code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  background: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--c-ink);
}
.acc-referral .code i { color: var(--c-blue-mid); }

/* --- Member area: the head of every page --------------------------------
   Who is signed in, when they last were, and the two balances beside the way
   to top one of them up. */
.acc-welcome { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.acc-welcome h1 { font-size: 22px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; }
.acc-welcome h1 b { font-weight: 600; }
.acc-welcome h1 .ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-blue-mid);
  background: #e7effc;
  border-radius: var(--radius-pill);
  padding: 3px 11px;
}
.acc-welcome p { margin: 0 0 0 auto; font-size: 12.5px; color: var(--c-muted); }

.acc-cards {
  display: grid;
  /* minmax(0,…) so a long currency + balance cannot push the promo card out
     of the row. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.acc-bal {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
}
.acc-bal .lbl { font-size: 14px; font-weight: 600; color: var(--c-ink); }
.acc-bal .lbl .bi { font-size: 13px; color: var(--c-faint); }
.acc-bal .amt { font-size: 30px; font-weight: 700; color: var(--c-blue-mid); margin: 14px 0 18px; }
.acc-bal .amt span { font-size: 14px; font-weight: 500; color: var(--c-muted); }
.acc-bal .amt i { font-size: 15px; color: var(--c-blue-mid); cursor: pointer; }
.acc-bal .go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-blue-mid);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 11px 0;
  font-size: 15px;
  font-weight: 600;
}
.acc-bal .go:hover { color: #fff; filter: brightness(1.08); }
.acc-bal .tag {
  display: inline-block;
  background: var(--c-soft);
  color: var(--c-faint);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 12.5px;
}
/* The glyph is decoration, not a control: it sits behind the copy at low
   contrast so it never competes with the figure. */
.acc-bal .deco {
  position: absolute;
  right: 18px;
  top: 40px;
  font-size: 46px;
  color: #dbe6f8;
  pointer-events: none;
}
.acc-bal.locked { border-color: transparent; }
.acc-bal.locked .amt { color: var(--c-ink); }
.acc-bal.locked .deco { color: #dfe3ea; }

.acc-promo {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: var(--radius);
  padding: 22px 24px;
  background: linear-gradient(140deg, #14459c, #0e3178 70%);
  color: #fff;
}
.acc-promo:hover { color: #fff; }
.acc-promo b { display: block; font-size: 18px; font-weight: 700; }
.acc-promo span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .82); }
.acc-promo em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: #2a1c05;
  background: linear-gradient(#f6d999, #e6c076);
  border-radius: var(--radius-sm);
  padding: 9px 20px;
}
.acc-promo .deco { position: absolute; right: 16px; bottom: 12px; font-size: 62px; color: rgba(255, 255, 255, .14); }

/* --- Member area: cards --------------------------------------------------- */
.acc-card { background: #fff; border-radius: var(--radius); padding: 26px 30px 34px; }
.acc-card + .acc-card { margin-top: 14px; }
.acc-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.acc-card h3.acc-hd { display: flex; align-items: center; gap: 12px; font-size: 19px; }
.acc-hd .ic {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  background: #e7effc;
  color: var(--c-blue-mid);
  display: grid;
  place-items: center;
  font-size: 15px;
}

/* The security note above the first card. */
.acc-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef4fd;
  border: 1px solid #d7e5fa;
  border-radius: var(--radius);
  padding: 13px 16px;
  margin-bottom: 14px;
}
.acc-tip > .bi { font-size: 18px; color: var(--c-blue-mid); }
.acc-tip p { margin: 0; flex: 1; font-size: 13.5px; color: var(--c-body); }
.acc-tip button { border: 0; background: none; color: var(--c-faint); font-size: 13px; }

/* Two columns of read-only fields, each a label over its value with a hairline
   under it — the shape the supplied screen uses in place of the old table. */
.acc-split { display: grid; grid-template-columns: 1fr 268px; gap: 26px; align-items: start; }
.acc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.acc-fields .f { padding: 14px 0 13px; border-bottom: 1px solid var(--c-line); min-width: 0; }
.acc-fields .f:first-child, .acc-fields .f:nth-child(2) { padding-top: 0; }
.acc-fields .k { display: block; font-size: 13px; color: var(--c-muted); }
.acc-fields .v {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  font-size: 15px;
  color: var(--c-ink);
  min-width: 0;
}
.acc-fields .v > .edit, .acc-fields .v > .acc-pill { margin-left: auto; }

.acc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.acc-pill.ok { background: #e7f7ec; color: #1e9e50; }
.acc-pill.star { background: #fdf3dd; color: #c08b16; }

/* Bank accounts as cards, with the "add" tile last. */
.acc-banks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.acc-banks .bk {
  border-radius: var(--radius);
  background: var(--c-soft);
  padding: 16px 18px 18px;
  min-width: 0;
}
.acc-banks .bk-top { display: flex; align-items: center; gap: 10px; }
.acc-banks .bk-top b { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-banks .bk-top .acc-pill { margin-left: auto; }
.acc-banks .bk-top .flag, .acc-banks .bk-top .bank-logo { flex: 0 0 26px; width: 26px; height: 26px; }
.acc-banks .bk-no { margin: 14px 0 16px; font-size: 15px; letter-spacing: .04em; color: var(--c-ink); }
.acc-banks .bk .k { font-size: 12.5px; color: var(--c-muted); }
.acc-banks .bk-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.acc-banks .bk-foot .v { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-banks .bk-foot .acc-pill { margin-left: auto; }
.acc-banks .bk.add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  color: var(--c-blue-mid);
  background: #fafbfd;
  border: 1px dashed var(--c-line);
}
.acc-banks .bk.add .plus {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e7effc;
  display: grid;
  place-items: center;
  font-size: 17px;
}

/* Two-tab switcher used by Profile / Referral */
.acc-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.acc-tabs a {
  min-width: 116px;
  text-align: center;
  padding: 12px 22px;
  font-size: 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #b9bfc6;
  color: #fff;
}
.acc-tabs a.active { background: linear-gradient(to right, #095ebd, #04a9c2); }

/* Definition rows */
.acc-fields .edit {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: var(--c-soft);
  color: var(--c-body);
  display: grid;
  place-items: center;
  font-size: 13px;
  cursor: pointer;
}
.acc-fields .edit:hover { color: var(--c-blue-mid); }
/* Sits where the pencil would be on a field that can no longer be changed.
   Same box as .edit so the column does not shift between rows. */
.acc-fields .acc-locked {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--c-faint);
}

/* Sits in the second column of .acc-split, so it takes that column's width
   rather than a fixed one. */
.verify-card {
  background: var(--c-soft);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
}
.verify-card h5 { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.verify-card .icons { display: flex; gap: 18px; margin-bottom: 18px; }
.verify-card .acc-pill { font-size: 13px; padding: 5px 12px; }
/* Buttons now, not spans — each opens its own popup, so it has to look and
   behave like something you can press. */
.verify-card .icons button {
  position: relative;
  font-size: 19px;
  color: var(--c-blue-mid);
  background: none;
  border: 0;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}
.verify-card .icons button:hover { color: var(--c-blue-light); }
.verify-card .icons button.done::after {
  content: '\f26e';
  font-family: 'bootstrap-icons';
  position: absolute;
  right: -5px;
  bottom: -3px;
  font-size: 11px;
  color: var(--c-green);
  background: #fff;
  border-radius: 50%;
  line-height: 1;
}

/* Option pickers (deposit / withdraw) */
.opt-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.opt-card {
  width: 128px;
  min-height: 88px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-soft);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 10px 6px;
  font-size: 13px;
  color: var(--c-body);
  text-align: center;
  line-height: 1.25;
  position: relative;
  cursor: pointer;
}
.opt-card:hover { color: var(--c-body); }
.opt-card i { font-size: 24px; color: var(--c-blue-mid); }
.opt-card.active { border-color: var(--c-orange); border-width: 2px; background: #fff; }
.opt-card.dim { opacity: .45; }
.opt-card .ribbon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-orange);
  color: #fff;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
/* Green availability dot on the Normal Deposit bank tiles */
.opt-card .dot-online {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #29c76f;
}
/* Crypto network tiles carry two lines of meta, so they run taller */
.opt-card.net { width: 148px; min-height: 104px; gap: 2px; }
.opt-card.net b { font-size: 13px; font-weight: 400; margin-top: 2px; }
.opt-card.net small { font-size: 10px; color: var(--c-faint); }

.field-label { font-size: 13px; color: var(--c-muted); margin: 24px 0 10px; }
.field-label i { color: var(--c-red); font-style: normal; }
.need-help { float: right; font-size: 13px; color: var(--c-blue-light); }

.card-links { float: right; display: flex; gap: 22px; font-size: 13px; }
.card-links a { color: var(--c-blue-light); }
.card-links .offline-status { position: relative; color: var(--c-muted); }
.card-links .offline-status::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-red);
}

/* Amount input + its limit note */
.acc-input { max-width: 283px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); height: 40px; font-size: 14px; }
.amount-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.amount-input { position: relative; width: 283px; }
.amount-input .form-control { border: 1px solid var(--c-line); border-radius: var(--radius-sm); height: 40px; font-size: 14px; padding-right: 38px; }
.amount-input .clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--c-body);
  font-size: 13px;
}
.limit-note { font-size: 13px; color: var(--c-body); display: flex; align-items: center; gap: 7px; }
.limit-note i { color: var(--c-faint); }
.limit-note.warn { color: var(--c-red); max-width: 270px; line-height: 1.4; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; max-width: 460px; }
.amt-chip {
  border: 0;
  background: var(--c-soft);
  border-radius: var(--radius-sm);
  color: var(--c-muted);
  font-size: 14px;
  padding: 9px 0;
  width: 84px;
}
.amt-chip:hover { background: var(--c-soft-2); }

.withdrawable { font-size: 14px; color: var(--c-body); margin-top: 12px; }
.withdrawable b { color: var(--c-blue-light); font-weight: 400; }

.upload-note { font-size: 13px; color: var(--c-body); margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }
.upload-note i { color: var(--c-faint); }
.btn-upload { height: 40px; width: 258px; font-size: 15px; }
/* Was a pale blue of its own, which read as disabled next to a real button. */
.btn-addbank { width: 283px; height: 38px; font-size: 14px; margin-top: 16px; }
.add-round {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 0;
  border-radius: 50%;
  background: #b9bfc6;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
}

/* Crypto exchange-rate block on the withdraw page */
.rate-box { margin-top: 22px; }
.rate-box .lbl { font-size: 12px; color: var(--c-muted); letter-spacing: .02em; margin-bottom: 12px; }
.rate-box .grid { display: flex; align-items: center; gap: 60px; }
.rate-box .k { display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 6px; }
.rate-box .v { font-size: 13px; color: var(--c-ink); }
.rate-refresh { border: 0; background: none; color: var(--c-faint); font-size: 16px; }

/* Saved-account tables and their inline add form */
.acc-tabs.three a { min-width: 148px; }
.acc-table.saved thead th { text-align: left; padding-left: 18px; }
.acc-table.saved td { text-align: left; padding-left: 18px; border-bottom: 0; color: var(--c-muted); }
.acc-table.saved td.lead { display: flex; align-items: center; gap: 12px; color: var(--c-muted); }
.row-del { border: 0; background: none; color: var(--c-faint); font-size: 15px; }
.row-del:hover { color: var(--c-red); }

.side-form { display: grid; gap: 14px; max-width: 620px; }
.side-form > div { display: grid; grid-template-columns: 170px 283px; align-items: center; gap: 12px; }
.side-form label { font-size: 13px; color: var(--c-muted); margin: 0; }
.side-form label i { color: var(--c-red); font-style: normal; }
.side-form .form-control, .side-form .form-select {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  height: 40px;
  font-size: 14px;
}


/* Deposit speed tabs */
.speed-tabs { display: flex; gap: 4px; margin-bottom: 0; }
.speed-tabs a {
  flex: 0 0 138px;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #b9bfc6;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
}
.speed-tabs a small { display: block; font-size: 11px; opacity: .9; }
.speed-tabs a.active { background: linear-gradient(to right, #095ebd, #04a9c2); }

/* Stat pair on the withdraw page */
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.stat-box { background: var(--c-soft); border-radius: var(--radius); padding: 18px 22px; }
.stat-box .t { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-body); }
.stat-box .t i { font-size: 16px; }
.stat-box .n { font-size: 22px; color: var(--c-blue-light); margin-top: 8px; }
.stat-box .n span { font-size: 12px; color: var(--c-muted); }

/* Tables */
.acc-table { width: 100%; border-collapse: collapse; }
.acc-table thead th {
  background: var(--c-soft);
  font-size: 13px;
  font-weight: 400;
  color: var(--c-body);
  padding: 12px 10px;
  text-align: center;
}
.acc-table thead th:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.acc-table thead th:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.acc-table td { padding: 13px 10px; font-size: 13px; text-align: center; border-bottom: 1px solid var(--c-line); }
.acc-table .ok { color: var(--c-blue-light); }
.acc-empty { text-align: center; color: var(--c-muted); font-size: 13px; padding: 34px 0; }
.acc-count { text-align: center; font-size: 13px; color: var(--c-body); padding: 16px 0; }
.pager { display: flex; justify-content: center; gap: 6px; }
.pager a, .pager span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--c-muted);
}
.pager .on { background: var(--c-soft); color: var(--c-ink); }

/* Filter form */
.acc-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; max-width: 600px; }
.acc-filter label { font-size: 13px; color: var(--c-muted); display: block; margin-bottom: 6px; }
.acc-filter label i { color: var(--c-red); font-style: normal; }
.acc-filter .form-control, .acc-filter .form-select {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  height: 40px;
  font-size: 14px;
  color: var(--c-body);
}
.acc-submit { height: 40px; width: 283px; font-size: 15px; margin-top: 20px; }

/* Messaging */
.msg-tabs { display: flex; gap: 4px; }
.msg-tabs a {
  min-width: 132px;
  text-align: center;
  padding: 12px 18px;
  font-size: 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #b9bfc6;
  color: #fff;
}
.msg-tabs a.active { background: linear-gradient(to right, #095ebd, #04a9c2); }
.msg-toolbar { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--c-body); padding: 6px 0 20px; }
.msg-toolbar .right { margin-left: auto; display: flex; gap: 22px; }
.msg-toolbar .right span { display: flex; align-items: center; gap: 7px; color: var(--c-muted); cursor: pointer; }
.acc-table td.subj { text-align: left; font-size: 14px; line-height: 1.4; }
.acc-table td.subj.unread { font-weight: 600; }
.acc-table td.subj.read { color: var(--c-faint); }
.acc-table .row-acts { display: flex; gap: 16px; justify-content: center; color: var(--c-faint); }

/* Transfer wallets */
.turnover-bar {
  background: var(--c-soft);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--c-body);
  margin-bottom: 18px;
}
.turnover-bar b { color: var(--c-blue-light); font-weight: 400; }
.turnover-bar i { color: var(--c-orange); cursor: pointer; }
.wallet-group { font-size: 14px; color: var(--c-body); margin: 22px 0 12px; }
.wallet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wallet-card { background: var(--c-soft); border-radius: var(--radius); padding: 14px; position: relative; }
.wallet-card .top { display: flex; align-items: center; gap: 10px; }
.wallet-card .logo { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 34px; }
.wallet-card .nm { font-size: 13px; }
.wallet-card .bal { font-size: 13px; color: var(--c-blue-light); }
.wallet-card .plus {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #b9bfc6;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
}
.wallet-card .to {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 12px;
}
.wallet-card .allin {
  display: block;
  text-align: center;
  background: #9aa3ad;
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 12px;
  padding: 4px;
  margin-top: 8px;
}

/* Referral */
.ref-status { background: var(--c-soft); border-radius: var(--radius-sm); padding: 6px 16px; max-width: 270px; }
/* The two ladders, side by side when the card is wide enough for both.
   `auto-fit` rather than a count so a narrow window stacks them instead of
   squeezing four columns of money into 260px. */
.ref-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; }
.ref-note { font-size: 12px; color: var(--c-muted); line-height: 1.7; margin: 14px 0 0; }
.ref-status div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--c-muted); }
.copy-field { display: flex; align-items: center; gap: 10px; background: var(--c-soft); border-radius: var(--radius-sm); padding: 9px 14px; }
.copy-field input { border: 0; background: none; outline: none; flex: 1; font-size: 13px; color: var(--c-body); }
.copy-field i { color: var(--c-blue-light); cursor: pointer; }
.offer-card {
  border: 2px solid var(--c-orange);
  border-radius: var(--radius);
  width: 283px;
  overflow: hidden;
  text-align: center;
}
.offer-card .hd { font-size: 15px; color: var(--c-blue-light); padding: 12px; background: var(--c-soft); }
.offer-card div + div { border-top: 1px solid var(--c-line); }
.offer-card .ln { font-size: 13px; color: var(--c-body); padding: 8px; background: #fff; }

/* Notice / recent panels */
.acc-panel { background: #fff; border-radius: var(--radius); padding: 20px 26px 24px; margin-top: 14px; }
.acc-panel > .hd { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-body); margin-bottom: 14px; }
.acc-panel > .hd i.warn { color: var(--c-red); }
.acc-panel > .hd .chev { margin-left: auto; color: var(--c-muted); font-size: 12px; }
.acc-panel ul { padding-left: 18px; margin: 0; }
.acc-panel li { font-size: 13px; color: var(--c-muted); line-height: 1.7; }
.acc-more { display: block; text-align: center; font-size: 13px; text-decoration: underline; margin-top: 14px; }

/* --- VIP page -------------------------------------------------------------
   Drawn on the same white ground as every other page: the shell is the shell,
   and only the gold accent and the medals say this is the VIP one. A tier's
   colour arrives per element as `--c`, so the medal and its column share one
   accent without a class per tier. The names themselves print in ink — those
   colours are picked in /admin for a medal, and a pale one (silver, diamond)
   would be unreadable as text on white.

   Gold is the accent, but #c8a256 as text on white is too pale to read, so
   headings and bands use a darker draw of the same colour. */
.vip-page { --c-gold-ink: #96702a; }

.btn-gold {
  background: linear-gradient(135deg, #d4ac63, #b8893c);
  color: #1a1206;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  padding: 7px 26px;
}
.btn-gold:hover { color: #1a1206; filter: brightness(1.08); }

/* Hero */
.vip-hero {
  background:
    radial-gradient(ellipse 900px 420px at 22% 40%, rgba(200, 162, 86, .18), transparent 70%),
    linear-gradient(180deg, #fdfbf6 0%, var(--c-soft) 100%);
  border-bottom: 1px solid var(--c-line);
}
.vip-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
  padding: 74px 0 78px;
}
.vip-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold-ink);
  margin-bottom: 14px;
}
.vip-hero h1 {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--c-ink);
}
.vip-hero-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-body);
  max-width: 34em;
  margin: 0 0 26px;
}
.vip-hero-art { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }

/* Tab strip. The tabs are anchors down the page, so the strip has to stay
   reachable after the jump — hence sticky, under the header. */
.vip-tabbar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--c-line);
}
.vip-tabs { display: flex; gap: 6px; padding: 12px 0; }
.vip-tab {
  border-radius: var(--radius-pill);
  padding: 8px 22px;
  font-size: 14px;
  color: var(--c-muted);
  transition: background .15s, color .15s;
}
.vip-tab:hover { background: rgba(200, 162, 86, .14); color: var(--c-gold-ink); }

.vip-sec { padding: 62px 0 0; scroll-margin-top: calc(var(--header-h) + 60px); }
.vip-h2 { font-size: 26px; font-weight: 600; margin: 0 0 26px; color: var(--c-ink); }

/* About */
.vip-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 44px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 44px;
}
.vip-about h2 { font-size: 26px; font-weight: 600; color: var(--c-gold-ink); margin: 0 0 14px; }
.vip-about p { font-size: 15px; line-height: 1.8; color: var(--c-body); margin: 0 0 24px; }
.vip-about .art { aspect-ratio: 16 / 9; border-radius: var(--radius); }

/* Medal strip */
.vip-strip-sec {
  background: radial-gradient(ellipse 760px 300px at 50% 30%, rgba(17, 99, 207, .07), transparent 72%);
}
.vip-strip-title {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: var(--c-gold-ink);
  margin: 0 0 42px;
}
.vip-strip-title small {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 8px;
}
/* minmax(0, 1fr) rather than 1fr: a tier name is typed in /admin, and a long
   one must wrap inside its column instead of widening the strip. */
.vip-medals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  text-align: center;
}
.vip-medals li { display: grid; justify-items: center; gap: 10px; }
/* Grows with the tier, from `--i` on the item. Raising the middle one instead
   would say the middle tier is the best, which it is not. The hairline ring is
   what stops a pale tier dissolving into the white behind it. */
.vip-medal {
  width: calc(86px + var(--i, 0) * 9px);
  height: calc(86px + var(--i, 0) * 9px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 34px;
  color: rgba(0, 0, 0, .3);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45) 0%, transparent 46%),
    conic-gradient(from 210deg, var(--c), rgba(255, 255, 255, .5), var(--c), rgba(0, 0, 0, .22), var(--c));
  box-shadow:
    0 6px 18px rgba(15, 22, 31, .16),
    inset 0 0 0 5px rgba(255, 255, 255, .35),
    0 0 0 1px rgba(15, 22, 31, .08);
  object-fit: contain;
}
.vip-medal.sm {
  width: 52px;
  height: 52px;
  font-size: 18px;
  box-shadow: 0 3px 8px rgba(15, 22, 31, .14), 0 0 0 1px rgba(15, 22, 31, .08);
}
.vip-medals b { font-size: 15px; font-weight: 500; color: var(--c-ink); }
.vip-medals em {
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.3;
}

/* How it works */
.vip-journey { max-width: 900px; margin: 58px 0 0; }
.vip-journey h3 { font-size: 20px; font-weight: 600; margin: 0 0 18px; color: var(--c-ink); }
.vip-journey ol { margin: 0; padding-left: 20px; }
.vip-journey li { font-size: 14px; line-height: 2; color: var(--c-body); }
.vip-fine { font-size: 12.5px; line-height: 1.9; color: var(--c-muted); margin: 18px 0 0; }

/* Comparison table */
.vip-table-wrap { overflow-x: auto; }
.vip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 900px;
}
.vip-table th, .vip-table td { padding: 11px 14px; text-align: center; }
.vip-table thead th { padding: 6px 14px 20px; border-bottom: 1px solid var(--c-line); }
.vip-table thead th b { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--c-ink); }
.vip-table thead th .vip-medal { margin: 0 auto; }
.vip-table .lbl {
  text-align: left;
  font-weight: 400;
  color: var(--c-body);
  width: 32%;
  min-width: 260px;
}
.vip-table .lbl small { display: block; font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.vip-table .lbl.sub { padding-left: 30px; color: var(--c-muted); }
.vip-table .lbl.sub::before { content: "–"; margin-left: -14px; padding-right: 6px; color: var(--c-faint); }
.vip-table tbody tr:nth-child(even) { background: var(--c-soft); }
.vip-table tbody tr.band { background: none; }
.vip-table tbody tr.band td {
  text-align: left;
  padding: 30px 14px 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-gold-ink);
}
.vip-table td { color: var(--c-ink); }
.vip-table td.off { color: var(--c-faint); }
.vip-table td .bi-check-lg { color: var(--c-green); font-size: 19px; }
/* The renewal row is the last thing read before committing, so it is the one
   the eye should land on as the table ends. */
.vip-table tbody tr:last-child { background: rgba(200, 162, 86, .14); }

/* FAQ, referral and the rewards teaser */
.vip-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.vip-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 30px 32px;
  scroll-margin-top: calc(var(--header-h) + 70px);
}
.vip-card:target { box-shadow: 0 0 0 1px rgba(200, 162, 86, .55), var(--shadow-card); }
.vip-card h3 { font-size: 19px; font-weight: 600; color: var(--c-gold-ink); margin: 0 0 18px; }
.vip-card details { border-bottom: 1px solid var(--c-line); }
.vip-card details:last-of-type { border-bottom: 0; }
.vip-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink);
}
.vip-card summary::-webkit-details-marker { display: none; }
.vip-card summary .chev { margin-left: auto; font-size: 12px; color: var(--c-muted); transition: transform .18s; }
.vip-card details[open] summary .chev { transform: rotate(180deg); }
.vip-card details p { font-size: 13.5px; line-height: 1.85; color: var(--c-body); margin: 0 0 16px; }
.vip-refer p { font-size: 14.5px; line-height: 1.85; color: var(--c-body); margin: 0 0 14px; }
.vip-refer .btn { margin-top: 10px; }

.vip-rewards {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  background: linear-gradient(135deg, #f3f8ff, #e9f1ff);
  border: 1px solid #dbe6f7;
  border-radius: var(--radius-lg);
  padding: 40px 44px;
}
.vip-rewards h3 { font-size: 22px; font-weight: 600; color: var(--c-blue); margin: 0 0 14px; }
.vip-rewards p { font-size: 14.5px; line-height: 1.85; color: var(--c-body); margin: 0 0 16px; }
.vip-rewards ul { margin: 0; padding-left: 18px; }
.vip-rewards li { font-size: 14px; line-height: 2; color: var(--c-body); }
.vip-rewards li b { color: var(--c-ink); }
.vip-rewards .art { aspect-ratio: 16 / 10; border-radius: var(--radius); }

/* Closing call */
.vip-cta {
  margin-top: 70px;
  padding: 62px 0;
  text-align: center;
  background:
    radial-gradient(ellipse 700px 260px at 50% 100%, rgba(200, 162, 86, .22), transparent 70%),
    var(--c-soft);
  border-top: 1px solid var(--c-line);
}
.vip-cta h2 { font-size: 28px; font-weight: 600; margin: 0 0 12px; color: var(--c-ink); }
.vip-cta p { font-size: 15px; color: var(--c-body); margin: 0 0 24px; }

.acc-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  background: #fff;
  border-radius: var(--radius);
  padding: 13px;
  font-size: 14px;
  color: var(--c-body);
}
.acc-signout:hover { color: var(--c-red); }

/* --- Verification popups --------------------------------------------------
   Native <dialog>: the backdrop, Esc and focus trapping are the browser's job,
   so this file only has to dress the box. */
.vf {
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgba(9, 30, 66, .25);
}
.vf::backdrop { background: rgba(6, 20, 44, .55); }
.vf-box { padding: 26px 24px 22px; position: relative; }
.vf-box h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; padding-right: 24px; }
.vf-lead { font-size: 13px; color: var(--c-muted); line-height: 1.6; margin: 0 0 18px; }

.vf-x {
  position: absolute;
  top: 16px;
  right: 16px;
  border: 0;
  background: none;
  font-size: 15px;
  color: var(--c-muted);
  cursor: pointer;
  line-height: 1;
}
.vf-x:hover { color: var(--c-ink); }

.vf-lbl { display: block; font-size: 13px; color: var(--c-body); margin: 0 0 6px; }
.vf-box input, .vf-box select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 14px;
  margin-bottom: 16px;
}
.vf-box input[readonly] { background: var(--c-soft); color: var(--c-muted); }
.vf-row { display: flex; gap: 8px; align-items: start; }
.vf-row input, .vf-row select { flex: 1; margin-bottom: 0; }
.vf-row { margin-bottom: 16px; }
.vf-send {
  flex: 0 0 auto;
  padding: 9px 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-blue-mid);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.vf-help { font-size: 12px; color: var(--c-muted); margin: -6px 0 16px; line-height: 1.6; }
.vf-help a { color: var(--c-orange); }

/* Says why the buttons do nothing. Without it a dead Submit reads as a bug. */
.vf-locked {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.6;
  color: #8a6d1f;
  background: #fdf6e3;
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 0 0 18px;
}
.vf-locked i { margin-top: 2px; }

.vf-acts { display: flex; gap: 10px; }
.vf-acts .btn { flex: 1; justify-content: center; padding: 10px; font-size: 14px; }
/* Bootstrap ships `.btn:disabled { background-color: var(--bs-btn-disabled-bg) }`,
   which outranks `.btn-orange` and leaves a locked Submit with no fill at all.
   Restate the colour so a disabled button still reads as a button. */
.vf-acts .btn-orange,
.vf-acts .btn-orange:disabled {
  background: linear-gradient(135deg, var(--c-logo-orange-lit), var(--c-logo-orange-deep));
  color: #fff;
}
.vf-acts .btn:disabled, .vf-send:disabled { opacity: .5; cursor: not-allowed; }

/* Date-of-birth popup ------------------------------------------------------ */
.vf-dob { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; }
.vf-dob select { margin-bottom: 18px; }
.vf-err {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-red);
  background: #fdecec;
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 0 0 16px;
}
/* Confirmation above the profile card after a save. */
.acc-note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  border-radius: var(--radius);
  padding: 11px 15px;
  margin-bottom: 14px;
}
.acc-note.ok  { background: #e8f6ed; color: #1b7a42; }
.acc-note.err { background: #fdecec; color: #b3243d; }

/* Deposit: the steps that only appear once something is chosen ------------- */
.dep-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--c-muted);
  background: var(--c-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0 0;
}
.dep-hint i { font-size: 18px; }
.dep-amount-hint { font-size: 12px; color: var(--c-red); margin: 6px 0 0; }
/* The tiles are labels now, so the radio inside must not take up space. */
.opt-card { cursor: pointer; }
.opt-card .bank-logo, .m-opt .bank-logo { width: 48px; height: 48px; object-fit: contain; }
.dep-sender { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dep-add {
  width: 44px;
  height: 44px;
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--c-muted);
}
.dep-add:hover { border-color: var(--c-blue-mid); color: var(--c-blue-mid); }
/* Without scripting the whole form is shown rather than a dead end. */

/* Deposit Bank Account — the account a Bank Transfer is paid into ---------- */
.pay-to { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.pay-field { position: relative; }
.pay-field .form-control { padding-right: 44px; background: var(--c-soft); }
.pay-copy {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--c-blue-mid);
  font-size: 16px;
  cursor: pointer;
}
.pay-copy:hover { color: var(--c-blue-light); }
/* A tick for a moment, so a silent clipboard write is visibly a write. */
.pay-copy.copied { color: var(--c-green); }
.pay-copy.copied i::before { content: '\f26e'; }

/* A readonly field on the withdrawal form: it looks filled in rather than
   typed into, and says why underneath. */
.side-form input[readonly] { background: var(--c-soft); color: var(--c-muted); }
/* .side-form > div is a two-column grid (label | field), so a third child
   would land back under the label. Put the note in the field column. */
.side-note {
  grid-column: 2;
  display: block;
  font-size: 12px;
  color: var(--c-muted);
  margin-top: -4px;
  line-height: 1.5;
}

/* --- Confirm dialog -------------------------------------------------------
   Replaces the browser's confirm(): that one cannot be styled, announces the
   origin, and reads like a security warning rather than a question about the
   thing the reader just clicked. */
.cf {
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  width: min(380px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgba(9, 30, 66, .28);
}
.cf::backdrop { background: rgba(6, 20, 44, .55); }
.cf-box { padding: 28px 26px 22px; text-align: center; }
.cf-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: #fff4e5;
  color: var(--c-orange);
}
.cf-box h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.cf-box p { font-size: 14px; color: var(--c-muted); line-height: 1.6; margin: 0 0 22px; }
.cf-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-btn {
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.cf-btn.ghost { background: #fff; border-color: var(--c-line); color: var(--c-body); }
.cf-btn.ghost:hover { border-color: var(--c-muted); }
.cf-btn.go { background: var(--c-orange); color: #fff; }
.cf-btn.go:hover { filter: brightness(1.06); }
/* Destructive actions say so in the button, not just in the sentence. */
.cf-btn.go.danger { background: var(--c-red); }

/* Withdraw: a saved account tile carries its number under the bank name. */
.opt-card .wd-acct { display: block; font-size: 11px; color: var(--c-faint); margin-top: 2px; }
/* The two filled-in fields are shown, not typed into. */
.acc-filter input[readonly] { background: var(--c-soft); color: var(--c-muted); }
/* The saved-account table's logo, at row height. */
.bank-logo.sm { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin-right: 8px; }

/* Receipt upload — optional, and the chosen filename is echoed by hand
   because the real input is hidden inside a label. */
.upload-note .opt, .text-muted-2 .opt { color: var(--c-faint); }
.dep-file { font-size: 12px; color: var(--c-muted); word-break: break-all; }

/* Referral invitation popup ------------------------------------------------
   Opened by the code chip on the referral card. Wide and quiet: the whole
   point is a block of text somebody is about to copy into a chat. */
.rf {
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  width: min(620px, calc(100vw - 60px));
  box-shadow: 0 24px 60px rgba(9, 30, 66, .25);
  /* The close button hangs off the corner, and a dialog scrolls by default —
     without this it earns a scrollbar instead of letting the button out. */
  overflow: visible;
}
.rf::backdrop { background: rgba(6, 20, 44, .55); }
.rf-box { padding: 40px 38px 30px; position: relative; text-align: center; }
.rf-x {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--c-muted);
  box-shadow: 0 4px 14px rgba(9, 30, 66, .18);
}
.rf-msg { font-size: 16px; color: var(--c-ink); line-height: 1.7; margin: 0 0 22px; }
/* The link wraps rather than stretching the dialog — a referral code is short
   but the host in front of it does not have to be. */
.rf-link {
  display: block;
  font-size: 15px;
  color: var(--c-blue-light);
  word-break: break-all;
  margin-bottom: 26px;
}
.rf-acts { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.rf-copy, .rf-ok {
  border: 0;
  border-radius: var(--radius-sm);
  height: 44px;
  padding: 0 34px;
  font-size: 15px;
}
.rf-copy { background: var(--c-soft); color: var(--c-body); }
.rf-copy.copied { background: #e8f6ed; color: #1b7a42; }
.rf-ok { background: var(--c-blue-mid); color: #fff; }

/* The code chip is a button now, so it has to give back what a <button>
   takes away — it was an <a> when the card only linked somewhere. */
.acc-referral .code, .m-referral .code { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; }

/* Message reader ------------------------------------------------------------
   Wide and plain: the body is written by an operator and can be long, so the
   dialog gets out of its way and scrolls rather than clipping. */
.msgv {
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  box-shadow: 0 24px 60px rgba(9, 30, 66, .25);
  overflow: visible;
}
.msgv::backdrop { background: rgba(6, 20, 44, .55); }
.msgv-box {
  position: relative;
  padding: 28px 32px 30px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  border-radius: var(--radius-lg);
}
.msgv-x {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-muted);
  box-shadow: 0 4px 14px rgba(9, 30, 66, .18);
  display: grid;
  place-items: center;
  /* The scrolling box is painted after it in the DOM and would swallow the
     clicks otherwise. */
  z-index: 1;
}
.msgv-box h3 { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 0 0 6px; padding-right: 20px; }
.msgv-date { font-size: 12px; color: var(--c-faint); padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
/* The body is the operator's own markup, so it is given room rather than a
   house style — only the things that would break the dialog are constrained. */
.msgv-body { font-size: 15px; line-height: 1.75; color: var(--c-ink); padding-top: 20px; }
.msgv-body p { margin: 0 0 14px; }
.msgv-body a { color: var(--c-blue-light); text-decoration: underline; }
.msgv-body img { max-width: 100%; height: auto; }
.msgv-body table { width: 100%; border-collapse: collapse; }
.msgv-body td, .msgv-body th { border: 1px solid var(--c-line); padding: 6px 10px; }
.msgv-body hr { border: 0; border-top: 1px solid var(--c-line); margin: 22px 0; }
/* The toolbar's two actions post now; they were styled as <span>s. */
.msg-toolbar .right button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--c-muted);
  cursor: pointer;
}
.msg-toolbar .right button:hover { color: var(--c-blue-mid); }
.acc-table td.subj a { color: inherit; }
.acc-table td.subj a:hover { color: var(--c-blue-mid); }
.acc-table .row-acts button { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; }
.acc-table .row-acts button:hover { color: var(--c-red); }

/* Game cards that enter a game are links, and must not read as one. The
   provider bar and the category tabs above them only filter this grid. */
.game-card.play { display: block; text-decoration: none; color: inherit; }
.game-card.play:hover .thumb { filter: brightness(1.06); }
.game-card.play:hover .name b { color: var(--c-orange); }

/* A card with the platform's own picture instead of a gradient plate. */
.thumb.has-img { overflow: hidden; }
.thumb.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* Filtered out by the provider bar or the category tabs. */
[data-game-grid] > [hidden], [data-top-rail] > [hidden] { display: none; }
.grid-empty { padding: 60px 0; }

/* The chip of a platform under maintenance reads as unavailable without
   disappearing — hiding it is what the Hidden switch is for. */
.provider-chip.maint { opacity: .6; }

/* A tile that enters a game is a link, same as a game card. */
.tile-card.play { display: block; text-decoration: none; color: inherit; }
.tile-card.play:hover .thumb { filter: brightness(1.06); }
.tile-card.play:hover .name { color: var(--c-orange); }

/* Balance refresh ----------------------------------------------------------
   The button drops in wherever a balance is printed — the header strip, the
   two account cards, the withdraw tiles, the line under the amount box — so it
   carries no look of its own. It strips the browser's button furniture and
   inherits, which leaves the rules already written for `.amt i`, `.n i` and
   the rest to size and colour the icon exactly as they did when it was a bare
   <i> with nothing behind it. */
.bal-sync {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 1;
  vertical-align: baseline;
  cursor: pointer;
}

/* The figure's wrapper is only somewhere for the script to write. `<b>` is
   what it is — a wrapper that cannot be confused with the `<span>` these
   layouts already use for the currency code — and this takes the bold back
   off, so the number weighs what the plain text it replaced weighed. Any card
   that means its figure to be bold says so in its own rule, which is more
   specific than this one and wins. */
b[data-bal] { font-weight: inherit; }

/* Turning while the request is in flight, dimmed while the cooldown runs.
   Both are on the button rather than a wrapper so the mobile card's own
   refresh button gets them without inheriting anything else. */
[data-bal-sync][data-busy] i { display: inline-block; animation: bal-spin .8s linear infinite; }
[data-bal-sync]:disabled { opacity: .4; cursor: default; }
@keyframes bal-spin { to { transform: rotate(360deg); } }

/* Opening a game -----------------------------------------------------------
   Covers the gap between tapping a card and the platform handing back a URL —
   see the handler in the script for why that gap is half a second to a second
   before the game's own domain even starts loading.

   **It has to actually block.** A translucent sheet that let taps through
   would look like feedback and change nothing, which was the whole complaint:
   the second tap starts a second launch. `inset: 0` over everything, and the
   body loses its scroll so the list underneath cannot be moved either. */
.game-loading {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: rgba(8, 16, 30, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  /* The one thing a player may still do is leave. */
  cursor: wait;
}
.game-loading[hidden] { display: none; }
body.game-loading-on { overflow: hidden; }

.game-loading .gl-box {
  text-align: center;
  padding: 0 28px;
  max-width: 320px;
}

/* A ring rather than a graphic: no image to load at the exact moment the
   network is already busy fetching a game. */
.game-loading .gl-spin {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .22);
  border-top-color: #fff;
  animation: gl-spin .8s linear infinite;
}
@keyframes gl-spin { to { transform: rotate(360deg); } }

.game-loading .gl-name {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
}
/* No game name on the card — the hint carries it alone rather than leaving a
   gap where a title would have been. */
.game-loading .gl-name:empty { display: none; }

.game-loading .gl-hint {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.5;
}

/* A player who has asked their browser not to animate still needs to see that
   something is happening, so the ring stays and only stops turning. */
@media (prefers-reduced-motion: reduce) {
  .game-loading .gl-spin { animation: none; border-top-color: rgba(255, 255, 255, .8); }
}