/* Fix #1: Standalone teach toggle in lobby (when score bar is hidden) */
/* 16 px from the top and the side (R-023), level with the title's line. */
.lobby-teach-toggle {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  min-height: 44px;
}

/* ========== LOBBY ========== */
.lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  flex: 1;
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px);
  position: relative; /* for absolute-positioned teach toggle */
}

.lobby h1 {
  font-size: 2rem;
  color: var(--gold);
}

.lobby-fact {
  max-width: 420px;
  margin: 0 auto 0.75rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: rgba(218, 165, 32, 0.08);
  border: 1px solid rgba(218, 165, 32, 0.2);
  color: rgba(230, 220, 190, 0.85);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}

.version-badge {
  font-size: var(--text-micro, 0.6875rem);
  color: var(--gold);
  vertical-align: super;
  font-weight: normal;
}

.quick-start-row {
  text-align: center;
  margin: 0.5rem 0 1rem 0;
}

.quick-start-btn {
  padding: 0.6rem 1.8rem;
  font-size: 0.95rem;
}

.name-input {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.name-input input {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 2px solid var(--gold);
  background: rgba(0,0,0,0.3);
  color: var(--text);
  font-size: 1rem;
  min-width: 200px;
}

.player-list {
  list-style: none;
  padding: 0;
  width: 100%;
  max-width: 300px;
}

.player-list li {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
}

/* Room code display */
.room-code-display {
  text-align: center;
  padding: 16px;
  margin: 12px 0;
  background: rgba(0,0,0,0.3);
  border: 2px solid var(--gold);
  border-radius: 8px;
}

.room-code-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 4px;
}

.room-code-value {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 8px;
  color: white;
  margin: 8px 0;
  user-select: all;
}

.room-code-copy {
  margin-top: 8px;
}

.room-code-input {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  letter-spacing: 4px;
  text-align: center;
  width: 120px;
  padding: 8px;
}

/* ========== TEAM SELECTION — Click-to-Seat Table ========== */
.table-team-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  margin: 0.5rem auto;
}

.table-team-heading {
  text-align: center;
  color: var(--gold);
  font-size: 0.85rem;
  margin: 0 0 0.5rem 0;
}

/* Bench — row of player chips */
.table-bench {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 1rem;
}

.table-chip {
  padding: 0.4rem 1rem;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.4);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
}

.table-chip:hover {
  transform: scale(1.05);
  border-color: var(--gold);
}

.table-chip.selected {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(218,165,32,0.6);
  transform: scale(1.08);
  background: rgba(218,165,32,0.2);
}

.table-chip.seated {
  opacity: 0.35;
  pointer-events: none;
  border-color: rgba(255,255,255,0.1);
}

/* Table surface — grid */
.table-surface {
  display: grid;
  grid-template-areas:
    ".    top    ."
    "left felt right"
    ".    bottom .";
  grid-template-columns: auto 100px auto;
  grid-template-rows: auto auto auto;
  gap: 8px;
  justify-content: center;
  align-items: center;
  max-width: 360px;
  width: 100%;
}

.table-pos-top    { grid-area: top; }
.table-pos-right  { grid-area: right; }
.table-pos-bottom { grid-area: bottom; }
.table-pos-left   { grid-area: left; }

.table-seat {
  min-height: 60px;
  min-width: 104px;
  border-radius: 10px;
  border: 2px dashed rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  transition: transform 0.2s var(--ease-out), border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  color: var(--text);
  font-family: inherit;
}

.table-seat:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.table-seat:active {
  transform: scale(0.97);
}

/* Team colors on seats */
.table-seat.team-ns {
  border-color: rgba(218,165,32,0.5);
  box-shadow: 0 0 8px rgba(218,165,32,0.18);
}

.table-seat.team-ew {
  border-color: rgba(91,206,200,0.45);
  box-shadow: 0 0 8px rgba(91,206,200,0.18);
}

/* Filled seat gets solid border instead of dashed */
.table-seat:has(.table-seat-occupant) {
  border-style: solid;
  border-width: 2px;
}

.table-seat:has(.table-seat-occupant).team-ns {
  border-color: rgba(218,165,32,0.75);
  box-shadow: 0 0 12px rgba(218,165,32,0.3);
  background: rgba(218,165,32,0.08);
}

.table-seat:has(.table-seat-occupant).team-ew {
  border-color: rgba(91,206,200,0.7);
  box-shadow: 0 0 12px rgba(91,206,200,0.3);
  background: rgba(91,206,200,0.08);
}

/* Selected seat state for host reordering */
.table-seat.table-seat-selected {
  border-color: #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.95), inset 0 0 12px rgba(255, 215, 0, 0.45) !important;
  transform: scale(1.06);
  animation: pulse-seat 1.2s infinite alternate ease-in-out;
}

@keyframes pulse-seat {
  0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.6), inset 0 0 6px rgba(255, 215, 0, 0.3); }
  100% { box-shadow: 0 0 24px rgba(255, 215, 0, 1), inset 0 0 16px rgba(255, 215, 0, 0.6); }
}

.table-seat.table-seat-selected .table-seat-label {
  color: #fff;
  font-weight: bold;
}

.table-swap-hint {
  font-size: 0.78rem;
  color: var(--gold);
  text-align: center;
  margin: 4px 0 6px 0;
  animation: prompt-pulse 2s ease-in-out infinite;
}

.table-seat-label {
  font-size: var(--text-micro, 0.6875rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  opacity: 0.75;
  font-weight: 600;
}

.table-seat-occupant {
  font-size: 0.88rem;
  font-weight: bold;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center felt — the table medallion */
.table-felt {
  grid-area: felt;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, #2d6b43 0%, #153b23 100%);
  border: 2px solid rgba(218, 165, 32, 0.4);
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  margin: 0 auto;
  pointer-events: none;
}

.table-felt-inner {
  font-size: 1.8rem;
  opacity: 0.6;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Partnerships strip */
.table-partnerships {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0.75rem 0 0.25rem 0;
  flex-wrap: wrap;
}

.team-pill {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 16px;
  font-size: 0.82rem;
  font-weight: bold;
  white-space: nowrap;
}

.team-pill.team-ns {
  background: rgba(218,165,32,0.2);
  color: var(--team-ns);
  border: 1px solid rgba(218,165,32,0.35);
}

.team-pill.team-ew {
  background: rgba(91,206,200,0.15);
  color: var(--team-ew);
  border: 1px solid rgba(91,206,200,0.3);
}

.vs {
  font-size: 0.75rem;
  opacity: 0.5;
  font-style: italic;
}


/* ========== FIX #4: LANDING PAGE ========== */
.landing-options {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 400px;
  align-items: center;
}

.landing-card {
  background: rgba(0,0,0,0.3);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 1.5rem;
  width: 100%;
  text-align: center;
}

.landing-card h3 {
  color: var(--gold);
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.landing-card p {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.landing-card .btn {
  margin: 0.25rem;
}

.landing-join-form {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  align-items: center;
}

.landing-join-form.visible {
  display: flex;
}

.landing-join-form input {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 2px solid var(--gold);
  background: rgba(0,0,0,0.3);
  color: var(--text);
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* Fix #2: Room-code input same width as name input in join form */
.landing-join-form input.room-code-input {
  padding: 8px;
  width: 100%;
  font-size: 1.2rem;
  letter-spacing: 4px;
}

/* ========== QR CODE ========== */
.qr-section {
  text-align: center;
  margin: 0.75rem 0;
}

.qr-label {
  font-size: 0.75rem;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 0.4rem;
}

.qr-code {
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  display: inline-block;
}

/* ========== LOBBY PULSE INDICATORS ========== */
.online-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 6px #4caf50;
  flex-shrink: 0;
}

.offline-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f44336;
  flex-shrink: 0;
}

.empty-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* ========== SPECTATOR LIST ========== */
.spectator-list-lobby {
  font-size: 0.8rem;
  color: #90caf9;
  background: rgba(33, 150, 243, 0.1);
  border: 1px dashed rgba(33, 150, 243, 0.4);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 8px;
  text-align: center;
  width: 100%;
}

/* Always-visible spectator roster chip (score bar) — 4a.6 */
.spectator-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(33, 150, 243, 0.15);
  border: 1px solid rgba(33, 150, 243, 0.4);
  color: #90caf9;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  margin-left: 4px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Spectator waiting view in a lobby — 4a.4 */
.spectator-lobby-view {
  margin-top: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: #90caf9;
  background: rgba(33, 150, 243, 0.1);
  border: 1px dashed rgba(33, 150, 243, 0.4);
  border-radius: 8px;
}
.spectator-lobby-view .spectator-teach-note { margin: 0; font-size: 0.85rem; opacity: 0.85; }

/* ========== LEAVE BUTTON IN LOBBY ========== */
.btn-leave-lobby {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text);
  opacity: 0.8;
  font-size: 0.85rem;
  padding: 4px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
  margin-top: 10px;
}

.btn-leave-lobby:hover {
  background: rgba(200, 50, 50, 0.25);
  border-color: #e57373;
  color: #ffcdd2;
  opacity: 1;
}

/* ========== MOBILE RESPONSIVE (extracted per-component from the style.css mega-block) ========== */
@media (max-width: 600px), (max-height: 500px) {
  .lobby h1 {
    font-size: 1.5rem;
  }
  /* Fix #2: Landing cards stack on mobile */
  .landing-options {
    flex-direction: column;
    gap: 16px;
  }

  .landing-card {
    width: 100%;
    max-width: none;
  }
}

/* ========== ROOM LOBBY (inside a room) ==========
   A small version of the game table, seen from your own seat. */
.lobby.lobby-room {
  gap: 18px;
  padding: 20px 16px 32px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.landing-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}

.landing-card h3 { color: var(--text); }

.room-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  text-align: center;
}

.resume-banner {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(227, 181, 74, 0.14);
  color: var(--gold-strong);
  font-weight: 700;
  font-size: 0.9rem;
}

.room-code-row { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.room-head .room-code-value {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 2.2rem;
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* balance the trailing letter-spacing */
  color: var(--text);
}

.room-share { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.room-share .btn { width: auto; padding: 0.5rem 1rem; font-size: 0.9rem; }

.room-head .qr-section { padding: 8px; background: #fff; border-radius: 12px; color: #111; }
.room-head .qr-section[hidden] { display: none; }

.lobby-table {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-areas:
    ".    top    ."
    "left cloth right"
    ".    bottom .";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.lobby-cloth {
  grid-area: cloth;
  min-height: 110px;
  border-radius: 24px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 45%, var(--felt), var(--felt-edge));
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45);
}

.lobby-teams { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 0.85rem; }
.lobby-teams .vs { color: var(--text); font-weight: 500; font-size: 0.75rem; }
/* On the felt's lighter middle (F-008): the lighter gold and teal, 4.9:1
   and 5:1 (the chip colours were 4.28 and 4.38), and a lighter hint. */
.lobby-teams .score-ns { color: var(--gold-strong); }
.lobby-teams .score-ew { color: #7fdcd6; }
.lobby-cloth .panel-hint { color: #c4d3c8; }

.lobby-seat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(8, 22, 14, 0.8);
  border: 1px solid var(--panel-border);
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.lobby-top { grid-area: top; }
.lobby-left { grid-area: left; }
.lobby-right { grid-area: right; }
.lobby-bottom { grid-area: bottom; }
.lobby-top, .lobby-bottom { justify-self: center; width: min(260px, 100%); }

.lobby-seat.is-open { border-style: dashed; }
.lobby-seat.is-open .seat-avatar { background: rgba(255, 255, 255, 0.1); color: var(--text-dim); }
.lobby-seat.is-waiting { opacity: 0.8; border-style: dashed; }
.lobby-seat.is-movable { cursor: pointer; }
.lobby-seat.is-movable:hover { border-color: rgba(227, 181, 74, 0.55); }
.lobby-seat.is-selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 181, 74, 0.3); }

.lobby-seat .player-name {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat-role { font-size: 0.74rem; color: var(--text-dim); }

.seat-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }

/* Build 28 (ISSUES row 95): the menu on a computer's seat, a native select a full row wide and 44 px tall. */
.seat-computer-select {
  flex: 1 1 100%;
  /* Within the tile at any text size: a select's own minimum is its widest option, which at 200% text is wider than
     the tile's room (it ran 10 px past the tile's edge); the name shortens instead. */
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  min-height: 44px;
  padding: 4px 28px 4px 10px;
  border-radius: 9px;
  border: 1px solid rgba(227, 181, 74, 0.5);
  background-color: rgba(0, 0, 0, 0.18);
  color: var(--gold-strong);
  color-scheme: dark;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.seat-computer-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* "Same Opponents" on Home and in the lobby: the title, and who they are underneath. */
.same-opponents-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.same-opponents-names { font-size: 0.8rem; font-weight: 400; color: var(--text-dim); }

.seat-action {
  flex: 1;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 9px;
  border: 1px solid rgba(227, 181, 74, 0.5);
  background: transparent;
  color: var(--gold-strong);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.seat-action.is-quiet { border-color: var(--panel-border); color: var(--text-dim); }

.lobby-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.lobby-actions .btn { width: min(320px, 100%); }
.lobby-actions .start-game-btn { font-size: 1.1rem; }

.continue-card { border-color: rgba(227, 181, 74, 0.5); }
.continue-score { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-weight: 700; opacity: 1 !important; }

.link-btn {
  /* A text link, with a 44 px tall hit area (R-018). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  margin-top: 0;
  background: none;
  border: 0;
  color: var(--text-dim);
  text-decoration: underline;
  font-size: 0.8rem;
  cursor: pointer;
}

@media (max-width: 560px) {
  .lobby-table {
    grid-template-areas:
      "top top"
      "left right"
      "cloth cloth"
      "bottom bottom";
    grid-template-columns: 1fr 1fr;
  }
  .lobby-cloth { min-height: 64px; }
  .room-head .room-code-value { font-size: 1.8rem; }
}

@media (max-width: 420px) {
  .version-badge { display: none; }
}

/* ========== HOME (landing) ==========
   Same shape as the app's home: one name, "Play the computers" and "Play
   with others online", a one-line Join, and a saved game tucked away. */
.landing-options { gap: 14px; }

.landing-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font-size: 1.05rem;
  text-align: center;
}
.landing-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }

.landing-play { display: flex; flex-direction: column; gap: 10px; }
.landing-card.landing-play .btn { margin: 0; width: 100%; min-height: 48px; font-size: 1.05rem; }
.landing-play .panel-hint { margin: 2px 0 0; }

.landing-join { display: flex; flex-direction: column; gap: 10px; }
.landing-join h3 { margin: 0; font-size: 1rem; }
.landing-join-row { display: flex; gap: 8px; }
.landing-join-row .room-code-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font-size: 1.15rem;
  letter-spacing: 4px;
  text-align: center;
}
.landing-card.landing-join .landing-join-row .btn { margin: 0; flex: 0 0 auto; width: auto; min-width: 88px; }
.landing-join .link-btn { align-self: center; }

.landing-card.landing-more { padding: 0.9rem 1.25rem; text-align: center; }
.landing-more summary {
  cursor: pointer;
  color: var(--text-dim, var(--text));
  font-weight: 600;
  list-style: none;
}
.landing-more summary::-webkit-details-marker { display: none; }
.landing-more summary::after { content: ' \25BE'; opacity: 0.7; }
.landing-more[open] summary { margin-bottom: 0.75rem; }
.landing-more[open] summary::after { content: ' \25B4'; }
.landing-save-code { text-transform: uppercase; margin-bottom: 0.75rem; }

/* Build 29: Privacy Policy · Terms of Use · Support, the last line of Home. Quiet (small, dim text) but each link is
   a 44 px target with the page's gold focus ring. It may use the page's side padding so it stays one line on a
   small phone, and it ends above the home indicator. Home only: a table never draws it. */
.landing-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin: 0 -1rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.landing-legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--text-dim);
  font-size: 0.8rem;
  text-decoration: underline;
}
.landing-legal a:hover { color: var(--text); }
.landing-legal-dot { color: var(--text-dim); opacity: 0.7; font-size: 0.8rem; }

/* Build 16: table options in the lobby. */
.lobby-options { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.lobby-options-title { margin: 0 0 2px; font-size: 0.95rem; color: var(--gold); }
.lobby-options .settings-row { border-radius: 12px; }
.ctx-chip.is-options { white-space: normal; }

/* Your own seat's avatar opens the picker (build 20); the tap area is padded to 44px. */
button.seat-avatar.is-mine { position: relative; border: 2px solid var(--gold); font-family: inherit; padding: 0; cursor: pointer; }
button.seat-avatar.is-mine::after { content: ""; position: absolute; inset: -4px; }
button.seat-avatar.is-mine:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }

/* ========== Landing hero (build 24, as the app's Home / welcome) ==========
   Build 28 (rows 97 and 98): the fan is springs (render/hero.js: --px, --py, --pr are each card's push from its
   place in the fan, --loose how far the fan has come loose); a lucky hand's meld is named over it in gold; and
   in the four festive weeks a faint tint and a greeting come with the season. */
.landing-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0 4px; }
.hero-fan-wrap { position: relative; }
.hero-fan { position: relative; width: 240px; height: 112px; --card-width: 64px; --card-height: 91px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-fan .hero-card {
  position: absolute; left: 50%; bottom: 0; margin-left: -32px;
  transform-origin: 50% 100%;
  box-shadow: 0 calc(4px + var(--loose, 0) * 3px) calc(10px + var(--loose, 0) * 5px) rgba(0, 0, 0, 0.35);
  transform: translateX(calc(var(--i) * 23px + var(--px, 0px))) translateY(calc(var(--i) * var(--i) * 2px + var(--py, 0px))) rotate(calc(var(--i) * 8deg + var(--pr, 0deg)));
  animation: hero-deal 600ms cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: calc((var(--i) + 2.5) * 50ms);
}
/* A shuffled hand's cards dissolve in over the ones they replace, while the cards are flying about. */
.hero-fan .hero-card.no-deal { animation: none; }
.hero-fan .hero-card.is-arriving { opacity: 0; transition: opacity var(--swap, 0.14s) ease-out; }
.hero-fan .hero-card.is-arriving.is-here { opacity: 1; }
@keyframes hero-deal {
  from { opacity: 0; transform: translateX(calc(var(--i) * 2px)) translateY(18px) rotate(calc(var(--i) * 1.5deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fan .hero-card { animation: hero-fade 300ms ease-out both; }
  .hero-fan .hero-card.no-deal { animation: none; }
  @keyframes hero-fade { from { opacity: 0; } }
}
/* A lucky hand's meld, as the Meld Chart names it. */
.hero-lucky {
  position: absolute; left: 0; right: 0; top: -14px; margin: 0; text-align: center; pointer-events: none;
  font-family: ui-serif, "New York", Georgia, serif; font-weight: 700; font-size: 1.2rem; color: var(--gold-strong);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 12px rgba(227, 181, 74, 0.5);
  opacity: 0; transform: translateY(4px) scale(0.96); transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.hero-lucky.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-lucky { transform: none; transition: opacity 250ms ease-out; } }
/* The season: a faint tint behind the hero, a greeting under the name, and a link that turns it off. */
.landing-hero[data-look]::before {
  content: ""; position: absolute; inset: -28px -40px -8px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 28%, var(--look-tint, transparent), transparent 70%);
}
.landing-hero[data-look="halloween"] { --look-tint: rgba(232, 115, 26, 0.17); --look-greeting: #f6b873; }
.landing-hero[data-look="thanksgiving"] { --look-tint: rgba(201, 115, 30, 0.15); --look-greeting: #ecc07c; }
.landing-hero[data-look="christmas"] { --look-tint: rgba(169, 214, 245, 0.10); --look-greeting: #ddebf5; }
.landing-hero[data-look="easter"] { --look-tint: rgba(220, 194, 242, 0.11); --look-greeting: #ead3f6; }
.hero-greeting {
  margin: 0; text-align: center; font-family: ui-serif, "New York", Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 1.2rem; color: var(--look-greeting, var(--text));
}
.hero-season-toggle { font-size: 0.75rem; color: var(--text-dim); padding: 12px 8px; min-height: 44px; box-sizing: border-box; }
.hero-title {
  margin: 6px 0 0; font-family: ui-serif, "New York", Georgia, serif; font-weight: 700;
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); letter-spacing: -0.01em; color: var(--text);
}
.hero-tagline { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.landing-card .btn-primary, .landing-card.landing-play .btn-primary { min-height: 52px; font-size: 1.0625rem; }

/* Learn to Play: Book Rules under Family Rules, marked with ↳ as in the
   app, the row the same width as the others (R-029). */
.learn-choices .learn-choice.is-under { margin-left: 0; flex-direction: row; align-items: center; gap: 10px; }
.learn-choices .learn-under { font-style: normal; color: var(--text-dim); font-size: 1.1rem; line-height: 1; }
.learn-choices .learn-choice-text { display: flex; flex-direction: column; gap: 2px; color: var(--text); font-size: 1rem; }
.learn-choices .learn-choice-text span { font-size: 0.82rem; }

/* The fan's outer cards turn on their bottom corners and dip below the fan
   (rotate 20° + the arc): reserve that height so the caption under the
   landing fan and the Learn to Play title stay clear (R-009, R-010). */
.hero-fan { margin-bottom: 26px; }
.learn-content .learn-fan { margin-bottom: 30px; }
@media (max-width: 600px) {
  .learn-content .learn-fan { margin-bottom: 24px; }
}

/* Friends and Join a Table: one grid for every row (R-027): the field takes
   the room, the button column is one width, the same height as the field,
   and every right edge lines up. The placeholder is in plain letters so
   "Their Code" fits (R-026). */
.landing-card .landing-join-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; align-items: stretch; }
.landing-card .landing-join-row .room-code-input { min-height: 52px; box-sizing: border-box; }
.landing-card .landing-join-row .btn,
.landing-card.landing-join .landing-join-row .btn { margin: 0; width: 100%; min-width: 0; min-height: 52px; }
.room-code-input::placeholder { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.5px; font-size: 1rem; }
.landing-card .friends-code { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px; align-items: center; gap: 8px; text-align: left; }
.landing-card .friends-code .btn { margin: 0; width: 100%; min-width: 0; }

/* ========== First visit (build 24, R-024): the app's onboarding ==========
   One step a page: Welcome, What Should We Call You?, New to Pinochle?
   Wide windows (a phone on its side, a laptop) put the hero beside the
   step, as the app does. */
.onboarding {
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 24px;
}
.onboarding[data-step="profile"] { justify-content: flex-start; padding-bottom: 0; }
.onb-page { width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: 6vh; }
.onboarding[data-step="profile"] .onb-page { margin-bottom: 16px; }
.onb-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.onb-body { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.onb-title { margin: 0; font-size: 3.25rem; line-height: 1.05; letter-spacing: -0.5px; }
.onb-lines { list-style: none; margin: 0; padding: 8px 4px; display: flex; flex-direction: column; gap: 14px; }
.onb-line { display: flex; align-items: center; gap: 12px; color: var(--text); opacity: 0.9; font-size: 1.0625rem; line-height: 1.35; text-align: left; }
.onb-line svg { flex: none; color: var(--gold); }
.onboarding .onb-cta { width: 100%; min-height: 52px; font-size: 1.0625rem; margin: 0; }
.onb-cta.btn-primary { box-shadow: 0 6px 14px rgba(227, 181, 74, 0.22); }
.onb-panel {
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--panel-border);
  text-align: left;
}
.onboarding .onb-name { min-height: 52px; text-align: left; font: 600 1.25rem/1.2 ui-serif, "New York", Georgia, serif; }
.onb-note { margin: 8px 0 0; font-size: 0.8125rem; color: var(--text-dim); }
.onb-note.is-bad { color: var(--bad); }
.onb-label { margin: 0 0 8px 4px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); }
.onb-avatars { height: 260px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.onb-group { margin: 10px 0 4px; font-size: 0.8125rem; font-weight: 600; color: var(--text-dim); }
.onb-group:first-child { margin-top: 0; }
.onb-grid { overflow: visible; }
.onb-bar {
  position: sticky;
  bottom: 0;
  width: calc(100% + 32px);
  margin: auto -16px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--panel-border);
}
.onb-bar .onb-continue { width: min(488px, 100%); }
.onb-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-size: 3rem;
  line-height: 1;
  background: var(--panel);
  border: 2px solid rgba(227, 181, 74, 0.6);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35);
}
.onb-pic { position: relative; }
.onb-avatar.is-corner { position: absolute; right: -4px; bottom: 18px; width: 56px; height: 56px; font-size: 2rem; }
.onb-fan.is-small { transform: scale(0.8); transform-origin: 50% 100%; margin-top: -22px; }
.onb-heading { margin: 0; display: flex; flex-direction: column; gap: 2px; font: 700 1.6rem/1.2 ui-serif, "New York", Georgia, serif; color: var(--text); }
.onb-text { margin: 0; text-align: center; color: var(--text); opacity: 0.9; font-size: 1.0625rem; line-height: 1.45; }
.onb-actions { display: flex; flex-direction: column; gap: 12px; }
/* The welcome's words rise in once, after the cards (none with Reduce Motion: base.css). */
.onb-reveal { animation: onb-rise 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.35s both; }
.onb-reveal.is-late { animation-delay: 0.5s; }
@keyframes onb-rise { from { opacity: 0; transform: translateY(12px); } }
@media (min-width: 640px) and (min-aspect-ratio: 23/20) {
  .onb-page { width: min(900px, 100%); flex-direction: row; justify-content: center; gap: 40px; }
  .onb-hero { flex: 0 1 300px; }
  .onb-body { flex: 0 1 420px; }
}
@media (max-height: 500px) {
  .onboarding { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .onb-page { margin-bottom: 0; gap: 16px; }
  .onb-title { font-size: 2.5rem; }
  .onb-avatar.is-large { width: 64px; height: 64px; font-size: 2.2rem; }
  .onb-avatars { height: 180px; }
  .onboarding[data-step="profile"] .onb-page { align-items: flex-start; }
}

/* Lobby seats: "Computer" on a line of its own, the role whole (R-080). */
.seat-role-main, .seat-role-kind { display: block; white-space: nowrap; }
.seat-role-sep { display: none; }
/* Copy Invite Link, Share…, and QR Code: one row of equal buttons where
   they fit, else one column (R-080). */
.room-share { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.room-share .btn { width: 100%; margin: 0; white-space: nowrap; }
@media (max-width: 520px) {
  .room-share { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); width: 100%; }
}

/* iPad-size windows: Home's column grows with the window (R-082; the app
   goes to 780 pt), one text step up. */
/* One width rule (N-018): 600 px from 800 px wide, so a wider window never
   has a narrower column (it was 400 at 844 and 1180 wide, 600 at 820). */
@media (min-width: 800px) {
  .landing-options { max-width: 600px; }
}
@media (min-width: 768px) and (min-height: 900px) {
  .landing-options { max-width: 600px; }
  .landing-options .landing-card { font-size: 1.0625rem; }
}

/* Larger Text (as the app's Join, B24 pass 2 N-028): the code and Join
   side by side while both fit whole; narrower than 15 of the card’s own em
   (a phone at 200% text) they stack full width, so "Join" never wraps or
   is cut. */
.landing-card.landing-join, .landing-card.landing-friends { container-type: inline-size; }
@container (max-width: 15em) {
  .landing-card .landing-join-row { grid-template-columns: minmax(0, 1fr); }
}