/* ============================================================================
       1. ДИЗАЙН-СИСТЕМА И БАЗОВЫЙ СБРОС (Premium Emerald & Gold Theme)
       ============================================================================ */
    :root {
      --bg-gradient: radial-gradient(circle at center, #114e26 0%, #062612 70%, #03150a 100%);
      --gold-primary: #d4af37;
      --gold-hover: #f3e5ab;
      --gold-dark: #aa841c;
      --text-light: #f5f7f6;
      --text-muted: #a0aab0;
      --danger: #cf3e3e;
      --danger-hover: #ef5353;
      --success: #3ecf73;
      --success-hover: #53ef8a;
      --card-glow: 0 0 15px rgba(212, 175, 55, 0.6);
      --glass-bg: rgba(5, 30, 15, 0.75);
      --glass-border: rgba(212, 175, 55, 0.2);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #03150a;
      font-family: 'Montserrat', sans-serif;
      color: var(--text-light);
      position: fixed;
    }

    /* Отключаем дефолтные жесты скролла */
    body {
      touch-action: none;
    }

    /* ============================================================================
       2. ИНТЕРФЕЙС И ЛОББИ (Glassmorphism & Gold Highlights)
       ============================================================================ */
    .screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      background: var(--bg-gradient);
      z-index: 10;
      transition: opacity 0.5s ease;
      overflow-y: auto;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      padding: 20px 0;
    }

    .hidden {
      opacity: 0;
      pointer-events: none;
    }
    .hidden * {
      pointer-events: none !important;
    }
    .d-none {
      display: none !important;
    }

    #tutorial-bot-comment {
      position: absolute;
      top: 76px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 49;
      width: min(620px, calc(100% - 32px));
      min-height: 46px;
      padding: 10px 16px;
      border: 1px solid rgba(212, 175, 55, 0.75);
      border-radius: 12px;
      background: rgba(5, 30, 15, 0.9);
      box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
      color: var(--text-light);
      font-size: clamp(12px, 1.7vw, 16px);
      line-height: 1.35;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }

    .panel {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      padding: 40px;
      width: 90%;
      max-width: 480px;
      text-align: center;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border-top-color: rgba(255, 255, 255, 0.1);
      margin: auto;
    }

    h1 {
      font-size: 2.8rem;
      margin-bottom: 10px;
      font-weight: 800;
      color: var(--gold-primary);
      text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 20px rgba(212, 175, 55, 0.2);
      letter-spacing: 2px;
    }

    .subtitle {
      font-size: 0.95rem;
      color: var(--text-muted);
      margin-bottom: 30px;
      text-transform: uppercase;
      letter-spacing: 3px;
    }

    .input-group {
      margin-bottom: 25px;
      text-align: left;
    }

    label {
      display: block;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--gold-primary);
      margin-bottom: 8px;
      padding-left: 5px;
    }

    input[type="text"] {
      width: 100%;
      padding: 15px 20px;
      background: rgba(0, 10, 5, 0.5);
      border: 1px solid rgba(212, 175, 55, 0.3);
      border-radius: 12px;
      color: var(--text-light);
      font-size: 1rem;
      outline: none;
      transition: all 0.3s;
      font-family: inherit;
    }

    input[type="text"]:focus {
      border-color: var(--gold-primary);
      box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
      background: rgba(0, 10, 5, 0.7);
    }

    .btn {
      width: 100%;
      padding: 16px 24px;
      font-size: 1.05rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #03150a;
      background: linear-gradient(135deg, var(--gold-hover) 0%, var(--gold-primary) 50%, var(--gold-dark) 100%);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      margin-bottom: 15px;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
      filter: brightness(1.1);
    }

    .btn:active {
      transform: translateY(1px);
    }

    .btn-secondary {
      background: transparent;
      border: 1px solid var(--gold-primary);
      color: var(--gold-primary);
    }

    .btn-secondary:hover {
      background: rgba(212, 175, 55, 0.1);
      color: var(--gold-hover);
    }

    /* ============================================================================
       3. ИГРОВОЙ ЭКРАН (Canvas & HUD Buttons)
       ============================================================================ */
    #game-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--bg-gradient);
      touch-action: none;
      padding: 0 !important;
    }

    #game-canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* Панель активных кнопок геймплея */
    /* Панель активных кнопок геймплея */
    .game-actions-hud {
      position: absolute;
      bottom: 20px;
      right: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 20;
    }

    /* Небольшая панель наблюдателя появляется только после того, как
       локальный игрок закончил партию. Она не перекрывает руку и остаётся
       доступной на узких экранах. */
    .spectator-controls {
      position: absolute;
      top: 72px;
      left: 50%;
      transform: translateX(-50%);
      width: min(92vw, 560px);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 12px;
      border: 1px solid rgba(212, 175, 55, 0.55);
      border-radius: 12px;
      background: rgba(8, 31, 18, 0.92);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 26;
    }

    .spectator-controls.hidden {
      display: none !important;
    }

    .spectator-status {
      min-width: 0;
      color: var(--text-light);
      font-size: 0.82rem;
      line-height: 1.25;
      text-align: left;
    }

    .spectator-actions {
      display: flex;
      flex: 0 0 auto;
      gap: 8px;
    }

    .spectator-btn {
      min-height: 38px;
      padding: 7px 11px;
      border: 1px solid var(--gold-primary);
      border-radius: 8px;
      background: rgba(212, 175, 55, 0.18);
      color: var(--gold-hover);
      font: 700 0.72rem "Montserrat", sans-serif;
      cursor: pointer;
      white-space: nowrap;
    }

    .spectator-btn:hover:not(:disabled) {
      background: rgba(212, 175, 55, 0.3);
      filter: brightness(1.08);
    }

    .spectator-btn:disabled {
      cursor: default;
      opacity: 0.55;
    }

    .spectator-btn-secondary {
      border-color: rgba(219, 224, 205, 0.42);
      background: rgba(219, 224, 205, 0.08);
      color: var(--text-light);
    }


    /* Панель управления картами в руке */
    #hand-controls {
      position: absolute;
      bottom: 20px;
      left: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 20;
    }
    .diff-option {
      flex: 1;
      padding: 10px 5px;
      background: rgba(0, 10, 5, 0.4);
      border: 1px solid rgba(212, 175, 55, 0.25);
      border-radius: 8px;
      color: var(--text-light);
      cursor: pointer;
      font: 700 0.8rem "Montserrat", sans-serif;
      text-align: center;
    }
    .diff-option.active {
      border-color: var(--gold-primary);
      background: rgba(212, 175, 55, 0.22);
      box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
    }
    @media (min-width: 768px) {
      #hand-controls {
        left: 20px;
        right: auto;
        bottom: 60px;
        width: 220px;
        justify-content: flex-end;
      }
      .game-actions-hud {
        left: auto;
        right: 20px;
        bottom: 60px;
        width: 220px;
        justify-content: flex-end;
      }
    }

    /* Фаза 1: «ЗЕВОК!» держим у локальной стопки и фрейма игрока. На
       мобильных устройствах его центрированная раскладка ниже остаётся
       приоритетной; в Фазе 2 панель переходит на отдельную рейку руки. */
    @media (min-width: 768px) {
      body:not(.phase-two):not(.mobile-layout) .game-actions-hud {
        left: var(--phase1-action-left, calc(50% + 70px));
        right: auto;
        bottom: 88px;
        width: 190px;
        align-items: stretch;
      }

      body:not(.phase-two):not(.mobile-layout) .game-actions-hud .hud-btn {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
      }
    }

    .hud-btn {
      padding: 14px 28px;
      font-size: 0.9rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 2px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      color: var(--text-light);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
      transition: all 0.2s ease;
      min-width: 180px;
    }

    .hud-btn:hover {
      transform: translateY(-3px);
      filter: brightness(1.1);
    }

    .hud-btn:active {
      transform: translateY(1px);
    }

    .hud-btn-zevok {
      background: linear-gradient(135deg, #e05555 0%, var(--danger) 100%);
      border: 1px solid rgba(255,255,255,0.15);
    }
    .hud-btn-zevok:hover {
      box-shadow: 0 8px 20px rgba(207, 62, 62, 0.5);
    }

    .hud-btn-onecard {
      background: linear-gradient(135deg, #55e08b 0%, var(--success) 100%);
      border: 1px solid rgba(255,255,255,0.15);
    }
    .hud-btn-onecard:hover {
      box-shadow: 0 8px 20px rgba(62, 207, 115, 0.5);
    }

    .hud-btn-howmany {
      background: linear-gradient(135deg, #f5d76e 0%, #aa841c 100%);
      border: 1px solid rgba(255,255,255,0.15);
      color: #03150a;
    }
    .hud-btn-howmany:hover {
      box-shadow: 0 8px 20px rgba(212, 175, 55, 0.5);
    }

    .hud-btn-take {
      position: absolute;
      bottom: 180px;
      right: 16px;
      left: auto;
      transform: none;
      z-index: 25;
      padding: 10px 24px;
      font-size: 0.95rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 2px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.25);
      cursor: pointer;
      color: var(--text-light);
      background: linear-gradient(135deg, #cf3e3e 0%, #a82e2e 100%);
      box-shadow: 0 6px 20px rgba(207, 62, 62, 0.5);
      transition: all 0.2s ease;
      min-width: 160px;
    }
      @media (min-width: 768px) {
      .hud-btn-take {
          bottom: 180px;
        }
      }
    .hud-btn-take:hover {
        transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(207, 62, 62, 0.75);
      filter: brightness(1.1);
    }
    .hud-btn-take:active {
        transform: translateY(1px);
    }


    /* Верхняя панель HUD */
    .game-header-hud {
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      pointer-events: none;
      z-index: 20;
    }
    
    .hud-controls {
      display: flex;
      gap: 10px;
      pointer-events: auto;
    }

    .hud-info {
      pointer-events: auto;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 10px;
      padding: 10px 18px;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .hud-controls {
      pointer-events: auto;
      display: flex;
      gap: 10px;
    }

    .hud-ctrl-btn {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      color: var(--gold-primary);
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      transition: all 0.2s;
    }

    .hud-ctrl-btn:hover {
      color: var(--gold-hover);
      border-color: var(--gold-primary);
      background: rgba(212, 175, 55, 0.1);
    }

    /* Чат/Журнал игры в углу */
    .game-log-panel {
      position: absolute;
      top: 75px;
      left: 15px;
      width: 280px;
      height: 180px;
      background: rgba(0, 15, 5, 0.5);
      border: 1px solid rgba(212, 175, 55, 0.15);
      border-radius: 12px;
      padding: 10px;
      display: none; /* Скрыто по умолчанию, показывается по кнопке 📜 */
      flex-direction: column;
      gap: 5px;
      overflow-y: auto;
      pointer-events: auto;
      z-index: 20;
      scrollbar-width: thin;
      scrollbar-color: rgba(212, 175, 55, 0.3) transparent;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
    
    .game-log-panel.visible {
      display: flex;
    }

    .game-log-entry {
      font-size: 0.75rem;
      line-height: 1.3;
      color: rgba(255, 255, 255, 0.7);
      animation: fadeIn 0.3s forwards;
    }

    .game-log-entry.system {
      color: var(--gold-primary);
      font-weight: 700;
    }

    .game-log-entry.danger {
      color: #ef5353;
      font-weight: 700;
    }

    .game-log-entry.success {
      color: #53ef8a;
      font-weight: 700;
    }

    /* ============================================================================
       4. МОДАЛЬНЫЕ ОКНА И ДРУГИЕ ОВЕРЛЕИ (Правила, Конец Игры)
       ============================================================================ */
    .overlay-modal {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(2, 10, 5, 0.85);
      z-index: 30;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      transition: opacity 0.3s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      padding: 20px 10px;
      touch-action: pan-y;
    }

    .rules-content {
      max-height: 80vh;
      overflow-y: auto;
      text-align: left;
      scrollbar-width: thin;
    }

    /* One calm entry in the lobby; chapter choice belongs to learning, not play setup. */
    .lobby-panel.panel { padding: 28px; }
    .lobby-panel h1 { font-size: 40px; margin-bottom: 6px; }
    .lobby-panel .subtitle { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 12px; }
    .lobby-panel #game-version { margin: 0 0 12px !important; }
    .lobby-stats-panel {
      display: flex;
      justify-content: space-around;
      margin-bottom: 16px;
      padding: 10px 8px;
      background: rgba(212, 175, 55, 0.05);
      border: 1px solid rgba(212, 175, 55, 0.2);
      border-radius: 12px;
      text-align: center;
    }
    .lobby-panel .input-group { margin-bottom: 14px; }
    .lobby-panel label { font-size: 11px; letter-spacing: 1px; margin-bottom: 6px; }
    .lobby-panel input[type="text"] { min-height: 44px; padding: 11px 16px; font-size: 14px; }
    .lobby-panel select { min-height: 44px; }
    .lobby-panel .diff-option { min-height: 44px; }
    .lobby-panel #btn-play-bots { min-height: 48px; margin-bottom: 14px; padding: 13px 12px; font-size: 15px; letter-spacing: 0.7px; }
    .lobby-panel #btn-play-online.hidden { display: none; }
    .lobby-secondary-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding-top: 16px;
      border-top: 1px solid var(--glass-border);
    }
    .lobby-secondary-actions .btn {
      -webkit-tap-highlight-color: transparent;
      min-width: 0;
      min-height: 48px;
      margin: 0;
      padding: 12px 8px;
      font-size: 13px;
      letter-spacing: 0.2px;
      text-transform: none;
      color: #eddfb8;
      border-color: rgba(230, 210, 150, 0.32);
    }
    .lobby-secondary-actions .hidden { display: none; }
    #tutorial-menu-modal {
      -webkit-tap-highlight-color: transparent;
      padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
      transition: none;
    }
    #tutorial-menu-modal.hidden { display: none; }
    .tutorial-menu-panel {
      width: 100%;
      max-width: 540px;
      margin: auto;
      padding: 28px;
      border: 1px solid rgba(230, 210, 150, 0.32);
      border-radius: 20px;
      background: #10291e;
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
      text-align: left;
    }
    .tutorial-menu-heading h2 {
      color: #f2e4c3;
      font-size: 28px;
      line-height: 1.2;
      letter-spacing: -0.5px;
      margin: 0 0 10px;
    }
    .tutorial-menu-heading p {
      color: #b9c7bd;
      font-size: 14px;
      line-height: 1.55;
      margin: 0 0 22px;
    }
    .tutorial-choice {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 7px;
      width: 100%;
      min-width: 0;
      min-height: 44px;
      padding: 20px;
      border: 1px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      text-align: left;
      font: inherit;
      touch-action: manipulation;
    }
    .tutorial-choice-full {
      background: #eddfb8;
      color: #173525;
      border-color: #f8edcf;
    }
    .tutorial-choice-full:hover { background: #f8edcf; }
    .tutorial-choice-badge {
      font-size: 10px;
      font-weight: 800;
      line-height: 1.3;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #47603c;
      margin-bottom: 3px;
    }
    .tutorial-choice-title { font-size: 19px; font-weight: 750; line-height: 1.25; }
    .tutorial-choice-detail { font-size: 13px; line-height: 1.45; }
    .tutorial-menu-chapters { margin-top: 24px; }
    .tutorial-menu-chapters h3 {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      color: #b9c7bd;
      margin: 0 0 10px;
    }
    .tutorial-menu-chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tutorial-choice-chapter {
      padding: 16px;
      background: #173c2b;
      color: #f2e4c3;
      border-color: #43604d;
    }
    .tutorial-choice-chapter:hover { background: #214b36; }
    .tutorial-choice-chapter .tutorial-choice-title { font-size: 16px; }
    .tutorial-choice-chapter .tutorial-choice-detail { color: #c4d2c8; font-size: 12px; }
    .tutorial-menu-back {
      display: block;
      width: 100%;
      min-height: 44px;
      margin-top: 16px;
      padding: 10px 8px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #d4dfd6;
      cursor: pointer;
      font: 600 13px 'Montserrat', sans-serif;
    }
    .tutorial-menu-back:hover { background: rgba(255, 255, 255, 0.06); }
    #tutorial-menu-modal button:focus-visible,
    .lobby-secondary-actions button:focus-visible {
      outline: 3px solid #f3cc66;
      outline-offset: 3px;
    }
    @media (max-width: 420px) {
      #lobby-screen { padding: 12px 0; }
      .lobby-panel.panel { padding: 18px 15px; width: calc(100% - 24px); }
      .lobby-panel h1 { font-size: 36px; }
      .lobby-panel .subtitle { font-size: 10px; letter-spacing: 1.2px; }
      .lobby-panel .input-group { margin-bottom: 12px; }
      .lobby-panel #btn-play-bots { margin-bottom: 12px; }
      .lobby-secondary-actions { padding-top: 12px; gap: 8px; }
      .tutorial-menu-panel { padding: 22px 18px 14px; border-radius: 16px; }
      .tutorial-menu-heading h2 { font-size: 25px; }
      .tutorial-menu-heading p { font-size: 13px; margin-bottom: 18px; }
      .tutorial-choice { padding: 16px; }
      .tutorial-choice-title { font-size: 18px; }
      .tutorial-menu-chapters { margin-top: 20px; }
      .tutorial-choice-chapter { padding: 14px 11px; }
      .tutorial-menu-back { margin-top: 12px; }
    }
    @media (min-width: 600px) and (max-height: 480px) {
      .lobby-panel.panel {
        width: calc(100% - 32px);
        max-width: 780px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: 'heading setup' 'stats setup' 'play actions';
        gap: 10px 24px;
        padding: 20px;
      }
      .lobby-heading { grid-area: heading; }
      .lobby-stats-panel { grid-area: stats; margin: 0; }
      .lobby-game-setup {
        grid-area: setup;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-content: center;
        gap: 12px 10px;
      }
      .lobby-game-setup .input-group { margin: 0; }
      .lobby-game-setup label { min-height: 27px; }
      .lobby-game-setup #lobby-difficulty { grid-column: 1 / -1; }
      .lobby-game-setup #lobby-difficulty label { min-height: 0; }
      .lobby-panel #btn-play-bots { grid-area: play; align-self: start; margin: 8px 0 0; }
      .lobby-secondary-actions { grid-area: actions; border: 0; padding: 0; gap: 8px; }
      .lobby-panel h1 { font-size: 32px; }
      .lobby-panel .subtitle { font-size: 9px; margin-bottom: 8px; }
      .lobby-panel #game-version { margin-bottom: 0 !important; }
      .tutorial-menu-panel {
        max-width: 760px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 22px;
        padding: 20px;
      }
      .tutorial-menu-heading { grid-column: 1 / -1; }
      .tutorial-menu-heading h2 { font-size: 24px; margin-bottom: 6px; }
      .tutorial-menu-heading p { margin: 0; font-size: 13px; }
      .tutorial-menu-chapters { margin: 0; }
      .tutorial-menu-chapter-grid { gap: 8px; }
      .tutorial-choice-chapter { padding: 14px 10px; }
      .tutorial-choice-full { padding: 16px; }
      .tutorial-menu-back { grid-column: 1 / -1; margin: 0; }
    }
    @media (max-width: 420px) and (max-height: 650px) {
      .lobby-panel.panel { padding-top: 14px; padding-bottom: 14px; }
      .lobby-panel h1 { font-size: 32px; }
      .lobby-stats-panel { padding: 7px 8px; margin-bottom: 12px; }
      .lobby-stats-panel > div > div:first-child { font-size: 10px !important; letter-spacing: 0.7px !important; }
      .lobby-stats-panel > div > div:nth-child(2) { font-size: 20px !important; margin-top: 3px !important; }
      .lobby-panel .input-group { margin-bottom: 10px; }
    }
    .rules-special-card {
      margin: 10px 0 18px;
      padding: 14px 16px;
      border: 1px solid rgba(212, 175, 55, 0.55);
      border-left: 4px solid var(--gold-primary);
      border-radius: 10px;
      background: rgba(212, 175, 55, 0.09);
      line-height: 1.55;
    }

    .rules-content h3 {
      color: var(--gold-primary);
      margin-top: 15px;
      margin-bottom: 8px;
      font-size: 1rem;
      text-transform: uppercase;
    }

    .rules-content p, .rules-content li {
      font-size: 0.85rem;
      color: var(--text-light);
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .rules-content ul {
      padding-left: 20px;
    }

    /* Уведомления-тосты по центру экрана */
    .toast-container {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 25;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .toast {
      background: rgba(10, 40, 20, 0.9);
      border: 1px solid var(--gold-primary);
      padding: 15px 30px;
      border-radius: 30px;
      font-size: 1.1rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.5), var(--card-glow);
      color: var(--gold-primary);
      animation: toastIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, toastOut 0.5s ease 2s forwards;
    }

    .toast.danger {
      border-color: var(--danger);
      color: var(--danger);
      background: rgba(40, 10, 10, 0.9);
      box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 15px rgba(207, 62, 62, 0.4);
    }

    .toast.success {
      border-color: var(--success);
      color: var(--success);
      background: rgba(10, 40, 20, 0.9);
      box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 15px rgba(62, 207, 115, 0.4);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes toastIn {
      from { opacity: 0; transform: scale(0.6) translateY(50px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }

    @keyframes toastOut {
      from { opacity: 1; transform: scale(1) translateY(0); }
      to { opacity: 0; transform: scale(0.8) translateY(-20px); }
    }

    /* Выбор скинов и дизайна */
    .skin-selector, .face-selector {
      display: flex;
      gap: 8px;
      justify-content: space-between;
      margin-top: 5px;
      margin-bottom: 25px;
    }
    .skin-option, .face-option {
      flex: 1;
      padding: 10px 5px;
      border-radius: 12px;
      cursor: pointer;
      text-align: center;
      font-size: 0.75rem;
      font-weight: 600;
      border: 2px solid rgba(255, 255, 255, 0.1);
      transition: all 0.2s ease;
      color: rgba(255, 255, 255, 0.7);
    }
    .skin-option:hover, .face-option:hover {
      transform: translateY(-2px);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.3);
    }
    .skin-option.active, .face-option.active {
      border-color: var(--gold-primary);
      box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
      color: var(--gold-hover);
    }

    /* Custom Toggle Switch for settings */
    .settings-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
      text-align: left;
    }

    .settings-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      background: rgba(0, 10, 5, 0.4);
      border: 1px solid rgba(212, 175, 55, 0.15);
      border-radius: 10px;
    }

    .settings-diagnostics {
      margin: -4px 0 12px;
      text-align: right;
    }

    .settings-diagnostics-link {
      display: inline-block;
      width: auto;
      min-height: 32px;
      padding: 6px 8px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--text-muted);
      font: inherit;
      font-size: 12px;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .settings-diagnostics-link:hover,
    .settings-diagnostics-link:focus-visible {
      color: var(--text-light);
      background: rgba(255, 255, 255, 0.06);
    }

    .settings-diagnostics-link:focus-visible {
      outline: 2px solid var(--gold-primary);
      outline-offset: 2px;
    }

    @media (pointer: coarse) {
      .settings-diagnostics-link { min-height: 44px; }
    }

    .settings-label {
      font-size: 0.9rem;
      color: var(--text-light);
      font-weight: 500;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 48px;
      height: 24px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.1);
      transition: .3s;
      border-radius: 24px;
      border: 1px solid rgba(212, 175, 55, 0.3);
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 3px;
      bottom: 3px;
      background-color: var(--gold-primary);
      transition: .3s;
      border-radius: 50%;
    }

    .switch input:checked + .slider {
      background-color: rgba(62, 207, 115, 0.2);
      border-color: var(--success);
    }

    .switch input:checked + .slider:before {
      transform: translateX(24px);
      background-color: var(--success);
    }

    /* Настройка вибрации видна только на мобильных тач-устройствах */
    .mobile-only-setting {
      display: none !important;
    }
    @media (pointer: coarse) {
      .mobile-only-setting {
        display: flex !important;
      }
    }

    .diff-option.active {
      background: rgba(212, 175, 55, 0.25) !important;
      border-color: var(--gold-primary) !important;
      color: var(--gold-hover) !important;
      box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    }

    /* Стили для Лавки */
    .shop-item {
      transition: all 0.2s ease;
    }
    .shop-item:hover {
      background: rgba(212, 175, 55, 0.08) !important;
      border-color: rgba(212, 175, 55, 0.4) !important;
    }
    /* Стили для списка онлайн комнат */
    .online-room-item {
      transition: all 0.2s ease;
    }
    .online-room-item:hover {
      background: rgba(212, 175, 55, 0.1) !important;
      border-color: var(--gold-primary) !important;
      box-shadow: 0 2px 8px rgba(212, 175, 55, 0.15);
    }
    /* Стили для кнопок подарков */
    .gift-btn:hover {
      background: rgba(212, 175, 55, 0.15) !important;
      border-color: var(--gold-hover) !important;
      transform: scale(1.05);
    }
    .gift-btn:active {
      transform: scale(0.95);
    }

    /* ============================================================================
       МОБИЛЬНАЯ АДАПТАЦИЯ (MOBILE WORKLOG & LAYOUT FIXES)
       ============================================================================ */
    @media (max-width: 767px) {
      /* Скрываем второстепенные HUD-кнопки на мобилках */
      #btn-ctrl-debug,
      #btn-ctrl-copylog,
      #btn-ctrl-rules,
      #btn-ctrl-sound {
        display: none !important;
      }

      /* Журнал логов - скрываем по умолчанию на мобилках, делаем оверлеем */
      .game-log-panel {
        display: none;
        position: absolute;
        top: 70px;
        left: 10px;
        right: 10px;
        width: auto;
        height: 160px;
        background: rgba(0, 10, 5, 0.95);
        border: 1.5px solid var(--gold-primary);
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 99;
      }
      
      .game-log-panel.visible {
        display: flex;
      }

      /* Уменьшаем HUD-инфо по ширине */
      .game-header-hud {
        left: 8px;
        right: 8px;
        top: 8px;
      }

      .hud-info {
        padding: 8px 12px;
        font-size: 0.75rem;
      }

      .hud-controls {
        gap: 6px;
      }

      .hud-ctrl-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 0.95rem;
      }

      /* Геймплейные кнопки управления */
      #hand-controls {
        position: absolute;
        bottom: 110px;
        left: 8px;
        width: 95px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        z-index: 20;
      }
      
      .game-actions-hud {
        position: absolute;
        bottom: 110px;
        right: 8px;
        width: 95px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        z-index: 20;
      }
      
      .hud-btn {
        padding: 8px 4px;
        font-size: 0.65rem;
        min-width: 0;
        width: 100%;
        letter-spacing: 0px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        text-align: center;
      }
      
      /* Кнопка ВЗЯТЬ КАРТУ на мобилках */
      .hud-btn-take {
        bottom: 210px;
        padding: 8px 18px;
        font-size: 0.85rem;
        min-width: 130px;
      }
      .panel {
        padding: 20px 15px;
      }
      .rules-content {
        max-height: 50vh;
      }
    }

    /* Принудительная мобильная верстка, если JS определил мобильное устройство (например, планшет или телефон в landscape) */
    body.mobile-layout #btn-ctrl-debug,
    body.mobile-layout #btn-ctrl-copylog,
    body.mobile-layout #btn-ctrl-rules,
    body.mobile-layout #btn-ctrl-sound {
      display: none !important;
    }
    body.mobile-layout .game-log-panel {
      display: none;
      position: absolute;
      top: 70px;
      left: 10px;
      right: 10px;
      width: auto;
      height: 160px;
      background: rgba(0, 10, 5, 0.95);
      border: 1.5px solid var(--gold-primary);
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 99;
    }
    body.mobile-layout .game-log-panel.visible {
      display: flex;
    }
    body.mobile-layout .game-header-hud {
      left: 8px !important;
      right: 8px !important;
      top: 8px !important;
    }
    body.mobile-layout .hud-info {
      padding: 8px 12px !important;
      font-size: 0.75rem !important;
    }
    body.mobile-layout .hud-controls {
      gap: 6px !important;
    }
    body.mobile-layout .hud-ctrl-btn {
      width: 36px !important;
      height: 36px !important;
      border-radius: 8px !important;
      font-size: 0.95rem !important;
    }
    body.mobile-layout #hand-controls {
      position: absolute !important;
      left: 8px !important;
      right: auto !important;
      bottom: 20px !important;
      transform: none !important;
      width: 105px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      z-index: 20 !important;
    }
    body.mobile-layout .game-actions-hud {
      position: absolute !important;
      right: 8px !important;
      left: auto !important;
      bottom: 20px !important;
      transform: none !important;
      width: 105px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      z-index: 20 !important;
    }
    body.mobile-layout .hud-btn {
      padding: 8px 4px !important;
      min-height: 44px !important;
      font-size: 0.65rem !important;
      min-width: 0 !important;
      width: 100% !important;
      letter-spacing: 0px !important;
      border-radius: 6px !important;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
      text-align: center !important;
    }
    body.mobile-layout .hud-btn-take {
      bottom: 210px !important;
      padding: 8px 18px !important;
      font-size: 0.85rem !important;
      min-width: 130px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      right: auto !important;
    }
    body.mobile-layout .panel {
      padding: 20px 15px !important;
    }
    body.mobile-layout .rules-content {
      max-height: 50vh !important;
    }

    /* Специфичное перерасположение элементов для мобильной альбомной ориентации */
    body.mobile-layout.landscape #hand-controls {
      right: auto !important;
      left: 8px !important;
      bottom: 25px !important;
      width: 110px !important;
      flex-direction: column !important;
      gap: 5px !important;
      z-index: 20 !important;
    }
    body.mobile-layout.landscape #hand-controls .hud-btn {
      padding: 6px 2px !important;
      min-height: 44px !important;
      font-size: 0.58rem !important;
      border-radius: 5px !important;
    }
    body.mobile-layout.landscape .game-actions-hud {
      left: auto !important;
      right: 8px !important;
      bottom: 25px !important;
      width: 130px !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
      gap: 6px !important;
      z-index: 20 !important;
    }
    body.mobile-layout.landscape .hud-btn {
      padding: 8px 4px !important;
      min-height: 44px !important;
      font-size: 0.62rem !important;
      min-width: 0 !important;
      width: 100% !important;
      letter-spacing: 0px !important;
      border-radius: 6px !important;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
      text-align: center !important;
      line-height: 1.2 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    body.mobile-layout.landscape .hud-btn-take {
      bottom: 82px !important;
      padding: 8px 14px !important;
      font-size: 0.75rem !important;
      min-width: 120px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      right: auto !important;
    }

    /* Принудительное центрирование кнопки Зевка на мобильных экранах в Фазе 1 */
    body.mobile-layout #btn-action-zevok {
      position: fixed !important;
      /* The Phase 1 seat panel owns the bottom band. Keep the action just
         above it so it cannot cover the turn chip, name or avatar frame. */
      bottom: auto !important;
      top: var(--phase1-action-top) !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      right: auto !important;
      width: 140px !important;
      z-index: 21 !important;
    }
    body.mobile-layout.landscape #btn-action-zevok {
      bottom: auto !important;
      top: var(--phase1-landscape-action-top) !important;
      left: var(--phase1-landscape-action-left) !important;
      transform: none !important;
      right: auto !important;
      width: 130px !important;
    }

    /* Принудительное скрытие любых элементов с классом d-none */
    body .d-none,
    body.mobile-layout #hand-controls.d-none,
    body.mobile-layout .game-actions-hud.d-none,
    body.mobile-layout.landscape .hud-btn.d-none,
    body.mobile-layout.landscape #btn-action-zevok.d-none,
    body.mobile-layout.landscape .hud-btn-take.d-none {
      display: none !important;
    }

    /* Product HUD: fixed touch rails, visually quiet utility actions and a
       reserved hand band. Visibility remains governed by the canonical rules. */
    .hud-btn, .hud-btn-take {
      /* Resizing must not tween old top/left/width into a new card slot. */
      transition-property: transform, filter, box-shadow;
    }
    body.mobile-layout:not(.landscape):not(.phase-two) .game-actions-hud {
      top: var(--phase1-action-top) !important;
      bottom: auto !important;
    }
    .phase-two #hand-controls .hud-btn {
      background: #17372a !important;
      color: #d8dfcf !important;
      border: 1px solid rgba(219, 224, 205, 0.22) !important;
      box-shadow: none !important;
    }
    .phase-two .hud-btn-onecard,
    .phase-two .hud-btn-howmany {
      background: #234a35;
      color: #f0ead7;
      border: 1px solid #8d9d6d;
      box-shadow: 0 3px 8px rgba(0,0,0,0.18);
      letter-spacing: 0.4px;
    }
    .phase-two .hud-btn-take {
      background: #d6bc73;
      color: #192b20;
      border-color: #eddca8;
      box-shadow: 0 3px 8px rgba(0,0,0,0.18);
      min-height: 44px;
    }
    body.mobile-layout .hud-ctrl-btn {
      width: 44px !important;
      height: 44px !important;
    }
    body.mobile-layout.phase-two:not(.landscape) #hand-controls,
    body.mobile-layout.phase-two:not(.landscape) .game-actions-hud {
      left: max(12px, env(safe-area-inset-left)) !important;
      right: max(12px, env(safe-area-inset-right)) !important;
      width: auto !important;
      flex-direction: row !important;
      gap: 8px !important;
    }
    body.mobile-layout.phase-two:not(.landscape) #hand-controls {
      bottom: max(70px, calc(env(safe-area-inset-bottom) + 62px)) !important;
    }
    body.mobile-layout.phase-two:not(.landscape) .game-actions-hud {
      bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)) !important;
      left: calc(33.333% + 8px) !important;
    }
    body.mobile-layout.phase-two:not(.landscape) .hud-btn {
      flex: 1;
      font-size: 11px !important;
      border-radius: 9px !important;
    }
    body.mobile-layout.phase-two:not(.landscape) .hud-btn-take {
      bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)) !important;
      left: 12px !important;
      right: auto !important;
      width: calc(33.333% - 12px) !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      height: 44px !important;
      padding: 5px 6px !important;
      line-height: 1.2 !important;
      letter-spacing: 0.4px !important;
      min-height: 44px !important;
      transform: none !important;
      font-size: 10px !important;
      border-radius: 9px !important;
    }
    body.mobile-layout.phase-two.landscape .hud-btn-take {
      left: auto !important;
      right: 8px !important;
      bottom: 128px !important;
      width: 130px !important;
      min-width: 0 !important;
      min-height: 44px !important;
      transform: none !important;
      font-size: 11px !important;
    }

    /* Desktop only: side actions follow the real hand span. The hand and all
       mobile positions keep their existing geometry. */
    body.phase-two.desktop-hand-rails:not(.mobile-layout) #hand-controls {
      bottom: 88px;
      left: var(--desktop-hand-rail-left);
      right: auto;
      width: var(--desktop-action-rail-width);
    }
    body.phase-two.desktop-hand-rails:not(.mobile-layout) .game-actions-hud,
    body.phase-two.desktop-hand-rails:not(.mobile-layout) .hud-btn-take {
      left: var(--desktop-action-rail-left);
      right: auto;
      width: var(--desktop-action-rail-width);
    }
    body.phase-two.desktop-hand-rails:not(.mobile-layout) .hud-btn,
    body.phase-two.desktop-hand-rails:not(.mobile-layout) .hud-btn-take {
      min-width: 0;
      box-sizing: border-box;
      /* A changing hand span must not animate buttons through the cards. */
      transition-property: transform, filter, box-shadow;
    }
    body.phase-two.desktop-hand-rails:not(.mobile-layout) .game-actions-hud {
      bottom: 88px;
    }
    body.phase-two.desktop-hand-rails:not(.mobile-layout) .hud-btn-take {
      bottom: var(--desktop-take-bottom, 192px);
    }

    @media (max-width: 767px) {
      .spectator-controls {
        top: 58px;
        width: calc(100% - 24px);
        padding: 9px 10px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .spectator-status {
        text-align: center;
        font-size: 0.76rem;
      }

      .spectator-actions {
        width: 100%;
      }

      .spectator-btn {
        flex: 1;
        min-height: 42px;
        padding-inline: 6px;
        font-size: 0.68rem;
        white-space: normal;
      }
    }

    @media (max-height: 540px) {
      .spectator-controls {
        top: 52px;
        padding-block: 7px;
      }

      .spectator-status {
        font-size: 0.72rem;
      }

      .spectator-btn {
        min-height: 34px;
      }
    }