:root {
      --tan: #d2b48c;
      --brown: #654321;
      --white-unit: #f8f8f8;
      --black-unit: #171717;
      --bg: #f3efe7;
      --text: #222;
      --cell-size: min(10vw, 72px);
      --select: #1f8f5f;
      --target: #1f8f5f;
      --coord-gutter: 30px;
    }

    * {
      box-sizing: border-box;
    }

.hidden {
      display: none;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: radial-gradient(circle at top, #fff9ef 0%, var(--bg) 55%, #e5ddcf 100%);
      color: var(--text);
      display: grid;
      place-items: center;
      padding: 20px;
      background-attachment: fixed;
      background-size: cover;
    }

    body.bg-theme-none {
      background: radial-gradient(circle at top, #fff9ef 0%, var(--bg) 55%, #e5ddcf 100%);
    }

    body.bg-theme-tabletop {
      background:
        linear-gradient(25deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.06)),
        repeating-linear-gradient(90deg, #7a4f2b 0 14px, #6d4626 14px 28px, #8a5930 28px 42px),
        radial-gradient(circle at 20% 15%, rgba(255, 236, 202, 0.22), transparent 35%);
    }

    body.bg-theme-sky {
      background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,0.85) 0 7%, transparent 8%),
        radial-gradient(circle at 28% 24%, rgba(255,255,255,0.8) 0 8%, transparent 9%),
        radial-gradient(circle at 75% 30%, rgba(255,255,255,0.86) 0 9%, transparent 10%),
        radial-gradient(circle at 65% 26%, rgba(255,255,255,0.78) 0 7%, transparent 8%),
        linear-gradient(180deg, #6db7ff 0%, #8bc8ff 36%, #cde7ff 70%, #eef8ff 100%);
    }

    body.bg-theme-city {
      background:
        linear-gradient(to top,
          transparent 0 22%,
          rgba(25, 29, 41, 0.95) 22% 100%),
        repeating-linear-gradient(to right,
          transparent 0 6%,
          rgba(28, 32, 44, 0.95) 6% 12%,
          rgba(48, 54, 71, 0.95) 12% 18%,
          transparent 18% 24%),
        linear-gradient(180deg, #7db1ff 0%, #c8deff 55%, #eef4ff 100%);
      background-size: cover, 100% 100%, cover;
    }

    body.bg-theme-forest {
      background:
        radial-gradient(circle at 12% 85%, #183b23 0 14%, transparent 15%),
        radial-gradient(circle at 26% 84%, #1b4a2a 0 13%, transparent 14%),
        radial-gradient(circle at 41% 86%, #205331 0 14%, transparent 15%),
        radial-gradient(circle at 58% 84%, #1f4d2f 0 14%, transparent 15%),
        radial-gradient(circle at 74% 85%, #1d482c 0 13%, transparent 14%),
        radial-gradient(circle at 89% 84%, #1a4127 0 13%, transparent 14%),
        linear-gradient(180deg, #91c6ff 0%, #cde6ff 42%, #d8efd7 60%, #7ea767 100%);
      background-size: cover;
    }

.settings-btn {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 10;
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 24px 36px;
      font-size: 2.2rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.2);
      width: auto;
    }

.settings-btn:hover {
      background: #efe0ca;
    }

.main-menu-settings-btn {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 10;
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 10px 16px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.2);
      width: auto;
    }

.main-menu-settings-btn:hover {
      background: #efe0ca;
    }

.settings-panel {
      position: fixed;
      top: 122px;
      left: 12px;
      z-index: 10;
      display: grid;
      gap: 8px;
      width: min(320px, calc(100vw - 24px));
      border: 2px solid #8f7657;
      border-radius: 8px;
      background: #f8f2e8;
      padding: 10px;
      box-shadow: 0 6px 14px rgba(31, 20, 12, 0.2);
    }

.settings-panel.hidden {
      display: none;
    }

.settings-panel.main-menu-settings-mode .gameplay-changes-section {
      display: none;
    }

.background-section {
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 8px 10px;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.1);
      display: grid;
      gap: 6px;
    }

.background-section-title {
      font-size: 0.86rem;
      font-weight: 700;
    }

.background-section-controls {
      display: grid;
      grid-template-columns: 32px 1fr 32px;
      align-items: center;
      gap: 8px;
    }

.background-arrow-btn {
      border: 1px solid #65472e;
      background: #efe0ca;
      color: #2f1d11;
      border-radius: 6px;
      height: 30px;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }

.background-arrow-btn:hover {
      background: #e5d2b7;
    }

.background-theme-label {
      text-align: center;
      font-size: 0.86rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      user-select: none;
    }

.settings-panel > button {
      position: static !important;
      left: auto !important;
      top: auto !important;
      width: 100%;
      margin: 0;
      box-shadow: none;
    }

.reset-btn {
      z-index: auto;
      border: 1px solid #7e1414;
      background: #c62828;
      color: #fff;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(88, 16, 16, 0.2);
    }

.reset-btn:hover {
      background: #ab2020;
    }

.instructions-btn {
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.1);
    }

.instructions-btn:hover {
      background: #efe0ca;
    }

.keybinds-btn {
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.1);
    }

.keybinds-btn:hover {
      background: #efe0ca;
    }

.castle-move-btn {
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.1);
      text-align: left;
    }

.castle-move-btn:hover {
      background: #efe0ca;
    }

.castle-move-btn.enabled {
      border-color: #1f8f5f;
      background: #f6ead8;
      color: #2f1d11;
      box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.32), 0 0 14px rgba(31, 143, 95, 0.45);
    }

.old-speed-btn {
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.1);
      text-align: left;
    }

.old-speed-btn:hover {
      background: #efe0ca;
    }

.old-speed-btn.enabled {
      border-color: #1f8f5f;
      background: #f6ead8;
      color: #2f1d11;
      box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.32), 0 0 14px rgba(31, 143, 95, 0.45);
    }

.attack-after-move-btn {
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.1);
      text-align: left;
    }

.attack-after-move-btn:hover {
      background: #efe0ca;
    }

.attack-after-move-btn.enabled {
      border-color: #1f8f5f;
      background: #f6ead8;
      color: #2f1d11;
      box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.32), 0 0 14px rgba(31, 143, 95, 0.45);
    }

.reach-end-btn {
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.1);
      text-align: left;
    }

.reach-end-btn:hover {
      background: #efe0ca;
    }

.reach-end-btn.enabled {
      border-color: #1f8f5f;
      background: #f6ead8;
      color: #2f1d11;
      box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.32), 0 0 14px rgba(31, 143, 95, 0.45);
    }

.main-menu-btn {
      border: 1px solid #1e4ea8;
      background: #2f77ff;
      color: #ffffff;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(24, 66, 153, 0.22);
      text-align: left;
    }

.main-menu-btn:hover {
      background: #2667da;
    }

.gameplay-changes-section {
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 8px 10px;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.1);
      display: grid;
      gap: 8px;
    }

.gameplay-changes-title {
      font-size: 0.86rem;
      font-weight: 700;
    }

.gameplay-changes-toggle-btn {
      width: 100%;
      border: 1px solid #65472e;
      background: #efe0ca;
      color: #2f1d11;
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      text-align: left;
    }

.gameplay-changes-toggle-btn:hover {
      background: #e5d2b7;
    }

.gameplay-changes-content {
      display: grid;
      gap: 8px;
    }

.gameplay-changes-content.hidden {
      display: none;
    }

.gameplay-changes-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

.gameplay-tab-btn {
      border: 1px solid #65472e;
      background: #efe0ca;
      color: #2f1d11;
      border-radius: 6px;
      padding: 7px 8px;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      position: relative;
    }

.gameplay-tab-btn:hover {
      background: #e5d2b7;
    }

.gameplay-tab-btn.active {
      border-color: #1f8f5f;
      background: #efe0ca;
      color: #2f1d11;
      box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.32), 0 0 14px rgba(31, 143, 95, 0.45);
    }

.gameplay-tab-btn.unavailable {
      color: #5a3a2a;
      opacity: 0.9;
    }

.gameplay-tab-btn.unavailable::after {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      top: 50%;
      border-top: 4px solid rgba(105, 20, 20, 0.9);
      transform: rotate(-11deg);
      pointer-events: none;
    }

.gameplay-panel {
      display: grid;
      gap: 8px;
    }

.gameplay-panel.hidden {
      display: none;
    }

.gameplay-panel > button {
      width: 100%;
    }

.audio-volume-control {
      display: grid;
      gap: 6px;
      border: 1px solid #b89f80;
      border-radius: 8px;
      padding: 8px 10px;
      background: #fbf6ee;
    }

.audio-volume-label {
      font-size: 0.86rem;
      font-weight: 700;
      color: #2f1d11;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

.audio-volume-slider {
      width: 100%;
      accent-color: #2d7f57;
      cursor: pointer;
    }

.help-panel {
      position: fixed;
      left: 12px;
      top: 392px;
      bottom: auto;
      width: min(280px, calc(100vw - 24px));
      z-index: 9;
      border: 2px solid #8f7657;
      border-radius: 8px;
      background: #f8f2e8;
      color: #2f1d11;
      padding: 10px 12px;
      font-size: 0.92rem;
      line-height: 1.35;
      white-space: pre-line;
      box-shadow: 0 5px 14px rgba(31, 20, 12, 0.16);
      pointer-events: none;
      max-height: none;
      overflow-y: auto;
      overflow-x: hidden;
    }

.help-panel.hidden {
      display: none;
    }

.keybinds-panel {
      position: fixed;
      top: 56px;
      left: 12px;
      width: min(420px, calc(100vw - 24px));
      z-index: 9;
      border: 2px solid #8f7657;
      border-radius: 8px;
      background: #f8f2e8;
      color: #2f1d11;
      padding: 10px 12px;
      font-size: 0.9rem;
      line-height: 1.35;
      box-shadow: 0 5px 14px rgba(31, 20, 12, 0.16);
      max-height: min(70vh, 520px);
      overflow: auto;
    }

.keybinds-panel.hidden {
      display: none;
    }

.keybinds-title {
      font-size: 1rem;
      font-weight: 800;
      margin-bottom: 8px;
    }

.keybinds-list {
      display: grid;
      gap: 8px;
    }

.keybind-row {
      border: 1px solid #cdb79a;
      border-radius: 8px;
      padding: 8px;
      background: #fbf5ec;
      display: grid;
      gap: 6px;
    }

.keybind-row-title {
      font-weight: 700;
    }

.keybind-bindings {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

.keybind-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid #9b8566;
      background: #f3e5d2;
      color: #2f1d11;
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 0.82rem;
      font-weight: 700;
    }

.keybind-chip button {
      width: auto;
      border: none;
      background: transparent;
      color: #6a241f;
      padding: 0;
      font-size: 0.9rem;
      line-height: 1;
    }

.keybind-actions {
      display: flex;
      gap: 8px;
    }

.keybind-actions button {
      width: auto;
      padding: 5px 10px;
      font-size: 0.82rem;
    }

.panel-reset-controls {
      position: fixed;
      left: 12px;
      bottom: 12px;
      z-index: 11;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: min(280px, calc(100vw - 24px));
    }

.panel-reset-btn {
      width: 100%;
      border: 1px solid #6d5a43;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 0.84rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(31, 20, 12, 0.14);
      text-align: left;
    }

.panel-reset-btn:hover {
      background: #efe0ca;
    }

.attack-menu {
      position: fixed;
      z-index: 40;
      background: #f8f2e8;
      border: 2px solid #8f7657;
      border-radius: 8px;
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
      padding: 6px;
      min-width: 150px;
    }

.attack-menu.hidden {
      display: none;
    }

.attack-option {
      width: 100%;
      border: 1px solid #7a5f46;
      background: #f3e6d3;
      color: #2f1d11;
      border-radius: 6px;
      padding: 7px 9px;
      text-align: left;
      font-size: 0.9rem;
      font-weight: 700;
    }

.attack-option:hover {
      background: #ebdcc4;
    }

.victory-overlay {
      position: fixed;
      inset: 0;
      background: rgba(18, 13, 9, 0.58);
      z-index: 30;
      padding: 16px;
    }

.victory-overlay.hidden {
      display: none;
    }

.victory-card {
      position: absolute;
      background: #f8f2e8;
      border: 2px solid #8f7657;
      border-radius: 12px;
      min-width: min(420px, calc(100vw - 24px));
      padding: 18px 18px 14px;
      display: grid;
      justify-items: center;
      gap: 12px;
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
    }

    @keyframes fall-down {
      0% {
        opacity: 0;
        transform: translateY(-90px);
      }
      70% {
        opacity: 1;
        transform: translateY(8px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }


.victory-title.victory-title-draw {
      color: #7a7a7a;
    }
.victory-title {
      margin: 0;
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #1f8f5f;
      animation: fall-down 620ms cubic-bezier(0.17, 0.89, 0.32, 1.2) both;
    }

.victory-reason {
      margin: 0;
      font-size: clamp(0.92rem, 2.2vw, 1.02rem);
      font-weight: 700;
      color: #3e2a1a;
      text-align: center;
    }

.restart-win-btn {
      width: auto;
      min-width: 150px;
      border: 1px solid #2c6935;
      background: #2f8a3f;
      color: #fff;
    }

.restart-win-btn:hover {
      background: #257234;
    }

.app {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

.main-menu-screen {
      width: min(980px, calc(100vw - 48px));
      min-height: min(760px, calc(100vh - 72px));
      border: 2px solid #8f7657;
      border-radius: 16px;
      background: rgba(248, 242, 232, 0.94);
      box-shadow: 0 14px 30px rgba(31, 20, 12, 0.25);
      padding: 28px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 18px;
    }

.main-menu-screen.hidden {
      display: none;
    }

.main-menu-title {
      margin: 0;
      text-align: center;
      letter-spacing: 0.08em;
      font-size: clamp(2rem, 4vw, 3.1rem);
      font-weight: 900;
      color: #2b1a0f;
    }

.main-menu-title span {
      font-size: 0.42em;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #5a4536;
      vertical-align: baseline;
    }

.main-menu-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 18px;
      align-items: stretch;
      min-height: 420px;
    }

.main-menu-multiplayer-wrap {
      position: relative;
      min-height: 0;
    }

.main-menu-mode-btn,
.multiplayer-option-btn {
      width: 100%;
      min-height: 130px;
      border: 2px solid #6b5239;
      border-radius: 14px;
      background: linear-gradient(180deg, #f2e3cb 0%, #e9d2b0 100%);
      color: #2f1d11;
      font-size: clamp(1.1rem, 2.8vw, 1.6rem);
      font-weight: 900;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 8px 16px rgba(31, 20, 12, 0.15);
      position: relative;
      text-align: center;
    }

.main-menu-multiplayer-wrap > .main-menu-mode-btn {
      height: 100%;
    }

.main-menu-mode-btn:hover,
.multiplayer-option-btn:hover {
      background: linear-gradient(180deg, #edd9b8 0%, #e1c29b 100%);
    }

.multiplayer-options {
      display: grid;
      gap: 8px;
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 8px);
      z-index: 20;
    }

.multiplayer-options.hidden {
      display: none;
    }

.multiplayer-option-btn {
      min-height: 82px;
      font-size: 1.15rem;
      border-radius: 10px;
    }


.ai-difficulty-control {
      --ai-difficulty-color: #9fdc6f;
      border: 2px solid var(--ai-difficulty-color);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, var(--ai-difficulty-color) 100%);
      border-radius: 12px;
      padding: 10px;
      box-shadow: 0 8px 16px rgba(31, 20, 12, 0.18);
      transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    }

.ai-difficulty-title {
      text-align: center;
      font-weight: 900;
      font-size: 0.96rem;
      color: #2f1d11;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
    }

.ai-difficulty-slider-row {
      display: grid;
      grid-template-columns: 40px 1fr 40px;
      align-items: center;
      gap: 8px;
    }

.ai-difficulty-arrow-btn {
      min-height: 46px;
      border: 2px solid #5f472d;
      border-radius: 10px;
      background: rgba(255, 249, 238, 0.9);
      color: #2f1d11;
      font-size: 1.05rem;
      font-weight: 900;
      cursor: pointer;
    }

.ai-difficulty-arrow-btn:disabled {
      opacity: 0.5;
      cursor: default;
    }

.ai-difficulty-readout {
      min-height: 46px;
      border-radius: 10px;
      border: 1px solid rgba(47, 29, 17, 0.35);
      background: rgba(255, 255, 255, 0.55);
      display: grid;
      align-content: center;
      justify-items: center;
      padding: 6px 8px;
      gap: 2px;
    }

.ai-difficulty-value {
      font-size: 1.12rem;
      font-weight: 900;
      color: #1f130b;
      line-height: 1;
    }

.ai-difficulty-label {
      font-size: 0.8rem;
      font-weight: 700;
      color: #2f1d11;
      text-align: center;
      line-height: 1.15;
      min-height: 1.2em;
    }

.main-menu-mode-btn.unavailable,
.multiplayer-option-btn.unavailable {
      color: #5a3a2a;
      opacity: 0.9;
    }

.main-menu-mode-btn.unavailable::after,
.multiplayer-option-btn.unavailable::after {
      content: "";
      position: absolute;
      left: 10%;
      right: 10%;
      top: 50%;
      border-top: 4px solid rgba(105, 20, 20, 0.9);
      transform: rotate(-11deg);
      pointer-events: none;
    }

.main-menu-notice {
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5a1111;
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: 0.02em;
    }

.main-menu-notice.hidden {
      visibility: hidden;
    }

.play-area {
      position: relative;
      width: fit-content;
    }

.play-area.stacked {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.board-column {
      display: grid;
      gap: 12px;
      justify-items: center;
    }

    h1 {
      margin: 0;
      font-size: clamp(1.4rem, 2.8vw, 2rem);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

.board-title {
      width: calc(6 * var(--cell-size));
      margin-left: var(--coord-gutter);
      text-align: center;
    }

.fort-row {
      width: 100%;
      height: calc(var(--cell-size) * 2);
      border-left: 2px solid #2a1a10;
      border-right: 2px solid #2a1a10;
      background: linear-gradient(180deg, #ceb08b, #bb9870);
      display: grid;
      place-items: center;
      box-shadow: inset 0 0 0 1px rgba(52, 35, 22, 0.2);
      padding: 0 10px;
      position: relative;
    }

.fort-row.fort-top {
      border-top: 2px solid #2a1a10;
      border-bottom: 2px solid #2a1a10;
      border-radius: 0;
    }

.fort-row.fort-bottom {
      border-top: 2px solid #2a1a10;
      border-bottom: 2px solid #2a1a10;
      border-radius: 0;
    }

.fort-row.white-row-turn-white {
      box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.6);
    }

.fort-row.black-row-turn-black {
      box-shadow: inset 0 0 0 3px rgba(15, 15, 15, 0.95), 0 0 12px rgba(0, 0, 0, 0.45);
    }

.fort-sprite {
      width: calc(var(--cell-size) * 2.5);
      height: calc(var(--cell-size) * 1.84);
      background-image: url("./castles.png");
      background-size: 200% 200%;
      background-repeat: no-repeat;
      image-rendering: auto;
      flex: 0 0 auto;
    }

.fort-dock {
      min-height: calc(var(--cell-size) * 1.3);
      min-width: calc(var(--cell-size) * 1.5);
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 6px;
      border-radius: 8px;
      border: 2px dashed transparent;
      width: calc(var(--cell-size) * 1.85);
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
    }

.fort-row.target {
      box-shadow: inset 0 0 0 4px rgba(31, 143, 95, 0.75);
      background:
        linear-gradient(180deg, rgba(31, 143, 95, 0.22), rgba(31, 143, 95, 0.14)),
        linear-gradient(180deg, #ceb08b, #bb9870);
      cursor: pointer;
    }

.fort-unit {
      width: calc(var(--cell-size) * 0.56);
      height: calc(var(--cell-size) * 0.56);
      margin: 1px;
    }

.fort-sprite.white.with-flag {
      background-position: 0% 0%;
    }

.fort-sprite.white.without-flag {
      background-position: 0% 100%;
    }

.fort-sprite.black.with-flag {
      background-position: 100% 0%;
    }

.fort-sprite.black.without-flag {
      background-position: 100% 100%;
    }

.hud {
      width: 220px;
      position: absolute;
      left: calc(100% + 16px);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      gap: 12px;
      padding: 12px;
      border-radius: 8px;
      background: #f8f2e8;
      border: 2px solid #8f7657;
      box-shadow: 0 5px 14px rgba(31, 20, 12, 0.16);
      font-weight: 600;
      letter-spacing: 0.02em;
    }

.play-area.stacked .hud {
      position: static;
      width: 100%;
      max-width: calc(6 * var(--cell-size) + 16px);
      margin-top: 8px;
    }

.play-area.turn-white .hud {
      top: auto;
      bottom: 0;
    }

.play-area.turn-black .hud {
      top: 0;
      bottom: auto;
    }

.hud-player {
      text-transform: capitalize;
    }

.hud-player.white {
      color: #4e4e4e;
    }

.hud-player.black {
      color: #111;
    }

.controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: stretch;
    }

    button {
      border: 1px solid #65472e;
      background: #f6ead8;
      color: #2f1d11;
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 0.92rem;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
    }

    button:hover:not(:disabled) {
      background: #efe0ca;
    }

    button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    @keyframes pulse-end-turn {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(31, 143, 95, 0.5);
      }
      70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 10px rgba(31, 143, 95, 0);
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(31, 143, 95, 0);
      }
    }

.pulse-end-turn {
      animation: pulse-end-turn 1.1s infinite;
      border-color: #1f8f5f;
    }

.board-wrapper {
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      padding: 0;
    }

.board-frame {
      position: relative;
      padding-left: var(--coord-gutter);
      padding-bottom: var(--coord-gutter);
    }

.board-stack {
      width: calc(6 * var(--cell-size));
      display: grid;
      gap: 0;
    }

.coord-left {
      position: absolute;
      left: 0;
      top: calc(var(--cell-size) * 2);
      width: var(--coord-gutter);
      height: calc(8 * var(--cell-size));
      display: grid;
      grid-template-rows: repeat(8, var(--cell-size));
      align-items: center;
      justify-items: center;
      font-size: 0.9rem;
      font-weight: 700;
      color: #4b3524;
      user-select: none;
    }

.coord-bottom {
      position: absolute;
      left: var(--coord-gutter);
      bottom: 0;
      width: calc(6 * var(--cell-size));
      height: var(--coord-gutter);
      display: grid;
      grid-template-columns: repeat(6, var(--cell-size));
      align-items: center;
      justify-items: center;
      font-size: 0.9rem;
      font-weight: 700;
      color: #4b3524;
      user-select: none;
    }

.coord-left span,
    .coord-bottom span {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      line-height: 1;
    }

.board {
      display: grid;
      grid-template-columns: repeat(6, var(--cell-size));
      grid-template-rows: repeat(8, var(--cell-size));
      width: 100%;
      height: calc(8 * var(--cell-size));
      border-left: 2px solid #2a1a10;
      border-right: 2px solid #2a1a10;
    }

.cell {
      display: grid;
      place-items: center;
      position: relative;
    }

.cell.light {
      background-color: var(--tan);
    }

.cell.dark {
      background-color: var(--brown);
    }


.cell.meteor-shadow::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(35, 35, 35, 0.58);
      pointer-events: none;
    }

.cell.lava {
      background: radial-gradient(circle at 35% 28%, #ffce66 0%, #ff8a2f 28%, #d83a1f 58%, #7c1410 100%) !important;
      box-shadow: inset 0 0 0 2px rgba(255, 120, 30, 0.48);
    }

.meteor-fall {
      position: absolute;
      width: 72%;
      height: 54%;
      border-radius: 42% 58% 50% 50% / 48% 44% 56% 52%;
      background:
        radial-gradient(circle at 22% 30%, rgba(196, 154, 120, 0.86) 0%, rgba(196, 154, 120, 0.2) 18%, transparent 22%),
        radial-gradient(circle at 66% 68%, rgba(41, 20, 11, 0.55) 0%, rgba(41, 20, 11, 0.12) 20%, transparent 25%),
        radial-gradient(ellipse at 34% 34%, #9f7351 0%, #704b33 44%, #4f3323 72%, #2f1d14 100%);
      box-shadow: inset -4px -4px 7px rgba(22, 12, 8, 0.58), inset 5px 2px 5px rgba(211, 169, 132, 0.18), 0 4px 10px rgba(48, 22, 10, 0.48);
      z-index: 6;
      pointer-events: none;
      transform-origin: center;
      animation: meteor-fall-in 0.5s linear forwards;
    }

.meteor-fall::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -118%;
      width: 118%;
      height: 160%;
      transform: translateX(-50%);
      border-radius: 56% 44% 38% 62% / 64% 62% 38% 36%;
      background: linear-gradient(180deg, rgba(255, 245, 192, 0.94) 0%, rgba(255, 194, 72, 0.9) 26%, rgba(245, 119, 31, 0.78) 58%, rgba(201, 54, 18, 0.44) 100%);
      filter: blur(1.4px);
      opacity: 0.95;
      z-index: -1;
    }

.meteor-fall::after {
      content: "";
      position: absolute;
      left: 50%;
      top: -176%;
      width: 174%;
      height: 232%;
      transform: translateX(-50%);
      border-radius: 58% 42% 34% 66% / 72% 64% 34% 28%;
      background: linear-gradient(180deg, rgba(255, 241, 173, 0.52) 0%, rgba(255, 159, 48, 0.42) 38%, rgba(195, 48, 16, 0.14) 100%);
      filter: blur(2.8px);
      opacity: 0.82;
      z-index: -2;
    }

@keyframes meteor-fall-in {
      0% { transform: translateY(-130%) scale(0.52) rotate(-20deg); opacity: 0.2; }
      65% { transform: translateY(4%) scale(1.04) rotate(10deg); opacity: 1; }
      100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.95; }
    }

.cell.selectable {
      cursor: pointer;
    }

.cell.selected {
      box-shadow: inset 0 0 0 4px var(--select);
    }

.cell.target::after {
      content: "";
      position: absolute;
      width: 34%;
      height: 34%;
      border-radius: 50%;
      background: color-mix(in srgb, var(--target) 35%, transparent);
      outline: 2px solid color-mix(in srgb, var(--target) 70%, #083b24);
      pointer-events: none;
    }

.cell.target {
      cursor: pointer;
    }

.cell.attack-target {
      cursor: pointer;
      box-shadow: inset 0 0 0 3px rgba(190, 30, 45, 0.85);
    }

.cell.attack-target::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(190, 30, 45, 0.22);
      pointer-events: none;
    }

.unit {
      width: 72%;
      height: 72%;
      border-radius: 50%;
      box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25), 0 4px 7px rgba(0, 0, 0, 0.25);
      pointer-events: none;
      position: relative;
    }

.unit.moved {
      filter: grayscale(1);
      opacity: 0.78;
      transform: scale(0.86);
      box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25);
    }

.unit.white.moved {
      border-color: #7d7d7d;
    }

.unit.black.moved {
      background: radial-gradient(circle at 35% 30%, #1b1b1b, #171717 65%, #0a0a0a 100%);
      border-color: #353535;
    }

.unit.white {
      background: radial-gradient(circle at 35% 30%, #ffffff, #ececec 65%, #d2d2d2 100%);
      border: 1px solid #8a8a8a;
    }

.unit.black {
      background: radial-gradient(circle at 35% 30%, #434343, #232323 60%, #0f0f0f 100%);
      border: 1px solid #000;
    }

.unit.fort-unit {
      width: calc(var(--cell-size) * 0.56);
      height: calc(var(--cell-size) * 0.56);
      flex: 0 0 auto;
      pointer-events: auto;
      cursor: pointer;
    }

.flag-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(var(--cell-size) * 0.54);
      height: calc(var(--cell-size) * 0.54);
      object-fit: contain;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
      pointer-events: none;
    }

.stun-mark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #be1e2d;
      font-size: calc(var(--cell-size) * 0.52);
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(0, 0, 0, 0.25);
      pointer-events: none;
      z-index: 2;
    }

.lunge-lock-mark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #2c6f8f;
      font-size: calc(var(--cell-size) * 0.52);
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(0, 0, 0, 0.25);
      pointer-events: none;
      z-index: 2;
    }

.bonk-hint {
      position: absolute;
      left: 78%;
      font-size: calc(var(--cell-size) * 0.2);
      font-weight: 800;
      color: #1b5e20;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #3d8b44;
      border-radius: 6px;
      padding: 1px 4px;
      line-height: 1;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      pointer-events: none;
      z-index: 3;
      white-space: nowrap;
    }

.bonk-hint.white {
      top: 88%;
    }

.bonk-hint.black {
      top: -22%;
    }

.victim-small {
      width: 36%;
      height: 36%;
      position: absolute;
      top: 68%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 1;
      z-index: 1;
      filter: none;
    }

.victim-small.moved {
      opacity: 1;
      filter: none;
      transform: translate(-50%, -50%) scale(1);
    }

.lunge-top {
      width: 36%;
      height: 36%;
      position: absolute;
      top: 32%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      opacity: 1;
      filter: none;
    }

.lunge-top.moved {
      opacity: 1;
      filter: none;
      transform: translate(-50%, -50%) scale(1);
    }

.castle-kills {
      position: absolute;
      left: calc(var(--coord-gutter) - (var(--cell-size) * 0.62));
      width: calc(var(--cell-size) * 0.56);
      min-height: calc(var(--cell-size) * 0.8);
      display: grid;
      justify-items: center;
      align-content: start;
      gap: 4px;
      z-index: 7;
      pointer-events: none;
    }

.castle-kills-top {
      top: calc(var(--cell-size) * 0.18);
    }

.castle-kills-bottom {
      top: calc(var(--cell-size) * 9.95);
    }

.captured-unit {
      width: calc(var(--cell-size) * 0.42);
      height: calc(var(--cell-size) * 0.42);
      border-radius: 50%;
      box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 580px) {
      :root {
        --cell-size: min(13vw, 64px);
        --coord-gutter: 24px;
      }

.play-area {
        width: 100%;
        flex-direction: column;
        align-items: center;
        display: flex;
      }

.hud {
        position: static;
        width: 100%;
        max-width: calc(6 * var(--cell-size) + 16px);
        margin-top: 8px;
      }

.controls {
        flex-direction: row;
      }

      button {
        width: auto;
      }

.board-frame {
        padding-left: var(--coord-gutter);
        padding-bottom: var(--coord-gutter);
      }

    }








.turn-timer-btn.enabled {
  border-color: #1f8f5f;
  background: #f6ead8;
  color: #2f1d11;
  box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.32), 0 0 14px rgba(31, 143, 95, 0.45);
}

.turn-timer-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(95, 74, 52, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
}

.turn-timer-label {
  font-size: 0.86rem;
  font-weight: 700;
}

.turn-timer-slider,
.turn-timer-input {
  width: 100%;
}
.turn-countdown-text {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 1200;
  background: transparent;
  border: none;
  padding: 0;
  color: #2f1d11;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.turn-clock-svg {
  width: 96px;
  height: 96px;
  display: block;
}

.turn-clock-seconds {
  min-height: 1em;
  font-size: 0.92rem;
  font-weight: 800;
  color: #2f1d11;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.turn-timer-controls.hidden {
  display: none;
}

.gameplay-panel > button:active,
.gameplay-tab-btn:active,
.gameplay-tab-btn.active,
.gameplay-changes-toggle-btn:active,
.gameplay-panel > button.enabled,
.gameplay-panel > button[aria-pressed="true"] {
  border-color: #1f8f5f;
  box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.32), 0 0 14px rgba(31, 143, 95, 0.45);
}
.gameplay-panel.unavailable-note {
  color: #5a1111;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

#gameplay-extreme-panel {
  color: #5a1111 !important;
}




.meteor-mode-btn {
  border: 1px solid #65472e;
  background: #efe0ca;
  color: #2f1d11;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.meteor-mode-btn:hover {
  background: #e5d2b7;
}

.singleplayer-side-control {
  margin-top: 10px;
  border-top: 1px solid rgba(47, 29, 17, 0.22);
  padding-top: 9px;
}

.singleplayer-side-title {
  text-align: center;
  font-weight: 800;
  font-size: 0.86rem;
  color: #2f1d11;
  margin-bottom: 7px;
}

.singleplayer-side-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.singleplayer-side-btn {
  min-height: 40px;
  border: 2px solid #6b5239;
  border-radius: 10px;
  background: rgba(255, 248, 236, 0.9);
  color: #2f1d11;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
}

.singleplayer-side-btn.active {
  border-color: #1f8f5f;
  box-shadow: 0 0 0 2px rgba(31, 143, 95, 0.3), 0 0 12px rgba(31, 143, 95, 0.28);
  background: linear-gradient(180deg, #f8f2e7 0%, #e7f2e6 100%);
}
.copy-log-btn {
  width: 100%;
  margin-bottom: 8px;
}