/* ==========================================================================
   MAIN.CSS — Основные стили экрана 1920x1080, Главного меню, ХУДа, Чата и Окон
   (Здесь можно поменять фоновую картинку меню и стола на свои файлы из assets/backgrounds/)
   ========================================================================== */

:root {
    --bg-stone-dark: #140f0b;
    --bg-stone-mid: #221912;
    --bg-stone-light: #302319;
    --bg-parchment-dark: #2b2016;
    --bg-parchment-box: #38291d;

    --border-bronze: #785a37;
    --border-gold: #c49645;
    --border-gold-bright: #f2ca74;

    --text-ivory: #f7ecd5;
    --text-sand: #d4be98;
    --text-gold: #f5ce78;

    --fire-color: #d94b31;
    --fire-frame: linear-gradient(160deg, #5e1d14 0%, #38100b 65%, #240906 100%);
    --fire-art: radial-gradient(circle at 50% 42%, #ff9b42 0%, #ad2b18 58%, #330a06 100%);

    --earth-color: #58b84c;
    --earth-frame: linear-gradient(160deg, #244a1c 0%, #152e10 65%, #0c1c09 100%);
    --earth-art: radial-gradient(circle at 50% 42%, #a8eb8d 0%, #2b6b22 58%, #0e260b 100%);

    --air-color: #b57cf2;
    --air-frame: linear-gradient(160deg, #43275e 0%, #271538 65%, #170b24 100%);
    --air-art: radial-gradient(circle at 50% 42%, #e6c7ff 0%, #63388f 58%, #1f0e33 100%);

    --water-color: #3da8ab;
    --water-frame: linear-gradient(160deg, #174447 0%, #0e2b2e 65%, #081a1c 100%);
    --water-art: radial-gradient(circle at 50% 42%, #85e6e0 0%, #1b6369 58%, #092426 100%);

    --hp-color: #f25244;
    --ap-color: #e8a838;
    --mana-color: #4cd4c0;
  }

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

  html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: Georgia, 'Times New Roman', 'Segoe UI', serif;
    background: radial-gradient(circle at 50% 38%, #332418 0%, #1a120c 65%, #0f0a07 100%);
    color: var(--text-ivory);
    display: flex;
    flex-direction: column;
  }

  /* ==========================================================================
     СТРАНИЦА 1: ОТДЕЛЬНОЕ ГЛАВНОЕ МЕНЮ (ПОЭТАПНОЕ РАСКРЫТИЕ ОКОШЕК)
     ========================================================================== */
  #menuPage {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 50% 25%, rgba(224, 162, 64, 0.18) 0%, rgba(32, 22, 14, 0.94) 52%, #0d0906 100%);
    padding: 24px;
    position: relative;
    overflow: hidden;
  }

  #menuPage.hidden { display: none; }

  #gamePage {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #gamePage.hidden { display: none; }

  .astral-bg-ring {
    position: absolute;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    border: 1px dashed rgba(242, 202, 116, 0.14);
    pointer-events: none;
    animation: slowSpin 90s linear infinite;
  }

  @keyframes slowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .menu-page-container {
    width: 100%;
    max-width: 780px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .menu-header-block { text-align: center; }

  .menu-crest {
    width: 68px;
    height: 68px;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe49e 0%, #c47a25 60%, #2b190a 100%);
    border: 3px solid var(--border-gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 0 26px rgba(242, 202, 116, 0.75);
  }

  .menu-main-title {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #fff0ba, #d99f3c, #fff0ba);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 12px rgba(0,0,0,0.85);
  }

  .menu-subtitle {
    font-size: 14px;
    color: var(--text-sand);
    margin-top: 4px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
  }

  .menu-nav-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, sans-serif;
  }

  .menu-nav-tab {
    background: linear-gradient(180deg, #3b2a1c 0%, #21170f 100%);
    border: 2px solid var(--border-bronze);
    border-radius: 10px;
    padding: 13px 10px;
    color: var(--text-ivory);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.1);
    text-align: center;
  }

  .menu-nav-tab .tab-icon { font-size: 24px; transition: transform 0.2s ease; }
  .menu-nav-tab:hover {
    background: linear-gradient(180deg, #4f3825 0%, #2e2015 100%);
    border-color: var(--border-gold);
    transform: translateY(-2px);
  }
  .menu-nav-tab:hover .tab-icon { transform: scale(1.12); }
  .menu-nav-tab.active {
    background: linear-gradient(180deg, #6b4928 0%, #3d2814 100%);
    border-color: var(--border-gold-bright);
    color: #ffe8a3;
    box-shadow: 0 0 20px rgba(242, 202, 116, 0.45), inset 0 0 12px rgba(242, 202, 116, 0.18);
    transform: translateY(-2px);
  }

  .menu-stage-window {
    width: 100%;
    background: linear-gradient(180deg, #302217 0%, #1c130c 100%);
    border: 2.5px solid var(--border-gold);
    border-radius: 14px;
    box-shadow:
      0 20px 50px rgba(0,0,0,0.9),
      0 0 24px rgba(196, 150, 69, 0.22),
      inset 0 0 0 1px rgba(255, 232, 175, 0.14);
    padding: 22px 26px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    animation: unfoldWindow 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top center;
  }

  @keyframes unfoldWindow {
    0% { opacity: 0; transform: translateY(-12px) scaleY(0.92); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
  }

  .stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1.5px solid var(--border-bronze);
  }

  .stage-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--border-gold-bright);
    font-family: Georgia, serif;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .step-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }

  .step-choice-card {
    background: linear-gradient(180deg, #241911 0%, #160f0a 100%);
    border: 2px solid var(--border-bronze);
    border-radius: 10px;
    padding: 14px 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .step-choice-card:hover {
    border-color: var(--border-gold);
    background: linear-gradient(180deg, #332418 0%, #1f150e 100%);
    transform: translateY(-2px);
  }

  .step-choice-card.selected {
    border-color: var(--border-gold-bright);
    background: linear-gradient(180deg, #4f361f 0%, #2b1d10 100%);
    box-shadow: 0 0 16px rgba(242, 202, 116, 0.45);
  }

  .step-choice-icon { font-size: 32px; margin-bottom: 2px; }
  .step-choice-name { font-size: 14px; font-weight: 800; color: #ffe8a3; font-family: Georgia, serif; }
  .step-choice-desc { font-size: 11.5px; color: var(--text-sand); line-height: 1.35; }

  .mp-subwindow {
    background: rgba(15, 10, 6, 0.65);
    border: 1.5px solid var(--border-bronze);
    border-radius: 10px;
    padding: 16px;
    margin-top: 12px;
    animation: unfoldWindow 0.22s ease-out;
  }

  .room-code-box {
    background: #120c07;
    border: 2px dashed var(--border-gold-bright);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    margin-top: 12px;
    animation: unfoldWindow 0.22s ease-out;
  }

  .room-code-value {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 5px;
    color: #ffe6a3;
    font-family: monospace;
  }

  .avatar-picker { display: flex; gap: 8px; }
  .avatar-choice {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--border-bronze);
    background: #241911;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
  }

  .avatar-choice:hover, .avatar-choice.active {
    border-color: var(--border-gold-bright);
    background: #473220;
    box-shadow: 0 0 12px rgba(242, 202, 116, 0.65);
    transform: scale(1.08);
  }

  .mage-input {
    background: #17100b;
    border: 1.5px solid var(--border-gold);
    border-radius: 6px;
    color: var(--text-ivory);
    padding: 7px 12px;
    font-size: 13.5px;
    font-weight: 700;
    outline: none;
  }

  .mage-input:focus {
    border-color: var(--border-gold-bright);
    box-shadow: 0 0 8px rgba(242, 202, 116, 0.5);
  }

  .btn {
    background: linear-gradient(180deg, #423020 0%, #261b12 100%);
    color: var(--text-ivory);
    border: 1.5px solid var(--border-gold);
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.16s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 5px rgba(0,0,0,0.5);
    font-family: 'Segoe UI', Tahoma, sans-serif;
  }

  .btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #573f2a 0%, #362619 100%);
    border-color: var(--border-gold-bright);
    color: #fff;
    box-shadow: 0 0 10px rgba(242, 202, 116, 0.4);
  }

  .btn:disabled { opacity: 0.45; cursor: not-allowed; }

  .btn-primary {
    background: linear-gradient(180deg, #e0af4c 0%, #996914 100%);
    color: #1c1105;
    border-color: #ffe8a3;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  }

  .btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #f5c564 0%, #b57d19 100%);
    color: #140c03;
    box-shadow: 0 0 14px rgba(242, 202, 116, 0.75);
  }

  /* ==========================================================================
     КАСТОМНЫЕ ВЫПАДАЮЩИЕ СПИСКИ
     ========================================================================== */
  .custom-dropdown { position: relative; display: inline-block; width: 100%; }
  .dropdown-trigger { width: 100%; justify-content: space-between; height: 36px; font-size: 13px; }
  .dropdown-arrow { font-size: 10px; color: var(--border-gold-bright); margin-left: 4px; transition: transform 0.16s ease; }
  .custom-dropdown.open .dropdown-arrow { transform: rotate(180deg); }

  .dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, #332418 0%, #21170f 100%);
    border: 2px solid var(--border-gold-bright);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.92), 0 0 12px rgba(196, 150, 69, 0.35);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 600;
  }

  .custom-dropdown.open .dropdown-menu { display: flex; }

  .dropdown-option {
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-ivory);
    background: transparent;
    border-bottom: 1px solid rgba(196, 150, 69, 0.22);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s ease, color 0.12s ease;
    text-align: left;
  }

  .dropdown-option:last-child { border-bottom: none; }
  .dropdown-option:hover { background: linear-gradient(90deg, #593e25 0%, #3d2a18 100%); color: #ffe6a3; }
  .dropdown-option.active {
    background: linear-gradient(90deg, #754f28 0%, #4d3319 100%);
    color: #ffdf85;
    border-left: 3px solid var(--border-gold-bright);
  }

  /* ==========================================================================
     СТРАНИЦА 2: ЧИСТЫЙ ИНТЕРФЕЙС ПОЛЯ БОЯ (1920x1080, БЕЗ ЛИШНИХ НАДПИСЕЙ)
     Слева: ХУД соперника, управление ходом, ХУД игрока
     По центру: 8 слотов руки соперника + колода, Поле 6х2 слотов, 8 слотов руки игрока + колода
     Справа: Свиток карты и Чат
     ========================================================================== */
  .main-layout {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 248px 1fr 304px;
    gap: 12px;
    padding: 12px 16px;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, sans-serif;
  }

  /* ==========================================================================
     ЛЕВАЯ КОЛОНКА: ХУД СОПЕРНИКА, ЦЕНТР ХОДА, ХУД ИГРОКА
     ========================================================================== */
  .left-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    height: 100%;
    min-height: 0;
  }

  .mage-panel {
    background: linear-gradient(180deg, #332419 0%, #1d140e 100%);
    border: 2px solid var(--border-bronze);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.75), inset 0 0 12px rgba(0,0,0,0.5);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
  }

  .mage-panel.active-turn {
    border-color: var(--border-gold-bright);
    box-shadow: 0 0 22px rgba(242, 202, 116, 0.4), inset 0 0 14px rgba(242, 202, 116, 0.12);
  }

  .mage-panel.damaged-shake {
    animation: hitShakeSmooth 0.65s ease-in-out;
    border-color: #ff4d3b !important;
    box-shadow: 0 0 28px rgba(255, 65, 45, 0.85) !important;
  }

  .mage-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-bronze);
  }

  .mage-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 2px solid var(--border-gold-bright);
    background: radial-gradient(circle, #593e27 0%, #21160d 100%);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.8), 0 0 8px rgba(196,150,69,0.45);
    flex-shrink: 0;
  }

  .mage-info { flex: 1; min-width: 0; }
  .mage-name {
    font-size: 14px;
    line-height: 1.22;
    font-weight: 800;
    color: var(--text-ivory);
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    font-family: Georgia, serif;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .stat-box {
    background: #17100b;
    border: 1px solid var(--border-bronze);
    border-radius: 8px;
    padding: 7px 4px;
    text-align: center;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
    position: relative;
  }

  .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-sand);
    letter-spacing: 0.4px;
    display: block;
    font-weight: 700;
  }

  .stat-value {
    font-size: 22px;
    font-weight: 900;
    margin-top: 2px;
    display: block;
    font-family: Georgia, serif;
  }

  .stat-hp { color: var(--hp-color); text-shadow: 0 0 8px rgba(242, 82, 68, 0.45); }
  .stat-ap { color: var(--ap-color); text-shadow: 0 0 8px rgba(232, 168, 56, 0.45); }
  .stat-mana { color: var(--mana-color); text-shadow: 0 0 8px rgba(76, 212, 192, 0.45); }

  /* Центральный блок управления ходом между ХУДами магов */
  .turn-control-hub {
    background: linear-gradient(180deg, #291d14 0%, #1a120c 100%);
    border: 2px solid var(--border-bronze);
    border-radius: 12px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.65);
  }

  .turn-badge-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--border-gold-bright);
    font-family: Georgia, serif;
    text-align: center;
  }

  .btn-end-turn-big {
    width: 100%;
    height: 44px;
    font-size: 14px;
    border-radius: 8px;
  }

  .hub-mini-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
  }

  .hub-mini-buttons .btn {
    padding: 4px 4px;
    font-size: 11px;
    gap: 4px;
    width: 100%;
    min-width: 0;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Блок кнопки Настроек под центром управления ходом (в области красного прямоугольника со скрина 5) */
  .settings-quick-box {
    background: linear-gradient(180deg, #291d14 0%, #1a120c 100%);
    border: 2px solid var(--border-bronze);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.65);
  }

  .btn-settings-open {
    width: 100%;
    height: 36px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 8px;
    border: 1.5px solid var(--border-gold);
    background: linear-gradient(180deg, #4a3523 0%, #291d13 100%);
    color: #ffe6a3;
  }

  .settings-status-pill {
    font-size: 10.5px;
    color: var(--text-sand);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  /* Компактное всплывающее окошко настроек поверх игры */
  .settings-popover-card {
    max-width: 380px !important;
    width: 100%;
    border: 2px solid var(--border-gold-bright);
    border-radius: 12px;
    background: linear-gradient(180deg, #2e2016 0%, #18100a 100%);
    box-shadow: 0 18px 48px rgba(0,0,0,0.95), 0 0 24px rgba(196, 150, 69, 0.3);
  }

  .settings-row {
    background: rgba(12, 8, 5, 0.55);
    border: 1px solid var(--border-bronze);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  .settings-row:last-child {
    margin-bottom: 0;
  }

  .settings-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: #ffe6a3;
    margin-bottom: 7px;
  }

  .settings-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 7px;
    border-radius: 4px;
    background: #140d08;
    border: 1px solid var(--border-bronze);
    outline: none;
    cursor: pointer;
  }

  .settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff3b0 0%, #e0af4c 65%, #8c5d10 100%);
    border: 1.5px solid #fff;
    box-shadow: 0 0 6px rgba(242, 202, 116, 0.8);
    cursor: pointer;
  }

  .settings-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-ivory);
    line-height: 1.35;
  }

  .settings-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #e0af4c;
    cursor: pointer;
    flex-shrink: 0;
  }

  .emote-bubble {
    position: absolute;
    right: 10px;
    top: -12px;
    background: linear-gradient(180deg, #ffe8a3 0%, #d49b35 100%);
    color: #1c1105;
    font-weight: 800;
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8);
    z-index: 30;
    animation: popEmote 2.6s ease forwards;
  }

  @keyframes popEmote {
    0% { opacity: 0; transform: translateY(6px) scale(0.85); }
    12% { opacity: 1; transform: translateY(0) scale(1); }
    85% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-6px) scale(0.9); }
  }

  /* ==========================================================================
     ЦЕНТРАЛЬНАЯ КОЛОНКА:
     1. Верхний ряд: 8 полувидимых слотов руки соперника + Колода соперника
     2. Поле боя: 6 слотов соперника + 6 слотов игрока
     3. Нижний ряд: 8 полувидимых слотов руки игрока + Колода игрока
     ========================================================================== */
  .center-panel {
    display: grid;
    grid-template-rows: 112px 1fr 182px;
    gap: 10px;
    min-height: 0;
    height: 100%;
  }

  /* Ряд руки и колоды (сверху у соперника и снизу у игрока) */
  .hand-and-deck-row {
    background: linear-gradient(180deg, rgba(38, 27, 18, 0.92) 0%, rgba(22, 15, 10, 0.96) 100%);
    border: 2px solid var(--border-bronze);
    border-radius: 12px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 1fr 86px;
    gap: 12px;
    align-items: stretch;
    box-shadow: 0 6px 18px rgba(0,0,0,0.7), inset 0 0 16px rgba(0,0,0,0.65);
    min-height: 0;
  }

  .hand-and-deck-row.player-row {
    border-color: var(--border-gold);
  }

  /* Сетка из 8 полупрозрачных слотов для карт руки */
  .hand-slots-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    height: 100%;
    min-height: 0;
  }

  /* Полувидимый слот для карты в руке (когда пуст — виден аккуратный контур) */
  .hand-slot {
    height: 100%;
    min-height: 0;
    border-radius: 7px;
    background: rgba(15, 10, 6, 0.42);
    border: 1.5px dashed rgba(196, 150, 69, 0.28);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.55);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, background 0.2s ease;
  }

  .hand-slot.filled {
    border-style: solid;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  /* Визуальная стопка Колоды справа от 8 слотов руки */
  .deck-pile-slot {
    height: 100%;
    border-radius: 8px;
    background:
      radial-gradient(circle at 50% 45%, #5c3b1c 0%, #2e1c0c 65%, #170d05 100%);
    border: 2px solid var(--border-gold);
    box-shadow:
      -3px 3px 0 #26170a,
      -6px 6px 0 #472e15,
      0 6px 14px rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
  }

  .deck-pile-slot::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px dashed rgba(242, 202, 116, 0.4);
    border-radius: 5px;
    pointer-events: none;
  }

  .deck-crest {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe49e 0%, #b56b1b 70%, #2e1908 100%);
    border: 1.5px solid var(--border-gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff8e7;
    box-shadow: 0 0 8px rgba(242, 202, 116, 0.55);
  }

  .deck-count-num {
    font-size: 14px;
    font-weight: 900;
    color: #ffe6a3;
    font-family: Georgia, serif;
    text-shadow: 0 1px 3px #000;
  }

  /* Рубашка карты в слоте руки соперника */
  .am-card-back {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background:
      radial-gradient(circle at 50% 50%, #6e4823 0%, #382310 58%, #1c1108 100%);
    border: 2px solid var(--border-gold);
    box-shadow:
      0 4px 10px rgba(0,0,0,0.8),
      inset 0 0 0 2px rgba(242, 202, 116, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .am-card-back::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px dashed rgba(242, 202, 116, 0.45);
    border-radius: 4px;
  }

  .am-card-back-crest {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe49e 0%, #b56b1b 70%, #2e1908 100%);
    border: 1px solid var(--border-gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff8e7;
    box-shadow: 0 0 8px rgba(242, 202, 116, 0.6);
  }

  /* ПОЛЕ БОЯ НА 12 СЛОТОВ (6 сверху + 6 снизу, без текстового мусора) */
  .battlefield {
    background: radial-gradient(ellipse at center, #38281b 0%, #21170f 70%, #140e09 100%);
    border: 2px solid var(--border-gold);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.88), 0 6px 18px rgba(0,0,0,0.65);
    min-height: 0;
    overflow: visible;
    position: relative;
  }

  /* Тонкая бронзовая линия-разделитель рядов посередине поля боя */
  .battlefield::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(242, 202, 116, 0.35) 50%, transparent 100%);
    pointer-events: none;
  }

  .slots-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    min-height: 0;
    height: 100%;
    align-items: stretch;
  }

  .slot {
    height: 100%;
    min-height: 0;
    background: radial-gradient(circle at center, rgba(64, 46, 32, 0.45) 0%, rgba(18, 12, 8, 0.78) 100%);
    border: 1.5px dashed rgba(196, 150, 69, 0.36);
    border-radius: 9px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.75);
  }

  .slot.summon-target {
    border: 2px solid #68c958;
    background: rgba(104, 201, 88, 0.16);
    cursor: pointer;
    box-shadow: 0 0 16px rgba(104, 201, 88, 0.45);
  }

  .slot.summon-target:hover {
    background: rgba(104, 201, 88, 0.28);
  }

  .slot.spell-target {
    border: 2px solid #ff6b57;
    box-shadow: 0 0 16px rgba(255, 107, 87, 0.75);
    cursor: crosshair;
  }

/* ==========================================================================
     ПРАВАЯ КОЛОНКА: СВИТОК КАРТЫ И ЧАТ
     ========================================================================== */
  .right-sidebar {
    display: grid;
    grid-template-rows: minmax(250px, auto) 1fr;
    gap: 10px;
    min-height: 0;
    height: 100%;
  }

  /* Компактная вёрстка внутри «Свитка карты», чтобы описание занимало всю ширину снизу и всегда помещалось */
  .inspector-compact-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background:
      radial-gradient(circle at 20% 30%, rgba(34, 58, 30, 0.35) 0%, transparent 60%),
      linear-gradient(180deg, #162617 0%, #0e1a0f 100%);
    border: 1.5px solid #6b7d5e;
    border-radius: 8px;
    padding: 9px 10px;
  }

  .inspector-compact-top {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .inspector-compact-WrapThumb {
    position: relative;
    width: 62px;
    height: 74px;
    flex-shrink: 0;
    margin: 3px 5px 3px 3px;
  }

  .inspector-compact-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
  }

  .inspector-compact-stats .anim-stat-badge {
    padding: 2px 6px 2px 4px;
    gap: 4px;
  }

  .inspector-compact-stats .anim-stat-svg-wrap {
    width: 18px;
    height: 18px;
  }

  .inspector-compact-stats .anim-stat-label {
    font-size: 10px;
  }

  .inspector-compact-stats .anim-stat-val {
    font-size: 11.5px;
  }

  .side-box {
    background: linear-gradient(180deg, #302217 0%, #1c130d 100%);
    border: 2px solid var(--border-bronze);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.65);
  }

  .side-box-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--border-gold-bright);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-bronze);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    font-family: Georgia, serif;
  }

  .inspector-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
  }

  .combat-log {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11.5px;
    padding-right: 4px;
    min-height: 0;
  }

  .log-entry {
    padding: 5px 7px;
    border-radius: 4px;
    background: rgba(255, 240, 210, 0.04);
    border-left: 3px solid #8a6c46;
    line-height: 1.35;
    color: var(--text-ivory);
    transition: background 0.14s ease;
  }

  .log-entry:hover {
    background: rgba(255, 240, 210, 0.09);
  }

  /* Интерактивное название карты в чате — при наведении открывает карту в «Свитке карты» над чатом */
  .chat-card-ref {
    color: #ffe484;
    font-weight: 800;
    border-bottom: 1px dashed rgba(242, 202, 116, 0.75);
    cursor: pointer;
    padding: 0 2px;
    border-radius: 3px;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  }

  .chat-card-ref:hover {
    background: rgba(242, 202, 116, 0.24);
    color: #ffffff;
    border-bottom-style: solid;
    box-shadow: 0 0 8px rgba(242, 202, 116, 0.35);
  }

  .log-entry.player { border-left-color: #65b854; }
  .log-entry.ai { border-left-color: #d94b31; }
  .log-entry.system { border-left-color: #f2ca74; color: #ffe6a3; font-weight: 600; }
  .log-entry.sacrifice { border-left-color: #ff8c52; color: #ffd4bd; }

  .chat-quick-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid rgba(196, 150, 69, 0.22);
    flex-shrink: 0;
  }

  /* ==========================================================================
     MODALS
     ========================================================================== */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 8, 5, 0.86);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 700;
    padding: 16px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
  }

  .modal-backdrop.open { display: flex; }

  .modal-content {
    background: linear-gradient(180deg, #332418 0%, #1c140d 100%);
    border: 2px solid var(--border-gold-bright);
    border-radius: 12px;
    max-width: 980px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,0.92);
    overflow: hidden;
  }

  .modal-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-bronze);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modal-header h2 { font-size: 17px; color: var(--border-gold-bright); font-family: Georgia, serif; }
  .modal-body { padding: 14px 18px; overflow-y: auto; line-height: 1.5; font-size: 13.5px; color: var(--text-ivory); }
  .modal-footer { padding: 10px 18px; border-top: 1px solid var(--border-bronze); display: flex; justify-content: flex-end; gap: 10px; }

  .deck-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 10px;
    margin-top: 12px;
  }

  .catalog-card-wrap { height: 168px; position: relative; }
  .catalog-count-pill {
    position: absolute;
    bottom: 30px;
    right: 8px;
    background: rgba(20, 14, 9, 0.92);
    border: 1px solid var(--border-gold-bright);
    color: #ffe6a3;
    font-size: 10.5px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    z-index: 5;
  }