/* =========================================================
   StockQuest Live — LIVE-SPECIFIC STYLES ONLY
   Responsive layout is owned by assets/stockquest-ui.css.
   ========================================================= */

body.live-player{padding-bottom:82px}

.live-join-card{max-width:480px;margin:8vh auto}
.live-status{font-size:11px;color:var(--muted);font-weight:800}
.live-rank{font-size:11px;font-weight:900;color:#5967a5}
.live-wait{padding:8px 10px;border-radius:10px;background:#eef1ff;color:#53609b;font-size:11px;font-weight:800}

/* The join experience is a true full-screen gate. The Live game UI must
   not be visible until a player has successfully joined. */
#joinOverlay{
  position:fixed!important;
  inset:0!important;
  z-index:20000!important;
  display:flex;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  background:#0d3973!important;
  padding:18px!important;
}

#joinOverlay[style*="display: none"],
#joinOverlay[style*="display:none"]{
  display:none!important;
}

/* Some shared desktop rules use !important display values. Honour the
   page's initial inline display:none until join.html explicitly switches
   the game to display:block after a successful join. */
#liveGame[style*="display: none"],
#liveGame[style*="display:none"]{
  display:none!important;
}

.live-game .panel{min-width:0}
.live-game .portfolio-panel{display:block}
.live-game .live-leaderboard-panel{display:none}

.live-finished{max-width:620px;margin:7vh auto;text-align:center}
.live-finished .medal{font-size:58px}
.live-finished .score-big{font-size:36px;font-weight:950;margin:6px 0}

.live-mobile-position{display:none}
.live-controls-note{font-size:9px;color:var(--muted);margin-top:4px}

#liveSoundBtn,#liveSettingsBtn{min-width:44px}
.live-setting-row{margin-top:10px}
.live-setting-row label{display:block;font-size:11px;font-weight:900;margin-bottom:5px}
.live-setting-row select{width:100%;padding:8px;border-radius:10px}

/* Performance hint for off-screen cards. */
.live-player .stock{
  content-visibility:auto;
  contain-intrinsic-size:118px;
}

/* Desktop Live keeps historic chart and right-side Live leaderboard. */
@media(min-width:1051px){
  body.live-player .live-game .price-chart-wrap{display:block!important}
  body.live-player .live-game .range-gauge{display:none!important}
  body.live-player .live-game .live-leaderboard-panel{display:block!important}
}

/* Mobile/tablet Live uses exactly the shared market-card/gauge layout.
   No Next button positioning or tab visibility overrides here. */
@media(max-width:1050px){
  body.live-player .live-game .price-chart-wrap{display:none!important}
  body.live-player .live-game .range-gauge{display:block!important}
  .live-mobile-position{display:none!important}
  .live-join-card{margin:3vh auto}
  .live-finished{margin:3vh auto}
  #joinOverlay{padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom))!important}
}