/* The lobby (/lobby/): the account box, your tables, the form to open one, the open tables. */
.lobby { padding-bottom: 40px; }
.lobby .page-head { padding-bottom: 18px; }
.lb-sec { padding: 22px 0 6px; }
.lb-sec h2 { font-size: 1.25rem; margin: 0 0 12px; }
.lb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lb-head h2 { margin: 0; }
.lb-mute { color: var(--muted); }
.lb-small { font-size: .88rem; }
.lb-error { color: #b3261e; margin: 10px 0 0; font-weight: 600; }
.lb-ok { color: var(--venster); margin: 10px 0 0; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lb-error { color: #f2a097; } }

.lb-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; max-width: 46em; }
.lb-box > p:first-child { margin-top: 0; }
.lb-box h3 { font-size: 1rem; margin: 18px 0 8px; }
.lb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.lb-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.lb-field { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--muted); font-weight: 600; }
.lb-field input, .lb-field select, .lb-head select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.lb-head select { font-size: .9rem; padding: 6px 10px; }
.lb-field input:focus-visible, .lb-field select:focus-visible, .lb-head select:focus-visible { outline: 3px solid var(--signal); outline-offset: 1px; }
.lb-row .lb-field { flex: 1 1 220px; }
.lb-row .btn { padding: 10px 18px; }
.btn.small { padding: 7px 14px; font-size: .92rem; }
.btn.danger { border-color: #b3261e; background: #b3261e; color: #fff; }
.lb-link { font: inherit; font-size: .9rem; background: none; border: 0; padding: 4px 2px; color: var(--track); text-decoration: underline; cursor: pointer; }
.lb-link.danger { color: #b3261e; }
.lb-who { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--venster); display: inline-block; }
.lb-more { margin-top: 10px; }
.lb-more summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: .92rem; }
.lb-more[open] summary { margin-bottom: 10px; }
.lb-sure { font-size: .9rem; color: var(--ink); }

.lb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.lb-list > p { grid-column: 1 / -1; margin: 0; }
.lb-table { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.lb-table.turn { border-color: var(--signal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 45%, transparent); }
.lb-table.over { opacity: .75; }
.lb-table.fresh { animation: lb-nieuw 1.6s ease-out 2; }
@keyframes lb-nieuw { 0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--track) 50%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.lb-table-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.lb-table-head b { font-size: 1.05rem; }
.lb-st { font-weight: 700; font-size: .82rem; padding: 2px 10px; border-radius: 99px; background: var(--felt); color: var(--muted); }
.lb-table.turn .lb-st { background: var(--signal); color: #1c1400; }
.lb-seats-line { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-seat { font-size: .86rem; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); }
.lb-seat.you { border-color: var(--track); }
.lb-seat.free { border-style: dashed; color: var(--muted); }
.lb-seat.bot { color: var(--muted); }
.lb-seat small { color: var(--muted); }
.lb-time { margin-left: auto; font-size: .82rem; color: var(--muted); }
.lb-tag { font-weight: 700; font-size: .9rem; color: var(--track); }

.lb-form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; max-width: 46em; display: flex; flex-direction: column; gap: 12px; }
.lb-form > .lb-field { max-width: 24em; }
.lb-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.lb-you { font-size: 1rem; color: var(--ink); padding: 11px 0; }
.lb-check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.lb-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--track); flex: none; }
.lb-form .lb-acts { margin-top: 0; }
.lb-form p { margin: 0; }

@media (max-width: 560px) {
  .lb-box, .lb-form { padding: 14px; }
  .lb-list { grid-template-columns: 1fr; }
}

/* ratings */
.lb-r { font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-tag.lb-rated { font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--track); color: var(--track); vertical-align: 2px; margin-left: 4px; }
.lb-change { margin: 0; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-change.up { color: var(--venster); }
.lb-change.down { color: var(--muted); }
.lb-my-ratings { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; }
.lb-rank { width: 100%; max-width: 46em; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: .95rem; }
.lb-rank th, .lb-rank td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.lb-rank th { font-size: .8rem; color: var(--muted); font-weight: 700; }
.lb-rank tr:last-child td { border-bottom: 0; }
.lb-rank .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-rank tr.you td { background: color-mix(in srgb, var(--track) 10%, transparent); }
#lb-ranks .lb-small { margin: 8px 0 0; }
@media (max-width: 560px) { .lb-rank th, .lb-rank td { padding: 7px 8px; } }

/* notifications */
.lb-push { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .92rem; }

/* people: friends and those you played with */
.lb-sub { font-size: 1rem; margin: 18px 0 8px; }
.lb-people { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.lb-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lb-person .lb-p-name { font-weight: 700; min-width: 8em; }
.lb-person .lb-star { color: var(--signal); }
.lb-person .lb-p-acts { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.lb-table.playing { border-style: dashed; }