/* =========================
   COMBAT POSITION BOARD
========================= */
.combatBoardSection {
  padding-top: 0;
}

.combatPositionBoard {
  --board-pattern: none;
  --board-spark: rgba(255, 247, 214, 0.34);
  --board-bloom: rgba(255, 220, 149, 0.14);
  --board-sheen-a: rgba(255, 241, 208, 0.08);
  --board-sheen-b: rgba(66, 42, 20, 0.06);
  --board-shadow: rgba(22, 12, 6, 0.18);
  --board-top: #dcb76a;
  --board-mid: #bf9147;
  --board-bottom: #8c5d24;
  --frame-border: rgba(213, 171, 96, 0.54);
  --frame-inner: rgba(120, 74, 26, 0.28);
  --frame-highlight: rgba(255, 244, 214, 0.48);
  --frame-shade: rgba(104, 55, 20, 0.16);
  --frame-drop: rgba(84, 47, 16, 0.38);
  --cell-border: rgba(132, 82, 31, 0.18);
  --cell-light-a: rgba(255, 243, 212, 0.72);
  --cell-light-b: rgba(235, 205, 150, 0.72);
  --cell-top: rgba(255, 244, 214, 0.92);
  --cell-bottom: rgba(218, 177, 112, 0.94);
  --cell-highlight: rgba(255, 252, 235, 0.78);
  --cell-highlight-hover: rgba(255, 252, 235, 0.82);
  --cell-shadow-inset: rgba(167, 118, 57, 0.24);
  --cell-shadow-inset-hover: rgba(167, 118, 57, 0.22);
  --cell-drop: rgba(139, 92, 40, 0.16);
  --cell-hover-drop: rgba(89, 49, 17, 0.18);
  --cell-diagonal-shadow: rgba(120, 72, 29, 0.06);
  --label-color: rgba(102, 67, 26, 0.72);
  --cell-pattern: none;
  --obstacle-tile-a: rgba(238, 206, 150, 0.56);
  --obstacle-tile-b: rgba(212, 170, 111, 0.56);
  --obstacle-tile-top: rgba(246, 228, 190, 0.86);
  --obstacle-tile-bottom: rgba(203, 158, 96, 0.88);
  --obstacle-tile-border: rgba(130, 84, 38, 0.20);
  --obstacle-pattern: none;
  --obstacle-shadow: rgba(45, 31, 23, 0.18);
  --obstacle-outline: rgba(182, 244, 255, 0.76);
  --obstacle-top-a: rgba(141, 229, 255, 0.98);
  --obstacle-top-b: rgba(87, 182, 210, 0.96);
  --obstacle-top-c: rgba(47, 127, 160, 0.98);
  --obstacle-top-highlight: rgba(255, 255, 255, 0.74);
  --obstacle-top-shadow: rgba(21, 83, 109, 0.34);
  --obstacle-front-a: #3da3c4;
  --obstacle-front-b: #1c6078;
  --obstacle-front-c: #16485c;
  --obstacle-front-highlight: rgba(183, 241, 255, 0.28);
  --obstacle-side-a: #2c86a6;
  --obstacle-side-b: #155366;
  --obstacle-side-c: #103d4b;
  --obstacle-glow: rgba(77, 214, 255, 0.42);
  --obstacle-top-pattern: none;
  --obstacle-face-pattern: var(--obstacle-top-pattern);
  display: grid;
  width: min(100%, calc(min(68vh, 720px) * (var(--combat-grid-width, 10) / var(--combat-grid-height, 8))));
  max-width: 100%;
  gap: 7px;
  margin-inline: auto;
  padding: 18px;
  border: 2px solid var(--frame-border);
  border-radius: 22px;
  background:
    var(--board-pattern),
    radial-gradient(circle at 18% 18%, var(--board-spark), transparent 28%),
    radial-gradient(circle at 78% 22%, var(--board-bloom), transparent 30%),
    linear-gradient(135deg, var(--board-sheen-a), var(--board-sheen-b) 62%, var(--board-shadow)),
    linear-gradient(180deg, var(--board-top) 0%, var(--board-mid) 52%, var(--board-bottom) 100%);
  min-height: 120px;
  position: relative;
  align-self: start;
  overflow: hidden;
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.28),
    inset 0 2px 0 var(--frame-highlight),
    inset 0 -14px 24px rgba(73, 36, 11, 0.28);
}

.combatPositionBoard::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 15px;
  border: 2px solid var(--frame-inner);
  box-shadow:
    inset 0 1px 0 var(--frame-highlight),
    inset 0 -6px 12px var(--frame-shade);
  pointer-events: none;
}

.combatPositionBoard::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 18px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(84, 47, 16, 0), var(--frame-drop));
  filter: blur(1px);
  pointer-events: none;
}

.combatBattlefield {
  min-height: 100%;
  align-content: stretch;
  grid-auto-rows: auto;
}

.combatPositionBoard[data-base-theme="default"],
.combatPositionBoard[data-base-theme="plaine"] {
  --board-pattern:
    radial-gradient(circle at 16% 30%, rgba(122, 157, 74, 0.16) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 70%, rgba(142, 171, 93, 0.14) 0 4px, transparent 5px);
  --board-spark: rgba(255, 244, 210, 0.30);
  --board-bloom: rgba(192, 224, 151, 0.16);
  --board-sheen-a: rgba(255, 241, 208, 0.12);
  --board-sheen-b: rgba(88, 97, 51, 0.10);
  --board-shadow: rgba(28, 34, 18, 0.20);
  --board-top: #d9b36c;
  --board-mid: #bf8c47;
  --board-bottom: #905c29;
  --cell-light-a: rgba(248, 236, 201, 0.78);
  --cell-light-b: rgba(221, 204, 149, 0.76);
  --cell-top: rgba(249, 240, 209, 0.96);
  --cell-bottom: rgba(204, 182, 121, 0.94);
  --label-color: rgba(92, 69, 29, 0.76);
  --cell-pattern:
    radial-gradient(circle at 72% 26%, rgba(122, 157, 74, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 28% 72%, rgba(91, 129, 55, 0.14) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(222, 214, 164, 0.62);
  --obstacle-tile-b: rgba(182, 170, 115, 0.62);
  --obstacle-tile-top: rgba(224, 229, 181, 0.90);
  --obstacle-tile-bottom: rgba(154, 151, 94, 0.90);
  --obstacle-tile-border: rgba(101, 103, 56, 0.26);
  --obstacle-pattern:
    radial-gradient(circle at 72% 28%, rgba(165, 189, 112, 0.22) 0 4px, transparent 5px),
    radial-gradient(circle at 32% 68%, rgba(118, 145, 74, 0.18) 0 3px, transparent 4px);
  --obstacle-outline: rgba(214, 231, 186, 0.78);
  --obstacle-top-a: rgba(219, 231, 176, 0.98);
  --obstacle-top-b: rgba(173, 198, 126, 0.96);
  --obstacle-top-c: rgba(145, 180, 106, 0.98);
  --obstacle-top-shadow: rgba(68, 97, 39, 0.32);
  --obstacle-front-a: #9fba77;
  --obstacle-front-b: #6f8a4d;
  --obstacle-front-c: #51663a;
  --obstacle-front-highlight: rgba(239, 248, 216, 0.26);
  --obstacle-side-a: #819b5f;
  --obstacle-side-b: #5a7442;
  --obstacle-side-c: #425633;
  --obstacle-glow: rgba(189, 229, 133, 0.30);
  --obstacle-top-pattern:
    radial-gradient(circle at 64% 36%, rgba(244, 255, 220, 0.42) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(112, 148, 67, 0.12), transparent 58%);
}

.combatPositionBoard[data-base-theme="foret"] {
  --board-pattern:
    radial-gradient(circle at 20% 22%, rgba(77, 109, 57, 0.18) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 62%, rgba(52, 94, 37, 0.16) 0 6px, transparent 7px),
    linear-gradient(42deg, transparent 0 46%, rgba(57, 92, 40, 0.10) 46% 54%, transparent 54% 100%);
  --board-spark: rgba(207, 255, 197, 0.18);
  --board-bloom: rgba(118, 185, 90, 0.12);
  --board-sheen-a: rgba(255, 241, 208, 0.10);
  --board-sheen-b: rgba(58, 81, 36, 0.12);
  --board-shadow: rgba(22, 38, 18, 0.24);
  --board-top: #c7a56b;
  --board-mid: #ac7f45;
  --board-bottom: #815826;
  --cell-light-a: rgba(234, 241, 202, 0.78);
  --cell-light-b: rgba(184, 204, 129, 0.76);
  --cell-top: rgba(227, 238, 199, 0.96);
  --cell-bottom: rgba(133, 169, 94, 0.94);
  --label-color: rgba(53, 79, 34, 0.82);
  --cell-pattern:
    linear-gradient(42deg, transparent 0 44%, rgba(72, 110, 49, 0.12) 44% 56%, transparent 56% 100%),
    radial-gradient(circle at 34% 68%, rgba(52, 87, 40, 0.18) 0 3px, transparent 4px);
  --obstacle-tile-a: rgba(161, 193, 116, 0.62);
  --obstacle-tile-b: rgba(117, 148, 82, 0.62);
  --obstacle-tile-top: rgba(176, 214, 127, 0.90);
  --obstacle-tile-bottom: rgba(93, 127, 63, 0.90);
  --obstacle-tile-border: rgba(58, 87, 40, 0.28);
  --obstacle-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(56, 95, 40, 0.12) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 76% 30%, rgba(165, 204, 118, 0.18) 0 3px, transparent 4px);
  --obstacle-outline: rgba(215, 250, 192, 0.72);
  --obstacle-top-a: rgba(154, 201, 110, 0.98);
  --obstacle-top-b: rgba(105, 151, 76, 0.96);
  --obstacle-top-c: rgba(73, 113, 53, 0.98);
  --obstacle-top-shadow: rgba(31, 68, 29, 0.34);
  --obstacle-front-a: #6e9850;
  --obstacle-front-b: #456633;
  --obstacle-front-c: #2f4824;
  --obstacle-front-highlight: rgba(220, 246, 204, 0.22);
  --obstacle-side-a: #567e41;
  --obstacle-side-b: #39572b;
  --obstacle-side-c: #273e1f;
  --obstacle-glow: rgba(137, 205, 114, 0.24);
  --obstacle-top-pattern:
    linear-gradient(35deg, transparent 0 44%, rgba(226, 247, 204, 0.18) 44% 56%, transparent 56% 100%),
    radial-gradient(circle at 36% 34%, rgba(83, 133, 55, 0.16) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="jungle"] {
  --board-pattern:
    radial-gradient(circle at 18% 24%, rgba(46, 139, 87, 0.18) 0 5px, transparent 6px),
    radial-gradient(circle at 80% 64%, rgba(107, 142, 35, 0.18) 0 6px, transparent 7px),
    linear-gradient(58deg, transparent 0 45%, rgba(58, 107, 74, 0.12) 45% 55%, transparent 55% 100%);
  --board-spark: rgba(141, 235, 188, 0.20);
  --board-bloom: rgba(107, 142, 35, 0.16);
  --board-sheen-a: rgba(236, 248, 214, 0.14);
  --board-sheen-b: rgba(46, 91, 64, 0.16);
  --board-shadow: rgba(13, 39, 30, 0.28);
  --board-top: #b5a168;
  --board-mid: #8b7a42;
  --board-bottom: #5d4a25;
  --cell-light-a: rgba(210, 235, 188, 0.80);
  --cell-light-b: rgba(126, 170, 86, 0.78);
  --cell-top: rgba(191, 223, 159, 0.96);
  --cell-bottom: rgba(81, 121, 56, 0.96);
  --label-color: rgba(33, 73, 46, 0.82);
  --cell-pattern:
    radial-gradient(circle at 68% 28%, rgba(53, 111, 74, 0.22) 0 3px, transparent 4px),
    linear-gradient(58deg, transparent 0 45%, rgba(40, 96, 68, 0.14) 45% 55%, transparent 55% 100%);
  --obstacle-tile-a: rgba(139, 181, 108, 0.64);
  --obstacle-tile-b: rgba(73, 118, 74, 0.64);
  --obstacle-tile-top: rgba(155, 205, 120, 0.92);
  --obstacle-tile-bottom: rgba(48, 92, 60, 0.92);
  --obstacle-tile-border: rgba(35, 74, 51, 0.28);
  --obstacle-pattern:
    radial-gradient(circle at 74% 24%, rgba(183, 221, 120, 0.20) 0 3px, transparent 4px),
    linear-gradient(58deg, transparent 0 44%, rgba(39, 95, 64, 0.14) 44% 56%, transparent 56% 100%);
  --obstacle-outline: rgba(196, 248, 207, 0.72);
  --obstacle-top-a: rgba(127, 186, 95, 0.98);
  --obstacle-top-b: rgba(79, 137, 71, 0.96);
  --obstacle-top-c: rgba(45, 92, 64, 0.98);
  --obstacle-top-shadow: rgba(21, 66, 47, 0.34);
  --obstacle-front-a: #67a168;
  --obstacle-front-b: #386d4c;
  --obstacle-front-c: #234735;
  --obstacle-side-a: #4f8b5c;
  --obstacle-side-b: #2f6344;
  --obstacle-side-c: #1e4330;
  --obstacle-glow: rgba(111, 212, 160, 0.24);
  --obstacle-top-pattern:
    radial-gradient(circle at 32% 36%, rgba(213, 247, 198, 0.24) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(59, 113, 80, 0.16), transparent 62%);
}

.combatPositionBoard[data-base-theme="montagne"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(105, 116, 130, 0.12) 0 4px, transparent 4px 16px),
    linear-gradient(22deg, transparent 0 48%, rgba(79, 90, 103, 0.10) 48% 52%, transparent 52% 100%);
  --board-spark: rgba(255, 255, 255, 0.34);
  --board-bloom: rgba(183, 195, 216, 0.18);
  --board-sheen-a: rgba(255, 255, 255, 0.12);
  --board-sheen-b: rgba(40, 50, 55, 0.10);
  --board-shadow: rgba(12, 16, 20, 0.22);
  --board-top: #d8b27b;
  --board-mid: #ba8a4d;
  --board-bottom: #8d6030;
  --cell-light-a: rgba(231, 233, 237, 0.80);
  --cell-light-b: rgba(191, 199, 209, 0.78);
  --cell-top: rgba(240, 243, 247, 0.96);
  --cell-bottom: rgba(155, 164, 178, 0.96);
  --label-color: rgba(63, 71, 83, 0.80);
  --cell-pattern:
    linear-gradient(22deg, transparent 0 47%, rgba(89, 101, 114, 0.14) 47% 53%, transparent 53% 100%),
    radial-gradient(circle at 72% 68%, rgba(140, 152, 171, 0.18) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(205, 210, 218, 0.66);
  --obstacle-tile-b: rgba(136, 145, 158, 0.66);
  --obstacle-tile-top: rgba(215, 223, 234, 0.92);
  --obstacle-tile-bottom: rgba(102, 111, 124, 0.92);
  --obstacle-tile-border: rgba(84, 93, 106, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(140deg, rgba(92, 102, 117, 0.14) 0 4px, transparent 4px 14px),
    radial-gradient(circle at 28% 74%, rgba(216, 223, 236, 0.18) 0 2px, transparent 3px);
  --obstacle-outline: rgba(232, 238, 249, 0.74);
  --obstacle-top-a: rgba(194, 204, 219, 0.98);
  --obstacle-top-b: rgba(136, 148, 164, 0.96);
  --obstacle-top-c: rgba(88, 97, 111, 0.98);
  --obstacle-top-shadow: rgba(51, 59, 70, 0.32);
  --obstacle-front-a: #9da8b7;
  --obstacle-front-b: #687382;
  --obstacle-front-c: #495360;
  --obstacle-side-a: #7b8796;
  --obstacle-side-b: #55606c;
  --obstacle-side-c: #39424d;
  --obstacle-glow: rgba(185, 203, 229, 0.24);
  --obstacle-top-pattern:
    linear-gradient(22deg, transparent 0 46%, rgba(238, 243, 251, 0.18) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 68% 34%, rgba(108, 121, 141, 0.16) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="desert"] {
  --board-pattern:
    repeating-linear-gradient(-18deg, rgba(186, 132, 60, 0.12) 0 5px, transparent 5px 14px),
    radial-gradient(circle at 76% 26%, rgba(248, 217, 156, 0.14) 0 4px, transparent 5px);
  --board-spark: rgba(255, 245, 210, 0.18);
  --board-bloom: rgba(240, 195, 109, 0.18);
  --board-sheen-a: rgba(255, 241, 208, 0.12);
  --board-sheen-b: rgba(150, 101, 39, 0.12);
  --board-shadow: rgba(76, 45, 13, 0.22);
  --board-top: #e0bb73;
  --board-mid: #c79049;
  --board-bottom: #9b6329;
  --cell-light-a: rgba(247, 227, 184, 0.80);
  --cell-light-b: rgba(233, 194, 114, 0.78);
  --cell-top: rgba(251, 232, 188, 0.96);
  --cell-bottom: rgba(211, 163, 84, 0.96);
  --label-color: rgba(121, 75, 33, 0.82);
  --cell-pattern:
    repeating-linear-gradient(-18deg, rgba(171, 120, 53, 0.10) 0 4px, transparent 4px 11px),
    radial-gradient(circle at 28% 74%, rgba(255, 229, 180, 0.16) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(236, 197, 126, 0.66);
  --obstacle-tile-b: rgba(197, 146, 78, 0.66);
  --obstacle-tile-top: rgba(247, 211, 148, 0.92);
  --obstacle-tile-bottom: rgba(174, 117, 58, 0.92);
  --obstacle-tile-border: rgba(125, 81, 39, 0.28);
  --obstacle-pattern:
    repeating-linear-gradient(-18deg, rgba(163, 108, 48, 0.12) 0 4px, transparent 4px 12px),
    radial-gradient(circle at 72% 24%, rgba(255, 236, 195, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(255, 232, 175, 0.76);
  --obstacle-top-a: rgba(245, 202, 121, 0.98);
  --obstacle-top-b: rgba(216, 163, 83, 0.96);
  --obstacle-top-c: rgba(180, 117, 52, 0.98);
  --obstacle-top-shadow: rgba(116, 72, 27, 0.32);
  --obstacle-front-a: #d6985d;
  --obstacle-front-b: #a96933;
  --obstacle-front-c: #7c461d;
  --obstacle-side-a: #bc7f45;
  --obstacle-side-b: #8b5628;
  --obstacle-side-c: #613919;
  --obstacle-glow: rgba(248, 201, 112, 0.24);
  --obstacle-top-pattern:
    repeating-linear-gradient(-18deg, rgba(255, 241, 204, 0.14) 0 4px, transparent 4px 12px),
    linear-gradient(180deg, rgba(201, 140, 58, 0.12), transparent 60%);
}

.combatPositionBoard[data-base-theme="minotor"] {
  --board-pattern:
    repeating-linear-gradient(90deg, rgba(111, 74, 43, 0.12) 0 5px, transparent 5px 16px),
    linear-gradient(0deg, transparent 0 46%, rgba(73, 48, 29, 0.14) 46% 54%, transparent 54% 100%);
  --board-spark: rgba(198, 150, 99, 0.20);
  --board-bloom: rgba(77, 58, 45, 0.18);
  --board-sheen-a: rgba(232, 210, 185, 0.12);
  --board-sheen-b: rgba(77, 58, 45, 0.16);
  --board-shadow: rgba(28, 19, 11, 0.28);
  --board-top: #b68854;
  --board-mid: #8a5f35;
  --board-bottom: #54351d;
  --cell-light-a: rgba(226, 203, 169, 0.80);
  --cell-light-b: rgba(177, 127, 81, 0.78);
  --cell-top: rgba(226, 203, 169, 0.96);
  --cell-bottom: rgba(125, 87, 54, 0.96);
  --label-color: rgba(77, 51, 32, 0.82);
  --cell-pattern:
    linear-gradient(0deg, transparent 0 46%, rgba(96, 63, 39, 0.16) 46% 54%, transparent 54% 100%),
    repeating-linear-gradient(90deg, rgba(140, 98, 62, 0.10) 0 4px, transparent 4px 12px);
  --obstacle-tile-a: rgba(176, 129, 81, 0.66);
  --obstacle-tile-b: rgba(107, 73, 45, 0.66);
  --obstacle-tile-top: rgba(193, 145, 97, 0.92);
  --obstacle-tile-bottom: rgba(82, 53, 31, 0.92);
  --obstacle-tile-border: rgba(68, 42, 23, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(90deg, rgba(99, 66, 40, 0.14) 0 4px, transparent 4px 11px),
    linear-gradient(0deg, transparent 0 46%, rgba(68, 43, 27, 0.14) 46% 54%, transparent 54% 100%);
  --obstacle-outline: rgba(224, 183, 128, 0.68);
  --obstacle-top-a: rgba(184, 132, 79, 0.98);
  --obstacle-top-b: rgba(131, 86, 48, 0.96);
  --obstacle-top-c: rgba(81, 50, 30, 0.98);
  --obstacle-top-shadow: rgba(53, 31, 18, 0.34);
  --obstacle-front-a: #9f6a3e;
  --obstacle-front-b: #6b4327;
  --obstacle-front-c: #442917;
  --obstacle-side-a: #855632;
  --obstacle-side-b: #5b381f;
  --obstacle-side-c: #382113;
  --obstacle-glow: rgba(188, 132, 79, 0.18);
  --obstacle-top-pattern:
    linear-gradient(0deg, transparent 0 44%, rgba(235, 205, 171, 0.14) 44% 56%, transparent 56% 100%),
    repeating-linear-gradient(90deg, rgba(111, 73, 45, 0.10) 0 4px, transparent 4px 12px);
}

.combatPositionBoard[data-base-theme="neige"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(188, 214, 235, 0.12) 0 3px, transparent 3px 16px),
    radial-gradient(circle at 24% 28%, rgba(255, 255, 255, 0.22) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 68%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px);
  --board-spark: rgba(255, 255, 255, 0.48);
  --board-bloom: rgba(216, 235, 247, 0.22);
  --board-sheen-a: rgba(255, 246, 226, 0.22);
  --board-sheen-b: rgba(122, 136, 156, 0.12);
  --board-shadow: rgba(59, 72, 89, 0.22);
  --board-top: #e4c792;
  --board-mid: #cfaa72;
  --board-bottom: #a77c47;
  --cell-light-a: rgba(248, 250, 252, 0.84);
  --cell-light-b: rgba(215, 229, 240, 0.82);
  --cell-top: rgba(252, 253, 255, 0.98);
  --cell-bottom: rgba(190, 208, 224, 0.96);
  --label-color: rgba(83, 101, 119, 0.78);
  --cell-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(207, 226, 241, 0.18) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(223, 235, 245, 0.68);
  --obstacle-tile-b: rgba(179, 198, 214, 0.68);
  --obstacle-tile-top: rgba(236, 245, 251, 0.94);
  --obstacle-tile-bottom: rgba(136, 160, 180, 0.94);
  --obstacle-tile-border: rgba(103, 123, 143, 0.28);
  --obstacle-pattern:
    repeating-linear-gradient(135deg, rgba(193, 214, 234, 0.14) 0 3px, transparent 3px 12px),
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px);
  --obstacle-outline: rgba(239, 247, 255, 0.86);
  --obstacle-top-a: rgba(235, 244, 251, 0.98);
  --obstacle-top-b: rgba(191, 215, 235, 0.96);
  --obstacle-top-c: rgba(137, 176, 204, 0.98);
  --obstacle-top-shadow: rgba(72, 104, 129, 0.28);
  --obstacle-front-a: #bed6e6;
  --obstacle-front-b: #7fa8c5;
  --obstacle-front-c: #57778f;
  --obstacle-side-a: #a4c0d5;
  --obstacle-side-b: #6d92ad;
  --obstacle-side-c: #476477;
  --obstacle-glow: rgba(194, 232, 255, 0.30);
  --obstacle-top-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, 0.22) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 62% 34%, rgba(207, 236, 255, 0.22) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="noel"] {
  --board-pattern:
    radial-gradient(circle at 22% 26%, rgba(255, 255, 255, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 68%, rgba(46, 213, 115, 0.16) 0 5px, transparent 6px),
    linear-gradient(45deg, transparent 0 46%, rgba(255, 71, 87, 0.10) 46% 54%, transparent 54% 100%);
  --board-spark: rgba(255, 255, 255, 0.42);
  --board-bloom: rgba(116, 185, 255, 0.20);
  --board-sheen-a: rgba(255, 250, 245, 0.22);
  --board-sheen-b: rgba(255, 71, 87, 0.10);
  --board-shadow: rgba(46, 93, 68, 0.22);
  --board-top: #dec48a;
  --board-mid: #c5965b;
  --board-bottom: #8f653b;
  --cell-light-a: rgba(251, 252, 255, 0.84);
  --cell-light-b: rgba(211, 234, 248, 0.82);
  --cell-top: rgba(252, 253, 255, 0.98);
  --cell-bottom: rgba(172, 215, 233, 0.96);
  --label-color: rgba(67, 109, 90, 0.80);
  --cell-pattern:
    radial-gradient(circle at 68% 28%, rgba(255, 255, 255, 0.24) 0 2px, transparent 3px),
    linear-gradient(45deg, transparent 0 46%, rgba(255, 91, 104, 0.12) 46% 54%, transparent 54% 100%);
  --obstacle-tile-a: rgba(225, 242, 232, 0.68);
  --obstacle-tile-b: rgba(158, 209, 191, 0.68);
  --obstacle-tile-top: rgba(238, 250, 244, 0.94);
  --obstacle-tile-bottom: rgba(102, 173, 143, 0.92);
  --obstacle-tile-border: rgba(67, 139, 110, 0.28);
  --obstacle-pattern:
    radial-gradient(circle at 28% 70%, rgba(255, 255, 255, 0.20) 0 2px, transparent 3px),
    linear-gradient(45deg, transparent 0 46%, rgba(97, 191, 150, 0.14) 46% 54%, transparent 54% 100%);
  --obstacle-outline: rgba(255, 255, 255, 0.82);
  --obstacle-top-a: rgba(246, 251, 253, 0.98);
  --obstacle-top-b: rgba(188, 237, 219, 0.96);
  --obstacle-top-c: rgba(92, 182, 138, 0.98);
  --obstacle-top-shadow: rgba(45, 118, 85, 0.28);
  --obstacle-front-a: #bfe9d7;
  --obstacle-front-b: #5cab84;
  --obstacle-front-c: #2f6c54;
  --obstacle-side-a: #95d1bd;
  --obstacle-side-b: #49926f;
  --obstacle-side-c: #2b5c46;
  --obstacle-glow: rgba(208, 247, 233, 0.32);
  --obstacle-top-pattern:
    radial-gradient(circle at 64% 34%, rgba(255, 255, 255, 0.26) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(115, 206, 167, 0.14), transparent 58%);
}

.combatPositionBoard[data-base-theme="lac"],
.combatPositionBoard[data-base-theme="mer"] {
  --board-pattern:
    repeating-linear-gradient(0deg, rgba(110, 201, 190, 0.10) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 24% 32%, rgba(203, 248, 244, 0.16) 0 4px, transparent 5px);
  --board-spark: rgba(255, 255, 255, 0.28);
  --board-bloom: rgba(125, 211, 216, 0.20);
  --board-sheen-a: rgba(255, 241, 208, 0.12);
  --board-sheen-b: rgba(111, 134, 128, 0.10);
  --board-shadow: rgba(35, 44, 42, 0.22);
  --board-top: #dfbb74;
  --board-mid: #c18d49;
  --board-bottom: #945f2b;
  --cell-light-a: rgba(231, 242, 230, 0.80);
  --cell-light-b: rgba(170, 214, 198, 0.78);
  --cell-top: rgba(237, 248, 239, 0.96);
  --cell-bottom: rgba(108, 177, 166, 0.94);
  --label-color: rgba(49, 98, 106, 0.80);
  --cell-pattern:
    repeating-linear-gradient(0deg, rgba(102, 182, 175, 0.10) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 74% 30%, rgba(216, 250, 245, 0.18) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(166, 214, 209, 0.66);
  --obstacle-tile-b: rgba(102, 171, 168, 0.66);
  --obstacle-tile-top: rgba(192, 234, 229, 0.92);
  --obstacle-tile-bottom: rgba(68, 135, 133, 0.92);
  --obstacle-tile-border: rgba(44, 101, 112, 0.28);
  --obstacle-pattern:
    repeating-linear-gradient(0deg, rgba(77, 155, 151, 0.12) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 32% 68%, rgba(218, 251, 248, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(220, 249, 249, 0.78);
  --obstacle-top-a: rgba(183, 234, 228, 0.98);
  --obstacle-top-b: rgba(110, 201, 190, 0.96);
  --obstacle-top-c: rgba(51, 143, 145, 0.98);
  --obstacle-top-shadow: rgba(25, 94, 102, 0.30);
  --obstacle-front-a: #88c9c3;
  --obstacle-front-b: #43979a;
  --obstacle-front-c: #29656b;
  --obstacle-side-a: #68b0af;
  --obstacle-side-b: #327f84;
  --obstacle-side-c: #20555a;
  --obstacle-glow: rgba(123, 225, 233, 0.28);
  --obstacle-top-pattern:
    repeating-linear-gradient(0deg, rgba(220, 251, 246, 0.14) 0 2px, transparent 2px 7px),
    radial-gradient(circle at 68% 34%, rgba(137, 233, 222, 0.18) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="volcan"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(255, 94, 43, 0.16) 0 2px, transparent 2px 15px),
    radial-gradient(circle at 74% 26%, rgba(255, 167, 90, 0.18) 0 4px, transparent 5px);
  --board-spark: rgba(255, 125, 78, 0.26);
  --board-bloom: rgba(255, 51, 0, 0.14);
  --board-sheen-a: rgba(255, 233, 197, 0.08);
  --board-sheen-b: rgba(95, 43, 20, 0.16);
  --board-shadow: rgba(16, 8, 5, 0.36);
  --board-top: #9d6933;
  --board-mid: #6d431f;
  --board-bottom: #3f2410;
  --cell-light-a: rgba(88, 72, 62, 0.84);
  --cell-light-b: rgba(54, 34, 29, 0.80);
  --cell-top: rgba(110, 84, 70, 0.96);
  --cell-bottom: rgba(39, 23, 19, 0.96);
  --cell-border: rgba(108, 54, 33, 0.28);
  --label-color: rgba(255, 189, 147, 0.72);
  --cell-diagonal-shadow: rgba(255, 120, 80, 0.10);
  --cell-pattern:
    repeating-linear-gradient(135deg, rgba(201, 84, 41, 0.14) 0 2px, transparent 2px 11px),
    radial-gradient(circle at 28% 72%, rgba(255, 176, 112, 0.16) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(87, 45, 33, 0.70);
  --obstacle-tile-b: rgba(43, 20, 16, 0.70);
  --obstacle-tile-top: rgba(112, 57, 39, 0.92);
  --obstacle-tile-bottom: rgba(28, 12, 10, 0.94);
  --obstacle-tile-border: rgba(205, 88, 47, 0.24);
  --obstacle-pattern:
    repeating-linear-gradient(135deg, rgba(173, 64, 30, 0.16) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 72% 28%, rgba(255, 181, 105, 0.18) 0 2px, transparent 3px);
  --obstacle-outline: rgba(255, 168, 108, 0.72);
  --obstacle-top-a: rgba(182, 78, 35, 0.98);
  --obstacle-top-b: rgba(124, 43, 22, 0.96);
  --obstacle-top-c: rgba(69, 22, 14, 0.98);
  --obstacle-top-shadow: rgba(31, 8, 6, 0.38);
  --obstacle-front-a: #9f4c2d;
  --obstacle-front-b: #622817;
  --obstacle-front-c: #33130d;
  --obstacle-side-a: #7f3a21;
  --obstacle-side-b: #4f2113;
  --obstacle-side-c: #2c110b;
  --obstacle-glow: rgba(255, 101, 41, 0.30);
  --obstacle-top-pattern:
    repeating-linear-gradient(135deg, rgba(255, 205, 151, 0.14) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(255, 111, 51, 0.18), transparent 58%);
}

.combatPositionBoard[data-base-theme="cimetiere"] {
  --board-pattern:
    repeating-linear-gradient(135deg, rgba(155, 89, 182, 0.14) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 24% 26%, rgba(215, 176, 245, 0.12) 0 4px, transparent 5px);
  --board-spark: rgba(155, 89, 182, 0.18);
  --board-bloom: rgba(75, 26, 75, 0.18);
  --board-sheen-a: rgba(228, 215, 241, 0.08);
  --board-sheen-b: rgba(52, 73, 94, 0.14);
  --board-shadow: rgba(20, 16, 30, 0.34);
  --board-top: #79638c;
  --board-mid: #5c476f;
  --board-bottom: #35273f;
  --cell-light-a: rgba(119, 111, 135, 0.82);
  --cell-light-b: rgba(74, 66, 92, 0.80);
  --cell-top: rgba(137, 127, 154, 0.96);
  --cell-bottom: rgba(52, 44, 66, 0.96);
  --cell-border: rgba(120, 88, 158, 0.24);
  --label-color: rgba(224, 206, 248, 0.72);
  --cell-diagonal-shadow: rgba(196, 149, 255, 0.10);
  --cell-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(164, 118, 205, 0.14) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 72% 30%, rgba(214, 175, 244, 0.14) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(96, 77, 115, 0.70);
  --obstacle-tile-b: rgba(47, 33, 61, 0.70);
  --obstacle-tile-top: rgba(116, 90, 138, 0.92);
  --obstacle-tile-bottom: rgba(38, 24, 49, 0.94);
  --obstacle-tile-border: rgba(162, 106, 201, 0.26);
  --obstacle-pattern:
    repeating-linear-gradient(135deg, rgba(143, 89, 188, 0.16) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 30% 68%, rgba(226, 190, 251, 0.12) 0 2px, transparent 3px);
  --obstacle-outline: rgba(215, 176, 245, 0.72);
  --obstacle-top-a: rgba(137, 96, 173, 0.98);
  --obstacle-top-b: rgba(93, 56, 127, 0.96);
  --obstacle-top-c: rgba(53, 27, 72, 0.98);
  --obstacle-top-shadow: rgba(24, 12, 34, 0.36);
  --obstacle-front-a: #8259a2;
  --obstacle-front-b: #503267;
  --obstacle-front-c: #2e1a3d;
  --obstacle-side-a: #684481;
  --obstacle-side-b: #402854;
  --obstacle-side-c: #24142f;
  --obstacle-glow: rgba(186, 124, 232, 0.24);
  --obstacle-top-pattern:
    linear-gradient(135deg, transparent 0 46%, rgba(228, 197, 252, 0.18) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 66% 36%, rgba(166, 106, 207, 0.14) 0 2px, transparent 3px);
}

.combatPositionBoard[data-base-theme="celeste"] {
  --board-pattern:
    radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.20) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 66%, rgba(210, 240, 154, 0.16) 0 5px, transparent 6px),
    linear-gradient(60deg, transparent 0 46%, rgba(187, 220, 136, 0.10) 46% 54%, transparent 54% 100%);
  --board-spark: rgba(255, 255, 255, 0.52);
  --board-bloom: rgba(116, 185, 255, 0.20);
  --board-sheen-a: rgba(255, 247, 229, 0.18);
  --board-sheen-b: rgba(181, 208, 221, 0.12);
  --board-shadow: rgba(83, 100, 117, 0.22);
  --board-top: #dec48a;
  --board-mid: #c79f62;
  --board-bottom: #967041;
  --cell-light-a: rgba(244, 248, 232, 0.82);
  --cell-light-b: rgba(215, 232, 179, 0.80);
  --cell-top: rgba(247, 250, 236, 0.96);
  --cell-bottom: rgba(180, 212, 144, 0.96);
  --label-color: rgba(94, 108, 69, 0.76);
  --cell-pattern:
    radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px),
    linear-gradient(60deg, transparent 0 46%, rgba(169, 207, 117, 0.12) 46% 54%, transparent 54% 100%);
  --obstacle-tile-a: rgba(198, 218, 164, 0.66);
  --obstacle-tile-b: rgba(145, 178, 116, 0.66);
  --obstacle-tile-top: rgba(210, 231, 178, 0.92);
  --obstacle-tile-bottom: rgba(105, 140, 82, 0.92);
  --obstacle-tile-border: rgba(109, 138, 85, 0.26);
  --obstacle-pattern:
    radial-gradient(circle at 28% 72%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
    linear-gradient(60deg, transparent 0 46%, rgba(170, 205, 117, 0.14) 46% 54%, transparent 54% 100%);
  --obstacle-outline: rgba(246, 255, 222, 0.82);
  --obstacle-top-a: rgba(225, 239, 184, 0.98);
  --obstacle-top-b: rgba(173, 204, 127, 0.96);
  --obstacle-top-c: rgba(126, 168, 90, 0.98);
  --obstacle-top-shadow: rgba(66, 112, 49, 0.28);
  --obstacle-front-a: #b4cf83;
  --obstacle-front-b: #7aa05a;
  --obstacle-front-c: #54703f;
  --obstacle-side-a: #97b86d;
  --obstacle-side-b: #69864d;
  --obstacle-side-c: #465c35;
  --obstacle-glow: rgba(219, 248, 158, 0.28);
  --obstacle-top-pattern:
    radial-gradient(circle at 64% 34%, rgba(255, 255, 255, 0.24) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(192, 223, 142, 0.12), transparent 58%);
}

.combatPositionBoard[data-base-theme="dinosaures"] {
  --board-pattern:
    repeating-linear-gradient(30deg, rgba(56, 113, 46, 0.14) 0 3px, transparent 3px 14px),
    radial-gradient(circle at 74% 30%, rgba(132, 185, 89, 0.18) 0 5px, transparent 6px);
  --board-spark: rgba(75, 138, 92, 0.20);
  --board-bloom: rgba(46, 139, 87, 0.14);
  --board-sheen-a: rgba(219, 237, 189, 0.12);
  --board-sheen-b: rgba(30, 63, 32, 0.16);
  --board-shadow: rgba(14, 31, 17, 0.30);
  --board-top: #9b8752;
  --board-mid: #6f5f36;
  --board-bottom: #45381d;
  --cell-light-a: rgba(195, 222, 164, 0.80);
  --cell-light-b: rgba(96, 146, 75, 0.78);
  --cell-top: rgba(184, 214, 148, 0.96);
  --cell-bottom: rgba(55, 101, 50, 0.96);
  --label-color: rgba(34, 70, 29, 0.82);
  --cell-pattern:
    repeating-linear-gradient(30deg, rgba(57, 107, 50, 0.12) 0 3px, transparent 3px 11px),
    radial-gradient(circle at 30% 70%, rgba(164, 209, 111, 0.16) 0 2px, transparent 3px);
  --obstacle-tile-a: rgba(102, 151, 84, 0.66);
  --obstacle-tile-b: rgba(46, 86, 41, 0.66);
  --obstacle-tile-top: rgba(121, 176, 96, 0.92);
  --obstacle-tile-bottom: rgba(30, 63, 32, 0.92);
  --obstacle-tile-border: rgba(32, 71, 31, 0.30);
  --obstacle-pattern:
    repeating-linear-gradient(30deg, rgba(48, 96, 44, 0.14) 0 3px, transparent 3px 10px),
    radial-gradient(circle at 72% 26%, rgba(179, 224, 119, 0.16) 0 2px, transparent 3px);
  --obstacle-outline: rgba(206, 238, 167, 0.70);
  --obstacle-top-a: rgba(120, 178, 92, 0.98);
  --obstacle-top-b: rgba(69, 121, 65, 0.96);
  --obstacle-top-c: rgba(33, 77, 44, 0.98);
  --obstacle-top-shadow: rgba(15, 52, 23, 0.34);
  --obstacle-front-a: #699b5a;
  --obstacle-front-b: #396a38;
  --obstacle-front-c: #214428;
  --obstacle-side-a: #54824b;
  --obstacle-side-b: #2f5832;
  --obstacle-side-c: #1b3b22;
  --obstacle-glow: rgba(132, 205, 102, 0.22);
  --obstacle-top-pattern:
    linear-gradient(30deg, transparent 0 46%, rgba(208, 239, 151, 0.14) 46% 54%, transparent 54% 100%),
    radial-gradient(circle at 34% 36%, rgba(91, 149, 67, 0.18) 0 2px, transparent 3px);
}

.combatBoardCell {
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 11px;
  border: 1px solid var(--cell-border);
  background:
    var(--cell-pattern),
    linear-gradient(135deg, var(--cell-light-a) 0 50%, var(--cell-light-b) 50% 100%),
    linear-gradient(180deg, var(--cell-top), var(--cell-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  color: var(--label-color);
  font-size: 0.78rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  box-shadow:
    inset 0 1px 0 var(--cell-highlight),
    inset 0 -2px 0 var(--cell-shadow-inset),
    0 3px 0 var(--cell-drop);
}

.combatBoardCell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0 49%, transparent 49% 51%, var(--cell-diagonal-shadow) 51% 100%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.combatBoardCell:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 var(--cell-highlight-hover),
    inset 0 -2px 0 var(--cell-shadow-inset-hover),
    0 8px 14px var(--cell-hover-drop);
}

.combatBoardCellLabel {
  color: var(--label-color);
  opacity: 0.58;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: absolute;
  left: 6px;
  top: 5px;
  z-index: 3;
}

.combatBoardCell.reachable-move {
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(233, 255, 217, 0.86) 0 50%, rgba(188, 224, 141, 0.86) 50% 100%),
    linear-gradient(180deg, rgba(220, 250, 194, 0.94), rgba(161, 207, 106, 0.92));
  border-color: rgba(119, 165, 61, 0.42);
}

.combatBoardCell.move-preview {
  background:
    linear-gradient(135deg, rgba(255, 241, 187, 0.92) 0 50%, rgba(241, 193, 92, 0.92) 50% 100%),
    linear-gradient(180deg, rgba(255, 231, 153, 0.96), rgba(236, 170, 61, 0.94));
  border-color: rgba(214, 149, 33, 0.54);
}

.combatBoardCell.start-player {
  box-shadow: inset 0 0 0 1px rgba(255, 226, 170, 0.22);
}

.combatBoardCell.start-monster {
  box-shadow: inset 0 0 0 1px rgba(255, 129, 129, 0.18);
}

.combatBoardCell.in-range {
  background:
    linear-gradient(135deg, rgba(217, 244, 255, 0.88) 0 50%, rgba(139, 212, 241, 0.88) 50% 100%),
    linear-gradient(180deg, rgba(195, 236, 255, 0.96), rgba(110, 194, 227, 0.94));
  border-color: rgba(61, 153, 190, 0.42);
}

.combatBoardCell.is-obstacle {
  background:
    var(--obstacle-pattern),
    linear-gradient(135deg, var(--obstacle-tile-a) 0 50%, var(--obstacle-tile-b) 50% 100%),
    linear-gradient(180deg, var(--obstacle-tile-top), var(--obstacle-tile-bottom));
  border-color: var(--obstacle-tile-border);
}

.combatObstacleRelief {
  position: relative;
  width: 82%;
  height: 66%;
  z-index: 2;
  transform: translateY(3px);
  filter: drop-shadow(0 9px 9px var(--obstacle-shadow));
}

.combatObstacleTop,
.combatObstacleFace,
.combatObstacleGlow {
  position: absolute;
  display: block;
  pointer-events: none;
}

.combatObstacleTop {
  left: 8%;
  right: 17%;
  top: 10%;
  height: 34%;
  border-radius: 7px;
  background:
    var(--obstacle-top-pattern),
    linear-gradient(135deg, var(--obstacle-top-a), var(--obstacle-top-b) 54%, var(--obstacle-top-c));
  border: 1px solid var(--obstacle-outline);
  box-shadow:
    inset 0 1px 0 var(--obstacle-top-highlight),
    inset 0 -3px 5px var(--obstacle-top-shadow);
  transform: skewX(-18deg);
}

.combatObstacleFace--front {
  left: 11%;
  right: 19%;
  top: 36%;
  bottom: 14%;
  border-radius: 0 0 7px 7px;
  background:
    var(--obstacle-face-pattern),
    linear-gradient(180deg, var(--obstacle-front-a), var(--obstacle-front-b) 54%, var(--obstacle-front-c));
  box-shadow: inset 0 1px 0 var(--obstacle-front-highlight);
  transform: skewX(-18deg);
}

.combatObstacleFace--side {
  top: 13%;
  right: 6%;
  width: 18%;
  bottom: 15%;
  border-radius: 0 7px 7px 0;
  background: linear-gradient(180deg, var(--obstacle-side-a), var(--obstacle-side-b) 58%, var(--obstacle-side-c));
  transform: skewY(-22deg);
  transform-origin: top;
}

.combatObstacleGlow {
  inset: auto 18% 4px 14%;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--obstacle-glow), rgba(77, 214, 255, 0));
  filter: blur(2px);
}

.combatObstacleRelief[data-variant="1"] {
  transform: scale(0.94) translateY(4px);
}

.combatObstacleRelief[data-variant="2"] {
  transform: scale(1.02) translateY(2px);
}

.combatBoardCell.aoe-preview {
  background: rgba(230, 126, 34, 0.25) !important;
  border-color: rgba(230, 126, 34, 0.7) !important;
  box-shadow: inset 0 0 8px rgba(230, 126, 34, 0.5), 0 0 8px rgba(230, 126, 34, 0.3) !important;
}

.combatBoardCell.has-player {
  box-shadow: inset 0 0 0 1px rgba(255, 226, 170, 0.4);
}

.combatBoardCell.has-monster {
  box-shadow: inset 0 0 0 1px rgba(255, 129, 129, 0.28);
}

.combatBoardCell.has-player,
.combatBoardCell.has-monster {
  cursor: help;
}

.combatBoardBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: bold;
  font-size: 0.78rem;
}

.combatBoardBadge.player {
  background: rgba(255, 226, 170, 0.18);
  color: #ffe2aa;
}

.combatBoardBadge.monster {
  background: rgba(255, 129, 129, 0.16);
  color: #ffb3b3;
}

.combatBoardBadge--token {
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.combatBoardBadge--token.player {
  background: radial-gradient(circle at 30% 30%, #f7e1b6, #7f5cd6 54%, #2c173f 100%);
}

.combatBoardBadge--token.ally {
  background: radial-gradient(circle at 30% 30%, #d9f7d6, #3c8a6d 54%, #17312b 100%);
}

.combatBoardBadge--token.monster {
  background: radial-gradient(circle at 30% 30%, #ffd8d8, #8f5b3f 54%, #311713 100%);
}

.combatBoardName {
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combatMonsterList {
  display: grid;
  gap: 10px;
  padding: 10px;
  max-height: 300px;
  overflow: auto;
}

.combatMonsterCard {
  width: 100%;
  padding: 12px;
  display: grid;
  gap: 8px;
  text-align: left;
  color: var(--ui-text);
  cursor: pointer;
}

.combatMonsterCard[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.combatMonsterHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.combatMonsterHeader strong {
  color: #ffe2aa;
}

.combatMonsterDead {
  color: #ff9b9b;
  font-weight: bold;
}

.combatMonsterCard--inRange {
  border-color: rgba(94, 200, 255, 0.45);
}

.combatMonsterCard--outOfRange {
  opacity: 0.78;
}

.combatMonsterCard--effectActive {
  position: relative;
  overflow: hidden;
}

.combatMonsterCard--effectActive::after {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 58%);
  animation: spellTargetPulse 0.9s ease-out forwards;
  pointer-events: none;
}

.combatHpTrack {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(18, 10, 9, 0.9);
}

.combatHpTrack span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #79df72, #d7f173);
}

.combatInitiativeSection {
  padding-top: 0;
}

.combatInitiativeList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
}

.combatLog {
  padding: 12px;
  min-height: 150px;
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 8px;
}

.combatLogEntry {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #e9dcc0;
  font-size: 0.92rem;
  line-height: 1.35;
}

/* Combat cell actors styling */
.combatActorSpriteContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

/* Override and scale player sprite */
.combatActorSpriteContainer .charSprite {
  position: absolute !important;
  bottom: -6px !important;
  left: 50% !important;
  transform: translate(-50%, 0) scale(0.48) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
}

/* Override and scale monster sprite container */
.combatActorSpriteContainer .monsterEntity {
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  width: 64px !important;
  height: 64px !important;
  transform: translate(-50%, 0) scale(0.58) !important;
  transform-origin: center bottom !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.combatActorSpriteContainer .monsterEntity .monsterName,
.combatActorSpriteContainer .monsterEntity .monsterJoinCombatBtn {
  display: none !important;
  /* Hide map elements inside combat board */
}

.combatActorSpriteContainer .monsterEntity .monsterSprite {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  transform-origin: center bottom !important;
}

/* Ensure the combat cell doesn't hide the overflow of the sprite */
.combatBoardCell {
  overflow: visible !important;
}

.combatBoardCellLabel {
  position: absolute;
  top: 2px;
  left: 4px;
  opacity: 0.5;
  font-size: 0.65rem;
  z-index: 2;
  pointer-events: none;
}

/* Damage Preview Badge on Board Cell */
.combat-cell-dmg-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 20, 0.95);
  color: #ff4757;
  border: 1px solid #ff4757;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 50; /* Display above the actor sprite */
  box-shadow: 0 2px 5px rgba(0,0,0,0.7);
  font-family: monospace, sans-serif;
}
.combat-cell-dmg-badge.lethal {
  color: #ffffff;
  background: linear-gradient(135deg, #e74c3c, #8e44ad);
  border-color: #f1c40f;
  animation: pulseLethal 0.8s infinite alternate;
}

/* =======================================================
   ANIMATIONS DE SORTS — Projectile / Impact / Shake
   ======================================================= */

/* Traînée du projectile : grandit depuis 0 à 100% de largeur */
@keyframes spellTrailGrow {
  from { clip-path: inset(0 100% 0 0); opacity: 0.9; }
  to   { clip-path: inset(0 0%   0 0); opacity: 0.5; }
}

/* Tête du projectile : se déplace du point de départ à la cible via CSS vars */
@keyframes spellHeadTravel {
  from { translate: 0 0;                   opacity: 1;   scale: 1; }
  80%  { translate: var(--dx) var(--dy);   opacity: 1;   scale: 1.2; }
  to   { translate: var(--dx) var(--dy);   opacity: 0;   scale: 2;   }
}

/* Flash d'impact : explose puis disparaît */
@keyframes spellImpactFlash {
  0%   { opacity: 0;   scale: 0.4; }
  20%  { opacity: 1;   scale: 1.1; }
  70%  { opacity: 0.8; scale: 1; }
  100% { opacity: 0;   scale: 1.3; }
}

/* Anneaux d'énergie qui s'élargissent */
@keyframes spellRingExpand {
  from { width: 4px;  height: 4px;  opacity: 1; }
  to   { width: 60px; height: 60px; opacity: 0; }
}

/* Particules qui partent en étoile */
@keyframes spellParticle {
  from { translate: 0 0;                   opacity: 1; scale: 1; }
  to   { translate: var(--px) var(--py);   opacity: 0; scale: 0.3; }
}

/* Shake de la cellule touchée */
@keyframes spellCellShake {
  0%,100% { translate: 0 0; }
  20%     { translate: -4px -2px; }
  40%     { translate: 4px 2px; }
  60%     { translate: -3px 3px; }
  80%     { translate: 3px -3px; }
}

.spell-anim-shake {
  animation: spellCellShake 320ms ease-in-out;
}

/* Les éléments d'animation sont positionnés sur le board (overflow: visible) */
.combatPositionBoard {
  overflow: visible !important;
}

/* Damage indicator flottant */
@keyframes floatUp {
  0%   { translate: 0 0;     opacity: 1; scale: 1; }
  70%  { translate: 0 -28px; opacity: 1; scale: 1.1; }
  100% { translate: 0 -44px; opacity: 0; scale: 0.9; }
}

.combat-damage-indicator.float-up {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 30;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 8px #ff5722, 0 2px 4px rgba(0,0,0,0.7);
  pointer-events: none;
  animation: floatUp 1.4s ease-out forwards;
  white-space: nowrap;
}

/* =======================================================
   ANIMATIONS THÉMATIQUES PAR CLASSE
   ======================================================= */

/* --- Guerrier (Sword / Slash Strike) --- */
@keyframes warriorSwordSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes warriorSlashCut1 {
  0%   { transform: translateY(-50%) rotate(35deg) scaleX(0); opacity: 1; }
  40%  { transform: translateY(-50%) rotate(35deg) scaleX(1.15); opacity: 1; }
  100% { transform: translateY(-50%) rotate(35deg) scaleX(1); opacity: 0; }
}

@keyframes warriorSlashCut2 {
  0%   { transform: translateY(-50%) rotate(-35deg) scaleX(0); opacity: 1; }
  40%  { transform: translateY(-50%) rotate(-35deg) scaleX(1.15); opacity: 1; }
  100% { transform: translateY(-50%) rotate(-35deg) scaleX(1); opacity: 0; }
}

/* --- Archer (Arrow Quiver) --- */
@keyframes archerArrowQuiver {
  0%   { transform: rotate(-45deg) scale(0); opacity: 0; }
  15%  { transform: rotate(-45deg) scale(var(--arrow-scale, 1)); opacity: 1; }
  30%  { transform: rotate(-49deg) scale(var(--arrow-scale, 1)); }
  45%  { transform: rotate(-41deg) scale(var(--arrow-scale, 1)); }
  60%  { transform: rotate(-47deg) scale(var(--arrow-scale, 1)); }
  75%  { transform: rotate(-43deg) scale(var(--arrow-scale, 1)); }
  90%  { transform: rotate(-45deg) scale(var(--arrow-scale, 1)); opacity: 1; }
  100% { transform: rotate(-45deg) scale(var(--arrow-scale, 1)); opacity: 0; }
}

/* --- Nécromancien (Miasma Float & Cloud Spread) --- */
@keyframes necroMiasmaFloat {
  0%   { translate: 0 0;                                                   scale: 0.8; opacity: 0.7; }
  40%  { translate: calc(var(--dx) * 0.4 + 12px) calc(var(--dy) * 0.4 - 12px); scale: 1.25; opacity: 0.95; }
  100% { translate: var(--dx) var(--dy);                                   scale: 1.5; opacity: 0.6; }
}

@keyframes necroCloudSpread {
  0%   { transform: scale(0.5); opacity: 0; }
  25%  { transform: scale(1.15); opacity: 0.9; }
  60%  { transform: scale(1.0); opacity: 0.75; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes necroBubbleFloat {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-36px) scale(0.35); opacity: 0; }
}

/* --- Mage (Rune Expansion) --- */
@keyframes mageRuneExpand {
  from { width: 0px;  height: 0px;  transform: translate(-50%, -50%) rotate(0deg);   opacity: 1; }
  to   { width: var(--rune-max-size, 72px); height: var(--rune-max-size, 72px); transform: translate(-50%, -50%) rotate(180deg); opacity: 0; }
}

/* --- Crabe (Claw strike / Pincer pinch) --- */
@keyframes crabPincerLeft {
  0% { transform: rotate(-55deg); opacity: 0; }
  20% { opacity: 1; }
  45% { transform: rotate(0deg); opacity: 1; }
  75% { transform: rotate(0deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 0; }
}

@keyframes crabPincerRight {
  0% { transform: rotate(55deg); opacity: 0; }
  20% { opacity: 1; }
  45% { transform: rotate(0deg); opacity: 1; }
  75% { transform: rotate(0deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 0; }
}

/* --- Loup / Rat (Bite / Jaw closing) --- */
@keyframes jawBiteTop {
  0% { transform: translateY(-25px); opacity: 0; }
  15% { opacity: 1; }
  40% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(5px); opacity: 0; }
}

@keyframes jawBiteBottom {
  0% { transform: translateY(25px); opacity: 0; }
  15% { opacity: 1; }
  40% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-5px); opacity: 0; }
}

/* --- Oiseau (Beak Peck strike) --- */
@keyframes beakPeck {
  0% { transform: scaleY(0.2) translateY(-30px); opacity: 0; }
  25% { transform: scaleY(1.3) translateY(10px); opacity: 1; }
  40% { transform: scaleY(0.8) translateY(-5px); opacity: 1; }
  55% { transform: scaleY(1.1) translateY(5px); opacity: 1; }
  75% { transform: scaleY(1.0) translateY(0px); opacity: 1; }
  100% { transform: scaleY(0.5) translateY(-20px); opacity: 0; }
}

/* --- Champignon (Mushroom slam cap) --- */
@keyframes mushroomSlam {
  0% { transform: scale(0.4) translateY(-20px); opacity: 0; }
  30% { transform: scale(1.1) translateY(12px); opacity: 1; }
  50% { transform: scale(1.0) translateY(8px); opacity: 1; }
  100% { transform: scale(1.2) translateY(15px); opacity: 0; }
}

/* ==========================================================================
   PIXI.JS ISOMETRIC COMBAT BOARD (HYBRID MODE OVERRIDES)
   ========================================================================== */

#combatPositionBoard.pixi-isometric-mode {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Hide inner frame decoration that might conflict with isometric perspective */
#combatPositionBoard.pixi-isometric-mode::before,
#combatPositionBoard.pixi-isometric-mode::after {
  display: none !important;
}

/* Hide legacy DOM obstacle relief (rendered beautifully in PixiJS) */
#combatPositionBoard.pixi-isometric-mode .combatObstacleRelief {
  display: none !important;
}

/* Hide legacy DOM cell coordinate labels (rendered in PixiJS) */
#combatPositionBoard.pixi-isometric-mode .combatBoardCellLabel {
  display: none !important;
}

/* Make DOM cells absolute positioned, transparent, and pointer-event transparent */
#combatPositionBoard.pixi-isometric-mode .combatBoardCell,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.reachable-move,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.move-preview,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.in-range,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.is-obstacle,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.aoe-preview,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.start-player,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.start-monster,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.has-player,
#combatPositionBoard.pixi-isometric-mode .combatBoardCell.has-monster {
  position: absolute !important;
  aspect-ratio: auto !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: none !important; /* disable hover transition since PixiJS handles hover highlights */
  pointer-events: auto !important;
}

/* Use the ::before pseudo-element as the exact geometric diamond interaction mask */
#combatPositionBoard.pixi-isometric-mode .combatBoardCell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
  background: transparent !important;
  z-index: 1 !important;
}

/* Adjust player and monster sprite vertical anchoring to sit nicely on the tile center */
#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important; /* align feet to the bottom center of the absolute cell */
  justify-content: center !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform-style: flat !important;
}

body.pixi-entities-mode #combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer {
  opacity: 0 !important;
}

body.pixi-entities-mode #combatPositionBoard.pixi-isometric-mode canvas {
  pointer-events: none !important;
}

/* Force flat rendering for any 3D map transforms inherited on the combat board */
#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer .charSprite,
#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer .monsterEntity {
  position: absolute !important;
  left: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-style: flat !important;
  transform-origin: center bottom !important;
}

/* Make character sprite stand upright relative to the bottom center of the cell and scale with tile size */
#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer .charSprite {
  bottom: calc(50% - 6px) !important;
  transform: translate(-50%, 0) scale(var(--player-scale, 0.53)) !important;
}

#combatPositionBoard.pixi-isometric-mode .combatActorSpriteContainer .monsterEntity {
  bottom: calc(50% - 4px) !important;
  width: 64px !important;
  height: 64px !important;
  transform: translate(-50%, 0) scale(var(--monster-scale, 0.61)) !important;
}

/* Adjust damage preview badges to float nicely above the isometric character */
#combatPositionBoard.pixi-isometric-mode .combat-cell-dmg-badge {
  position: absolute !important;
  bottom: calc(var(--combat-tile-width, 100) * 0.93 * 1px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 150 !important;
  pointer-events: none !important;
  background: rgba(10, 7, 5, 0.98) !important;
  color: #ff4757 !important;
  border: 1.5px solid rgba(255, 71, 87, 0.85) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 5px 10px !important;
  min-width: 58px !important;
  text-align: center !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4), 0 2px 5px rgba(0, 0, 0, 0.6) !important;
  text-shadow: 0 0 4px rgba(255, 71, 87, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Adjust combat damage indicator popup */
#combatPositionBoard.pixi-isometric-mode .combat-damage-indicator {
  position: absolute !important;
  bottom: calc(var(--combat-tile-width, 100) * 1.05 * 1px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 160 !important;
  pointer-events: none !important;
}

/* Walking / running animation for monsters in combat */
.monsterSprite.walking {
  animation: runBob 0.34s linear infinite !important;
}

/* Ready overhead badge above character during prep phase */
.combat-prep-ready-badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #15803d, #166534);
  color: #ffffff;
  border: 1.5px solid #22c55e;
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.6);
  white-space: nowrap;
  pointer-events: none;
  z-index: 25;
  animation: prepReadyPulse 2s infinite ease-in-out;
}

#combatPositionBoard.pixi-isometric-mode .combat-prep-ready-badge {
  position: absolute !important;
  bottom: calc(50% + 42px) !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@keyframes prepReadyPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
    border-color: #22c55e;
  }
  50% {
    box-shadow: 0 2px 14px rgba(34, 197, 94, 0.9);
    border-color: #4ade80;
  }
}