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

/* ---------- page shell ---------- */
html body.jg-home { padding-top: 0; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
html body.jg-home .navbar {
  top: 0; left: 0; width: 100%; max-width: none; margin: 0; transform: none;
  border-radius: 0 0 18px 18px; padding-top: calc(8px + env(safe-area-inset-top, 0px));
}
html body.jg-home .container { max-width: 640px; padding: 14px 14px 0; }
html body.jg-home .action-btn.is-hidden { display: none; }
html body.jg-home .menu-toggle {
  background: var(--jf-glass); border: 1px solid var(--jf-glass-border); color: var(--text-color);
}
html body.jg-home .btn-login {
  color: #fff; border-color: transparent; min-height: 44px; padding: 0 16px; font-weight: 700;
}
html body.jg-home .currency-text { background: var(--jf-grad-soft); color: var(--jf-fg); }
html body.jg-home .currency-option {
  min-height: 44px; padding: 0 14px; font-size: 14px; color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
}
html body.jg-home .currency-option:hover { background: var(--jf-grad-soft); }
html body.jg-home .currency-options { min-width: 130px; }

/* ---------- player card ---------- */
html body.jg-home .jg-player { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
html body.jg-home .jg-avatar {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: var(--jf-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 24px var(--jg-font-display); box-shadow: var(--jg-glow);
}
html body.jg-home .jg-player-info { flex: 1 1 0; min-width: 0; }
html body.jg-home .jg-hello { font-size: 12px; color: var(--text-secondary); }
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 .jg-btn { flex: 0 0 auto; min-height: 44px; padding: 0 16px; font-size: 15px; }
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; }
html body.jg-home .jg-player--guest .jg-btn { width: 100%; min-height: 48px; }
@media (max-width: 359px) {
  html body.jg-home .container { padding: 12px 12px 0; }
  html body.jg-home .jg-player .jg-btn { flex: 1 1 100%; }
}

/* ---------- Play Now: wide game cards ---------- */
html body.jg-home .jg-games { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 8px; }
html body.jg-home .jg-games .action-btn {
  position: relative; overflow: hidden; border: 0; color: #fff; 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: 0 8px 22px rgba(0, 0, 0, 0.35);
}
html body.jg-home .jg-games .action-btn.ludo {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(135deg, #F20289, #FB2B52);
}
html body.jg-home .jg-games .action-btn.barah {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(135deg, #A66BFF, #F20289);
}
html body.jg-home .jg-games .action-btn.ttt {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), linear-gradient(135deg, #FB2B52, #FF9A55);
}
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: 16px;
  background: rgba(255, 255, 255, 0.22); font-size: 26px; color: #fff;
}
html body.jg-home .jg-games .action-title {
  grid-area: title; position: relative; z-index: 1; margin: 0; align-self: end;
  font: 700 22px/1.1 var(--jg-font-display); overflow-wrap: anywhere;
}
html body.jg-home .jg-games .action-subtitle {
  grid-area: sub; position: relative; z-index: 1; align-self: start; margin-top: 4px;
  font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); overflow-wrap: anywhere;
}
html body.jg-home .jg-play {
  grid-area: play; position: relative; z-index: 1; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.28);
  font: 700 14px var(--jg-font-display); letter-spacing: 0.08em;
}
/* decorative faded icon (CSS only; uses the Font Awesome already loaded by the page) */
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: #fff; 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: 22px; }
  html body.jg-home .jg-games .action-title { font-size: 19px; }
  html body.jg-home .jg-play { padding: 0 10px; font-size: 12px; }
}

/* ---------- Wallet: quick actions ---------- */
html body.jg-home .jg-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 8px; }
@media (max-width: 339px) { html body.jg-home .jg-quick { grid-template-columns: 1fr; } }
html body.jg-home .jg-quick .action-btn {
  min-height: 84px; padding: 12px 8px; border: 1px solid var(--border-color); border-radius: var(--jg-radius);
  background: var(--card-bg); color: var(--text-color);
  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: 22px;
  background: var(--jf-grad-soft); color: var(--jf-active);
}
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: 11px; color: var(--text-secondary); overflow-wrap: anywhere; }

/* ---------- footer: raised Games button (same look as .jf-nav-play) ---------- */
html body.jg-home .footer-btn.footer-play::before { display: none; }
html body.jg-home .footer-btn.footer-play .footer-icon {
  width: 56px; height: 56px; margin-top: -26px; border-radius: 50%; font-size: 22px;
  background: var(--jf-grad); color: #fff; text-shadow: none; transform: none;
  box-shadow: 0 0 0 5px var(--jf-nav-bg), 0 8px 22px rgba(242, 2, 137, 0.55);
}
html body.jg-home .footer-btn.footer-play:active .footer-icon { transform: scale(0.94); }