/* The lobby (journal 013; specs/lobby.md): its menu's flags and count, Browse's list, Join game's code, the sheets' clock, code and link, and Create game's time rows, as design/lobby*.html draw them. Structure only: every colour, font and radius is a token. */

/* The lobby's menu: the languages of play as flags, the count of players online, Back under the menu */
.lobby__flags { margin: 0; padding: 0; background: none; }
.lobby__count { min-height: 1.4em; margin: 10px 0 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.lobby__back { height: 48px; font-size: var(--font-size-m); }

/* The bar's flag: the lobby's language */
.lobby__bar-flag { display: block; width: 30px; height: 20px; }

/* Browse: a line at the top when a join failed, the games, or none */
.lobby__notice { margin: 0; text-align: center; color: var(--color-danger); font-size: var(--font-size-s); font-weight: 600; }
.lobby__empty { margin: 24px 0 0; text-align: center; color: var(--color-text-muted); }
.lobby__games .match-row__dot { display: none; }

/* A sheet drawn again in place: its content laid out as the sheet's own children */
.sheet__content { display: contents; }
.sheet .choices { margin: 4px 0; }
.choice--sheet { padding: 16px; background: var(--color-surface); }
.choice--sheet .choice__title { font-size: var(--font-size-l); }
.choice--sheet:disabled { color: var(--color-disabled-text); cursor: default; }

/* The waiting sheet's clock; an invitation's code large and its link */
.sheet__clock { margin: 4px 0 0; text-align: center; font-size: var(--font-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.invite__code { margin: 6px 0 0; padding: 16px; border-radius: var(--radius-control); background: var(--color-bg); text-align: center; font-family: var(--font-board); font-size: var(--font-size-xl); letter-spacing: 0.12em; user-select: all; }
.invite__link { margin: 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; user-select: all; }
.invite__copied[hidden] { display: none; }

/* Join game: the lead, the code's six boxes over the field that takes the typing, the line under them */
.page__lead { margin: 24px 0 8px; text-align: center; color: var(--color-text-muted); }
.code { position: relative; display: flex; justify-content: center; gap: 6px; }
.code__char { display: flex; align-items: center; justify-content: center; width: 44px; height: 56px; border-radius: var(--radius-control); background: var(--color-surface); font-family: var(--font-board); font-size: var(--font-size-l); }
.code__char--next { box-shadow: inset 0 0 0 2px var(--color-blue); }
.code__char--refused { box-shadow: inset 0 0 0 2px var(--color-danger); }
.code__gap { width: 10px; }
.code__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: var(--font-size-l); }
.code__note { margin: 10px 0 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-s); }
.code__note--refused { color: var(--color-danger); font-weight: 600; }

/* The invitation, as the setup's summary headed by the inviter */
.proposal--invitation .proposal__title { text-transform: none; letter-spacing: 0; color: var(--color-text); font-size: var(--font-size-m); }
.proposal__tag { color: var(--color-text-muted); font-weight: 400; }

/* Create game's time: two labelled rows, Live and Daily; the Time bonus unavailable under a Daily preset, with its note */
.field__group { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.toggle--unavailable, .toggle--unavailable:disabled { color: var(--color-disabled-text); text-decoration: line-through; box-shadow: none; background: var(--color-bg); cursor: default; }