/*
  Compact / mobile-first overlay for the three lobby games (tarot, slogan_slot,
  color_wheel). Loaded *after* base.css and the per-game CSS so it overrides
  spacing without touching game-specific styling.

  Goals:
    1. Reduce vertical space waste so the action area + bet controls fit
       on a single viewport without scrolling on a typical laptop.
    2. Below 700px width, the bet panel docks to the bottom of the screen
       and stays visible while the user looks at the cards / image / slogans.
    3. Hide the long-form chrome (game-nav back link, footer copy) on
       mobile — already handled by the topbar's link to /.
*/

/* ===== Topbar — tighter, hide redundant brand text on small screens ===== */
.topbar {
  padding: 0.6rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(20, 14, 26, 0.85);
}
.brand { font-size: 1.05rem; gap: 0.5rem; }
.brand-logo { height: 22px; }
.balance { font-size: 1.05rem; }
.meta { gap: 0.9rem; font-size: 0.9rem; }

/* ===== Stage — gap halved, top padding shrunk so cards sit higher ===== */
.stage {
  padding: 1.25rem 1.25rem 6rem;
  gap: 1rem;
}

/* ===== Hero — small banner above the stage, not a hero ===== */
.hero { padding: 0; }
.hero h1 {
  font-size: 1.4rem;
  margin: 0 0 0.25rem;
  line-height: 1.25;
}
.hero p { margin: 0 0 0.75rem; font-size: 0.9rem; }
.cta { padding: 0.7rem 1.5rem; font-size: 0.95rem; }
.countdown { font-size: 1.1rem; margin-top: 0.5rem; }

/* ===== Tarot cards: smaller default ===== */
.card { width: 150px; height: 225px; }
.cards { gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ===== Panels — less padding, smaller headings ===== */
.bet-panel, .pool-panel, .narration-panel, .reveal-panel, .settlement-panel {
  padding: 0.95rem 1.1rem;
}
.bet-panel h2 { font-size: 1.05rem; margin: 0 0 0.65rem; }
.pool-panel h3, .narration-panel h3, .settlement-panel h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.bet-buttons { gap: 0.5rem; margin-bottom: 0.7rem; }
.bet-btn { padding: 0.6rem 0.4rem; font-size: 0.9rem; }
.bet-btn .symbol { font-size: 1.3rem; }
.stake-row { gap: 0.6rem; }
.stake-row input { padding: 0.4rem 0.6rem; width: 70px; }

.narration {
  font-size: 0.95rem;
  line-height: 1.55;
  min-height: 3em;
  /* Cap height so a long LLM stream doesn't blow the layout out — let
     the user scroll inside this panel instead. Auto-scroll to bottom
     as new text arrives via the .narration::after pseudo (handled in
     app.js via scrollTop = scrollHeight on stream tick). */
  max-height: 280px;
  overflow-y: auto;
  padding-right: 0.4rem;
}
.narration::-webkit-scrollbar { width: 6px; }
.narration::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.reveal-panel { padding: 1rem 1.2rem; }
.reveal-grid { gap: 0.75rem; margin: 0.5rem 0; }
.reveal-val { font-size: 1.5rem; }
.reveal-label { font-size: 0.7rem; }

.settlement-panel { padding: 0.9rem 1.1rem; }
.settlement-row { padding: 0.45rem 0; font-size: 0.95rem; }

/* ===== Game nav at bottom — gone, the topbar logo links to / ===== */
.game-nav, .footer { display: none; }

/* ====================================================================
   Desktop ≥ 900px: two-column grid.

   Left column (wide):   the visual + the long-form storytelling panels
                         (narration, reveal). The narration is the LLM
                         reading and gets long — letting it use the wider
                         column means less awkward word-wrap.

   Right column (narrow): the action rail — pool, bet panel, settlement.
                         Everything you interact with or watch tick is
                         here, so the user's eye stays on one column
                         while the visual + reading sit on the left.

   We don't reorder the DOM; just assign columns via grid-column.
   ==================================================================== */
@media (min-width: 900px) {
  .stage {
    grid-template-columns: 1fr 320px;
    column-gap: 1.25rem;
    align-items: start;
  }
  .hero { grid-column: 1 / -1; }

  /* Left column = visual + storytelling for each game.
       tarot:        .table (cards) + .narration-panel + .reveal-panel
       slogan_slot:  .product-panel + .slogans + .reveal-panel
       color_wheel:  .prompt-panel + .canvas-panel + .scores-panel + .reveal-panel
  */
  .table,
  .product-panel,
  .slogans,
  .prompt-panel,
  .canvas-panel,
  .scores-panel,
  .narration-panel,
  .reveal-panel { grid-column: 1; }

  /* Right column = action rail (pool live update + bet controls + settlement). */
  .pool-panel,
  .bet-panel,
  .settlement-panel { grid-column: 2; }

  /* Bet controls stay visible when the user scrolls the narration on
     the left. Pool sits above the bet panel and scrolls naturally. */
  .bet-panel {
    position: sticky;
    top: 4.5rem;
  }
}

/* ====================================================================
   Mobile < 700px: single column, sticky bet panel at the bottom.
   ==================================================================== */
@media (max-width: 699px) {
  .topbar { padding: 0.5rem 0.85rem; }
  .brand-game { display: none; } /* keep just the logo + back affordance */
  .meta { gap: 0.6rem; }
  .balance { font-size: 0.95rem; }
  #player-label { display: none; }

  .stage {
    padding: 0.85rem 0.85rem 6.5rem;
    gap: 0.7rem;
  }

  .hero h1 { font-size: 1.15rem; }
  .hero p { font-size: 0.85rem; }
  .cta { padding: 0.6rem 1.2rem; font-size: 0.9rem; }

  .card { width: 90px; height: 135px; }
  .cards { gap: 0.5rem; }
  .card-back { font-size: 1.6rem; }
  .card-front .name { font-size: 0.7rem; }
  .fallback-face .badge { width: 1.4rem; height: 1.4rem; font-size: 0.8rem; }
  .fallback-face .fallback-name { font-size: 0.75rem; }
  .fallback-face .fallback-glyph { font-size: 1.2rem; }

  /* Sticky bet panel — only when visible (not .hidden). */
  .bet-panel:not(.hidden) {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 0.7rem 0.85rem 0.85rem;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
    background: var(--bg-elev);
  }
  .bet-panel h2 { font-size: 0.85rem; margin: 0 0 0.4rem; opacity: 0.7; }
  .bet-buttons { grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin-bottom: 0.5rem; }
  .bet-btn { padding: 0.4rem 0.2rem; font-size: 0.75rem; gap: 0.1rem; }
  .bet-btn .symbol { font-size: 1.1rem; }
  .stake-row { gap: 0.5rem; flex-wrap: nowrap; }
  .stake-row label { font-size: 0.85rem; }
  .stake-row input { width: 60px; padding: 0.35rem 0.5rem; font-size: 0.9rem; }
  .stake-row .cta { padding: 0.5rem 0.9rem; font-size: 0.85rem; flex: 1; }

  .pool-panel { padding: 0.7rem 0.85rem; }
  .pool-panel h3 { font-size: 0.85rem; }
  .pool-bars { gap: 0.4rem; }

  .narration-panel { padding: 0.85rem 1rem; }
  .narration { font-size: 0.95rem; min-height: 2em; }

  .reveal-panel { padding: 0.85rem; }
  .reveal-grid { grid-template-columns: 1fr; gap: 0.5rem; text-align: center; }
  .reveal-val { font-size: 1.3rem; }
  .agreement { font-size: 1.5rem; }
}