/* 同桌俱乐部：纸张、名牌与竞技记录。覆盖 V1 业务组件，保留原有布局协议。 */
/* Palette lives in theme.css (design tokens). Club names are aliases so the
 * existing component rules below keep working under both themes. */
:root {
  --club-red: var(--accent); --club-green: var(--text-soft); --club-button: var(--accent); --club-button-ink: var(--accent-ink);
  --club-rule: color-mix(in srgb, var(--muted) 35%, transparent);
  --side-w: 232px; --radius: 10px;
  --font-editorial: var(--font-display);
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); line-height: 1.65; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
a { text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--club-red); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 9999; top: -70px; left: 12px; background: var(--panel); color: var(--text); padding: 10px 18px; border: 2px solid var(--club-red); }
.skip-link:focus { top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.btn { min-height: 44px; border-radius: 7px; padding: 9px 16px; transition: background .16s, border-color .16s, box-shadow .16s; }
.btn.primary, html[data-theme] .btn.primary { color: var(--club-button-ink); background: var(--club-button); border-color: var(--club-button); }
.btn.primary:hover, html[data-theme] .btn.primary:hover { background: color-mix(in srgb, var(--club-button), var(--text) 10%); border-color: var(--club-button); }
.btn:active { transform: translateY(1px); }
.btn.sm { min-height: 36px; }
.input { min-height: 44px; }
.input::placeholder { color: var(--muted); opacity: 1; }
.label { color: var(--text-soft); }
.theme-toggle { min-height: 36px; }
.link-btn { min-height: 36px; color: var(--club-red); text-decoration: none; white-space: nowrap; }
.avatar { background-image: none !important; border-radius: var(--avatar-human-radius); }
.avatar.is-bot { border-radius: var(--avatar-agent-radius); }
.topbar { height: 68px; padding: 0 24px; gap: 18px; }
.brand-home { gap: 8px; flex: none; }
.brandmark { background: var(--accent); color: var(--accent-ink); border-radius: 8px; width: 30px; height: 30px; }
.brandname { font-size: 20px; letter-spacing: -.4px; }
.brandname small { display: block; margin: -3px 0 0; font-size: 10px; font-weight: 600; letter-spacing: 2px; }
.club-topnav { display: flex; align-self: stretch; gap: 22px; margin-left: 26px; }
.club-topnav button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 4px 0 0; color: var(--muted); font-size: 13px; white-space: nowrap; }
.club-topnav button:hover, .club-topnav button.active { color: var(--club-red); border-bottom-color: var(--club-red); }
.topright { gap: 12px; }
.room-switcher { display: block; }
.room-switch-trigger { min-height: 36px; }
.avatar-btn { border-radius: 50%; width: 36px; height: 36px; background: var(--club-green); color: var(--bg); }
.sidebar { padding: 24px 12px 16px; background: var(--bg-soft); gap: 18px; }
.side-nav { gap: 6px; }
.side-nav-item { min-height: 44px; border-radius: 6px; font-size: 13px; }
.side-nav-item.active { background: var(--panel); color: var(--club-red); box-shadow: inset 3px 0 var(--club-red); }
.side-nav-item.active .icon { color: var(--club-red); }
.nav-note { margin-left: auto; font-size: 10px; color: var(--muted); font-weight: 400; }
.side-create { font-size: 12px; min-height: 44px; }
.side-rooms { gap: 10px; border-top-color: var(--club-rule); }
.side-search { min-height: 40px; background: transparent; }
.side-filter { min-height: 30px; min-width: 38px; background: var(--panel); }
.side-filter.on { background: var(--club-green); color: var(--bg); border-color: var(--club-green); }
.side-room { min-height: 52px; border-radius: 5px; padding: 8px 5px; }
.side-room-main b { font-weight: 500; font-size: 12px; }
.side-room-icon { background: var(--panel); border-color: var(--line); }
.sidebar-footer { border-top: 1px solid var(--club-rule); padding-top: 9px; display: flex; flex-direction: column; gap: 8px; }
.sidebar-footer .side-nav-item { width: 100%; }
.sidebar-footer a { margin: 0 10px; display: flex; justify-content: space-between; color: var(--text-soft); font-size: 12px; text-decoration: none; }
.sidebar-footer small { margin: 0 10px; font-size: 10px; color: var(--muted); }
.page { padding: 26px 28px 40px; scrollbar-gutter: stable; }
.page-inner { max-width: 1320px; gap: 26px; }
.club-kicker { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); }
.portal-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.portal-heading h1 { font-size: 24px; line-height: 1.4; letter-spacing: -.5px; margin-top: 5px; }
.portal-heading h1 span { font-weight: 400; font-size: 17px; }
.portal-date { font-size: 12px; color: var(--muted); white-space: nowrap; padding-bottom: 3px; }
.club-feature { background: var(--feature-bg); color: var(--feature-text); display: grid; grid-template-columns: 1.8fr 1fr; padding: 23px 32px; border-radius: 10px; position: relative; border-top: 4px solid var(--club-button); }
.feature-label { color: color-mix(in srgb, var(--feature-text) 78%, transparent); font-size: 12px; }
.club-feature h2 { font: 700 32px/1.25 var(--font-editorial); margin: 8px 0 10px; letter-spacing: 0; }
.club-feature h2 br, .club-feature p br { display: none; }
.club-feature p { font-size: 13px; line-height: 1.8; color: color-mix(in srgb, var(--feature-text) 82%, transparent); }
.feature-actions { display: flex; gap: 20px; align-items: center; margin-top: 17px; }
.feature-actions .btn { background: var(--feature-accent); color: #1a0b05; border-color: var(--feature-accent); font-size: 12px; }
.feature-actions .btn:hover { background: color-mix(in srgb, var(--feature-accent), #fff 14%); }
.feature-create { min-height: 44px; background: none; color: var(--feature-text); border: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.feature-create .icon { width: 15px; height: 15px; }
.feature-side { border-left: 1px solid color-mix(in srgb, var(--feature-text) 22%, transparent); padding-left: 36px; margin-left: 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: start; }
.feature-issue { color: color-mix(in srgb, var(--feature-text) 75%, transparent); font: 10px/1.5 var(--font-mono); letter-spacing: 3px; }
.feature-side b { font: 500 23px/1.3 var(--font-editorial); color: var(--feature-accent); letter-spacing: 1px; }
.feature-side > span:last-child { font-size: 11px; color: color-mix(in srgb, var(--feature-text) 75%, transparent); }
.home-games, #home-live, #home-notes, #home-growth { scroll-margin-top: 24px; }
.section-head { align-items: center; margin-bottom: 16px; gap: 10px; }
.section-head h2 { font-size: 17px; letter-spacing: -.2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.section-head h2 small { margin: 0; font-size: 11px; font-weight: 400; color: var(--muted); }
.section-head > .meta { font-size: 11px; white-space: nowrap; }
.quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-main .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-card { min-height: 192px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 17px; gap: 12px; background: var(--panel); }
.quick-card:hover { border-color: var(--club-red); background: var(--panel); box-shadow: 0 3px 0 var(--club-rule); }
.qc-top { justify-content: start; gap: 9px; }
.qc-number { font: italic 23px/1 Georgia, serif; color: var(--club-red); }
.qc-icon { margin-left: auto; width: 32px; height: 32px; border: 0; background: var(--panel-2); color: var(--text); border-radius: 50%; }
.qc-icon .icon { width: 17px; height: 17px; }
.qc-tag { padding: 0; font-size: 10px; border: 0; color: var(--muted); }
.qc-title { font-size: 17px; line-height: 1.5; font-weight: 700; }
.qc-desc { font-size: 11px; line-height: 1.85; color: var(--muted); }
.qc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 5px; padding-top: 10px; margin-top: auto; border-top: 1px solid var(--line); }
.qc-foot > span { font-size: 10px; white-space: normal; }
.qc-go { font-weight: 700; color: var(--club-red); display: inline; }
.quick-card.featured { background: var(--bg-soft); border-color: var(--line-strong); }
.quick-card.featured .qc-icon { background: var(--club-green); color: var(--bg); }
.home-columns { grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; }
.home-main, .home-aside { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.home-aside { gap: 18px; }
.community-discovery { min-width: 0; }
.discovery-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.community-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 12px; }
.community-search .icon { width: 17px; height: 17px; color: var(--muted); flex: none; }
.community-search:focus-within { outline: 2px solid var(--club-red); outline-offset: 1px; }
.community-search input { min-height: 44px; min-width: 0; width: 100%; color: var(--text); font-size: 12px; border: 0; background: none; outline: none; }
.community-search input:focus-visible { outline: none; }
.community-search input::placeholder { color: var(--muted); }
.discovery-select { min-height: 44px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); border-radius: 6px; font-size: 11px; padding: 0 8px; }
.discovery-types { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line-strong); }
.discovery-types button { min-height: 44px; border: 0; border-bottom: 3px solid transparent; padding: 5px 13px 8px; background: none; font-size: 12px; color: var(--muted); }
.discovery-types button:hover { color: var(--text); background: var(--panel); }
.discovery-types button.on { border-bottom-color: var(--club-red); color: var(--club-red); font-weight: 700; }
.discovery-stage { padding: 12px 0; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 10px; }
.discovery-stage select { min-height: 36px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text-soft); padding: 0 6px; font-size: 10px; }
.discovery-stage small { margin-left: auto; font-size: 9px; }
.community-room { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 55px 52px; align-items: center; gap: 12px; padding: 16px 12px; min-height: 83px; width: 100%; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--text); background: var(--panel); }
.community-room:first-child { border-radius: 7px 7px 0 0; }
.community-room:last-child { border-radius: 0 0 7px 7px; }
.community-room:hover { background: var(--panel-2); box-shadow: inset 3px 0 var(--club-red); }
.community-room-icon { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 7px; display: grid; place-items: center; background: var(--panel-2); color: var(--mint); }
.community-room-icon.type-debate { color: var(--club-red); }
.community-room-icon.type-collab { color: var(--amber); }
.community-room-icon .icon { width: 18px; height: 18px; }
.community-room-name { min-width: 0; }
.community-room-name b { font-size: 14px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-room-name > small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.recent-message { color: var(--mint); margin-left: 6px; white-space: nowrap; }
.community-stage { padding: 2px 7px; font-size: 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); white-space: nowrap; }
.community-stage.amber { color: var(--amber); background: var(--amber-wash); border-color: color-mix(in srgb, var(--amber), transparent 65%); }
.community-stage.mint { color: var(--mint); background: var(--mint-wash); border-color: color-mix(in srgb, var(--mint), transparent 65%); }
.community-members { font: 600 17px/1.2 Georgia, serif; text-align: center; }
.community-members small { display: block; font: 9px/1.8 "Microsoft YaHei", sans-serif; color: var(--muted); }
.community-room-go { color: var(--club-red); font-size: 11px; white-space: nowrap; text-align: right; }
.community-more { text-align: center; margin-top: 10px; }
.community-more:empty { display: none; }
.community-more .btn { font-size: 12px; }
.discovery-empty { text-align: center; padding: 36px 18px; border: 1px dashed var(--line-strong); border-radius: 7px; }
.discovery-empty > .icon { width: 27px; height: 27px; color: var(--club-red); margin-bottom: 10px; }
.discovery-empty h3 { font-size: 17px; }
.discovery-empty p { color: var(--muted); font-size: 12px; margin: 9px 0 17px; }
.lobby-panel { border-radius: 8px; border-color: var(--line); background: var(--panel); }
.lobby-panel-head { min-height: 48px; padding: 12px 16px; }
.lobby-panel-head h2 { font-size: 14px; }
.lobby-empty { padding: 18px 16px; }
.lobby-empty-copy b { font-size: 13px; }
.lobby-empty-copy small { font-size: 11px; }
.lobby-mine-card { min-height: 65px; border-radius: 6px; }
.lobby-mine-list { grid-template-columns: minmax(0, 1fr); }
.community-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.community-note { display: flex; flex-direction: column; min-width: 0; min-height: 180px; text-align: left; padding: 16px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel-2); color: var(--text); }
.community-note:hover { border-color: var(--club-red); }
.note-type { display: flex; justify-content: space-between; color: var(--club-red); font-size: 10px; margin-bottom: 16px; }
.community-note > b { font-size: 14px; overflow-wrap: anywhere; }
.community-note p { font-size: 11px; color: var(--muted); margin: 8px 0 16px; overflow-wrap: anywhere; }
.community-note > small { font-size: 9px; color: var(--muted); margin-top: auto; }
.community-note-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed var(--line-strong); }
.community-note-empty p { font-size: 12px; color: var(--muted); margin: 8px 0 16px; }
.club-invitation { border-top: 2px solid var(--club-green); padding: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.club-invitation > span { color: var(--club-red); }
.club-invitation .icon { width: 24px; height: 24px; }
.club-invitation h2 { font-size: 16px; font-family: var(--font-editorial); }
.club-invitation p { color: var(--muted); font-size: 11px; margin-top: 5px; }
.club-invitation .btn { margin-left: auto; font-size: 11px; }
.side-card { border-radius: 8px; padding: 18px; border-color: var(--line-strong); }
.side-card-head { gap: 8px; }
.side-card-head h2 { font-size: 14px; }
.panel-caption { font-size: 10px; color: var(--muted); margin: 5px 0 14px; }
.player-card { border-top: 3px solid var(--club-green); }
.player-card-head { display: flex; justify-content: space-between; align-items: center; }
.player-card-head .club-kicker { font-size: 10px; letter-spacing: .5px; }
.player-profile { font-size: 10px; color: var(--muted); text-decoration: none; padding: 5px 0; }
.player-identity { display: flex; align-items: center; gap: 11px; margin-top: 16px; min-width: 0; }
.player-identity > div { min-width: 0; }
.player-identity h3 { font-size: 15px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-identity small { font-size: 10px; color: var(--muted); }
.player-identity .avatar { width: 40px; height: 40px; font-size: 18px; }
.player-points { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 12px; }
.player-points strong { font: 400 45px/1 Georgia, serif; }
.player-points > span { font-size: 11px; color: var(--muted); }
.player-points .icon { margin-left: auto; color: var(--amber); width: 26px; height: 26px; align-self: center; }
.tier-track { height: 5px; border-radius: 0; background: var(--panel-3); overflow: hidden; }
.tier-track > span { display: block; height: 100%; background: var(--amber); transition: width .3s; }
.tier-next { font-size: 10px; color: var(--muted); margin-top: 8px; }
.tier-next b { color: var(--text); }
.player-record { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; margin: 16px 0; }
.player-record > span { font-size: 10px; color: var(--muted); text-align: center; }
.player-record b { display: block; font-size: 16px; color: var(--text); font-weight: 600; }
.player-card > .btn { width: 100%; justify-content: space-between; font-size: 11px; }
.player-card > .btn .icon { transform: rotate(-90deg); width: 14px; height: 14px; }
.journey-count { font: italic 15px/1 Georgia, serif; color: var(--club-red); }
.journey-list { display: flex; flex-direction: column; gap: 4px; }
.journey-item { width: 100%; min-height: 61px; border: 0; border-top: 1px solid var(--line); background: transparent; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--text); padding: 12px 0; }
.journey-item:hover { background: var(--panel-2); }
.journey-step { min-width: 25px; font: italic 18px/1 Georgia, serif; color: var(--club-red); }
.journey-item.done .journey-step { font-size: 16px; font-style: normal; color: var(--mint); }
.journey-item b { display: block; font-size: 12px; }
.journey-item small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.journey-arrow { margin-left: auto; color: var(--muted); font-size: 13px; }
.top-row { min-height: 58px; padding: 11px 0; gap: 9px; }
.top-row-name { min-width: 0; }
.top-row-name a { color: var(--text); text-decoration: none; }
.top-row-name a:hover { text-decoration: underline; }
.top-row-name b { max-width: 112px; font-size: 12px; }
.top-row .pts { font: 17px/1 Georgia, serif; }
.top-row .tier-chip { font-size: 9px; }
.lobby-roster-row { gap: 5px; }
.lobby-roster-who b { font-size: 11px; }
.lobby-roster-foot p { font-size: 10px; }
.lobby-roster-foot .btn { width: 100%; }
.home-help { background: var(--panel-2); }
.home-help b { font-family: var(--font-editorial); font-size: 13px; }
.home-help p { font-size: 11px; color: var(--muted); }
.home-help a { font-size: 11px; color: var(--club-red); }
.modal-mask { padding: 18px; }
.modal.card { border-radius: 10px; border-top: 4px solid var(--club-red); max-height: calc(100dvh - 36px); overflow-y: auto; }
.modal h3 { font: 700 23px/1.4 var(--font-editorial); margin-bottom: 14px; }
.modal .label { margin-top: 10px; }
.modal .opp-opt { min-height: 90px; background: var(--panel-2); border-radius: 7px; }
.modal .opp-opt.selected { background: var(--mint-wash); border-color: var(--mint); }
.modal-actions { padding-top: 16px; }
.room-title, .room-name { font-family: inherit; }
.room-header { border-bottom-color: var(--line-strong); }
.room-grid { padding-top: 12px; }
.msg { border-radius: 8px; }
.composer { background: var(--panel); }
.composer textarea { min-height: 52px; }
.composer .btn { min-width: 44px; }
.lb-head h1 { font: 700 30px/1.3 var(--font-editorial); }
.podium-card { border-radius: 8px; border-color: var(--line-strong); }
.podium-card.p1 { border-color: var(--amber); background: var(--amber-wash); }
.lb-table-wrap { border-radius: 8px; }
.ach { border-radius: 6px; background: var(--panel-2); }
.ach.done { border-color: var(--amber); }
.auth-card { width: 100%; }
.layout { overflow: clip; }
.main { overflow: clip; }
.club-welcome { min-height: 100dvh; background: var(--bg); }
.welcome-header { max-width: 1240px; margin: 0 auto; min-height: 94px; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line-strong); }
.welcome-brand { font-size: 32px; font-weight: 800; letter-spacing: -1px; text-decoration: none; color: var(--text); }
.welcome-brand span { display: inline-block; margin-left: 14px; font-size: 11px; font-weight: 500; letter-spacing: 1px; color: var(--muted); }
.welcome-header > div { display: flex; align-items: center; gap: 24px; }
.welcome-header > div > a { font-size: 12px; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 4px; }
.welcome-header > div > a .icon { width: 15px; height: 15px; transform: rotate(-90deg); }
.welcome-main { max-width: 1176px; padding: 55px 32px 36px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 42px 72px; align-items: center; }
.welcome-story > .club-kicker { color: var(--club-red); font-size: 12px; letter-spacing: 2px; }
.welcome-story h1 { font: 700 66px/1.25 var(--font-editorial); letter-spacing: 1px; margin: 20px 0 22px; }
.welcome-story h1 span { color: var(--club-red); }
.welcome-intro { font-size: 14px; color: var(--text-soft); line-height: 2; }
.welcome-guest { min-height: 50px; min-width: 235px; margin-top: 28px; justify-content: space-between; }
.welcome-guest-note { color: var(--muted); font-size: 10px; line-height: 1.9; margin-top: 12px; }
.welcome-ways { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 34px; }
.welcome-ways span { font: italic 15px Georgia, serif; color: var(--club-red); }
.welcome-ways b { font: 500 11px "Microsoft YaHei", sans-serif; color: var(--text); margin-left: 7px; }
.welcome-main .auth-card { margin: 0; background: var(--panel); padding: 28px; border-color: var(--line-strong); border-top: 4px solid var(--club-green); border-radius: 8px; }
.auth-club-label { font-size: 11px; color: var(--club-red); display: flex; justify-content: space-between; }
.auth-club-label > span { font-size: 19px; }
.welcome-main .auth-card h2 { font: 700 24px/1.5 var(--font-editorial); margin-top: 10px; }
.welcome-main .auth-sub { margin: 7px 0 22px; font-size: 11px; text-align: left; }
.welcome-main .tabs { margin-bottom: 22px; padding: 4px; }
.welcome-main .tabs button { min-height: 40px; }
.welcome-main .label { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 11px; }
.welcome-main .label > span { color: var(--muted); font-weight: 400; }
.welcome-main .input { margin-bottom: 19px; font-size: 12px; width: 100%; background: var(--bg); }
.welcome-main .auth-err { min-height: 20px; margin-bottom: 9px; color: var(--coral); font-size: 11px; }
.welcome-main form > .btn { width: 100%; justify-content: space-between; }
.auth-footnote { font-size: 9px; color: var(--muted); text-align: center; padding-top: 18px; }
.welcome-game-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: 7px; }
.welcome-game-strip > a { min-height: 90px; padding: 16px 20px; text-decoration: none; display: flex; align-items: center; gap: 12px; border-right: 1px solid var(--line-strong); color: var(--text); }
.welcome-game-strip > a:last-child { border-right: 0; }
.welcome-game-strip > a:hover { background: var(--panel); }
.welcome-game-no { color: var(--club-red); font: italic 25px/1 Georgia, serif; }
.welcome-game-strip b { font-size: 13px; font-weight: 600; display: block; }
.welcome-game-strip small { font-size: 9px; color: var(--muted); display: block; margin-top: 5px; }
.welcome-game-strip .icon { width: 20px; height: 20px; margin-left: auto; color: var(--muted); }
.welcome-footer { max-width: 1176px; margin: 0 auto; padding: 0 32px 30px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.welcome-footer a { color: var(--muted); text-decoration: none; }
@media (min-width: 1600px) { .club-feature { padding-top: 26px; padding-bottom: 26px; } .club-feature h2 { font-size: 40px; } }
@media (max-width: 1230px) {
  .club-topnav { gap: 16px; margin-left: 12px; }
  .club-topnav button { font-size: 12px; }
  .topbar { gap: 12px; padding: 0 18px; }
  .room-switch-trigger { max-width: 160px; }
  .home-columns { grid-template-columns: minmax(0, 1fr) 245px; gap: 18px; }
  .community-room { grid-template-columns: 32px minmax(0, 1fr) 50px 40px; gap: 9px; padding: 14px 10px; }
  .community-room-icon { width: 32px; height: 32px; }
  .community-stage { grid-column: 2; grid-row: 2; justify-self: start; }
  .community-room-name { grid-column: 2; }
  .community-members { grid-column: 3; grid-row: 1 / 3; }
  .community-room-go { grid-column: 4; grid-row: 1 / 3; }
  .community-room-icon { grid-row: 1 / 3; }
  .discovery-types button { padding-left: 10px; padding-right: 10px; }
  .discovery-stage small { max-width: 120px; text-align: right; }
  .community-notes { grid-template-columns: 1fr; }
  .community-note { min-height: auto; }
  .community-note p { margin-bottom: 12px; }
}
@media (max-width: 1050px) {
  :root { --side-w: 190px; }
  .club-topnav { gap: 15px; margin-left: 10px; }
  .club-topnav button:last-child { display: none; }
  .theme-toggle span { display: none; }
  .home-columns { grid-template-columns: minmax(0, 1fr); }
  .home-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-card { min-height: 175px; }
  .feature-side { padding-left: 24px; }
  .feature-side b { font-size: 24px; }
  .club-feature { padding: 24px; }
  .club-feature h2 { font-size: 38px; }
  .feature-side > span:last-child { max-width: 140px; }
  .community-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .community-room { grid-template-columns: 38px minmax(0, 1fr) auto 55px 52px; gap: 12px; }
  .community-room-name, .community-room-icon, .community-members, .community-room-go, .community-stage { grid-column: auto; grid-row: auto; }
  .welcome-main { gap: 36px; grid-template-columns: minmax(0, 1fr) 340px; }
  .welcome-story h1 { font-size: 52px; }
  .welcome-game-strip > a { padding: 16px 12px; gap: 9px; }
  .welcome-game-strip .icon { display: none; }
}
@media (max-width: 767px) {
  .topbar { height: 60px; padding: 0 12px; gap: 10px; }
  .brandname { font-size: 21px; }
  .brandname small, .club-topnav { display: none; }
  .brandmark { display: none; }
  .topright { gap: 8px; min-width: 0; }
  .theme-toggle { width: 36px; padding: 0; justify-content: center; }
  .room-switch-trigger { max-width: 140px; font-size: 11px; }
  .icon-btn { width: 36px; height: 36px; }
  .sidebar { padding: 20px 14px; overflow-y: auto; overscroll-behavior: contain; }
  .side-nav, .side-create, .sidebar-footer { flex-shrink: 0; }
  .side-rooms { min-height: 270px; }
  .side-list { min-height: 90px; }
  .side-filter { min-height: 36px; }
  .side-room { min-height: 57px; }
  .page { padding: 20px 16px 30px; scrollbar-gutter: auto; }
  .page-inner { gap: 23px; }
  .portal-heading h1 { font-size: 22px; }
  .portal-heading h1 span { display: none; }
  .portal-date { font-size: 10px; }
  .club-feature { padding: 26px; grid-template-columns: 1fr; border-radius: 7px; }
  .club-feature h2 { font-size: 32px; line-height: 1.25; margin: 12px 0; }
  .club-feature h2 br { display: block; }
  .club-feature p { font-size: 11px; }
  .feature-side { display: none; }
  .feature-actions { gap: 16px; margin-top: 22px; }
  .feature-actions .btn { padding: 9px 12px; }
  .feature-create { font-size: 11px; }
  .section-head h2 { font-size: 17px; gap: 3px; flex-direction: column; }
  .section-head h2 small { font-size: 10px; }
  .section-head { margin-bottom: 13px; }
  .section-head .link-btn { font-size: 11px; }
  .quick-grid { gap: 10px; }
  .quick-card { min-height: 203px; padding: 14px; gap: 10px; }
  .qc-title { font-size: 15px; }
  .qc-tag { font-size: 9px; }
  .qc-top { gap: 7px; }
  .qc-number { font-size: 21px; }
  .qc-icon { width: 27px; height: 27px; }
  .qc-icon .icon { width: 15px; height: 15px; }
  .qc-desc { font-size: 11px; line-height: 1.8; }
  .qc-go { display: inline; }
  .qc-foot { flex-direction: column; align-items: start; gap: 4px; }
  .qc-foot > span { font-size: 10px; }
  .home-aside { display: flex; }
  .home-aside > * { width: 100%; }
  .community-search { padding: 0 9px; }
  .community-search input { font-size: 11px; }
  .discovery-toolbar { gap: 8px; margin-bottom: 8px; }
  .discovery-select { max-width: 90px; padding: 0 4px; font-size: 10px; }
  .discovery-types { flex-wrap: nowrap; gap: 0; justify-content: space-between; }
  .discovery-types button { padding: 7px 6px; font-size: 11px; }
  .discovery-stage { gap: 6px; padding: 9px 0; }
  .discovery-stage small { font-size: 9px; max-width: 130px; }
  .community-room { grid-template-columns: 32px minmax(0, 1fr) 43px 35px; gap: 8px; padding: 13px 10px; }
  .community-room-icon { width: 32px; height: 32px; grid-row: 1 / 3; }
  .community-room-name { grid-column: 2; }
  .community-room-name b { font-size: 13px; }
  .community-room-name > small { font-size: 11px; }
  .recent-message { display: block; margin: 2px 0 0; }
  .community-stage { grid-column: 2; grid-row: 2; font-size: 11px; justify-self: start; }
  .community-members { grid-column: 3; grid-row: 1 / 3; font-size: 16px; }
  .community-room-go { grid-column: 4; grid-row: 1 / 3; font-size: 10px; }
  .community-members small { font-size: 9px; }
  .community-notes { grid-template-columns: minmax(0, 1fr); }
  .community-note { padding: 16px; }
  .community-note .note-type { margin-bottom: 11px; }
  .club-invitation { gap: 12px; }
  .club-invitation > div { flex: 1; min-width: 220px; }
  .club-invitation .btn { margin-left: 0; width: 100%; }
  .m-bottomnav { height: auto; min-height: 66px; padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  .m-navitem { min-height: 50px; border-radius: 6px; font-size: 10px; }
  .m-navitem.active { color: var(--club-red); background: var(--coral-wash); }
  .modal-mask { padding: 12px; }
  .modal.card { max-height: calc(100dvh - 24px); padding: 20px; width: 100%; }
  .modal h3 { font-size: 22px; }
  .modal-actions .btn { min-height: 44px; }
  .room-grid { padding-top: 10px; }
  .welcome-header { min-height: 74px; padding: 0 20px; }
  .welcome-brand { font-size: 27px; }
  .welcome-brand span { display: none; }
  .welcome-header > div { gap: 14px; }
  .welcome-main { grid-template-columns: minmax(0, 1fr); padding: 34px 20px 28px; gap: 30px; }
  .welcome-story h1 { font-size: 48px; margin-top: 15px; }
  .welcome-intro { font-size: 12px; }
  .welcome-story > .club-kicker { font-size: 10px; }
  .welcome-guest { margin-top: 23px; width: 100%; }
  .welcome-guest-note { font-size: 9px; }
  .welcome-ways { margin-top: 25px; gap: 20px; }
  .welcome-main .auth-card { padding: 24px; }
  .welcome-game-strip { grid-template-columns: 1fr 1fr; }
  .welcome-game-strip > a { min-height: 85px; padding: 16px 12px; }
  .welcome-game-strip > a:nth-child(2) { border-right: 0; }
  .welcome-game-strip > a:nth-child(-n+2) { border-bottom: 1px solid var(--line-strong); }
  .welcome-game-strip b { font-size: 11px; }
  .welcome-game-strip small { font-size: 8px; }
  .welcome-game-no { font-size: 21px; }
  .welcome-footer { padding: 0 20px 24px; font-size: 9px; flex-wrap: wrap; }
}
@media (max-width: 359px) {
  .topbar { padding: 0 10px; gap: 6px; }
  .brandname { font-size: 18px; }
  .icon-btn { width: 32px; height: 36px; }
  .topright { gap: 4px; }
  .room-switch-trigger { max-width: 82px; padding: 0 6px; gap: 4px; }
  .room-switch-mobile { font-size: 10px; }
  .topbar .theme-toggle { width: 28px; }
  .topbar .avatar-btn { width: 28px; height: 32px; }
  .topbar .wallet-chip { padding: 0 5px; gap: 0; min-height: 32px; font-size: 0; }
  .topbar .wallet-chip b { font-size: 11px; }
  .topbar .wallet-chip::after { content: " T"; font-size: 9px; }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-card { min-height: 175px; }
  .feature-actions { flex-wrap: wrap; gap: 4px; }
  .discovery-types button { padding: 7px 4px; font-size: 10px; }
  .community-room { grid-template-columns: minmax(0, 1fr) 40px 34px; }
  .community-room-icon { display: none; }
  .community-room-name, .community-stage { grid-column: 1; }
  .community-members { grid-column: 2; }
  .community-room-go { grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Sprint 2 lobby: quick-match action under featured cards, bot warm-up card, tiered game chooser */
.quick-card-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.quick-card-wrap > .quick-card { flex: 1; }
.quick-match-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: var(--text-sm, .85rem); font-weight: 600; cursor: pointer; }
.quick-match-btn:hover, .quick-match-btn:focus-visible { border-color: var(--club-red); color: var(--club-red); }
.quick-match-btn:disabled { opacity: .55; cursor: progress; }
.quick-match-btn .icon { width: 15px; height: 15px; }
.quick-card.warmup { background: transparent; border-style: dashed; }
.game-tier { display: grid; gap: 8px; margin: 0 0 10px; }
.game-tier-title { margin: 4px 0 0; font-size: var(--text-xs, .75rem); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.game-tier-labs { border-top: 1px solid var(--line); padding-top: 8px; }
.game-tier-labs > summary { cursor: pointer; font-size: var(--text-xs, .75rem); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding: 4px 0; }
.game-tier-labs > summary small { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.game-tier-labs[open] > summary { margin-bottom: 8px; }
.labs-tag { display: inline-flex; align-items: center; margin: 2px 0; padding: 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--amber, #d9a441) 40%, var(--line)); color: var(--amber, #d9a441); font-size: var(--text-xs, .72rem); font-weight: 600; line-height: 1.5; width: max-content; }
.labs-banner { margin: 0 0 8px; }