/* JFun UI Kit v1 - single source of the shared look. Edit only via a "Design Change" step. */

/* ===================== TOKENS ===================== */
:root {
  --ui-overlay: rgba(6,2,10,0.72);
}
html[data-theme="light"] { --ui-overlay: rgba(0,0,0,0.45); }

/* P11 tokens (forms, semantic pastels, modal glass). Opaque pastels on purpose: text keeps >= 4.5:1 on any background behind them. */
html:root {
  --ui-glass-modal: rgba(255, 255, 255, 0.88);
}
html[data-theme="dark"]:root {
  --ui-glass-modal: rgba(44, 22, 46, 0.88);
}
/* reduced transparency / no backdrop-filter: modal glass turns opaque (same rule as the other glass tokens) */
@media (prefers-reduced-transparency: reduce) {
  html:root { --ui-glass-modal: #FFFFFF; }
  html[data-theme="dark"]:root { --ui-glass-modal: #2C162E; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root { --ui-glass-modal: #FFFFFF; }
  html[data-theme="dark"]:root { --ui-glass-modal: #2C162E; }
}

/* ===================== BASE ===================== */
/* Doubled body class on purpose: beats html body.jg-<page> rules; applies to nothing until a page has class jg-ui. */
html body.jg-ui.jg-ui { font-family: var(--ui-font-body); color: var(--ui-text); }
html body.jg-ui.jg-ui button,
html body.jg-ui.jg-ui input,
html body.jg-ui.jg-ui select,
html body.jg-ui.jg-ui textarea { font-family: inherit; }
html body.jg-ui.jg-ui [class^="jx-"],
html body.jg-ui.jg-ui [class*=" jx-"] { transition: background-color var(--ui-ease), border-color var(--ui-ease), color var(--ui-ease), box-shadow var(--ui-ease), transform var(--ui-ease), opacity var(--ui-ease); }
@media (prefers-reduced-motion: reduce) {
  html body.jg-ui.jg-ui * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* layout helper for NEW pages only */
html body.jg-ui.jg-ui .jx-container { max-width: 560px; margin: 0 auto; padding: 0 var(--ui-s4); }

/* Pastel Pink Glass: ONE fixed background layer (light theme only, no animation) */
html[data-theme="light"] body.jg-ui::before {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, var(--jf-blob-pink), transparent) no-repeat left -14vmax top -12vmax / 62vmax 62vmax,
    radial-gradient(closest-side, var(--jf-blob-lilac), transparent) no-repeat right -16vmax top 32% / 58vmax 58vmax,
    radial-gradient(closest-side, var(--jf-blob-peach), transparent) no-repeat left 8% bottom -18vmax / 56vmax 56vmax;
}
/* no backdrop-filter support: glass surfaces become solid so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root, html[data-theme="dark"]:root { --jf-glass: var(--jf-solid); --jf-glass-strong: var(--jf-solid); }
  html[data-theme="light"] body.jg-ui::before { display: none; }
}

/* ===================== KIT A (layout components, filled in Step 3) ===================== */

/* A1 TOP BAR - the ONLY place that styles .navbar and its parts (markup: includes/topbar.php). Glass bar from the theme tokens (--ui-surface / --ui-border / --ui-shadow, blur from --jf-blur). */
html body.jg-ui.jg-ui:not(.jg-admin) .navbar,
html body.jg-ui.jg-ui .jx-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-s2);
  position: sticky;
  top: calc(var(--ui-s2) + env(safe-area-inset-top, 0px));
  z-index: 100;
  min-height: var(--ui-topbar-h);
  margin-bottom: var(--ui-gap);
  padding: var(--ui-s2) var(--ui-s3);
  border-radius: var(--ui-r-md);
  background: var(--ui-surface);
  -webkit-backdrop-filter: var(--jf-blur);
  backdrop-filter: var(--jf-blur);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
}

/* A1b TOP BAR STAYS PUT: many pages have an inline body { overflow-x: hidden }, which makes body a scroll container and stops the sticky .navbar from sticking. html already clips sideways (jfun-game.css), so body stays visible. Login / register keep their scrolling bar by design. */
html body.jg-ui.jg-ui:not(.jg-admin):not(.jg-auth) { overflow-x: visible; }

/* A1c WIDE CARDS (opt-in: body class jg-wide). No big background card: .merged-card turns into a plain wrapper, every stat card becomes its own full-width card (title + subtitle left, value right), and loose blocks (lobby head, stake box, search timer, messages, empty states, filter) get the same card look. Same idea as the Room page. Game boards / match screens are not touched. */
html body.jg-ui.jg-ui.jg-wide .merged-card {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
html body.jg-ui.jg-ui.jg-wide .stats-container:not(.jg-bet-stats) {
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap);
}
html body.jg-ui.jg-ui.jg-wide .stats-container:not(.jg-bet-stats) > .stat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head value" "sub value";
  align-items: center;
  column-gap: var(--ui-gap);
  row-gap: 2px;
  min-height: 72px;
  padding: var(--ui-pad-md) var(--ui-pad-lg);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow), inset 0 1px 0 var(--ui-glass-edge);
}
html body.jg-ui.jg-ui.jg-wide .stats-container:not(.jg-bet-stats) > .stat-card > .stat-card-header { grid-area: head; margin: 0; }
html body.jg-ui.jg-ui.jg-wide .stats-container:not(.jg-bet-stats) > .stat-card > .stat-card-value { grid-area: value; margin: 0; text-align: right; overflow-wrap: anywhere; }
html body.jg-ui.jg-ui.jg-wide .stats-container:not(.jg-bet-stats) > .stat-card > .stat-card-subtitle { grid-area: sub; margin: 0; }
html body.jg-ui.jg-ui.jg-wide :is(.merged-card > .empty-state, .wh-filter) {
  box-sizing: border-box;
  padding: var(--ui-pad-md) var(--ui-pad-lg);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  background: var(--jf-glass-strong);
  box-shadow: var(--ui-shadow), inset 0 1px 0 var(--ui-glass-edge);
}

html.jf-fit-on body.jg-ui.jg-ui:not(.jg-admin) .navbar {
  margin-bottom: var(--ui-s2);
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .logo,
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .menu-toggle,
html body.jg-ui.jg-ui .jx-topbar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-s2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--ui-s3);
  border-radius: var(--ui-r-pill);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-md);
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo {
  height: 36px;
  width: auto;
}
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo-link {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ui-s2);
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .user-info {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-sm);
  position: relative;
  min-width: 0;
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-s2);
  min-height: var(--ui-tap-sm);
  padding: 0 var(--ui-s4);
  border-radius: var(--ui-r-pill);
  border: 0;
  background: var(--ui-grad);
  color: var(--ui-on-accent);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--ui-accent-shadow);
}

/* balance chip: nothing in here may clip (no overflow:hidden, no ellipsis) so the currency badge is always fully visible */
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display,
html body.jg-ui.jg-ui .jx-balance {
  display: flex;
  align-items: center;
  gap: var(--ui-s2);
  flex: 0 1 auto;
  min-width: 0;
  min-height: var(--ui-tap-sm);
  padding: 0 var(--ui-s3);
  border-radius: var(--ui-r-pill);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-sm);
  font-weight: 700;
  color: var(--ui-text);
  cursor: pointer;
  overflow: visible;
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-text {
  display: flex;
  align-items: center;
  gap: var(--ui-s1);
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
  font-size: var(--ui-fs-sm);
  font-variant-numeric: tabular-nums;
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-text #balance-amount {
  min-width: 0;
  overflow: visible;
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display i {
  flex: none;
  color: var(--ui-accent);
}

/* A1b CURRENCY BADGE (PKR / USDT / INR pill in the top bar balance) */
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display .currency-text,
html body.jg-ui.jg-ui .jx-currency {
  position: relative;
  flex: none;
  padding: var(--ui-s1) var(--ui-s2);
  border: 1px solid var(--ui-accent);
  border-radius: var(--ui-r-pill);
  background: var(--ui-grad-soft);
  color: var(--ui-text);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-xs);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  cursor: pointer;
  opacity: 1;
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display .currency-text::after {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -6px;
  right: -6px;
}

/* A1c CURRENCY DROPDOWN (page JS only flips style.display) */
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .currency-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 130px;
  margin-top: var(--ui-s1);
  overflow: hidden;
  background: var(--jf-solid);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  box-shadow: var(--ui-shadow);
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .currency-option {
  display: flex;
  align-items: center;
  gap: var(--ui-s2);
  min-height: var(--ui-tap);
  padding: 0 var(--ui-s3);
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: var(--ui-ease);
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .currency-option:last-child {
  border-bottom: 0;
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .currency-option:hover {
  background: var(--ui-grad-soft);
}

html body.jg-ui.jg-ui:not(.jg-admin) .navbar .currency-option.active {
  background: var(--ui-grad-soft);
  color: var(--ui-accent);
}

@media (max-width: 360px) {
  html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display,
  html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-text {
    font-size: var(--ui-fs-xs);
  }
  html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display {
    padding: 0 var(--ui-s2);
    gap: var(--ui-s1);
  }
}

@media (prefers-reduced-transparency: reduce) {
  html body.jg-ui.jg-ui:not(.jg-admin) .navbar,
  html body.jg-ui.jg-ui .jx-topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* A2 PAGE TITLES */
html body.jg-ui.jg-ui .section-title,
html body.jg-ui.jg-ui .action-title,
html body.jg-ui.jg-ui .jx-title {
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-lg);
  font-weight: 700;
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .jx-subtitle,
html body.jg-ui.jg-ui .action-subtitle,
html body.jg-ui.jg-ui .stat-card-subtitle {
  font-size: var(--ui-fs-xs);
  color: var(--ui-muted);
  font-weight: 500;
}

/* A3 CARDS */
html body.jg-ui.jg-ui .merged-card,
html body.jg-ui.jg-ui .balance-card,
html body.jg-ui.jg-ui .jx-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .jx-card {
  padding: var(--ui-s4);
}

/* A4 STAT CARD (after A3 on purpose: .stat-card.balance-card / .amount-card keep the stat look) */
html body.jg-ui.jg-ui:not(.jg-admin) .stat-card,
html body.jg-ui.jg-ui .jx-stat {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  padding: var(--ui-s3);
  box-shadow: none;
}

html body.jg-ui.jg-ui .stat-card-title,
html body.jg-ui.jg-ui .jx-stat-label {
  font-size: var(--ui-fs-xs);
  color: var(--ui-muted);
  font-weight: 600;
}

html body.jg-ui.jg-ui .stat-card-value,
html body.jg-ui.jg-ui .jx-stat-value {
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-lg);
  font-weight: 700;
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .stat-card-icon {
  color: var(--ui-accent);
}

/* A5 ACTION TILE */
html body.jg-ui.jg-ui:not(.jg-admin) .action-btn,
html body.jg-ui.jg-ui .jx-tile {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  color: var(--ui-text);
  min-height: 72px;
  box-shadow: var(--ui-shadow);
}

html body.jg-ui.jg-ui .action-icon {
  color: var(--ui-accent);
}

/* A6 TABS */
html body.jg-ui.jg-ui:not(.jg-admin) .tab,
html body.jg-ui.jg-ui .jx-tab {
  min-height: var(--ui-tap-sm);
  padding: 0 var(--ui-s4);
  border-radius: var(--ui-r-pill);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-sm);
  font-weight: 700;
  color: var(--ui-muted);
  background: transparent;
  border: 1px solid transparent;
}

html body.jg-ui.jg-ui .tab.active,
html body.jg-ui.jg-ui .jx-tab.active {
  background: var(--ui-grad);
  color: var(--ui-on-accent);
}

html body.jg-ui.jg-ui .tabs,
html body.jg-ui.jg-ui .tabs-container,
html body.jg-ui.jg-ui .jx-tabs {
  background: var(--ui-surface-solid);
  border-radius: var(--ui-r-pill);
  border: 1px solid var(--ui-border);
}

html body.jg-ui.jg-ui .tab-badge {
  border-radius: var(--ui-r-pill);
  font-size: var(--ui-fs-xs);
  font-weight: 700;
}

/* A7 PAGINATION */
html body.jg-ui.jg-ui .jx-page-btn {
  min-width: var(--ui-tap-sm);
  min-height: var(--ui-tap-sm);
  border-radius: var(--ui-r-sm);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-size: var(--ui-fs-sm);
  font-weight: 600;
}

html body.jg-ui.jg-ui .jx-page-btn.active {
  background: var(--ui-grad);
  color: var(--ui-on-accent);
  border-color: transparent;
}

html body.jg-ui.jg-ui .jx-page-btn:disabled,
html body.jg-ui.jg-ui .jx-page-btn.disabled {
  opacity: 0.45;
}

/* A8 EMPTY STATE */
html body.jg-ui.jg-ui .empty-state,
html body.jg-ui.jg-ui .jx-empty {
  color: var(--ui-muted);
  font-size: var(--ui-fs-sm);
}

html body.jg-ui.jg-ui .empty-state i,
html body.jg-ui.jg-ui .jx-empty i {
  color: var(--ui-muted);
  opacity: 0.7;
}

/* A9 HISTORY / LIST TEXT */
html body.jg-ui.jg-ui .history-user,
html body.jg-ui.jg-ui .detail-value {
  font-size: var(--ui-fs-sm);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .history-details,
html body.jg-ui.jg-ui .info-list {
  font-size: var(--ui-fs-sm);
  color: var(--ui-muted);
}

/* ===================== KIT B (forms, buttons, modal, toast, filled in Step 4) ===================== */

/* B1 BUTTONS (no width on any button; .jg-btn(.jg-btn--ghost) are named here because the task lists them and index.php uses them) */
html body.jg-ui.jg-ui:not(.jg-admin) .btn,
html body.jg-ui.jg-ui:not(.jg-admin) .modal-btn,
html body.jg-ui.jg-ui .copy-btn-small,
html body.jg-ui.jg-ui .jx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-s2);
  min-height: var(--ui-tap);
  padding: 0 var(--ui-s5);
  border-radius: var(--ui-r-md);
  border: 0;
  background: var(--ui-grad);
  color: var(--ui-on-accent);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-md);
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: var(--ui-accent-shadow);
  cursor: pointer;
  transition: var(--ui-ease);
}

html body.jg-ui.jg-ui .copy-btn-small,
html body.jg-ui.jg-ui .jx-btn--sm {
  min-height: var(--ui-tap-sm);
  padding: 0 var(--ui-s4);
  font-size: var(--ui-fs-sm);
}

html body.jg-ui.jg-ui .modal-btn.cancel,
html body.jg-ui.jg-ui .jx-btn--ghost {
  background: transparent;
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  box-shadow: none;
}

html body.jg-ui.jg-ui .jx-btn--danger {
  background: var(--ui-bad);
  box-shadow: none;
}

html body.jg-ui.jg-ui .btn:disabled,
html body.jg-ui.jg-ui .modal-btn:disabled,
html body.jg-ui.jg-ui .copy-btn-small:disabled,
html body.jg-ui.jg-ui .jx-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

html body.jg-ui.jg-ui .btn.disabled,
html body.jg-ui.jg-ui .modal-btn.disabled,
html body.jg-ui.jg-ui .copy-btn-small.disabled,
html body.jg-ui.jg-ui .jx-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

html body.jg-ui.jg-ui .btn:active,
html body.jg-ui.jg-ui .modal-btn:active,
html body.jg-ui.jg-ui .copy-btn-small:active,
html body.jg-ui.jg-ui .jx-btn:active {
  opacity: 0.9;
}

/* B2 INPUTS (P11: glass field, NO blur because fields sit inside blurred cards; pastel focus ring; no padding: icon insets belong to the pages) */
html body.jg-ui.jg-ui .form-group input,
html body.jg-ui.jg-ui .form-group select,
html body.jg-ui.jg-ui .form-group textarea,
html body.jg-ui.jg-ui .input-group input,
html body.jg-ui.jg-ui .input-group select,
html body.jg-ui.jg-ui .jx-input,
html body.jg-ui.jg-ui .jx-select,
html body.jg-ui.jg-ui .jx-textarea {
  min-height: var(--ui-tap);
  border-radius: var(--ui-r-sm);
  background: var(--ui-input-bg);
  border: 1px solid var(--ui-input-border);
  box-shadow: inset 0 1px 0 var(--ui-glass-edge);
  color: var(--ui-text);
  font-size: var(--ui-fs-md);
  transition: border-color var(--ui-ease), box-shadow var(--ui-ease), background-color var(--ui-ease);
}

html body.jg-ui.jg-ui .jx-textarea,
html body.jg-ui.jg-ui .form-group textarea { min-height: calc(var(--ui-tap) * 2); }

html body.jg-ui.jg-ui .form-group input:hover:not(:disabled):not(:focus),
html body.jg-ui.jg-ui .form-group select:hover:not(:disabled):not(:focus),
html body.jg-ui.jg-ui .form-group textarea:hover:not(:disabled):not(:focus),
html body.jg-ui.jg-ui .input-group input:hover:not(:disabled):not(:focus),
html body.jg-ui.jg-ui .input-group select:hover:not(:disabled):not(:focus),
html body.jg-ui.jg-ui .jx-input:hover:not(:disabled):not(:focus),
html body.jg-ui.jg-ui .jx-select:hover:not(:disabled):not(:focus),
html body.jg-ui.jg-ui .jx-textarea:hover:not(:disabled):not(:focus) { border-color: var(--ui-accent-text); }

html body.jg-ui.jg-ui .form-group input:focus,
html body.jg-ui.jg-ui .form-group select:focus,
html body.jg-ui.jg-ui .form-group textarea:focus,
html body.jg-ui.jg-ui .input-group input:focus,
html body.jg-ui.jg-ui .input-group select:focus,
html body.jg-ui.jg-ui .jx-input:focus,
html body.jg-ui.jg-ui .jx-select:focus,
html body.jg-ui.jg-ui .jx-textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 1px;
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 4px var(--ui-focus-ring), inset 0 1px 0 var(--ui-glass-edge);
}

html body.jg-ui.jg-ui .form-group input[aria-invalid="true"],
html body.jg-ui.jg-ui .form-group select[aria-invalid="true"],
html body.jg-ui.jg-ui .form-group textarea[aria-invalid="true"],
html body.jg-ui.jg-ui .input-group input[aria-invalid="true"],
html body.jg-ui.jg-ui .input-group select[aria-invalid="true"],
html body.jg-ui.jg-ui .jx-input[aria-invalid="true"],
html body.jg-ui.jg-ui .jx-select[aria-invalid="true"],
html body.jg-ui.jg-ui .jx-textarea[aria-invalid="true"],
html body.jg-ui.jg-ui .form-group input.is-invalid,
html body.jg-ui.jg-ui .form-group select.is-invalid,
html body.jg-ui.jg-ui .form-group textarea.is-invalid,
html body.jg-ui.jg-ui .input-group input.is-invalid,
html body.jg-ui.jg-ui .input-group select.is-invalid,
html body.jg-ui.jg-ui .jx-input.is-invalid,
html body.jg-ui.jg-ui .jx-select.is-invalid,
html body.jg-ui.jg-ui .jx-textarea.is-invalid {
  border-color: var(--ui-bad-text);
  box-shadow: 0 0 0 3px var(--ui-bad-line), inset 0 1px 0 var(--ui-glass-edge);
}

html body.jg-ui.jg-ui .form-group input::placeholder,
html body.jg-ui.jg-ui .form-group select::placeholder,
html body.jg-ui.jg-ui .form-group textarea::placeholder,
html body.jg-ui.jg-ui .input-group input::placeholder,
html body.jg-ui.jg-ui .input-group select::placeholder,
html body.jg-ui.jg-ui .jx-input::placeholder,
html body.jg-ui.jg-ui .jx-select::placeholder,
html body.jg-ui.jg-ui .jx-textarea::placeholder {
  color: var(--ui-muted);
}

html body.jg-ui.jg-ui .form-group input:disabled,
html body.jg-ui.jg-ui .form-group select:disabled,
html body.jg-ui.jg-ui .form-group textarea:disabled,
html body.jg-ui.jg-ui .input-group input:disabled,
html body.jg-ui.jg-ui .input-group select:disabled,
html body.jg-ui.jg-ui .jx-input:disabled,
html body.jg-ui.jg-ui .jx-select:disabled,
html body.jg-ui.jg-ui .jx-textarea:disabled {
  background: var(--ui-disabled-bg);
  box-shadow: none;
  opacity: 0.75;
  cursor: not-allowed;
}

html body.jg-ui.jg-ui .jx-label {
  font-size: var(--ui-fs-sm);
  font-weight: 600;
  color: var(--ui-muted);
}

html body.jg-ui.jg-ui .jx-help {
  font-size: var(--ui-fs-xs);
  color: var(--ui-muted);
}

html body.jg-ui.jg-ui .jx-help--bad { color: var(--ui-bad-text); }

/* B3 CHIPS (P11: glass-strong, no blur; selected = real class .active, pastel pink fill + accent text; the top bar currency dropdown lives in A1c) */
html body.jg-ui.jg-ui .jx-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-gap-sm);
  border-radius: var(--ui-r-pill);
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--ui-input-border);
  box-shadow: inset 0 1px 0 var(--ui-glass-edge);
  color: var(--ui-text);
  font-family: var(--ui-font-display);
  font-weight: 700;
  cursor: pointer;
  transition: var(--ui-ease);
}

html body.jg-ui.jg-ui .jx-chip:hover:not(.active):not(:disabled) {
  border-color: var(--ui-accent-text);
  background: var(--ui-grad-soft);
}

html body.jg-ui.jg-ui .jx-chip.active {
  border-color: var(--ui-accent-text);
  background: var(--ui-grad-soft);
  color: var(--ui-accent-text);
}

html body.jg-ui.jg-ui .jx-chip:disabled,
html body.jg-ui.jg-ui .jx-chip.disabled {
  background: var(--ui-disabled-bg);
  color: var(--ui-muted);
  box-shadow: none;
  cursor: not-allowed;
}

html body.jg-ui.jg-ui .jx-chip--ok { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok-text); }
html body.jg-ui.jg-ui .jx-chip--warn { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); color: var(--ui-warn-text); }
html body.jg-ui.jg-ui .jx-chip--bad { background: var(--ui-bad-bg); border-color: var(--ui-bad-line); color: var(--ui-bad-text); }
html body.jg-ui.jg-ui .jx-chip--info { background: var(--ui-info-bg); border-color: var(--ui-info-line); color: var(--ui-info-text); }

/* B4 BADGES (P11: semantic pastel fill + line + text tokens, no blur; .Draw = warn, .Refund and .Cancelled = info, .open stays neutral) */
html body.jg-ui.jg-ui:not(.jg-admin) .status-badge,
html body.jg-ui.jg-ui .bet-type-badge,
html body.jg-ui.jg-ui .jx-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ui-s1) var(--ui-s3);
  border-radius: var(--ui-r-pill);
  font-size: var(--ui-fs-xs);
  font-weight: 700;
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--ui-input-border);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .status-badge.Approved,
html body.jg-ui.jg-ui .status-badge.Accepted,
html body.jg-ui.jg-ui .status-badge.closed,
html body.jg-ui.jg-ui .status-badge.active,
html body.jg-ui.jg-ui .bet-type-badge.Won,
html body.jg-ui.jg-ui .bet-type-badge.Win,
html body.jg-ui.jg-ui .jx-badge--ok {
  background: var(--ui-ok-bg);
  color: var(--ui-ok-text);
  border-color: var(--ui-ok-line);
}

html body.jg-ui.jg-ui .status-badge.Pending,
html body.jg-ui.jg-ui .status-badge.in_progress,
html body.jg-ui.jg-ui .bet-type-badge.Pending,
html body.jg-ui.jg-ui .bet-type-badge.Draw,
html body.jg-ui.jg-ui .jx-badge--warn {
  background: var(--ui-warn-bg);
  color: var(--ui-warn-text);
  border-color: var(--ui-warn-line);
}

html body.jg-ui.jg-ui .status-badge.Rejected,
html body.jg-ui.jg-ui .status-badge.suspended,
html body.jg-ui.jg-ui .status-badge.banned,
html body.jg-ui.jg-ui .bet-type-badge.Lost,
html body.jg-ui.jg-ui .bet-type-badge.Loss,
html body.jg-ui.jg-ui .jx-badge--bad {
  background: var(--ui-bad-bg);
  color: var(--ui-bad-text);
  border-color: var(--ui-bad-line);
}

html body.jg-ui.jg-ui .bet-type-badge.Refund,
html body.jg-ui.jg-ui .bet-type-badge.Cancelled,
html body.jg-ui.jg-ui .jx-badge--info {
  background: var(--ui-info-bg);
  color: var(--ui-info-text);
  border-color: var(--ui-info-line);
}

/* B5 ALERTS (P11: opaque semantic pastel, no blur; accent bar on the left) */
html body.jg-ui.jg-ui:not(.jg-admin) .alert,
html body.jg-ui.jg-ui .jx-alert {
  padding: var(--ui-s3) var(--ui-s4);
  border-radius: var(--ui-r-sm);
  font-size: var(--ui-fs-sm);
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--ui-input-border);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .alert-success,
html body.jg-ui.jg-ui .jx-alert--ok {
  background: var(--ui-ok-bg);
  border-color: var(--ui-ok-line);
  border-left: 4px solid var(--ui-ok-text);
  color: var(--ui-ok-text);
}

html body.jg-ui.jg-ui .alert-warning,
html body.jg-ui.jg-ui .jx-alert--warn {
  background: var(--ui-warn-bg);
  border-color: var(--ui-warn-line);
  border-left: 4px solid var(--ui-warn-text);
  color: var(--ui-warn-text);
}

html body.jg-ui.jg-ui .alert-error,
html body.jg-ui.jg-ui .jx-alert--bad {
  background: var(--ui-bad-bg);
  border-color: var(--ui-bad-line);
  border-left: 4px solid var(--ui-bad-text);
  color: var(--ui-bad-text);
}

html body.jg-ui.jg-ui .alert-info,
html body.jg-ui.jg-ui .jx-alert--info {
  background: var(--ui-info-bg);
  border-color: var(--ui-info-line);
  border-left: 4px solid var(--ui-info-text);
  color: var(--ui-info-text);
}

html body.jg-ui.jg-ui .alert-close {
  color: inherit;
  background: transparent;
  border: 0;
}

/* B6 MODAL (P11, replaces the old solid rule: strong glass 0.88 + blur on the dialog only; the overlay is a soft pastel wash with NO blur;
   the dialog never gets blur inside a blurred card (guard in C3b); blur is never animated) */
html body.jg-ui.jg-ui .modal {
  background: var(--ui-overlay-soft);
}

html body.jg-ui.jg-ui .modal-content,
html body.jg-ui.jg-ui .jx-modal {
  background: var(--ui-glass-modal);
  -webkit-backdrop-filter: var(--jf-blur);
  backdrop-filter: var(--jf-blur);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow), inset 0 1px 0 var(--ui-glass-edge);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .modal-header,
html body.jg-ui.jg-ui .modal-footer {
  border-color: var(--ui-input-border);
}

html body.jg-ui.jg-ui .modal-title {
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-lg);
  font-weight: 700;
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .modal-body,
html body.jg-ui.jg-ui .modal-row {
  font-size: var(--ui-fs-sm);
}

html body.jg-ui.jg-ui .modal-row .label {
  color: var(--ui-muted);
}

html body.jg-ui.jg-ui .modal-row .value {
  color: var(--ui-text);
}

/* C3b no nested blur for the modal: inside a bar or a blurred card the dialog loses its blur */
html body.jg-ui.jg-ui :is(.merged-card, .balance-card, .jx-card, .navbar, .jx-topbar, .jf-nav) :is(.modal-content, .jx-modal) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  html body.jg-ui.jg-ui :is(.modal-content, .jx-modal) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* B6b SWITCH (look only: size, colours, radius, focus ring; layout stays in the page css). Use <button type="button" class="jx-switch" role="switch" aria-checked="true|false"> */
html body.jg-ui.jg-ui .jx-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-pill);
  background: var(--ui-surface-solid);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

html body.jg-ui.jg-ui .jx-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-muted);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

html body.jg-ui.jg-ui .jx-switch[aria-checked="true"] {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
}

html body.jg-ui.jg-ui .jx-switch[aria-checked="true"]::before {
  background: var(--ui-on-accent);
  transform: translateX(18px);
}

html body.jg-ui.jg-ui .jx-switch:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

html body.jg-ui.jg-ui .jx-switch:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  html body.jg-ui.jg-ui .jx-switch,
  html body.jg-ui.jg-ui .jx-switch::before { transition: none; }
}

/* B7 TOAST (P11: strong glass / semantic pastel, no blur because a toast floats over blurred cards; real modifiers: success, error; never position/bottom/z-index) */
html body.jg-ui.jg-ui:not(.jg-admin) .toast,
html body.jg-ui.jg-ui .jx-toast {
  border-radius: var(--ui-r-md);
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--ui-text);
  font-size: var(--ui-fs-sm);
  padding: var(--ui-s3) var(--ui-s4);
  border: 1px solid var(--ui-input-border);
  box-shadow: var(--ui-shadow), inset 0 1px 0 var(--ui-glass-edge);
}

html body.jg-ui.jg-ui .toast.success,
html body.jg-ui.jg-ui .jx-toast--ok {
  background: var(--ui-ok-bg);
  border-color: var(--ui-ok-line);
  border-left: 4px solid var(--ui-ok-text);
  color: var(--ui-ok-text);
}

html body.jg-ui.jg-ui .toast.error,
html body.jg-ui.jg-ui .jx-toast--bad {
  background: var(--ui-bad-bg);
  border-color: var(--ui-bad-line);
  border-left: 4px solid var(--ui-bad-text);
  color: var(--ui-bad-text);
}

html body.jg-ui.jg-ui .toast.warning,
html body.jg-ui.jg-ui .jx-toast--warn {
  background: var(--ui-warn-bg);
  border-color: var(--ui-warn-line);
  border-left: 4px solid var(--ui-warn-text);
  color: var(--ui-warn-text);
}

html body.jg-ui.jg-ui .jx-toast--info {
  background: var(--ui-info-bg);
  border-color: var(--ui-info-line);
  border-left: 4px solid var(--ui-info-text);
  color: var(--ui-info-text);
}

html body.jg-ui.jg-ui .toast-icon {
  font-size: var(--ui-fs-md);
}

/* B9 TABLE (new: .jx-table; wrap in .jx-table-wrap for horizontal scroll on phones; no blur, rows are flat) */
html body.jg-ui.jg-ui .jx-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 var(--ui-glass-edge);
}

html body.jg-ui.jg-ui .jx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-fs-sm);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .jx-table th {
  padding: var(--ui-s3) var(--ui-s4);
  text-align: left;
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--ui-grad-soft);
  color: var(--ui-accent-text);
  border-bottom: 1px solid var(--ui-input-border);
}

html body.jg-ui.jg-ui .jx-table td {
  padding: var(--ui-s3) var(--ui-s4);
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text);
}

html body.jg-ui.jg-ui .jx-table tbody tr:last-child td { border-bottom: 0; }
html body.jg-ui.jg-ui .jx-table tbody tr:hover td { background: var(--ui-row-hover); }
html body.jg-ui.jg-ui .jx-table .jx-num { text-align: right; font-variant-numeric: tabular-nums; }
html body.jg-ui.jg-ui .jx-table caption { padding: var(--ui-s3) var(--ui-s4); text-align: left; color: var(--ui-muted); font-size: var(--ui-fs-xs); }

/* B10 SKELETON (new: pastel shimmer by moving a gradient, never blur; static under reduced motion).
   Use <div class="jx-skeleton jx-skeleton--line"></div>, --title, --circle, --block; size comes from the page or the modifier. */
html body.jg-ui.jg-ui .jx-skeleton {
  display: block;
  border-radius: var(--ui-r-sm);
  background: linear-gradient(90deg, var(--ui-skel-a) 0%, var(--ui-skel-b) 50%, var(--ui-skel-a) 100%);
  background-size: 200% 100%;
  animation: jx-skel-move 1.4s ease-in-out infinite;
}
html body.jg-ui.jg-ui .jx-skeleton--line { height: var(--ui-s3); width: 100%; border-radius: var(--ui-r-pill); }
html body.jg-ui.jg-ui .jx-skeleton--title { height: var(--ui-fs-lg); width: 60%; border-radius: var(--ui-r-pill); }
html body.jg-ui.jg-ui .jx-skeleton--circle { width: var(--ui-tap); height: var(--ui-tap); border-radius: var(--ui-r-pill); }
html body.jg-ui.jg-ui .jx-skeleton--block { height: calc(var(--ui-tap) * 2); width: 100%; border-radius: var(--ui-r-md); }
@keyframes jx-skel-move { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  html body.jg-ui.jg-ui .jx-skeleton { animation: none; }
}

/* ===================== C. PASTEL PINK GLASS (P10, look only) =====================
   Rules: blur ONLY on bars (top bar, bottom nav) and page-level cards; never on list rows (history / ticket / referral cards, stat cards, tiles, tabs, pagination);
   never nested (a blurred surface inside a blurred surface gets backdrop-filter: none); blur is never animated (no transition lists backdrop-filter).
   Text >= 4.5:1: --ui-text / --ui-muted / --ui-accent-text on glass, white on --ui-grad-btn / --ui-danger-btn. Focus ring: --ui-focus. prefers-reduced-transparency removes every blur. */

/* C1 TOP BAR */
html body.jg-ui.jg-ui:not(.jg-admin) .navbar,
html body.jg-ui.jg-ui .jx-topbar {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow), inset 0 1px 0 var(--ui-glass-edge);
}
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .logo,
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .menu-toggle,
html body.jg-ui.jg-ui .jx-topbar-btn,
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display,
html body.jg-ui.jg-ui .jx-balance {
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display i,
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .currency-option.active { color: var(--ui-accent-text); }
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .btn-login { background: var(--ui-grad-btn); box-shadow: var(--ui-btn-shadow); }

/* C2 BOTTOM NAV (look only: size, position and spacing stay in jfun-game.css / --jf-nav-h tokens) */
html body.jg-ui.jg-ui .jf-nav {
  background: var(--jf-nav-bg);
  -webkit-backdrop-filter: var(--jf-blur);
  backdrop-filter: var(--jf-blur);
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow), inset 0 1px 0 var(--ui-glass-edge);
}
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play) .jf-nav-icon,
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play) .jf-nav-text { color: var(--ui-muted); }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play).active { background: var(--ui-grad-soft); }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play).active .jf-nav-icon,
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play).active .jf-nav-text { color: var(--ui-accent-text); text-shadow: none; }

/* C3 CARDS: page-level cards = glass + blur */
html body.jg-ui.jg-ui .merged-card,
html body.jg-ui.jg-ui .balance-card,
html body.jg-ui.jg-ui .jx-card {
  background: var(--ui-surface);
  -webkit-backdrop-filter: var(--jf-blur);
  backdrop-filter: var(--jf-blur);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow), inset 0 1px 0 var(--ui-glass-edge);
  color: var(--ui-text);
}
/* list rows / stat cards: stronger glass, NO blur (they sit on or inside blurred cards) */
html body.jg-ui.jg-ui .stat-card,
html body.jg-ui.jg-ui .jx-stat,
html body.jg-ui.jg-ui .ticket-card,
html body.jg-ui.jg-ui .referral-card {
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-md);
  box-shadow: inset 0 1px 0 var(--ui-glass-edge);
  color: var(--ui-text);
}
/* no nested blur: anything blurred inside a bar or a blurred card loses its blur */
html body.jg-ui.jg-ui :is(.merged-card, .balance-card, .jx-card, .navbar, .jx-topbar, .jf-nav) :is(.merged-card, .balance-card, .jx-card) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body.jg-ui.jg-ui .stat-card-icon { color: var(--ui-accent-text); }

/* C4 TILES (no blur) */
html body.jg-ui.jg-ui .action-btn,
html body.jg-ui.jg-ui .jx-tile {
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow), inset 0 1px 0 var(--ui-glass-edge);
}
html body.jg-ui.jg-ui .action-btn:hover,
html body.jg-ui.jg-ui .jx-tile:hover { border-color: var(--ui-accent); }
html body.jg-ui.jg-ui .action-icon { color: var(--ui-accent-text); }

/* C5 TABS (no blur) */
html body.jg-ui.jg-ui .tabs,
html body.jg-ui.jg-ui .tabs-container,
html body.jg-ui.jg-ui .jx-tabs {
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--ui-border);
  box-shadow: inset 0 1px 0 var(--ui-glass-edge);
}
html body.jg-ui.jg-ui .tab,
html body.jg-ui.jg-ui .jx-tab { color: var(--ui-muted); }
html body.jg-ui.jg-ui .tab:hover:not(.active),
html body.jg-ui.jg-ui .jx-tab:hover:not(.active) { color: var(--ui-text); background: var(--ui-grad-soft); }
html body.jg-ui.jg-ui .tab.active,
html body.jg-ui.jg-ui .jx-tab.active { background: var(--ui-grad-btn); color: var(--ui-on-accent); box-shadow: var(--ui-btn-shadow); }

/* C6 PAGINATION (no blur) */
html body.jg-ui.jg-ui .jx-page-btn {
  background: var(--jf-glass-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 var(--ui-glass-edge);
}
html body.jg-ui.jg-ui .jx-page-btn:hover:not(:disabled):not(.disabled):not(.active) { border-color: var(--ui-accent); color: var(--ui-accent-text); }
html body.jg-ui.jg-ui .jx-page-btn.active { background: var(--ui-grad-btn); color: var(--ui-on-accent); box-shadow: var(--ui-btn-shadow); }

/* C7 BUTTONS: primary gradient (default) | outline | ghost | text | danger | disabled */
html body.jg-ui.jg-ui .btn,
html body.jg-ui.jg-ui .modal-btn,
html body.jg-ui.jg-ui .copy-btn-small,
html body.jg-ui.jg-ui .jx-btn {
  background: var(--ui-grad-btn);
  color: var(--ui-on-accent);
  box-shadow: var(--ui-btn-shadow);
}
html body.jg-ui.jg-ui .btn:hover,
html body.jg-ui.jg-ui .modal-btn:hover,
html body.jg-ui.jg-ui .copy-btn-small:hover,
html body.jg-ui.jg-ui .jx-btn:hover { filter: brightness(1.06); }
html body.jg-ui.jg-ui .jx-btn--outline {
  background: transparent;
  border: 1.5px solid var(--ui-accent-text);
  color: var(--ui-accent-text);
  box-shadow: none;
}
html body.jg-ui.jg-ui .jx-btn--outline:hover { background: var(--jf-glass-strong); filter: none; }
html body.jg-ui.jg-ui .modal-btn.cancel,
html body.jg-ui.jg-ui .jx-btn--ghost {
  background: var(--jf-glass-strong);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  box-shadow: inset 0 1px 0 var(--ui-glass-edge);
}
html body.jg-ui.jg-ui .jx-btn--text {
  background: transparent;
  border: 0;
  color: var(--ui-accent-text);
  box-shadow: none;
  padding: 0 var(--ui-s3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body.jg-ui.jg-ui .jx-btn--text:hover { background: var(--jf-glass-strong); filter: none; }
html body.jg-ui.jg-ui .jx-btn--danger {
  background: var(--ui-danger-btn);
  color: var(--ui-on-accent);
  border: 0;
  box-shadow: none;
}
/* disabled / aria-disabled: flat, readable, no shadow, no hover (written last so it wins over every variant) */
html body.jg-ui.jg-ui :is(.btn, .modal-btn, .copy-btn-small, .jx-btn, .jx-btn--outline, .jx-btn--text, .tab, .jx-tab, .jx-page-btn):is(:disabled, .disabled, [aria-disabled="true"]) {
  background: var(--ui-disabled-bg);
  border: 1px solid var(--ui-border);
  color: var(--ui-muted);
  box-shadow: none;
  text-decoration: none;
  filter: none;
  opacity: 0.75;
  cursor: not-allowed;
}

/* C8 FOCUS RING (keyboard only): 2px accent ring on every interactive part of the kit */
html body.jg-ui.jg-ui :is(.btn, .modal-btn, .copy-btn-small, .jx-btn, .tab, .jx-tab, .jx-page-btn, .action-btn, .jx-tile, .jx-chip, .jx-topbar-btn, .navbar .logo, .navbar .menu-toggle, .navbar .balance-display, .navbar .currency-option):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
html body.jg-ui.jg-ui .jf-nav-item:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: -3px;
}

/* C9 REDUCED TRANSPARENCY: no blur anywhere (the glass tokens turn opaque in jfun-brand.css) */
@media (prefers-reduced-transparency: reduce) {
  html body.jg-ui.jg-ui :is(.merged-card, .balance-card, .jx-card, .navbar, .jx-topbar, .jf-nav) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* C10 REDUCED MOTION: no hover/press movement or fades in this layer */
@media (prefers-reduced-motion: reduce) {
  html body.jg-ui.jg-ui :is(.btn, .modal-btn, .copy-btn-small, .jx-btn, .jx-btn--outline, .jx-btn--text, .tab, .jx-tab, .jx-page-btn, .action-btn, .jx-tile) { transition: none; }
}
/* UI Unify step 8: components moved from users/deposit.php (stat-card colour variants, referral/link box, tab panels, calc box, history list parts, empty/amount/date). Kit rules above win where both exist. Demo: _design/ui-kit.html "Step 8 components". Look only, not .jg-admin. */





html body.jg-ui.jg-ui:not(.jg-admin) .referral-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; position: relative; z-index: 1; }
html body.jg-ui.jg-ui:not(.jg-admin) .referral-header i { font-size: 24px; }
html body.jg-ui.jg-ui:not(.jg-admin) .referral-header h3 { font-size: 16px; font-weight: 600; }
html body.jg-ui.jg-ui:not(.jg-admin) .referral-link-box { background: var(--ui-on-accent-22); border-radius: 8px; padding: 12px; display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; backdrop-filter: blur(10px); }
html body.jg-ui.jg-ui:not(.jg-admin) .referral-link-text { flex: 1; font-size: 12px; word-break: break-all; font-family: monospace; }
html body.jg-ui.jg-ui:not(.jg-admin) .tab-content { display: none; }
html body.jg-ui.jg-ui:not(.jg-admin) .tab-content.active { display: block; }
html body.jg-ui.jg-ui:not(.jg-admin) .points-calc { background: var(--ui-info-bg); border-left: 4px solid var(--ui-info); padding: 12px; border-radius: 8px; margin-bottom: 15px; font-size: 13px; color: var(--ui-info-text); display: none; }
html body.jg-ui.jg-ui:not(.jg-admin) .points-calc.show { display: block; }
html body.jg-ui.jg-ui:not(.jg-admin) .points-calc i { margin-right: 6px; color: var(--ui-info); }
html body.jg-ui.jg-ui:not(.jg-admin) .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
html body.jg-ui.jg-ui:not(.jg-admin) .history-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--ui-border); }
html body.jg-ui.jg-ui:not(.jg-admin) .user-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--ui-ok) 0%, var(--ui-ok-deep) 100%); color: var(--ui-on-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
html body.jg-ui.jg-ui:not(.jg-admin) .username { font-weight: 600; font-size: 14px; color: var(--jf-fg); }
html body.jg-ui.jg-ui:not(.jg-admin) .detail-item { display: flex; flex-direction: column; gap: 2px; }
html body.jg-ui.jg-ui:not(.jg-admin) .detail-label { font-size: 10px; color: var(--jf-text); text-transform: uppercase; letter-spacing: 0.5px; }
html body.jg-ui.jg-ui:not(.jg-admin) .detail-value.highlight { color: var(--ui-ok); }
html body.jg-ui.jg-ui:not(.jg-admin) .history-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--ui-border); }
html body.jg-ui.jg-ui:not(.jg-admin) .amount-display { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; font-family: 'Courier New', monospace; }
html body.jg-ui.jg-ui:not(.jg-admin) .amount-display.positive { color: var(--ui-ok); }
html body.jg-ui.jg-ui:not(.jg-admin) .date-display { font-size: 11px; color: var(--jf-text); display: flex; align-items: center; gap: 4px; }
html body.jg-ui.jg-ui:not(.jg-admin) .toast.show { display: flex; }
html body.jg-ui.jg-ui:not(.jg-admin) .info-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ui-info); font-weight: 600; font-size: 13px; }

/* UI Unify step 10: negative amount colour (moved from users/withdraw.php). Look only, not .jg-admin. Demo: _design/ui-kit.html "Step 8 components". */
html body.jg-ui.jg-ui:not(.jg-admin) .detail-value.negative { color: var(--ui-bad); }
html body.jg-ui.jg-ui:not(.jg-admin) .amount-display.negative { color: var(--ui-bad); }

/* UI Unify step 14: stat-card amount-card colour variant (purple), from users/referrals.php. Look only, not .jg-admin. Demo: _design/ui-kit.html "Step 8 components". */



/* Step 15 (from users/referrals.php toast): title + text inside .toast, tokens only */
html body.jg-ui.jg-ui:not(.jg-admin) .toast-title { font-weight: 700; color: var(--ui-text); margin-bottom: var(--ui-s1); }
html body.jg-ui.jg-ui:not(.jg-admin) .toast-text { font-size: var(--ui-fs-sm); color: var(--ui-muted); }

/* Step G4 (games): modal close button, game toast, inline messages. LOOK only; position/size/margin stay in the page css.
   Game toast = direct child of body (common.js of each game); the PWA toast lives inside #jf-toast-wrap and is not touched. */
html body.jg-ui.jg-ui:not(.jg-admin) .close-modal {
  background: var(--jf-glass-strong);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-pill);
  color: var(--ui-muted);
  cursor: pointer;
  font-size: var(--ui-fs-xl);
  line-height: 1;
  padding: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
html body.jg-ui.jg-ui:not(.jg-admin) .close-modal:hover {
  background: var(--ui-row-hover);
  color: var(--ui-accent-text);
}
html body.jg-ui.jg-ui:not(.jg-admin) .jf-toast {
  background: var(--jf-glass-strong);
  border: 1px solid var(--ui-input-border);
  border-radius: var(--ui-r-md);
  box-shadow: var(--ui-shadow), inset 0 1px 0 var(--ui-glass-edge);
  color: var(--ui-text);
  font-size: var(--ui-fs-sm);
  font-weight: 600;
}
html body.jg-ui.jg-ui:not(.jg-admin) .jf-toast.jf-success { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); border-left: 4px solid var(--ui-ok-text); color: var(--ui-ok-text); }
html body.jg-ui.jg-ui:not(.jg-admin) .jf-toast.jf-error { background: var(--ui-bad-bg); border-color: var(--ui-bad-line); border-left: 4px solid var(--ui-bad-text); color: var(--ui-bad-text); }
html body.jg-ui.jg-ui:not(.jg-admin) .jf-toast.jf-warning { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); border-left: 4px solid var(--ui-warn-text); color: var(--ui-warn-text); }
html body.jg-ui.jg-ui:not(.jg-admin) .jf-note:not(.jf-toast) { color: var(--ui-muted); font-size: var(--ui-fs-xs); }
html body.jg-ui.jg-ui:not(.jg-admin) .jf-error:not(.jf-toast) { color: var(--ui-bad-text); font-size: var(--ui-fs-xs); font-weight: 600; }
html body.jg-ui.jg-ui:not(.jg-admin) .jf-success:not(.jf-toast) { color: var(--ui-ok-text); font-size: var(--ui-fs-xs); font-weight: 600; }
html body.jg-ui.jg-ui:not(.jg-admin) .jf-warning:not(.jf-toast) { color: var(--ui-warn-text); font-size: var(--ui-fs-xs); font-weight: 600; }
/* Step G4 layout the games had in their own css (same values, now once): close button size, floating game toast, message spacing */
html body.jg-ui.jg-ui:not(.jg-admin) .close-modal { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
html body.jg-ui.jg-ui:not(.jg-admin) > .jf-toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); padding: 10px 18px; z-index: 9999; max-width: 90%; text-align: center; }
html body.jg-ui.jg-ui:not(.jg-admin) .jf-note:not(.jf-toast) { margin: 8px 0; text-align: center; }
html body.jg-ui.jg-ui:not(.jg-admin) :is(.jf-error, .jf-success, .jf-warning):not(.jf-toast) { margin: 6px 0; text-align: center; }

/* Step G6: look that lived in the shared base css (jfun-brand/jfun-game/jfun-pwa), now once here. Tokens only. */
html body.jg-ui.jg-ui:not(.jg-admin) .jf-toast-icon { background: var(--ui-row-hover); color: inherit; border-radius: 50%; font-size: var(--ui-fs-xs); font-weight: 700; }
html body.jg-ui.jg-ui:not(.jg-admin) .jg-title { font-family: var(--jg-font-display); font-weight: 700; font-size: var(--ui-fs-md); text-transform: uppercase; letter-spacing: 0.06em; }
html body.jg-ui.jg-ui:not(.jg-admin) .jg-title::before { border-radius: 2px; background: var(--jf-grad); }
html body.jg-ui.jg-ui .jf-nav { border-radius: var(--ui-r-lg); }
html body.jg-ui.jg-ui .jf-nav-item { border: 0; border-radius: var(--ui-r-md); background: transparent; color: inherit; transition: var(--ui-ease, 150ms ease); }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play).active { background: var(--ui-grad-soft); }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play)::before { border-radius: var(--ui-r-pill); background: var(--jf-grad); transition: width .3s ease; }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play) .jf-nav-icon { font-size: var(--ui-fs-lg); }

/* Step G5 (games): buttons + text of the lobby (text button, outline width, 2/4 player segment, player row, game name/desc).
   :where() keeps specificity at the old 0,1,x, so the match-flow overrides (#screen-stake ..., .jf-player-row.jfpc-row) still win. Tokens only. */
:where(html body.jg-ui.jg-ui:not(.jg-admin)) .jf-btn-text { background: none; border: none; color: var(--ui-muted); font-size: var(--ui-fs-xs); font-weight: 600; cursor: pointer; font-family: inherit; padding: 8px; text-decoration: underline; }
:where(html body.jg-ui.jg-ui:not(.jg-admin)) .jf-seg { display: flex; background: var(--ui-input-bg); border: 1px solid var(--ui-input-border); border-radius: var(--ui-r-sm); padding: 3px; gap: 3px; margin-bottom: 10px; }
:where(html body.jg-ui.jg-ui:not(.jg-admin)) .jf-seg button { flex: 1; padding: 8px 4px; border: none; border-radius: var(--ui-r-sm); background: transparent; font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-muted); cursor: pointer; font-family: inherit; }
:where(html body.jg-ui.jg-ui:not(.jg-admin)) .jf-player-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
:where(html body.jg-ui.jg-ui:not(.jg-admin)) .jf-game-name { font-size: var(--ui-fs-md); font-weight: 700; color: var(--ui-text); }
:where(html body.jg-ui.jg-ui:not(.jg-admin)) .jf-game-desc { font-size: var(--ui-fs-xs); color: var(--ui-muted); }

/* ===== Referrals page layout (moved from game/referrals.css in C5; selectors unchanged, scoped to body.jg-referrals, no other page affected) ===== */

/* kit sets .referral-section to glass + dark text (higher specificity), so the gradient and every on-accent child are re-declared here */


html body.jg-referrals .bet-type-badge,
html body.jg-referrals .result-badge,
html body.jg-referrals .wins-badge,
html body.jg-referrals .losses-badge { min-height: 26px; padding: 0 12px; border-radius: var(--ui-r-pill); font-size: var(--ui-fs-xs); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
html body.jg-referrals .bet-type-badge.Win,
html body.jg-referrals .result-badge.won,
html body.jg-referrals .wins-badge { background: var(--ui-ok-tint); color: var(--ui-ok-text); }
html body.jg-referrals .bet-type-badge.Loss,
html body.jg-referrals .result-badge.lost,
html body.jg-referrals .losses-badge { background: var(--ui-bad-tint); color: var(--ui-bad-text); }

html body.jg-referrals .empty-state { padding: 24px 12px; overflow-wrap: anywhere; }
html body.jg-referrals .empty-state .btn {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; text-decoration: none;
}

html body.jg-referrals .toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  width: auto; min-width: 0; max-width: 420px; margin: 0 auto; overflow: hidden;
}
@media (max-width: 768px) {
  html body.jg-referrals { padding-bottom: 8px; }
  html body.jg-referrals .filters-grid { grid-template-columns: 1fr; }
  html body.jg-referrals .filter-actions { flex-direction: column; }
  html body.jg-referrals .referral-stats-badge { align-self: flex-end; }
}
@media (max-width: 480px) {
  html body.jg-referrals { padding-bottom: 6px; }
  html body.jg-referrals .referral-stats-badge { align-self: flex-start; width: 100%; justify-content: space-between; }
}

/* ----- Referrals page rules, second batch (C5) ----- */

/* ---------- shell + top bar ---------- */


/* ---------- filters ---------- */
html body.jg-referrals .filters-section {
  padding: 14px; border-radius: var(--jg-radius); background: var(--card-bg); border: 1px solid var(--border-color);
}
html body.jg-referrals .filters-header { color: var(--text-color); font: 700 var(--ui-fs-sm) var(--jg-font-display); text-transform: uppercase; letter-spacing: 0.06em; }
html body.jg-referrals .filters-header i { color: var(--jf-pink); }
html body.jg-referrals .filters-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
html body.jg-referrals .filter-label { font: 600 var(--ui-fs-xs) var(--jg-font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
html body.jg-referrals .filter-select,
html body.jg-referrals .filter-input {
  min-width: 0; min-height: 48px; font-size: var(--ui-fs-md); border-radius: var(--ui-r-sm); background: var(--jf-solid);
  border: 1.5px solid var(--border-color); color: var(--text-color);
}
html body.jg-referrals .filter-select:focus,
html body.jg-referrals .filter-input:focus { outline: none; border-color: var(--jf-pink); box-shadow: 0 0 0 3px var(--ui-accent-ring); }
html body.jg-referrals .filter-btn {
  min-height: 48px; border-radius: var(--ui-r-sm); font: 700 var(--ui-fs-sm) var(--jg-font-display); letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; touch-action: manipulation;
}
html body.jg-referrals .btn-apply,
html body.jg-referrals .btn-apply:hover { background: var(--jf-grad); color: var(--ui-on-accent); box-shadow: var(--jg-glow); }
html body.jg-referrals .btn-reset,
html body.jg-referrals .btn-reset:hover { background: var(--jf-solid); color: var(--text-color); border: 1.5px solid var(--border-color); }
html body.jg-referrals .result-badge { background: var(--ui-warn-tint); color: var(--ui-warn-text); }
html body.jg-referrals .referral-stats-badge { flex-wrap: wrap; gap: 6px; }

html body.jg-referrals .ref-code { display: flex; align-items: center; min-width: 0; word-break: break-all; overflow-wrap: anywhere; }
/* ---------- pagination ---------- */
html body.jg-referrals .pagination { flex-wrap: wrap; gap: 8px; }
html body.jg-referrals .toast > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }

/* ---------- motion ---------- */


/* from inline <style> of users/referrals.php (kit wins for components the kit defines; legacy vars mapped to tokens) */
:where(html body.jg-referrals) * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html body.jg-referrals { background: var(--jf-solid); min-height: 100vh; padding-bottom: 10px; font-family: 'Poppins', 'Arial', sans-serif; overflow-x: hidden; color: var(--jf-fg); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } }
html body.jg-referrals .filters-section { background: var(--ui-info-bg); border-radius: var(--ui-r-sm); padding: 12px; margin-bottom: var(--ui-card-gap); border: 1px solid var(--ui-info); }
html body.jg-referrals .filters-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ui-info); font-weight: 600; font-size: var(--ui-fs-sm); }
html body.jg-referrals .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
html body.jg-referrals .filter-group { display: flex; flex-direction: column; gap: 4px; }
html body.jg-referrals .filter-label { font-size: var(--ui-fs-xs); color: var(--jf-fg); font-weight: 500; }
html body.jg-referrals .filter-select,
html body.jg-referrals .filter-input { padding: 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); font-size: var(--ui-fs-sm); background: var(--jf-glass-strong); font-family: 'Poppins', sans-serif; }
html body.jg-referrals .filter-actions { display: flex; gap: 8px; margin-top: 5px; }
html body.jg-referrals .filter-btn { flex: 1; padding: 10px; border: none; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 6px; }
html body.jg-referrals .btn-reset { background: var(--jf-solid); color: var(--jf-fg); border: 1px solid var(--ui-border); }
html body.jg-referrals .btn-reset:hover { background: var(--ui-border); }
html body.jg-referrals .result-badge { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-xs); font-weight: 600; background: var(--ui-warn-bg); color: var(--ui-warn-text); margin-left: 4px; }
html body.jg-referrals .result-badge.won { background: var(--ui-ok-bg); color: var(--ui-ok-text); }
html body.jg-referrals .result-badge.lost { background: var(--ui-bad-bg); color: var(--ui-bad-text); }
html body.jg-referrals .referrals-list-title { font-size: var(--ui-fs-sm); font-weight: 600; color: var(--jf-fg); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
html body.jg-referrals .referral-stats-badge { display: inline-flex; align-items: center; gap: 8px; }
html body.jg-referrals .wins-badge { background: var(--ui-ok-bg); color: var(--ui-ok-text); padding: 4px 10px; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
html body.jg-referrals .losses-badge { background: var(--ui-bad-bg); color: var(--ui-bad-text); padding: 4px 10px; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
html body.jg-referrals .referral-detail-item { display: flex; flex-direction: column; gap: 2px; }
html body.jg-referrals .btn-apply { background: var(--jf-grad); color: var(--ui-on-accent); border-radius: var(--ui-r-sm); box-shadow: var(--ui-accent-lift-sm); }
html body.jg-referrals .btn-apply:hover { background: var(--jf-grad); color: var(--ui-on-accent); box-shadow: var(--ui-accent-lift); }
html body.jg-referrals .btn-apply:disabled { background: var(--jf-grad); color: var(--ui-on-accent); opacity: 0.55; box-shadow: none; cursor: not-allowed; }
html body.jg-referrals .btn-reset { background: var(--jf-glass-strong); color: var(--ui-accent); border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); font-weight: 600; }
html body.jg-referrals .filters-section { background: var(--jf-grad-soft); }
html body.jg-referrals .result-badge { background: var(--ui-warn-bg); color: var(--ui-warn-text); }
html body.jg-referrals .result-badge.won { background: var(--ui-ok-bg); color: var(--ui-ok-text); }
html body.jg-referrals .result-badge.lost { background: var(--ui-bad-bg); color: var(--ui-bad-text); }
html body.jg-referrals .wins-badge { background: var(--ui-ok-bg); color: var(--ui-ok-text); }
html body.jg-referrals .losses-badge { background: var(--ui-bad-bg); color: var(--ui-bad-text); }


/* ===== Wallet page layout (moved from game/wallet.css in C7; selectors unchanged, scoped to body.jg-wallet) ===== */

html body.jg-wallet .stat-card-title,
html body.jg-wallet .stat-card-value { overflow-wrap: anywhere; }

html body.jg-wallet.jg-ui .actions-grid .action-btn {
  position: relative; overflow: hidden; box-sizing: border-box; width: 100%; margin: 0; border: 0; text-decoration: none; text-align: left;
  min-height: 96px; padding: 14px 16px; border-radius: var(--jg-radius);
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  grid-template-areas: "icon title play" "icon sub play";
  color: var(--ui-on-accent); box-shadow: var(--ui-shadow);
}
html body.jg-wallet.jg-ui .actions-grid .action-btn.deposit { color: var(--ui-on-accent); background: var(--jf-grad); }
html body.jg-wallet.jg-ui .actions-grid .action-btn.withdraw { color: var(--ui-on-accent); background: linear-gradient(135deg, var(--ui-purple), var(--jf-pink)); }
html body.jg-wallet.jg-ui .actions-grid .action-btn.transfer { color: var(--ui-on-accent); background: linear-gradient(135deg, var(--jf-coral), var(--ui-flame-deep)); }
html body.jg-wallet.jg-ui .actions-grid .action-btn.history { color: var(--ui-on-accent); background: linear-gradient(135deg, var(--ui-info), var(--ui-purple)); }
html body.jg-wallet .actions-grid .action-btn:hover { transform: none; }
html body.jg-wallet .actions-grid .action-btn:active { transform: scale(0.98); }
html body.jg-wallet.jg-ui .actions-grid .action-btn .action-icon {
  grid-area: icon; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0; border-radius: var(--ui-r-md); font-size: var(--ui-fs-xl); background: var(--ui-on-accent-22); color: var(--ui-on-accent); box-shadow: none; transform: none;
}
html body.jg-wallet.jg-ui .actions-grid .action-btn .action-title {
  grid-area: title; position: relative; z-index: 1; margin: 0; align-self: end;
  font: 700 var(--ui-fs-lg)/1.1 var(--jg-font-display); color: var(--ui-on-accent); overflow-wrap: anywhere;
}
html body.jg-wallet.jg-ui .actions-grid .action-btn .action-subtitle {
  grid-area: sub; position: relative; z-index: 1; align-self: start; margin-top: 4px;
  font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-on-accent-85); overflow-wrap: anywhere;
}
html body.jg-wallet.jg-ui .actions-grid .action-btn .jg-play {
  grid-area: play; position: relative; z-index: 1; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px; border-radius: var(--ui-r-pill); background: var(--ui-on-accent); color: var(--ui-accent-deep);
  font: 700 var(--ui-fs-sm) var(--jg-font-display); letter-spacing: 0.08em;
}
@media (max-width: 359px) {
  html body.jg-wallet.jg-ui .actions-grid .action-btn { padding: 12px; column-gap: 10px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  html body.jg-wallet.jg-ui .actions-grid .action-btn .action-icon { width: 48px; height: 48px; font-size: var(--ui-fs-lg); }
  html body.jg-wallet.jg-ui .actions-grid .action-btn .action-title { font-size: var(--ui-fs-lg); }
  html body.jg-wallet.jg-ui .actions-grid .action-btn .jg-play { padding: 0 10px; font-size: var(--ui-fs-xs); }
}

html body.jg-wallet .info-list li { overflow-wrap: anywhere; }
html body.jg-wallet .info-list li i { color: var(--jg-ok); }

html body.jg-wallet .toast::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
}
html body.jg-wallet .toast.success::before { background: var(--jg-ok); }
html body.jg-wallet .toast.error::before { background: var(--jg-bad); }
html body.jg-wallet .toast > div { min-width: 0; overflow-wrap: anywhere; }

.stat-card.balance-card::before {
            background: linear-gradient(180deg, var(--ui-info) 0%, var(--ui-info-deep) 100%);
        }






.action-btn.withdraw {
            border-top: 3px solid var(--ui-bad);
        }
.action-btn.withdraw .action-icon {
            background: linear-gradient(135deg, var(--ui-bad) 0%, var(--ui-bad-strong) 100%);
            color: var(--ui-on-accent);
        }
.info-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
.info-list li {
            padding: 6px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: var(--ui-fs-xs);
            color: var(--jf-fg);
        }
.info-list li i {
            color: var(--ui-ok);
            font-size: var(--ui-fs-xs);
        }

        
@media (max-width: 768px) {
            body { padding: 8px; }
            .merged-card { padding: 10px; margin-bottom: 10px; }
            
            .stats-container {
                gap: 8px;
            }
            .stat-card {
                padding: 10px;
            }
            .stat-card-icon {
                width: 28px;
                height: 28px;
            }

            .referral-header i {
                font-size: var(--ui-fs-lg);
            }
            .referral-header h3 {
                font-size: var(--ui-fs-sm);
            }

            .actions-grid {
                gap: 8px;
            }
            .action-btn {
                padding: 12px 8px;
            }
            .action-icon {
                width: 36px;
                height: 36px;
            }
        }
@media (max-width: 480px) {
            body { padding: 6px; }
            .merged-card { padding: 8px; }

            .stat-card {
                padding: 8px;
            }
            .stat-card-icon {
                width: 24px;
                height: 24px;
            }

            .actions-grid {
                grid-template-columns: 1fr;
            }
        }
.action-btn.deposit, .action-btn.withdraw, .action-btn.transfer { border-top: 1px solid var(--ui-on-accent-30); }
.action-btn.deposit .action-icon, .action-btn.withdraw .action-icon, .action-btn.transfer .action-icon { background: var(--ui-on-accent-22); }



/* ===== Wallet page layout (moved from game/wallet.css in C7; selectors unchanged, scoped to body.jg-wallet) ===== */

html body.jg-wallet .actions-grid { display: flex; flex-direction: column; gap: var(--ui-gap, 12px); }


/* ===== Support page layout (moved from game/support.css in C8; selectors unchanged, scoped to body.jg-support) ===== */

html body.jg-support .tabs-container { padding: 6px; overflow: hidden; }
html body.jg-support .tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
html body.jg-support .tabs::-webkit-scrollbar { display: none; }
html body.jg-support .tab {
  flex: 1 0 auto; white-space: nowrap;
  touch-action: manipulation;
}
html body.jg-support .tab-badge { min-width: 20px; text-align: center; padding: 2px 7px; }

html body.jg-support .info-list li { font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
html body.jg-support .info-list li i { color: var(--jg-ok); }

html body.jg-support .status-badge { min-height: 28px; }
html body.jg-support .status-badge.open { background: var(--ui-warn-bg); color: var(--ui-warn-text); }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  html body.jg-support .status-badge.closed { background: var(--ui-disabled-bg); }
}

html body.jg-support .modal { padding: 12px; overflow: hidden; }
html body.jg-support .modal-content {
  width: 100%; max-width: 500px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  display: flex; flex-direction: column;
}
html body.jg-support .modal-header { flex: 0 0 auto; padding: 14px 16px; gap: 10px; }
html body.jg-support .modal-header h2 { font: 700 18px var(--jg-font-display); letter-spacing: 0.04em; text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
html body.jg-support .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
html body.jg-support .modal-footer { flex: 0 0 auto; padding: 12px 16px; }

html body.jg-support .message-full img,
html body.jg-support .reply-full img,
html body.jg-support .modal-body img { max-width: 100%; height: auto; }

html body.jg-support .toast > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  html body.jg-support .modal-content { animation: none; }
}
html body.jg-support .status-badge.open {
            background: var(--ui-info-bg);
            color: var(--ui-info-text);
        }

@media (max-width: 768px) {
            html body.jg-support { padding-bottom: 8px; }

        }
@media (max-width: 480px) {
            html body.jg-support { padding-bottom: 6px; }

        }
html body.jg-support .status-badge.open { background: var(--ui-info-bg); color: var(--ui-info-text); }

html body.jg-support .info-list li { padding: var(--ui-s1) 0; display: flex; align-items: center; gap: var(--ui-gap-sm); }
html body.jg-support .empty-state h4 { font-size: var(--ui-fs-sm); margin-bottom: var(--ui-s2); color: var(--jf-fg); }
html body.jg-support .empty-state p { font-size: var(--ui-fs-xs); }
html body.jg-support .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; align-items: center; justify-content: center; }
html body.jg-support .modal.active { display: flex; }
html body.jg-support .modal-content { animation: slideIn 0.3s ease; }
html body.jg-support .modal-header { display: flex; justify-content: space-between; align-items: center; }
html body.jg-support .modal-header h2 { display: flex; align-items: center; gap: var(--ui-gap-sm); color: var(--ui-on-accent); }
html body.jg-support .modal-footer { display: flex; justify-content: flex-end; }

/* ===== Support page layout (moved from game/support.css in C8; selectors unchanged, scoped to body.jg-support) ===== */

/* ---------- shell + top bar ---------- */

html body.jg-support .ticket-full-details { padding: 12px; border-radius: var(--ui-r-md); background: var(--jf-glass-strong); min-width: 0; }
html body.jg-support .detail-row { gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--jf-solid); }
html body.jg-support .detail-label-full { width: 88px; flex: 0 0 auto; font-size: var(--ui-fs-xs); }
html body.jg-support .detail-value-full { min-width: 0; font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
html body.jg-support .ticket-full-details h3 { font: 700 13px var(--jg-font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--jf-text); }

html body.jg-support .message-full,
html body.jg-support .reply-full {
  max-width: 86%; padding: 12px 14px; border-radius: var(--ui-r-md); font-size: var(--ui-fs-sm); line-height: 1.5;
  overflow-wrap: anywhere; word-break: normal; border-left: 0;
}
html body.jg-support .message-full {
  margin: 8px 0 8px auto; border-bottom-right-radius: 6px; color: var(--ui-on-accent);
  background: linear-gradient(var(--ui-scrim-20), var(--ui-scrim-20)), var(--jf-grad);
}
html body.jg-support .reply-full {
  margin: 8px auto 8px 0; border-bottom-left-radius: 6px; color: var(--jf-fg);
  background: var(--jg-surface-2); border: 1px solid var(--ui-border);
}
html body.jg-support .reply-full strong { font-size: var(--ui-fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-ok-text); }

:where(html body.jg-support) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
html body.jg-support {
            background: var(--jf-solid);
            min-height: 100vh;
            padding-bottom: 10px;
            font-family: 'Poppins', 'Arial', sans-serif;
            overflow-x: hidden;
            color: var(--jf-fg);
        }

html body.jg-support .ticket-full-details {
            background: var(--jf-solid);
            border-radius: var(--ui-r-sm);
            padding: 15px;
        }
html body.jg-support .detail-row {
            display: flex;
            margin-bottom: 12px;
            padding: 8px;
            background: var(--jf-glass-strong);
            border-radius: var(--ui-r-sm);
        }
html body.jg-support .detail-label-full {
            width: 100px;
            font-weight: 600;
            color: var(--jf-text);
            font-size: var(--ui-fs-xs);
        }
html body.jg-support .detail-value-full {
            flex: 1;
            color: var(--jf-fg);
            font-size: var(--ui-fs-sm);
        }
html body.jg-support .message-full {
            background: var(--jf-glass-strong);
            padding: 15px;
            border-radius: var(--ui-r-sm);
            margin: 15px 0;
            border-left: 4px solid var(--ui-accent);
            font-size: var(--ui-fs-sm);
            line-height: 1.6;
            white-space: pre-wrap;
        }
html body.jg-support .reply-full {
            background: var(--ui-ok-bg);
            padding: 15px;
            border-radius: var(--ui-r-sm);
            margin: 15px 0;
            border-left: 4px solid var(--ui-ok);
            font-size: var(--ui-fs-sm);
            line-height: 1.6;
            white-space: pre-wrap;
        }
html body.jg-support .reply-full strong {
            color: var(--ui-ok);
            display: block;
            margin-bottom: 8px;
        }

html body.jg-support #ticketModalBody .fa-spinner { font-size: var(--ui-fs-xl); color: var(--ui-accent); }
html body.jg-support #ticketModalBody > div > p { text-align: center; }

/* ===== Support page layout (moved from game/support.css in C8; selectors unchanged, scoped to body.jg-support) ===== */

/* ===== Support page layout (moved from game/support.css in C8; selectors unchanged, scoped to body.jg-support) ===== */
html body.jg-support .sp-row { cursor: pointer; }
html body.jg-support .sp-close { flex: 0 0 auto; }

/* ===== Profile page layout (moved from game/profile.css in C9; selectors unchanged, scoped to body.jg-profile) ===== */

html body.jg-profile .profile-details .username { font-size: var(--ui-fs-sm); color: var(--jf-text); overflow-wrap: anywhere; justify-content: inherit; }

html body.jg-profile .alert { overflow-wrap: anywhere; }
html body.jg-profile .info-list li { font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
html body.jg-profile .info-list li i { color: var(--jg-ok); }

html body.jg-profile .toast > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
html body.jg-profile .profile-details .username {
            font-size: var(--ui-fs-sm);
            color: var(--jf-text);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
html body.jg-profile .info-list li {
            padding: 6px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: var(--ui-fs-xs);
            color: var(--jf-fg);
        }
html body.jg-profile .info-list li i {
            color: var(--ui-ok);
            font-size: var(--ui-fs-xs);
        }

        
        

/* ---------- structure moved out of the inline style (kit has the look, not this layout) ---------- */
html body.jg-profile .alert i { font-size: var(--ui-fs-lg); }

/* ===== Profile page layout (moved from game/profile.css in C9; selectors unchanged, scoped to body.jg-profile) ===== */



/* ===== Room page layout (moved from game/room.css in C10; selectors unchanged, scoped to body.jg-room) ===== */

/* Shell = copy of the profile page (inline :root / body / .container in room.php + the same 12px side padding as profile.css). */
html body.jg-room .container { overflow: visible; }
html body.jg-room .jr-card.merged-card { margin: 0; max-width: none; }
html body.jg-room .jr-title-row .jx-title { margin: 0; overflow-wrap: anywhere; }
html body.jg-room .jr-head .jx-title,
html body.jg-room .jr-head .jx-subtitle { margin: 0; }
html body.jg-room .jr-form .jx-input { flex: 1 1 180px; min-width: 0; }
html body.jg-room .jr-form .jx-btn { flex: 0 0 auto; }
html body.jg-room .jr-dialog .jx-title { margin: 0; }
html body.jg-room .jr-dialog textarea.jx-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: calc(var(--ui-gap) * 6); }
html body.jg-room .jr-drawer-head .jx-title { flex: 1 1 auto; margin: 0; }
html body.jg-room .jr-sheet-head .jx-title { flex: 1 1 auto; margin: 0; }
html body.jg-room .jr-search .jx-input { width: 100%; box-sizing: border-box; }
html body.jg-room.jg-ui.jg-ui .jr-duo .jx-btn { width: 100%; }
html body.jg-room .jx-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ui-gap-sm); text-align: center; padding: var(--ui-pad-md); }
html body.jg-room.jg-ui.jg-ui .jr-skel-chip { width: calc(var(--ui-tap) * 1.4); height: var(--ui-tap); }
html body.jg-room.jg-ui.jg-ui .jr-row .jx-skeleton--line { width: 70%; }
html body.jg-room .jr-stat .jx-stat-label { grid-area: label; align-self: end; text-align: left; }

html body.jg-room.jg-ui.jg-ui .jr-stat.jr-stat--btn { color: var(--ui-on-accent); background: var(--jf-grad); border-color: transparent; box-shadow: var(--ui-btn-shadow); }
html body.jg-room.jg-ui.jg-ui .jr-stat--btn .jx-stat-label { color: var(--ui-on-accent-85); }
html body.jg-room.jg-ui.jg-ui .jr-stat--btn .jx-stat-value { color: var(--ui-on-accent); }
html body.jg-room.jg-ui.jg-ui .jr-stat--btn .jr-stat-ic { background: var(--ui-on-accent-22); color: var(--ui-on-accent); }
html body.jg-room.jg-ui.jg-ui .jr-skel-amt { width: 100%; height: 72px; }
html body.jg-room .jr-chips .jx-badge { max-width: 100%; overflow-wrap: anywhere; }
html body.jg-room .jr-games .action-icon { display: flex; align-items: center; justify-content: center; }
html body.jg-room.jg-ui .jr-games .action-btn {
  position: relative; overflow: hidden; border: 0; color: var(--ui-on-accent); text-align: left;
  min-height: 96px; padding: 14px 16px; border-radius: var(--jg-radius);
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  grid-template-areas: "icon title play" "icon sub play";
  box-shadow: var(--ui-shadow);
}
html body.jg-room.jg-ui .jr-games .action-btn.ludo { background: var(--jf-grad); color: var(--ui-on-accent); }
html body.jg-room.jg-ui .jr-games .action-btn.barah { background: linear-gradient(135deg, var(--ui-purple), var(--jf-pink)); color: var(--ui-on-accent); }
html body.jg-room.jg-ui .jr-games .action-btn.ttt { background: linear-gradient(135deg, var(--jf-coral), var(--ui-flame-deep)); color: var(--ui-on-accent); }
html body.jg-room .jr-games .action-btn:hover { transform: none; }
html body.jg-room .jr-games .action-btn:active { transform: scale(0.98); }
html body.jg-room .jr-games .action-icon {
  grid-area: icon; position: relative; z-index: 1; width: 56px; height: 56px; margin: 0; border-radius: var(--ui-r-md);
  background: var(--ui-on-accent-22); font-size: var(--ui-fs-xl);
}

html body.jg-room.jg-ui .jr-games .action-btn .action-icon { color: var(--ui-on-accent); }
html body.jg-room.jg-ui .jr-games .action-btn .action-title {
  grid-area: title; position: relative; z-index: 1; margin: 0; align-self: end;
  font: 700 22px/1.1 var(--jg-font-display); color: var(--ui-on-accent); overflow-wrap: anywhere;
}
html body.jg-room.jg-ui .jr-games .action-btn .action-subtitle {
  grid-area: sub; position: relative; z-index: 1; align-self: start; margin-top: 4px;
  font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-on-accent-85); overflow-wrap: anywhere;
}
html body.jg-room.jg-ui .jr-games .action-btn .jg-play {
  grid-area: play; position: relative; z-index: 1; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px; border-radius: var(--ui-r-pill); background: var(--ui-on-accent); color: var(--ui-accent-deep);
  font: 700 14px var(--jg-font-display); letter-spacing: 0.08em;
}
html body.jg-room.jg-ui .jr-games .action-btn:hover .jg-play { background: var(--ui-on-accent-85); }
html body.jg-room.jg-ui .jr-games .action-btn:active .jg-play { background: var(--ui-on-accent-85); }

html body.jg-room .jr-games .action-btn.ludo::after,
html body.jg-room .jr-games .action-btn.barah::after,
html body.jg-room .jr-games .action-btn.ttt::after {
  position: absolute; right: -6px; bottom: -18px; font: 900 96px/1 "Font Awesome 6 Free";
  color: var(--ui-on-accent); opacity: 0.12; pointer-events: none;
}
html body.jg-room .jr-games .action-btn.ludo::after { content: "\f522"; content: "\f522" / ""; }
html body.jg-room .jr-games .action-btn.barah::after { content: "\f43c"; content: "\f43c" / ""; }
html body.jg-room .jr-games .action-btn.ttt::after { content: "\23"; content: "\23" / ""; }
@media (max-width: 359px) {
  html body.jg-room .jr-games .action-btn { padding: 12px; column-gap: 10px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  html body.jg-room .jr-games .action-icon { width: 48px; height: 48px; font-size: var(--ui-fs-lg); }
  html body.jg-room.jg-ui .jr-games .action-btn .action-title { font-size: var(--ui-fs-lg); }
  html body.jg-room.jg-ui .jr-games .action-btn .jg-play { padding: 0 10px; font-size: var(--ui-fs-xs); }
}
html body.jg-room.jg-ui .jr-games .action-btn.is-picked { box-shadow: 0 0 0 3px var(--ui-on-accent), 0 0 0 6px var(--ui-accent), var(--ui-shadow); }

html body.jg-room.jg-ui.jg-ui input.jx-input { padding: 0 var(--ui-pad-lg); }
html body.jg-room.jg-ui.jg-ui textarea.jx-input { padding: var(--ui-pad-md) var(--ui-pad-lg); }
@media (max-width: 359px) {
  html body.jg-room .jr-stat { grid-template-columns: 40px minmax(0, 1fr) auto; }
  html body.jg-room .jr-stat-ic { width: 40px; height: 40px; }
  html body.jg-room .jr-stat-act { padding: 0 var(--ui-pad-md); }
  html body.jg-room .jr-row { flex-wrap: wrap; }
  html body.jg-room .jr-row .jr-btns { flex: 1 1 100%; }
  html body.jg-room .jr-btns .jx-btn { flex: 1 1 auto; }
  html body.jg-room .jr-form .jx-btn { flex: 1 1 100%; }
  html body.jg-room .jr-actions { flex-wrap: wrap; }
  html body.jg-room .jr-actions .jx-btn { flex: 1 1 auto; }
  html body.jg-room .jr-dialog { padding: var(--ui-pad-md); }
}


/* ===== Room page layout (moved from game/room.css in C10; selectors unchanged, scoped to body.jg-room) ===== */

html body.jg-room { overflow-x: visible; }
html body.jg-room .jr-wrap { box-sizing: border-box; width: 100%; max-width: none; margin: 0 auto; padding: 0 0 var(--jf-nav-clear); }
html body.jg-room #jr-root { display: flex; flex-direction: column; gap: var(--ui-section-gap); }
html body.jg-room .jr-head { display: flex; flex-direction: column; gap: var(--ui-gap-sm); }
html body.jg-room .jr-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-gap-sm); }
html body.jg-room .jr-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--ui-gap); padding: var(--ui-pad-lg); }
html body.jg-room .jr-card[hidden],
html body.jg-room .jr-sec[hidden] { display: none; }
html body.jg-room .jr-card-title { margin: 0; font-family: var(--ui-font-display); font-size: var(--ui-fs-md); font-weight: 700; color: var(--ui-text); }
html body.jg-room .jr-text { margin: 0; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
html body.jg-room .jr-hint { margin: 0; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-room .jr-list { display: flex; flex-direction: column; gap: var(--ui-gap-sm); }
html body.jg-room .jr-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-gap-sm); }
html body.jg-room .jr-row { display: flex; align-items: center; gap: var(--ui-gap); min-height: 44px; }
html body.jg-room .jr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html body.jg-room .jr-name { font-weight: 600; color: var(--ui-text); overflow-wrap: anywhere; }
html body.jg-room .jr-sub { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-room .jr-btns { display: flex; align-items: center; gap: var(--ui-gap-sm); flex: 0 0 auto; }
html body.jg-room .jr-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--ui-r-pill); background: var(--ui-grad); color: var(--ui-on-accent); font-weight: 700; font-size: var(--ui-fs-sm); }
html body.jg-room .jr-status { display: inline-flex; align-items: center; gap: var(--ui-gap-sm); font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-room .jr-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--ui-r-pill); background: var(--ui-muted); }
html body.jg-room .jr-dot--on { background: var(--ui-ok); }
html body.jg-room .jr-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-gap-sm); }
html body.jg-room .jr-actions { display: flex; justify-content: flex-end; gap: var(--ui-gap-sm); }
html body.jg-room .jr-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--ui-page-x); background: var(--ui-overlay-soft); }
html body.jg-room .jr-dialog { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--ui-gap); width: 100%; max-width: 420px; padding: var(--ui-pad-lg); }
html body.jg-room .jr-toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--jf-nav-clear) + env(safe-area-inset-bottom, 0px)); z-index: 2100; display: flex; flex-direction: column; gap: var(--ui-gap-sm); width: calc(100% - 2 * var(--ui-page-x)); max-width: 520px; pointer-events: none; }
html body.jg-room .jr-field { display: flex; flex-direction: column; gap: var(--ui-gap-sm); }
html body.jg-room .jr-field[hidden] { display: none; }
html body.jg-room .jr-hint[hidden] { display: none; }
html body.jg-room .jr-chips { display: flex; flex-wrap: wrap; gap: var(--ui-gap-sm); }
html body.jg-room .jr-chip { min-height: 44px; padding: 0 var(--ui-pad-md); font-size: var(--ui-fs-sm); }
html body.jg-room .jr-pick { display: flex; align-items: center; gap: var(--ui-gap); min-height: 44px; cursor: pointer; }
html body.jg-room .jr-pick input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--ui-accent); }
html body.jg-room .jr-pick .jr-name { flex: 1 1 auto; min-width: 0; }
html body.jg-room .jr-pick--off { cursor: not-allowed; }
html body.jg-room .jr-pick--off .jr-name { color: var(--ui-muted); }
html body.jg-room .jr-sec { display: flex; flex-direction: column; }
html body.jg-room .jr-sec .jg-title { color: var(--ui-text); margin: 8px 0 10px; }
html body.jg-room .jr-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-gap); margin-bottom: var(--ui-gap-sm); box-shadow: var(--jf-glass-shadow); }
html body.jg-room .jr-hero-avatar { flex: 0 0 52px; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--ui-r-pill); background: var(--ui-grad-btn); color: var(--ui-on-accent); font-family: var(--jg-font-display); font-weight: 700; font-size: var(--ui-fs-lg); box-shadow: var(--ui-btn-shadow); }
html body.jg-room .jr-hero-info { flex: 1 1 0; min-width: 0; }
html body.jg-room .jr-hero-hello { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-room .jr-hero-name { font-family: var(--jg-font-display); font-weight: 700; font-size: var(--ui-fs-lg); color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.jg-room .jr-head .jr-hero { margin-bottom: 0; }
html body.jg-room .jr-row .jr-btns { flex-wrap: wrap; justify-content: flex-end; }

html body.jg-room .jr-row.jr-row--acts { flex-wrap: wrap; }
html body.jg-room .jr-row.jr-row--acts .jr-main { flex: 1 1 calc(var(--ui-gap) * 10); min-width: calc(var(--ui-gap) * 10); }
html body.jg-room .jr-row.jr-row--acts .jr-name { overflow-wrap: break-word; }
html body.jg-room .jr-row.jr-row--acts .jr-btns { flex: 1 1 100%; justify-content: flex-start; }
html body.jg-room .jr-row.jr-row--inv .jr-btns .jx-btn { min-height: calc(var(--ui-tap) - 4px); }
html body.jg-room .jr-menu-dot { position: absolute; top: 2px; right: 2px; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--ui-r-pill); background: var(--ui-bad); color: var(--ui-on-accent); font-size: var(--ui-fs-xs); font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; }
html body.jg-room .jr-drawer-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; background: var(--ui-overlay-soft); }
html body.jg-room .jr-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 2001; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--ui-gap-sm); width: min(86vw, 320px); overflow-y: auto; padding: var(--ui-pad-lg); padding-top: calc(var(--ui-pad-lg) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--ui-pad-lg) + env(safe-area-inset-bottom, 0px)); background: var(--jf-solid); border-right: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); animation: jr-drawer-in 0.18s ease-out; }
@media (prefers-reduced-motion: reduce) { html body.jg-room .jr-drawer { animation: none; } }
html body.jg-room .jr-drawer-head { display: flex; align-items: center; gap: var(--ui-gap); margin-bottom: var(--ui-gap-sm); }
html body.jg-room .jr-menu-group { margin: var(--ui-gap-sm) 0 0; padding: 0 var(--ui-pad-md); font-size: var(--ui-fs-xs); font-weight: 700; color: var(--ui-muted); }
html body.jg-room .jr-menu-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--ui-gap); width: 100%; min-height: 48px; padding: 0 var(--ui-pad-md); border: 0; border-radius: var(--ui-r-sm); background: transparent; color: var(--ui-text); font: inherit; font-size: var(--ui-fs-md); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; touch-action: manipulation; }
html body.jg-room .jr-menu-item:hover, html body.jg-room .jr-menu-item:focus-visible, html body.jg-room .jr-menu-item[aria-current="true"] { background: var(--ui-surface); }
html body.jg-room .jr-menu-ic { flex: 0 0 24px; text-align: center; color: var(--ui-accent); }
html body.jg-room .jr-menu-label { flex: 1 1 auto; min-width: 0; }
html body.jg-room .jr-menu-item--danger, html body.jg-room .jr-menu-item--danger .jr-menu-ic { color: var(--ui-bad); }
html body.jg-room .jr-sheet { max-width: 480px; max-height: 85vh; overflow-y: auto; }
html body.jg-room .jr-sheet-head { display: flex; align-items: center; gap: var(--ui-gap); }
html body.jg-room .jr-notice { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-gap); }
html body.jg-room .jr-notice[hidden] { display: none; }
html body.jg-room .jr-notice-text { flex: 1 1 auto; min-width: 0; }
html body.jg-room .jr-net { margin-bottom: var(--ui-gap); }
html body.jg-room .jr-group { margin: 0; font-size: var(--ui-fs-xs); font-weight: 700; color: var(--ui-muted); }
html body.jg-room .jr-search { display: block; }
html body.jg-room .jr-search[hidden] { display: none; }
html body.jg-room .jr-match-top { display: flex; align-items: center; gap: var(--ui-gap); }
html body.jg-room .jr-match-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ui-r-pill); background: var(--ui-grad-btn); color: var(--ui-on-accent); font-size: var(--ui-fs-md); box-shadow: var(--ui-btn-shadow); }
html body.jg-room .jr-match-name { font-family: var(--ui-font-display); font-size: var(--ui-fs-lg); font-weight: 700; color: var(--ui-text); overflow-wrap: anywhere; }
html body.jg-room .jr-match-sub { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-room .jr-match-stake { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-gap-sm); }
html body.jg-room .jr-match-val { font-family: var(--ui-font-display); font-size: var(--ui-fs-lg); font-weight: 700; color: var(--ui-text); }
html body.jg-room .jr-timer { height: 6px; border-radius: var(--ui-r-pill); background: var(--ui-border); overflow: hidden; }
html body.jg-room .jr-timer-fill { display: block; height: 100%; width: 100%; border-radius: var(--ui-r-pill); background: var(--ui-ok); transition: width 1s linear; }
html body.jg-room .jr-timer-fill.is-low { background: var(--ui-warn); }
@media (prefers-reduced-motion: reduce) { html body.jg-room .jr-timer-fill { transition: none; } }
html body.jg-room .jr-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-gap-sm); }
@media (max-width: 359px) { html body.jg-room .jr-duo { grid-template-columns: 1fr; } }
html body.jg-room .jr-share { display: flex; flex-wrap: wrap; gap: var(--ui-gap-sm); }

html body.jg-room .jr-body { display: flex; flex-direction: column; gap: var(--ui-gap); }
html body.jg-room .jr-stats { display: flex; flex-direction: column; gap: var(--ui-gap); }
html body.jg-room .jr-stat { box-sizing: border-box; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "ic label act" "ic val act"; column-gap: var(--ui-gap); align-items: center; width: 100%; min-width: 0; min-height: 72px; padding: var(--ui-pad-md) var(--ui-pad-lg); text-align: left; border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow); }
html body.jg-room .jr-stat--btn { margin: 0; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; touch-action: manipulation; border: 0; background: var(--jf-grad); color: var(--ui-on-accent); }
html body.jg-room .jr-stat-ic { grid-area: ic; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--ui-r-md); background: var(--ui-surface); color: var(--ui-accent); font-size: var(--ui-fs-lg); }
html body.jg-room .jr-stat-val { grid-area: val; align-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: var(--ui-fs-lg); }
html body.jg-room .jr-stat-act { grid-area: act; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--ui-pad-lg); border-radius: var(--ui-r-pill); background: var(--ui-on-accent); color: var(--ui-accent-deep); font-family: var(--ui-font-display); font-size: var(--ui-fs-sm); font-weight: 700; letter-spacing: 0.08em; }
html body.jg-room .jr-list > .jr-row,
html body.jg-room .jr-user,
html body.jg-room .jr-panel,
html body.jg-room .jr-again { box-sizing: border-box; padding: var(--ui-pad-md); border: 1px solid var(--ui-border); border-radius: var(--ui-r-md); background: var(--jf-glass-strong); }
html body.jg-room .jr-user { display: flex; flex-direction: column; gap: var(--ui-gap); }
html body.jg-room .jr-user-top { display: flex; align-items: center; gap: var(--ui-gap); }
html body.jg-room .jr-again { display: flex; flex-direction: column; gap: var(--ui-gap-sm); }
html body.jg-room .jr-fcard { box-sizing: border-box; padding: var(--ui-pad-md); border: 1px solid var(--ui-border); border-radius: var(--ui-r-md); background: var(--jf-glass-strong); }
html body.jg-room .jr-fcard.is-on { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent); }
html body.jg-room .jr-pick--off.jr-fcard { opacity: 0.6; }
html body.jg-room .jr-amts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-gap-sm); }
html body.jg-room .jr-amt { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 72px; padding: var(--ui-pad-md); border: 1px solid var(--ui-border); border-radius: var(--ui-r-md); background: var(--jf-glass-strong); color: var(--ui-text); font: inherit; cursor: pointer; touch-action: manipulation; }
html body.jg-room .jr-amt.is-on { border-color: var(--ui-accent); background: var(--ui-grad); color: var(--ui-on-accent); }
html body.jg-room .jr-amt-val { font-family: var(--ui-font-display); font-size: var(--ui-fs-lg); font-weight: 700; }
html body.jg-room .jr-amt-cur { font-size: var(--ui-fs-xs); font-weight: 600; opacity: 0.85; }

html body.jg-room .jr-games .jr-game { box-sizing: border-box; width: 100%; margin: 0; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; text-decoration: none; transition: all 0.3s ease; touch-action: manipulation; }
html body.jg-room .jr-games { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
html body.jg-room .jr-menu-state { flex: 0 0 auto; font-size: var(--ui-fs-sm); font-weight: 700; color: var(--ui-muted); }

html body.jg-room .jr-o1 { order: 1; }
html body.jg-room .jr-o2 { order: 2; }
html body.jg-room .jr-o3 { order: 3; }
html body.jg-room .jr-o4 { order: 4; }
html body.jg-room .jr-o5 { order: 5; }
html body.jg-room .jr-o6 { order: 6; }
html body.jg-room .jr-o7 { order: 7; }
html body.jg-room .jr-cols, html body.jg-room .jr-col { display: contents; }
html body.jg-room #jr-invite:empty { display: none; }
@media (min-width: 769px) {
  html body.jg-room #jr-root { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 960px) {
  html body.jg-room #jr-root.jr-wide { max-width: 1100px; }
  html body.jg-room #jr-root.jr-wide .jr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-section-gap); align-items: start; }
  html body.jg-room #jr-root.jr-wide .jr-col { display: flex; flex-direction: column; gap: var(--ui-section-gap); min-width: 0; }
}
/* Room page, desktop only: the page frame is capped at 640px, which squeezed the 2-column room (jr-wide, 1100px) into two 320px columns. From 960px the frame may be as wide as the room; on the chat page (jr-fit) the columns fill the height down to the bottom nav so Chat and the message box sit at the bottom like on the phone. Phones and tablets are not changed. */
@media (min-width: 960px) {
  html body.jg-ui.jg-ui.jg-room.jg-frame:not(.jg-admin) .container { max-width: 1100px; }
  html body.jg-ui.jg-ui.jg-room.jr-fit #jr-root.jr-wide .jr-cols { flex: 1 1 0; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  html body.jg-ui.jg-ui.jg-room.jr-fit #jr-root.jr-wide .jr-col { min-height: 0; }
}

:where(html body.jg-room) * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html body.jg-room { background: var(--jf-solid); min-height: 100vh; padding-bottom: 10px; font-family: 'Poppins', 'Arial', sans-serif; color: var(--jf-fg); }
/* room chat fit: with a chat on the page the screen does not scroll; the sections sit on top and Chat fills the rest down to the bottom nav (the chat list scrolls inside). The sections never scroll with the page: an opened section scrolls inside its own body, and only the chat list scrolls under them. */
html body.jg-ui.jg-ui.jg-room.jr-fit:not(.jg-admin) { display: flex; flex-direction: column; box-sizing: border-box; height: 100vh; height: 100dvh; min-height: 0; margin: 0; --jr-edge: calc(var(--ui-frame-x) + 8px); padding-left: var(--jr-edge); padding-right: var(--jr-edge); padding-top: calc(var(--ui-frame-top) + 8px); overflow: hidden; }
html body.jg-room.jr-fit .container { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
html body.jg-room.jr-fit .jr-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-bottom: 0; }
html body.jg-room.jr-fit #jr-root { box-sizing: border-box; flex: 1 1 auto; min-height: 0; padding: 0 var(--jr-edge) calc(var(--ui-s4) + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
/* room chat fit: the sections above Chat sit 4px apart (was the 20px section gap) so Chat gets more room; the 44px tap row stays */
html body.jg-room.jr-fit #jr-root { gap: 4px; }
html body.jg-room.jr-fit .jr-o7 { flex: 1 1 0; min-height: 200px; }
html body.jg-room.jr-fit #jr-root .jr-col > .jr-sec:not(.jr-o7), html body.jg-room.jr-fit #jr-root .jr-col > .jr-o5 { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 44px; overflow: hidden; }
html body.jg-room.jr-fit #jr-root .jr-o5 > .jr-sec { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
html body.jg-room.jr-fit #jr-root .jr-col > .jr-sec:not(.jr-o7) > .jr-body, html body.jg-room.jr-fit #jr-root .jr-o5 > .jr-sec > .jr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Room (chat page): open sections keep their soft shadows (the scroll box has side/bottom room, the section no longer clips) */
html body.jg-room.jr-fit #jr-root .jr-col > .jr-sec:not(.jr-o7), html body.jg-room.jr-fit #jr-root .jr-col > .jr-o5, html body.jg-room.jr-fit #jr-root .jr-o5 > .jr-sec { overflow: visible; }
html body.jg-room.jr-fit #jr-root .jr-col > .jr-sec:not(.jr-o7) > .jr-body, html body.jg-room.jr-fit #jr-root .jr-o5 > .jr-sec > .jr-body { box-sizing: border-box; padding: var(--ui-s1) var(--ui-s5) var(--ui-s5); margin: calc(var(--ui-s1) * -1) calc(var(--ui-s5) * -1) 0; }
html body.jg-room.jr-fit .jr-o7 > .jr-body, html body.jg-room.jr-fit .jr-o7 > .jr-body > div, html body.jg-room.jr-fit .jr-o7 .jx-chat { flex: 1 1 0; min-height: 0; }
html body.jg-room.jr-fit .jr-o7 > .jr-body > div { display: flex; flex-direction: column; }
html body.jg-room.jr-fit .jr-o7 .jx-chat__list { flex: 1 1 0; max-height: none; min-height: 96px; margin-left: calc(var(--jr-edge) * -1); margin-right: calc(var(--jr-edge) * -1); border-width: 0; border-radius: 0; }
/* room chat fit: no note under the message box; the chat sits on the bottom nav (16px under the form keeps the Send shadow visible) */
html body.jg-room.jr-fit .jr-o7 .jx-chat__hint { display: none; }
/* room chat: message bubbles get the same soft inner edge as the 'Write a message' box */
html body.jg-room .jx-chat__bubble { box-shadow: var(--nb-in-sm); }
/* room chat: my own messages have the profile circle on the right (Send side), bubble on the left */
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--me { grid-template-columns: 1fr auto; }
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--me > .jr-avatar { order: 2; }
/* ROOM GAME POPUP (Play With Friends): the game opens above the Room chat; the message box and Send stay below it; '-' minimizes it to a chip (assets/games/room/room_game.js) */
html body.jg-room .jr-gamepop { position: fixed; z-index: 1500; left: var(--ui-gap); right: var(--ui-gap); top: calc(env(safe-area-inset-top, 0px) + var(--ui-gap) + 28px + var(--ui-s5) + var(--ui-s4)); bottom: calc(var(--jf-nav-clear) + env(safe-area-inset-bottom, 0px) + 56px + 28px + var(--ui-s5) + var(--ui-s4)); display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; overflow: hidden; background: var(--ui-surface-solid); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--nb-out); }
html body.jg-room .jr-gamepop[hidden], html body.jg-room .jr-gamechip[hidden], html body.jg-room .jr-gamebar[hidden] { display: none; }
html body.jg-room .jr-gamepop__head { position: absolute; z-index: 2; top: var(--ui-s1); right: var(--ui-s1); display: flex; align-items: center; gap: calc(var(--ui-s4) + var(--ui-s1)); padding: 0; }
html body.jg-room .jr-gamepop__title { display: none; flex: 1 1 auto; min-width: 0; font-family: var(--ui-font-display); font-size: var(--ui-fs-lg); font-weight: 700; color: var(--ui-text); }
html body.jg-room .jr-gamepop__btn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--ui-s5); height: var(--ui-s5); padding: 0; font-size: var(--ui-fs-xs); border: 0; border-radius: var(--ui-r-pill); background: var(--nb); color: var(--ui-accent-text); box-shadow: var(--nb-out-sm); cursor: pointer; }
html body.jg-room .jr-gamepop__btn::before { content: ""; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; }
html body.jg-room .jr-gamepop__body { flex: 1 1 auto; min-height: 0; }
html body.jg-room .jr-gamepop__frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
html body.jg-room .jr-gamechip { position: fixed; z-index: 1500; right: var(--ui-gap); bottom: calc(var(--jf-nav-clear) + env(safe-area-inset-bottom, 0px) + 64px); min-height: 44px; padding: 0 var(--ui-pad-md); border: 0; border-radius: var(--ui-r-pill); background: var(--ui-grad-btn); color: var(--ui-on-accent); font-weight: 700; box-shadow: var(--nb-out-pri); cursor: pointer; }
/* minimized game inside the Room page: a bar on top of the page content (sticky while the sections scroll) */
html body.jg-room .jr-gamebar { position: sticky; top: 0; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 44px; margin-bottom: var(--ui-gap-sm); padding: 0 var(--ui-pad-md); border: 0; border-radius: var(--ui-r-pill); background: var(--ui-grad-btn); color: var(--ui-on-accent); font-weight: 700; box-shadow: var(--nb-out-pri); cursor: pointer; }
html body.jg-ui.jg-ui.jg-room .jx-chat__day { grid-column: 1 / -1; order: -1; justify-self: center; padding: var(--ui-s1) var(--ui-s3); border-radius: var(--ui-r-pill); background: var(--ui-surface-solid); color: var(--ui-text); font-size: var(--ui-fs-xs); font-weight: 700; }
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--cont { margin-top: calc(var(--ui-s1) * -1); }
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--cont > .jr-avatar { visibility: hidden; height: 0; overflow: hidden; }
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--cont .jx-chat__name { display: none; }
html body.jg-ui.jg-ui.jg-room .jx-chat__send { min-width: 72px; min-height: var(--ui-tap); }
html body.jg-ui.jg-ui.jg-room .jx-chat__new { gap: var(--ui-s2); min-height: var(--ui-tap); }
html body.jg-ui.jg-ui.jg-room .jx-chat__bubble { border-radius: var(--ui-s1) var(--ui-r-md) var(--ui-r-md) var(--ui-r-md); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--me .jx-chat__bubble { border-radius: var(--ui-r-md) var(--ui-s1) var(--ui-r-md) var(--ui-r-md); }
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--cont .jx-chat__bubble { border-radius: var(--ui-r-md); }
html body.jg-ui.jg-ui.jg-room .jx-chat__bubble.is-pressed { opacity: 0.8; }
html body.jg-ui.jg-ui.jg-room .jx-chat__bubble:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
html body.jg-ui.jg-ui.jg-room .jx-chat__st { flex: 0 0 auto; margin-left: auto; color: var(--ui-muted); }
html body.jg-ui.jg-ui.jg-room .jx-chat__st--failed { color: var(--ui-bad-text); }
html body.jg-ui.jg-ui.jg-room .jx-chat__bubble { width: 88%; max-width: 88%; box-sizing: border-box; line-height: 1.45; border-left: 3px solid var(--ui-accent); }
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--me .jx-chat__bubble { justify-self: end; border-left-width: 0; border-right: 3px solid var(--ui-accent); }
html body.jg-ui.jg-ui.jg-room .jx-chat__meta { justify-content: space-between; margin-bottom: var(--ui-s1); }
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--me .jx-chat__meta { flex-direction: row-reverse; }
html body.jg-ui.jg-ui.jg-room .jx-chat__text { line-height: 1.45; }
html body.jg-ui.jg-ui.jg-room .jx-chat__msg--pending .jx-chat__bubble { opacity: 0.75; }
html body.jg-ui.jg-ui.jg-room .jx-chat__retry { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2); margin-top: var(--ui-s2); color: var(--ui-bad-text); font-size: var(--ui-fs-xs); font-weight: 700; }
html body.jg-ui.jg-ui.jg-room .jx-chat__retry .jx-btn { min-height: var(--ui-tap); }
html body.jg-ui.jg-ui.jg-room .jx-chat__buf { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html body.jg-ui.jg-ui.jg-room.jr-fit:not(.jg-admin) { padding-bottom: 0 !important; }
html body.jg-ui.jg-ui.jg-room.jr-fit .jf-nav { display: none !important; }
/* the side padding of #jr-root gives the shadows room inside its scroll box; it is pulled back so the cards keep their width */
@media (max-width: 768px) {
  html body.jg-room.jr-fit #jr-root { margin-left: calc(var(--jr-edge) * -1); margin-right: calc(var(--jr-edge) * -1); }
}
@media (min-width: 769px) {
  html body.jg-room.jr-fit #jr-root { max-width: calc(640px + var(--jr-edge) * 2); }
}
@media (min-width: 960px) {
  html body.jg-room.jr-fit #jr-root.jr-wide { max-width: calc(1100px + var(--jr-edge) * 2); }
}


/* ===== Page layout (moved from assets/brand/game/home.css in C11; selectors unchanged, scoped to its page body class) ===== */
html body.jg-home .container { padding: 0; }
html body.jg-home .action-btn.is-hidden { display: none; }
html body.jg-home .jg-player .jx-btn { flex: 0 0 auto; }
@media (max-width: 359px) {
  html body.jg-home .jg-player .jx-btn { flex: 1 1 100%; }
}
html body.jg-home.jg-ui .jg-games .action-btn {
  position: relative; overflow: hidden; border: 0; color: var(--ui-on-accent); text-align: left;
  min-height: 96px; padding: 14px 16px; border-radius: var(--jg-radius);
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  grid-template-areas: "icon title play" "icon sub play";
  box-shadow: var(--ui-shadow);
}
html body.jg-home.jg-ui .jg-games .action-btn.ludo { background: var(--jf-grad); color: var(--ui-on-accent); }
html body.jg-home.jg-ui .jg-games .action-btn.barah { background: linear-gradient(135deg, var(--ui-purple), var(--jf-pink)); color: var(--ui-on-accent); }
html body.jg-home.jg-ui .jg-games .action-btn.ttt { background: linear-gradient(135deg, var(--jf-coral), var(--ui-flame-deep)); color: var(--ui-on-accent); }
html body.jg-home .jg-games .action-btn:hover { transform: none; }
html body.jg-home .jg-games .action-btn:active { transform: scale(0.98); }
html body.jg-home .jg-games .action-icon {
  grid-area: icon; position: relative; z-index: 1; width: 56px; height: 56px; margin: 0; border-radius: var(--ui-r-md);
  background: var(--ui-on-accent-22); font-size: var(--ui-fs-xl);
}

html body.jg-home.jg-ui .jg-games .action-btn .action-icon { color: var(--ui-on-accent); }
html body.jg-home.jg-ui .jg-games .action-btn .action-title {
  grid-area: title; position: relative; z-index: 1; margin: 0; align-self: end;
  font: 700 22px/1.1 var(--jg-font-display); color: var(--ui-on-accent); overflow-wrap: anywhere;
}
html body.jg-home.jg-ui .jg-games .action-btn .action-subtitle {
  grid-area: sub; position: relative; z-index: 1; align-self: start; margin-top: 4px;
  font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-on-accent-85); overflow-wrap: anywhere;
}
html body.jg-home.jg-ui .jg-games .action-btn .jg-play {
  grid-area: play; position: relative; z-index: 1; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px; border-radius: var(--ui-r-pill); background: var(--ui-on-accent); color: var(--ui-accent-deep);
  font: 700 14px var(--jg-font-display); letter-spacing: 0.08em;
}
html body.jg-home.jg-ui .jg-games .action-btn:hover .jg-play { background: var(--ui-on-accent-85); }
html body.jg-home.jg-ui .jg-games .action-btn:active .jg-play { background: var(--ui-on-accent-85); }

html body.jg-home .jg-games .action-btn.ludo::after,
html body.jg-home .jg-games .action-btn.barah::after,
html body.jg-home .jg-games .action-btn.ttt::after {
  position: absolute; right: -6px; bottom: -18px; font: 900 96px/1 "Font Awesome 6 Free";
  color: var(--ui-on-accent); opacity: 0.12; pointer-events: none;
}
html body.jg-home .jg-games .action-btn.ludo::after { content: "\f522"; content: "\f522" / ""; }
html body.jg-home .jg-games .action-btn.barah::after { content: "\f43c"; content: "\f43c" / ""; }
html body.jg-home .jg-games .action-btn.ttt::after { content: "\23"; content: "\23" / ""; }
@media (max-width: 359px) {
  html body.jg-home .jg-games .action-btn { padding: 12px; column-gap: 10px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  html body.jg-home .jg-games .action-icon { width: 48px; height: 48px; font-size: var(--ui-fs-lg); }
  html body.jg-home.jg-ui .jg-games .action-btn .action-title { font-size: var(--ui-fs-lg); }
  html body.jg-home.jg-ui .jg-games .action-btn .jg-play { padding: 0 10px; font-size: var(--ui-fs-xs); }
}
html body.jg-home .jg-quick .action-btn {
  min-height: 84px; padding: 12px 8px; border: 1px solid var(--jf-glass-border); border-radius: var(--jg-radius);
  background: var(--jf-glass-strong); color: var(--ui-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
html body.jg-home .jg-quick .action-btn:hover { transform: none; }
html body.jg-home .jg-quick .action-btn:active { transform: scale(0.97); }
html body.jg-home .jg-quick .action-icon {
  width: 44px; height: 44px; margin: 0 auto 6px; font-size: var(--ui-fs-lg);
  background: var(--jf-grad-soft); color: var(--ui-accent-text);
}
html body.jg-home .jg-quick .action-title { font: 700 15px var(--jg-font-display); margin: 0; overflow-wrap: anywhere; }
html body.jg-home .jg-quick .action-subtitle { font-size: var(--ui-fs-xs); color: var(--ui-muted); overflow-wrap: anywhere; }


/* ===== Page layout (moved from assets/brand/game/menu.css in C11; selectors unchanged, scoped to its page body class) ===== */


/* ---------- action buttons -> single column list of rows ---------- */
html body.jg-menu .actions-grid { display: flex; flex-direction: column; grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap, 12px); margin-bottom: 0; }
html body.jg-menu .action-btn,
html body.jg-menu .action-btn.deposit,
html body.jg-menu .action-btn.transfer,
html body.jg-menu .action-btn.register {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 0; align-items: center; text-align: left; min-height: 64px; padding: 10px 14px;
  border-radius: var(--jg-radius); background: var(--card-bg); border: 1px solid var(--border-color);
  color: var(--text-color); touch-action: manipulation;
}
html body.jg-menu .action-btn:hover { transform: none; }
html body.jg-menu .action-btn:active { transform: scale(0.98); }
html body.jg-menu .action-btn .action-icon,
html body.jg-menu .action-btn.deposit .action-icon,
html body.jg-menu .action-btn.transfer .action-icon,
html body.jg-menu .action-btn.register .action-icon {
  grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; font-size: var(--ui-fs-md); border-radius: 50%;
  background: var(--jf-grad-soft); color: var(--jf-active); border: 1px solid var(--border-color);
}
html body.jg-menu .action-btn:hover .action-icon { transform: none; }
html body.jg-menu .action-btn .action-title { grid-column: 2; grid-row: 1; align-self: end; margin: 0; overflow-wrap: anywhere; }
html body.jg-menu .action-btn .action-subtitle { grid-column: 2; grid-row: 2; align-self: start; overflow-wrap: anywhere; }

html body.jg-menu .action-btn::after {
  content: ''; grid-column: 3; grid-row: 1 / span 2; justify-self: center; width: 8px; height: 8px; transform: rotate(45deg);
}

html body.jg-menu .toast > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
html body.jg-menu .action-btn.register { border-top: 3px solid var(--ui-warn); }
html body.jg-menu .action-btn.register .action-icon { background: var(--ui-grad-warn); color: var(--ui-on-accent); }


/* ===== Page layout (moved from assets/brand/game/wallet-history.css in C11; selectors unchanged, scoped to its page body class) ===== */
html body.jg-wallet-history .wh-filter { display: flex; gap: var(--ui-gap-sm, 8px); }

/* C15 game history pages (ludo / tic tac toe / barah): layout only of kit classes, moved from assets/games/jfun-history.css; :where keeps the old specificity */

:where(html body.jg-ludo-history) .stat-card-header,
:where(html body.jg-tictactoe-history) .stat-card-header,
:where(html body.jg-barah-history) .stat-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
:where(html body.jg-ludo-history) .stat-card-icon,
:where(html body.jg-tictactoe-history) .stat-card-icon,
:where(html body.jg-barah-history) .stat-card-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
:where(html body.jg-ludo-history) .stat-card-value,
:where(html body.jg-tictactoe-history) .stat-card-value,
:where(html body.jg-barah-history) .stat-card-value { margin-bottom: 4px; }
:where(html body.jg-ludo-history) .stat-card-subtitle,
:where(html body.jg-tictactoe-history) .stat-card-subtitle,
:where(html body.jg-barah-history) .stat-card-subtitle { display: flex; align-items: center; gap: 4px; }

:where(html body.jg-ludo-history) .section-title,
:where(html body.jg-tictactoe-history) .section-title,
:where(html body.jg-barah-history) .section-title { display: flex; align-items: center; gap: 8px; }

:where(html body.jg-ludo-history) .pagination,
:where(html body.jg-tictactoe-history) .pagination,
:where(html body.jg-barah-history) .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 15px; padding: 10px; }

:where(html body.jg-ludo-history) .empty-state,
:where(html body.jg-tictactoe-history) .empty-state,
:where(html body.jg-barah-history) .empty-state { text-align: center; padding: 40px 20px; }

:where(html body.jg-ludo-history) .toast,
:where(html body.jg-tictactoe-history) .toast,
:where(html body.jg-barah-history) .toast { position: fixed; bottom: 20px; right: 20px; display: none; align-items: center; gap: 12px; z-index: 3000; min-width: 300px; }


/* C16 ludo lobby + ludo history: rules of kit classes moved from assets/brand/game/ludo.css and assets/games/ludo/dashboard.css (selectors/specificity unchanged; unscoped page rules got :where(html body.jg-ludo) = same specificity as before) */
/* from assets/brand/game/ludo.css */
html body.jg-ludo .modal-content,
html body.jg-tictactoe .modal-content,
html body.jg-barah .modal-content {
  padding: 20px; max-height: 100%; overflow-y: auto;}
html body.jg-ludo .modal-footer,
html body.jg-tictactoe .modal-footer,
html body.jg-barah .modal-footer { flex-wrap: wrap;}
html body.jg-ludo .modal-btn,
html body.jg-tictactoe .modal-btn,
html body.jg-barah .modal-btn {
  flex: 1 1 120px; touch-action: manipulation;}
html body.jg-ludo .modal-btn.confirm,
html body.jg-tictactoe .modal-btn.confirm,
html body.jg-barah .modal-btn.confirm { background: var(--jf-grad); color: var(--ui-on-accent); box-shadow: var(--jg-glow); transform: none; filter: none; }
html body.jg-ludo .modal-btn:active,
html body.jg-tictactoe .modal-btn:active,
html body.jg-barah .modal-btn:active { transform: scale(0.97);}
/* lobby modals (confirm, room code): .jx-btn buttons share the footer row like the old .modal-btn did */
html body.jg-game .modal-footer > .jx-btn { flex: 1 1 120px; touch-action: manipulation; }

html body.jg-ludo-history .stat-card-value,
html body.jg-tictactoe-history .stat-card-value,
html body.jg-barah-history .stat-card-value { overflow-wrap: anywhere;}
html body.jg-ludo-history .section-title,
html body.jg-tictactoe-history .section-title,
html body.jg-barah-history .section-title { text-transform: uppercase; letter-spacing: 0.06em;}

html body.jg-ludo-history .pagination,
html body.jg-tictactoe-history .pagination,
html body.jg-barah-history .pagination {
  justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  gap: 8px; padding: 6px 2px; max-width: 100%;
}

html body.jg-ludo-history .pagination > :first-child,
html body.jg-tictactoe-history .pagination > :first-child,
html body.jg-barah-history .pagination > :first-child { margin-left: auto;}
html body.jg-ludo-history .pagination > :last-child,
html body.jg-tictactoe-history .pagination > :last-child,
html body.jg-barah-history .pagination > :last-child { margin-right: auto;}
/* from assets/games/ludo/dashboard.css */
:where(html body.jg-ludo) .stat-card-header,
:where(html body.jg-tictactoe) .stat-card-header,
:where(html body.jg-barah) .stat-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;}
:where(html body.jg-ludo) .stat-card-icon,
:where(html body.jg-tictactoe) .stat-card-icon,
:where(html body.jg-barah) .stat-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;}
:where(html body.jg-ludo) .stat-card-value,
:where(html body.jg-tictactoe) .stat-card-value,
:where(html body.jg-barah) .stat-card-value {
    margin-bottom: 4px;}
:where(html body.jg-ludo) .stat-card-subtitle,
:where(html body.jg-tictactoe) .stat-card-subtitle,
:where(html body.jg-barah) .stat-card-subtitle {
    display: flex;
    align-items: center;
    gap: 4px;}
:where(html body.jg-ludo) .timer-section,
:where(html body.jg-tictactoe) .timer-section,
:where(html body.jg-barah) .timer-section {
    text-align: center;}
:where(html body.jg-ludo) .quick-bet-container,
:where(html body.jg-tictactoe) .quick-bet-container,
:where(html body.jg-barah) .quick-bet-container {
    margin-bottom: 8px;}
@media (min-width: 1024px) {
:where(html body.jg-ludo) .container {
        max-width: 800px;
    }
:where(html body.jg-ludo) .modal-content,
:where(html body.jg-tictactoe) .modal-content,
:where(html body.jg-barah) .modal-content {
        max-width: 450px;
        padding: 30px;}
:where(html body.jg-ludo) .toast,
:where(html body.jg-tictactoe) .toast,
:where(html body.jg-barah) .toast {
        bottom: 30px;
        right: 30px;
        min-width: 350px;}
}
:where(html body.jg-ludo) .modal-content,
:where(html body.jg-tictactoe) .modal-content,
:where(html body.jg-barah) .modal-content {
    width: 100%;
    max-width: 400px;
    padding: 25px;
    position: relative;
    animation: slideUp 0.3s ease;}
:where(html body.jg-ludo) .modal-header,
:where(html body.jg-tictactoe) .modal-header,
:where(html body.jg-barah) .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;}
:where(html body.jg-ludo) .modal-body,
:where(html body.jg-tictactoe) .modal-body,
:where(html body.jg-barah) .modal-body {
    text-align: center;
    margin-bottom: 20px;}
:where(html body.jg-ludo) .modal-row,
:where(html body.jg-tictactoe) .modal-row,
:where(html body.jg-barah) .modal-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;}
:where(html body.jg-ludo) .modal-row .value.highlight,
:where(html body.jg-tictactoe) .modal-row .value.highlight,
:where(html body.jg-barah) .modal-row .value.highlight {
    color: var(--primary-color);}
:where(html body.jg-ludo) .modal-footer,
:where(html body.jg-tictactoe) .modal-footer,
:where(html body.jg-barah) .modal-footer {
    display: flex;
    gap: 10px;}
:where(html body.jg-ludo) .modal-btn,
:where(html body.jg-tictactoe) .modal-btn,
:where(html body.jg-barah) .modal-btn {
    flex: 1;}
:where(html body.jg-ludo) .modal-btn.confirm,
:where(html body.jg-tictactoe) .modal-btn.confirm,
:where(html body.jg-barah) .modal-btn.confirm {
    background: var(--jf-grad);
    color: var(--ui-on-accent);
}
:where(html body.jg-ludo) .modal-btn.confirm:hover,
:where(html body.jg-tictactoe) .modal-btn.confirm:hover,
:where(html body.jg-barah) .modal-btn.confirm:hover {
    background: var(--jf-grad);
    filter: saturate(1.15) brightness(1.04);
    transform: translateY(-1px);
    color: var(--ui-on-accent);}
:where(html body.jg-ludo) .toast,
:where(html body.jg-tictactoe) .toast,
:where(html body.jg-barah) .toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(500px);
    z-index: 3000;
    min-width: 300px;}
:where(html body.jg-ludo) .toast.show,
:where(html body.jg-tictactoe) .toast.show,
:where(html body.jg-barah) .toast.show {
    transform: translateX(0);}
:where(html body.jg-ludo) .jf-seg button.active,
:where(html body.jg-tictactoe) .jf-seg button.active,
:where(html body.jg-barah) .jf-seg button.active { background: var(--primary-color); color: var(--ui-on-accent); box-shadow: var(--ui-accent-shadow);}
:where(html body.jg-ludo) .jf-player-pill.active,
:where(html body.jg-tictactoe) .jf-player-pill.active,
:where(html body.jg-barah) .jf-player-pill.active { border-color: var(--primary-color); box-shadow: 0 2px 8px var(--ui-accent-ring); }
:where(html body.jg-ludo) .jf-game-head,
:where(html body.jg-tictactoe) .jf-game-head,
:where(html body.jg-barah) .jf-game-head { display: flex; align-items: center; gap: 12px; }
:where(html body.jg-ludo) .jf-game-icon.ttt,
:where(html body.jg-tictactoe) .jf-game-icon.ttt,
:where(html body.jg-barah) .jf-game-icon.ttt { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--ui-on-accent); }
:where(html body.jg-ludo) .jf-game-icon.barah,
:where(html body.jg-tictactoe) .jf-game-icon.barah,
:where(html body.jg-barah) .jf-game-icon.barah { background: linear-gradient(135deg, var(--accent-blue), var(--ui-info-deep)); color: var(--ui-on-accent); }
:where(html body.jg-ludo) .jf-game-icon.ludo,
:where(html body.jg-tictactoe) .jf-game-icon.ludo,
:where(html body.jg-barah) .jf-game-icon.ludo { background: linear-gradient(135deg, var(--accent-orange), var(--ui-warn-deep)); color: var(--ui-on-accent); }
/* from assets/games/ludo/dashboard.css (2nd pass: classes that became kit classes after the first move) */
:where(html body.jg-ludo) .jf-player-pill,
:where(html body.jg-tictactoe) .jf-player-pill,
:where(html body.jg-barah) .jf-player-pill { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 6px; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: var(--ui-r-sm); padding: 8px 10px; font-size: var(--ui-fs-sm); font-weight: 600; color: var(--text-color); }
:where(html body.jg-ludo) .jf-game-icon,
:where(html body.jg-tictactoe) .jf-game-icon,
:where(html body.jg-barah) .jf-game-icon { width: 52px; height: 52px; border-radius: var(--ui-r-md); display: flex; align-items: center; justify-content: center; font-size: var(--ui-fs-xl); color: var(--ui-on-accent); flex: none; }
:where(html body.jg-ludo) .jf-player-pill.out,
:where(html body.jg-tictactoe) .jf-player-pill.out,
:where(html body.jg-barah) .jf-player-pill.out { opacity: 0.5; filter: grayscale(1); }

/* C17 tic tac toe lobby + history: leftover rules of kit classes moved from assets/brand/game/tictactoe.css and assets/games/tic_tac_toe/dashboard.css (same specificity; unscoped rules got :where(html body.jg-tictactoe)) */
/* from assets/brand/game/tictactoe.css */
html body.jg-tictactoe-history .referral-header h3, html body.jg-tictactoe-history .section-title { text-transform: uppercase; letter-spacing: 0.06em;}
/* from assets/games/tic_tac_toe/dashboard.css */
:where(html body.jg-tictactoe) .timer-section {
    text-align: center;}

/* C18 barah tehni lobby + history: leftover rules of kit classes moved from assets/brand/game/barah.css and assets/games/barah_tehni/dashboard.css (same specificity; unscoped rules got :where(html body.jg-barah)) */
/* from assets/brand/game/barah.css */
html body.jg-barah-history .referral-header h3, html body.jg-barah-history .section-title { text-transform: uppercase; letter-spacing: 0.06em;}
/* from assets/games/barah_tehni/dashboard.css */

/* C19 leftovers: rules of kit classes moved from assets/brand/game/money.css and assets/brand/game/auth.css (selectors unchanged = same specificity) */
/* from assets/brand/game/money.css */
html body.jg-money .alert { padding-right: 48px; overflow-wrap: anywhere; }
html body.jg-money .alert-close { width: 44px; height: 44px; right: 0; }
html body.jg-transfer .tab-content { min-width: 0; }
html body.jg-transfer .mode-btn.active {
  border-color: transparent; box-shadow: var(--jg-glow);
  background: linear-gradient(var(--jf-solid), var(--jf-solid)) padding-box, var(--jf-grad) border-box;
}
html body.jg-transfer .user-item .username, html body.jg-transfer .selected-user-name { font-size: var(--ui-fs-md); overflow-wrap: anywhere; min-width: 0; }
html body.jg-deposit .dep-box { display: none; text-align: center; }
html body.jg-deposit .dep-box.show { display: block; }
html body.jg-deposit .network-info.show {
            display: block;
        }
html body.jg-withdraw .points-calc.error { background: var(--ui-bad-bg); border-left-color: var(--ui-bad); color: var(--ui-bad-text); }
html body.jg-transfer .mode-btn.active { border-color: var(--ui-info); background: var(--ui-info-bg); }
html body.jg-transfer .user-list.show { display: block; }
html body.jg-transfer .user-item .username { font-weight: 600; color: var(--jf-fg); font-size: var(--ui-fs-sm); }
html body.jg-transfer .selected-user { display: none; align-items: center; justify-content: space-between; gap: var(--ui-gap-sm); }
html body.jg-transfer .selected-user.show { display: flex; }
html body.jg-transfer .tf-amount > .jx-field { flex: 1 1 auto; min-width: 0; }
html body.jg-transfer .tf-amount > .jx-field:last-child { flex: 0 0 auto; max-width: 42%; min-width: 88px; }
html body.jg-transfer .mode-btn.active { border-color: var(--ui-accent); background: var(--jf-grad-soft); }
/* from assets/brand/game/auth.css */
html body.jg-auth .logo-section .jf-logo {
  width: 84px; height: 84px; margin: 0 auto 12px; filter: none;
}
html body.jg-auth .section-title {
  margin-bottom: 18px; padding: 12px;
}
html body.jg-auth .alert { margin-bottom: 16px; overflow-wrap: anywhere; animation: none; }
@media (prefers-reduced-motion: reduce) {
html body.jg-auth .password-strength.show, html body.jg-auth .ripple, html body.jg-auth .jx-btn .spinner { animation: none; }
}
html body.jg-auth .alert::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; }
:where(html body.jg-auth) .logo-section .jf-logo { display: block; margin: 0 auto 20px; }
:where(html body.jg-auth) .password-strength.show { display: block; animation: slideIn 0.3s ease; }

/* C19 2nd pass: classes that became kit classes after the first move (selectors unchanged) */
/* from assets/brand/game/money.css */
html body.jg-money .network-info, html body.jg-money .fees-info {
  padding: 12px; border-radius: var(--jg-radius-sm); font-size: var(--ui-fs-xs); color: var(--text-color);
  border-left: 4px solid var(--jg-warn); background: var(--ui-warn-tint-08); overflow-wrap: anywhere;
}
html body.jg-transfer .mode-btn {
  min-width: 0; min-height: 88px; padding: 12px 8px; border-radius: var(--ui-r-md); border: 1.5px solid var(--border-color);
  background: var(--card-bg); display: flex; flex-direction: column; align-items: center; justify-content: center;
  touch-action: manipulation;
}
html body.jg-transfer .user-list {
  max-height: 240px; border-radius: var(--ui-r-sm); background: var(--jf-solid); border: 1.5px solid var(--border-color); box-shadow: var(--jf-glass-shadow);
}
html body.jg-auth .jx-btn.loading .spinner { display: inline-block; }
html body.jg-auth .ripple { position: absolute; border-radius: 50%; background: var(--ui-on-accent-30); transform: scale(0); animation: ripple-animation 0.6s ease-out; pointer-events: none; }
:where(html body.jg-auth) .password-strength { height: 6px; background: var(--ui-disabled-bg); border-radius: var(--ui-r-sm); margin-top: 10px; overflow: hidden; display: none; }
:where(html body.jg-auth) .spinner { display: none; width: 20px; height: 20px; border: 2px solid var(--ui-on-accent-30); border-top-color: var(--ui-on-accent); border-radius: 50%; animation: spin 1s linear infinite; }

/* C19 2nd pass: classes that became kit classes after the first move (selectors unchanged) */
/* from assets/brand/game/money.css */
html body.jg-withdraw .fees-info { background: var(--ui-purple-bg); border-left: 4px solid var(--ui-purple); padding: 10px 12px; border-radius: var(--ui-r-sm); margin-bottom: var(--ui-card-gap); font-size: var(--ui-fs-xs); color: var(--ui-purple-text); }

/* G8: bot badge, one definition (was copied in 4 game css files) */
.jf-badge-bot{ background: var(--accent-orange); color: var(--ui-on-accent); font-size: var(--ui-fs-xs); font-weight: 700; padding: 2px 6px; border-radius: var(--ui-r-sm); letter-spacing: 0.5px; }

/* J2: login/register full-width primary submit (.auth-btn) and referral box (.refer-section) look, moved from assets/brand/game/auth.css; layout stays in auth.css */
html body.jg-ui.jg-ui:not(.jg-admin) .refer-section {
  background: var(--jf-grad-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-r-sm);
}
html body.jg-ui.jg-ui:not(.jg-admin) .refer-section::before { background: var(--jf-grad); }

/* J2: layout/state rules of .auth-btn and .refer-section moved from assets/brand/game/auth.css (selectors unchanged) */
html body.jg-auth .refer-section {
  padding: 14px 14px 14px 18px; margin-bottom: 20px;
}
html body.jg-auth .refer-section::before { width: 4px; }
html body.jg-auth .jx-btn.loading { opacity: 0.85; cursor: not-allowed; }
html body.jg-auth .jx-btn.loading > span { display: none; }
:where(html body.jg-auth) .refer-section { padding: 20px; margin-bottom: 25px; position: relative; overflow: hidden; }
:where(html body.jg-auth) .refer-section::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; }

/* J3: login success toast icon (moved from assets/brand/game/auth.css) */
html body.jg-auth .toast.success > .toast-icon { font-size: var(--ui-fs-lg); color: var(--ui-ok); }

/* Shared MODAL shell (all user pages): hidden by default; open = class "active" (support) or inline display:flex set by the page JS (games, JF.openModal).
   Overlay colour is the .modal rule above. Layout bits that pages may tune use :where() so page css still wins. */
html body.jg-ui.jg-ui:not(.jg-admin) .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; align-items: center; justify-content: center; box-sizing: border-box; }
html body.jg-ui.jg-ui:not(.jg-admin) .modal.active { display: flex; }
:where(html body.jg-ui.jg-ui:not(.jg-admin)) .modal { padding: max(15px, env(safe-area-inset-top, 0px)) max(15px, env(safe-area-inset-right, 0px)) max(15px, env(safe-area-inset-bottom, 0px)) max(15px, env(safe-area-inset-left, 0px)); }
:where(html body.jg-ui.jg-ui:not(.jg-admin)) .modal > .modal-content { box-sizing: border-box; max-width: 100%; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Shared TOAST shell (static #toast boxes only; the toast the login page builds in JS and the PWA / game toasts are not touched): hidden until the page JS adds "show" (or "jf-show"). */
:where(html body.jg-ui.jg-ui:not(.jg-admin)) .toast[id] { position: fixed; left: 50%; bottom: calc(var(--jf-nav-clear) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: calc(100% - 30px); max-width: 420px; box-sizing: border-box; z-index: 3000; display: flex; align-items: center; gap: var(--ui-gap-sm); }
html body.jg-ui.jg-ui:not(.jg-admin) .toast[id]:not(.show):not(.jf-show) { opacity: 0; visibility: hidden; pointer-events: none; }
html body.jg-ui.jg-ui:not(.jg-admin) .toast[id].jf-show { display: flex; }

/* Card-like links: no text underline (menu rows, Play Now cards, wallet tiles, nav items, buttons that are links) */
html body.jg-ui.jg-ui:not(.jg-admin) a:is(.action-btn, .jx-tile, .jf-nav-item),
html body.jg-ui.jg-ui:not(.jg-admin) a:is(.action-btn, .jx-tile, .jf-nav-item):is(:hover, :focus, :active, :visited) { text-decoration: none; }

/* SOFT 3D (neumorphic) - same look as the Offline app. Raised = outer shadows, pressed / wells = inset. Light theme only. */
html body.jg-ui.jg-ui.jg-ui {
  --nb: #FFF1F7; --nb-ink: #A3005F; --nb-ico: #C4006E; --nb-line: rgba(214, 140, 175, .28); --nb-r: 28px;
  --nb-out: 9px 9px 20px rgba(214, 140, 175, .40);
  --nb-out-md: 6px 6px 13px rgba(214, 140, 175, .40);
  --nb-out-sm: 5px 5px 10px rgba(214, 140, 175, .42);
  --nb-out-pri: 5px 5px 11px rgba(196, 0, 110, .30);
  --nb-in: inset 5px 5px 11px rgba(214, 140, 175, .42);
  --nb-in-sm: inset 4px 4px 9px rgba(214, 140, 175, .42);
  --nb-press: inset 4px 4px 9px rgba(120, 0, 60, .38);
}
/* 1. Top bar: floating raised pill, balance chip and menu button raised */
html body.jg-ui.jg-ui:not(.jg-admin) .navbar {
  background: var(--nb); border: 0; border-radius: 28px; box-shadow: var(--nb-out-md);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .menu-toggle,
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display {
  border: 0; background: var(--nb); color: var(--nb-ink); box-shadow: var(--nb-out-sm);
}
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display i { color: var(--nb-ico); }
/* 2. Bottom bar: floating raised pill; active tab = gradient pill (icon + label), other tabs icon only */
html body.jg-ui.jg-ui .jf-nav {
  background: var(--nb); border: 0; border-radius: 28px; box-shadow: var(--nb-out-md);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play) { gap: 2px; background: transparent; border-radius: 22px; }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play)::before { display: none; }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play) .jf-nav-icon { width: auto; height: 28px; transform: none; }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play):not(.active) .jf-nav-text { display: none; }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play) .jf-nav-text { font-family: var(--ui-font-display); font-size: var(--ui-fs-xs); font-weight: 600; }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play).active {
  flex-direction: row; gap: 6px; flex: 1 1 auto; max-width: none; background: var(--ui-grad-btn); color: var(--ui-on-accent); box-shadow: var(--nb-out-pri);
}
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play).active .jf-nav-icon,
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play).active .jf-nav-text { color: var(--ui-on-accent); }
html body.jg-ui.jg-ui .jf-nav-item:not(.jf-nav-play):not(.active):active { box-shadow: var(--nb-in-sm); }
/* 3. Cards and wells */
html body.jg-ui.jg-ui:not(.jg-admin) :is(.merged-card, .balance-card, .stat-card),
html body.jg-ui.jg-ui.jg-ui .jx-card {
  background: var(--nb); border: 0; border-radius: 28px; box-shadow: var(--nb-out-md);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body.jg-ui.jg-ui.jg-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
  background: var(--nb); border: 0; border-radius: 18px; box-shadow: var(--nb-in-sm);
}
/* 4. Buttons and chips: gradient pill raised, outline = raised surface, pressed = inset */
html body.jg-ui.jg-ui:not(.jg-admin) .modal-btn { border: 0; border-radius: var(--ui-r-pill); box-shadow: var(--nb-out-pri); }
html body.jg-ui.jg-ui.jg-ui .jx-btn { border: 0; border-radius: var(--ui-r-pill); box-shadow: var(--nb-out-pri); }
html body.jg-ui.jg-ui:not(.jg-admin) .modal-btn.cancel { border: 0; background: var(--nb); color: var(--nb-ink); box-shadow: var(--nb-out-sm); }
html body.jg-ui.jg-ui.jg-ui :is(.jx-btn--outline, .jx-btn--ghost) { border: 0; background: var(--nb); color: var(--nb-ink); box-shadow: var(--nb-out-sm); }
html body.jg-ui.jg-ui:not(.jg-admin) .modal-btn:not(:disabled):not(.disabled):active { box-shadow: var(--nb-press); }
html body.jg-ui.jg-ui.jg-ui .jx-btn:not(:disabled):not(.disabled):active { box-shadow: var(--nb-press); }
html body.jg-ui.jg-ui.jg-ui .jx-chip { border: 0; background: var(--nb); color: var(--nb-ink); box-shadow: var(--nb-out-sm); }
html body.jg-ui.jg-ui.jg-ui .jx-chip.active { background: var(--ui-grad-btn); color: var(--ui-on-accent); box-shadow: var(--nb-out-pri); }
/* 5. Dialogs */
html body.jg-ui.jg-ui:not(.jg-admin) .modal-content { border-radius: 28px; background: var(--nb); box-shadow: var(--nb-out); -webkit-backdrop-filter: none; backdrop-filter: none; }
html body.jg-ui.jg-ui.jg-ui .jx-modal { border-radius: 28px; background: var(--nb); box-shadow: var(--nb-out); -webkit-backdrop-filter: none; backdrop-filter: none; }
html body.jg-ui.jg-ui:not(.jg-admin) :is(.modal-header, .modal-footer) { border-color: var(--nb-line); }
html body.jg-ui.jg-ui:not(.jg-admin) :is(.close-modal, .close-btn) { border: 0; background: var(--nb); color: var(--nb-ico); box-shadow: var(--nb-out-sm); }
/* 6. Home: player card = hero, game cards (round inset icon, raised Play pill, per-game colour), wallet tiles */
html body.jg-home.jg-ui .jg-games .action-btn:is(.ludo, .barah, .ttt), html body.jg-home.jg-ui .jg-quick .action-btn {
  border: 0; border-radius: 28px; background: var(--nb); color: var(--ui-text); box-shadow: var(--nb-out);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body.jg-home.jg-ui .jg-games .action-btn:active, html body.jg-home.jg-ui .jg-quick .action-btn:active { transform: scale(.985); box-shadow: var(--nb-in); }
html body.jg-home.jg-ui .jg-games .action-btn.ludo { --c2: #F57C00; --ct: #9A4B00; }
html body.jg-home.jg-ui .jg-games .action-btn.ttt { --c2: #C4006E; --ct: #A3005F; }
html body.jg-home.jg-ui .jg-games .action-btn.barah { --c2: #1565C0; --ct: #1F4FA8; }
html body.jg-home.jg-ui .jg-games .action-btn:is(.ludo, .barah, .ttt) .action-icon,
html body.jg-home.jg-ui .jg-quick .action-btn .action-icon {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--nb); box-shadow: var(--nb-in); color: var(--c2, var(--nb-ico));
}
html body.jg-home.jg-ui .jg-games .action-btn:is(.ludo, .barah, .ttt) .action-title,
html body.jg-home.jg-ui .jg-quick .action-btn .action-title { color: var(--nb-ink); }
html body.jg-home.jg-ui .jg-games .action-btn:is(.ludo, .barah, .ttt) .action-subtitle,
html body.jg-home.jg-ui .jg-quick .action-btn .action-subtitle { color: var(--ui-muted); }
html body.jg-home.jg-ui .jg-games .action-btn:is(.ludo, .barah, .ttt)::after { color: var(--c2); opacity: .12; }
html body.jg-home.jg-ui .jg-games .action-btn:is(.ludo, .barah, .ttt) .jg-play,
html body.jg-home.jg-ui .jg-games .action-btn:is(.ludo, .barah, .ttt):is(:hover, :active) .jg-play {
  background: var(--nb); border: 0; color: var(--ct); box-shadow: var(--nb-out-sm);
}
/* 8. Game screens (Stake / Searching / Match) = same Soft 3D as the other screens */
html body.jg-ui.jg-ui.jg-wide :is(.merged-card > .empty-state, .wh-filter),
html body.jg-ui.jg-ui.jg-wide .stats-container:not(.jg-bet-stats) > .stat-card {
  border: 0; border-radius: var(--nb-r); background: var(--nb); box-shadow: var(--nb-out-md);
}
html body.jg-game.jg-ui.jg-ui .jf-game-icon { border-radius: 50%; background: var(--nb); box-shadow: var(--nb-in); color: var(--c2, var(--nb-ico)); }
html body.jg-game.jg-ui.jg-ui .jf-game-icon.ludo { --c2: #F57C00; }
html body.jg-game.jg-ui.jg-ui .jf-game-icon.ttt { --c2: #C4006E; }
html body.jg-game.jg-ui.jg-ui .jf-game-icon.barah { --c2: #1565C0; }
html body.jg-game.jg-ui.jg-ui .jf-game-name { color: var(--nb-ink); }
html body.jg-game.jg-ui.jg-ui .jf-seg { border: 0; background: var(--nb); box-shadow: var(--nb-in-sm); }

html body.jg-game.jg-ui.jg-ui #match-info { border: 0; background: var(--nb); box-shadow: var(--nb-in-sm); }
/* 9. Other screens (Wallet, Deposit, Withdraw, Transfer, Profile, Support, Referrals, History, Menu, Login/Register) = Soft 3D */

html body.jg-ui.jg-ui:not(.jg-admin) :is(.stat-card, .network-info) { border-left-width: 0; }
html body.jg-ui.jg-ui.jg-ui:not(.jg-admin) .stat-card::before { display: none; }
html body.jg-ui.jg-ui:not(.jg-admin) .stat-card.stat-card .stat-card-icon.stat-card-icon {
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--nb); box-shadow: var(--nb-in); color: var(--nb-ico);
}

html body.jg-ui.jg-ui:not(.jg-admin) :is(.network-info, .referral-link-box, .detail-row, .info-list) {
  border: 0; background: var(--nb); box-shadow: var(--nb-in-sm);
}
html body.jg-ui.jg-ui:not(.jg-admin) :is(.tabs-container, .currency-options) { border: 0; background: var(--nb); box-shadow: var(--nb-in-sm); }
html body.jg-ui.jg-ui:not(.jg-admin) .tab.active, html body.jg-ui.jg-ui:not(.jg-admin) .currency-option.active {
  border: 0; background: var(--ui-grad-btn); color: var(--ui-on-accent); box-shadow: var(--nb-out-pri);
}
html body.jg-ui.jg-ui:not(.jg-admin) :is(.copy-btn) { border: 0; border-radius: var(--ui-r-pill); box-shadow: var(--nb-out-pri); }
html body.jg-menu.jg-ui.jg-ui .action-btn, html body.jg-wallet.jg-ui.jg-ui .actions-grid .action-btn {
  border: 0; border-radius: var(--nb-r); background: var(--nb); color: var(--nb-ink); box-shadow: var(--nb-out-md);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body.jg-menu.jg-ui.jg-ui .action-btn :is(.action-title, .action-subtitle), html body.jg-wallet.jg-ui.jg-ui .actions-grid .action-btn :is(.action-title, .action-subtitle) { color: var(--nb-ink); }
html body.jg-menu.jg-ui.jg-ui .action-btn .action-icon, html body.jg-wallet.jg-ui.jg-ui .actions-grid .action-btn .action-icon {
  display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nb); box-shadow: var(--nb-in); color: var(--nb-ico);
}
html body.jg-menu.jg-ui.jg-ui .action-btn:active, html body.jg-wallet.jg-ui.jg-ui .actions-grid .action-btn:active { box-shadow: var(--nb-in); transform: scale(.985); }

/* 7. Support "Ticket Details" title readable on the dialog */
html body.jg-support.jg-ui .modal-header h2 { color: var(--nb-ink); }

/* Fix 2026-10-05 (referral code box): the soft-3D rule above colours every span/strong in .referral-link-box dark ink, so the label of the gradient Copy button became unreadable. Button content keeps the on-accent colour (and the dark green on the white "copied" state). */


/* ui30 bottom nav: the Room item keeps its badge anchor when it is not the raised (active) item */
html body.jg-ui.jg-ui .jf-nav-item:is(.jf-nav-room, .jf-nav-bell) .jf-nav-icon { position: relative; }
/* ui30 bottom nav: all five labels visible in CAPITALS; bar gets a deeper soft 3D look (existing tokens only) */
html body.jg-ui.jg-ui .jf-nav-item .jf-nav-text { display: block !important; text-transform: uppercase; letter-spacing: 0.04em; }
html body.jg-ui.jg-ui .jf-nav { box-shadow: var(--nb-out-md), inset 2px 2px 4px var(--ui-glass-edge), inset -2px -3px 6px var(--ui-glass-edge); }


/* jx-bell + jx-bell-badge (notifications): round raised Soft 3D icon button in the top bar (markup: includes/topbar.php) with a red unread pill (same red as the Room badge, --jg-bad). Flex item of .navbar: no change to the balance chip or the currency dropdown. */
html body.jg-ui.jg-ui:not(.jg-admin) .jx-bell {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--ui-tap-sm);
  height: var(--ui-tap-sm);
  border: 0;
  border-radius: 50%;
  background: var(--nb);
  color: var(--nb-ico);
  box-shadow: var(--nb-out-sm);
  font-size: var(--ui-fs-md);
  text-decoration: none;
  touch-action: manipulation;
}
html body.jg-ui.jg-ui.jg-ui .jx-bell:active { box-shadow: var(--nb-in-sm); }
html body.jg-ui.jg-ui:not(.jg-admin) .jx-bell-badge {
  position: absolute;
  top: calc(-1 * var(--ui-s1));
  right: calc(-1 * var(--ui-s1));
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--ui-s1);
  border-radius: var(--ui-r-pill);
  background: var(--jg-bad);
  color: var(--ui-on-accent);
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-xs);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  text-shadow: none;
  pointer-events: none;
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-bell-badge[hidden] { display: none; }
@media (max-width: 360px) {
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-bell { width: var(--ui-s6); height: var(--ui-s6); font-size: var(--ui-fs-sm); }
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-bell::after { content: ''; position: absolute; top: calc(-1 * var(--ui-s1)); bottom: calc(-1 * var(--ui-s1)); left: calc(-1 * var(--ui-s1)); right: calc(-1 * var(--ui-s1)); }
}

/* ================= jx-wizard: Home Add Funds Wizard (look + internal layout only; the page css places the section) ================= */
html body.jg-ui.jg-ui .jx-wizard {
  padding: var(--ui-pad-lg);
  border-radius: var(--ui-r-lg);
  background: var(--jf-glass-strong);
  border: 1px solid var(--ui-input-border);
  box-shadow: inset 0 1px 0 var(--ui-glass-edge);
  color: var(--ui-text);
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap);
  min-width: 0;
}
html body.jg-ui.jg-ui .jx-wizard[hidden],
html body.jg-ui.jg-ui .jx-wizard [hidden] { display: none; }
html body.jg-ui.jg-ui .jx-wizard h2 { font-size: var(--ui-fs-lg); font-family: var(--ui-font-display); margin: 0; }
html body.jg-ui.jg-ui .jx-wizard h3 { font-size: var(--ui-fs-md); font-family: var(--ui-font-display); margin: 0; overflow-wrap: anywhere; }
html body.jg-ui.jg-ui .jx-wizard p { margin: 0; overflow-wrap: anywhere; }
html body.jg-ui.jg-ui .jx-wizard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-gap-sm); }
html body.jg-ui.jg-ui .jx-wizard-head .jx-btn { min-height: 44px; min-width: 44px; padding: 0; flex: 0 0 auto; }
html body.jg-ui.jg-ui .jx-wizard-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ui-gap-sm); }
html body.jg-ui.jg-ui .jx-wizard-steps li { display: flex; flex-direction: column; align-items: center; gap: var(--ui-s1); min-width: 0; font-size: var(--ui-fs-xs); color: var(--ui-muted); text-align: center; }
html body.jg-ui.jg-ui .jx-wizard-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--jf-glass-strong); border: 1px solid var(--ui-input-border);
  color: var(--ui-muted); font-size: var(--ui-fs-xs); font-weight: 700;
}
html body.jg-ui.jg-ui .jx-wizard-steps li[aria-current="step"] { color: var(--ui-accent-text); font-weight: 700; }
html body.jg-ui.jg-ui .jx-wizard-steps li[aria-current="step"] .jx-wizard-dot { background: var(--ui-grad); border-color: transparent; color: var(--ui-on-accent); }
html body.jg-ui.jg-ui .jx-wizard-steps li.is-done { color: var(--ui-ok-text); }
html body.jg-ui.jg-ui .jx-wizard-steps li.is-done .jx-wizard-dot { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok-text); font-size: 0; }
html body.jg-ui.jg-ui .jx-wizard-steps li.is-done .jx-wizard-dot::before { content: "\2713"; font-size: var(--ui-fs-sm); }
html body.jg-ui.jg-ui .jx-wizard-error {
  padding: var(--ui-s3) var(--ui-s4); border-radius: var(--ui-r-sm); font-size: var(--ui-fs-sm); overflow-wrap: anywhere;
  background: var(--ui-bad-bg); border: 1px solid var(--ui-bad-line); border-left: 4px solid var(--ui-bad-text); color: var(--ui-bad-text);
}
html body.jg-ui.jg-ui .jx-wizard-panel, html body.jg-ui.jg-ui .jx-wizard-pay-block { display: flex; flex-direction: column; gap: var(--ui-gap); min-width: 0; }
html body.jg-ui.jg-ui .jx-wizard-panel[hidden], html body.jg-ui.jg-ui .jx-wizard-pay-block[hidden] { display: none; }
html body.jg-ui.jg-ui .jx-wizard .jx-input,
html body.jg-ui.jg-ui .jx-wizard .jx-select { width: 100%; font-size: var(--ui-fs-md); }
html body.jg-ui.jg-ui .jx-wizard .jx-btn { min-height: 44px; }
html body.jg-ui.jg-ui .jx-wizard-row { display: flex; align-items: center; gap: var(--ui-gap-sm); flex-wrap: wrap; }
html body.jg-ui.jg-ui .jx-wizard-row .jx-input,
html body.jg-ui.jg-ui:not(.jg-admin) .jx-field .jx-wizard-row .jx-input { flex: 1 1 0; min-width: 0; width: auto; }
html body.jg-ui.jg-ui .jx-wizard-actions { display: flex; flex-wrap: wrap; gap: var(--ui-gap-sm); }
html body.jg-ui.jg-ui .jx-wizard-actions .jx-btn { flex: 1 1 140px; }
html body.jg-ui.jg-ui .jx-wizard-pay {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--ui-gap-sm);
  padding: var(--ui-pad-md); border-radius: var(--ui-r-md);
  background: var(--ui-ok-bg); border: 1px dashed var(--ui-ok-line);
}
html body.jg-ui.jg-ui .jx-wizard-qr { align-self: center; width: 100%; max-width: 220px; padding: var(--ui-pad-md); border-radius: var(--ui-r-sm); background: var(--ui-on-accent); box-sizing: content-box; }
html body.jg-ui.jg-ui .jx-wizard-qr img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
html body.jg-ui.jg-ui .jx-wizard-code { font-family: 'Courier New', monospace; font-size: var(--ui-fs-sm); word-break: break-all; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; min-width: 0; }
html body.jg-ui.jg-ui .jx-wizard-chips { display: flex; flex-wrap: wrap; gap: var(--ui-gap-sm); }
html body.jg-ui.jg-ui .jx-wizard-chips .jx-chip { min-height: 44px; padding: 0 var(--ui-s4); font-size: var(--ui-fs-sm); }
html body.jg-ui.jg-ui .jx-wizard-preview { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-gap-sm); padding: var(--ui-pad-md); border-radius: var(--ui-r-sm); background: var(--ui-info-bg); border: 1px solid var(--ui-info-line); color: var(--ui-info-text); font-size: var(--ui-fs-sm); }
html body.jg-ui.jg-ui .jx-wizard-drop { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-gap-sm); padding: var(--ui-pad-md); border-radius: var(--ui-r-sm); border: 1px dashed var(--ui-input-border); }
html body.jg-ui.jg-ui .jx-wizard-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
html body.jg-ui.jg-ui .jx-wizard-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--ui-r-md); }
html body.jg-ui.jg-ui .jx-wizard-wait { align-items: center; text-align: center; }
html body.jg-ui.jg-ui .jx-wizard-wait h3 { font-size: var(--ui-fs-lg); }
html body.jg-ui.jg-ui .jx-wizard-wait .jx-wizard-row { justify-content: center; }
html body.jg-ui.jg-ui .jx-wizard-wait-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line); color: var(--ui-warn-text); font-size: var(--ui-fs-lg); }
html body.jg-ui.jg-ui .jx-wizard-status { display: inline-flex; align-items: center; padding: var(--ui-s1) var(--ui-s3); border-radius: var(--ui-r-pill); font-size: var(--ui-fs-xs); font-weight: 700; background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line); color: var(--ui-warn-text); }
html body.jg-ui.jg-ui .jx-wizard-status.is-pending { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); color: var(--ui-warn-text); }
html body.jg-ui.jg-ui .jx-wizard-status.is-ok { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok-text); }
html body.jg-ui.jg-ui .jx-wizard-status.is-bad { background: var(--ui-bad-bg); border-color: var(--ui-bad-line); color: var(--ui-bad-text); }
@media (prefers-reduced-motion: reduce) {
  html body.jg-ui.jg-ui .jx-wizard,
  html body.jg-ui.jg-ui .jx-wizard * { animation: none; transition: none; }
}
/* jx-wizard soft 3D (same look as cards/inputs): raised card + step dots, pressed wells for pay box / amount preview / proof box */
html body.jg-ui.jg-ui.jg-ui .jx-wizard { background: var(--nb); border: 0; border-radius: var(--nb-r); box-shadow: var(--nb-out-md); }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-dot { background: var(--nb); border: 0; box-shadow: var(--nb-out-sm); color: var(--nb-ink); }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-steps li[aria-current="step"] .jx-wizard-dot { background: var(--ui-grad); color: var(--ui-on-accent); box-shadow: var(--nb-out-pri); }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-steps li.is-done .jx-wizard-dot { background: var(--nb); color: var(--ui-ok-text); box-shadow: var(--nb-out-sm); }
html body.jg-ui.jg-ui.jg-ui :is(.jx-wizard-pay, .jx-wizard-preview, .jx-wizard-drop, .jx-wizard-error) { background: var(--nb); border: 0; border-radius: 18px; box-shadow: var(--nb-in-sm); }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-error { color: var(--ui-bad-text); }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-qr { background: var(--nb); border-radius: 18px; box-shadow: var(--nb-out-sm); }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-wait-icon { background: var(--nb); border: 0; box-shadow: var(--nb-out-sm); }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-status { border: 0; box-shadow: var(--nb-out-sm); }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-chips .jx-chip { border: 0; background: var(--nb); box-shadow: var(--nb-out-sm); }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-chips .jx-chip.active { background: var(--ui-grad-btn); color: var(--ui-on-accent); box-shadow: var(--nb-out-pri); }
/* jx-wizard payment method cards (Easypaisa / JazzCash logo + name; tap to select) */
html body.jg-ui.jg-ui .jx-wizard-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-gap); }
html body.jg-ui.jg-ui .jx-wizard-method { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-s2); min-height: 112px; padding: var(--ui-pad-md); border-radius: var(--ui-r-lg); cursor: pointer; font-family: inherit; font-size: var(--ui-fs-md); font-weight: 700; }
html body.jg-ui.jg-ui .jx-wizard-method img { display: block; width: auto; height: 64px; max-width: 100%; object-fit: contain; }
html body.jg-ui.jg-ui.jg-ui .jx-wizard-method { background: var(--nb); border: 0; box-shadow: var(--nb-out-sm); color: var(--nb-ink); }
html body.jg-ui.jg-ui:not(.jg-admin) .jx-wizard-method.is-selected { box-shadow: var(--nb-in-sm); outline: 2px solid var(--ui-accent-text); outline-offset: -2px; }
/* ===== PAGE FRAME (opt-in body class jg-frame) + PAGE HEAD (jx-page-head) - R11 ===== */
/* The ONE owner of page side/top padding, page max width and the header row. Bottom padding is NOT set here (bottom bar clearance = body.jf-has-nav). Page css must not set these. */
html body.jg-ui.jg-ui.jg-frame:not(.jg-admin) {
  padding-top: var(--ui-frame-top);
  padding-left: var(--ui-frame-x);
  padding-right: var(--ui-frame-x);
}
html body.jg-ui.jg-ui.jg-frame:not(.jg-admin) .container {
  width: 100%;
  max-width: var(--ui-frame-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-page-head {
  display: flex;
  align-items: center;
  gap: var(--ui-gap);
  min-height: 44px;
  margin: 0 0 var(--ui-gap);
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-page-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ui-r-pill);
  background: var(--nb);
  color: var(--nb-ink);
  box-shadow: var(--nb-out-sm);
  text-decoration: none;
}
html body.jg-ui.jg-ui.jg-ui .jx-page-back:active { box-shadow: var(--nb-in-sm); }
html body.jg-ui.jg-ui:not(.jg-admin) .jx-page-titles { flex: 1 1 auto; min-width: 0; }
html body.jg-ui.jg-ui:not(.jg-admin) .jx-page-title {
  margin: 0;
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--nb-ink);
  overflow-wrap: anywhere;
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-page-sub { margin: 2px 0 0; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-ui.jg-ui:not(.jg-admin) .jx-page-action { flex: 0 0 auto; display: flex; align-items: center; gap: var(--ui-gap-sm); }
/* ===== CARD GAP (frame pages, R12) - one vertical gap between cards ===== */
/* Owner of the gap between cards on pages with body class jg-frame. Lobbies and match screens have no jg-frame and keep their own gaps. */
html body.jg-ui.jg-ui.jg-frame:not(.jg-admin) .merged-card:not(.jr-card) { margin-bottom: var(--ui-card-gap); }
html body.jg-ui.jg-ui.jg-frame:not(.jg-admin) .stats-container:not(.jg-bet-stats) { gap: var(--ui-card-gap); }

/* ===== ONE STYLE SET (Step 1 of "One Style") - the one card, button, input, table and layout of the user side. Tokens only. Old rules stay until Step 9. ===== */
/* Card: .jx-card (+ title/sub). A "small card" is the same card; status = .jx-badge, never a coloured card. */
html body.jg-ui.jg-ui:not(.jg-admin) .jx-card {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--ui-pad-lg);
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-card__title {
  margin: 0;
  font-family: var(--ui-font-display);
  font-size: var(--ui-fs-lg);
  font-weight: 700;
  color: var(--ui-text);
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-card__sub {
  margin: var(--ui-s1) 0 0;
  font-size: var(--ui-fs-sm);
  color: var(--ui-muted);
}
/* Numbers inside a card: .jx-stats (2 columns) > .jx-stat */
html body.jg-ui.jg-ui:not(.jg-admin) .jx-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-gap-sm);
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-stats .jx-stat { min-width: 0; }
html body.jg-ui.jg-ui:not(.jg-admin) :is(.jx-field, .jx-input)[hidden] { display: none; }
/* Button: one height, one radius (existing .jx-btn); variants --ghost / --danger / --sm exist above, --block is new */
html body.jg-ui.jg-ui:not(.jg-admin) .jx-btn--block {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}
/* Input: .jx-field > .jx-label + control (.jx-input on input / select / textarea) + .jx-hint / .jx-error */
html body.jg-ui.jg-ui:not(.jg-admin) .jx-field {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--ui-s1);
  min-width: 0;
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-field .jx-label { display: block; }
html body.jg-ui.jg-ui:not(.jg-admin) .jx-field .jx-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--ui-pad-lg);
}
html body.jg-ui.jg-ui.jg-ui .jx-hint {
  font-size: var(--ui-fs-xs);
  overflow-wrap: anywhere;
  color: var(--ui-muted);
}
html body.jg-ui.jg-ui.jg-ui .jx-error {
  font-size: var(--ui-fs-xs);
  color: var(--ui-bad-text);
}
/* Optional icon: sits in the same grid cell as the control, so it is centred on the control (never on the hint) */
html body.jg-ui.jg-ui:not(.jg-admin) .jx-field__icon {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: start;
  margin-left: var(--ui-pad-md);
  z-index: 1;
  color: var(--ui-muted);
  pointer-events: none;
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-field__icon:first-child { grid-row: 1; }
html body.jg-ui.jg-ui:not(.jg-admin) .jx-field__icon--top {
  align-self: start;
  margin-top: var(--ui-pad-md);
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-field .jx-field__icon ~ .jx-input {
  grid-column: 1;
  grid-row: 2;
  padding-left: calc(var(--ui-pad-lg) + var(--ui-tap-sm));
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-field .jx-field__icon:first-child ~ .jx-input { grid-row: 1; }
/* select: same height, own arrow (specificity raised on purpose: the neumorphic block sets a background shorthand on every select) */
html body.jg-ui.jg-ui.jg-ui.jg-ui:not(.jg-admin) select.jx-input.jx-input {
  -webkit-appearance: none;
  appearance: none;
  min-height: var(--ui-tap);
  padding-right: calc(var(--ui-pad-lg) + var(--ui-tap-sm));
  color: var(--ui-text);
  background-image: linear-gradient(45deg, transparent 50%, var(--ui-muted) 50%), linear-gradient(135deg, var(--ui-muted) 50%, transparent 50%);
  background-position: calc(100% - var(--ui-pad-lg) - var(--ui-s1)) 50%, calc(100% - var(--ui-pad-lg)) 50%;
  background-size: var(--ui-s1) var(--ui-s1), var(--ui-s1) var(--ui-s1);
  background-repeat: no-repeat;
}
/* textarea: min height 2 x tap (96px), vertical resize only */
html body.jg-ui.jg-ui:not(.jg-admin) textarea.jx-input {
  min-height: calc(var(--ui-tap) * 2);
  padding-top: var(--ui-pad-md);
  padding-bottom: var(--ui-pad-md);
  resize: vertical;
}
/* Table: .jx-table-wrap > .jx-table.jx-table--stack, data-label on every td; under 480px each row stacks (label above value) */
@media (max-width: 480px) {
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack,
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack tbody,
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack tr,
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack td { display: block; }
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack tr { border-bottom: 1px solid var(--ui-border); }
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack tbody tr:last-child { border-bottom: 0; }
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack td { border-bottom: 0; }
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--ui-muted);
  }
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-table--stack .jx-num { text-align: left; }
}
/* Layout: .jx-page only marks the page wrapper (width/padding stay with the frame, R11); .jx-stack owns the gap between sections (R12) */
html body.jg-ui.jg-ui:not(.jg-admin) .jx-page { min-width: 0; }
html body.jg-ui.jg-ui:not(.jg-admin) .jx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ui-card-gap);
}
html body.jg-ui.jg-ui:not(.jg-admin) .jx-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-gap);
}
@media (max-width: 359px) {
  html body.jg-ui.jg-ui:not(.jg-admin) .jx-grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* ui31 bottom bar (screenshot match): light pill bar; active tab = flat crimson gradient pill (icon + label, Title case), other tabs = icon-only round buttons. No raised circle. */
html body.jg-ui.jg-ui .jf-nav { border-radius: var(--ui-r-pill); padding: 0 8px; }
html body.jg-ui.jg-ui .jf-nav-item { flex: 1 1 0; align-self: center; min-width: 44px; min-height: 48px; margin: 0; padding: 0 4px; flex-direction: row; justify-content: center; border-radius: var(--ui-r-pill); background: transparent; box-shadow: none; }
html body.jg-ui.jg-ui .jf-nav-item::before { display: none; }
html body.jg-ui.jg-ui .jf-nav-item .jf-nav-icon,
html body.jg-ui.jg-ui .jf-nav-item.jf-nav-play .jf-nav-icon { width: auto; height: 24px; margin: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; color: var(--ui-muted); font-size: var(--ui-fs-lg); }
html body.jg-ui.jg-ui .jf-nav-item:not(.active) .jf-nav-text { display: none !important; }
html body.jg-ui.jg-ui .jf-nav-item.active { flex: 2.4 1 0; gap: 8px; color: var(--ui-on-accent); background: var(--ui-grad-btn); box-shadow: var(--nb-out-pri); }
html body.jg-ui.jg-ui .jf-nav-item.active .jf-nav-icon,
html body.jg-ui.jg-ui .jf-nav-item.jf-nav-play.active .jf-nav-icon { color: var(--ui-on-accent); background: transparent; box-shadow: none; }
html body.jg-ui.jg-ui .jf-nav-item.active .jf-nav-text { color: var(--ui-on-accent); text-transform: none; letter-spacing: 0; font-weight: 700; }
html body.jg-ui.jg-ui .jf-nav-item:not(.active):active { box-shadow: var(--nb-in-sm); }

/* ui31b bottom bar: thin outline icons (CSS masks, no new library) + Rajdhani label like the screenshot */
html body.jg-ui.jg-ui .jf-nav-icon i { display: block; width: 26px; height: 26px; font-size: 0; line-height: 0; background-color: currentColor; -webkit-mask: var(--jf-nav-svg) center / contain no-repeat; mask: var(--jf-nav-svg) center / contain no-repeat; }
html body.jg-ui.jg-ui .jf-nav-icon i::before { content: none; }
html body.jg-ui.jg-ui .jf-nav-item.active .jf-nav-text { font-family: var(--ui-font-display); font-size: var(--ui-fs-sm); font-weight: 700; letter-spacing: 0; text-transform: none; }
html body.jg-ui.jg-ui .jf-nav-icon i.fa-house { --jf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8%22/%3E%3Cpath d=%22M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22/%3E%3C/svg%3E"); }
html body.jg-ui.jg-ui .jf-nav-icon i.fa-wallet { --jf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1%22/%3E%3Cpath d=%22M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4%22/%3E%3C/svg%3E"); }
html body.jg-ui.jg-ui .jf-nav-icon i.fa-door-open { --jf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 20H2%22/%3E%3Cpath d=%22M11 4.562v16.157a1 1 0 0 0 1.242.97L19 20V5.562a2 2 0 0 0-1.515-1.94l-4-1A2 2 0 0 0 11 4.562z%22/%3E%3Cpath d=%22M11 4H8a2 2 0 0 0-2 2v14%22/%3E%3Cpath d=%22M14 12h.01%22/%3E%3Cpath d=%22M22 20h-3%22/%3E%3C/svg%3E"); }
html body.jg-ui.jg-ui .jf-nav-icon i.fa-bell { --jf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.268 21a2 2 0 0 0 3.464 0%22/%3E%3Cpath d=%22M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326%22/%3E%3C/svg%3E"); }
html body.jg-ui.jg-ui .jf-nav-icon i.fa-gift { --jf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 12v10H4V12%22/%3E%3Cpath d=%22M2 7h20v5H2z%22/%3E%3Cpath d=%22M12 22V7%22/%3E%3Cpath d=%22M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z%22/%3E%3Cpath d=%22M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z%22/%3E%3C/svg%3E"); }
html body.jg-ui.jg-ui .jf-nav-icon i.fa-user { --jf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E"); }

/* ava1: profile photo component. .jx-av = round avatar (letter or photo); .jx-av-img = the <img> printed by jf_av_inner() inside ANY avatar circle; .jf-nav-av = photo in the bottom-bar Profile tab (replaces the mask icon). */
html body.jg-ui.jg-ui .jx-av { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ui-grad-btn); color: var(--ui-on-accent); font-family: var(--jg-font-display); font-weight: 700; font-size: var(--ui-fs-sm); line-height: 1; text-transform: uppercase; }
html body.jg-ui.jg-ui .jx-av--sm { width: 28px; height: 28px; font-size: var(--ui-fs-xs); }
html body.jg-ui.jg-ui .jx-av--md { width: 40px; height: 40px; font-size: var(--ui-fs-sm); }
html body.jg-ui.jg-ui .jx-av--lg { width: 64px; height: 64px; font-size: var(--ui-fs-lg); }
html body.jg-ui.jg-ui .jx-av--xl { width: 96px; height: 96px; font-size: var(--ui-fs-xl); }
html body.jg-ui.jg-ui .jx-av-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
html body.jg-ui.jg-ui .jf-nav-icon .jf-nav-av { display: block; width: 28px; height: 28px; margin: -2px 0; border-radius: 50%; object-fit: cover; }
html body.jg-ui.jg-ui .jf-nav-item.active .jf-nav-av { box-shadow: 0 0 0 2px var(--ui-on-accent); }

/* chat1: room chat component. .jx-chat = list (inset well) + bubbles + form. Plain text only; the page fills it with textContent. Avatar = the page's .jr-avatar (or .jx-av). No animation. */
html body.jg-ui.jg-ui .jx-chat { display: flex; flex-direction: column; gap: var(--ui-gap-sm); min-width: 0; }
html body.jg-ui.jg-ui .jx-chat__list { position: relative; display: flex; flex-direction: column; gap: var(--ui-gap-sm); min-height: 160px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding: var(--ui-pad-md); border-radius: var(--ui-r-md); background: var(--ui-input-bg); border: 1px solid var(--ui-input-border); box-shadow: var(--nb-in-sm); }
html body.jg-ui.jg-ui .jx-chat__empty { margin: auto; padding: var(--ui-pad-lg); text-align: center; font-size: var(--ui-fs-sm); color: var(--ui-muted); }
html body.jg-ui.jg-ui .jx-chat__msg { display: grid; grid-template-columns: auto 1fr; gap: var(--ui-gap-sm); align-items: start; min-width: 0; }
html body.jg-ui.jg-ui .jx-chat__bubble { min-width: 0; padding: var(--ui-pad-md); border-radius: var(--ui-r-md); background: var(--ui-surface-solid); color: var(--ui-text); }
html body.jg-ui.jg-ui .jx-chat__msg--me .jx-chat__bubble { background: var(--ui-grad-soft); }
html body.jg-ui.jg-ui .jx-chat__meta { display: flex; flex-direction: row; align-items: baseline; gap: var(--ui-gap-sm); font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-ui.jg-ui .jx-chat__name { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
html body.jg-ui.jg-ui .jx-chat__time { flex: 0 0 auto; }
html body.jg-ui.jg-ui .jx-chat__text { margin: 0; font-size: var(--ui-fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
html body.jg-ui.jg-ui .jx-chat__more { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); cursor: pointer; }
html body.jg-ui.jg-ui .jx-chat__more:hover, html body.jg-ui.jg-ui .jx-chat__more:focus-visible { background: var(--ui-grad-soft); color: var(--ui-text); }
html body.jg-ui.jg-ui .jx-chat__more:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
html body.jg-ui.jg-ui .jx-chat__form { display: flex; flex-direction: row; align-items: center; gap: var(--ui-gap-sm); }
html body.jg-ui.jg-ui .jx-chat__form .jx-input { flex: 1 1 auto; min-width: 0; }
html body.jg-ui.jg-ui .jx-chat__count { min-width: 48px; text-align: right; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-ui.jg-ui .jx-chat__count--warn { color: var(--ui-warn-deep); font-weight: 700; }
html body.jg-ui.jg-ui .jx-chat__hint { margin: 0; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-ui.jg-ui .jx-chat__new { position: sticky; bottom: var(--ui-gap-sm); align-self: center; padding: var(--ui-gap-sm) var(--ui-pad-md); border: 0; border-radius: var(--ui-r-pill); background: var(--ui-grad); color: var(--ui-on-accent); font-size: var(--ui-fs-xs); font-weight: 700; cursor: pointer; box-shadow: var(--nb-out-sm); }
html body.jg-ui.jg-ui .jx-chat__new:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
html body.jg-ui.jg-ui .jx-chat__new[hidden] { display: none; }

/* Room = Soft 3D like the other screens (all rules scoped to body.jg-room; same layout, gaps, inputs and buttons as the shared kit) */
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) :is(.jr-card, .jr-hero, .jr-notice, .jr-stat:not(.jr-stat--btn)) {
  background: var(--nb); border: 0; border-radius: var(--nb-r); box-shadow: var(--nb-out-md);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-stat.jr-stat--btn { border: 0; border-radius: var(--nb-r); box-shadow: var(--nb-out-pri); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-stat:not(.jr-stat--btn) .jr-stat-ic { border: 0; border-radius: 50%; background: var(--nb); box-shadow: var(--nb-in); color: var(--nb-ico); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-stat:active { box-shadow: var(--nb-press); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) :is(.jr-dialog, .jr-sheet) { border: 0; border-radius: var(--nb-r); background: var(--nb); box-shadow: var(--nb-out); -webkit-backdrop-filter: none; backdrop-filter: none; }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-drawer { border: 0; border-radius: 0 var(--nb-r) var(--nb-r) 0; background: var(--nb); box-shadow: var(--nb-out); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-menu-item { border-radius: var(--ui-r-pill); color: var(--nb-ink); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-menu-item:is(:hover, :focus-visible) { background: var(--nb); box-shadow: var(--nb-out-sm); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-menu-item:active { background: var(--nb); box-shadow: var(--nb-in-sm); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-menu-ic { color: var(--nb-ico); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-avatar { box-shadow: var(--nb-out-sm); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) .jr-hero-avatar { box-shadow: var(--nb-out-pri); }
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) :is(.jx-alert, .jr-invite) { border: 0; border-radius: 22px; background: var(--nb); box-shadow: var(--nb-in-sm); }
/* Play cards (Ludo / Barah Tehni / Tic Tac Toe): same raised card, inset round icon and raised Play pill as Home */
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn:is(.ludo, .barah, .ttt) { border: 0; border-radius: var(--nb-r); background: var(--nb); color: var(--nb-ink); box-shadow: var(--nb-out); -webkit-backdrop-filter: none; backdrop-filter: none; }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn.ludo { --c2: #F57C00; --ct: #9A4B00; }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn.ttt { --c2: #C4006E; --ct: #A3005F; }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn.barah { --c2: #1565C0; --ct: #1F4FA8; }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn:is(.ludo, .barah, .ttt) .action-icon { border-radius: 50%; background: var(--nb); box-shadow: var(--nb-in); color: var(--c2, var(--nb-ico)); }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn:is(.ludo, .barah, .ttt) .action-title { color: var(--nb-ink); }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn:is(.ludo, .barah, .ttt) .action-subtitle { color: var(--ui-muted); }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn:is(.ludo, .barah, .ttt)::after { color: var(--c2); opacity: .12; }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn:is(.ludo, .barah, .ttt) .jg-play,
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn:is(.ludo, .barah, .ttt):is(:hover, :active) .jg-play { background: var(--nb); border: 0; color: var(--ct); box-shadow: var(--nb-out-sm); }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn:is(.ludo, .barah, .ttt):active { box-shadow: var(--nb-in); transform: scale(.985); }
html body.jg-room.jg-ui.jg-ui .jr-games .action-btn:is(.ludo, .barah, .ttt).is-picked { box-shadow: var(--nb-in), 0 0 0 2px var(--c2); }
/* Room list rows / user / panel / again cards = raised soft surface (same padding as before) */
html body.jg-room.jg-ui.jg-ui:not(.jg-admin) :is(.jr-list > .jr-row, .jr-user, .jr-panel, .jr-again) { border: 0; border-radius: 22px; background: var(--nb); box-shadow: var(--nb-out-sm); }
/* Bottom bar = the top bar's surface: same raised pill (28px radius, same shadow, same side margins, same height and padding) */
html body.jg-ui.jg-ui .jf-nav { left: calc(var(--ui-s4) + 4px); right: calc(var(--ui-s4) + 4px); height: calc(var(--ui-tap) - 4px + var(--ui-s2) * 2); padding: 0 var(--ui-s3); border-radius: 28px; box-shadow: var(--nb-out-md); }
/* Top bar: the balance chip only shows the balance (currency is changed in the Home menu), so no dropdown and no tap */
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display { pointer-events: none; cursor: default; }
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display .currency-text { display: none; }
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display { justify-content: center; align-items: center; text-align: center; }
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .balance-display .balance-text { display: flex; justify-content: center; align-items: center; }

/* ===== ADMIN SHELL (desktop layout) - Admin 3D Soft step 2 ===== */
/* Left sidebar .jx-side + content .jx-main, same soft-3D tokens as the user side. Admin page css may still set the same properties (removed in steps 7-9). */
html body.jg-ui.jg-ui.jg-admin .jx-side {
  position: fixed; top: 16px; left: 16px; bottom: 16px; width: 260px; overflow-y: auto; box-sizing: border-box;
  padding: var(--ui-pad-lg); background: var(--nb); border: 0; border-radius: var(--nb-r); box-shadow: var(--nb-out-md);
  z-index: 1000; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body.jg-ui.jg-ui.jg-admin .jx-side .sidebar-header { background: none; border-bottom: 1px solid var(--nb-line); color: var(--nb-ink); padding-bottom: var(--ui-gap); }
html body.jg-ui.jg-ui.jg-admin .jx-side .nav-menu { display: flex; flex-direction: column; gap: var(--ui-gap-sm); padding: 0; }
html body.jg-ui.jg-ui.jg-admin .jx-side .nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: var(--ui-r-pill);
  background: transparent; color: var(--nb-ink); font-size: var(--ui-fs-sm); font-weight: 600; text-decoration: none; box-shadow: none;
}
html body.jg-ui.jg-ui.jg-admin .jx-side .nav-item:hover { box-shadow: var(--nb-in-sm); background: transparent; }
html body.jg-ui.jg-ui.jg-admin .jx-side .nav-item.active { background: var(--ui-grad-btn); color: var(--ui-on-accent); box-shadow: var(--nb-out-pri); }
html body.jg-ui.jg-ui.jg-admin .jx-side .nav-item.active i,
html body.jg-ui.jg-ui.jg-admin .jx-side .nav-item.active span { color: var(--ui-on-accent); }
html body.jg-ui.jg-ui.jg-admin .jx-main { margin-left: 292px; padding: 16px 24px 32px; min-width: 0; background: transparent; }
html body.jg-ui.jg-ui.jg-admin .jx-wrap { max-width: 1280px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: var(--ui-section-gap); }
html body.jg-ui.jg-ui.jg-admin .jx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ui-pad-lg); }
html body.jg-ui.jg-ui.jg-admin .jx-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-gap); }
html body.jg-ui.jg-ui.jg-admin .jx-stat-icon {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--nb); color: var(--nb-ico); box-shadow: var(--nb-out-sm);
}
/* top bar: look only (layout stays in the page css) */
html body.jg-ui.jg-ui.jg-admin .navbar { background: var(--nb); border: 0; border-radius: 28px; box-shadow: var(--nb-out-md); -webkit-backdrop-filter: none; backdrop-filter: none; }
html body.jg-ui.jg-ui.jg-admin .navbar .menu-toggle,
html body.jg-ui.jg-ui.jg-admin .navbar .balance-display { border: 0; background: var(--nb); color: var(--nb-ink); box-shadow: var(--nb-out-sm); }
/* mobile: same breakpoint as assets/brand/admin/dashboard.css (sidebar slides in, JS toggles .active) */
@media (max-width: 992px) {
  html body.jg-ui.jg-ui.jg-admin .jx-side { transform: translateX(calc(-100% - 24px)); transition: transform var(--ui-ease); }
  html body.jg-ui.jg-ui.jg-admin .jx-side.active { transform: none; }
  html body.jg-ui.jg-ui.jg-admin .jx-main { margin-left: 0; padding: 12px; }
}
/* Top bar on Home shows the FameLoop text logo (wordmark), next to the menu button (4px gap incl. bar gap); nudged down 6% so the letters (not the p tail) look centred in the bar; the bar height stays the same. Smaller on narrow phones so the bell and balance chip keep their room. */
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo-link { flex: 0 0 auto; margin-left: -4px; }
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo.jf-logo-word { height: 34px; width: auto; transform: translateY(6%); }
@media (max-width: 399px) { html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo.jf-logo-word { height: 31px; } }
@media (max-width: 379px) { html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo.jf-logo-word { height: 28px; } }
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo-link { flex: 0 1 auto; min-width: 0; }
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo.jf-logo-word { max-width: 100%; object-fit: contain; }
@media (max-width: 359px) { html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo.jf-logo-word { height: 26px; } }
@media (max-width: 339px) { html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-logo.jf-logo-word { height: 23px; } }
/* Home top bar balance: same pill as Wallet (size/padding unchanged); its box never shrinks and the wordmark gives way instead (shrinks a little if needed), so the pill sits exactly like Wallet */
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .navbar .user-info { flex: 0 0 auto; }

/* ---------- Home Play Now: the two Ludo cards sit side by side, small (icon on top, centred text, PLAY pill). Scoped to body.jg-home, no other screen changes. ---------- */
html body.jg-home.jg-ui.jg-ui .jg-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn { min-height: 0; height: 144px; align-content: start; padding: 0 10px 6px; row-gap: 2px; grid-template-rows: 51px auto auto auto; column-gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "title" "sub" "play"; justify-items: center; text-align: center; }
html body.jg-home.jg-ui.jg-ui .jg-games .action-icon { width: 40px; height: 40px; font-size: var(--ui-fs-lg); align-self: center; position: relative; top: 1px; }
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn .action-title { align-self: auto; font-size: var(--ui-fs-lg); }
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn .action-subtitle { align-self: auto; margin-top: 0; font-size: var(--ui-fs-xs); }
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn .jg-play { margin-top: 4px; justify-self: center; min-height: 34px; padding: 0 18px; }
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn::after { right: -8px; bottom: -28px; }

/* ---------- Home top bar: Share App button (replaces the balance chip on Home only) = gradient pill like the active bottom tab ---------- */
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-share { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 6px; height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--ui-grad-btn); color: var(--ui-on-accent); box-shadow: var(--nb-out-pri); font-family: var(--ui-font-display); font-size: var(--ui-fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-share svg { width: 18px; height: 18px; flex: none; }
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-share:active { box-shadow: inset 4px 4px 9px rgba(120, 0, 60, .38), inset -3px -3px 8px rgba(255, 255, 255, .22); }
html body.jg-ui.jg-ui:not(.jg-admin) .navbar .jf-share:focus-visible { outline: 2px solid var(--ui-focus, var(--ui-accent)); outline-offset: 2px; }
/* Home: tighter, even rhythm between sections (title sits close to its cards) */
html body.jg-home.jg-ui.jg-ui .jg-title { margin: 4px 0 8px; }
/* Home Play Now: Barah Tehni = one long card under the two small Ludo cards (icon left, title + subtitle, PLAY right) */
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn.barah { grid-column: 1 / -1; height: 88px; padding: 0 16px; grid-template-rows: auto auto; grid-template-areas: "icon title play" "icon sub play"; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-content: center; align-items: center; justify-items: start; text-align: left; }
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn.barah .action-icon { align-self: center; top: 0; }
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn.barah .action-title { align-self: end; }
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn.barah .action-subtitle { align-self: start; }
html body.jg-home.jg-ui.jg-ui .jg-games .action-btn.barah .jg-play { margin-top: 0; justify-self: end; align-self: center; }