/* ==========================================================
   Lounge — reuses style.css's variables, .panel, .panel-header,
   nav, and footer styles. Everything here is Lounge-specific.
   ========================================================== */

.lounge-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lounge-back-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
  text-decoration: none;
  align-self: flex-start;
  transition: color 0.15s ease;
}
.lounge-back-link:hover {
  color: var(--paper);
}

.lounge-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 9vw, 76px);
  color: var(--paper);
  margin: 0;
}

.lounge-tagline {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--dim);
  max-width: 640px;
  line-height: 1.6;
  margin: 0;
}

.wallet-debug-strip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--violet);
  background: rgba(156,123,255,0.08);
  border: 1px solid rgba(156,123,255,0.3);
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
  word-break: break-word;
}

/* ---------- tier panel ---------- */
.lounge-tier-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lounge-tier-status {
  border: 1px solid var(--line);
  background: var(--void-2);
  border-radius: 10px;
  padding: 14px 16px;
}
.lounge-tier-status-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--dim);
  line-height: 1.6;
}
.lounge-tier-status-text.qualified { color: var(--buy); }

.lounge-tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 760px) {
  .lounge-tier-grid { grid-template-columns: repeat(3, 1fr); }
}

.lounge-tier-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: var(--void-2);
  transition: border-color 0.15s ease;
}
.lounge-tier-card.unlocked {
  border-color: rgba(20, 241, 149, 0.4);
  background: rgba(20, 241, 149, 0.05);
}

.lounge-tier-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--paper);
  margin: 0 0 6px;
}
.lounge-tier-card.unlocked .lounge-tier-name { color: var(--buy); }

.lounge-tier-req {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
  margin: 0 0 10px;
}

.lounge-tier-desc {
  font-size: 14px;
  color: var(--dim);
  line-height: 1.5;
  margin: 0;
}

.lounge-tier-badge {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--buy);
  border: 1px solid rgba(20, 241, 149, 0.4);
  background: rgba(20, 241, 149, 0.1);
  border-radius: 100px;
  padding: 4px 10px;
}

/* ---------- game selection (hub page) ---------- */
.lounge-games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 22px 24px;
}
@media (min-width: 640px) {
  .lounge-games-grid { grid-template-columns: repeat(2, 1fr); }
}

.lounge-game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--void-2);
  padding: 28px 20px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.lounge-game-card:hover {
  border-color: var(--violet);
  transform: translateY(-2px);
}
.lounge-game-card.disabled {
  opacity: 0.55;
}
.lounge-game-card.disabled:hover {
  border-color: var(--line);
  transform: none;
}

.lounge-game-icon {
  font-size: 34px;
  color: var(--violet);
}
.lounge-game-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--paper);
}
.lounge-game-desc {
  font-size: 14px;
  color: var(--dim);
  line-height: 1.5;
  max-width: 220px;
}
.lounge-game-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 6px;
}
.lounge-game-status.live {
  color: var(--buy);
}

/* ---------- coming soon panels (poker, chat) ---------- */
.lounge-coming-soon {
  padding: 30px 24px;
  text-align: center;
}
.lounge-coming-soon-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--violet);
  margin: 0 0 8px;
}
.lounge-coming-soon-desc {
  font-size: 14px;
  color: var(--dim);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- leaderboard ---------- */
.lounge-leaderboard-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 24px 0;
}
.lounge-tab {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim);
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lounge-tab:hover {
  color: var(--paper);
}
.lounge-tab.active {
  color: var(--buy);
  border-color: rgba(20, 241, 149, 0.4);
  background: rgba(20, 241, 149, 0.1);
}

.lounge-leaderboard-body {
  padding: 20px 24px 26px;
}
.lounge-leaderboard-empty {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

.lounge-leaderboard-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 14px;
}
.lounge-leaderboard-row:last-child { border-bottom: none; }
.lounge-leaderboard-rank {
  width: 28px;
  flex-shrink: 0;
  color: var(--violet);
  font-weight: 700;
}
.lounge-leaderboard-wallet {
  flex: 1;
  color: var(--paper);
}
.lounge-leaderboard-score {
  color: var(--dim);
}

/* ---------- poker table ---------- */
.poker-body {
  padding: 20px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.poker-connect-note {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
  margin: 10px 0;
}

.poker-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.poker-table-wrap[hidden] {
  display: none;
}

.poker-ring {
  display: grid;
  gap: 14px;
  align-items: center;
  justify-items: center;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
  grid-template-columns: 90px minmax(180px, 300px) minmax(180px, 300px) 90px;
  grid-template-areas:
    ".    s0   s1   ."
    "s5   felt felt s2"
    ".    s4   s3   .";
}
#poker-seat-container-0 { grid-area: s0; }
#poker-seat-container-1 { grid-area: s1; }
#poker-seat-container-2 { grid-area: s2; }
#poker-seat-container-3 { grid-area: s3; }
#poker-seat-container-4 { grid-area: s4; }
#poker-seat-container-5 { grid-area: s5; }
.poker-felt-rail { grid-area: felt; }

/* Every seat stacks bubble-then-cards top-to-bottom by default, which
   reads correctly for a seat above the table (cards land between the
   seat and the table) but backwards for a seat below it (cards would
   point AWAY from the table instead of toward it). Flipping the stack
   order for whichever seats sit below the felt keeps cards facing the
   table regardless of position. On desktop, 3 and 4 are the bottom row;
   the mobile media query below adds 5 to that list, since it moves from
   a side seat to a bottom-row seat once the layout changes. */
#poker-seat-container-3 .poker-seat,
#poker-seat-container-4 .poker-seat {
  flex-direction: column-reverse;
}
/* The badge is normally pinned to the seat's top corner, next to where
   the bubble sits — but for a reversed seat the bubble is now at the
   BOTTOM, so the badge needs to follow it there too, or it lands right
   on top of the cards instead. */
#poker-seat-container-3 .poker-dealer-button,
#poker-seat-container-4 .poker-dealer-button {
  top: auto;
  bottom: -4px;
}

/* Side seats (desktop only, ≥481px) — cards stacking below the bubble
   makes no sense here since the table is beside them, not below.
   Reorient horizontally instead: left seat's cards point right toward
   the felt, right seat's cards point left toward the felt. This only
   repositions the bubble relative to the card PAIR as a group — the
   two cards within that pair always stay side-by-side (a real hand is
   never shown stacked on top of itself), and it's desktop-only since on
   mobile these same containers become ordinary top/bottom-row seats. */
@media (min-width: 481px) {
  #poker-seat-container-5 .poker-seat {
    flex-direction: row;
    width: auto;
  }
  #poker-seat-container-2 .poker-seat {
    flex-direction: row-reverse;
    width: auto;
  }
}

@media (max-width: 480px) {
  /* No side seats on mobile — the felt is too narrow to keep them from
     stacking awkwardly. 3 across the top, 3 across the bottom instead. */
  .poker-ring {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "s0   s1   s2"
      "felt felt felt"
      "s3   s4   s5";
  }
  #poker-seat-container-5 .poker-seat {
    flex-direction: column-reverse;
  }
  #poker-seat-container-5 .poker-dealer-button {
    top: auto;
    bottom: -4px;
  }

  /* An actual oval curve: the middle seat of each row (#2 top, #5
     bottom) sits flat and centered — the flattened ends of the oval —
     while the corner seats (#1/#3 top, #4/#6 bottom) tuck in slightly
     toward the felt, following the curve round toward the sides. */
  #poker-seat-container-0, #poker-seat-container-2 {
    transform: translateY(14px);
  }
  #poker-seat-container-3, #poker-seat-container-5 {
    transform: translateY(-14px);
  }
}

.poker-start-row {
  display: flex;
  justify-content: center;
}
.poker-my-hand {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--buy);
  min-height: 18px;
}
/* The depleting turn-timer ring — a thick colored arc that shrinks
   around whoever's currently deciding, visible to everyone at the
   table (not just the person acting). Built with a conic-gradient
   rather than an animated border, since the remaining time can vary
   (a reconnect resumes with whatever time was left, not always a
   fresh 60s), so the fill needs to be driven by a live JS-updated
   value rather than a fixed-duration CSS animation. */
.poker-timer-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ring-color, var(--buy)) calc(var(--progress, 1) * 360deg),
    rgba(236, 234, 228, 0.15) 0deg
  );
  transition: background 0.25s linear;
}
.poker-timer-ring.ring-green { --ring-color: var(--buy); }
.poker-timer-ring.ring-yellow { --ring-color: #f5c94a; }
.poker-timer-ring.ring-red { --ring-color: var(--sell); }

.poker-start-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--void);
  background: linear-gradient(90deg, var(--violet), var(--buy));
  border: none;
  border-radius: 100px;
  padding: 10px 22px;
  cursor: pointer;
}

.poker-felt-rail {
  background: linear-gradient(135deg, var(--violet), var(--buy));
  border-radius: 100px / 40px;
  padding: 3px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

/* The felt's size is now driven entirely by the fixed 5-card-slot layout
   below (via poker-community's fixed width, not by however many cards
   happen to be dealt) — so the table itself no longer grows or shrinks
   over the course of a hand. */
.poker-felt-middle {
  background: radial-gradient(ellipse at center, rgba(20,241,149,0.08), var(--void-2) 78%);
  border-radius: 100px / 38px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  justify-content: center;
}

.poker-phase {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet);
}

/* Fixed-size placement area — always exactly 5 card slots, grouped into
   flop (3) / turn (1) / river (1) with real poker-table-style gaps and
   labels between the groups, exactly like felt markings on a real table.
   This is what keeps the table a constant size the whole hand through,
   rather than growing as each street gets dealt. */
.poker-community {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.poker-community-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.poker-community-cards {
  display: flex;
  gap: 6px;
}
.poker-community-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

.poker-card-placeholder {
  background: transparent !important;
  border: 2px dashed rgba(236,234,228,0.18);
  box-shadow: none !important;
}

.poker-pot {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--buy);
  font-size: 18px;
  letter-spacing: 0.02em;
}

.poker-card {
  width: 58px;
  height: 80px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 27px;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
.poker-card.red { color: var(--sell); }
.poker-card.face-down {
  background: linear-gradient(135deg, var(--violet), var(--buy));
  opacity: 0.35;
}

.poker-seat {
  position: relative;
  width: 76px;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.poker-seat-bubble {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--void-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.poker-seat.empty .poker-seat-bubble {
  border-style: dashed;
  color: var(--dim);
}
.poker-seat.empty {
  font-size: 10px;
  color: var(--dim);
  text-align: center;
}

.poker-seat.dealer .poker-seat-bubble { border-color: rgba(156,123,255,0.6); }
.poker-dealer-button {
  position: absolute;
  top: -4px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5efd8, #d8c98a);
  color: #05050a;
  border: 2px solid #05050a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}
.poker-seat.to-act .poker-seat-bubble {
  border-color: var(--buy);
  box-shadow: 0 0 0 2px rgba(20,241,149,0.25), 0 0 14px rgba(20,241,149,0.2);
}
.poker-seat.folded { opacity: 0.4; }
.poker-seat.is-me .poker-seat-bubble { border-color: rgba(20,241,149,0.6); }

.poker-seat-name {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--paper);
  font-weight: 700;
  line-height: 1.1;
}
.poker-seat-chips {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--buy);
  font-weight: 700;
}
.poker-seat-bet {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--violet);
}
.poker-seat-cards {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}
.poker-seat-cards .poker-card {
  width: 38px;
  height: 52px;
  font-size: 16px;
  border-radius: 4px;
}
.poker-seat-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  color: var(--sell);
  text-transform: uppercase;
}
.poker-seat-tag-disconnected {
  color: var(--violet);
}

.poker-sit-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--void);
  background: linear-gradient(90deg, var(--violet), var(--buy));
  border: none;
  border-radius: 100px;
  padding: 5px 8px;
  cursor: pointer;
}

.poker-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
.poker-action-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--void-2);
  color: var(--paper);
  cursor: pointer;
}
.poker-action-btn:hover { border-color: var(--violet); }
.poker-fold-btn { color: var(--sell); border-color: rgba(255,68,104,0.35); }
.poker-raise-wrap { display: flex; gap: 6px; align-items: center; }
.poker-raise-input {
  width: 80px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--paper);
  padding: 8px;
}
.poker-raise-btn { color: var(--buy); border-color: rgba(20,241,149,0.4); }
.poker-waiting-note {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 13px;
  margin: 0;
}
.poker-leave-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sell);
  background: rgba(255,68,104,0.08);
  border: 1px solid rgba(255,68,104,0.35);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
}

.poker-log {
  max-height: 140px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.poker-log-line, .poker-log-error {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}
.poker-log-error { color: var(--sell); }

@media (max-width: 480px) {
  .poker-body { padding: 14px 12px 18px; gap: 10px; }
  .poker-ring { gap: 8px; }
  .poker-seat { width: 58px; }
  .poker-seat-bubble { width: 52px; height: 52px; overflow: hidden; }
  .poker-seat-name { font-size: 8px; }
  .poker-seat-chips { font-size: 9px; }
  .poker-felt-middle { padding: 20px 14px; gap: 10px; }
  .poker-community { gap: 8px; }
  .poker-community-cards .poker-card { width: 48px; height: 66px; font-size: 19px; }
  .poker-community-label { font-size: 7px; }
  .poker-pot { font-size: 16px; }
}