/* Social hub v2. The existing Warm Monochrome tokens remain the single palette. */
.top-in { max-width:1328px; width:100%; gap:20px; }
.top .brand { gap:10px; }
.top .brand-mark { width:36px; height:36px; }
.top .wordmark { --wm:22px; }
.top .nav-item { padding:0 10px; }
.top-tools { margin-left:auto; }
.hub-layout { position:relative; z-index:1; display:grid; grid-template-columns:264px minmax(0,1fr); gap:32px; max-width:1328px; margin:auto; padding:40px 24px 64px; }
.hub-content { min-width:0; }
.hub-content .hub, .hub-content .lobby { width:100%; max-width:none; padding:0; margin:0; }
.hub-content .hub-head { align-items:center; gap:20px; margin-bottom:28px; }
.hub-title h1 { font-size:40px; letter-spacing:-.025em; text-shadow:none; }
.hub-title .lead { font-size:15px; margin-top:10px; }
.hub-content .rooms-head { display:none; }
.hub-content .rooms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; background:none; box-shadow:none; }
/* Cards side by side share their rows (subgrid): name, mode, creator, seats and the footer stand on the same lines in
   both columns even when one card's name or rules take two lines (owner, 2026-10-23: «на разных уровнях»). */
.hub-content .room { display:grid; grid-row:span 5; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr); row-gap:8px; contain:none; align-items:start; min-width:0; padding:20px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); }
.hub-content .room.skeleton { min-height:248px; }
.hub-content .room > * { grid-column:1; grid-row:auto; }   /* the list layout's grid placements do not apply to cards */
.hub-content .room h3 { font-size:21px; line-height:1.3; }
.hub-content .room-top { display:flex; justify-content:space-between; }
.hub-content .room-top .lock { font-size:0; }
.hub-content .room-top .lock svg { width:17px; height:17px; }
.hub-content .host { font-size:13px; }
.hub-content .seats { display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }
.hub-content .status { flex:1; font-size:13px; }
/* One row of seats on the same five columns in every card (the most a room has): people and free places never wrap
   into a ragged second row, and avatars of neighbouring cards stand under each other (owner, 2026-10-23). */
.hub-content .seats-row { order:3; flex-basis:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px 6px; margin:4px 0 12px; }
.room-person { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; text-align:center; font-size:12px; }
.room-person > span:last-child { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-person .av { width:42px; height:42px; margin:0; font-size:19px; box-shadow:none; }
.room-person.out { opacity:.6; }
.room-person.free-seat { border-radius:var(--r-s); color:var(--muted); }
.room-person.free-seat .av.empty { color:var(--muted); }
.free-seat svg { width:17px; height:17px; }
.room-person:disabled { cursor:default; }
.hub-content .room .count { margin:0; font-size:14px; height:auto; }
.hub-content .room-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:12px; align-self:end; }
.hub-content .rules { display:block; font-size:12px; line-height:1.7; }
.hub-content .rules span { white-space:normal; }
.hub-content .rules span:nth-child(n+3) { display:none; }
.hub-content .room .btn { height:44px; min-width:88px; padding:0 16px; flex:none; }
.hub-content .empty-state { min-height:380px; align-content:center; }
.hub-sidebar { min-width:0; }
.sidebar-section { padding:22px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); margin-bottom:20px; }
.section-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:16px; }
.section-line h2 { font-size:19px; margin:0; font-weight:500; }
.muted { color:var(--muted); }
p.muted { font-size:14px; line-height:1.6; margin:8px 0 16px; }
.text-link { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:4px; font-size:14px; padding:4px 0; }
.text-link:hover { text-decoration-color:var(--ink); }
.quest-tabs { display:flex; width:100%; margin-bottom:6px; }
.quest-tabs button { flex:1; min-height:36px; }
.quest-tabs button[aria-pressed="true"] { color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); }
.quest { padding:18px 0; border-bottom:1px solid var(--line); }
.quest:last-child { border-bottom:0; padding-bottom:0; }
.quest-name { display:flex; gap:8px; justify-content:space-between; font-size:14px; line-height:1.5; }
.quest-done { font-size:12px; color:var(--good); }
.quest-values { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:8px; }
.quest-values b { color:var(--ink); }
.quest progress { display:block; width:100%; height:5px; margin:8px 0; border:0; border-radius:1px; background:var(--surface-3); appearance:none; }
.quest progress::-webkit-progress-bar { background:var(--surface-3); border-radius:1px; }
.quest progress::-webkit-progress-value { background:var(--ink); border-radius:1px; }
.quest progress::-moz-progress-bar { background:var(--ink); }
.quest.complete progress::-webkit-progress-value { background:var(--teal); }
.quest small { font-size:12px; }
/* the background pattern of every main screen: crisp track cells on one grid (static/hub/ambient.js) */
.ambient-cells { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.hub-content .lobby { border:1px solid var(--line-2); border-radius:var(--r-l); padding:24px; background:var(--surface); margin-bottom:40px; }
.hub-content .lobby-head { gap:12px; margin:16px 0 24px; }
.hub-content .lobby-head h1 { font-size:30px; text-shadow:none; }
.hub-content .lobby-grid { display:flex; flex-direction:column; gap:24px; }
.hub-content .lobby-main, .hub-content .lobby-side { width:100%; min-width:0; }
.hub-content .lobby .panel { min-width:0; background:transparent; box-shadow:none; border-radius:0; padding:0; }
.hub-content .lobby-side { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.hub-content .seat-grid { grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
.hub-content .seat { min-height:144px; padding:20px 8px 16px; }
.hub-content .seat .av { width:48px; height:48px; font-size:24px; }
.hub-content .lobby .actionbar { position:static; margin:24px 0 0; padding:20px 0 0; background:transparent; }
.hub-content .lobby .actionbar .btn.big { min-width:140px; font-size:15px; }
.hub-content .lobby .back { margin:0; }
.hub-content .lobby .rule-row { gap:8px; }
.community-page { position:relative; width:min(1080px,100%); margin:auto; padding:40px 24px 80px; min-height:70dvh; }
.page-heading { margin-bottom:32px; }
.page-heading h1 { font:500 40px/1.2 var(--ui); letter-spacing:-.025em; margin:0; text-wrap:balance; }
.page-heading p { margin:12px 0 0; }
.profile-identity { display:flex; align-items:center; gap:20px; padding:28px 0; border-block:1px solid var(--line); }
.profile-identity .profile-avatar { width:80px; height:80px; font-size:36px; box-shadow:none; }
.profile-identity h2 { font-size:28px; margin:0; overflow-wrap:anywhere; }
.profile-identity p { margin:8px 0 0; }
.profile-identity p.handle { margin:4px 0 0; color:var(--muted); font-size:15px; overflow-wrap:anywhere; }
.profile-identity p.handle + p { margin-top:2px; }
.presence .handle { margin-left:4px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.presence .handle::before { content:'·'; margin-right:6px; }
.profile-identity > .btn { margin-left:auto; }
.profile-columns { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px; }
.profile-section { margin-top:36px; min-width:0; }
.profile-section h2 { margin:0 0 18px; font-size:21px; font-weight:500; }
.profile-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; }
.profile-stats > div { display:flex; flex-direction:column-reverse; gap:8px; }
.profile-stats dt { font-size:13px; color:var(--muted); }
.profile-stats dd { margin:0; font-size:32px; line-height:1.2; }
.profile-quests { margin-top:24px; }
.profile-quests h3 { font-weight:500; font-size:15px; margin:0; }
.person-row { display:flex; gap:12px; align-items:center; min-height:76px; padding:12px 0; border-bottom:1px solid var(--line); }
.person-row:last-child { border-bottom:0; }
.person-row > .av { width:40px; height:40px; font-size:18px; box-shadow:none; }
.person-info { min-width:0; flex:1; }
.person-info > a { display:block; width:fit-content; max-width:100%; overflow-wrap:anywhere; font-size:15px; }
.presence { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; margin-top:3px; }
.online-cell, .offline-cell { display:block; width:6px; height:6px; border-radius:1px; background:var(--teal); }
.offline-cell { background:transparent; border:1px solid var(--muted); }
.person-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.person-actions .btn { min-height:44px; }
.sidebar-section .person-row { min-height:64px; }
.sidebar-section .person-actions:empty { display:none; }
.friend-search { display:flex; align-items:flex-end; gap:12px; max-width:640px; }
.friend-search label { flex:1; min-width:0; }
.friend-search .btn { height:46px; }
.search-results:empty { display:none; }
.search-results { margin:24px 0; }
.inventory-empty { display:flex; align-items:center; gap:20px; padding:24px 0; }
.inventory-empty p { margin:0 0 8px; }
.empty-slot { display:block; width:64px; height:72px; border:1px dashed var(--line-2); border-radius:var(--r-s); flex:none; }
.market-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:400px; text-align:center; gap:24px; }
.market-empty h2 { font-size:26px; font-weight:400; max-width:26ch; margin:0; text-wrap:balance; }
.market-cell { width:80px; height:80px; border:1px dashed var(--line-2); border-radius:var(--r-l); position:relative; }
.market-cell::before, .market-cell::after { content:''; position:absolute; width:24px; height:24px; border-radius:4px; background:var(--pink); }
.market-cell::before { top:-10px; left:-10px; }
.market-cell::after { right:-10px; bottom:-10px; background:var(--teal); }
.room-invitation { padding-top:20px; margin-top:20px; border-top:1px solid var(--line); font-size:14px; }
.invitation-line { display:flex; align-items:center; justify-content:space-between; gap:16px; }
@media (hover:hover) and (pointer:fine) {
  .free-seat:not(:disabled):hover .av { background:var(--surface-2); color:var(--ink); }
}
@media (max-width:1150px) {
  .top-in { gap:16px; }
  .hub-layout { grid-template-columns:232px minmax(0,1fr); gap:24px; }
  .hub-content .rooms { gap:12px; }
  .hub-content .room { padding:16px; }
  .hub-content .lobby-side { grid-template-columns:minmax(0,1fr); }
  .hub-head .btn.big { font-size:15px; padding:0 16px; }
  .hub-content .hub-head { align-items:flex-start; }
}
@media (max-width:900px) {
  .hub-layout { grid-template-columns:220px minmax(0,1fr); gap:20px; padding-inline:20px; }
  .hub-content .rooms { grid-template-columns:1fr; }
  .hub-content .hub-head { flex-wrap:wrap; }
  .top .wordmark { --wm:20px; }
  .top .nav-item { padding:0 8px; font-size:14px; }
  .top .me-chip { max-width:120px; }
  .top .me-chip > div { display:none; }
  .top-in { gap:12px; }
}
@media (max-width:760px) {
  .top-in { display:grid; grid-template-columns:1fr auto; gap:8px 12px; padding:12px 16px 4px; }
  .top .brand { min-width:0; }
  .top .brand-mark { width:30px; height:30px; }
  .top .wordmark { --wm:20px; }
  .top-tools { margin:0; }
  .top .me-chip { padding:4px; max-width:40px; }
  .top .nav { display:grid; grid-column:1/-1; grid-row:2; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
  .top .nav-item { min-height:44px; justify-content:center; padding:0 4px; font-size:14px; }
  .nav-item.on::before { width:6px; height:6px; }
  .hub-layout { grid-template-columns:1fr; padding:28px 16px 48px; gap:32px; }
  .hub-sidebar { order:2; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  .sidebar-section { margin:0; padding:18px 16px; }
  .hub-content .hub-head { gap:20px; }
  .hub-content .rooms { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hub-title h1 { font-size:34px; }
  .hub-content .lobby { padding:20px 16px; margin-bottom:32px; }
  .hub-content .lobby .actionbar { flex-wrap:wrap; }
  .hub-content .lobby .actionbar .why { order:3; flex-basis:100%; text-align:left; }
  .hub-content .lobby .actionbar .btn.big { margin-left:auto; }
  .profile-columns { gap:32px; }
  .community-page { padding:28px 16px 64px; }
  .profile-identity { flex-wrap:wrap; }
  .profile-identity > .btn { margin-left:0; }
  .page-heading h1 { font-size:34px; }
}
@media (max-width:540px) {
  .hub-content .rooms { grid-template-columns:1fr; }
  .hub-sidebar { grid-template-columns:1fr; }
  .hub-content .room { padding:20px; }
  .hub-content .hub-head > .btn { width:100%; }
  .hub-content .lobby-head h1 { font-size:26px; }
  .hub-content .seat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-columns { grid-template-columns:1fr; gap:0; }
  .profile-identity .profile-avatar { width:64px; height:64px; font-size:28px; }
  .profile-identity h2 { font-size:24px; }
  .profile-stats { gap:12px; }
  .profile-stats dd { font-size:28px; }
  .person-row { flex-wrap:wrap; }
  .person-actions { flex-basis:100%; padding-left:52px; }
  .person-actions:empty { display:none; }
  .friend-search { align-items:stretch; flex-direction:column; }
  .friend-search .btn { align-self:flex-start; }
}

.lobby-rules summary { cursor:pointer; font-weight:500; font-size:19px; min-height:44px; }
.lobby-rules .rules-summary { color:var(--muted); font-size:14px; margin:0 0 16px; }
.lobby-rules:not([open]) .rules-summary { display:block; }
/* The create action belongs to the room list, including while an inline lobby is open. */
.hub-content #create-btn { position:static; inset:auto; box-shadow:none; }
@media (max-width:540px) { .hub-content #create-btn { width:100%; } }
.mobile-presence { display:none; }
@media (max-width:760px) {
  .mobile-presence { display:block; padding-bottom:24px; margin-bottom:28px; border-bottom:1px solid var(--line); }
  .mobile-presence .section-line { margin-bottom:12px; }
  .mobile-presence h2 { font-size:16px; }
  .mobile-presence > .text-link { display:block; margin-top:12px; }
  .mobile-friends { display:flex; flex-wrap:wrap; gap:12px 20px; }
  .mobile-friend { display:flex; align-items:center; gap:8px; min-height:44px; max-width:100%; font-size:14px; }
  .mobile-friend .av { width:28px; height:28px; box-shadow:none; }
  .mobile-friend span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hub-sidebar .sidebar-section:has(#sidebar-friends) { display:none; }
}

/* level: one bar from the current level to the next (values from the server's progression curve) */
.level { display:grid; gap:6px; margin:0 0 18px; }
.level.compact { margin:0 0 14px; }
.level-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.level-head b { font-weight:500; font-size:17px; }
.level.compact .level-head b { font-size:15px; }
.level-head span { font-size:13px; }
.level progress { display:block; width:100%; height:8px; border:0; border-radius:2px; background:var(--surface-3); appearance:none; overflow:hidden; }
.level progress::-webkit-progress-bar { background:var(--surface-3); border-radius:2px; }
.level progress::-webkit-progress-value { background:var(--ink); border-radius:2px; transition:width var(--t-panel) var(--ease-out); }
.level progress::-moz-progress-bar { background:var(--ink); border-radius:2px; }
.level small { font-size:13px; }

/* a calm entry for bug reports: no colour, a flag icon and one secondary button */
.bug-plate h2 { margin:0 0 6px; font:500 17px/1.3 var(--ui); }
.bug-plate p { margin:0 0 12px; font-size:14px; }
.bug-plate .btn { width:100%; justify-content:center; gap:8px; }
.bug-plate .btn svg, .foot .bug-open { flex:none; }
.bug-plate .btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.foot .bug-open { font-size:13px; padding:0; }

/* ---------- room card: the mode leads, people open their menu ---------- */
/* The mode is the first thing after the name: players pick a room by its rules (owner, 2026-10-23). Every mode has
   the same tag (ink outline on paper, owner: «в единое соответствие»); only its name differs. The turn time and
   money follow in ink, not as a footnote. */
/* the tag on its own line and the facts under it, for every mode alike (owner: «всё унифицировано») */
.room-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 2px 0 0; font-size: 14px; color: var(--ink); }
.mode-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-s); font-size: 13px; font-weight: 500;
  white-space: nowrap; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mode-facts { font-variant-numeric: tabular-nums; }
.hub-content .host { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 13px; color: var(--muted); }
.host .person-name { color: var(--ink); font-weight: 500; }
.host .person-name:disabled { cursor: default; }
.room-person.person-trigger { padding: 4px 2px 2px; margin: -4px -2px -2px; border-radius: var(--r-s); transition: background-color 120ms ease; }
@media (hover: hover) and (pointer: fine) { .room-person.person-trigger:hover { background: var(--surface-2); } }
.hub-content .room-foot { align-items: center; }
.room-state { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.room-state .status { flex: none; }
.room-state .count { font-size: 15px; }
.seat-face.person-trigger { border-radius: var(--r-s); }

/* ---------- profile: hidden parts and the closed profile ---------- */
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn.icon-only { width: 40px; padding: 0; font-size: 18px; letter-spacing: .05em; }
.lock-cell { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 1px; box-shadow: inset 0 0 0 1.5px var(--muted); position: relative; }
.lock-cell::after { content: ''; position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; background: var(--muted); border-radius: 1px; }
.lock-cell.big { width: 22px; height: 22px; }
.lock-cell.big::after { inset: 6px; }
.hidden-part { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; color: var(--muted); font-size: 14px; }
.profile-closed { display: grid; justify-items: start; gap: 6px; margin-top: 32px; padding: 28px 0; border-top: 1px solid var(--line); max-width: 52ch; }
.profile-closed h2 { margin: 8px 0 0; font: 500 21px/1.3 var(--ui); }
.page-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-heading-row .btn .badge-count { margin-left: 2px; }
.page-loading { min-height: 50dvh; }
.me-chip { position: relative; }
.me-unread { position: absolute; top: -6px; right: -6px; }
.me-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; }