/* ============================================================
   FX-LOBBY.CSS — "wow" web3/P2E juice layer (presentation only)
   ------------------------------------------------------------
   Ambient fire embers, neon button glow + shimmer sweep, card
   hover lift, prize/ETH pulse, and the floating sound toggle.
   Pure visual polish — no layout structure or gameplay affected.
   Everything here is additive and safe to remove.
   ============================================================ */

/* ---- Ambient fire-ember canvas (created by js/juice.js) ---- */
#ember-canvas{
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:none; z-index:40; opacity:.55;
  mix-blend-mode:screen;
}

/* ---- Animated neon glow on primary CTAs ---- */
.btn.y, .btn.b, .btn.g, .wallet-connect-btn, #reward-wallet-btn,
.world-play-card, .action-card.featured{
  position:relative;
}
/* Gold/primary buttons get a slow breathing glow */
@keyframes bb-glow-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,230,0,.0), 0 6px 22px rgba(255,180,0,.25); }
  50%    { box-shadow:0 0 22px 3px rgba(255,210,0,.35), 0 6px 26px rgba(255,180,0,.4); }
}
.wallet-connect-btn:not(.wallet-connected), #reward-wallet-btn:not(.wallet-connected){
  animation:bb-glow-pulse 2.6s ease-in-out infinite;
}

/* Shimmer sweep that runs across gold/green buttons */
.btn.y::after, .btn.g::after, .wallet-connect-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%); pointer-events:none;
  animation:bb-shimmer 4.5s ease-in-out infinite;
}
@keyframes bb-shimmer{
  0%,60%{ transform:translateX(-120%); }
  80%,100%{ transform:translateX(120%); }
}

/* ---- Card hover lift + edge glow ---- */
.action-card, .world-play-card, .lb-row, .reward-item,
.bc-feature-card, .profile-stat, .private-panel-grid > *{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.action-card:hover, .world-play-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(0,194,255,.18);
}

/* ---- ETH prize / daily race pulse (make the money glow) ---- */
@keyframes bb-prize-pulse{
  0%,100%{ filter:drop-shadow(0 0 2px rgba(255,217,75,.4)); }
  50%    { filter:drop-shadow(0 0 10px rgba(255,217,75,.85)); }
}
.daily-prize-pill.gold, .daily-prize, .bc-badge{
  animation:bb-prize-pulse 2s ease-in-out infinite;
}

/* ---- Top-3 leaderboard rows shimmer a little gold ---- */
.lb-row.top3{ position:relative; overflow:hidden; }
.lb-row.top3::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,215,80,.10) 50%,transparent 60%);
  transform:translateX(-100%); animation:bb-shimmer 6s ease-in-out infinite;
  pointer-events:none;
}

/* ---- Reward-points chip: subtle live glow so points feel valuable ---- */
.reward-points-chip{ box-shadow:0 0 12px rgba(255,230,0,.15); }

/* ---- Floating sound toggle ---- */
#sfx-toggle{
  position:fixed; right:16px; bottom:16px; z-index:9998;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(20,16,34,.82); color:#fff; font-size:19px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#sfx-toggle:hover{ transform:scale(1.08); border-color:var(--Y,#FFE600); box-shadow:0 0 16px rgba(255,230,0,.35); }
#sfx-toggle.muted{ opacity:.6; }

/* Respect players who prefer reduced motion — kill the loops. */
@media (prefers-reduced-motion: reduce){
  .wallet-connect-btn, #reward-wallet-btn,
  .btn.y::after, .btn.g::after, .wallet-connect-btn::after,
  .daily-prize-pill.gold, .daily-prize, .bc-badge, .lb-row.top3::before{
    animation:none !important;
  }
  #ember-canvas{ display:none; }
}

/* Mobile: the sound toggle must sit ABOVE the bottom tab bar (this file loads
   after layout.css, so the override has to live here to win). */
@media(max-width:900px){
  #sfx-toggle{bottom:calc(86px + env(safe-area-inset-bottom));right:12px;width:40px;height:40px;font-size:17px;}
}

/* ---------- PHONE IN LANDSCAPE (the app now plays sideways) ----------
   Width can be 700–950px here, so the desktop sidebar was showing next to the
   bottom tabs and squeezing the content into ~200px. Treat it like a phone:
   sidebar off-canvas behind the ☰ button, compact one-row top bar and tabs. */
@media (orientation:landscape) and (max-height:500px){
  #screen-lobby{ flex-direction:column !important; }
  #app-sidebar{ position:fixed !important; left:-280px; top:0; height:100dvh; z-index:60; width:264px; min-width:264px;
    transition:left .26s cubic-bezier(.4,0,.2,1); box-shadow:4px 0 28px rgba(0,0,0,.55); }
  #app-sidebar.sidebar-open{ left:0; }
  .mobile-menu-btn{ display:flex !important; }
  #content-area{ height:100dvh; }
  .content-topbar{ padding:6px 12px !important; flex-wrap:nowrap !important; row-gap:0 !important; }
  .content-topbar .status-mini-pills{ display:none !important; }
  .bottom-tabs{ padding:2px 6px max(2px, env(safe-area-inset-bottom)) !important; }
  .bottom-tab{ min-height:38px !important; flex-direction:row !important; gap:6px !important; font-size:.72rem !important; padding:4px 0 !important; }
  #content-area .lobby-panel{ padding-bottom:60px !important; }
}
@media (orientation:landscape) and (max-height:500px){
  #content-area{ height:100dvh !important; min-height:100dvh !important; flex:1 1 auto !important; width:100% !important; }
}