/* Общий стиль веб-меню. Только CSS: ни растровых фонов, ни новых шрифтов.
   Область .menu-screen задаёт shell (чат подключает её отдельно).
   Цвета игровых canvas и сукна остаются в theme.css и games/*.js. */
:root {
  --menu-bg: #0c1622;
  --menu-panel: #142230;
  --menu-panel-raised: #1a2c3d;
  --menu-ink: #f8efdc;
  --menu-muted: #bbc5cf;
  --menu-brass: #ccb17e;
  --menu-border: #a88a5440;
  --menu-blue: #2e638d;
  --menu-blue-deep: #204a6c;
  --menu-heading: Georgia, 'Times New Roman', serif;
}
:is(.menu-screen, .sheet, .rslt, .prem-panel, .kick-card) {
  --bg: var(--menu-bg);
  --bg-elev: var(--menu-panel);
  --ink: var(--menu-ink);
  --ink-dim: var(--menu-muted);
  --ink-faint: #98a8b8;
  --surface: #ffffff06;
  --surface-strong: #ffffff0e;
  --surface-sunken: #08131f;
  --line: #aabed226;
  --line-strong: #9fb2c04d;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  color: var(--ink);
}
.menu-screen { background: var(--menu-bg); }
.menu-screen .topbar {
  background: var(--menu-bg); border-bottom-color: var(--menu-border);
  backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 64px;
}
.menu-screen .topbar h2 { font: 500 25px/1.15 var(--menu-heading); letter-spacing: -.4px; }
.menu-screen .back-btn { min-width: 40px; min-height: 40px; color: var(--menu-brass); }
.menu-screen .tabbar { background: #0a131e; border-top-color: var(--menu-border); backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-screen .tabbar button { min-height: 64px; padding-top: 10px; font-size: 12px; color: var(--ink-faint); }
.menu-screen .tabbar button .ico { padding: 0 16px; opacity: .65; }
.menu-screen .tabbar button.active { color: var(--menu-ink); }
.menu-screen .tabbar button.active .ico { background: none; opacity: 1; }
.menu-screen .tabbar button.active::before {
  content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px;
  background: var(--menu-brass);
}
:is(.menu-screen, .sheet) .auth-tabs {
  background: none; padding: 0; gap: 16px; border-radius: 0; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
:is(.menu-screen, .sheet) .auth-tabs button {
  min-height: 44px; border-radius: 0; padding: 11px 4px; border-bottom: 2px solid transparent;
  background: none; color: var(--ink-dim); box-shadow: none;
}
:is(.menu-screen, .sheet) .auth-tabs button.active { background: none; color: var(--menu-ink); border-bottom-color: var(--menu-brass); box-shadow: none; }
:is(.menu-screen, .sheet, .rslt, .prem-panel) .btn { border-radius: 5px; min-height: 44px; white-space: normal; line-height: 1.25; }
:is(.menu-screen, .sheet, .rslt, .prem-panel) .btn.primary,
:is(.menu-screen, .sheet, .rslt, .prem-panel) .btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--menu-blue), var(--menu-blue-deep));
  border-color: #6597ba; color: #f8fbff; box-shadow: inset 0 1px 0 #bde7ff30, 0 3px 0 #060d15;
}
:is(.menu-screen, .sheet, .rslt, .prem-panel) .btn.ghost { background: var(--menu-panel); border-color: var(--menu-border); color: #e8cd97; }
:is(.menu-screen, .sheet, .rslt, .prem-panel) .btn.link { background: none; color: #e8cd97; border: 0; box-shadow: none; }
:is(.menu-screen, .sheet, .rslt, .prem-panel) .btn:active:not(:disabled) { transform: translateY(1px); }
:is(.menu-screen, .sheet) .input { border-radius: 5px; min-height: 46px; font-size: 16px; background: #091521; }
:is(.menu-screen, .sheet) .field > label { font-size: 13px; color: #d5d0c6; }
:is(.menu-screen, .sheet, .rslt) :is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #b9e3ff; outline-offset: 3px;
}
.menu-screen .card { box-shadow: none; border-radius: 10px; border-color: var(--menu-border); }
.menu-screen .list { gap: 10px; }
.menu-screen .list-row { border-radius: 8px; border-color: var(--line); padding: 14px 12px; }
.menu-screen .empty { color: var(--ink-dim); padding-block: 36px; line-height: 1.5; }
.menu-screen .chip { border-radius: 4px; }
.menu-screen .scroll { overscroll-behavior: contain; }

/* Лобби: обязательный выбор игры и компактные настройки. */
.menu-screen .lb-tools { gap: 8px; margin-bottom: 16px; }
.menu-screen .lb-tools .btn { font-size: 12px; padding-inline: 10px; }
.menu-screen .lb-games-pane { padding-bottom: 88px; }
.menu-screen .fab { border-radius: 5px; min-height: 48px; left: 16px; right: 16px; bottom: 16px; width: auto; }
.menu-screen .lb-room { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.menu-screen .lb-room > .ico-img { margin-top: 4px; }
.menu-screen .lb-room .lb-room-title { flex-wrap: wrap; gap: 5px 8px; margin-bottom: 5px; }
.menu-screen .lb-room .lb-host { margin-top: 8px; flex-wrap: wrap; gap: 5px; }
.menu-screen .lb-room .lb-host > span { overflow-wrap: anywhere; }
.menu-screen .lb-room > .btn { align-self: center; padding-inline: 12px; }
.menu-screen .trn-lobby { background: var(--menu-panel); border-left: 2px solid var(--menu-brass); }
.menu-screen .trn-lobby .grow > .row { flex-wrap: wrap; row-gap: 6px; }
.menu-screen .casino-enter { color: var(--menu-brass); padding: 12px; font-size: 26px; }

/* Все диалоги, включая создание комнаты, помещаются в телефонную колонку. */
.sheet { background: var(--menu-panel); border-color: var(--menu-border); border-radius: 12px; max-height: min(86dvh, 720px); }
.sheet > * { flex-shrink: 0; }
.sheet.bottom { max-width: 460px; border-radius: 12px 12px 0 0; }
.sheet.full { max-width: 460px; justify-content: flex-start; }
.sheet.bottom::before { background: #b59d7170; }
.sheet h2, .sheet .cr-title { font: 500 25px/1.2 var(--menu-heading); letter-spacing: -.3px; }
.sheet .cr-item {
  width: 100%; font: inherit; color: var(--ink); text-align: left; background: #0c162266;
  border: 1px solid var(--line); border-radius: 6px; min-height: 60px; padding: 14px;
}
.sheet .cr-item:hover { background: var(--menu-panel-raised); border-color: var(--menu-border); }
.sheet .cr-item .small { margin-top: 4px; line-height: 1.45; }
.sheet .cr-item .ico-img { width: 34px; height: 34px; }
.sheet .cr-field { border-radius: 6px; border-color: var(--line-strong); padding-top: 10px; }
.sheet .cr-label { background: var(--menu-panel); color: var(--menu-brass); }
.sheet :is(.cr-arrow, .cr-back) { min-width: 44px; min-height: 44px; color: var(--menu-brass); }
.sheet .cr-val { font-size: 16px; overflow-wrap: anywhere; }
.sheet .cr-summary { border-top: 1px solid var(--menu-border); padding-top: 14px; color: var(--ink-dim); font-size: 13px; line-height: 1.5; }
.sheet .cr-create { border-radius: 5px; position: sticky; bottom: 0; flex-shrink: 0; }
.sheet .qty button { min-width: 40px; min-height: 40px; }

/* Профиль, игроки, инвентарь, задания. Аватары и цвета редкости сохранены. */
.menu-screen :is(.prof-head, .user-head) { background: none; border: 0; border-bottom: 1px solid var(--menu-border); border-radius: 0; padding-bottom: 24px; }
.menu-screen :is(.prof-head, .user-head) h2 { font: 500 28px/1.2 var(--menu-heading); overflow-wrap: anywhere; }
.menu-screen .prof-instats { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.menu-screen .prof-stat { min-width: 0; flex: 1; }
.menu-screen .prof-stat + .prof-stat { border-left: 1px solid var(--line); }
.menu-screen .prof-logout { border-radius: 5px; min-height: 44px; }
.menu-screen .prof-id { min-height: 36px; }
.menu-screen :is(.bonus, .quests) > .row b { font-size: 17px; }
.menu-screen :is(.pass-cell, .quest-row, .bonus-status.timer, .prem-strip, .prem-head) { border-radius: 6px; }
.menu-screen .pass-cell.active { border-color: var(--menu-brass); }
.menu-screen .quests { border-color: var(--menu-border); }
.menu-screen .quest-row { gap: 10px; padding: 12px 10px; }
:is(.menu-screen, .sheet) .coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.menu-screen, .sheet) .coll-card { border-radius: 8px; }
:is(.menu-screen, .sheet) .coll-name { background: #0b1521; border-radius: 0 0 7px 7px; min-height: 40px; }
:is(.menu-screen, .sheet) .coll-card.on { border-color: #a8d4f3; }
.menu-screen .prof-head > .row { flex-wrap: wrap; justify-content: center; }
.menu-screen .prof-id { max-width: 100%; min-width: 0; }
.menu-screen .prof-id .prof-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-screen .pass-cell .pill:not(.off) { background: var(--gold); color: #3a2a05; }
.menu-screen .set-card { border-color: var(--menu-border); }
.menu-screen .set-card h3 { color: var(--menu-ink); font-size: 17px; }
.menu-screen .bubble { background: var(--menu-panel); border-radius: 8px 8px 8px 2px; }
.menu-screen .bubble.mine { background: #214461; color: #f5f1e8; border-color: #5786a65c; border-radius: 8px 8px 2px 8px; }
.menu-screen .bubble.mine .meta { color: #b9cede; }
.menu-screen .bubble.mine .tick.read { color: #e8cd97; }
.menu-screen .bubble.failed { background: #4b232a; border-color: var(--danger); }
.menu-screen .composer { background: var(--menu-bg); border-color: var(--menu-border); }
.menu-screen .composer .chat-input { border-radius: 5px; }
.menu-screen .composer .send { border-radius: 5px; }

/* Турнирные панели и общие окна поверх досок. */
.menu-screen .trb-actions { background: var(--menu-bg); border-color: var(--menu-border); }
.menu-screen .rm-readiness { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.menu-screen .rm-readiness .rm-count { font-size: 22px; color: var(--menu-brass); }
.menu-screen .rm-seat.empty { padding: 0; }
.menu-screen .trb-node { border-radius: 6px; }
.menu-screen .trb-node:has(.trb-seat.me) { border-color: #a8d4f3; }
.menu-screen .trb-seat.me { background: #24425b; }
.menu-screen .trb-seat.me .nm { color: #eaf6ff; }
.menu-screen .trb-seat.empty { padding: 7px 9px; }
.menu-screen .trb-col-title { color: var(--menu-brass); }
.menu-screen .trb-row-me { border-color: #a8d4f3; }
.menu-screen .trb-cta { border-color: var(--menu-border); }
.ntf-card, .toast, .prem-panel { background: var(--menu-panel); color: var(--menu-ink); border-radius: 10px; }
.ntf-card { max-width: 440px; border-color: var(--menu-border); }
.prem-panel { border-color: var(--menu-border); }
.rslt { left: 50%; right: auto; width: min(100%, 460px); transform: translateX(-50%); background: var(--menu-bg); }
.rslt-title { font: 500 36px/1.15 var(--menu-heading); }
.rslt-card { background: var(--menu-panel); border-color: var(--menu-border); border-radius: 10px; }
.rslt :is(.rslt-friend, .rslt-rematch, .rslt-leave) { border-radius: 5px; min-height: 46px; max-width: 100%; }
.rslt-leave { background: linear-gradient(180deg, var(--menu-blue), var(--menu-blue-deep)); border: 1px solid #6597ba; }
.rslt-back, .rslt-bubble, .kick-pill { border-radius: 6px; background: var(--menu-panel); }
.tourn-bar { background: var(--menu-bg); border-color: var(--menu-border); }
.match-screen > .topbar, .match-screen .action-bar, .match-screen .rp-bar { background: var(--menu-bg); border-color: var(--menu-border); }
.match-screen .match-hud { background: #0c1622ed; }
.match-screen .seat { border-radius: 6px; }
.match-screen .action-bar .btn { border-radius: 5px; }
.match-screen .action-bar .btn.primary,
.match-screen .action-bar .btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--menu-blue), var(--menu-blue-deep)); border-color: #6597ba; color: #f8fbff;
}
.menu-screen :is(.roul-panel, .roul-sunken, .roul-chat) { border-radius: 8px; }
@media (max-width: 360px) {
  .menu-screen .topbar h2 { font-size: 23px; }
  .menu-screen .lb-room { grid-template-columns: 30px minmax(0, 1fr); }
  .menu-screen .lb-room > .ico-img { width: 30px; height: 30px; }
  .menu-screen .lb-room > .btn { grid-column: 2; justify-self: start; }
  .menu-screen .pass-cell.active { flex-direction: column; justify-content: center; height: 64px; gap: 3px; padding: 5px; }
  .menu-screen .pass-cell.active .rw { flex: 0 0 auto; }
  :is(.menu-screen, .sheet) .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .rslt, .ntf-card { animation: none !important; }
}
@media (max-height: 650px) {
  .guest-room .rm-game { display: grid; grid-template-columns: 48px auto; text-align: left; gap: 3px 12px; align-items: center; }
  .guest-room .rm-game > .ico-img { grid-row: span 2; width: 48px; height: 48px; }
  .guest-room .rm-game > b { font-size: 24px; }
  .guest-room .rm-wrap { gap: 10px; }
  .guest-room .rm-seats { padding-block: 6px; }
  .guest-room .rm-seat .avatar { width: 44px; height: 44px; }
  .guest-room .rm-code { font-size: 32px; }
}

/* Выбор игры занимает основное содержимое лобби, список раскрывается вертикально. */
.lb-picker-intro { padding: 16px 0 18px; }
.lb-picker-intro h2 { font: 500 29px/1.15 var(--menu-heading); margin: 0 0 10px; }
.lb-picker-intro p { margin: 0; font-size: 14px; line-height: 1.5; max-width: 30ch; }
.lb-game-picker { display: grid; border: 1px solid var(--menu-border); border-radius: 8px; overflow: hidden; background: var(--menu-panel); margin-bottom: 12px; }
.lb-game-option, .lb-selected-game { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--menu-ink); text-align: left; border: 0; background: transparent; cursor: pointer; font: inherit; padding: 12px; min-height: 58px; }
.lb-game-option + .lb-game-option { border-top: 1px solid var(--line); }
.lb-game-option:hover, .lb-game-option[aria-pressed="true"] { background: var(--menu-panel-raised); }
.lb-game-option > span:last-child { color: var(--menu-brass); font-size: 22px; }
.lb-selected-game { padding-inline: 0; gap: 9px; }
.lb-selected-game b { font: 500 23px/1.15 var(--menu-heading); }
.lb-selected-game .small { font-size: 11px; max-width: 6ch; }
.lb-filter-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-block: 1px solid var(--menu-border); }
.lb-filter { flex: 1 1 90px; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: var(--menu-panel); border-radius: 4px; padding: 5px 7px 0; }
.lb-filter > span { color: var(--menu-muted); font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
.lb-filter select { min-width: 0; width: 100%; min-height: 32px; border: 0; background: transparent; color: var(--menu-ink); font: 500 12px/1.2 var(--font); cursor: pointer; color-scheme: dark; }
.lb-filter select option { background: var(--menu-panel); }
.menu-screen .lb-tools { margin-top: 9px; margin-bottom: 14px; gap: 6px; }
.lb-reset { background: none; border: 0; color: var(--menu-brass); cursor: pointer; padding: 8px 0; font: inherit; font-size: 12px; }
.menu-screen .lb-room { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 9px; padding: 12px; background: var(--menu-panel); }
.menu-screen .lb-room > .ico-img { width: 30px; height: 30px; }
.menu-screen .lb-room > .btn { grid-column: 2; justify-self: stretch; margin-top: 3px; min-height: 38px; }
.lb-seats { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--menu-muted); margin-left: auto; }
.lb-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 10px 0; padding-block: 9px; border-block: 1px solid var(--line); }
.lb-params > div { min-width: 0; }
.lb-params dt { color: var(--menu-muted); font-size: 10px; line-height: 1.25; margin-bottom: 2px; }
.lb-params dd { margin: 0; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.cr-progress { display: flex; justify-content: space-between; align-items: center; color: var(--menu-brass); text-transform: uppercase; font-size: 10px; letter-spacing: 1.3px; }
.cr-progress > span { display: flex; gap: 4px; }
.cr-progress i { width: 23px; height: 2px; background: var(--line-strong); }
.cr-progress i.on { background: var(--menu-brass); }
.cr-game-caption { display: flex; align-items: center; gap: 8px; color: var(--menu-muted); font-size: 13px; }
.sheet .cr-wager.selected { border-color: var(--menu-brass); background: #ccb17e0e; }
.cr-choice-mark { font-size: 23px; color: var(--menu-brass); }
.cr-notice { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--menu-muted); margin: 0; padding: 11px 12px; border-left: 2px solid var(--menu-brass); background: #0c162266; }
.cr-notice > svg { flex-shrink: 0; margin-top: 2px; }
.create-game-sheet .cr-title { flex: 1; }

/* Профиль: компактная личная карточка, затем собственное поле блоков. */
.menu-screen .prof-identity { display: flex; align-items: stretch; text-align: left; padding: 12px 0 0; gap: 12px; }
.menu-screen .prof-identity.has-hat { padding-top: 43px; }
.prof-identity-row { display: flex; align-items: center; gap: 14px; }
.prof-identity-row > .hat-wrap { flex-shrink: 0; }
.prof-identity-text { flex: 1; min-width: 0; }
.prof-name { display: flex; align-items: center; gap: 7px; font: 500 25px/1.15 var(--menu-heading); overflow-wrap: anywhere; }
.prof-name b { font-weight: 500; min-width: 0; }
.menu-screen .prof-identity .prof-id { padding: 4px 0; }
.prof-edit { flex: 0 0 40px; width: 40px; height: 44px; border: 1px solid var(--menu-border); border-radius: 5px; color: var(--menu-brass); background: var(--menu-panel); cursor: pointer; }
.prof-description { line-height: 1.5; overflow-wrap: anywhere; }
.prof-share { display: flex; align-items: center; gap: 8px; padding: 9px 12px; min-height: 40px; border: 1px solid var(--menu-border); background: var(--menu-panel); color: var(--menu-brass); border-radius: 5px; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.menu-screen .prof-identity .prof-instats { margin-top: 0; padding-block: 12px; }
.menu-screen .prof-identity .prof-stat { display: grid; grid-template-columns: 24px auto; grid-template-rows: auto auto; justify-content: center; column-gap: 9px; padding: 0 6px; border-radius: 0; }
.prof-identity .prof-stat > .ico-img { grid-row: span 2; }
.prof-identity .prof-stat > b { font-size: 21px !important; line-height: 1.1; }
.prof-identity .prof-stat > .tiny { font-size: 10px; }
.profile-blocks { display: flex; flex-direction: column; gap: 12px; }

/* Морской бой: исключительно внешние панели. Canvas, корабли, кольца и эффекты не меняются. */
.match-screen .bs-dock { background: var(--menu-bg); border-top: 1px solid var(--menu-border); border-radius: 8px 8px 0 0; color: var(--menu-ink); }
.match-screen .bs-grip { background: var(--menu-brass); opacity: .55; }
.match-screen .bs-place-head { background: var(--menu-panel); border: 1px solid var(--menu-border); border-radius: 6px; padding-block: 7px; }
.match-screen .bs-who, .match-screen .bs-pname { color: var(--menu-muted); }
.match-screen .bs-clock { border-radius: 4px; background: var(--menu-panel); border: 1px solid var(--menu-border); color: var(--menu-ink); }
.match-screen .bs-clock.low { color: var(--danger); }
.match-screen .bs-timer { color: var(--menu-brass); }
.match-screen .bs-hint { color: var(--menu-muted); }
.match-screen .bs-dock .btn { border-radius: 5px; min-height: 40px; }
.match-screen .bs-dock .btn.ghost { background: var(--menu-panel); border-color: var(--menu-border); color: var(--menu-brass); }

/* Mobile alignment is explicit: native controls otherwise inherit platform-specific text placement. */
:is(.menu-screen, .sheet, .guest-scene) .btn,
:is(.menu-screen, .sheet) .auth-tabs button { text-align: center; justify-content: center; align-items: center; }
.menu-screen .empty { width: 100%; text-align: center; justify-items: center; }
.menu-screen .empty > :is(div, p, b, h3) { width: 100%; max-width: 30ch; margin-inline: auto; text-align: center; overflow-wrap: anywhere; }
.sheet .cr-row { display: grid; grid-template-columns: 24px 38px minmax(0, 1fr) 38px 24px; gap: 0; }
.sheet .cr-ico { grid-column: 1; display: flex; align-items: center; justify-content: center; }
.sheet .cr-arrow { min-width: 38px; width: 38px; padding: 0; text-align: center; }
.sheet .cr-val { min-width: 0; width: 100%; text-align: center; }
.sheet .cr-field { padding: 9px 10px 5px; }
.sheet .cr-label { font-size: 11px; }

/* A single lobby control panel with quiet secondary actions. */
.lb-filter-area { background: var(--menu-panel); border: 1px solid var(--menu-border); border-radius: 8px; padding: 0 12px; margin-bottom: 16px; }
.lb-filter-area:has(.initial) { background: none; border: 0; padding: 0; }
.lb-selected-game { min-height: 56px; padding-block: 10px; }
.lb-selected-game b { font-size: 22px; }
.lb-game-chevron { color: var(--menu-brass); width: 28px; text-align: center; font-size: 20px; }
.lb-filter-strip { gap: 0; padding: 8px 0; border-color: var(--line); }
.lb-filter { flex: 1 1 85px; padding: 3px 7px; border-radius: 0; background: none; }
.lb-filter + .lb-filter { border-left: 1px solid var(--line); }
.lb-filter > span { min-height: 12px; font-size: 10px; }
.lb-filter select { appearance: none; -webkit-appearance: none; min-height: 32px; font-size: 12px; padding: 0 16px 0 0; background-image: linear-gradient(45deg, transparent 50%, #ccb17e 50%), linear-gradient(135deg, #ccb17e 50%, transparent 50%); background-position: calc(100% - 5px) 50%, 100% 50%; background-size: 5px 5px; background-repeat: no-repeat; text-align: left; }
.menu-screen .lb-tools { margin: 0; gap: 0; min-height: 44px; justify-content: space-between; }
.lb-tool { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px; border: 0; background: none; color: var(--menu-muted); font: 500 12px/1.2 var(--font); text-align: center; cursor: pointer; }
.lb-tool:hover { color: var(--menu-brass); }
.lb-refresh { font-size: 20px; width: 38px; }
.lb-reset { font-size: 11px; min-height: 44px; padding-right: 6px; }
.menu-screen .lb-empty { padding: 30px 10px; gap: 10px; }
.menu-screen .lb-empty b { color: var(--menu-ink); font-size: 16px; font-weight: 500; }
.menu-screen .lb-empty .small { font-size: 13px; line-height: 1.5; }
.menu-screen .lb-room { gap: 5px 9px; padding: 10px; }
.lb-params { gap: 6px 10px; padding-block: 7px; margin-block: 7px; }
.menu-screen .lb-room .lb-host { margin-top: 5px; }
.menu-screen .lb-room .lb-host .avatar { width: 24px; height: 24px; font-size: 10px; }

/* Two clear choices followed by a touch-scroll stake rail. */
.cr-wager-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sheet .cr-wager { flex-direction: column; align-items: center; gap: 5px; min-height: 90px; padding: 12px 8px; text-align: center; }
.cr-wager .cr-choice-mark { font-size: 15px; line-height: 1; }
.cr-wager .small { font-size: 11px; }
.cr-wager .grow { min-width: 0; }
.stake-picker { min-width: 0; padding-block: 10px; border-block: 1px solid var(--menu-border); }
.stake-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--menu-muted); font-size: 12px; margin-bottom: 10px; }
.stake-heading b { color: var(--menu-brass); font-size: 20px; font-variant-numeric: tabular-nums; }
.stake-rail { position: relative; display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 3px 2px 8px; scrollbar-width: thin; scrollbar-color: #a88a5466 transparent; }
.stake-option { flex: 0 0 auto; min-width: 62px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--menu-bg); color: var(--menu-ink); font: 600 14px/1.2 var(--font-num); text-align: center; cursor: pointer; scroll-snap-align: center; }
.stake-option[aria-pressed="true"] { background: #ccb17e; border-color: #f0d39b; color: #13212d; }
.stake-hint { font-size: 10px; line-height: 1.4; color: var(--menu-muted); margin-top: 5px; text-align: center; }
.create-game-sheet { gap: 12px; }
.create-game-sheet .cr-notice { padding: 9px 10px; font-size: 11px; }
.create-game-sheet .form-error:empty { display: none; }
.create-game-sheet .cr-create { margin-top: 4px; }

/* Keep layout measurable while modules, assets and game-specific chrome settle. */
.match-screen { background-color: #0c1622; position: relative; }
.match-screen.board-pending > :not(.board-boot), .match-screen.board-pending > :not(.board-boot) * { visibility: hidden !important; pointer-events: none; }
.board-boot { display: none; }
.board-pending > .board-boot { display: flex; position: absolute; inset: 0; z-index: 40; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: #0c1622; color: #a8b7c6; font-size: 14px; }

.match-screen .mt-loading-card { border-radius: 8px; background: #142230; border-color: #cbb17c38; }