/* meteor — component layer.
   main.css carries the Bootstrap-4-alpha grid/utilities plus the reference
   site's own rules (dark radial page, gold links, .card, .top-nav, .nav-tabs
   colours, .col-xs-5ths, .scrollbox, .icon-socmed). THIS file adds the pieces
   node_member needs that the reference site has no equivalent for — member
   bar, mobile menu panel, game grids, promo cards, form pages, data tables —
   all drawn in the same palette so the whole site reads as one design.

   Palette (fixed, not theme-switchable — see desktop/partials/header.ejs):
     page      radial-gradient(#242424 → black)
     link/accent  gold (#ffd700)
     surface   rgba(0,0,0,.5) with 1px #323232 border, 8px radius
     result    #24BBF2
     ok/warn/bad  #5cb85c / #f0ad4e / #d9534f
*/

/* Rules that re-styled portal_legacy.css components (nav links, the category
   strip, form controls, body font) were removed on 2026-08-15: app.css loads
   last, so each one silently overrode the reference and the page drifted from
   it in ways only a rendered screenshot showed. app.css now carries ONLY
   classes the reference has no rule for. */
/* ── Theme tokens (the layer the reference's theme sheet owns) ──────
   Direction matters: portal_legacy.css DERIVES its --color-* palette FROM
   these (--color-primary: var(--accent, #DAA520), --color-bg-card:
   var(--card-bg, #333333), …). The reference sets them per theme in
   assets/css/theme/<slug>.css; meteor ships no theme sheet, so all 26 fell
   back to literals and no rule could follow a palette.
   They are declared here with meteor's palette as the single source. Do NOT
   alias them back to --color-* — that forms a cycle, which makes BOTH sides
   invalid and blanks the entire palette (shipped and caught 2026-08-15). */
:root {
  --accent: #DAA520;
  --accent-soft: #F5C358;
  --accent-brand: #800000;
  --accent-danger: #d9534f;
  --accent-success: #5cb85c;
  --accent-info: #24BBF2;
  --theme-primary: var(--accent);
  --theme-secondary: var(--accent-soft);
  --color-secondary: #c0922a;
  --primary-bg: #000000;
  --secondary-bg: #222222;
  --panel-bg: #222222;
  --card-bg: #333333;
  --footer-bg: #000000;
  --sidebar-bg: #000000;
  --border-soft: #333333;
  --text-main: #ffffff;
  --text-muted: #cccccc;
  --text-muted-strong: #ffffff;
  --text-on-light: #1f2937;
  --text-on-light-muted: #4b5563;
  --result-pill-text: var(--accent);
  --provider-pill-text: var(--accent-soft);
  --scrollbar-thumb: rgba(220, 220, 220, 0.8);
  --dl-color-theme-accent1: #000000;
  /* Logo plates stay light on purpose: provider artwork is drawn for white. */
  --provider-plate-bg: #ffffff;
  --provider-plate-border: rgba(0, 0, 0, 0.15);
}

/* The mobile menu modal lives inside #app-header, and portal_legacy.css sets
   these three tokens ON #app-header — more specific than :root, so declaring
   them there had no effect and the modal kept Bootstrap's blue links
   (measured rgb(13,110,253)) on the #333 panel. Same selector, later sheet. */
#app-header {
  --legacy-mobile-menu-link-color: var(--accent);
  --legacy-mobile-menu-active-bg: var(--accent);
  --legacy-mobile-menu-active-color: #000000;
}

:root {
  /* Aliases, not a second palette. portal_legacy.css owns the site colours as
     --color-*; every --mtr-* below resolves to one of them, so the ~100 uses in
     this file follow the theme instead of pinning gold/#323232 forever.
     The second value is the fallback for a page that loads app.css alone. */
  --mtr-accent: var(--color-primary, #daa520);
  --mtr-surface: var(--color-bg-medium, rgba(0, 0, 0, 0.5));
  --mtr-surface-2: var(--color-bg-dark, rgba(0, 0, 0, 0.75));
  --mtr-line: var(--color-border-card, #323232);
  --mtr-line-2: var(--color-border-card, #4a4a4a);
  --mtr-ink: var(--color-text-white, #fff);
  --mtr-ink-2: var(--color-text-muted, #bdbdbd);
  --mtr-ink-3: var(--color-text-muted, #8a8a8a);
  --mtr-ok: var(--color-accent-green, #5cb85c);
  --mtr-warn: var(--color-accent-orange, #f0ad4e);
  --mtr-bad: var(--color-accent-red, #d9534f);
  --mtr-result: var(--color-result-digit, #24bbf2);
}


/* ── Header ─────────────────────────────────────────────────────── */
.logo-text {
  display: inline-block;
  padding: 8px 4px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--mtr-accent);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
#app-header.fixed .logo-text { font-size: 22px; transition: font-size .3s; }

.form-header-signin .form-header-signin .btn { min-width: 92px; }
.auth-msg {
  display: block;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}
.auth-msg-ok  { background: rgba(92, 184, 92, 0.18);  color: #b6ecb6; }
.auth-msg-err { background: rgba(217, 83, 79, 0.18);  color: #ffb3b1; }

/* Contact pills. main.css sizes `.icon-socmed img` only — meteor draws these
   with inline SVG (no icon font), which would otherwise render at its
   intrinsic 24px-viewBox size scaled to the container and blow up. */
.icon-socmed svg { width: 32px; height: 32px; vertical-align: middle; color: var(--mtr-accent); }/* Authenticated single-line member bar (clock · user/balance · actions). */
.member-bar { padding-top: 10px; font-size: 13px; color: var(--mtr-ink-2); }
.member-bar-item { color: var(--mtr-ink-2); text-decoration: none; }
.member-bar-item svg { vertical-align: -2px; margin-right: 3px; }
a.member-bar-item:hover { color: #fff; }
.member-bar .member-name { color: #fff; font-weight: 700; }
.member-bar-sep { margin: 0 6px; color: var(--mtr-line-2); }

/* ── Nav ────────────────────────────────────────────────────────── */
.navbar .dropdown { position: relative; }
.navbar .dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1010;
  min-width: 180px;
  padding: 4px 0;
  background: rgba(0, 0, 0, 0.95);
  border: solid 1px var(--mtr-line);
  border-radius: 6px;
}
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown.open .dropdown-menu { display: block; }
.navbar .dropdown .dropdown-item {
  display: block;
  padding: 7px 14px;
  color: var(--mtr-accent);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.navbar .dropdown .dropdown-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Hamburger drawn in CSS — the reference uses FontAwesome, which this
   template does not ship (SVG/CSS only, no icon font download). */
.navbar-toggler-bars { display: inline-block; width: 16px; height: 2px; background: currentColor; position: relative; vertical-align: 2px; }
.navbar-toggler-bars::before,
.navbar-toggler-bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.navbar-toggler-bars::before { top: -5px; }
.navbar-toggler-bars::after  { top: 5px; }.mobile-menu .btn { color: var(--mtr-accent); border-color: var(--mtr-line-2); font-weight: 700; }
.mobile-menu-panel {
  border-top: solid 1px var(--mtr-line);
  background: rgba(0, 0, 0, 0.92);
}
.mobile-menu-panel .nav-stacked { padding: 6px 0; margin: 0; list-style: none; }
.mobile-menu-panel .nav-link {
  display: block;
  padding: 10px 16px;
  color: var(--mtr-accent);
  font-weight: 700;
  font-size: 14px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.06);
}
.mobile-menu-panel .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-group-label {
  display: block;
  padding: 8px 16px 4px;
  color: var(--mtr-ink-3);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Announcement marquee ───────────────────────────────────────── */
.announcement {
  padding: 6px 0;
  background: rgba(0, 0, 0, 0.6);
  border-top: solid 1px var(--mtr-line);
  border-bottom: solid 1px var(--mtr-line);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

/* ── Home: lucky number widget ──────────────────────────────────── */
.widget-lucky-number .small { color: var(--mtr-ink-2); letter-spacing: 0.06em; }
.lucky-row { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.lucky-row.lucky-row-hot { background: var(--mtr-bad); border-radius: 4px; padding: 2px 6px; }
.lucky-digit {
  min-width: 34px;
  font-size: 26px;
  font-weight: 700;
  color: var(--mtr-ink-2);
  text-align: center;
}
.lucky-row-hot .lucky-digit { color: #fff; }

/* ── Home: category strip ───────────────────────────────────────── */
.game-tab-select:hover .game-tab-icon,
.game-tab-select:hover .game-tab-label,
.game-tab-select.active .game-tab-icon,
.game-tab-select.active .game-tab-label { color: var(--mtr-accent); }

/* ── Markets: desktop table + mobile cards ──────────────────────── */
.all-markets .nav-tabs { margin-bottom: 0; }
.all-markets .nav-tabs .nav-link {
  padding: 8px 16px;
  font-weight: 700;
  border: none;
  border-radius: 4px 4px 0 0;
}
.table-wrapper { border: solid 1px var(--mtr-line); border-top: none; background: var(--mtr-surface); }
.market-table { margin-bottom: 0; color: #fff; }
.market-table thead th {
  padding: 10px 8px;
  border-bottom: solid 2px var(--mtr-line-2);
  color: var(--mtr-ink-2);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.market-table tbody td { padding: 10px 8px; border-top: solid 1px rgba(255, 255, 255, 0.06); vertical-align: middle; }
.market-table tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.03); }
/* Market name is a <button> (it submits the launch form) but must read as the
   plain gold link the reference shows — strip the UA button chrome. */
.market-name {
  padding: 0;
  border: none;
  background: none;
  color: var(--mtr-accent);
  font: inherit;
  font-weight: 700;
  text-align: inherit;
  cursor: pointer;
}
.market-name:hover { color: #fff; text-decoration: none; }
.market-launch { display: inline; margin: 0; }
.market-table .market-round { color: var(--mtr-result); font-size: 12px; }
.market-result { color: var(--mtr-ok); font-size: 26px; font-weight: 700; letter-spacing: 0.04em; }
.market-closed { color: var(--mtr-bad); font-weight: 700; font-size: 12px; }

.card-market { margin-bottom: 12px; }
.card-market .card-block { padding: 10px; }
.card-market .card-title { color: var(--mtr-accent); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.card-market .badge-round {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--mtr-result);
  color: #04222f;
  font-size: 11px;
  font-weight: 700;
}
.card-market .badge-time {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(36, 187, 242, 0.85);
  color: #04222f;
  font-size: 11px;
  font-weight: 700;
}
.card-market .market-date { margin-top: 6px; color: var(--mtr-ink-2); font-size: 12px; }
.card-market .market-result { display: block; margin-top: 6px; font-size: 34px; }

/* ── Game grids (/games/:category) ──────────────────────────────── */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.game-tile {
  display: block;
  overflow: hidden;
  border: solid 1px var(--mtr-line);
  border-radius: 8px;
  background: var(--mtr-surface);
  text-align: center;
}
.game-tile img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.game-tile .game-name {
  display: block;
  padding: 8px 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-tile:hover { border-color: var(--mtr-accent); }
.provider-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.provider-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  min-height: 56px;
  padding: 6px 10px;
  border: solid 1px var(--provider-plate-border, rgba(0, 0, 0, 0.15));
  border-radius: 6px;
  /* Light plate, like the reference gives every provider logo. Provider artwork
     is drawn for white backgrounds — on the dark surface this used, anything
     with dark ink (NetEnt, RedTiger, NoLimitCity, SpadeGaming, 3Oaks)
     disappeared entirely. Measured plate luminance was 13%. */
  background: var(--provider-plate-bg, #fff);
  color: #222;
  font-weight: 700;
  font-size: 12px;
}
.provider-chip img { max-height: 40px; max-width: 96px; width: auto; object-fit: contain; }
.provider-chip.active { border-color: var(--mtr-accent); box-shadow: 0 0 0 2px var(--mtr-accent); }

/* ── Promotions ─────────────────────────────────────────────────── */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.promo-card { overflow: hidden; border: solid 1px var(--mtr-line); border-radius: 8px; background: var(--mtr-surface); }
.promo-card img { width: 100%; height: auto; display: block; }
.promo-card .promo-body { padding: 12px; }
.promo-card .promo-title { color: var(--mtr-accent); font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.promo-card .promo-text { color: var(--mtr-ink-2); font-size: 13px; line-height: 1.6; }

/* ── Member pages ───────────────────────────────────────────────
   The reference wraps every logged-in page in .main-content.bg-blur-content
   with an <h4> title, then cards: .card-profile (header strip + table) for
   account data, .card-block for panels. Tables carry TWO tbodys — a th/td one
   for ≥md and a stacked one for phones — which is why mobile reuses the same
   markup instead of a forked view. */
.main-content {
  /* The reference renders member pages inside its .container; meteor's <main>
     is full-bleed (#container-body.container-fluid), so the width and gutters
     have to come from here or every member page runs edge-to-edge. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 16px 24px;
}
.bg-blur-content { background: transparent; }
.main-content > h4 {
  margin: 0 0 12px;
  color: var(--mtr-accent);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.card-profile { margin-bottom: 14px; }
.card-profile .card-header {
  padding: 9px 14px;
  background: var(--mtr-surface-2);
  border-bottom: solid 1px var(--mtr-line);
  color: var(--mtr-accent);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.card-profile .table { width: 100%; margin: 0; color: #fff; font-size: 13px; }
.card-profile .table th,
.card-profile .table td {
  padding: 9px 14px;
  border-top: solid 1px rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}
.card-profile .table th {
  width: 42%;
  color: var(--mtr-ink-2);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}.card-profile .px-1 { padding: 10px 14px 0; color: var(--mtr-ink-2); font-size: 12px; letter-spacing: 0.05em; }

/* Deposit/withdraw tab strip — same shape as the market tabs but neutral. */
.main-content .nav-tabs { border-bottom: solid 1px var(--mtr-line); }
.main-content .nav-tabs .nav-link {
  padding: 8px 16px;
  border: none;
  color: var(--mtr-ink-2);
  font-weight: 700;
  font-size: 13px;
}
.main-content .nav-tabs .nav-link.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--mtr-accent);
  border-radius: 4px 4px 0 0;
}
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* Report filter/stepper buttons. Scoped to .main-content on purpose: a bare
   `.btn-group .btn` rule outranks `.btn-danger`/`.btn-warning` (two classes vs
   one) and silently bleached the header sign-in buttons. */
.main-content .btn-group .btn {
  padding: 6px 14px;
  border: solid 1px var(--mtr-line-2);
  background: var(--mtr-surface);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.main-content .btn-group .btn-primary { background: var(--mtr-accent); border-color: var(--mtr-accent); color: #1a1400; font-weight: 700; }
.main-content .btn-group .btn:hover { background: rgba(255, 255, 255, 0.1); }
.main-content .btn-group .btn-primary:hover { background: #ffe64d; color: #1a1400; }

/* Referral link rows (label + value + copy). */
.label-group { margin-bottom: 6px; }
.label-title {
  display: inline-block;
  min-width: 54px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--mtr-surface-2);
  color: var(--mtr-ink-2);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.label-content { margin-left: 8px; color: #fff; font-size: 13px; word-break: break-all; }

/* ── Forms + panels (deposit, withdraw, profile, register) ──────── */
.page-head { margin: 14px 0 10px; }
.page-head h1, .page-head h2 {
  margin: 0;
  color: var(--mtr-accent);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.page-head .page-sub { color: var(--mtr-ink-3); font-size: 13px; }

.panel { padding: 16px; border: solid 1px var(--mtr-line); border-radius: 8px; background: var(--mtr-surface); }
.panel + .panel { margin-top: 14px; }
.panel-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: solid 1px var(--mtr-line);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.form-group { margin-bottom: 12px; }
.form-group > label { display: block; margin-bottom: 4px; color: var(--mtr-ink-2); font-size: 13px; font-weight: 700; }select.form-control option { background: #1b1b1b; color: #fff; }
.form-hint { color: var(--mtr-ink-3); font-size: 12px; }
.form-error { color: #ffb3b1; font-size: 12px; }

.btn-mtr {
  display: inline-block;
  padding: 8px 18px;
  border: none;
  border-radius: 4px;
  background: var(--mtr-accent);
  color: #1a1400;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-mtr:hover { background: #ffe64d; color: #1a1400; }
.btn-mtr-ghost { background: transparent; border: solid 1px var(--mtr-line-2); color: #fff; }
.btn-mtr-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.btn-mtr[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Data tables (histories, referral, messages) ────────────────── */
.data-table { width: 100%; margin-bottom: 0; color: #fff; font-size: 13px; }
.data-table thead th {
  padding: 9px 8px;
  border-bottom: solid 2px var(--mtr-line-2);
  color: var(--mtr-ink-2);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.data-table tbody td { padding: 9px 8px; border-top: solid 1px rgba(255, 255, 255, 0.06); }
.data-table tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.03); }
.table-scroll { overflow-x: auto; }
.empty-state { padding: 28px 12px; color: var(--mtr-ink-3); text-align: center; font-size: 14px; }

.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.status-pill.is-ok      { background: rgba(92, 184, 92, 0.2);  color: #b6ecb6; }
.status-pill.is-pending { background: rgba(240, 173, 78, 0.2); color: #ffdca8; }
.status-pill.is-bad     { background: rgba(217, 83, 79, 0.2);  color: #ffb3b1; }

.pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.pager a, .pager span {
  padding: 5px 10px;
  border: solid 1px var(--mtr-line);
  border-radius: 4px;
  background: var(--mtr-surface);
  color: #fff;
  font-size: 13px;
}
.pager .is-current { background: var(--mtr-accent); border-color: var(--mtr-accent); color: #1a1400; font-weight: 700; }

/* ── Misc ───────────────────────────────────────────────────────── */
.footer-links { padding-left: 0; list-style: none; }
.footer-links li { padding: 3px 0; }
.footer-links a { color: var(--mtr-ink-2); font-size: 13px; }
.footer-links a:hover { color: var(--mtr-accent); }
/* Footer column headings are <div>, not <hN> — upstream moved every template
   off heading tags there so the page keeps one meaningful heading outline. */
.section-title {
  margin-bottom: 6px;
  color: var(--mtr-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal { margin-top: 18px; padding-top: 12px; border-top: solid 1px var(--mtr-line); color: var(--mtr-ink-3); }
.footer-article { margin-top: 14px; color: var(--mtr-ink-3); line-height: 1.7; }
.footer-article a { color: var(--mtr-accent); }

.card.card-block { padding: 14px; margin-bottom: 14px; }
.card.card-block h5 { color: var(--mtr-accent); font-size: 15px; font-weight: 700; }.btn-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Mobile: the header sign-in strip is hidden (BS4a .hidden-sm-down) and the
   home page shows the stacked form instead — same split as the reference. */
@media (max-width: 767px) {
  .logo-text { font-size: 26px; }
  .page-head h1, .page-head h2 { font-size: 17px; }
  .panel { padding: 12px; }
  .market-result { font-size: 22px; }
  /* Member bar wraps to its own centred line instead of fighting the logo. */
  .header-info { float: none !important; }
  .member-bar { padding-top: 6px; text-align: center; font-size: 12px; }
  .member-bar-sep { margin: 0 3px; }
  .card-market .market-result { font-size: 30px; }
}

/* main.css pins the lucky-number widget to the right edge from 768px up (the
   reference site's behaviour). At 768–1599px there is no free gutter there, so
   it lands on top of the Result column — the one number players come for. Float
   it only when the viewport is actually wide enough; below that it sits in the
   flow under the banner. */
@media (min-width: 768px) and (max-width: 1599px) {}
@media (min-width: 1600px) {}


/* ==========================================================================
   Game drill-down (games page). Lifted verbatim from the legacy repo's
   src/views/public/games.ejs <style> block, which is where that repo keeps
   these rules. Moved into the stylesheet here so the XHR page appends do not
   re-inject a <style> tag on every load.
   ========================================================================== */
  /* === Drill-down container — fills below header, dark theme. === */
  .game-drilldown-container {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
    color: var(--color-text-white, #fff);
  }

  /* === KEMBALI back button — boiji parity: btn-link with chevron-left,
     left-aligned above the title strip. Primary color so it's discoverable
     without overpowering the page title underneath. === */
  .game-drilldown-back-wrap {
    margin-bottom: 0.25rem;
  }
  .game-drilldown-back {
    color: var(--color-primary, #d4a520);
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
  }
  .game-drilldown-back:hover {
    color: var(--color-secondary, #d4a520);
    text-decoration: underline;
  }
  .game-drilldown-back i {
    margin-right: 0.25rem;
  }
  .game-drilldown-title {
    color: var(--color-text-white, #fff);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem 0;
    font-size: 1.05rem;
  }

  /* === Search bar — flat dark input + addon with circle-X. === */
  .game-drilldown-search {
    margin-bottom: 0.75rem;
  }
  .game-drilldown-search .form-control {
    background: var(--color-bg-medium, rgba(0,0,0,0.4));
    border: 1px solid var(--color-border-card, #333);
    color: var(--color-text-white, #fff);
    box-shadow: none;
    border-right: none;
  }
  .game-drilldown-search .form-control::placeholder {
    color: var(--color-text-muted, rgba(255,255,255,0.6));
  }
  .game-drilldown-search .form-control:focus {
    box-shadow: none;
    outline: none;
    border-color: var(--color-primary, #d4a520);
  }
  .game-drilldown-search .input-group-text {
    background: var(--color-bg-medium, rgba(0,0,0,0.4));
    border: 1px solid var(--color-border-card, #333);
    border-left: none;
    color: var(--color-text-muted, rgba(255,255,255,0.6));
  }
  .game-drilldown-search .btn-clear-game-filter {
    color: inherit;
    text-decoration: none;
    line-height: 1;
  }
  .game-drilldown-search .btn-clear-game-filter:hover {
    color: var(--color-primary, #d4a520);
  }

  /* === Card grid — boiji card-game-col tight padding. === */
  .game-drilldown-grid {
    margin-left: -2px;
    margin-right: -2px;
  }  .card-game-col .card.game-card-link {
    margin-bottom: 0;
    border: none;
    background: var(--color-bg-medium, rgba(0,0,0,0.4));
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border-radius: 4px;
    transition: transform 0.15s ease;
  }
  .card-game-col .card.game-card-link:hover {
    transform: translateY(-2px);
  }
  .card-game-col .card-game-logo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #000;
  }
  .card-game-col .card-game-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: block;
  }
  .card-game-col .card-game-label {
    min-height: 22px;
    line-height: 1.2;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-white, #fff);
    background: var(--color-bg-darkest, #000);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px;
    /* Full multi-line wrap, no ellipsis: long game names render in full. */
    white-space: normal;
  }

  /* === TAMPILKAN LEBIH — primary-colored link button. === */
  .btn-show-more.game-drilldown-more {
    color: var(--color-primary, #d4a520);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-size: 0.95rem;
  }
  .btn-show-more.game-drilldown-more:hover {
    color: var(--color-secondary, #d4a520);
    text-decoration: underline;
  }

/* HOT / RTP corner badges on a game tile. node_member surfaces both flags
   (mst_api_games.tags + RTP); the legacy drill-down has neither, so these few
   rules are ours — they only position Bootstrap badges inside the thumbnail. */
.card-game-col .card-game-logo { position: relative; }
.card-game-col .card-game-badge { position: absolute; top: 4px; left: 4px; font-size: 0.6rem; }
.card-game-col .card-game-rtp   { position: absolute; top: 4px; right: 4px; font-size: 0.6rem; }