/* Прихожая сохраняет дерево игрового стола и спокойные поверхности для текста. */
.lobby-scene { --ink: #f3ecdc; --muted: #bdc5b7; --gold: #daba7d; --line: #526456; background: linear-gradient(100deg, #0b1714f5 5%, #111e18eb 55%, #1c1b12d9), url("/war-table.png") center top / cover fixed, #101914; }
.lobby-scene .shell { width: min(1200px, 100% - 48px); }
.lobby-scene .masthead { min-height: 88px; border-bottom-color: #c3a46b26; }
.lobby-scene .brand { gap: 12px; font-size: 1.24rem; }
.lobby-scene .brand-mark { border-color: #b39a64; color: #e5c88b; background: #1a3027; box-shadow: inset 0 0 0 5px #18231b, 0 3px 15px #0004; }
.lobby-scene .brand small { color: #a9b8a8; }
.lobby-scene .button { border-radius: 9px; min-height: 44px; padding: 10px 15px; font-size: .85rem; }
.lobby-scene .button.primary { color: #17251a; border-color: #e4c98d; background: linear-gradient(#e2c58c, #cda76a); box-shadow: inset 0 1px #f9e8b5b3, 0 4px 10px #0003; }
.lobby-scene .button.primary:hover:enabled { background: linear-gradient(#edcf94, #dfba7d); }
.lobby-scene .button.quiet { background: #14251c80; border-color: #7890785c; color: #e1e9db; }
.lobby-scene .button.quiet:hover:enabled { background: #2a3e2f; border-color: #b2be95; }
.lobby-scene .language-controls { gap: 3px; padding: 3px; border: 1px solid #8c95713d; border-radius: 12px; background: #0a1510a3; }
.lobby-scene .language-controls .button { min-width: 42px; min-height: 36px; padding: 5px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: .73rem; }
.lobby-scene .language-controls .button[aria-pressed="true"] { background: #2e3b28; border-color: #85916a80; color: #f0d9a4; }
.lobby-scene :focus-visible { outline: 3px solid #e8cd91; outline-offset: 4px; }
.lobby-scene .eyebrow { color: #a9c4a8; font-size: .67rem; letter-spacing: .14em; }
.lobby-scene .panel { border: 1px solid #71856a4f; border-radius: 17px; background: #16251ff5; box-shadow: 0 12px 40px #020b073b, inset 0 1px #d2ddba0a; }
.lobby { padding-block: 28px 56px; }
.lobby-account, .lobby-auth-options, .lobby-section-heading, .lobby-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lobby-account { gap: 13px; color: #dce6d5; font-size: .85rem; }
#lobby-username { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Карта и три рубашки добавляют глубину, не конкурируя с главными действиями. */
.lobby-hero { position: relative; isolation: isolate; min-height: 320px; padding: clamp(24px, 4vw, 44px); overflow: hidden; background: radial-gradient(ellipse at 80% 35%, #a68c4a1c, transparent 62%), linear-gradient(110deg, #1a3027, #17251f 62%, #1c2419) !important; border-color: #9eaa7559 !important; }
.lobby-hero::before { content: ""; position: absolute; z-index: -1; inset: -42% -20% -60% 25%; background: url("/middle-earth-map.png") center / contain no-repeat; transform: rotate(-9deg); opacity: .11; filter: sepia(.3); pointer-events: none; }
.lobby-hero-copy { position: relative; z-index: 2; max-width: 640px; }
.lobby-hero .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 17px; color: #d2c79e; }
.hero-star { color: #e6c788; font-size: 1.1rem; }
.lobby-hero h1 { max-width: 15ch; margin: 0 0 16px; color: #f7efd9; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.lobby-hero .muted { max-width: 47ch; color: #c3ccba; font-size: .94rem; line-height: 1.65; }
.lobby-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.lobby-hero-actions .button { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hero-link { padding-block: 12px; color: #e6e3cc; text-decoration: none; font-size: .84rem; font-weight: 600; }
.hero-link:hover { color: #f2d79a; text-decoration: underline; text-underline-offset: 5px; }
.lobby-hero-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 27px; color: #a7b6a0; font-size: .69rem; }
.lobby-hero-notes > span { display: inline-flex; align-items: center; gap: 6px; }
.lobby-hero-notes > span + span::before { content: "·"; margin-right: 9px; color: #819276; }
.lobby-hero-notes i { width: 5px; height: 5px; background: #b7c599; border-radius: 50%; }
.lobby-hero-art { position: absolute; z-index: 1; width: 340px; height: 300px; right: 38px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.hero-orbit { position: absolute; inset: 17px 7px; border: 1px solid #c3ab6330; border-radius: 50%; transform: rotate(-19deg); box-shadow: 0 0 0 15px #c8ad5706, 0 0 0 16px #c3ab6312; }
.hero-orbit::after { content: "✦"; position: absolute; top: 34px; right: 23px; color: #dec27d; }
.hero-card { position: absolute; width: 150px; height: 225px; object-fit: contain; filter: drop-shadow(0 13px 12px #0008); transform-origin: center 95%; }
.hero-card-one { left: 37px; top: 30px; transform: rotate(-23deg); }
.hero-card-two { left: 104px; top: 10px; transform: rotate(-3deg); }
.hero-card-three { left: 165px; top: 34px; transform: rotate(20deg); }
.hero-art-caption { position: absolute; inset: auto 0 0; text-align: center; color: #b8b191; font: italic .83rem var(--serif); }
.lobby-loading { padding: 22px 0; font-size: .9rem; }
.lobby-notice { margin-block: 18px 0; background: #213b2c; border-color: #8198757a; color: #edf0dc; }
.lobby-notice.error { background: #422a22; }

/* Два главных раздела отделяют создание партии от возвращения к сохранённым столам. */
.lobby-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; gap: 22px; margin-top: 26px; }
.lobby-side { display: grid; gap: 22px; min-width: 0; }
.lobby-auth, .lobby-invite, .lobby-create, .lobby-saved, .lobby-paste { display: grid; gap: 22px; min-width: 0; padding: clamp(20px, 2.6vw, 30px); }
.lobby-auth, .lobby-invite { max-width: 620px; margin: 24px auto 0; }
.lobby-auth { gap: 17px; }
.lobby-auth-options { padding: 4px; border: 1px solid #7287674a; border-radius: 12px; background: #0b1812a3; }
.lobby-auth-options .button { flex: 1; border-color: transparent; }
.lobby-auth-options [aria-pressed="true"] { background: #304533 !important; border-color: #8f9c725c !important; color: #f2e2b8 !important; }
.lobby-invite { border-color: #b9b57985 !important; background: linear-gradient(135deg, #2d412e, #152b22) !important; }
.lobby-section-heading { justify-content: space-between; gap: 12px; }
.lobby h2 { color: #f0e9d3; font-size: clamp(1.45rem, 2.5vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; }
.lobby h2 + p { margin-top: 9px; font-size: .84rem; }
.lobby .eyebrow + h2 { margin-top: 7px; }
.lobby-form, .lobby-choice { display: grid; gap: 9px; }
.lobby-form label, .lobby-share label, .lobby-form legend { color: #d5ddcc; font-size: .79rem; font-weight: 600; }
.lobby-form button, .lobby-invite > button, .lobby-share > button { justify-self: start; }
.lobby-form > button.primary { justify-self: stretch; margin-top: 8px; min-height: 48px; }
.lobby-form input:not([type="radio"]), .lobby-form select, .lobby-share input { width: 100%; min-width: 0; min-height: 46px; padding: 11px 13px; border: 1px solid #70846778; border-radius: 9px; color: #f0ecdc; background: #0d1914cc; box-shadow: inset 0 2px 4px #0002; font-size: .9rem; }
.lobby-form input::placeholder { color: #899c87; }
.lobby-form input:focus, .lobby-form select:focus { border-color: #d6bc7d; }
.lobby-choice { padding-top: 4px; }

/* Вся плитка режима остаётся нативной областью выбора радиокнопки. */
.lobby-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; padding: 0; margin: 8px 0 0; border: 0; }
.lobby-modes legend { padding: 0; margin-bottom: 11px; }
.lobby-mode { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 148px; padding: 16px; border: 1px solid #77926d4d; border-radius: 12px; color: #bdcca9; background: #14261d9c; cursor: pointer; transition: background-color .16s, border-color .16s, box-shadow .16s; }
.lobby-mode:hover { background: #273a29; border-color: #aeb78a8c; }
.lobby-mode:has(:checked) { background: linear-gradient(145deg, #364b30, #243d2b); border-color: #c2be85; box-shadow: inset 0 0 0 1px #c7c48a24, 0 3px 12px #0002; color: #e3d6a3; }
.lobby-mode:has(:focus-visible) { outline: 3px solid #e8cd91; outline-offset: 3px; }
.lobby-mode input { position: absolute; top: 15px; right: 14px; width: 17px; height: 17px; margin: 0; accent-color: #d4c68f; }
.lobby-mode input:focus-visible { outline: none; }
.mode-icon { flex: none; width: 33px; height: 33px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mode-copy { min-width: 0; }
.mode-copy strong { display: block; color: #f1eddc; font-size: .93rem; line-height: 1.25; font-weight: 650; }
.lobby-mode small { display: block; margin-top: 6px; color: #bbc9b6; font-size: .76rem; line-height: 1.5; font-weight: 400; }

/* Сохранённая партия получает свой знак режима и заметный переход к столу. */
.lobby-game-count { display: inline-grid; place-items: center; min-width: 25px; min-height: 25px; margin-left: 4px; padding: 3px 6px; vertical-align: middle; border: 1px solid #8699714d; border-radius: 8px; color: #c9d2b4; background: #2a3e2b; font: 600 .68rem system-ui, sans-serif; }
.lobby-games { display: grid; gap: 11px; }
.lobby-game { display: grid; gap: 17px; min-width: 0; padding: 18px; border: 1px solid #667f5d47; border-radius: 12px; background: #0e1b15a6; }
.lobby-game:first-child { border-color: #a3ad7869; background: linear-gradient(130deg, #263d2b99, #15251b99); }
.lobby-game-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.lobby-game-heading > .mode-icon { width: 43px; height: 43px; padding: 7px; border: 1px solid #a6b17b3d; border-radius: 11px; background: #3045305e; color: #d7c98d; }
.lobby-game-heading > div { min-width: 0; }
.lobby-game h3 { color: #f1ead6; font-size: 1.16rem; line-height: 1.25; overflow-wrap: anywhere; }
.lobby-game-meta { margin-top: 5px; font-size: .73rem; line-height: 1.5; overflow-wrap: anywhere; }
.lobby-game-actions { gap: 8px; }
.lobby-game-actions a, .lobby-joined { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.lobby-game-actions .button { min-height: 40px; padding: 9px 12px; font-size: .75rem; }
.lobby-game-actions .button.primary { margin-right: auto; background: #c0d1ad; border-color: #c0d1ad; color: #1c2b1d; }
.lobby-game-actions .button.primary:hover { background: #d4dfc1; }
.lobby-joined { justify-self: start; }
.lobby-empty { display: grid; justify-items: center; gap: 15px; padding: 27px 18px; text-align: center; border: 1px dashed #9caa783d; border-radius: 12px; background: #10231970; }
.lobby-empty > .mode-icon { width: 45px; height: 45px; color: #a9b98b; }
.lobby-empty p { max-width: 36ch; font-size: .85rem; }
.lobby-empty a { text-decoration: none; }
.lobby-paste { gap: 17px; background: #19281fe3 !important; }
.lobby-paste h2 { font-size: 1.25rem; }
.lobby-paste .lobby-form { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.lobby-paste label { grid-column: 1 / -1; }
.lobby-paste .button { padding-inline: 12px; font-size: .73rem; }
.lobby-share { width: min(510px, 100% - 24px); max-height: calc(100dvh - 24px); padding: 26px; color: var(--ink); }
.lobby-share[open] { display: grid; gap: 12px; }
.lobby-share::backdrop { background: #07110edb; backdrop-filter: blur(5px); }
.lobby-share form { justify-self: end; }
.lobby-share .muted { font-size: .86rem; }

/* Узкий экран меняет композицию, сохраняя полноценные формы и крупные цели касания. */
@media (max-width: 1000px) {
  .lobby-hero-art { right: -32px; width: 290px; transform: translateY(-50%) scale(.87); opacity: .8; }
  .lobby-hero-copy { max-width: 65%; }
  .lobby-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
  .lobby-layout { gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lobby-side { gap: 16px; }
  .lobby-paste .lobby-form { grid-template-columns: minmax(0, 1fr); }
  .lobby-mode { padding: 13px; }
}
@media (max-width: 760px) {
  .lobby-scene .shell { width: calc(100% - 32px); }
  .lobby-scene .masthead { min-height: 76px; padding-block: 14px; gap: 10px; }
  .lobby-scene .brand { font-size: 1.1rem; }
  .lobby-scene .brand small { font-size: .63rem; }
  .lobby-scene .brand-mark { flex-basis: 36px; height: 36px; }
  .lobby-scene .masthead-controls { gap: 9px; }
  .lobby-account { gap: 7px; font-size: .75rem; }
  #lobby-username { max-width: 12ch; }
  .lobby-account .button { padding-inline: 10px; min-height: 38px; font-size: .7rem; }
  .lobby { padding-top: 20px; }
  .lobby-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 20px; }
  .lobby-side { gap: 18px; }
  .lobby-hero { min-height: 295px; padding: 27px; }
  .lobby-hero-copy { max-width: 80%; }
  .lobby-hero .muted { max-width: 39ch; }
  .lobby-hero-art { right: -63px; opacity: .35; }
  .lobby-hero-actions { gap: 9px 17px; }
}
@media (max-width: 520px) {
  .lobby-scene .shell { width: calc(100% - 24px); }
  .lobby-scene .masthead { align-items: flex-start; }
  .lobby-scene .brand { gap: 8px; font-size: 1rem; padding-top: 5px; }
  .lobby-scene .brand small { max-width: 20ch; font-size: .59rem; line-height: 1.4; }
  .lobby-scene .brand-mark { flex-basis: 31px; height: 31px; font-size: 1.1rem; }
  .lobby-scene .masthead-controls { display: grid; justify-items: end; gap: 8px; }
  .lobby-scene .language-controls .button { min-width: 36px; min-height: 34px; }
  .lobby-account { gap: 7px; }
  #lobby-username { max-width: 10ch; font-size: .68rem; }
  .lobby-account .button { min-height: 32px; padding: 4px 8px; }
  .lobby-hero { padding: 25px 21px; min-height: 302px; }
  .lobby-hero-copy { max-width: none; }
  .lobby-hero h1 { max-width: 14ch; font-size: 2.3rem; margin-bottom: 15px; }
  .lobby-hero .eyebrow { font-size: .6rem; }
  .lobby-hero .muted { max-width: 31ch; font-size: .83rem; color: #d0d5c3; }
  .lobby-hero-art { right: -84px; top: 37%; transform: translateY(-50%) scale(.73); opacity: .22; }
  .lobby-hero-notes { gap: 7px 11px; margin-top: 23px; font-size: .6rem; }
  .lobby-hero-notes > span + span::before { margin-right: 4px; }
  .lobby-hero-actions { gap: 5px 16px; margin-top: 20px; }
  .lobby-hero-actions .button { width: 100%; justify-content: center; }
  .hero-link { font-size: .76rem; }
  .lobby-auth, .lobby-invite, .lobby-create, .lobby-saved, .lobby-paste { padding: 22px 18px; gap: 19px; }
  .lobby-auth-options .button { padding-inline: 10px; font-size: .77rem; }
  .lobby-mode { min-height: 154px; gap: 9px; padding: 13px 11px; }
  .lobby-mode input { top: 13px; right: 11px; }
  .mode-copy strong { font-size: .85rem; }
  .lobby-mode small { font-size: .73rem; line-height: 1.45; }
  .lobby-game { padding: 15px; }
  .lobby-game-actions .button { min-height: 44px; }
  .lobby-game-actions .button.primary { width: 100%; margin-right: 0; }
  .lobby-game-heading { gap: 10px; }
  .lobby-paste .button { min-height: 44px; justify-self: stretch; }
  .lobby-share { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-scene *, .lobby-scene *::before, .lobby-scene *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}