/* Imperial red-gold lobby theme (full stylesheet).
   Enabled via link#lobbyCssImperial when body.lobby-theme-imperial.
   Classic: css/lobby.css
*/

/* Lobby2 — imperial red–gold salon.
   Same class contract as lobby.html; used only by lobby2.html.
   Functional logic remains in js/lobby.js (unchanged).
*/

    /* Лёгкая страница входа: НЕ грузит js/game.js и 3D-кубики — только выбор
       фишки + учётка. Логика — js/lobby.js. State через /ws (HTTP-фолбэк),
       без тяжёлой машинерии доски. Игра (game.html) — location → /игра. */
    * { box-sizing: border-box; }

    /* Долгое нажатие на мобильном не должно выделять/копировать текст кнопки. */
    button {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    :root {
      /* Императорский салон: бархатный кармин + жидкое золото */
      --felt-deep: #3a0610;
      --felt-mid: #8a1528;
      --felt-lit: #c42a40;
      --velvet: #5c0a16;
      --ruby: #c41e3a;
      --ruby-deep: #7a1020;
      --mahogany: #1a080a;
      --champagne: #e8c547;
      --champagne-soft: #fff0b8;
      --gold-bright: #ffe9a0;
      --gold-deep: #a67c1a;
      --ivory: #fff8ec;
      --ivory-dim: #e8d5b0;
      --ember: #e02030;
      --night: #0a0406;
      --lobby-ink: #fff8ec;
      --lobby-ink-soft: #e8d5b0;
      --lobby-cream: #fff8ec;
      --lobby-enamel: #e8c547;
      --lobby-brass: #e8c547;
      --lobby-brass-soft: #fff0b8;
      --lobby-panel-edge: 14px;
      --lobby-header-h: 78px;
      --lobby-content-top: var(--lobby-header-h);
      --lobby-side-reserve: 228px;
      --lobby-auth-w: 268px;
      --lobby-auth-reserve: 168px;
      --lobby-page-pad-x: clamp(16px, 3vw, 28px);
      --lobby-row-scale: 1;
      --lobby-token-size: 58px;
      --lobby-start-col-w: 136px;
      --lobby-hint-h: 40px;
      --lobby-shadow-soft:
        0 2px 10px rgba(0, 0, 0, 0.45),
        0 14px 40px rgba(40, 0, 8, 0.55),
        0 0 0 1px rgba(232, 197, 71, 0.22),
        0 0 28px rgba(196, 30, 58, 0.12);
      --lobby-shadow-lift:
        0 6px 18px rgba(0, 0, 0, 0.5),
        0 22px 56px rgba(60, 0, 12, 0.55),
        0 0 0 1px rgba(255, 232, 160, 0.4),
        0 0 48px rgba(232, 197, 71, 0.22),
        0 0 80px rgba(196, 30, 58, 0.18);
      --lobby-shadow-inset:
        inset 0 1px 0 rgba(255, 240, 180, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
      --lobby-ease: cubic-bezier(0.22, 1, 0.36, 1);
      --lobby-font: "Manrope", "Segoe UI", sans-serif;
      --lobby-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    }

    @keyframes lobbyFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes lobbyFadeInCorner {
      from { opacity: 0; }
      to   { opacity: 0.92; }
    }
    @keyframes lobbyAuthIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes lobbyTokenPulse {
      0%, 100% { box-shadow: inset 0 2px 4px rgba(255,255,255,0.45), 0 3px 10px rgba(0,0,0,0.35); }
      50%      { box-shadow: inset 0 2px 4px rgba(255,255,255,0.55), 0 4px 16px rgba(0,0,0,0.28), 0 0 0 3px rgba(255,255,255,0.12); }
    }

    /* ── «Утопленный» стиль текста — как .frame-price в game.html.
       НЕ применяется: кнопки, окно входа/регистрации и .lobby-panel. ── */
    .lobby-embossed-text {
      color: var(--ivory);
      text-shadow:
        0 1px 0 rgba(255, 240, 200, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.45);
    }
    .lobby-token-name-input.lobby-embossed-text,
    .lobby-parchment.lobby-embossed-text {
      color: #2a1a10;
      text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45),
        0 1px 2px rgba(42, 26, 10, 0.12);
    }
    .lobby-start-status.lobby-embossed-text,
    .lobby-capacity-label.lobby-embossed-text {
      color: var(--champagne-soft);
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    }
    .lobby-parchment {
      background:
        linear-gradient(165deg, rgba(255, 248, 230, 0.98) 0%, rgba(240, 210, 150, 0.94) 100%);
      border: 1px solid rgba(232, 197, 71, 0.65);
      color: #2a0a0c;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 10px rgba(80, 0, 16, 0.35),
        0 0 0 1px rgba(196, 30, 58, 0.15);
      transition: border-color 0.2s var(--lobby-ease), box-shadow 0.25s var(--lobby-ease);
    }

    html, body {
      margin: 0;
      min-height: 100%;
      min-height: 100dvh;
    }
    body {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
      align-items: flex-start;
      font-family: var(--lobby-font);
      font-weight: 500;
      background-color: var(--night);
      background-image:
        radial-gradient(ellipse 75% 55% at 50% -8%, rgba(255, 220, 120, 0.22), transparent 55%),
        radial-gradient(ellipse 60% 50% at 12% 85%, rgba(140, 16, 36, 0.55), transparent 60%),
        radial-gradient(ellipse 55% 45% at 92% 70%, rgba(90, 8, 20, 0.65), transparent 55%),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(196, 30, 58, 0.12), transparent 70%),
        linear-gradient(165deg, #1a080c 0%, #0a0406 42%, #14060a 100%);
      color: var(--ivory);
      position: relative;
      overflow: hidden;
      padding-left: var(--lobby-side-reserve);
      padding-right: var(--lobby-page-pad-x);
      padding-top: var(--lobby-content-top);
      padding-bottom: 16px;
    }
    @media (orientation: portrait) {
      body {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 200px;
      }
      .lobby-rows {
        max-height: calc(100dvh - var(--lobby-content-top) - var(--lobby-hint-h) - 208px);
      }
    }

    /* Счётчик реальных игроков (без ботов) — под .lobby-panel */
    .lobby-real-players {
      position: fixed;
      z-index: 101;
      box-sizing: border-box;
      padding: 4px 8px;
      border-radius: 12px;
      border: 1px solid rgba(232, 197, 71, 0.45);
      background:
        linear-gradient(165deg, rgba(72, 14, 24, 0.96) 0%, rgba(22, 6, 10, 0.98) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 232, 160, 0.2),
        var(--lobby-shadow-soft);
      color: #f5e6c8;
      font-family: var(--lobby-font);
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      pointer-events: none;
      animation: lobbyFadeIn 0.55s var(--lobby-ease) 0.12s both;
    }

    /* ── Боковая/нижняя панель: scoreboard + message.
       Точные размеры/позицию выставляет layoutLobbyPanel() в скрипте. ── */
    .lobby-panel {
      position: fixed;
      left: var(--lobby-panel-edge);
      top: var(--lobby-content-top);
      bottom: var(--lobby-panel-edge);
      width: 200px;
      display: flex;
      flex-direction: column;
      background:
        linear-gradient(165deg, rgba(72, 14, 24, 0.96) 0%, rgba(22, 6, 10, 0.98) 100%);
      border: 1px solid rgba(232, 197, 71, 0.45);
      border-radius: 18px;
      box-shadow:
        inset 0 1px 0 rgba(255, 232, 160, 0.2),
        inset 0 0 0 1px rgba(196, 30, 58, 0.25),
        var(--lobby-shadow-soft),
        0 0 40px rgba(196, 30, 58, 0.28);
      z-index: 100;
      overflow: hidden;
      animation: lobbyFadeIn 0.55s var(--lobby-ease) 0.12s both;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    @media (orientation: portrait) {
      .lobby-panel {
        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;
        width: auto;
        height: 176px;
      }
    }
    .lobby-panel-scoreboard {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 10px 12px 6px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      scrollbar-width: thin;
      scrollbar-color: rgba(212, 181, 106, 0.35) transparent;
    }
    .lobby-panel-scoreboard::-webkit-scrollbar { width: 4px; }
    .lobby-panel-scoreboard::-webkit-scrollbar-track { background: transparent; }
    .lobby-panel-scoreboard::-webkit-scrollbar-thumb {
      background: rgba(212, 181, 106, 0.35);
      border-radius: 2px;
    }
    .lobby-panel-scoreboard::-webkit-scrollbar-thumb:hover {
      background: rgba(212, 181, 106, 0.55);
    }
    .lobby-panel-empty {
      font-size: 0.72rem;
      color: var(--lobby-ink-soft);
      opacity: 0.7;
      font-style: italic;
      margin-top: 4px;
      padding: 0 2px;
    }
    .lobby-panel-entry {
      font-size: 0.74rem;
      line-height: 1.35;
      font-weight: 600;
      color: var(--ivory);
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .lobby-panel-entry,
    .lobby-panel-empty {
      animation: lobbyFadeIn 0.35s var(--lobby-ease) both;
    }
    .lobby-panel-chip {
      display: inline-block;
      width: 0.6em;
      height: 0.6em;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 3px;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      position: relative;
      top: -0.05em;
    }
    .lobby-panel-name-badge {
      display: inline;
      padding: 0.08em 0.38em;
      border-radius: 0.28em;
      font-weight: 700;
      line-height: 1.35;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    }
    .lobby-panel-sender {
      font-weight: 700;
      color: var(--champagne-soft);
    }
    .lobby-panel-composer {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 5px;
      margin: 6px 8px 8px;
      padding: 4px 5px 4px 8px;
      border-radius: 12px;
      background: rgba(90, 12, 24, 0.55);
      border: 1px solid rgba(232, 197, 71, 0.4);
      box-shadow: inset 0 1px 0 rgba(255, 232, 160, 0.12);
    }
    .lobby-panel-input {
      flex: 1 1 auto;
      min-width: 0;
      font-family: inherit;
      font-size: 0.8rem;
      padding: 5px 4px;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--ivory);
      outline: none;
    }
    .lobby-panel-input::placeholder { color: rgba(203, 185, 160, 0.55); }
    .lobby-panel-send {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      padding: 0;
      font: inherit;
      font-size: 0.85rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(212, 181, 106, 0.55);
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 55%),
        linear-gradient(160deg, #e8d08a 0%, #b8923a 100%);
      color: #2a1a08;
      cursor: pointer;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.35);
      transition: box-shadow 0.25s var(--lobby-ease), transform 0.2s var(--lobby-ease);
    }
    .lobby-panel-send:hover {
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 12px rgba(40, 24, 10, 0.28);
    }
    .lobby-panel-send:active { transform: translateY(0); }

    /* Фоновые углы экрана: левый верхний — оригинал, остальные —
       его зеркальные копии; ?v= ставит applyLobbyAssetVersions. */
    .bg-leather-corner {
      position: fixed;
      width: 50vw;
      height: 50vh;
      background-repeat: no-repeat;
      background-size: cover;
      pointer-events: none;
      z-index: 0;
      opacity: 0.42;
      filter: brightness(0.55) saturate(0.7) contrast(1.1);
      animation: lobbyFadeInCorner 0.85s var(--lobby-ease) both;
      mix-blend-mode: soft-light;
    }
    .bg-leather-corner--tl { top: 0; left: 0; background-position: bottom right; animation-delay: 0s; }
    .bg-leather-corner--tr { top: 0; right: 0; background-position: bottom right; transform: scaleX(-1); animation-delay: 0.06s; }
    .bg-leather-corner--bl { bottom: 0; left: 0; background-position: bottom right; transform: scaleY(-1); animation-delay: 0.12s; }
    .bg-leather-corner--br { bottom: 0; right: 0; background-position: bottom right; transform: scale(-1, -1); animation-delay: 0.18s; }

    /* Барабан рядов — без обёртки; без transform на контейнере
       (иначе lobby-panel «отстаёт» после анимации появления). */
    .lobby-rows {
      --lobby-rows-fade: 40px;
      position: relative;
      z-index: 1;
      width: min(94vw, 680px);
      max-height: calc(100dvh - var(--lobby-content-top) - var(--lobby-hint-h) - 24px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      /* Верх/низ: зона под fade-mask + запас под мягкую тень рядов */
      padding: var(--lobby-rows-fade) 14px;
      margin-top: 0;
      box-sizing: border-box;
      animation: lobbyFadeIn 0.5s var(--lobby-ease) 0.08s both;
      /* Края барабана: row-block плавно прозрачнеет от центра к верху/низу */
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--lobby-rows-fade),
        #000 calc(100% - var(--lobby-rows-fade)),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--lobby-rows-fade),
        #000 calc(100% - var(--lobby-rows-fade)),
        transparent 100%
      );
    }
    .lobby-rows::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .lobby-row-block {
      position: relative;
      /* Красное сукно: мягкий блик ворса, лёгкое зерно, бархатная глубина */
      background:
        radial-gradient(ellipse 88% 62% at 48% 18%, rgba(232, 96, 118, 0.42), transparent 64%),
        radial-gradient(ellipse 70% 55% at 50% 55%, rgba(196, 30, 58, 0.28), transparent 72%),
        radial-gradient(ellipse 48% 40% at 82% 82%, rgba(90, 8, 22, 0.45), transparent 60%),
        repeating-radial-gradient(circle at 18% 28%, rgba(255, 190, 200, 0.045) 0 0.55px, transparent 0.7px 2.8px),
        repeating-radial-gradient(circle at 72% 64%, rgba(20, 0, 8, 0.06) 0 0.45px, transparent 0.6px 2.4px),
        linear-gradient(158deg, var(--felt-lit) 0%, rgba(196, 30, 58, 0.98) 32%, var(--felt-mid) 62%, var(--felt-deep) 100%),
        center / 100% 100% no-repeat;
      border-radius: 18px;
      border: 1.5px solid rgba(232, 197, 71, 0.48);
      box-shadow: var(--lobby-shadow-soft);
      --lobby-row-pad-y: 10px;
      --lobby-row-pad-x: 18px;
      padding: var(--lobby-row-pad-y) var(--lobby-row-pad-x);
      margin: 0 0 14px;
      text-align: center;
      overflow: hidden;
      /* Без 3D-tilt на ряде: иначе marquee имён и весь блок дёргаются при низком FPS. */
      transform: none;
      transition: box-shadow 0.35s var(--lobby-ease), opacity 0.25s ease, border-color 0.3s ease;
      animation: lobbyFadeIn 0.55s var(--lobby-ease) both;
    }
    .lobby-row-block::before {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: 15px;
      border: 1px solid rgba(255, 232, 160, 0.28);
      pointer-events: none;
      z-index: 0;
      /* Мягкая «впадина» сукна: верхний ворс светлее, края глубже */
      box-shadow:
        inset 0 10px 28px rgba(255, 140, 160, 0.1),
        inset 0 -18px 36px rgba(24, 0, 10, 0.42),
        inset 0 0 48px rgba(80, 0, 20, 0.28),
        inset 0 0 0 1px rgba(196, 30, 58, 0.22);
    }
    .lobby-row-block::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 232, 160, 0.18) 45%,
        transparent 78%
      );
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      transform: translate3d(-130%, 0, 0);
      transition: opacity 0.35s ease;
    }
    .lobby-row-block:hover::after,
    .lobby-row-block.is-lit::after {
      opacity: 1;
      animation: lobbyLightSweep 3.2s ease-in-out infinite;
    }
    .lobby-row-block.is-lit {
      box-shadow: var(--lobby-shadow-lift);
    }
    @keyframes lobbyLightSweep {
      0% { transform: translate3d(-130%, 0, 0); }
      100% { transform: translate3d(280%, 0, 0); }
    }
    .lobby-row-block:nth-child(1) { animation-delay: 0.14s; }
    .lobby-row-block:nth-child(2) { animation-delay: 0.22s; }
    .lobby-row-block:nth-child(3) { animation-delay: 0.30s; }
    .lobby-row-block:nth-child(4) { animation-delay: 0.38s; }
    .lobby-row-block:nth-child(5) { animation-delay: 0.46s; }
    .lobby-row-block:hover {
      box-shadow: var(--lobby-shadow-lift);
      border-color: rgba(212, 181, 106, 0.55);
    }
    .lobby-row-block:last-child { margin-bottom: 0; }

    /* Номер стола — на всю высоту lobby-row-block, по центру колонки старта */
    .lobby-start-table-num {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
      margin: 0;
      padding: 0;
      pointer-events: none;
      user-select: none;
      font-family: var(--lobby-display);
      font-size: calc(90px * var(--lobby-row-scale, 1));
      font-weight: 600;
      letter-spacing: 0;
      color: rgba(232, 197, 71, 0.16);
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
      line-height: 1;
      white-space: nowrap;
      max-height: 92%;
      max-width: 100%;
      overflow: hidden;
    }
    .lobby-row-block > .lobby-main-row {
      position: relative;
      z-index: 1;
    }
    .lobby-start-col > .lobby-start-btn,
    .lobby-start-col > .lobby-capacity {
      position: relative;
      z-index: 1;
    }

    /* Заголовок — читаемая эмаль; справа запас под auth */
    .lobby-title {
      position: fixed;
      top: 0;
      left: var(--lobby-side-reserve);
      right: max(var(--lobby-page-pad-x), var(--lobby-auth-reserve));
      height: var(--lobby-header-h);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      font-family: var(--lobby-display);
      font-size: clamp(1.35rem, 2.8vw, 2.35rem);
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.06em;
      z-index: 50;
      pointer-events: none;
      animation: lobbyFadeIn 0.6s var(--lobby-ease) 0.04s both;
      overflow: hidden;
    }
    @media (orientation: portrait) {
      .lobby-title {
        left: 8px;
        right: max(8px, var(--lobby-auth-reserve));
      }
    }
    .lobby-title-word {
      position: relative;
      display: inline-block;
      padding: 0 0.08em 0.38em;
      font-family: var(--lobby-display);
      font-weight: 600;
      font-size: 1em;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: transparent;
      background: linear-gradient(180deg, #fffceb 0%, #ffe9a0 22%, #e8c547 48%, #c9a227 72%, #8a6418 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter:
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 16px rgba(232, 197, 71, 0.35))
        drop-shadow(0 0 28px rgba(196, 30, 58, 0.35));
      animation: lobbyTitleGlow 4.5s ease-in-out infinite;
    }
    @keyframes lobbyTitleGlow {
      0%, 100% {
        filter:
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65))
          drop-shadow(0 0 14px rgba(232, 197, 71, 0.28))
          drop-shadow(0 0 22px rgba(196, 30, 58, 0.25));
      }
      50% {
        filter:
          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65))
          drop-shadow(0 0 32px rgba(255, 232, 160, 0.55))
          drop-shadow(0 0 48px rgba(196, 30, 58, 0.45));
      }
    }
    /* Черта + ромбик заголовка — из lobby.css (--lobby-gold-stroke / diamond). */
    .lobby-hint {
      /* Отдельная строка на всю ширину (body — flex-wrap): подсказка/ошибка
         НЕ конкурирует за ширину с рядами (#lobbyRows), поэтому длинный текст
         ошибки при клике «Начать игру» не сужает ряды. Высота зафиксирована
         (см. --lobby-hint-h), чтобы смена текста не меняла и высоту. */
      flex: 0 0 100%;
      width: 100%;
      height: var(--lobby-hint-h);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.25;
      overflow: hidden;
    }

    /* 5 равных колонок фишек + фиксированный старт.
       border-spacing=0; фишки по центру ячеек → одинаковый зазор между ними. */
    .lobby-main-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
    }
    .lobby-token-form {
      width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .lobby-table {
      margin: 0;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      width: 100%;
      box-sizing: border-box;
    }
    .lobby-token-name-cell,
    .lobby-token-avatar-cell {
      /* width не задаём — 5 колонок делят остаток после старта поровну →
         одинаковый зазор между центрированными фишками */
      width: auto;
      padding: 0;
      text-align: center;
      vertical-align: middle;
      position: relative;
    }
    .lobby-token-name-cell {
      /* Фикс. высота: input/label/пусто не меняют ряд при посадке */
      height: calc(40px * var(--lobby-row-scale));
      vertical-align: middle;
      padding-bottom: 0;
    }
    .lobby-token-name-input,
    .lobby-token-name-label {
      width: 100%;
      height: calc(36px * var(--lobby-row-scale));
      box-sizing: border-box;
      text-align: center;
      font-size: calc(1.08rem * var(--lobby-row-scale));
    }
    .lobby-token-name-input {
      font: inherit;
      font-size: calc(1.08rem * var(--lobby-row-scale));
      font-weight: 600;
      padding: calc(4px * var(--lobby-row-scale)) 2px;
      border-radius: calc(8px * var(--lobby-row-scale));
      outline: none;
      width: 100%;
      line-height: 1.2;
    }
    .lobby-token-name-input:focus {
      border-color: rgba(80, 140, 220, 0.55);
      box-shadow:
        var(--lobby-shadow-inset),
        0 0 0 3px rgba(80, 140, 220, 0.2),
        0 2px 8px rgba(30, 18, 8, 0.16);
    }
    .lobby-token-name-input::placeholder {
      color: #8a7358;
      text-shadow: none;
      font-weight: 500;
    }
    .is-mine .lobby-token-name-input {
      border-color: rgba(120, 200, 255, 0.55);
    }
    .lobby-token-name-label {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      line-height: 1.2;
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap;
      contain: paint;
    }
    .lobby-token-name-scroll {
      display: inline-block;
      flex-shrink: 0;
      max-width: none;
      white-space: nowrap;
      line-height: inherit;
    }
    .lobby-token-name-label.is-marquee {
      justify-content: flex-start;
    }
    .lobby-token-name-label.is-marquee .lobby-token-name-scroll {
      /* translate3d — на композиторе; без CSS-var в keyframes (медленнее). */
      animation: lobbyNameMarquee var(--marquee-duration, 10s) linear infinite;
      backface-visibility: hidden;
      transform: translate3d(0, 0, 0);
    }
    @keyframes lobbyNameMarquee {
      from { transform: translate3d(var(--marquee-enter, 100%), 0, 0); }
      to { transform: translate3d(var(--marquee-exit, -100%), 0, 0); }
    }
    /* Превью имени бота при hover «Добавить бота» / solo-nudge — ещё не посажен. */
    .lobby-token-name-label.is-bot-preview,
    .lobby-token-name-cell.is-bot-preview .lobby-token-name-label {
      opacity: 0.72;
      color: var(--champagne-soft);
    }
    .lobby-token-name-input[readonly],
    .lobby-token-name-input[aria-hidden="true"] {
      pointer-events: none;
      caret-color: transparent;
    }
    .lobby-token-avatar-wrap {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: calc(var(--lobby-token-size) * var(--lobby-row-scale));
      height: calc(var(--lobby-token-size) * var(--lobby-row-scale));
      transition: transform 0.3s var(--lobby-ease);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
    }
    .is-free .lobby-token-avatar-wrap:hover {
      transform: translateY(-3px) scale(1.06);
    }
    .lobby-token-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.55);
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.45),
        0 3px 10px rgba(0, 0, 0, 0.35);
      padding: 0;
      cursor: default;
      transition: opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.3s var(--lobby-ease), filter 0.3s ease;
    }
    .is-free .lobby-token-avatar {
      opacity: 0.38;
      cursor: pointer;
      animation: lobbyTokenPulse 2.8s ease-in-out infinite;
      border-color: rgba(212, 181, 106, 0.35);
    }
    .is-free .lobby-token-avatar:hover {
      opacity: 0.72;
      filter: brightness(1.08);
    }
    .is-mine .lobby-token-avatar {
      border-color: rgba(240, 224, 176, 0.95);
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.45),
        0 3px 12px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(212, 181, 106, 0.45),
        0 0 22px rgba(212, 181, 106, 0.35);
    }
    .lobby-token-close,
    .lobby-token-add {
      position: absolute;
      top: calc(-6px * var(--lobby-row-scale));
      right: calc(-6px * var(--lobby-row-scale));
      width: calc(20px * var(--lobby-row-scale));
      height: calc(20px * var(--lobby-row-scale));
      line-height: calc(18px * var(--lobby-row-scale));
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(22, 18, 14, 0.9);
      color: #f0ede6;
      font-size: calc(0.7rem * var(--lobby-row-scale));
      cursor: pointer;
      padding: 0;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
      transition: background 0.2s ease, transform 0.2s var(--lobby-ease);
    }
    .lobby-token-close:hover {
      background: #a01010;
      transform: scale(1.08);
    }
    .lobby-token-close {
      font-size: 0;
    }
    .lobby-token-close::before,
    .lobby-token-close::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(9px * var(--lobby-row-scale));
      height: calc(2px * var(--lobby-row-scale));
      border-radius: 999px;
      background: currentColor;
    }
    .lobby-token-close::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .lobby-token-close::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    .lobby-token-add {
      font-size: calc(0.95rem * var(--lobby-row-scale));
      font-weight: 700;
      line-height: calc(17px * var(--lobby-row-scale));
    }
    .lobby-token-add:hover {
      background: #1a7a3a;
      transform: scale(1.08);
    }

    .lobby-bot-menu {
      position: fixed;
      z-index: 25000;
      min-width: 164px;
      padding: 6px;
      border: 1px solid rgba(240, 215, 140, 0.55);
      border-radius: 11px;
      background: rgba(22, 16, 10, 0.97);
      box-shadow: var(--lobby-shadow-lift);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .lobby-bot-menu[hidden] { display: none; }
    .lobby-bot-menu button[hidden] { display: none; }
    .lobby-bot-menu button {
      width: 100%;
      padding: 9px 12px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #f5e6c8;
      font: inherit;
      font-size: 0.84rem;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }
    .lobby-bot-menu button:hover,
    .lobby-bot-menu button:focus-visible {
      outline: none;
      background: rgba(255, 255, 255, 0.12);
    }
    .lobby-bot-menu button:disabled {
      opacity: 0.55;
      cursor: wait;
    }

    /* Подсказка «добавь бота»: затемнение как sell-dim на доске (Акции) —
       плавный opacity + мягкая «дыра» с blur по краю. */
    .lobby-solo-nudge-catcher {
      position: fixed;
      inset: 0;
      z-index: 23999;
      pointer-events: auto;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
    }
    .lobby-solo-nudge-dim {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 24000;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
    }
    .lobby-solo-nudge-catcher.is-on,
    .lobby-solo-nudge-dim.is-on {
      opacity: 1;
      visibility: visible;
    }
    .lobby-solo-nudge-tip {
      position: fixed;
      z-index: 25001;
      max-width: min(240px, calc(100vw - 24px));
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(240, 215, 140, 0.55);
      background: rgba(18, 12, 6, 0.96);
      color: #f5e6c8;
      box-shadow: var(--lobby-shadow-lift);
      font-family: var(--lobby-font);
      font-size: 0.88rem;
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
    }
    .lobby-solo-nudge-tip.is-on {
      opacity: 1;
      visibility: visible;
    }
    .lobby-token-avatar-cell.is-solo-nudge-hole .lobby-token-avatar {
      animation: lobbyTokenPulse 1.4s ease-in-out infinite;
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 0 0 3px rgba(245, 230, 200, 0.45);
    }

    .lobby-start-col {
      width: calc(var(--lobby-start-col-w) * var(--lobby-row-scale));
      min-width: calc(var(--lobby-start-col-w) * var(--lobby-row-scale));
      max-width: calc(var(--lobby-start-col-w) * var(--lobby-row-scale));
      /* Фикс. высота = блок «Игра на» (выше кнопки старта) — ряд не скачет
         при выборе фишки (capacity → «Начать игру»). */
      height: calc(92px * var(--lobby-row-scale));
      padding: 0;
      vertical-align: middle;
      text-align: center;
      position: relative;
      box-sizing: border-box;
    }
    .lobby-name-start-col {
      width: calc(var(--lobby-start-col-w) * var(--lobby-row-scale));
      min-width: calc(var(--lobby-start-col-w) * var(--lobby-row-scale));
      max-width: calc(var(--lobby-start-col-w) * var(--lobby-row-scale));
      height: calc(40px * var(--lobby-row-scale));
      padding: 0;
      vertical-align: middle;
      text-align: center;
      position: relative;
      box-sizing: border-box;
    }
    .lobby-start-status {
      /* Строго в .lobby-name-start-col (40px×scale) — не вылезает за ряд. */
      position: absolute;
      inset: 0;
      max-width: calc(130px * var(--lobby-row-scale));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 2px;
      font-size: calc(1.05rem * var(--lobby-row-scale));
      font-weight: 700;
      line-height: 1.15;
      white-space: pre-line;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 1;
      transition: opacity 0.4s var(--lobby-ease);
    }
    .lobby-start-status.is-error,
    .lobby-start-status.is-error.lobby-embossed-text {
      font-size: calc(0.72rem * var(--lobby-row-scale));
      line-height: 1.12;
      color: #c62828;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    .lobby-start-status.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Партия запущена: фишки остаются на местах, но серые и некликабельные */
    .lobby-row-block.is-game-live .lobby-token-avatar {
      filter: grayscale(0.88) brightness(0.82);
      opacity: 0.52;
      animation: none;
      cursor: default;
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.28);
      border-color: rgba(180, 180, 180, 0.45);
    }
    .lobby-row-block.is-game-live .is-free .lobby-token-avatar-wrap:hover,
    .lobby-row-block.is-game-live .is-free .lobby-token-avatar:hover {
      transform: none;
      filter: grayscale(0.88) brightness(0.82);
      opacity: 0.52;
    }
    .lobby-row-block.is-game-live .is-mine .lobby-token-avatar {
      border-color: rgba(180, 180, 180, 0.45);
      box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.28);
    }
    .lobby-row-block.is-game-live .lobby-token-name-input,
    .lobby-row-block.is-game-live .lobby-token-name-label {
      opacity: 0.62;
      pointer-events: none;
      filter: grayscale(0.35);
    }
    .lobby-row-block.is-game-live .lobby-token-close,
    .lobby-row-block.is-game-live .lobby-token-add {
      display: none;
    }

    .lobby-start-tip {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: 220px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(240, 215, 140, 0.55);
      background: rgba(18, 12, 6, 0.94);
      color: #f5e6c8;
      box-shadow: var(--lobby-shadow-lift);
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.35;
      text-align: left;
      pointer-events: none;
      z-index: 300;
      box-sizing: border-box;
      transition: opacity 0.15s var(--lobby-ease), visibility 0.15s var(--lobby-ease);
    }
    /* При показе подсказка переносится в body: так overflow у lobby-rows
       не обрезает её, а высокий z-index размещает окно поверх всего UI. */
    .lobby-start-tip.is-floating {
      position: fixed;
      left: auto;
      right: auto;
      bottom: auto;
      transform: none;
      visibility: visible;
      opacity: 1;
      z-index: 20000;
    }
    .lobby-start-col.has-tip:hover .lobby-start-tip {
      visibility: visible;
      opacity: 1;
    }

    .lobby-start-btn {
      font: inherit;
      font-weight: 700;
      font-size: calc(0.88rem * var(--lobby-row-scale));
      padding: calc(10px * var(--lobby-row-scale)) calc(14px * var(--lobby-row-scale));
      border-radius: calc(10px * var(--lobby-row-scale));
      border: 1px solid rgba(255, 232, 160, 0.75);
      background:
        linear-gradient(165deg, #fff6d0 0%, #f0d060 28%, #e8c547 52%, #b8922a 78%, #8a6418 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(120, 60, 10, 0.25),
        0 0 0 1px rgba(196, 30, 58, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 8px 24px rgba(180, 120, 20, 0.4),
        0 0 20px rgba(196, 30, 58, 0.2);
      color: #2a0a0c;
      cursor: pointer;
      white-space: nowrap;
      overflow: visible;
      box-sizing: border-box;
      max-width: none;
      opacity: 1;
      visibility: visible;
      letter-spacing: 0.03em;
      text-shadow: 0 1px 0 rgba(255, 248, 220, 0.45);
      transition:
        transform 0.2s var(--lobby-ease),
        box-shadow 0.25s var(--lobby-ease),
        filter 0.2s ease,
        opacity 0.4s var(--lobby-ease),
        visibility 0.4s var(--lobby-ease);
    }
    .lobby-start-btn:not(.is-blocked):not(.is-hidden) {
      animation: lobbyStartPulse 2.4s ease-in-out infinite;
    }
    @keyframes lobbyStartPulse {
      0%, 100% {
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.55),
          0 0 0 1px rgba(196, 30, 58, 0.35),
          0 2px 4px rgba(0,0,0,0.35),
          0 8px 24px rgba(180,120,20,0.4),
          0 0 16px rgba(196, 30, 58, 0.2);
      }
      50% {
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.65),
          0 0 0 2px rgba(255, 232, 160, 0.55),
          0 4px 12px rgba(0,0,0,0.4),
          0 0 0 5px rgba(196, 30, 58, 0.2),
          0 12px 36px rgba(232, 197, 71, 0.5),
          0 0 36px rgba(196, 30, 58, 0.35);
      }
    }
    .lobby-start-btn:hover:not(.is-blocked) {
      filter: brightness(1.1);
      transform: translateY(-2px) scale(1.04);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 0 0 2px rgba(255, 232, 160, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 0 0 4px rgba(196, 30, 58, 0.28),
        0 18px 40px rgba(232, 197, 71, 0.45),
        0 0 40px rgba(196, 30, 58, 0.35);
      animation: none;
    }
    .lobby-start-btn:active:not(.is-blocked) {
      transform: translateY(0);
      box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.2);
    }
    .lobby-start-btn.is-blocked {
      opacity: 0.48;
      cursor: default;
      border-color: #4a4a4a;
      background: linear-gradient(165deg, #6a6a6a, #3f3f3f);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.25);
      filter: none;
      transform: none;
    }
    .lobby-start-btn.is-hidden {
      /* Не display:none — колонка 6 должна совпадать у всех 5 столов. */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    /* Пустой стол: вместо «Начать игру» — блок «Игра на» (кнопка не занимает место). */
    .lobby-start-col.is-capacity .lobby-start-btn {
      display: none;
    }
    .lobby-start-col.is-idle {
      pointer-events: none;
    }

    .lobby-capacity {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: calc(4px * var(--lobby-row-scale));
      width: 100%;
      max-width: calc(122px * var(--lobby-row-scale));
      margin: 0 auto;
      box-sizing: border-box;
    }
    .lobby-capacity.is-hidden {
      display: none;
    }
    .lobby-capacity-label {
      font-size: calc(0.72rem * var(--lobby-row-scale));
      font-weight: 700;
      line-height: 1.1;
      white-space: nowrap;
    }
    .lobby-capacity-btns {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-content: center;
      gap: calc(3px * var(--lobby-row-scale));
      width: calc(70px * var(--lobby-row-scale));
    }
    .lobby-capacity-btn {
      font: inherit;
      font-weight: 700;
      font-size: calc(0.72rem * var(--lobby-row-scale));
      width: 100%;
      height: calc(22px * var(--lobby-row-scale));
      padding: 0;
      border-radius: calc(6px * var(--lobby-row-scale));
      border: 1px solid #256b3c;
      background: linear-gradient(165deg, #4aba72 0%, #2a7d48 55%, #1f5f38 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 1px 3px rgba(0, 0, 0, 0.2);
      color: #fff;
      cursor: pointer;
      line-height: 1;
      box-sizing: border-box;
    }
    .lobby-capacity-btn:hover {
      filter: brightness(1.08);
    }
    .lobby-capacity-btn:active {
      filter: brightness(0.96);
    }
    .lobby-token-name-cell.is-cap-full,
    .lobby-token-avatar-cell.is-cap-full {
      pointer-events: none;
      opacity: 0.45;
    }

    /* ── Auth: не вылезает за экран, скроллится при низкой высоте ── */
    .lobby-auth {
      position: fixed;
      top: 12px;
      right: 4px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      max-width: min(calc(var(--lobby-auth-w) + 100px), calc(100vw - 8px));
      max-height: calc(100dvh - 24px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
      animation: lobbyFadeIn 0.55s var(--lobby-ease) 0.1s both;
    }
    .lobby-auth-bar {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 6px;
      flex-shrink: 0;
      /* Узкая правая колонка: не шире кнопки/аккаунта — не наползает на «Монополия» */
      width: max-content;
      max-width: min(var(--lobby-auth-w), calc(100vw - 16px));
    }
    .lobby-auth-toggle {
      font: inherit;
      font-size: 0.84rem;
      font-weight: 600;
      height: 40px;
      padding: 0 16px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background:
        linear-gradient(165deg, rgba(48, 42, 34, 0.88), rgba(22, 20, 18, 0.9));
      color: #f0ede6;
      cursor: pointer;
      white-space: nowrap;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.28),
        0 8px 20px rgba(0, 0, 0, 0.18);
      transition: transform 0.2s var(--lobby-ease), box-shadow 0.25s var(--lobby-ease), border-color 0.2s ease;
      flex-shrink: 0;
    }
    .lobby-auth-toggle-short { display: none; }
    /* Узкий/низкий экран: короткая «Войти» — остаёмся в правом поле */
    @media (max-width: 900px), (max-height: 420px) {
      .lobby-auth-toggle-full { display: none; }
      .lobby-auth-toggle-short { display: inline; }
      .lobby-auth-toggle { padding: 0 14px; }
    }
    .lobby-auth-toggle:hover {
      border-color: rgba(255, 255, 255, 0.38);
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 4px 12px rgba(0, 0, 0, 0.32),
        0 12px 28px rgba(0, 0, 0, 0.22);
    }
    .lobby-auth-panel {
      width: min(248px, 100%);
      max-height: calc(100dvh - 100px);
      overflow-y: auto;
      overscroll-behavior: contain;
      background:
        linear-gradient(165deg, rgba(36, 32, 28, 0.96), rgba(16, 14, 12, 0.97));
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 14px;
      padding: 14px;
      box-shadow: var(--lobby-shadow-lift);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      animation: lobbyAuthIn 0.28s var(--lobby-ease) both;
      scrollbar-width: thin;
    }
    .lobby-auth-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }
    .lobby-auth-tab {
      flex: 1 1 auto;
      font: inherit;
      font-size: 0.8rem;
      font-weight: 600;
      padding: 7px 4px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: transparent;
      color: #cfcac0;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .lobby-auth-tab:hover {
      border-color: rgba(255, 255, 255, 0.22);
      color: #fff;
    }
    .lobby-auth-tab.is-active {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.22);
      color: #fff;
    }
    .lobby-auth-form {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .lobby-auth-form[hidden] { display: none; }
    .lobby-auth-form input {
      font: inherit;
      font-size: 0.85rem;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(0, 0, 0, 0.35);
      color: #f0ede6;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .lobby-auth-form input:focus {
      border-color: rgba(120, 180, 255, 0.55);
      box-shadow: 0 0 0 3px rgba(80, 140, 220, 0.22);
    }
    .lobby-auth-form button[type="submit"] {
      font: inherit;
      font-weight: 700;
      font-size: 0.85rem;
      padding: 9px 12px;
      border-radius: 8px;
      border: 1px solid #2a6a98;
      background: linear-gradient(165deg, #3d8fc4, #2a6a98);
      color: #fff;
      cursor: pointer;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(30, 80, 120, 0.35);
      transition: filter 0.2s ease, transform 0.2s var(--lobby-ease);
    }
    .lobby-auth-form button[type="submit"]:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }
    .lobby-auth-error {
      min-height: 1.1em;
      font-size: 0.78rem;
      color: #ff9d9d;
    }
    .lobby-account[hidden] { display: none; }
    .lobby-account {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      background:
        linear-gradient(165deg, rgba(48, 42, 34, 0.88), rgba(22, 20, 18, 0.9));
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 12px;
      padding: 12px 14px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        var(--lobby-shadow-soft);
      animation: lobbyAuthIn 0.28s var(--lobby-ease) both;
    }
    .lobby-account-name {
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.01em;
    }
    .lobby-account-stars {
      font-size: 0.95rem;
      letter-spacing: 2px;
      color: #ffd24a;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    }
    .lobby-account-logout {
      font: inherit;
      font-size: 0.78rem;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: transparent;
      color: #f0ede6;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .lobby-account-logout:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.35);
    }
    .lobby-sound-toggle {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 7px;
      font-size: 0.82rem;
      font-weight: 500;
      color: #f0ede6;
      cursor: pointer;
      user-select: none;
      padding: 2px 2px 0;
      opacity: 0.9;
      transition: opacity 0.2s ease;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .lobby-sound-toggle:hover { opacity: 1; }
    .lobby-sound-toggle input {
      cursor: pointer;
      accent-color: var(--champagne, #e8c547);
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }
    .lobby-sound-label { white-space: nowrap; }

    /* Низкая высота: auth у правого края; «Монополия» по центру */
    @media (max-height: 700px) {
      .lobby-auth { right: 2px; }
      .lobby-auth-bar { gap: 4px; }
    }

    /* Низкая высота: компактнее; «Монополия» не сдвигаем — только auth */
    @media (max-height: 560px) {
      :root { --lobby-header-h: 64px; }
      .lobby-title {
        font-size: clamp(1.15rem, 2.4vw, 1.45rem);
      }
      .lobby-auth { top: 6px; right: 2px; gap: 6px; }
      .lobby-auth-toggle { height: 34px; font-size: 0.78rem; padding: 0 12px; }
      .lobby-auth-panel {
        max-height: calc(100dvh - 78px);
        padding: 10px;
      }
      .lobby-auth-form { gap: 6px; }
      .lobby-auth-form input { padding: 6px 8px; font-size: 0.8rem; }
      .lobby-auth-form button[type="submit"] { padding: 7px 10px; }
      /* Не ужимаем боковой padding — иначе фишки/кнопка залезают в кайму
         рамки; вместо этого fitLobbyScale уменьшает --lobby-row-scale. */
      .lobby-row-block {
        --lobby-row-pad-y: 6px;
        --lobby-row-pad-x: 14px;
        margin-bottom: 8px;
      }
      .lobby-rows { max-height: calc(100dvh - var(--lobby-content-top) - var(--lobby-hint-h) - 16px); }
    }

    @media (max-height: 420px) {
      :root { --lobby-header-h: 56px; }
      .lobby-title {
        font-size: clamp(1rem, 2.2vw, 1.25rem);
      }
      .lobby-auth { top: 4px; right: 2px; }
      .lobby-auth-panel {
        max-height: calc(100dvh - 64px);
      }
      .lobby-account { padding: 8px 10px; gap: 4px; }
      body { padding-bottom: 8px; }
      @media (orientation: portrait) {
        body { padding-bottom: 180px; }
      }
    }

    /* Узкий экран: auth у правого края */
    @media (max-width: 900px) {
      .lobby-auth { right: 2px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
  
/* ── Lobby2 imperial red–gold chrome ── */
body.lobby-theme-imperial::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255, 200, 80, 0.012) 3px,
      rgba(255, 200, 80, 0.012) 4px
    );
  opacity: 0.5;
  mix-blend-mode: overlay;
}
#lobbyAmbient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.88;
}
body.lobby-theme-imperial {
  /* Люстра сверху (~100–110px) + «Монополия» у нижнего края шапки */
  --lobby-header-h: clamp(156px, 21vh, 180px);
}
body.lobby-theme-imperial .lobby-title {
  /* Тот же горизонтальный центр, что у люстры (viewport 50%) */
  left: 50%;
  right: auto;
  width: max-content;
  max-width: min(92vw, calc(100vw - 24px));
  transform: translateX(-50%);
  align-items: flex-end;
  justify-content: center;
  padding: 0 8px 8px;
  overflow: visible;
}
@media (orientation: portrait) {
  body.lobby-theme-imperial .lobby-title {
    left: 50%;
    right: auto;
  }
}
.lobby-chandelier-light {
  position: fixed;
  top: 62px;
  left: 50%;
  width: min(1320px, 116vw);
  height: calc(100dvh - 62px);
  z-index: 2;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.62;
  background:
    radial-gradient(ellipse 76% 105% at 50% -4%, rgba(255, 244, 202, 0.17) 0%, rgba(255, 232, 160, 0.09) 28%, rgba(232, 197, 71, 0.045) 52%, rgba(232, 197, 71, 0.018) 72%, transparent 94%),
    radial-gradient(ellipse 110% 86% at 50% 20%, rgba(255, 235, 170, 0.05), rgba(255, 229, 150, 0.018) 52%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), #000 14%, rgba(0, 0, 0, 0.9) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), #000 14%, rgba(0, 0, 0, 0.9) 72%, transparent 100%);
  mix-blend-mode: screen;
  filter: blur(26px) saturate(1.5) brightness(2);
  animation: chandelierLightBreathe 4s ease-in-out infinite;
}
.lobby-chandelier {
  position: fixed;
  top: 8px;
  left: 50%;
  width: min(390px, 72vw);
  height: 92px;
  z-index: 46;
  transform: translateX(-50%);
  pointer-events: none;
  filter:
    drop-shadow(0 5px 4px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 12px rgba(255, 220, 112, 0.46));
  animation: lobbyChandelier 5s ease-in-out infinite;
}
.lobby-chandelier::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4px;
  height: 58px;
  background:
    radial-gradient(circle at 11% 32%, rgba(255, 250, 220, 0.98) 0 2px, #ffd86b 3px 5px, transparent 7px),
    radial-gradient(circle at 29% 17%, rgba(255, 250, 220, 0.98) 0 2px, #ffd86b 3px 5px, transparent 7px),
    radial-gradient(circle at 50% 9%, rgba(255, 250, 220, 0.98) 0 2px, #ffd86b 3px 5px, transparent 7px),
    radial-gradient(circle at 71% 17%, rgba(255, 250, 220, 0.98) 0 2px, #ffd86b 3px 5px, transparent 7px),
    radial-gradient(circle at 89% 32%, rgba(255, 250, 220, 0.98) 0 2px, #ffd86b 3px 5px, transparent 7px);
  filter: drop-shadow(0 0 7px #ffe29a);
  animation: chandelierCandles 2.6s ease-in-out infinite alternate;
}
.chandelier-chain {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 7px;
  height: 38px;
  transform: translateX(-50%);
  border-left: 2px solid #7a5211;
  border-right: 2px solid #e8c547;
  background: repeating-linear-gradient(0deg, transparent 0 5px, #fff0b8 5px 7px);
  box-shadow: 0 0 5px rgba(255, 232, 160, 0.38);
}
.chandelier-crown {
  position: absolute;
  top: 21px;
  left: 50%;
  width: 42px;
  height: 18px;
  transform: translateX(-50%);
  border: 2px solid #e8c547;
  border-radius: 50% 50% 35% 35%;
  background: linear-gradient(90deg, #6b430a, #fff0b8 45%, #b17b16 70%, #4d2d05);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.45);
}
.chandelier-bowl {
  position: absolute;
  left: 50%;
  top: 47px;
  width: 92px;
  height: 31px;
  transform: translateX(-50%);
  border: 3px double #f0d060;
  border-top: 0;
  border-radius: 0 0 50% 50%;
  background:
    radial-gradient(ellipse at 50% 5%, #fff0b8 0 8%, #c69425 35%, #704408 74%, #2e1902 100%);
  box-shadow:
    inset 0 -5px 8px rgba(47, 19, 0, 0.58),
    0 3px 8px rgba(0, 0, 0, 0.5);
}
.chandelier-bowl::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -17px;
  width: 14px;
  height: 18px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #ffe9a0;
  background: linear-gradient(135deg, #fff9de, #d6a832 48%, #704408);
  box-shadow: 0 0 9px rgba(255, 232, 160, 0.58);
}
.chandelier-arm {
  position: absolute;
  top: 47px;
  width: 76px;
  height: 31px;
  border-bottom: 5px double #d3a62f;
  border-radius: 0 0 65% 65%;
}
.chandelier-arm::before {
  content: "";
  position: absolute;
  top: -4px;
  width: 9px;
  height: 23px;
  border: 1px solid #ffe9a0;
  border-radius: 3px 3px 45% 45%;
  background: linear-gradient(90deg, #704408, #f0d060 45%, #8a6418);
}
.chandelier-arm--1 { left: 12%; transform: rotate(8deg); }
.chandelier-arm--2 { left: 27%; transform: rotate(3deg); }
.chandelier-arm--3 { right: 27%; transform: scaleX(-1) rotate(3deg); }
.chandelier-arm--4 { right: 12%; transform: scaleX(-1) rotate(8deg); }
.chandelier-arm--1::before,
.chandelier-arm--2::before { left: -2px; }
.chandelier-arm--3::before,
.chandelier-arm--4::before { left: -2px; }
.chandelier-drop {
  position: absolute;
  top: 67px;
  width: 7px;
  height: 13px;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 246, 208, 0.86);
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(232,197,71,0.5) 45%, rgba(122,16,32,0.42));
  box-shadow: 0 0 7px rgba(255, 232, 160, 0.56);
}
.chandelier-drop--1 { left: 15%; }
.chandelier-drop--2 { left: 31%; top: 76px; }
.chandelier-drop--3 { left: calc(50% - 3px); top: 80px; }
.chandelier-drop--4 { right: 31%; top: 76px; }
.chandelier-drop--5 { right: 15%; }
@keyframes lobbyChandelier {
  0%, 100% { transform: translateX(-50%) rotate(-0.25deg); }
  50% { transform: translateX(-50%) rotate(0.25deg); }
}
@keyframes chandelierCandles {
  from { opacity: 0.78; }
  to { opacity: 1; }
}
@keyframes chandelierLightBreathe {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

.lobby-panel-empty {
  color: var(--ivory-dim) !important;
}
.lobby-hint {
  color: var(--gold-bright);
  text-shadow: 0 1px 8px rgba(80, 0, 16, 0.65), 0 0 16px rgba(196, 30, 58, 0.25);
}
.lobby-token-avatar {
  border: 2px solid rgba(255, 232, 160, 0.5);
}
.is-free .lobby-token-avatar-wrap:hover {
  transform: translateY(-5px) scale(1.1);
  filter: drop-shadow(0 8px 18px rgba(232, 197, 71, 0.45)) drop-shadow(0 0 12px rgba(196, 30, 58, 0.35));
}
.is-mine .lobby-token-avatar {
  border-color: rgba(255, 232, 160, 0.95) !important;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.45),
    0 3px 12px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(232, 197, 71, 0.5),
    0 0 0 6px rgba(196, 30, 58, 0.25),
    0 0 28px rgba(232, 197, 71, 0.4) !important;
}
.lobby-auth-toggle {
  border-color: rgba(232, 197, 71, 0.45) !important;
  background: linear-gradient(165deg, rgba(90, 16, 28, 0.95), rgba(22, 6, 10, 0.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 160, 0.18),
    0 0 0 1px rgba(196, 30, 58, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.35) !important;
}
.lobby-auth-toggle:hover {
  border-color: rgba(255, 232, 160, 0.75) !important;
}
.lobby-auth-panel {
  border-color: rgba(232, 197, 71, 0.4) !important;
  background: linear-gradient(165deg, rgba(72, 14, 24, 0.97), rgba(16, 4, 8, 0.98)) !important;
}
.lobby-auth-tab.is-active {
  background: rgba(196, 30, 58, 0.35) !important;
  border-color: rgba(232, 197, 71, 0.45) !important;
  color: #fff6d0 !important;
}
.lobby-auth-form button[type="submit"] {
  border-color: rgba(232, 197, 71, 0.65) !important;
  background: linear-gradient(165deg, #f0d060, #c9a227 55%, #8a6418) !important;
  color: #2a0a0c !important;
  box-shadow: 0 4px 14px rgba(180, 100, 20, 0.4), 0 0 12px rgba(196, 30, 58, 0.2) !important;
}
.lobby-account {
  border-color: rgba(232, 197, 71, 0.45) !important;
  background: linear-gradient(165deg, rgba(72, 14, 24, 0.92), rgba(22, 6, 10, 0.95)) !important;
}
.lobby-account-stars {
  color: var(--champagne) !important;
  text-shadow: 0 0 10px rgba(232, 197, 71, 0.55) !important;
}
.lobby-capacity-btn {
  border-color: rgba(201, 162, 39, 0.75) !important;
  background: linear-gradient(165deg, #fffceb 0%, #ffe9a0 18%, #e8c547 42%, #c9a227 68%, #8a6418 100%) !important;
  color: #2a0a0c !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.45),
    inset 0 -1px 0 rgba(120, 60, 10, 0.28),
    0 0 0 1px rgba(196, 30, 58, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.28) !important;
  text-shadow: 0 1px 0 rgba(255, 248, 220, 0.4);
}
.lobby-bot-menu,
.lobby-solo-nudge-tip,
.lobby-start-tip {
  border-color: rgba(232, 197, 71, 0.55) !important;
  background: rgba(28, 6, 10, 0.97) !important;
  color: #fff0b8 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 24px rgba(196, 30, 58, 0.2) !important;
}
.lobby-start-btn.is-blocked {
  animation: none !important;
}

/* ── Парадная архитектура: карниз, бархат, колонны и герб ── */
.lobby-imperial-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.imperial-cornice {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 44;
  background:
    linear-gradient(90deg, transparent 0 2%, rgba(255, 240, 176, 0.82) 8%, #8a6418 18%, #f0d060 50%, #8a6418 82%, rgba(255, 240, 176, 0.82) 92%, transparent 98%),
    repeating-linear-gradient(90deg, #5b3a0a 0 12px, #e8c547 12px 17px, #8a6418 17px 29px);
  box-shadow:
    0 2px 0 rgba(255, 246, 208, 0.42),
    0 5px 10px rgba(0, 0, 0, 0.65),
    0 0 24px rgba(232, 197, 71, 0.22);
}
.imperial-cornice::after {
  content: "";
  position: absolute;
  inset: 3px 0;
  border-top: 1px solid rgba(255, 248, 220, 0.48);
  border-bottom: 1px solid rgba(50, 22, 0, 0.8);
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 246, 208, 0.22) 12px 14px);
}
.imperial-cornice--top {
  top: 0;
  height: 12px;
}
.imperial-cornice--bottom {
  bottom: 0;
  height: 9px;
  transform: rotate(180deg);
  opacity: 0.72;
}

.imperial-curtain {
  position: fixed;
  top: 10px;
  width: clamp(95px, 12vw, 190px);
  height: clamp(130px, 25vh, 260px);
  z-index: 3;
  opacity: 1;
  background:
    linear-gradient(90deg, transparent, rgba(255, 228, 140, 0.32) 24%, transparent 29% 42%, rgba(255, 235, 160, 0.28) 47%, transparent 54% 70%, rgba(255, 228, 140, 0.24) 77%, transparent),
    linear-gradient(105deg, #3a0810 0%, #a01830 38%, #6a0e1c 72%, #220408 100%);
  border-bottom: 5px solid #d4a84a;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.62)) brightness(1.12);
}
.imperial-curtain--left {
  left: 0;
  border-radius: 0 0 90% 0;
  transform: skewY(-5deg);
}
.imperial-curtain--right {
  right: 0;
  /* Тот же shape, что слева — зеркало даёт scaleX(-1); иначе двойное
     отражение (radius + flip) оставляет складку «как слева». */
  border-radius: 0 0 90% 0;
  transform: scaleX(-1) skewY(-5deg);
}

.imperial-column {
  position: fixed;
  top: 92px;
  bottom: 28px;
  width: 50px;
  z-index: 2;
  opacity: 0.78;
  background:
    repeating-linear-gradient(90deg, rgba(98, 58, 12, 0.92) 0 4px, rgba(255, 240, 180, 0.88) 5px 8px, rgba(170, 118, 28, 0.95) 9px 13px),
    linear-gradient(90deg, #6b450e, #ffe08a 50%, #6b450e);
  border: 1px solid rgba(255, 240, 180, 0.78);
  box-shadow:
    inset 7px 0 10px rgba(255, 246, 208, 0.28),
    inset -8px 0 12px rgba(38, 14, 0, 0.55),
    0 12px 24px rgba(0, 0, 0, 0.55);
  filter: brightness(1.1);
}
.imperial-column::before,
.imperial-column::after {
  content: "";
  position: absolute;
  left: -12px;
  width: 72px;
  height: 20px;
  border: 1px solid rgba(255, 237, 174, 0.64);
  background:
    linear-gradient(135deg, transparent 18%, rgba(255, 240, 176, 0.34) 19% 24%, transparent 25% 75%, rgba(255, 240, 176, 0.34) 76% 81%, transparent 82%),
    linear-gradient(#f0d060, #8a6418 55%, #3f2707);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.imperial-column::before {
  top: -19px;
  border-radius: 7px 7px 2px 2px;
}
.imperial-column::after {
  bottom: -19px;
  border-radius: 2px 2px 7px 7px;
  transform: scaleY(-1);
}
.imperial-column i {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(255, 240, 176, 0.75);
  background: #7a1020;
  box-shadow: 0 82px 0 #7a1020, 0 164px 0 #7a1020, 0 246px 0 #7a1020, 0 328px 0 #7a1020;
}
.imperial-column--left { left: 7px; }
.imperial-column--right { right: 7px; }

.imperial-seal {
  position: fixed;
  top: 10px;
  left: 50%;
  width: 62px;
  height: 62px;
  z-index: 42;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border: 2px solid #e8c547;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff0b8 0 5%, #c9a227 6% 10%, #7a1020 11% 54%, #3a0610 55% 67%, #e8c547 68% 73%, #6b4e12 74%);
  color: #ffe9a0;
  font-family: var(--lobby-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-shadow: 0 1px 0 #4a2600, 0 0 10px rgba(255, 232, 160, 0.72);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.6), 0 0 24px rgba(232, 197, 71, 0.28);
  opacity: 0.72;
}
.imperial-seal::before,
.imperial-seal::after {
  content: "";
  position: absolute;
  top: 25px;
  width: 58px;
  height: 26px;
  border-top: 3px double #c9a227;
  border-radius: 50%;
}
.imperial-seal::before { right: 48px; transform: rotate(-12deg); }
.imperial-seal::after { left: 48px; transform: rotate(12deg); }

/* Позолоченная резьба на основных предметах интерьера. */
body.lobby-theme-imperial .lobby-row-block {
  border-width: 2px;
  border-color: rgba(240, 208, 96, 0.66);
  outline: 1px solid rgba(69, 30, 4, 0.85);
  outline-offset: 3px;
  box-shadow:
    inset 0 8px 22px rgba(255, 150, 170, 0.08),
    inset 0 -10px 26px rgba(20, 0, 8, 0.22),
    inset 0 1px 0 rgba(255, 246, 208, 0.28),
    var(--lobby-shadow-soft);
}
body.lobby-theme-imperial .lobby-row-block:nth-child(1) {
  box-shadow:
    inset 0 12px 30px rgba(255, 160, 180, 0.12),
    inset 0 -12px 28px rgba(20, 0, 8, 0.2),
    inset 0 1px 0 rgba(255, 250, 224, 0.4),
    0 0 36px rgba(232, 197, 71, 0.15),
    var(--lobby-shadow-soft);
}
body.lobby-theme-imperial .lobby-row-block:nth-child(2) {
  box-shadow:
    inset 0 10px 26px rgba(255, 150, 170, 0.1),
    inset 0 -12px 28px rgba(20, 0, 8, 0.2),
    inset 0 1px 0 rgba(255, 246, 208, 0.34),
    0 0 28px rgba(232, 197, 71, 0.1),
    var(--lobby-shadow-soft);
}
body.lobby-theme-imperial .lobby-row-block::before {
  inset: 5px;
  border: 1px solid rgba(255, 233, 160, 0.42);
  background:
    radial-gradient(circle at 0 0, transparent 0 12px, rgba(232, 197, 71, 0.38) 13px 15px, transparent 16px),
    radial-gradient(circle at 100% 0, transparent 0 12px, rgba(232, 197, 71, 0.38) 13px 15px, transparent 16px),
    radial-gradient(circle at 0 100%, transparent 0 12px, rgba(232, 197, 71, 0.38) 13px 15px, transparent 16px),
    radial-gradient(circle at 100% 100%, transparent 0 12px, rgba(232, 197, 71, 0.38) 13px 15px, transparent 16px);
  box-shadow:
    inset 0 12px 30px rgba(255, 140, 160, 0.12),
    inset 0 -20px 40px rgba(24, 0, 10, 0.38),
    inset 0 0 44px rgba(80, 0, 20, 0.26),
    inset 0 0 0 2px rgba(92, 10, 22, 0.45),
    0 0 12px rgba(232, 197, 71, 0.12);
}
body.lobby-theme-imperial .lobby-real-players {
  border: 2px ridge rgba(232, 197, 71, 0.7);
  border-radius: 8px;
  outline: 1px solid rgba(255, 232, 160, 0.2);
  outline-offset: 2px;
  color: var(--champagne-soft, #f5e6c8);
  font-family: var(--lobby-display, var(--lobby-font));
  letter-spacing: 0.04em;
}
body.lobby-theme-imperial .lobby-panel {
  border: 2px ridge rgba(232, 197, 71, 0.7);
  border-radius: 8px;
  outline: 1px solid rgba(255, 232, 160, 0.2);
  outline-offset: 3px;
}
body.lobby-theme-imperial .lobby-panel::before {
  content: "ЖУРНАЛЪ";
  flex: 0 0 auto;
  display: block;
  padding: 7px 8px 6px;
  border-bottom: 3px double rgba(232, 197, 71, 0.52);
  background: linear-gradient(90deg, rgba(58, 6, 16, 0.25), rgba(232, 197, 71, 0.12), rgba(58, 6, 16, 0.25));
  color: var(--champagne-soft);
  font: 700 0.68rem/1 var(--lobby-display);
  letter-spacing: 0.15em;
  text-align: center;
  text-shadow: 0 1px 5px #000;
}
body.lobby-theme-imperial .lobby-panel-composer {
  border-radius: 4px;
  border-style: double;
  border-width: 3px;
}
body.lobby-theme-imperial .lobby-auth-toggle,
body.lobby-theme-imperial .lobby-account,
body.lobby-theme-imperial .lobby-auth-panel {
  border-radius: 5px;
  outline: 1px solid rgba(232, 197, 71, 0.2);
  outline-offset: 3px;
}
body.lobby-theme-imperial .lobby-start-btn {
  border-radius: 4px;
  border-width: 2px;
  outline: 1px solid rgba(90, 42, 5, 0.72);
  outline-offset: 2px;
  font-family: var(--lobby-display);
  font-size: calc(0.94rem * var(--lobby-row-scale));
  letter-spacing: 0.055em;
}
body.lobby-theme-imperial .lobby-token-avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border: 1px solid rgba(232, 197, 71, 0.38);
  transform: rotate(45deg);
  opacity: 0.58;
  transition: transform 0.35s var(--lobby-ease), opacity 0.25s ease;
}
body.lobby-theme-imperial .is-free .lobby-token-avatar-wrap:hover::before,
body.lobby-theme-imperial .is-mine .lobby-token-avatar-wrap::before {
  transform: rotate(135deg);
  opacity: 0.95;
  box-shadow: 0 0 14px rgba(232, 197, 71, 0.36);
}

@media (max-width: 900px), (orientation: portrait) {
  .imperial-column {
    width: 28px;
    opacity: 0.55;
  }
  .imperial-column--left { left: -12px; }
  .imperial-column--right { right: -12px; }
  .imperial-column::before,
  .imperial-column::after {
    left: -8px;
    width: 42px;
  }
  .imperial-curtain {
    width: 92px;
    height: 125px;
    opacity: 0.88;
  }
  .imperial-seal {
    width: 46px;
    height: 46px;
    top: 8px;
    font-size: 1rem;
    opacity: 0.46;
  }
  .imperial-seal::before,
  .imperial-seal::after {
    display: none;
  }
}
@media (max-height: 560px) {
  body.lobby-theme-imperial {
    --lobby-header-h: 132px;
  }
  body.lobby-theme-imperial .lobby-title {
    font-size: clamp(1.1rem, 2.4vw, 1.45rem);
    padding-bottom: 4px;
  }
  .lobby-chandelier {
    top: -6px;
    width: min(300px, 60vw);
    height: 74px;
  }
  .lobby-chandelier-light {
    top: 48px;
    height: calc(100dvh - 48px);
  }
}
@media (max-height: 420px) {
  body.lobby-theme-imperial {
    --lobby-header-h: 112px;
  }
  body.lobby-theme-imperial .lobby-title {
    font-size: clamp(0.95rem, 2.2vw, 1.2rem);
  }
  .lobby-chandelier {
    top: -10px;
    width: min(260px, 56vw);
    height: 64px;
  }
  .lobby-chandelier-light {
    top: 40px;
    height: calc(100dvh - 40px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-row-block { transform: none !important; }
  .lobby-row-block::after,
  .lobby-start-btn:not(.is-blocked),
  .lobby-title-word,
  .lobby-chandelier,
  .lobby-chandelier::before,
  .lobby-chandelier-light,
  .lobby-top-cells-track { animation: none !important; }
}

/* Однократный сдвиг рядов при открытии Роскоши на мобильных */
@keyframes lobbyRowsOpenNudge {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(22px, 0, 0); }
}
@media (max-width: 1080px), (orientation: portrait), (pointer: coarse) {
  body.lobby-theme-imperial .lobby-rows.is-open-nudge > .lobby-row-block {
    animation: lobbyRowsOpenNudge 1.15s cubic-bezier(0.33, 1, 0.68, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lobby-theme-imperial .lobby-rows.is-open-nudge > .lobby-row-block {
    animation: none !important;
  }
}

/* ── Топ‑7 компаний справа от lobby-rows (только Роскошь) ── */
body.lobby-theme-imperial .lobby-top-cells {
  /* Тот же fade 40px, что у .lobby-rows */
  --lobby-top-cells-fade: 40px;
  position: fixed;
  z-index: 3;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(210px, 24vw);
  padding: 0;
  pointer-events: none;
  color: #f5e6c8;
  font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
}
body.lobby-theme-imperial .lobby-top-cells[hidden] {
  display: none !important;
}
body.lobby-theme-imperial .lobby-top-cells-head {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  padding: 0 4px;
  color: #f0d77d;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 0 rgba(80, 40, 10, 0.45);
}
/* Фейд как у lobby-rows — на области ленты */
body.lobby-theme-imperial .lobby-top-cells-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: var(--lobby-top-cells-fade) 0;
  box-sizing: border-box;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--lobby-top-cells-fade),
    #000 calc(100% - var(--lobby-top-cells-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--lobby-top-cells-fade),
    #000 calc(100% - var(--lobby-top-cells-fade)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body.lobby-theme-imperial .lobby-top-cells-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  --lobby-top-cells-copies: 3;
  animation: lobbyTopCellsScroll 48s linear infinite;
}
body.lobby-theme-imperial .lobby-top-cells-track.is-paused {
  animation-play-state: paused;
}
@keyframes lobbyTopCellsScroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-100% / var(--lobby-top-cells-copies, 3))); }
}
body.lobby-theme-imperial .lobby-top-cells-item {
  position: relative;
  overflow: hidden;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 215, 140, 0.38);
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(72, 18, 28, 0.82), rgba(28, 8, 12, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 160, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.22);
}
/* Шов «Топ»: позиция в gap; вид черты/ромбика — общий блок в lobby.css. */
body.lobby-theme-imperial .lobby-top-cells-item.is-last {
  overflow: visible;
}
body.lobby-theme-imperial .lobby-top-cells-item.is-last::after {
  left: 8%;
  right: 8%;
  top: calc(100% + 4.5px);
  height: 3px;
  z-index: 6;
}
body.lobby-theme-imperial .lobby-top-cells-item.is-last::before {
  top: calc(100% + 6px);
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 7;
}
body.lobby-theme-imperial .lobby-top-cells-item.is-player {
  pointer-events: auto;
  cursor: default;
  overflow: visible;
}
body.lobby-theme-imperial .lobby-top-cells-flag {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
  pointer-events: none;
}
body.lobby-theme-imperial .lobby-top-cells-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
}
body.lobby-theme-imperial .lobby-top-cells-top {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}
body.lobby-theme-imperial .lobby-top-cells-rank,
body.lobby-theme-imperial .lobby-top-cells-ratio {
  color: #f0d77d;
  font-size: 1.575rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  flex-shrink: 0;
}
body.lobby-theme-imperial .lobby-top-cells-ratio {
  color: #ffe9a8;
}
/* Топ игроков: №+имя в одной строке; ⭐ второй строкой по центру, поверх фишки */
body.lobby-theme-imperial .lobby-top-cells-item.is-player .lobby-top-cells-body {
  z-index: 3;
  padding-right: 56px;
  max-width: 100%;
  align-items: stretch;
  gap: 2px;
}
body.lobby-theme-imperial .lobby-top-cells-item.is-player .lobby-top-cells-top {
  gap: 8px;
  justify-content: flex-start;
  align-items: baseline;
  min-width: 0;
}
body.lobby-theme-imperial .lobby-top-cells-item.is-player .lobby-top-cells-name {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
body.lobby-theme-imperial .lobby-top-cells-item.is-player .lobby-top-cells-ratio {
  position: relative;
  z-index: 3;
  align-self: center;
  margin: 0;
  padding: 2px 6px 1px;
  font-size: 1.2rem; /* 0.96 × 1.25 */
  letter-spacing: 0.01em;
  line-height: 1;
  flex-shrink: 0;
  overflow: visible;
  background: transparent;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 6px rgba(20, 6, 8, 0.55);
}
body.lobby-theme-imperial .lobby-top-cells-item.is-player .lobby-top-cells-ratio::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6px -12px;
  background: rgba(28, 8, 12, 0.48);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  -webkit-mask-image: radial-gradient(
    ellipse 58% 62% at 50% 50%,
    #000 18%,
    rgba(0, 0, 0, 0.55) 48%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 58% 62% at 50% 50%,
    #000 18%,
    rgba(0, 0, 0, 0.55) 48%,
    transparent 78%
  );
  pointer-events: none;
}
body.lobby-theme-imperial .lobby-top-cells-item.is-player .lobby-top-cells-player-mark {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 1; /* ниже body → звёзды поверх фишки */
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  pointer-events: none;
}
body.lobby-theme-imperial .lobby-top-cells-name {
  overflow: hidden;
  max-width: 92%;
  color: #fff4d8;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(20, 6, 8, 0.35);
}
body.lobby-theme-imperial .lobby-top-cells-toggle {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(240, 215, 140, 0.78);
  border-radius: 999px;
  background: transparent;
  color: #f0d77d;
  font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 170, 0.28),
    0 0 12px rgba(240, 200, 100, 0.18);
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
body.lobby-theme-imperial .lobby-top-cells-toggle:hover,
body.lobby-theme-imperial .lobby-top-cells-toggle:focus-visible {
  outline: none;
  color: #ffe9a8;
  border-color: rgba(255, 230, 160, 0.95);
  background: rgba(240, 200, 100, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 170, 0.4),
    0 0 16px rgba(240, 200, 100, 0.32);
}
body.lobby-theme-imperial .lobby-top-cells-item.is-player .lobby-top-cells-avatar {
  /* Круглый «кубик»/цвет вместо растянутого флага */
  position: absolute;
  inset: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 215, 140, 0.55);
  opacity: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 170, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.28);
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
}
body.lobby-theme-imperial .lobby-top-cells-item.is-player .lobby-top-cells-avatar.has-texture {
  background-image: none !important;
  background-size: cover;
  overflow: hidden;
}
body.lobby-theme-imperial .lobby-top-cells-item.is-player .lobby-top-cells-avatar.has-texture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
}
@media (max-width: 980px), (orientation: portrait) {
  body.lobby-theme-imperial .lobby-top-cells:not(.is-mobile-swap) {
    display: none !important;
  }
  /* opacity: дети не могут «просветить» кнопку Наблюдать, в отличие от visibility */
  body.lobby-theme-imperial .lobby-rows.is-mobile-hidden {
    opacity: 0;
    pointer-events: none;
  }
  body.lobby-theme-imperial .lobby-top-cells.is-mobile-swap {
    display: flex !important;
    position: fixed;
    z-index: 30;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    padding: 8px 10px 10px;
    pointer-events: auto;
    color: #f5e6c8;
    background:
      linear-gradient(165deg, rgba(42, 10, 16, 0.98) 0%, rgba(14, 4, 8, 0.99) 100%);
    border: 1px solid rgba(232, 197, 71, 0.35);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  }
  body.lobby-theme-imperial .lobby-top-cells.is-mobile-swap[hidden] {
    display: none !important;
  }
  body.lobby-theme-imperial .lobby-top-cells.is-mobile-swap .lobby-top-cells-viewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    padding: 6px 0 18px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.lobby-theme-imperial .lobby-top-cells.is-mobile-swap .lobby-top-cells-track {
    animation: none !important;
    transform: none !important;
  }
  body.lobby-theme-imperial .lobby-top-cells.is-mobile-swap .lobby-top-cells-toggle {
    display: none;
  }
  body.lobby-theme-imperial.lobby-mobile-top-pane .lobby-top-cells.is-mobile-swap .lobby-top-cells-head {
    font-size: 1.12rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lobby-theme-imperial .lobby-top-cells-track {
    animation: none !important;
    transform: none !important;
  }
}