/* Chowka-Bhara — Lobby, seats, overlays and the how-to-play drawer. */

  /* ============================= ONLINE ============================= */
  .code-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--mat-edge);
    border-radius: 8px;
    background: rgba(255,255,255,0.35);
    color: var(--ink-text);
    font-family: var(--font-mono);
    font-size: 1.4rem;
    letter-spacing: 0.35em;
    text-align: center;
    text-transform: uppercase;
  }
  .code-input::placeholder { opacity: 0.35; letter-spacing: 0.35em; }

  #lobby-screen .mat-panel { max-width: 560px; margin: 0 auto; }
  .lobby-status { margin: 0 0 18px; text-align:center; font-size: 0.95rem; }
  .lobby-status.error { color: var(--danger); font-weight: 600; }

  .room-code {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 8vw, 3rem);
    letter-spacing: 0.24em;
    text-align:center;
    padding: 14px 10px;
    margin-bottom: 8px;
    background: var(--ink-0);
    color: var(--khaki-text);
    border-radius: 8px;
    /* The trailing letter-spacing would otherwise shove the code off-centre. */
    text-indent: 0.24em;
    user-select: all;
  }
  .code-hint { margin: 0 0 22px; font-size: 0.82rem; text-align:center; opacity: 0.75; }

  .seat-row {
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--mat-edge);
    border-radius: 8px;
    background: rgba(255,255,255,0.22);
    margin-bottom: 8px;
    font-size: 0.92rem;
  }
  .seat-dot { width: 14px; height:14px; border-radius:50%; flex:0 0 auto; }
  .seat-name { font-weight: 600; }
  .seat-who { margin-left:auto; opacity: 0.75; font-size: 0.85rem; }
  .seat-row select {
    font: inherit;
    font-size: 0.85rem;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--mat-edge);
    background: rgba(255,255,255,0.5);
    color: var(--ink-text);
  }
  .seat-row.mine { border-color: var(--ink-0); box-shadow: 0 0 0 2px rgba(51,65,90,0.3); }
  .seat-claim-btn {
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1.5px solid #8a6420;
    background: var(--home-ring);
    color: #2b1e0a;
    font-weight: 600;
  }
  .seat-claim-btn:disabled { opacity: 0.4; cursor: default; }
  /* Not-yet-confirmed reads as an invitation, confirmed reads as done. */
  .seat-claim-btn.pending { background: transparent; color: var(--ink-text); }

  .seat-ready {
    font-size: 0.78rem;
    font-family: var(--font-mono);
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--mat-edge);
    opacity: 0.7;
  }
  .seat-ready.yes {
    background: var(--p-areca);
    border-color: var(--p-areca);
    color: #f2f7f2;
    opacity: 1;
  }

  .lobby-back-btn {
    display:block;
    width:100%;
    margin-top: 10px;
    padding: 11px;
    background: transparent;
    border: 1.5px solid var(--mat-edge);
    border-radius: 8px;
    font-size: 0.92rem;
  }

  #pause-overlay {
    position: fixed;
    inset: 0;
    background: rgba(36,26,19,0.86);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 20px;
    z-index: 60;
  }

  .net-badge {
    display:inline-flex;
    align-items:center;
    gap: 6px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(51,65,90,0.14);
    border: 1px solid var(--mat-edge);
    margin-left: 8px;
    vertical-align: middle;
  }
  .net-badge::before {
    content:"";
    width: 7px; height:7px;
    border-radius:50%;
    background: var(--p-areca);
  }
  .net-badge.off::before { background: var(--danger); }

  .roster { display:flex; flex-direction:column; gap:8px; }
  .roster-row {
    border: 1.5px solid var(--mat-edge);
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.28);
    transition: box-shadow .15s ease, border-color .15s ease;
  }
  .roster-row.active-player { border-color: var(--ink-0); box-shadow: 0 0 0 2px rgba(51,65,90,0.35); }
  .roster-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .dot { width:11px; height:11px; border-radius:50%; flex:0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
  .roster-name { font-weight:600; font-size:0.92rem; }
  .roster-counts { margin-left:auto; display:flex; gap:8px; }
  .count-badge { font-family: var(--font-mono); font-size:0.72rem; color:#5c4a2e; white-space:nowrap; }
  .tray-row { display:flex; gap:14px; margin-top:6px; flex-wrap:wrap; }
  .tray.hand .token, .tray.finished .token { width:18px; height:18px; }
  .tray.finished .token { opacity:0.85; }

  /* How to play slides in over the board instead of expanding inline and
     pushing everything down a long scroll. */
  .howto-btn {
    display:block;
    width:100%;
    padding: 11px;
    background: rgba(255,255,255,0.34);
    border: 1.5px solid var(--mat-edge);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-text);
  }
  .howto-btn:hover { background: rgba(255,255,255,0.62); }

  /* Shared by every drawer. This was scoped to one id, so the second drawer
     was left unpositioned and its backdrop greyed only part of the page. */
  .drawer { position: fixed; inset: 0; z-index: 70; }
  .drawer-backdrop { position: absolute; inset: 0; background: rgba(36,26,19,0.72); }
  .drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(460px, 100vw);
    background: var(--mat);
    color: var(--ink-text);
    border-left: 1px solid var(--mat-edge);
    box-shadow: -14px 0 40px -18px rgba(0,0,0,0.8);
    padding: 22px 24px 32px;
    overflow-y: auto;
    animation: drawer-in .22s ease-out;
  }
  @keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .drawer-panel { animation: none; } }

  .drawer-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mat-edge);
    position: sticky; top: -22px;
    background: var(--mat);
    padding-top: 22px; margin-top: -22px;
  }
  .drawer-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400; font-size: 1.4rem; letter-spacing: 0.03em;
  }
  .drawer-close {
    margin-left: auto;
    background: transparent;
    border: 1.5px solid var(--mat-edge);
    border-radius: 8px;
    width: 38px; height: 38px;
    font-size: 1.4rem; line-height: 1;
  }
  .drawer-close:hover { background: rgba(255,255,255,0.4); }

  /* Walking the game back, beside the board. Quiet while you are up to date,
     and marked when you are not — the pieces are then somewhere they are not,
     which is worth saying loudly. */
  .history-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 7px 9px;
    border: 1.5px solid var(--mat-edge);
    border-radius: 10px;
    background: rgba(255,255,255,0.28);
  }
  .history-bar[hidden] { display: none; }
  .history-bar.past {
    border-color: var(--home-ring);
    background: rgba(201,147,47,0.18);
    box-shadow: 0 0 0 2px rgba(201,147,47,0.25);
  }
  .history-step {
    flex: 0 0 auto;
    width: 42px; height: 36px;
    border: 1.5px solid var(--mat-edge);
    border-radius: 8px;
    background: rgba(255,255,255,0.5);
    color: var(--ink-text);
    font-size: 0.9rem;
    line-height: 1;
  }
  .history-step:hover:not(:disabled) { background: #fff8e8; }
  .history-step:disabled { opacity: 0.32; cursor: default; }
  .history-where {
    flex: 1 1 auto;
    text-align: center;
    font: 0.78rem/1.3 var(--font-mono);
    color: #5c4a2e;
    min-width: 0;
  }
  .history-bar.past .history-where { color: var(--ink-text); font-weight: 700; }
  .history-now {
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1.5px solid #8a6420;
    border-radius: 8px;
    background: var(--home-ring);
    color: #2b1e0a;
    font-size: 0.8rem;
    font-weight: 600;
  }
  .history-now:disabled { opacity: 0.32; cursor: default; }

  .history-line { cursor: pointer; border-radius: 5px; }
  .history-line:hover { background: rgba(255,255,255,0.4); }
  .history-line.here {
    background: var(--ink-0);
    color: var(--khaki-text);
    font-weight: 600;
    padding: 2px 6px;
    margin-left: -6px;
  }

  /* The board says so as well, because the board is what you are reading. */
  .history-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--home-ring);
    border-radius: 10px;
    background: rgba(201,147,47,0.16);
    font-size: 0.85rem;
  }
  .history-banner[hidden] { display: none; }
  .history-banner button {
    margin-left: auto;
    padding: 7px 12px;
    border: 1.5px solid #8a6420;
    border-radius: 8px;
    background: var(--home-ring);
    color: #2b1e0a;
    font-size: 0.78rem;
    font-weight: 600;
  }

  /* Numbered so you can say "line 40" rather than "the bit near the end". */
  .history-list {
    margin: 12px 0 0;
    padding-left: 2.6em;
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .history-line { margin-bottom: 7px; padding-left: 4px; }
  .history-line::marker { font-family: var(--font-mono); font-size: 0.78em; opacity: 0.55; }
  .history-empty { list-style: none; margin-left: -2.6em; opacity: 0.6; }

  #howto-list { font-size:0.92rem; line-height:1.6; }
  #howto-list li { position:relative; padding-left:16px; margin-bottom:9px; }
  #howto-list li::before { content:"\2013"; position:absolute; left:0; }

  details.rules-toggle {
    border: 1px dashed var(--mat-edge);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height:1.5;
  }
  details.rules-toggle summary {
    cursor:pointer;
    font-weight:600;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#5c4a2e;
  }
  details.rules-toggle ul { margin-top:8px; }
  details.rules-toggle li { position:relative; padding-left:14px; margin-bottom:5px; }
  details.rules-toggle li::before { content:"–"; position:absolute; left:0; }



  /* This sits on the pale mat and only ever has. It was wearing colours meant
     for the dark win overlay — pale khaki text on a pale ground, which measured
     1.11:1, and 1.01:1 under high contrast, where the token it borrowed goes
     almost white. That is the background colour, in the mode that exists to
     stop exactly this. It now matches every other button in the sidebar. */
  .new-game-btn {
    border: 1.5px solid var(--mat-edge);
    color: var(--ink-text);
    background: rgba(255,255,255,0.34);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    display: block;
    margin: 0;
  }
  .new-game-btn:hover { background: rgba(255,255,255,0.62); }

  /* ============================= WIN OVERLAY ============================= */
  #win-overlay {
    position:fixed; inset:0;
    background: rgba(20,14,9,0.82);
    display:flex; align-items:center; justify-content:center;
    z-index: 50;
    animation: fade-in .3s ease;
  }
  @keyframes fade-in { from{opacity:0;} to{opacity:1;} }
  .win-card {
    background: var(--mat);
    color: var(--ink-text);
    border-radius: var(--radius);
    padding: 36px 44px;
    text-align:center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    animation: win-pop .45s cubic-bezier(.2,1.4,.4,1);
  }
  @keyframes win-pop { from{ transform:scale(0.8); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .win-card p.eyebrow { text-transform:uppercase; letter-spacing:0.18em; font-size:0.75rem; color:#5c4a2e; margin:0 0 8px; }
  .win-name { font-family: var(--font-display); font-size: 2.2rem; margin: 0 0 18px; }
  .win-card button { padding:10px 20px; border-radius:8px; border:1.5px solid #8a6420; background:var(--home-ring); font-weight:600; }

  /* ============================= REDUCED MOTION ============================= */
  @media (prefers-reduced-motion: reduce) {
    .token.legal { animation: none; box-shadow: 0 0 0 3px rgba(243,230,195,0.9); }
    .shell.flipping { animation: none; }
    .token.pop-in { animation:none; }
    #win-overlay, .win-card { animation:none; }
  }

/* A small notice that stands with the Start button while seats are still open,
   and goes away once they are all taken. It used to be spliced into the
   button's own label, which made the button grow a sentence long and then
   change size under the cursor as people sat down. A pill beside it says the
   same thing without the button moving. */
.lobby-hint {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 8px 14px 8px 32px;
  position: relative;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--mat-edge);
  box-shadow: 0 2px 8px -3px rgba(51,65,90,0.45);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #5c4a2e;
  text-align: center;
  animation: hint-in 0.22s ease-out;
}
.lobby-hint[hidden] { display: none; }

/* The dot marks it as a notice rather than a label, without spending a word. */
.lobby-hint::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--p-turmeric);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-hint { animation: none; }
}
html.no-motion .lobby-hint { animation: none; }

/* What the connection is doing, so a failed join is not silent. */
.lobby-diag {
  margin-top: 14px;
  font: 400 0.72rem/1.6 var(--font-mono);
  color: #6d5b3c;
  word-break: break-word;
}