/* JFun Gaming UI - Home lobby (index.php). Loaded after the page CSS and jfun-game.css. */

/* ---------- page shell ---------- */
html body.jg-home { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- player card ---------- */
html body.jg-home .jg-player { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html body.jg-home .jg-avatar {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: var(--ui-grad-btn); color: var(--ui-on-accent);
  display: flex; align-items: center; justify-content: center;
  font: 700 24px var(--jg-font-display); box-shadow: var(--ui-btn-shadow);
}
html body.jg-home .jg-avatar { overflow: hidden; }
html body.jg-home .jg-player-info { flex: 1 1 0; min-width: 0; }
html body.jg-home .jg-hello { font-size: var(--ui-fs-xs); color: var(--ui-muted); }
html body.jg-home .jg-name {
  font: 700 20px var(--jg-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body.jg-home .jg-player--guest { flex-direction: column; align-items: stretch; }
html body.jg-home .jg-player--guest .jg-name { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Play Now: wide game cards ---------- */

/* ---------- light theme: no neon glow, AA contrast on the pastel page ---------- */

/* ---------- Wallet: quick actions ---------- */
html body.jg-home .jg-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 339px) { html body.jg-home .jg-quick { grid-template-columns: 1fr; } }

/* page layout moved out of the inline style (legacy vars mapped to tokens; kit-covered / overridden card rules dropped) */
:where(html body.jg-home) * { margin: 0; padding: 0; box-sizing: border-box; }
html body.jg-home { font-family: 'Poppins', sans-serif; background: var(--jf-solid); color: var(--jf-fg); min-height: 100vh; transition: padding-bottom 0.3s ease; display: flex; flex-direction: column; }
html body.jg-home .main-content { flex: 1; }
html body.jg-home .action-badge { position: absolute; top: 10px; right: 10px; background: var(--ui-accent); color: var(--ui-on-accent); font-size: var(--ui-fs-xs); font-weight: 600; padding: 3px 8px; border-radius: var(--ui-r-lg); min-width: 22px; text-align: center; }

/* Soft 3D (Offline app look): hero card + game list spacing. Tokens --nb* come from the kit. */
html body.jg-home.jg-ui .jg-name { color: var(--nb-ink); }

/* Home Add Funds Wizard (kit look: jx-wizard in jfun-ui.css) - layout only */
html body.jg-home #uwz { max-width: 100%; }
html body.jg-home.jg-ui.jg-ui :is(#uwz-back) { flex: 0 1 80px; min-width: 0; padding-inline: 12px; }
html body.jg-home.jg-ui.jg-ui :is(#uwz-next, #uwz-verify, #uwz-create) { flex: 1 1 auto; white-space: nowrap; padding-inline: 12px; }
/* Menu drawer (opened by the top bar menu button via #jf-menu, no JS): the SAME look as the Room menu drawer. */
@keyframes jm-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
html body.jg-home .jm-drawer-head .jx-title { flex: 1 1 auto; margin: 0; }
html body.jg-home .jm-drawer-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; background: var(--ui-overlay-soft); }
html body.jg-home .jm-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: jm-drawer-in 0.18s ease-out; }
@media (prefers-reduced-motion: reduce) { html body.jg-home .jm-drawer { animation: none; } }
html body.jg-home .jm-drawer-head { display: flex; align-items: center; gap: var(--ui-gap); margin-bottom: var(--ui-gap-sm); }
html body.jg-home .jm-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-home .jm-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-home .jm-menu-item:hover, html body.jg-home .jm-menu-item:focus-visible, html body.jg-home .jm-menu-item[aria-current="true"] { background: var(--ui-surface); }
html body.jg-home .jm-menu-ic { flex: 0 0 24px; text-align: center; color: var(--ui-accent); }
html body.jg-home .jm-menu-label { flex: 1 1 auto; min-width: 0; }
html body.jg-home .jm-menu-item--danger, html body.jg-home .jm-menu-item--danger .jm-menu-ic { color: var(--ui-bad); }
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .jm-drawer { border: 0; border-radius: 0 var(--nb-r) var(--nb-r) 0; background: var(--nb); box-shadow: var(--nb-out); }
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .jm-menu-item { border-radius: var(--ui-r-pill); color: var(--nb-ink); }
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .jm-menu-item:is(:hover, :focus-visible) { background: var(--nb); box-shadow: var(--nb-out-sm); }
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .jm-menu-item:active { background: var(--nb); box-shadow: var(--nb-in-sm); }
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .jm-menu-ic { color: var(--nb-ico); }
html body.jg-home .jm-drawer-head a, html body.jg-home .jm-menu-item { text-decoration: none; }
html body.jg-home .jm-wrap { display: none; }
html body.jg-home .jm-wrap:target { display: block; }
html body:is(.jg-home, .jg-menu) .jm-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; }
html body.jg-home .jm-menu-state { flex: 0 0 auto; font-size: var(--ui-fs-sm); font-weight: 700; color: var(--ui-muted); }
html body.jg-home button.jm-menu-item { font-family: inherit; text-align: left; cursor: pointer; }
/* Selected currency in the menu drawer (buttons use aria-pressed): clear pressed look. */
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .jm-menu-item[aria-pressed="true"] { background: var(--nb); box-shadow: var(--nb-in-sm); font-weight: 700; }
html body.jg-home .jm-menu-item[aria-pressed]:disabled { opacity: 0.6; cursor: progress; }
html body.jg-home #uwz .uwz-logo { vertical-align: middle; margin-right: var(--ui-gap-sm); }

/* ---------- player card: roomier "Welcome back" card (logged-in only; guest card unchanged) ---------- */
html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .jg-player:not(.jg-player--guest) { min-height: 0; padding: 16px var(--ui-pad-lg); }
html body.jg-home .jg-player:not(.jg-player--guest) .jg-avatar { flex: 0 0 60px; width: 60px; height: 60px; font-size: var(--ui-fs-xl); }
html body.jg-home .jg-player:not(.jg-player--guest) .jg-hello { margin-bottom: 2px; }
@media (max-width: 379px) {
  html body.jg-home .jg-player:not(.jg-player--guest) .jg-avatar { flex-basis: 52px; width: 52px; height: 52px; font-size: var(--ui-fs-lg); }
}
@media (max-width: 359px) {
  html body.jg-home.jg-ui.jg-ui:not(.jg-admin) .jg-player:not(.jg-player--guest) { padding: var(--ui-pad-lg); min-height: 0; }
  html body.jg-home .jg-player:not(.jg-player--guest) .jg-avatar { flex-basis: 52px; width: 52px; height: 52px; font-size: var(--ui-fs-lg); }
}

/* ---------- player card: mini balance overview strip (logged-in card only) ---------- */
html body.jg-home .jg-player .jg-bal { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-gap); min-height: 44px; padding: 0 var(--ui-pad-lg); box-sizing: border-box; border-radius: var(--ui-r-pill); background: var(--nb); box-shadow: var(--nb-in); }
html body.jg-home .jg-player .jg-bal-label { display: inline-flex; align-items: center; gap: var(--ui-gap-sm); font-size: var(--ui-fs-sm); color: var(--ui-muted); }
html body.jg-home .jg-player .jg-bal-label i { color: var(--nb-ico); }
html body.jg-home .jg-player .jg-bal-val { font: 700 var(--ui-fs-lg) var(--jg-font-display); color: var(--nb-ink); white-space: nowrap; }
html body.jg-home .jg-player .jg-bal-cur { font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-muted); }

/* ---------- Rooms slider (above Play Now): horizontal snap slider of popular room cards ---------- */
html body.jg-home .jg-hrooms-track { scrollbar-width: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 14px 20px 34px; margin: -14px -20px -26px; scroll-padding: 0 20px; }
html body.jg-home .jg-hroom { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; height: 156px; justify-content: flex-start; }
html body.jg-home .jg-hroom-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: auto 0; position: relative; top: 1px; flex: 0 0 auto; font-size: var(--ui-fs-lg); border-radius: 50%; background: var(--nb); box-shadow: var(--nb-out-sm); color: var(--nb-ico); }
html body.jg-home .jg-hroom-name { max-width: 100%; font: 700 var(--ui-fs-md) var(--jg-font-display); color: var(--nb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.jg-home .jg-hroom-meta { max-width: 100%; font-size: var(--ui-fs-xs); color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.jg-home .jg-hroom-meta i { margin-right: 4px; }
html body.jg-home.jg-ui.jg-ui .jg-hroom-req { margin-top: 6px; align-self: stretch; min-height: 44px; }
html body.jg-home .jg-hroom-msg { margin: 0; font-size: var(--ui-fs-sm); color: var(--ui-ok-text); }
html body.jg-home .jg-hroom-msg--bad { color: var(--ui-bad-text); }
html body.jg-home .jg-hrooms-track::-webkit-scrollbar { display: none; }
html body.jg-home.jg-ui.jg-ui.jg-ui .jg-hroom { padding: 0 10px 6px; }
/* Welcome card: Deposit / Withdraw / Transfer as a tab bar (same look as the Balance Transfer tabs: kit .tabs-container + .tab) */
html body.jg-home .jg-hquick { flex: 1 1 100%; display: flex; gap: 4px; padding: 4px; min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 359px) { html body.jg-home.jg-ui.jg-ui .jg-hquick > a { gap: 4px; padding: 0 4px; font-size: var(--ui-fs-xs); } }
html body.jg-home.jg-ui.jg-ui .jg-hquick > a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 6px; white-space: nowrap; text-decoration: none; }
html body.jg-home.jg-ui.jg-ui .jg-hquick > a:is(:link, :visited, :hover, :focus, :active) { text-decoration: none; }