:root {
  --ink: #111416;
  --panel: #1b1e20;
  --panel-raised: #23272a;
  --panel-soft: #292d2f;
  --line: #3b3f40;
  --line-soft: rgba(255, 255, 255, 0.08);
  --paper: #f0e9dc;
  --muted: #aaa69e;
  --brass: #d1a54f;
  --rust: #a94f3d;
  --pine: #557b50;
  --teal: #3c7480;
  --danger: #d0604c;
  --good: #7fbd6f;
  --shadow: rgba(0, 0, 0, 0.42);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--paper);
  background: #101315;
}

button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
  color: var(--paper);
  background: #282c2e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

button:hover {
  border-color: #8d7547;
  background: #303537;
  box-shadow: inset 3px 0 0 var(--brass);
}

button:active { background: #202426; }
button.active,
button.selected { border-color: var(--brass); background: #473a2d; box-shadow: inset 3px 0 0 var(--brass); }
button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 306px minmax(640px, 1fr) 306px;
  gap: 8px;
  padding: 8px;
  background:
    linear-gradient(90deg, rgba(169, 79, 61, 0.08), transparent 28%, transparent 72%, rgba(85, 123, 80, 0.08)),
    #111416;
}

.panel,
.game-area {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 12px 30px var(--shadow);
}

.panel {
  padding: 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #555 #1a1d1f;
}

.game-area {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 145px;
  overflow: hidden;
  transition: grid-template-rows 180ms ease;
}
.game-area.log-collapsed { grid-template-rows: auto minmax(0, 1fr) 43px; }

.brand-block {
  min-height: 70px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 11px;
  align-items: center;
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  width: 44px;
  height: 44px;
  position: relative;
  display: block;
  border: 1px solid #7d653c;
  border-radius: 5px;
  background: #2a2e30;
}

.brand-mark::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 18px;
  left: 9px;
  top: 14px;
  background: var(--brass);
  clip-path: polygon(0 100%, 0 38%, 50% 0, 100% 38%, 100% 100%);
}

.brand-mark::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 25px;
  right: 8px;
  top: 6px;
  background: var(--rust);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.kicker {
  display: block;
  color: var(--brass);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p { margin: 0; }
h1 { margin-top: 4px; font-size: 21px; line-height: 1.08; letter-spacing: 0; }
h2 { font-size: 13px; color: var(--paper); letter-spacing: 0; }

.section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.section:last-child { border-bottom: 0; }
.section-heading,
.log-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.section-heading span,
.log-heading span { color: #85827b; font-size: 10px; line-height: 1.2; text-align: right; }

.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choice { text-align: center; }
.choice.active:first-child { border-color: #668eb0; background: #29435a; box-shadow: inset 3px 0 0 #77a4c8; }
.choice.active:last-child { border-color: #729467; background: #334b30; box-shadow: inset 3px 0 0 #7eaa72; }
.button-grid { display: grid; gap: 6px; }

.build-button,
.unit-button {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px;
  text-align: left;
}

.unit-button { grid-template-columns: 48px minmax(0, 1fr); }
.build-button { grid-template-columns: 48px minmax(0, 1fr); }
.active-production-list { display:grid; gap:6px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.active-production-heading { color:#d6bd79; font-size:10px; font-weight:800; text-transform:uppercase; }
.cancel-production-button { width:100%; min-height:66px; display:grid; grid-template-columns:48px minmax(0,1fr); gap:9px; align-items:center; padding:8px; text-align:left; border-color:#8f5e47; background:#302723; }
.cancel-production-button:hover { border-color:#d58a62; background:#3a2c27; box-shadow:inset 3px 0 0 #d58a62; }
.cancel-production-button > span:last-child { min-width:0; display:grid; gap:2px; }
.cancel-production-button strong { color:#f2dfb4; }
.cancel-production-button small { color:#aaa294; }
.cancel-production-button em { color:#e9a67e; font-size:9px; font-style:normal; line-height:1.25; }

.command {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  text-align: left;
}

.command.primary {
  min-height: 48px;
  border-color: #638a5c;
  background: #304b31;
  color: #eff8e8;
}

.command.primary:hover { background: #385b3a; box-shadow: inset 3px 0 0 var(--good); }
.command.warn { border-color: #67403a; color: #d4b3ab; }
.building-catalog-trigger { min-height: 58px; border-color: #6f654b; background: #2b2b27; }
.building-catalog-trigger strong { display: block; color: #f2e6cf; font-size: 14px; }
.building-catalog-trigger small { display: block; margin-top: 2px; color: #96928a; font-size: 9px; font-weight: 500; }
.icon-buildings { position: relative; }
.icon-buildings::before { content: ""; width: 23px; height: 20px; position: absolute; left: 2px; top: 5px; border: 2px solid #c3a25f; background: linear-gradient(90deg,#59656a 0 28%,#293033 28% 38%,#6d5542 38% 66%,#293033 66% 76%,#59656a 76%); box-shadow: 0 -5px 0 -2px #9b7844; }

.command-icon { width: 22px; height: 22px; position: relative; display: block; }
.command-icon::before,
.command-icon::after { content: ""; position: absolute; display: block; }
.icon-upgrade::before { left: 9px; top: 2px; width: 4px; height: 17px; background: var(--brass); }
.icon-upgrade::after { left: 4px; top: 2px; width: 12px; height: 12px; border-left: 4px solid var(--brass); border-top: 4px solid var(--brass); transform: rotate(45deg); }
.icon-repair::before { left: 9px; top: 1px; width: 5px; height: 20px; background: #b8c1c4; transform: rotate(42deg); border-radius: 3px; }
.icon-repair::after { left: 1px; top: 1px; width: 9px; height: 9px; border: 4px solid #b8c1c4; border-right-color: transparent; border-radius: 50%; }
.icon-turn::before { inset: 3px; border: 3px solid var(--good); border-left-color: transparent; border-radius: 50%; }
.icon-turn::after { left: 1px; top: 7px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 7px solid var(--good); }
.icon-reset::before { left: 5px; top: 5px; width: 12px; height: 12px; border: 2px solid #b8796d; border-radius: 2px; transform: rotate(45deg); }
.icon-reset::after { left: 10px; top: 1px; width: 2px; height: 20px; background: #b8796d; transform: rotate(45deg); }
.icon-front::before { left: 2px; top: 4px; width: 18px; height: 14px; border: 2px solid #79aeb8; background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(121,174,184,.35) 4px 6px); }
.icon-front::after { left: 10px; top: 1px; width: 2px; height: 21px; background: var(--brass); box-shadow: -8px 6px 0 -0.5px #79aeb8, 8px 6px 0 -0.5px #79aeb8; }

.symbol-icon {
  width: 38px;
  height: 38px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #4a4e4f;
  border-radius: 4px;
  background: #202426;
}

.unit-portrait {
  width: 48px;
  height: 48px;
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #4a4e4f;
  border-radius: 4px;
  background-color: #161a1c;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

.unit-portrait.sprite-human { background-image: url("images/unites/human_units_sheet.webp"); }
.unit-portrait.sprite-orc { background-image: url("images/unites/orc_units_sheet.webp"); }
.unit-portrait.frame-0 { background-position: 0 0; }
.unit-portrait.frame-1 { background-position: 100% 0; }
.unit-portrait.frame-2 { background-position: 0 100%; }
.unit-portrait.frame-3 { background-position: 100% 100%; }
.unit-portrait.generated-unit { background-size: cover; background-position: center 18%; border-color: #a8894d; box-shadow: inset 0 0 0 1px rgba(240,205,128,.25); }
.unit-portrait.portrait-heavy-gatling { background-image: url("images/unites/heavy_gatling.webp"); }
.unit-portrait.portrait-pyro-mage { background-image: url("images/unites/pyro_mage.webp"); border-color: #a35b3b; }
.unit-portrait.portrait-fire-spirit { background-image:url("images/unites/orc_fire_spirit.webp"); border-color:#d66c2f; background-position:center 42%; box-shadow:inset 0 0 0 1px rgba(255,190,89,.34),0 0 16px rgba(231,83,24,.5); }
.unit-portrait.portrait-human-fishing-boat { background-image:url("images/unites/human_fishing_boat.webp"); background-size:contain; background-repeat:no-repeat; background-position:center; border-color:#6fa9b7; background-color:#17252a; }
.unit-portrait.portrait-orc-fishing-boat { background-image:url("images/unites/orc_fishing_boat.webp"); background-size:contain; background-repeat:no-repeat; background-position:center; border-color:#7e8d55; background-color:#22251d; }
.unit-portrait.portrait-explosive-fishing { background-image:url("images/recherches_et_skills/explosive_fishing.webp"); background-size:contain; background-repeat:no-repeat; background-position:center; border-color:#d47735; background-color:#271b16; }
.unit-portrait.portrait-advanced-fishing-nets { background-image:url("images/recherches_et_skills/advanced_fishing_nets.webp"); background-size:contain; background-repeat:no-repeat; background-position:center; border-color:#b9a25c; background-color:#17272c; }
.unit-portrait.portrait-gnom { background-image: url("images/unites/gnom.webp"); background-position: center 12%; border-color: #8f866e; box-shadow: inset 0 0 0 1px rgba(218,205,166,.34), 0 0 12px rgba(104,94,70,.42); }
.unit-portrait.portrait-hybrid-warrior { background-image: url("images/unites/hybrid_warrior.webp"); background-position:center 16%; border-color:#b89358; box-shadow:inset 0 0 0 1px rgba(239,202,125,.34),0 0 15px rgba(112,180,172,.3); }
.unit-portrait.portrait-ogre-young { background-image: url("images/unites/ogre_young.webp"); background-position:center 12%; border-color:#6d8e4e; }
.unit-portrait.portrait-ogre-adult { background-image: url("images/unites/ogre_adult.webp"); background-position:center 13%; border-color:#8d6d48; }
.unit-portrait.portrait-ogre-elite { background-image: url("images/unites/ogre_elite.webp"); background-position:center 13%; border-color:#69a3ac; box-shadow:inset 0 0 0 1px rgba(138,224,235,.32),0 0 14px rgba(53,177,199,.35); }
.unit-portrait.portrait-armored-train { background-image: url("images/unites/armored_train.webp"); background-position:center 54%; border-color:#778690; box-shadow:inset 0 0 0 1px rgba(200,218,225,.28),0 0 14px rgba(89,124,143,.38); }
.unit-portrait.portrait-orc-war-dirigible { background-image: url("images/unites/orc_war_dirigible.webp?v=wounded-prisoner-2"); background-position:center 42%; border-color:#8a653e; box-shadow:inset 0 0 0 1px rgba(228,183,105,.25),0 0 14px rgba(173,78,35,.38); }
.unit-portrait.portrait-berserker { background-image:url("images/unites/orc_berserker.webp"); background-size:contain; background-repeat:no-repeat; background-position:center 8%; border-color:#b24f32; background-color:#1d2118; box-shadow:inset 0 0 0 1px rgba(239,153,83,.34),0 0 16px rgba(188,62,33,.46); }
.unit-portrait.upgrade-extended-magazine { background-image: url("images/unites/heavy_gatling_upgraded.webp"); border-color: #d2ad62; box-shadow: inset 0 0 0 1px rgba(255,221,148,.35), 0 0 13px rgba(203,151,55,.35); }
.unit-portrait.upgrade-blue-fire { background-image: url("images/unites/pyro_mage_upgraded.webp"); border-color: #66c9ff; box-shadow: inset 0 0 0 1px rgba(137,221,255,.4), 0 0 14px rgba(49,158,255,.45); }

.building-portrait {
  width: 48px;
  height: 48px;
  position: relative;
  display: block;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid #4a4e4f;
  border-radius: 4px;
  background-color: #161a1c;
  background-repeat: no-repeat;
  background-size: 300% 300%;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

.building-portrait.sprite-human-building { background-image: url("images/batiments/human_buildings_sheet.webp"); }
.building-portrait.sprite-orc-building { background-image: url("images/batiments/orc_buildings_sheet.webp"); }
.building-portrait.build-frame-0 { background-position: 0 0; }
.building-portrait.build-frame-1 { background-position: 50% 0; }
.building-portrait.build-frame-2 { background-position: 100% 0; }
.building-portrait.build-frame-3 { background-position: 0 50%; }
.building-portrait.build-frame-4 { background-position: 50% 50%; }
.building-portrait.build-frame-5 { background-position: 100% 50%; }
.building-portrait.build-frame-6 { background-position: 0 100%; }
.building-portrait.build-frame-7 { background-position: 50% 100%; }
.building-portrait.build-frame-8 { background-position: 100% 100%; }
.building-portrait.building-furnace { border-color: #a76035; filter: drop-shadow(0 3px 4px rgba(223,91,32,.5)) saturate(1.35); }
.building-portrait.building-furnace::after { content: ""; width: 15px; height: 21px; position: absolute; right: 5px; top: 4px; border-radius: 50% 50% 45% 45%; background: radial-gradient(ellipse at 50% 72%, #fff0a3 0 12%, #ff9b2f 30%, #d53f1d 58%, transparent 72%); box-shadow: 0 0 10px rgba(255,111,35,.72); }
.building-portrait.generated-building { background-size: contain; background-position: center; border-color: #8d7548; box-shadow: inset 0 0 0 1px rgba(240,205,128,.18); }
.building-portrait.portrait-engineer-workshop { background-image: url("images/batiments/engineer_workshop.webp"); filter: drop-shadow(0 3px 4px rgba(199,160,82,.42)) saturate(1.08); }
.building-portrait.portrait-mage-tower { background-image: url("images/batiments/mage_tower.webp"); border-color: #a95c3c; filter: drop-shadow(0 3px 5px rgba(216,82,32,.45)) saturate(1.2); }
.building-portrait.portrait-mage-tower.blue-fire-upgraded { border-color: #67c9ff; filter: hue-rotate(155deg) saturate(1.6) brightness(1.08) drop-shadow(0 3px 7px rgba(42,151,255,.7)); }
.building-portrait.portrait-modern-factory { background-image:url("images/batiments/modern_factory.webp"); border-color:#788994; filter:drop-shadow(0 3px 5px rgba(73,103,121,.48)) saturate(1.06); }
.building-portrait.portrait-human-scholar-prison { background-image:url("images/batiments/human_scholar_prison.webp"); border-color:#776240; filter:drop-shadow(0 3px 5px rgba(117,65,35,.52)) saturate(1.12); }
.building-portrait.portrait-human-market { background-image:url("images/batiments/human_market.webp"); border-color:#718a99; filter:drop-shadow(0 3px 5px rgba(82,121,143,.5)) saturate(1.06); }
.building-portrait.portrait-orc-bazaar { background-image:url("images/batiments/orc_bazaar.webp"); border-color:#8b6845; filter:drop-shadow(0 3px 5px rgba(128,70,39,.56)) saturate(1.12); }
.building-portrait.portrait-human-wind-turbine { background-image:url("images/batiments/human_wind_turbine.webp"); border-color:#7897a2; filter:drop-shadow(0 3px 6px rgba(74,133,155,.5)) saturate(1.08); }
.building-portrait.portrait-human-battery { background-image:url("images/batiments/human_battery.webp"); border-color:#a78345; filter:drop-shadow(0 3px 6px rgba(82,157,178,.48)) saturate(1.1); }
.building-portrait.portrait-human-electromechanical-tower { background-image:url("images/batiments/human_electromechanical_tower.webp"); border-color:#79dff3; filter:saturate(1.12) brightness(1.04) drop-shadow(0 0 8px rgba(77,206,239,.58)); }
.unique-option { border-color: #8b7448; background: linear-gradient(135deg, #292b2b, #2d2921); box-shadow: inset 3px 0 0 #bd9650; }
.unique-option:hover { border-color: #c3a15d; }

.symbol-icon::before,
.symbol-icon::after { content: ""; position: absolute; display: block; }
.icon-center::before,
.icon-house::before { width: 24px; height: 17px; bottom: 7px; background: var(--brass); clip-path: polygon(0 100%, 0 35%, 50% 0, 100% 35%, 100% 100%); }
.icon-house::before { background: #b77d50; }
.icon-farm::before { width: 27px; height: 4px; bottom: 9px; background: #d7b75c; box-shadow: 0 -7px 0 #88a859, 0 -14px 0 #668b4c; }
.icon-lumber::before { width: 28px; height: 7px; background: #8a5b34; transform: rotate(-25deg); border-radius: 8px; }
.icon-lumber::after { width: 20px; height: 4px; background: #caa16a; transform: rotate(35deg); border-radius: 6px; }
.icon-mine::before { width: 26px; height: 19px; bottom: 7px; background: #969995; clip-path: polygon(12% 100%, 0 45%, 32% 8%, 72% 0, 100% 38%, 80% 100%); }
.icon-industry::before { width: 26px; height: 18px; bottom: 7px; background: #9c4d3d; clip-path: polygon(0 100%, 0 35%, 22% 55%, 44% 35%, 66% 55%, 88% 35%, 100% 100%); }
.icon-industry::after { width: 7px; height: 24px; right: 6px; top: 5px; background: #555d60; }
.icon-barracks::before { width: 28px; height: 18px; bottom: 7px; background: #6c7880; clip-path: polygon(0 100%, 10% 22%, 50% 0, 90% 22%, 100% 100%); }
.icon-shipyard::before,
.icon-cruiser::before,
.icon-barge::before { width: 29px; height: 14px; bottom: 9px; background: #56808a; clip-path: polygon(0 35%, 78% 35%, 100% 0, 84% 100%, 12% 100%); }
.icon-tower::before { width: 14px; height: 27px; bottom: 5px; background: #87909a; }
.icon-tower::after { width: 25px; height: 8px; top: 6px; background: #b1aa94; }
.icon-rifle::before { width: 29px; height: 5px; background: #c6d2d8; transform: rotate(-22deg); border-radius: 3px; }
.icon-engineer::before { width: 20px; height: 20px; border: 5px solid var(--brass); border-radius: 50%; }
.icon-scout::before { width: 27px; height: 16px; border: 4px solid var(--brass); border-left: 0; border-bottom: 0; transform: rotate(-12deg); border-radius: 50% 50% 0 0; }
.icon-warrior::before { width: 24px; height: 24px; background: #8eaa70; clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%); }
.icon-sapper::before { width: 12px; height: 25px; background: #b66b35; transform: rotate(28deg); border-radius: 8px; }
.icon-sapper::after { width: 18px; height: 5px; background: #d0d4d4; top: 8px; transform: rotate(28deg); }
.icon-hauler::before { width: 30px; height: 17px; bottom: 8px; background: #79523b; border-radius: 3px; }
.icon-hauler::after { width: 8px; height: 8px; bottom: 4px; background: #111416; border-radius: 50%; box-shadow: 18px 0 0 #111416; }

.btn-title { display: block; font-size: 12px; color: var(--paper); }
.btn-cost { display: block; margin-top: 2px; color: #c7aa70; font-size: 10px; font-weight: 650; line-height: 1.25; }
.btn-desc { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.28; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.topbar {
  min-height: 66px;
  display: grid;
  grid-template-columns: 190px auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  background: #171a1c;
}

.turn-identity { display: grid; grid-template-columns: 12px 1fr; gap: 9px; align-items: center; }
.turn-identity small { display: block; color: #85827b; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }
.turn-identity strong { display: block; margin-top: 2px; color: #fff0c9; font-size: 13px; }
.phase-dot { width: 10px; height: 34px; border-radius: 2px; background: var(--brass); box-shadow: 0 0 14px rgba(209, 165, 79, 0.35); }
.phase-dot.human { background: #6f9dc1; }
.phase-dot.orc { background: #7ca76f; }

.resources { display: grid; grid-template-columns: repeat(9, minmax(62px, 1fr)); gap: 5px; }
.resource { min-width: 0; height: 45px; display: grid; grid-template-columns: 18px 1fr; grid-template-rows: 17px 16px; column-gap: 5px; align-items: center; padding: 5px 6px; border: 1px solid #343839; border-radius: 4px; background: #202426; }
.resource-icon { grid-row: 1 / 3; width: 16px; height: 16px; border-radius: 2px; background: #777; }
.resource-icon.wood { background: #94613b; }
.resource-icon.food { background: #92a957; clip-path: polygon(50% 0, 72% 36%, 100% 50%, 72% 64%, 50% 100%, 30% 65%, 0 50%, 30% 35%); }
.resource-icon.iron { background: #9ea7aa; clip-path: polygon(20% 0, 80% 0, 100% 35%, 75% 100%, 25% 100%, 0 35%); }
.resource-icon.coal { background: #303335; clip-path: polygon(18% 5%, 80% 0, 100% 45%, 75% 100%, 15% 90%, 0 40%); box-shadow: 0 0 0 1px #5f6364; }
.resource-icon.gold { background: var(--brass); border-radius: 50%; box-shadow: inset 0 0 0 3px #a77b31; }
.resource-icon.electricity { background:#bdefff; clip-path:polygon(57% 0,100% 0,68% 39%,94% 39%,23% 100%,42% 56%,10% 56%); filter:drop-shadow(0 0 4px #2fccec); }
.resource-icon.pop { border: 2px solid #b1b7b8; border-radius: 50%; background: transparent; }
.resource-icon.actions { border: 2px solid var(--good); border-left-color: transparent; border-radius: 50%; background: transparent; }
.resource-icon.turn { border: 2px solid var(--brass); background: transparent; transform: rotate(45deg); }
.resource span:not(.resource-icon) { overflow: hidden; color: #8f8b84; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.resource strong { min-width: 0; align-self: start; display: flex; align-items: baseline; gap: 4px; color: #f7edd9; font-size: 12px; white-space: nowrap; }
.resource-delta { color: #72d79a; font-size: 9px; font-style: normal; font-weight: 800; text-shadow: 0 0 8px rgba(72,199,124,.28); }
.resource-delta.zero { color: #53866a; }
.resource-delta.negative { color: #e37a67; text-shadow: 0 0 8px rgba(211,84,65,.28); }

.canvas-wrap { position: relative; min-height: 0; display: grid; align-content: start; justify-items: center; overflow: hidden; background: #102027; }
#gameCanvas { width: 100%; height: auto; max-height: 100%; aspect-ratio: 1320 / 780; display: block; cursor: crosshair; }
.map-prompt { position: absolute; left: 12px; top: 12px; max-width: min(420px, calc(100% - 24px)); padding: 8px 10px; border-left: 3px solid var(--brass); border-radius: 3px; color: #e9e2d7; background: rgba(17, 20, 22, 0.9); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28); font-size: 11px; line-height: 1.35; pointer-events: none; }
.tile-build-menu { position: absolute; z-index: 5; width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 14px; overflow-y: auto; border: 1px solid #77633e; border-radius: 5px; background: rgba(25, 29, 31, 0.98); box-shadow: 0 22px 52px rgba(0, 0, 0, 0.68); transform: translateX(-50%); }
.tile-build-menu.hidden { display: none; }
.tile-build-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding: 2px 4px 11px; border-bottom: 1px solid #414546; }
.tile-build-heading small { display: block; color: #8f8b84; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.tile-build-heading strong { display: block; margin-top: 3px; color: #f0dfba; font-size: 15px; }
.tile-build-heading button { width: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; color: #c7c1b8; font-size: 22px; }
.tile-build-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.tile-build-option { min-width: 0; min-height: 128px; display: grid; grid-template-rows: 72px auto minmax(26px, auto); justify-items: center; align-content: center; gap: 4px; padding: 9px 6px; text-align: center; }
.tile-build-option .building-portrait { width: 72px; height: 72px; }
.tile-build-option strong { max-width: 100%; overflow: hidden; color: #f0e9dc; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tile-build-option small { color: #c5a96f; font-size: 9px; line-height: 1.25; }
.tile-build-option.invalid { border-color: #523e38; }
.tile-build-option:disabled .building-portrait { filter: grayscale(0.8) brightness(0.65); }
.zoom-controls { position: absolute; right: 10px; top: 10px; z-index: 3; display: grid; grid-template-columns: 34px 62px 34px; gap: 3px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 5px; background: rgba(17, 20, 22, 0.92); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.35); }
.zoom-controls button { width: 34px; min-height: 32px; padding: 0; display: grid; place-items: center; font-size: 20px; line-height: 1; }
.zoom-controls button:hover { box-shadow: none; }
.zoom-controls .zoom-value { width: 62px; color: #e7d5ad; font-size: 10px; }
.map-legend { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 11px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: rgba(17,20,22,.88); color: #bdb9b1; font-size: 9px; pointer-events: none; }
.map-legend span { display: flex; gap: 5px; align-items: center; }
.legend-swatch { width: 10px; height: 10px; display: inline-block; transform: rotate(45deg); border: 2px solid; }
.legend-swatch.move { border-color: #8fd1d8; background: rgba(91, 185, 196, .25); }
.legend-swatch.attack { border-color: #f27a63; background: rgba(210, 74, 56, .3); }
.legend-swatch.spent { border-color: #92989a; background: rgba(130, 135, 136, .25); }
.legend-swatch.territory-human { border-color: #d4bd82; background: #5c7a49; }
.legend-swatch.territory-orc { border-color: #91a96c; background: #2b4230; }
.legend-swatch.build-site { border-color: #d3a958; background: #655135; }

.start-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8, 10, 11, 0.74); backdrop-filter: blur(3px); }
.start-overlay.hidden { display: none; }
.start-card { width: min(520px, 100%); padding: 28px; border: 1px solid #62543b; border-radius: 6px; background: #202426; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.start-card h2 { margin: 5px 0 10px; color: #f4ead6; font-size: 30px; }
.start-card p { color: var(--muted); line-height: 1.5; }
.start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.start-actions .start-human-button { border-color: #557896; background: #29435a; }
.start-actions .start-orc-button { border-color: #66875d; background: #334b30; }
.start-actions .sandbox-button { position:relative; border-color:#b58943; background:#493b27; color:#f4ddb0; }
.start-actions .sandbox-button::before { content:""; width:9px; height:9px; display:inline-block; margin-right:7px; border:1px solid currentColor; background:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 3px); vertical-align:1px; }
.start-actions .sandbox-human { border-left:3px solid #6598bd; }
.start-actions .sandbox-orc { border-left:3px solid #71975d; }
.start-actions .multiplayer-home-button { grid-column:1 / -1; min-height:48px; border-color:#5d8b91; background:#25434a; color:#d8f1f1; box-shadow:inset 3px 0 0 #71b1b6; }
.start-actions .multiplayer-home-button:hover { background:#2d535b; border-color:#79b8bd; }
.start-actions .admin-home-button { grid-column: 1 / -1; border-color: #8b7449; background: #4b3d2a; }
.multiplayer-badge { display:block; width:max-content; margin-top:3px; padding:2px 5px; border:1px solid #527b80; border-radius:2px; color:#9bcbd0; background:#172b30; font-size:8px; font-weight:800; }
.multiplayer-badge.hidden { display:none; }
.multiplayer-timer { width:92px; height:45px; display:grid; place-items:center; align-content:center; gap:2px; border:1px solid #557b80; border-radius:4px; background:#17282c; box-shadow:inset 3px 0 0 #72abb0; }
.multiplayer-timer.hidden { display:none; }
.multiplayer-timer span { color:#8eaaad; font-size:8px; font-weight:800; text-transform:uppercase; }
.multiplayer-timer strong { color:#e1f3f2; font:800 18px/1 "Consolas",monospace; }
.multiplayer-timer.warning { border-color:#a27942; background:#332819; box-shadow:inset 3px 0 0 #d79d49,0 0 12px rgba(215,157,73,.18); }
.multiplayer-timer.warning strong { color:#ffd18d; }
.multiplayer-timer.paused { border-color:#586164; background:#25292b; box-shadow:inset 3px 0 0 #767f82; }
.multiplayer-timer.paused strong { color:#c1c6c7; font-size:12px; }

.multiplayer-modal { position:fixed; inset:0; z-index:72; display:grid; place-items:center; padding:18px; background:rgba(5,8,9,.91); backdrop-filter:blur(8px); }
.multiplayer-modal.hidden { display:none; }
.multiplayer-window { width:min(860px,calc(100vw - 36px)); max-height:calc(100vh - 36px); display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; overflow:hidden; border:1px solid #58777c; border-radius:6px; background:#181e20; box-shadow:0 32px 100px rgba(0,0,0,.86); }
.multiplayer-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:20px 24px; border-bottom:1px solid #354448; background:#202a2d; }
.multiplayer-header h2 { margin-top:4px; font-size:22px; }
.multiplayer-header p { max-width:650px; margin-top:7px; color:#a7acad; font-size:11px; line-height:1.45; }
.multiplayer-header > button { width:36px; height:36px; padding:0; font-size:22px; }
.multiplayer-body { min-height:320px; display:grid; grid-template-columns:1fr 48px 1fr; align-items:stretch; }
.multiplayer-create,.multiplayer-join { display:flex; flex-direction:column; justify-content:center; gap:12px; padding:28px; }
.multiplayer-create p,.multiplayer-join p { min-height:32px; color:#8f9697; font-size:10px; line-height:1.4; }
.multiplayer-step { color:#eee3cc; font-size:15px; font-weight:800; }
.multiplayer-faction-choice { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.multiplayer-faction-choice button[data-pvp-faction="human"].active { border-color:#70a8ca; background:#294b61; color:#e6f5ff; box-shadow:inset 3px 0 0 #75b4d8; }
.multiplayer-faction-choice button[data-pvp-faction="orc"].active { border-color:#7da266; background:#354e30; color:#edf8e7; box-shadow:inset 3px 0 0 #86b16d; }
.multiplayer-separator { display:grid; place-items:center; position:relative; color:#747c7d; font-size:10px; font-weight:800; text-transform:uppercase; }
.multiplayer-separator::before { content:""; width:1px; position:absolute; inset:24px auto; background:#384244; }
.multiplayer-separator span { position:relative; z-index:1; padding:8px 0; background:#181e20; }
.multiplayer-join label { color:#b7bcbb; font-size:10px; font-weight:700; }
.multiplayer-join input { width:100%; height:52px; border:1px solid #53767b; border-radius:4px; outline:0; background:#101719; color:#e9f4f3; font:800 24px/1 "Consolas",monospace; letter-spacing:0; text-align:center; text-transform:uppercase; }
.multiplayer-join input:focus { border-color:#7fb2b7; box-shadow:0 0 0 2px rgba(92,157,165,.22); }
.multiplayer-room-status { display:grid; grid-template-columns:auto 120px minmax(0,1fr); align-items:center; gap:12px; padding:14px 24px; border-top:1px solid #3e5559; background:#203237; }
.multiplayer-room-status.hidden { display:none; }
.multiplayer-room-status > span { color:#9ca9aa; font-size:9px; font-weight:800; text-transform:uppercase; }
.multiplayer-room-status strong { color:#d9f0ee; font:800 22px/1 "Consolas",monospace; }
.multiplayer-room-status p { color:#a9c5c7; font-size:10px; }
.multiplayer-room-status.error { border-top-color:#8f4b3b; background:#382522; }
.multiplayer-footer { display:flex; justify-content:flex-end; padding:12px 20px; border-top:1px solid #343e40; background:#161b1d; }
body.multiplayer-waiting .left-panel .section button:not(#resetGame),body.multiplayer-waiting #gameCanvas,body.multiplayer-waiting .zoom-controls,body.multiplayer-waiting #upgradeCenter,body.multiplayer-waiting #openBattle,body.multiplayer-waiting #endTurn { pointer-events:none; filter:saturate(.45); opacity:.58; }

.admin-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 18px; background: rgba(5,7,8,.9); backdrop-filter: blur(8px); }
.admin-modal.hidden { display: none; }
.admin-window { width: min(1240px, calc(100vw - 36px)); height: min(860px, calc(100vh - 36px)); min-height: 620px; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid #75613d; border-radius: 6px; background: #181c1e; box-shadow: 0 30px 90px rgba(0,0,0,.82); }
.admin-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; border-bottom: 1px solid #3d4243; background: #232729; }
.admin-header h2 { margin: 3px 0 2px; color: #f2e5cc; font-size: 24px; }
.admin-header p { margin: 0; color: #99958d; font-size: 11px; }
.admin-close { width: 38px; min-height: 38px; padding: 0; display: grid; place-items: center; font-size: 23px; }
.admin-category-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; padding: 9px 14px; border-bottom: 1px solid #34393a; background: #1f2325; }
.admin-category-tabs button { min-height: 36px; padding: 6px 10px; color: #a9a59d; font-size: 11px; }
.admin-category-tabs button.active { color: #ffe5ad; }
.admin-body { min-height: 0; display: grid; grid-template-columns: 310px minmax(0,1fr); }
.admin-sidebar { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); border-right: 1px solid #3b4041; background: #1d2123; }
.admin-faction-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 10px; border-bottom: 1px solid #363b3c; }
.admin-faction-filters button { min-height: 32px; padding: 5px; color: #aaa69e; font-size: 9px; }
.admin-item-list { min-height: 0; display: grid; align-content: start; gap: 5px; padding: 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #595e5f #1b1f21; }
.admin-item { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 9px; padding: 5px 8px; text-align: left; }
.admin-item > span:last-child { min-width: 0; }
.admin-item strong,.admin-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-item strong { color: #e6ded0; font-size: 11px; }
.admin-item small { margin-top: 4px; color: #8d8a83; font-size: 8px; }
.admin-item-visual { width: 54px; height: 52px; display: grid; place-items: center; overflow: hidden; border: 1px solid #3f4546; background: #14191b; }
.admin-item-visual .building-portrait,.admin-item-visual .unit-portrait,.admin-item-visual .admin-logistic-image,.admin-item-visual .gatling-platform-portrait { width: 52px; height: 50px; }
.admin-item-visual img { width: 100%; height: 100%; display: block; object-fit: contain; }
.admin-editor { min-width: 0; min-height: 0; overflow: hidden; background: #171b1d; }
.admin-empty-state { height: 100%; display: grid; place-items: center; color: #85817a; font-size: 13px; }
.admin-edit-panel { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(280px, 38%) minmax(0,1fr); }
.admin-edit-panel.hidden,.admin-empty-state.hidden { display: none; }
.admin-preview-column { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; overflow: hidden; border-right: 1px solid #363b3c; background: #1d2325; text-align: center; }
.admin-preview { width: min(310px,100%); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid #4b5253; background: #151c1f; box-shadow: inset 0 0 45px rgba(53,107,124,.13), 0 16px 32px rgba(0,0,0,.32); }
.admin-preview.orc { background: #1b211b; box-shadow: inset 0 0 45px rgba(104,126,66,.14), 0 16px 32px rgba(0,0,0,.32); }
.admin-preview .building-portrait,.admin-preview .unit-portrait,.admin-preview .admin-logistic-image,.admin-preview .gatling-platform-portrait { width: 88%; height: 88%; }
.admin-preview img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.admin-entry-faction { margin-top: 17px; color: #d0aa5f; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.admin-preview-column h3 { margin: 5px 0 3px; color: #f3e5c9; font-size: 22px; }
.admin-preview-column p { margin: 0; color: #8e8b85; font-size: 10px; }
.admin-fields-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; padding: 18px; overflow: hidden; }
.admin-fields { min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 12px; padding-right: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #595e5f #1b1f21; }
.admin-field { min-width: 0; display: grid; gap: 5px; }
.admin-field.wide { grid-column: 1 / -1; }
.admin-field span { color: #aaa69e; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.admin-field .admin-field-heading { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.admin-field .admin-field-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-original-value { max-width: 48%; overflow: hidden; color: #777b7c; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.admin-field input,.admin-field textarea { width: 100%; min-height: 38px; border: 1px solid #444a4b; border-radius: 4px; padding: 8px 9px; color: #f1e8d8; background: #24292b; font: 600 12px "Segoe UI",Tahoma,Arial,sans-serif; outline: none; }
.admin-field textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.admin-field input:focus,.admin-field textarea:focus { border-color: #b28c47; box-shadow: 0 0 0 2px rgba(178,140,71,.16); }
.admin-save-status { min-height: 28px; padding-top: 10px; color: #9d9991; font-size: 10px; }
.admin-save-status.success { color: #86cf8a; }
.admin-save-status.error { color: #ee8878; }
.admin-save-status.saving { color: #e1c274; }
.admin-footer { min-height: 58px; display: flex; justify-content: flex-end; gap: 8px; padding: 9px 18px; border-top: 1px solid #3a3f40; background: #202426; }
.admin-footer button { min-width: 150px; }
.admin-footer .primary { border-color: #a9823d; background: #6c5328; }
.admin-body.connection-mode { grid-template-columns: 1fr; }
.admin-body.connection-mode .admin-sidebar,.admin-body.connection-mode .admin-editor { display: none; }
.admin-connection-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 10px; padding: 20px; overflow: hidden; background: #171b1d; }
.admin-connection-panel.hidden { display: none; }
.connection-log-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.connection-log-heading h3 { margin: 3px 0 0; color: #f3e5c9; font-size: 22px; }
.connection-log-status { margin: 0; color: #aaa69e; font-size: 11px; }
.connection-log-status.error { color: #ee8878; }
.connection-log-table-wrap { min-height: 0; overflow: auto; border: 1px solid #3b4041; border-radius: 4px; }
.connection-log-table { width: 100%; border-collapse: collapse; color: #ded7ca; font-size: 11px; }
.connection-log-table th { position: sticky; top: 0; z-index: 1; padding: 11px 12px; border-bottom: 1px solid #555c5d; color: #d9b76e; background: #252a2c; text-align: left; text-transform: uppercase; }
.connection-log-table td { padding: 10px 12px; border-bottom: 1px solid #303536; }
.connection-log-table tr:nth-child(even) td { background: #1d2224; }
.connection-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 18px; background: rgba(5,7,8,.96); backdrop-filter: blur(10px); }
.connection-modal.hidden { display: none; }
.connection-window { width: min(480px,calc(100vw - 36px)); display: grid; gap: 14px; padding: 28px; border: 1px solid #806940; border-radius: 7px; background: #1c2123; box-shadow: 0 30px 90px rgba(0,0,0,.85); }
.connection-window h2 { margin: -6px 0 0; color: #f3e5c9; font-size: 26px; }
.connection-window > p { margin: -4px 0 4px; color: #aaa69e; font-size: 12px; line-height: 1.55; }
.connection-window label { display: grid; gap: 6px; color: #c5bdaF; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.connection-window input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #484f50; border-radius: 4px; color: #f5ead8; background: #272d2f; font: 600 14px "Segoe UI",Tahoma,Arial,sans-serif; outline: none; }
.connection-window input:focus { border-color: #bd944b; box-shadow: 0 0 0 2px rgba(189,148,75,.18); }
.connection-window .primary { min-height: 46px; border-color: #a9823d; background: #6c5328; }
.connection-form-status { min-height: 16px; color: #d7bd7c; font-size: 10px; }
.connection-form-status.error { color: #ee8878; }
.admin-login-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.battle-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 12px; background: rgba(7, 9, 10, 0.84); backdrop-filter: blur(5px); }
body:has(.admin-modal:not(.hidden)), body:has(.multiplayer-modal:not(.hidden)), body:has(.battle-modal:not(.hidden)), body:has(.tactic-modal:not(.hidden)), body:has(.logistic-build-modal:not(.hidden)), body:has(.building-catalog-modal:not(.hidden)), body:has(.unit-inspect-modal:not(.hidden)), body:has(.market-modal:not(.hidden)), body:has(.research-modal:not(.hidden)), body:has(.victory-modal:not(.hidden)) { overflow: hidden; }
.battle-modal.hidden { display: none; }
.battle-window { width: calc(100vw - 24px); height: calc(100vh - 24px); overflow: auto; border: 1px solid #66583d; border-radius: 6px; background: #171b1d; box-shadow: 0 28px 70px rgba(0,0,0,.72); }
.battle-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 18px; border-bottom: 1px solid #3f4242; background: #202426; }
.battle-header h2 { margin-top: 3px; color: #f3e6cd; font-size: 22px; }
.battle-header-actions { display:flex; align-items:center; gap:9px; }
.battle-close { width: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; font-size: 22px; }
.tactic-star { width:112px; min-height:42px; display:grid; grid-template-columns:30px 1fr; grid-template-rows:19px 14px; align-items:center; gap:0 5px; padding:4px 8px; border-color:#e5c46d; color:#fff0ae; background:#574321; box-shadow:inset 0 0 0 1px rgba(255,226,134,.3),0 0 18px rgba(235,186,67,.42); text-align:left; animation:tactic-star-pulse 900ms ease-in-out infinite alternate; }
.tactic-star.hidden { display:none; }
.tactic-star > span { grid-row:1 / 3; color:#ffe28a; font-size:27px; line-height:1; text-shadow:0 0 10px #f7b93d; }
.tactic-star strong { color:#fff3ca; font-size:11px; text-transform:uppercase; }
.tactic-star small { color:#d9c58f; font-size:8px; }
.battle-status { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 18px; border-bottom: 1px solid #333738; color: #b7b2aa; font-size: 11px; }
.battle-status strong { color: #e6d2a8; font-size: 13px; }
.battle-board { padding: 18px 24px 14px; background: linear-gradient(180deg, rgba(165,75,57,.08), transparent 42%, rgba(59,116,128,.09)); }
.formation { min-width: 0; }
.formation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.formation-heading strong { color: #eee4d2; font-size: 12px; }
.formation-heading span { color: #85827b; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.formation-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tower-reserve { min-height: 102px; display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 7px 9px 9px; border: 1px solid #3d4243; background: #1c2022; }
.tower-grid { width: 34%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.center-defense { width: 27%; }
.logistics-wing { width: 37%; min-width: 0; display: grid; gap: 4px; }
.logistics-wing > span { color: #8f8a7f; font-size: 8px; text-transform: uppercase; }
.logistics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.logistic-slot { min-width: 0; height: 76px; position: relative; display: grid; grid-template-columns: 50px minmax(0,1fr); grid-template-rows: 22px 18px 14px; align-items: center; gap: 1px 5px; padding: 4px 5px; overflow: hidden; border-color: #4e5557; background: #262b2d; text-align: left; }
.logistic-slot .logistic-portrait { width: 48px; height: 66px; grid-row: 1 / 4; }
.logistic-slot strong { min-width: 0; overflow: hidden; color: #e4ddcf; font-size: 8px; line-height: 1.15; text-overflow: ellipsis; }
.logistic-slot small { color: #aaa59a; font-size: 7px; }
.logistic-slot .protected-mark { color: #6fae9b; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.logistic-slot.empty { grid-template-columns: 25px minmax(0,1fr); grid-template-rows: 24px 18px; align-content: center; border-style: dashed; background: #202426; }
.logistic-slot.empty:disabled { opacity: .52; }
.logistic-slot.empty.available { border-color: #7f744d; color: #d8bc75; cursor: pointer; }
.logistic-plus { width: 22px; height: 22px; grid-row: 1 / 3; display: grid; place-items: center; border: 1px solid #777468; border-radius: 50%; font-size: 16px; }
.logistic-slot.construction { border-style: dashed; background: repeating-linear-gradient(135deg, #252a2b 0 7px, #303536 7px 14px); }
.logistic-slot.construction .logistic-portrait { filter: grayscale(.85) brightness(.62); }
.logistic-slot.recharging .logistic-portrait { filter: grayscale(.36) brightness(.72); }
.logistic-slot.ready { border-color: #c5a354; box-shadow: inset 0 0 0 1px rgba(225,188,94,.34), 0 0 14px rgba(192,145,45,.18); }
.logistic-slot.ready .protected-mark { color: #f0c968; }
.logistic-reserve-star { width:23px; height:23px; position:absolute; z-index:4; right:3px; top:3px; display:grid; place-items:center; border:1px solid #ffe49a; border-radius:50%; color:#fff0a8; background:#78451f; font-size:15px; line-height:1; text-shadow:0 1px 2px #000; box-shadow:0 0 0 2px rgba(35,24,14,.72),0 0 16px rgba(255,191,68,.9); animation:logistic-reserve-pulse 1.05s ease-in-out infinite alternate; }
.logistic-slot.support-active { border-color:#5e8e7d; box-shadow:inset 0 0 0 1px rgba(104,177,148,.26); }
.enemy-formation .logistic-slot.support-active { border-color:#7f7354; box-shadow:inset 0 0 0 1px rgba(179,147,81,.25); }
.enemy-formation .logistic-slot.ready { border-color: #b9634e; box-shadow: inset 0 0 0 1px rgba(201,89,62,.35), 0 0 14px rgba(176,67,42,.2); }
.logistic-portrait { position: relative; display: block; overflow: hidden; border:1px solid rgba(255,255,255,.16); background:#171b1c; }
.logistic-portrait img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; }
.logistic-portrait.human .stone-tower { width: 30px; height: 52px; position: absolute; left: 9px; bottom: 0; background: repeating-linear-gradient(0deg,#7e8584 0 7px,#a3aaa7 7px 9px); clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); box-shadow: inset 5px 0 #626968, inset -4px 0 #bcc0ba; }
.logistic-portrait.human .stone-tower::before { content:""; width: 36px; height: 10px; position:absolute; left:-3px; top:0; background:repeating-linear-gradient(90deg,#b2b6b0 0 7px,transparent 7px 10px); border-bottom:3px solid #686e6d; }
.logistic-portrait.human .stone-tower::after { content:""; width:7px; height:13px; position:absolute; left:12px; bottom:15px; border-radius:5px 5px 0 0; background:#1d292d; box-shadow:inset 2px 0 #455357; }
.logistic-portrait.human .sniper-crew,.logistic-portrait.human .spotter-crew { width:8px; height:14px; position:absolute; z-index:2; top:9px; border-radius:4px 4px 1px 1px; background:#354b3e; box-shadow:0 -5px 0 -1px #d0aa82; }
.logistic-portrait.human .sniper-crew { left:13px; transform:rotate(8deg); }
.logistic-portrait.human .spotter-crew { left:27px; background:#4a5747; }
.logistic-portrait.human .spotter-crew::before { content:""; width:4px; height:3px; position:absolute; left:-1px; top:-5px; border-radius:50%; background:#171b1c; box-shadow:5px 0 #171b1c; }
.logistic-portrait.human .long-rifle { width:29px; height:3px; position:absolute; z-index:3; left:2px; top:11px; border-left:7px solid #513d29; background:#171c1e; transform:rotate(-9deg); transform-origin:right center; }
.logistic-portrait.human .long-rifle::after { content:""; width:8px; height:4px; position:absolute; left:12px; top:-3px; border:1px solid #202526; border-radius:4px; background:#69787d; }
.logistic-portrait.orc { background:linear-gradient(180deg,#4d4137 0 38%,#2f332d 39% 68%,#171d1b 69%); }
.logistic-portrait.orc .workshop-body { width:44px; height:38px; position:absolute; left:2px; bottom:0; border:2px solid #6d6657; background:repeating-linear-gradient(135deg,#353b36 0 7px,#242925 7px 14px); clip-path:polygon(8% 18%,84% 0,100% 100%,0 100%); box-shadow:inset 0 -7px #181d1a; }
.logistic-portrait.orc .workshop-body::after { content:""; width:13px; height:18px; position:absolute; left:7px; bottom:0; border:2px solid #807155; background:#171b18; }
.logistic-portrait.orc .goblin-crew { width:9px; height:13px; position:absolute; z-index:3; left:8px; top:18px; border-radius:4px; background:#587343; box-shadow:0 -5px 0 -1px #86a45d; }
.logistic-portrait.orc .goblin-crew::before,.logistic-portrait.orc .goblin-crew::after { content:""; width:6px; height:4px; position:absolute; top:-5px; background:#718d50; clip-path:polygon(0 50%,100% 0,100% 100%); }
.logistic-portrait.orc .goblin-crew::before { left:-5px; }
.logistic-portrait.orc .goblin-crew::after { right:-5px; transform:scaleX(-1); }
.logistic-portrait.orc .rocket-rack { width:31px; height:5px; position:absolute; z-index:2; right:0; top:27px; border:2px solid #76664d; background:#292d29; transform:rotate(-18deg); }
.logistic-portrait.orc .red-rockets { width:24px; height:4px; position:absolute; z-index:3; right:1px; top:20px; border-radius:0 8px 8px 0; background:#b52f28; box-shadow:0 7px #d34a34,0 14px #95231f; transform:rotate(-18deg); }
.logistic-portrait.orc .red-rockets::before { content:""; position:absolute; left:-7px; top:-2px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:8px solid #d6b058; }
.logistic-portrait.engineer-lodge { background:linear-gradient(180deg,#8196a0 0 33%,#4b5e60 34% 55%,#242b2b 56%); }
.logistic-portrait.engineer-lodge .lodge-body { width:42px; height:37px; position:absolute; left:3px; bottom:0; border:2px solid #76664d; background:repeating-linear-gradient(90deg,#73583c 0 7px,#997653 7px 9px); box-shadow:inset 0 -7px #3a3028; }
.logistic-portrait.engineer-lodge .lodge-body::after { content:""; width:10px; height:17px; position:absolute; left:5px; bottom:0; border:2px solid #bc9b63; background:#282b29; }
.logistic-portrait.engineer-lodge .lodge-roof { width:48px; height:25px; position:absolute; z-index:2; left:0; top:12px; background:repeating-linear-gradient(135deg,#813f35 0 6px,#b35b48 6px 9px); clip-path:polygon(50% 0,100% 72%,91% 100%,8% 100%,0 72%); filter:drop-shadow(0 3px 1px rgba(0,0,0,.55)); }
.logistic-portrait.engineer-lodge .lodge-gear { width:22px; height:22px; position:absolute; z-index:3; right:2px; bottom:7px; border:5px dotted #c6a85f; border-radius:50%; background:radial-gradient(circle,#313638 0 22%,#a8894c 24% 38%,#34393a 40%); box-shadow:0 0 0 2px #3e4546; }
.logistic-portrait.engineer-lodge .engineer-master { width:8px; height:16px; position:absolute; z-index:4; left:18px; bottom:4px; border-radius:4px 4px 1px 1px; background:#324b5c; box-shadow:0 -5px 0 -1px #d3aa82; }
.logistic-portrait.engineer-lodge .engineer-master::before { content:""; width:12px; height:4px; position:absolute; left:-2px; top:-7px; border-radius:6px 6px 1px 1px; background:#d1b04f; box-shadow:inset 0 -2px #6f5928; }
.logistic-portrait.horde-call { background:linear-gradient(180deg,#4a3b32 0 38%,#272d27 39% 68%,#151918 69%); }
.logistic-portrait.horde-call .horde-shrine { width:39px; height:37px; position:absolute; left:5px; bottom:0; border:2px solid #72634d; background:linear-gradient(90deg,#292e29,#41473c 48%,#242924); clip-path:polygon(12% 18%,50% 0,88% 18%,100% 100%,0 100%); box-shadow:inset 0 -7px #141816; }
.logistic-portrait.horde-call .horde-banner { width:3px; height:45px; position:absolute; z-index:2; left:7px; top:8px; background:#827150; box-shadow:32px 0 #827150; }
.logistic-portrait.horde-call .horde-banner::before,.logistic-portrait.horde-call .horde-banner::after { content:""; width:13px; height:22px; position:absolute; top:2px; background:#742c24; clip-path:polygon(0 0,100% 8%,78% 100%,45% 78%,10% 100%); }
.logistic-portrait.horde-call .horde-banner::before { left:2px; }
.logistic-portrait.horde-call .horde-banner::after { left:21px; background:#3f5b37; }
.logistic-portrait.horde-call .bone-horn-mini { width:29px; height:12px; position:absolute; z-index:4; left:9px; top:31px; border:3px solid #d2c093; border-left-width:8px; border-radius:70% 12px 12px 70%; background:linear-gradient(180deg,#f1e1b7,#9c8963); transform:rotate(-12deg); box-shadow:0 2px 4px #000; }
.logistic-portrait.horde-call .bone-horn-mini::after { content:""; position:absolute; right:-7px; top:2px; border-left:8px solid #e8d7aa; border-top:3px solid transparent; border-bottom:3px solid transparent; }
.logistic-portrait.horde-call .horde-fire { width:8px; height:12px; position:absolute; z-index:3; left:21px; bottom:3px; border-radius:60% 40% 50% 50%; background:#ee9b37; box-shadow:0 0 8px #ef5b22; clip-path:polygon(50% 0,100% 58%,75% 100%,22% 100%,0 58%); }
.center-defense-slot { width: 100%; height: 72px; display: grid; grid-template-columns: 58px 30px minmax(0, 1fr); grid-template-rows: 23px 19px 18px; align-items: center; gap: 1px 7px; padding: 5px 9px; overflow: hidden; border-color: #65717a; background: #273036; text-align: left; box-shadow: inset 3px 0 0 #769bb1; }
.enemy-formation .center-defense-slot { border-color: #70694f; background: #302f28; box-shadow: inset 3px 0 0 #a58a4f; }
.center-defense-slot .building-portrait { width: 56px; height: 56px; grid-row: 1 / 4; }
.center-defense-slot strong { min-width: 0; overflow: hidden; color: #eee5d3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.center-defense-slot small { color: #acaaa2; font-size: 8px; white-space: nowrap; }
.center-defense-slot .slot-hp { width: 100%; grid-column: 2 / 4; }
.cannon-icon { width: 22px; height: 20px; grid-row: 1 / 3; position: relative; }
.cannon-icon::before { content: ""; width: 23px; height: 7px; position: absolute; left: 1px; top: 4px; border: 1px solid #b8c5c9; background: #68777d; transform: rotate(-9deg); transform-origin: left center; }
.cannon-icon::after { content: ""; width: 12px; height: 12px; position: absolute; left: 3px; bottom: 0; border: 2px solid #b8c5c9; border-radius: 50%; background: #343b3d; }
.enemy-formation .cannon-icon::before { border-color: #b8a36e; background: #6f674d; }
.enemy-formation .cannon-icon::after { border-color: #b8a36e; background: #3d3a30; }
.tower-slot { min-width: 0; height: 72px; display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: 25px 20px; align-items: center; gap: 2px 8px; padding: 5px 9px; overflow: hidden; border-color: #4b5051; background: #292d2f; text-align: left; }
.tower-slot .building-portrait { width: 56px; height: 56px; grid-row: 1 / 3; filter: grayscale(.42) brightness(.76); }
.tower-slot strong { min-width: 0; overflow: hidden; color: #d7d4cd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tower-slot small { color: #85827d; font-size: 8px; }
.tower-slot .slot-hp { width: 100%; }
.tower-slot.empty { border-style: dashed; opacity: .68; cursor: default; }
.tower-slot.construction { border-style: dashed; background: repeating-linear-gradient(135deg, #24282a 0 7px, #2b3032 7px 14px); }
.tower-slot.active:hover, .tower-slot.construction:hover, .center-defense-slot:hover { border-color: #b79a5b; box-shadow: inset 0 -3px 0 #b79a5b; }
.tower-slot.active { border-color: #6b6657; box-shadow: inset 3px 0 0 #9c844f; }
.tower-slot.active.electric { grid-template-rows:18px 14px 16px; border-color:#4c9bad; background:#243337; box-shadow:inset 3px 0 0 #62d2e8,0 0 12px rgba(57,173,202,.18); }
.tower-slot.active.electric .building-portrait { grid-row:1 / 4; filter:saturate(1.25) brightness(1.08) drop-shadow(0 0 8px rgba(77,206,239,.78)); }
.tower-slot.active.electric .electric-tower-status { overflow:hidden; color:#8edff0; text-overflow:ellipsis; white-space:nowrap; }
.enemy-formation .tower-slot.active { box-shadow: inset 3px 0 0 #8e5144; }
.tower-slot-icon { width: 24px; height: 28px; grid-row: 1 / 3; justify-self: center; position: relative; border: 2px solid #6a6f70; border-top-width: 6px; background: #34393a; }
.tower-slot-icon::before { content: ""; position: absolute; left: -6px; top: -8px; width: 32px; border-top: 4px solid #6a6f70; }
.battle-slot { min-width: 0; height: clamp(120px, 13vh, 150px); position: relative; display: grid; grid-template-rows: 66px 18px 16px 16px; justify-items: center; align-content: center; gap: 3px; padding: 6px; overflow: hidden; border-color: #4a5051; background: #252a2c; text-align: center; }
.battle-slot:hover { box-shadow: inset 0 -3px 0 var(--brass); }
.battle-slot .unit-portrait { width: 66px; height: 66px; position: relative; z-index: 1; }
.battle-slot strong { width: 100%; position: relative; z-index: 3; overflow: hidden; color: #f0e8da; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.battle-slot small { color: #a7a39b; font-size: 8px; }
.slot-rampart { width: min(82px, calc(100% - 10px)); height: 28px; position: absolute; z-index: 2; left: 50%; top: 49px; transform: translateX(-50%); border: 2px solid #a7afb1; border-bottom-color: #474e51; background: repeating-linear-gradient(90deg, #596267 0 19px, #778187 19px 22px); box-shadow: inset 0 -5px 0 #3a4144, 0 5px 8px rgba(0,0,0,.58); clip-path: polygon(0 23%, 10% 23%, 10% 0, 25% 0, 25% 23%, 40% 23%, 40% 0, 55% 0, 55% 23%, 70% 23%, 70% 0, 85% 0, 85% 23%, 100% 23%, 100% 100%, 0 100%); pointer-events: none; }
.slot-rampart::after { content: ""; position: absolute; inset: 11px 7px 7px; background: radial-gradient(circle, #d9dedf 0 1px, transparent 2px) 0 0 / 16px 10px; opacity: .9; }
.slot-hp { width: 92%; height: 14px; position: relative; overflow: hidden; border: 1px solid #555b5b; border-radius: 2px; background: #111416; }
.slot-hp i { position: absolute; inset: 0 auto 0 0; display: block; background: linear-gradient(90deg, #477f5d, #83bb72); transition: width 220ms ease; }
.enemy-formation .slot-hp i { background: linear-gradient(90deg, #8b4037, #cf6550); }
.slot-hp span { position: relative; z-index: 1; display: block; color: #fff7e6; font-size: 8px; font-weight: 800; line-height: 12px; text-shadow: 0 1px 2px #000; }
.slot-armor { width: 92%; height: 13px; position: relative; overflow: hidden; border: 1px solid #5d7080; border-radius: 2px; background: #11161a; }
.slot-armor i { position: absolute; inset: 0 auto 0 0; display: block; background: linear-gradient(90deg, #52758d, #9cc9dc); transition: width 220ms ease; }
.enemy-formation .slot-armor i { background: linear-gradient(90deg, #655d3d, #b59e62); }
.slot-armor span { position: relative; z-index: 1; display: block; color: #eff8ff; font-size: 7px; font-weight: 800; line-height: 11px; text-shadow: 0 1px 2px #000; }
.slot-armor.depleted { opacity: .52; border-color: #454b4e; }
.slot-armor.depleted i { width: 0 !important; }
.battle-slot.empty { border-style: dashed; color: #777; background: #1d2123; }
.battle-slot.multi-slot-unit { border-color:#9b8b62; background:#292b27; }
.battle-slot.multi-slot-primary { grid-template-rows:48px 16px 11px 13px 12px; gap:2px; padding:4px 6px; box-shadow:inset -4px 0 0 rgba(193,163,93,.42); }
.battle-slot.multi-slot-primary .unit-portrait { width:52px; height:52px; }
.battle-slot.multi-slot-primary small,.battle-slot.multi-slot-secondary small { position:relative; z-index:3; color:#c8b67f; font-size:7px; font-weight:800; }
.battle-slot.multi-slot-secondary { grid-template-rows:72px 18px 16px; align-content:center; overflow:visible; border-left-color:#c0a35f; box-shadow:inset 4px 0 0 rgba(193,163,93,.42); }
.battle-slot.multi-slot-secondary .unit-portrait { width:72px; height:72px; filter:brightness(.82) saturate(.86); }
.gatling-platform-portrait { display:block; background:url("images/recherches_et_skills/gatling_quadripod_platform.webp") center / contain no-repeat; filter:drop-shadow(0 5px 6px rgba(0,0,0,.7)); }
.gatling-platform-slot { border-color:#c39c4e; background:#2e2a22; box-shadow:inset 4px 0 0 rgba(220,177,79,.55),0 0 14px rgba(196,143,42,.18); }
.gatling-platform-slot .gatling-platform-portrait { width:78px; height:74px; position:relative; z-index:2; }
.tactic-counter { position:absolute; z-index:5; right:4px; top:4px; padding:2px 4px; border:1px solid #766847; border-radius:2px; color:#c9b577; background:rgba(20,18,14,.9); font-size:7px; font-weight:800; }
.tactic-counter.ready { border-color:#f0cf73; color:#fff0a8; box-shadow:0 0 10px rgba(240,188,65,.7); }
.berserker-counter { position:absolute; z-index:5; left:4px; top:4px; padding:2px 4px; border:1px solid #705c47; border-radius:2px; color:#c6a989; background:rgba(26,17,14,.92); font-size:7px; font-weight:800; }
.berserker-counter.ready { border-color:#e15b3b; color:#ffd2a2; background:rgba(80,24,18,.94); box-shadow:0 0 12px rgba(225,70,42,.78); animation:berserker-ready-pulse 900ms ease-in-out infinite alternate; }
.multi-slot-bridge { width:18px; height:38px; position:absolute; z-index:4; left:-10px; top:50%; transform:translateY(-50%); border-top:3px solid #b99a55; border-bottom:3px solid #b99a55; background:#292b27; pointer-events:none; }
.enemy-formation .battle-slot.multi-slot-unit { border-color:#806e45; background:#2e2c24; }
.battle-slot.locked { opacity: .48; border-style: dashed; background: repeating-linear-gradient(135deg, #1b1e20 0 7px, #24282a 7px 14px); cursor: default; }
.slot-lock { width: 24px; height: 24px; align-self: center; position: relative; border: 2px solid #767b7c; border-radius: 3px; }
.slot-lock::before { content: ""; position: absolute; left: 4px; top: -12px; width: 12px; height: 12px; border: 2px solid #767b7c; border-bottom: 0; border-radius: 8px 8px 0 0; }
.battle-line { height: 28px; position: relative; display: grid; place-items: center; margin: 7px 0; color: #c9a968; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.battle-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #846c42; }
.battle-line span { position: relative; padding: 4px 9px; background: #191d1f; }
.battle-report { padding: 10px 18px 13px; border-top: 1px solid #333738; }
.tactic-modal { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:18px; background:rgba(4,6,7,.86); backdrop-filter:blur(9px); }
.tactic-modal.hidden { display:none; }
.tactic-window { width:min(980px,calc(100vw - 36px)); max-height:calc(100vh - 36px); overflow:auto; border:1px solid #92763d; border-radius:6px; background:#1a1e20; box-shadow:0 30px 80px rgba(0,0,0,.78),0 0 38px rgba(194,143,44,.18); }
.tactic-header { min-height:86px; position:relative; padding:14px 64px 12px 20px; border-bottom:1px solid #4c4432; background:#22272a; }
.tactic-header h2 { margin:2px 0 0; color:#f4e6c5; font-size:28px; }
.tactic-header p { margin:3px 0 0; color:#e4c56d; font-size:11px; font-weight:800; }
.tactic-close { width:38px; min-height:38px; position:absolute; right:15px; top:15px; display:grid; place-items:center; padding:0; font-size:23px; }
.tactic-content { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(340px,1.1fr); min-height:430px; }
.tactic-visual { min-height:430px; position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:end; padding:34px 22px; overflow:hidden; border-right:1px solid #3d4141; background:#131719; }
.tactic-visual::before { content:""; position:absolute; left:7%; right:7%; bottom:42px; height:72px; border:1px solid rgba(204,171,93,.36); background:repeating-linear-gradient(135deg,rgba(128,104,57,.14) 0 12px,rgba(255,255,255,.025) 12px 24px); transform:skewX(-18deg); }
.tactic-visual .unit-portrait { width:240px; max-width:100%; height:330px; z-index:2; justify-self:end; border:0; background-color:transparent; filter:drop-shadow(0 18px 18px rgba(0,0,0,.72)); }
.tactic-visual .gatling-platform-portrait { width:230px; max-width:100%; height:250px; z-index:2; justify-self:start; }
.tactic-copy { align-self:center; padding:30px; }
.tactic-ready-label { color:#e7c564; font-size:9px; font-weight:900; text-transform:uppercase; }
.tactic-copy h3 { margin:6px 0 10px; color:#f2e5cb; font-size:24px; }
.tactic-copy > p { min-height:68px; margin:0 0 18px; color:#b9b4aa; font-size:11px; line-height:1.55; }
.tactic-card { width:100%; min-height:128px; display:grid; grid-template-columns:128px minmax(0,1fr); align-items:center; gap:14px; padding:10px 16px; border-color:#c9a44f; background:#2b2a25; text-align:left; box-shadow:inset 4px 0 #d4ad52; }
.tactic-card:hover:not(:disabled) { border-color:#f1cf78; background:#353127; box-shadow:inset 5px 0 #f0c65f,0 0 20px rgba(208,158,51,.22); }
.tactic-card .gatling-platform-portrait { width:118px; height:105px; }
.tactic-card strong { display:block; color:#f3e2bd; font-size:15px; }
.tactic-card small { display:block; margin-top:7px; color:#d1b86f; font-size:9px; }
.tactic-card:disabled { opacity:.52; filter:grayscale(.7); }
.tactic-footer { min-height:60px; display:flex; justify-content:flex-end; padding:10px 18px; border-top:1px solid #3b3f40; background:#202426; }
.tactic-footer button { min-width:170px; }
.logistics-action-panel { min-height: 82px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 18px; border-top:1px solid #42443e; border-bottom:1px solid #333738; background:#202527; }
.logistics-action-panel.hidden { display:none; }
.logistics-action-panel > div:first-child { min-width:0; display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:11px; }
.logistics-action-panel .logistic-portrait { width:62px; height:68px; }
.logistics-action-panel small { color:#8e8b83; font-size:8px; text-transform:uppercase; }
.logistics-action-panel strong { display:block; margin-top:2px; color:#efe1c4; font-size:13px; }
.logistics-action-panel p { margin:3px 0 0; color:#b7b2a8; font-size:10px; line-height:1.35; }
.logistics-action-panel button { flex:0 0 auto; min-width:170px; }
.logistics-action-panel.targeting { background:#2c2a22; box-shadow:inset 4px 0 #d3ad55; }
.logistics-action-panel.targeting.orc { background:#2d2421; box-shadow:inset 4px 0 #c94e39; }
.logistic-build-choices { width:min(760px,64%); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.logistic-build-choices button { min-width:0; min-height:82px; display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:9px; padding:6px; text-align:left; }
.logistic-build-choices .logistic-portrait { width:62px; height:68px; }
.logistic-build-choices strong { color:#f0dfbc; font-size:10px; }
.logistic-build-choices small { display:block; margin:2px 0; color:#c0a664; font-size:7px; }
.logistic-build-choices p { margin:0; color:#aaa69d; font-size:8px; line-height:1.25; }
.logistics-targeting .logistic-valid-target { border-color:#e3bd59 !important; box-shadow:inset 0 0 0 2px rgba(240,195,79,.72),0 0 18px rgba(226,166,50,.38) !important; animation:logistic-target-pulse 920ms ease-in-out infinite alternate; }
.logistics-targeting .enemy-formation .battle-slot:not(.logistic-valid-target),.logistics-targeting .enemy-formation .tower-slot:not(.logistic-valid-target),.logistics-targeting .enemy-formation .center-defense-slot:not(.logistic-valid-target) { opacity:.46; }
.battle-events { min-height: 54px; max-height: 130px; display: grid; align-content: start; gap: 5px; overflow-y: auto; }
.battle-event { padding: 6px 8px; border-left: 2px solid #827049; background: #222628; color: #bbb6ad; font-size: 10px; }
.battle-event.player { border-left-color: #5b9eb0; }
.battle-event.enemy { border-left-color: #b55d4b; }
.battle-event.active { color: #fff0c9; border-left-color: #e4b657; background: #34312a; box-shadow: inset 0 0 0 1px rgba(228,182,87,.25); }
.battle-footer { display: flex; justify-content: flex-end; padding: 10px 18px 14px; border-top: 1px solid #333738; }
.battle-footer button { min-width: 180px; }
.unit-inspect-modal { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 18px; background: rgba(4,6,7,.78); backdrop-filter: blur(8px); }
.unit-inspect-modal.hidden { display: none; }
.unit-inspect-window { width: min(920px, 96vw); min-height: 520px; position: relative; display: grid; grid-template-columns: minmax(330px, 44%) minmax(0, 1fr); overflow: hidden; border: 1px solid #6b6556; border-radius: 6px; background: #191e20; box-shadow: 0 30px 90px rgba(0,0,0,.82); }
.unit-inspect-window.human { border-color: #66869d; }
.unit-inspect-window.orc { border-color: #797153; }
.unit-inspect-close { width: 38px; min-height: 38px; position: absolute; z-index: 4; right: 12px; top: 12px; display: grid; place-items: center; padding: 0; border-color: rgba(255,255,255,.22); background: rgba(13,16,17,.88); font-size: 23px; }
.unit-inspect-visual { min-height: 520px; display: grid; place-items: center; position: relative; overflow: hidden; border-right: 1px solid #414748; background: #202b31; }
.unit-inspect-visual.orc { background: #292a22; }
.unit-inspect-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 38%, rgba(0,0,0,.62)); pointer-events: none; }
.unit-inspect-visual .unit-portrait { width: min(340px, 86%); height: min(440px, 82vh); position: relative; border: 1px solid rgba(255,255,255,.18); background-color: #111516; filter: drop-shadow(0 22px 20px rgba(0,0,0,.62)); }
.unit-inspect-visual .unit-portrait.generated-unit { background-position: center top; }
.unit-inspect-visual .building-portrait { width: min(390px, 88%); height: min(420px, 78vh); position: relative; border: 1px solid rgba(255,255,255,.18); background-color: #111516; filter: drop-shadow(0 22px 20px rgba(0,0,0,.62)); }
.unit-inspect-visual.building::after { content: ""; width: 72%; height: 18px; position: absolute; left: 14%; bottom: 35px; border-radius: 50%; background: rgba(0,0,0,.42); filter: blur(10px); pointer-events: none; }
.unit-inspect-visual.building .building-portrait { z-index: 1; }
.unit-inspect-visual.logistic { background:radial-gradient(circle at 50% 40%,#344043 0 16%,#20282a 48%,#111617 100%); }
.unit-inspect-visual.logistic.orc { background:radial-gradient(circle at 50% 40%,#4a4630 0 14%,#292a22 48%,#121411 100%); }
.logistic-inspect-portrait { width:min(390px,88%); height:min(420px,78vh); position:relative; z-index:1; overflow:hidden; border:1px solid rgba(255,255,255,.18); background:#111516; box-shadow:0 22px 38px rgba(0,0,0,.5); }
.logistic-inspect-portrait img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; }
.logistic-build-modal { position:fixed; inset:0; z-index:58; display:grid; place-items:center; padding:18px; background:rgba(4,6,7,.82); backdrop-filter:blur(9px); }
.logistic-build-modal.hidden { display:none; }
.building-catalog-modal { position:fixed; inset:0; z-index:57; display:grid; place-items:center; padding:18px; background:rgba(4,6,7,.82); backdrop-filter:blur(9px); }
.building-catalog-modal.hidden { display:none; }
.building-catalog-window { width:min(1180px,96vw); max-height:94vh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border:1px solid #667b88; border-radius:6px; background:#191e20; box-shadow:0 32px 100px rgba(0,0,0,.86); }
.building-catalog-window.orc { border-color:#786a4b; }
.building-catalog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 24px 16px; border-bottom:1px solid #3c4345; background:#20272a; }
.building-catalog-window.orc .building-catalog-header { background:#292820; }
.building-catalog-header h2 { margin:4px 0 3px; color:#f4e8d3; font-size:25px; }
.building-catalog-header p { color:#aaa69d; font-size:10px; }
.building-catalog-close { width:38px; min-width:38px; min-height:38px; display:grid; place-items:center; padding:0; font-size:23px; }
.building-catalog-grid { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:10px; padding:18px 24px 22px; overflow-y:auto; }
.building-catalog-grid .build-button { min-height:132px; grid-template-columns:88px minmax(0,1fr); padding:11px; border-color:#4f5c61; background:#22282a; }
.building-catalog-window.orc .building-catalog-grid .build-button { border-color:#5f5944; background:#282823; }
.building-catalog-grid .build-button:hover { border-color:#b79a5b; background:#2b3133; }
.building-catalog-grid .building-portrait { width:82px; height:82px; }
.building-catalog-grid .btn-title { font-size:14px; }
.building-catalog-grid .btn-cost { margin-top:4px; font-size:9px; }
.building-catalog-grid .btn-desc { margin-top:7px; font-size:10px; line-height:1.4; -webkit-line-clamp:3; }
.building-catalog-footer { display:flex; justify-content:flex-end; padding:11px 24px 15px; border-top:1px solid #343a3c; }
.building-catalog-footer button { min-width:150px; }
.market-modal { position:fixed; inset:0; z-index:59; display:grid; place-items:center; padding:18px; background:rgba(4,6,7,.84); backdrop-filter:blur(9px); }
.market-modal.hidden { display:none; }
.market-window { width:min(980px,96vw); max-height:94vh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border:1px solid #67879a; border-radius:6px; background:#191e20; box-shadow:0 32px 100px rgba(0,0,0,.88); }
.market-window.orc { border-color:#826d48; background:#1d1e1a; }
.market-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 24px 16px; border-bottom:1px solid #3d464a; background:#202a2f; }
.market-window.orc .market-header { border-color:#484232; background:#292820; }
.market-header h2 { margin:4px 0 3px; color:#f4e8d3; font-size:26px; }
.market-header p { color:#aaa69d; font-size:10px; }
.market-close { width:38px; min-width:38px; min-height:38px; display:grid; place-items:center; padding:0; font-size:23px; }
.market-content { min-height:0; display:grid; grid-template-columns:minmax(300px,46%) minmax(0,1fr); overflow-y:auto; }
.market-visual { min-height:470px; display:grid; place-items:center; position:relative; overflow:hidden; border-right:1px solid #3d4649; background:radial-gradient(circle at 50% 43%,#334249 0 16%,#202a2e 48%,#111617 100%); }
.market-window.orc .market-visual { border-color:#464233; background:radial-gradient(circle at 50% 43%,#4a4130 0 14%,#292820 48%,#121411 100%); }
.market-visual::after { content:""; width:72%; height:20px; position:absolute; left:14%; bottom:48px; border-radius:50%; background:rgba(0,0,0,.48); filter:blur(11px); }
.market-visual .building-portrait { width:min(390px,88%); height:390px; position:relative; z-index:1; border:0; background-color:transparent; filter:drop-shadow(0 24px 22px rgba(0,0,0,.68)); }
.market-trade-panel { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:22px; padding:28px; }
.market-stock { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.market-stock > span { min-width:0; min-height:68px; display:grid; grid-template-columns:18px minmax(0,1fr); grid-template-rows:auto auto; align-content:center; gap:4px 7px; padding:8px; border:1px solid #424b4e; background:#22282a; }
.market-window.orc .market-stock > span { border-color:#514a38; background:#282721; }
.market-stock .resource-icon { grid-row:1 / 3; align-self:center; }
.market-stock b { overflow:hidden; color:#99958d; font-size:8px; text-overflow:ellipsis; }
.market-stock strong { color:#f0dfbd; font-size:16px; }
.market-exchange-row { display:grid; grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr); align-items:end; gap:10px; }
.market-exchange-row label { min-width:0; display:grid; gap:7px; color:#b9b4aa; font-size:9px; font-weight:800; text-transform:uppercase; }
.market-exchange-row select { width:100%; min-height:46px; padding:0 36px 0 12px; border:1px solid #59686e; border-radius:4px; color:#f2e6d0; background:#171c1e; font:700 11px Segoe UI,sans-serif; }
.market-window.orc .market-exchange-row select { border-color:#6a5e42; background:#191a16; }
.market-arrow { min-height:46px; display:grid; place-items:center; color:#d6b86f; font-size:28px; }
.market-rate { padding:14px 16px; border-left:3px solid #c19a51; color:#f1dfbd; background:#292a27; font-size:15px; font-weight:800; text-align:center; }
.market-window.orc .market-rate { border-color:#a86a3c; background:#2d2922; }
.market-footer { display:flex; justify-content:flex-end; gap:10px; padding:12px 24px 16px; border-top:1px solid #353d40; }
.market-footer button { min-width:160px; }
.market-tag { border-color:#5c8a91 !important; color:#9bd1d5 !important; }
.logistic-build-window { width:min(1080px,96vw); max-height:94vh; overflow:auto; border:1px solid #667b88; border-radius:6px; background:#191e20; box-shadow:0 32px 100px rgba(0,0,0,.86); }
.logistic-build-window.orc { border-color:#776a4c; }
.logistic-build-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 24px 18px; border-bottom:1px solid #3c4345; background:#20272a; }
.logistic-build-window.orc .logistic-build-header { background:#292820; }
.logistic-build-header h2 { margin:4px 0 3px; color:#f4e8d3; font-size:25px; }
.logistic-build-header p { margin:0; color:#aaa69d; font-size:10px; }
.logistic-build-close { width:38px; min-width:38px; min-height:38px; padding:0; display:grid; place-items:center; font-size:23px; }
.logistic-build-modal-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:18px 24px 22px; }
.logistic-build-card { min-width:0; min-height:430px; display:grid; grid-template-rows:260px minmax(0,1fr); padding:0; overflow:hidden; border-color:#53636b; border-radius:6px; background:#202629; text-align:left; }
.logistic-build-window.orc .logistic-build-card { border-color:#655d45; background:#272722; }
.logistic-build-card:hover:not(:disabled) { border-color:#c4a75e; box-shadow:inset 0 -4px 0 #c4a75e,0 14px 28px rgba(0,0,0,.32); transform:translateY(-2px); }
.logistic-build-card:disabled { opacity:.72; }
.logistic-build-art { min-height:0; overflow:hidden; border-bottom:1px solid #41494b; background:#111617; }
.logistic-build-art img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; transition:transform 220ms ease; }
.logistic-build-card:hover:not(:disabled) .logistic-build-art img { transform:scale(1.025); }
.logistic-build-copy { min-width:0; display:block; padding:15px 16px 16px; }
.logistic-build-copy > small { color:#85aabd; font-size:8px; font-weight:800; text-transform:uppercase; }
.logistic-build-window.orc .logistic-build-copy > small { color:#c3a76d; }
.logistic-build-copy > strong { display:block; margin:5px 0 7px; color:#f1e2c4; font-size:17px; }
.logistic-build-copy p { min-height:48px; margin:0; color:#b9b4aa; font-size:10px; line-height:1.5; }
.logistic-build-specs { display:grid; grid-template-columns:120px minmax(0,1fr); gap:7px; margin-top:13px; }
.logistic-build-specs b { min-width:0; padding:8px 9px; border:1px solid #485052; color:#ddc88e; background:#181d1f; font-size:9px; font-weight:800; }
.logistic-build-footer { display:flex; justify-content:flex-end; padding:12px 24px 16px; border-top:1px solid #343a3c; }
.logistic-build-footer button { min-width:150px; }
.unit-inspect-content { min-width: 0; align-self: center; padding: 48px 38px 38px; }
.unit-inspect-faction { display: inline-block; color: #c7b274; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.unit-inspect-window.human .unit-inspect-faction { color: #8fc4dc; }
.unit-inspect-content h2 { margin: 7px 0 3px; color: #f5ead7; font-size: 32px; line-height: 1.05; }
.unit-inspect-role { margin: 0 0 22px; color: #aaa69e; font-size: 12px; }
.unit-inspect-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #3d4243; border-left: 1px solid #3d4243; }
.unit-inspect-stats div { min-height: 72px; display: grid; align-content: center; gap: 5px; padding: 10px 13px; border-right: 1px solid #3d4243; border-bottom: 1px solid #3d4243; background: #202527; }
.unit-inspect-stats span { color: #89867f; font-size: 9px; text-transform: uppercase; }
.unit-inspect-stats strong { color: #f2dfb8; font-size: 17px; }
.unit-inspect-window.human .unit-inspect-stats strong { color: #b9ddec; }
.unit-inspect-description { margin: 22px 0 16px; color: #c7c2b9; font-size: 13px; line-height: 1.55; }
.unit-inspect-traits { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-inspect-traits span { padding: 6px 8px; border: 1px solid #555345; border-radius: 3px; color: #d7c99d; background: #272822; font-size: 9px; font-weight: 700; }
.unit-inspect-window.human .unit-inspect-traits span { border-color: #465e6c; color: #bfd7e2; background: #20292e; }
.unit-inspect-action { margin-top:18px; min-height:40px; }
.unit-inspect-action.hidden { display:none; }
.battle-projectile { position: fixed; z-index: 36; width: 20px; height: 4px; pointer-events: none; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff1a6 35%, #f5b943 75%, #d75a37); box-shadow: 0 0 7px #ffd76c, 0 0 14px rgba(221,94,47,.8); animation: battle-shot 360ms cubic-bezier(.2,.72,.25,1) forwards; }
.battle-projectile.enemy { background: linear-gradient(90deg, rgba(255,255,255,0), #d7f09d 35%, #8ebc58 75%, #5d803e); box-shadow: 0 0 7px #b9dc78, 0 0 14px rgba(92,139,62,.8); }
.battle-projectile.repair { height: 5px; background: linear-gradient(90deg, rgba(255,255,255,0), #d8fff0 30%, #63d6ad 70%, #2b8d72); box-shadow: 0 0 8px #7ff0c7, 0 0 17px rgba(62,190,145,.85); }
.battle-projectile.rampart { width: 28px; height: 8px; border: 1px solid #dce5e7; background: repeating-linear-gradient(90deg, #617078 0 5px, #c1cccf 5px 8px); box-shadow: 0 0 8px #d4e2e5, 0 0 18px rgba(139,162,170,.82); }
.battle-projectile.cannonball { width: 12px; height: 12px; border: 2px solid #d8c289; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f1d99e 0 12%, #4b4c48 25%, #121516 72%); box-shadow: 0 0 8px #e4bb63, 0 0 18px rgba(224,142,54,.72); }
.battle-projectile.electric-cannonball { width:16px; height:16px; border:2px solid #c7f7ff; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 10%,#79dff3 18%,#34474c 47%,#111718 74%); box-shadow:0 0 10px #a7f4ff,0 0 28px rgba(38,201,238,.9); }
.battle-projectile.rock-throw { width: 20px; height: 20px; border: 2px solid #b4a789; border-radius: 42% 55% 46% 58%; background: radial-gradient(circle at 34% 28%, #d4c9ad 0 8%, #81765f 24%, #4c463b 58%, #24231f 82%); box-shadow: 0 0 8px rgba(210,191,145,.7), -10px 3px 18px rgba(105,91,64,.62); animation-name: rock-throw-shot; animation-timing-function: cubic-bezier(.2,.58,.25,1); }
.battle-projectile.gatling { width: 38px; height: 7px; border: 1px solid #ffe0a0; background: linear-gradient(90deg, transparent, #fff7c4 22%, #e8b33f 60%, #9f4c25); box-shadow: 0 0 11px #ffd15e, 0 0 24px rgba(217,115,34,.88); animation-timing-function: cubic-bezier(.12,.58,.2,1); }
.battle-projectile.charge { width: 168px; height: 28px; border: 0; border-radius: 0; background: linear-gradient(180deg, transparent 0 37%, #5b3018 38% 45%, #d49a48 46% 54%, #75401e 55% 62%, transparent 63%); box-shadow: none; transform-origin: 20px 50%; animation-name: scout-charge-shot; animation-timing-function: cubic-bezier(.16,.62,.2,1); }
.battle-projectile.charge::before { content: ""; width: 116px; height: 18px; position: absolute; left: -17px; top: 5px; background: linear-gradient(90deg, transparent, rgba(255,227,141,.18) 20%, rgba(255,236,177,.68) 72%, transparent); filter: blur(3px); }
.battle-projectile.charge::after { content: ""; width: 62px; height: 28px; position: absolute; right: -2px; top: 0; background: linear-gradient(180deg, #f8f0d4 0 20%, #a9b0ad 43%, #fff4ce 51%, #6d7473 76%, #2f3638); clip-path: polygon(0 35%, 58% 35%, 58% 7%, 100% 50%, 58% 93%, 58% 65%, 0 65%, 17% 50%); filter: drop-shadow(0 0 5px #fff0b0) drop-shadow(0 0 12px rgba(220,157,65,.9)); }
.battle-projectile.charge.enemy { background: linear-gradient(180deg, transparent 0 37%, #382619 38% 45%, #8c6d36 46% 54%, #46301d 55% 62%, transparent 63%); }
.battle-projectile.charge.enemy::after { background: linear-gradient(180deg, #dce4ca 0 20%, #778176 43%, #e6efce 51%, #4b544b 76%, #202723); filter: drop-shadow(0 0 5px #d7efa9) drop-shadow(0 0 12px rgba(113,156,70,.9)); }
.battle-projectile.fireball { width: 34px; height: 34px; border: 3px solid #ffbb3e; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fff6b0 0 10%, #ffbd35 24%, #e34819 58%, #64130b 78%); box-shadow: 0 0 15px #ffcf55, 0 0 34px #e44917, -12px 0 24px rgba(255,104,25,.72); animation-name: fireball-shot; animation-timing-function: cubic-bezier(.18,.62,.22,1); }
.battle-projectile.fireball.blue-fire { border-color: #9eeaff; background: radial-gradient(circle at 38% 35%, #ecffff 0 10%, #66dcff 24%, #1769e8 58%, #071f70 78%); box-shadow: 0 0 17px #8be7ff, 0 0 38px #167bf0, -12px 0 26px rgba(36,128,255,.8); }
.battle-projectile.fire-breath { width:190px; height:18px; border:1px solid #ffce66; border-radius:2px 70% 70% 2px; background:linear-gradient(90deg,rgba(255,255,255,0),#fff4ab 15%,#ffbd39 38%,#ef501b 72%,rgba(113,16,5,.08)); box-shadow:0 0 12px #ffcf5b,0 0 30px rgba(236,62,18,.88),-20px 0 24px rgba(255,139,35,.58); transform-origin:8px center; animation-name:fire-breath-shot; animation-timing-function:cubic-bezier(.12,.52,.18,1); }
.battle-projectile.fire-breath::before,.battle-projectile.fire-breath::after { content:""; position:absolute; left:24px; right:18px; height:9px; background:linear-gradient(90deg,transparent,#ff8c26 24%,#fff0a0 52%,transparent); filter:blur(3px); }
.battle-projectile.fire-breath::before { top:-8px; transform:skewX(-24deg); }
.battle-projectile.fire-breath::after { bottom:-8px; transform:skewX(24deg); }
.battle-projectile.hybrid-cannon { width:25px; height:25px; border:3px solid #d6c6a0; border-radius:50%; background:radial-gradient(circle at 34% 28%,#f7e7b2 0 8%,#73736d 17%,#242729 54%,#090a0b 78%); box-shadow:-12px 0 18px rgba(255,151,48,.78),0 0 18px rgba(238,201,115,.72); animation-name:hybrid-cannon-shot; animation-timing-function:cubic-bezier(.12,.6,.18,1); }
.battle-projectile.hybrid-cannon::before { content:""; width:95px; height:22px; position:absolute; right:17px; top:0; background:linear-gradient(90deg,transparent,rgba(75,70,62,.5) 34%,#e66b24 72%,#fff2aa); filter:blur(4px); }
.battle-projectile.ogre-spear,.battle-projectile.ogre-spear-elite { width:136px; height:20px; border:0; border-radius:0; background:linear-gradient(180deg,transparent 0 38%,#3b2617 39% 47%,#9c6e36 48% 56%,#382317 57% 64%,transparent 65%); box-shadow:none; transform-origin:18px center; animation-name:ogre-spear-shot; animation-timing-function:cubic-bezier(.13,.62,.18,1); }
.battle-projectile.ogre-spear::after,.battle-projectile.ogre-spear-elite::after { content:""; width:42px; height:20px; position:absolute; right:-2px; top:0; background:linear-gradient(180deg,#e9dbc0,#8d7a5d 48%,#3d3327); clip-path:polygon(0 38%,62% 38%,70% 0,100% 50%,70% 100%,62% 62%,0 62%); filter:drop-shadow(0 0 4px rgba(221,205,161,.7)); }
.battle-projectile.ogre-spear-elite { background:linear-gradient(180deg,transparent 0 38%,#17373a 39% 47%,#8adbe3 48% 56%,#112c30 57% 64%,transparent 65%); }
.battle-projectile.ogre-spear-elite::after { background:linear-gradient(180deg,#efffff,#61d5e3 42%,#116176 70%,#082e3d); filter:drop-shadow(0 0 5px #a8f5ff) drop-shadow(0 0 12px rgba(49,184,214,.85)); }
.battle-projectile.train-artillery { width:34px; height:12px; border:2px solid #a9a38f; border-radius:45% 58% 58% 45%; background:linear-gradient(180deg,#ece1bb 0 12%,#77756c 27%,#202528 65%,#080a0b); box-shadow:-24px 0 24px rgba(255,145,47,.86),0 0 15px rgba(255,220,143,.72); animation-name:train-artillery-shot; animation-timing-function:cubic-bezier(.16,.58,.2,1); }
.battle-projectile.train-artillery::before { content:""; width:78px; height:18px; position:absolute; right:20px; top:-5px; background:linear-gradient(90deg,transparent,rgba(62,59,54,.55) 40%,#e86f24 78%,#fff2b0); filter:blur(4px); }
.battle-projectile.fuse-bomb { width:30px; height:30px; border:3px solid #6f6756; border-radius:48% 52% 44% 56%; background:radial-gradient(circle at 34% 28%,#8b877c 0 8%,#323534 24%,#111414 64%,#040505 82%); box-shadow:0 8px 18px rgba(0,0,0,.68),0 0 11px rgba(226,93,31,.35); animation-name:fuse-bomb-shot; animation-timing-function:cubic-bezier(.2,.5,.22,1); }
.battle-projectile.fuse-bomb::before { content:""; width:22px; height:13px; position:absolute; left:17px; top:-9px; border-top:3px solid #a58a58; border-radius:50%; transform:rotate(-28deg); }
.battle-projectile.fuse-bomb::after { content:""; width:8px; height:8px; position:absolute; left:36px; top:-11px; border-radius:50%; background:#fff2ac; box-shadow:0 0 6px #fff,0 0 14px #ff9b2e,0 0 23px #d83d1b; animation:fuse-spark 210ms steps(2,end) infinite; }
.battle-projectile.berserker-axe { width:76px; height:36px; border:0; border-radius:0; background:linear-gradient(180deg,transparent 0 42%,#4a2818 43% 48%,#b07b43 49% 56%,#3b2116 57% 63%,transparent 64%); box-shadow:none; transform-origin:38px 18px; animation-name:berserker-axe-shot; animation-timing-function:cubic-bezier(.16,.54,.2,1); }
.battle-projectile.berserker-axe::before { content:""; position:absolute; width:16px; height:17px; left:23px; top:9px; border-left:3px solid #d5b16d; border-right:3px solid #d5b16d; background:repeating-linear-gradient(90deg,#382116 0 3px,#8f6537 3px 5px); transform:skewX(-12deg); }
.battle-projectile.berserker-axe::after { content:""; position:absolute; width:38px; height:36px; right:-2px; top:0; background:linear-gradient(145deg,#e1d9be 0 9%,#777970 27%,#252c2c 62%,#0c1111 86%); clip-path:polygon(9% 4%,82% 15%,100% 50%,82% 85%,9% 96%,35% 61%,0 50%,35% 39%); filter:drop-shadow(0 0 4px rgba(244,206,122,.72)) drop-shadow(0 4px 5px rgba(0,0,0,.65)); }
.battle-projectile.sniper-round { width:150px; height:3px; border:0; border-radius:0; background:linear-gradient(90deg,transparent 0 6%,rgba(255,248,207,.28) 22%,#fff5c0 66%,#ffffff); box-shadow:0 0 5px #fff4bd,0 0 16px rgba(255,211,91,.82); transform-origin:10px center; animation-name:sniper-round-shot; animation-timing-function:cubic-bezier(.12,.7,.18,1); }
.battle-projectile.sniper-round::after { content:""; width:10px; height:4px; position:absolute; right:-2px; top:-1px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff2a3; }
.battle-projectile.red-rocket { width:48px; height:12px; border:1px solid #ff9b6f; border-radius:3px 14px 14px 3px; background:linear-gradient(180deg,#ff7459,#a61319 55%,#5e080d); box-shadow:-8px 0 14px #ffb23e,0 0 18px rgba(224,49,29,.85); transform-origin:8px center; animation-name:red-rocket-shot; animation-timing-function:cubic-bezier(.18,.58,.2,1); }
.battle-projectile.red-rocket::before { content:""; width:85px; height:15px; position:absolute; right:38px; top:-2px; background:linear-gradient(90deg,transparent,rgba(89,84,75,.5) 35%,#ff9e32 86%,#fff2a1); filter:blur(3px); }
.battle-projectile.red-rocket::after { content:""; position:absolute; left:-4px; top:-6px; border-right:12px solid #7f1719; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.logistic-impact { width:72px; height:72px; position:fixed; z-index:49; pointer-events:none; transform:translate(-50%,-50%); }
.logistic-impact.sniper-round { border:2px solid rgba(255,235,160,.9); border-radius:50%; box-shadow:0 0 18px #fff3ad,inset 0 0 15px rgba(255,225,112,.6); animation:sniper-impact 430ms ease-out forwards; }
.logistic-impact.sniper-round::before,.logistic-impact.sniper-round::after { content:""; position:absolute; background:#ffe9a0; box-shadow:0 0 7px #fff1b4; }
.logistic-impact.sniper-round::before { width:94px; height:1px; left:-13px; top:34px; }
.logistic-impact.sniper-round::after { width:1px; height:94px; left:34px; top:-13px; }
.logistic-impact.red-rocket { border-radius:50%; background:radial-gradient(circle,#fffde5 0 8%,#ffd34f 12%,#ec4b20 34%,rgba(93,13,9,.82) 54%,transparent 72%); box-shadow:0 0 30px #ffb235,0 0 72px rgba(226,55,25,.88); animation:rocket-impact 620ms ease-out forwards; }
.logistic-impact.red-rocket::before { content:""; position:absolute; inset:-25px; border:5px solid rgba(255,190,71,.72); border-radius:50%; animation:rocket-shock-ring 620ms ease-out forwards; }
.logistic-slot.sniper-firing { animation:sniper-recoil 1450ms ease; }
.logistic-slot.rocket-firing { animation:rocket-rack-recoil 1250ms ease; }
.logistic-target-hit { animation:logistic-impact-hit 620ms ease; }
.horde-horn-cinematic { position:fixed; inset:0; z-index:80; display:grid; place-items:center; pointer-events:none; overflow:hidden; background:transparent; }
.horde-horn-cinematic strong,.horde-horn-cinematic small { position:absolute; left:50%; transform:translateX(-50%); color:#f3dfae; text-shadow:0 2px 5px #000,0 0 18px rgba(183,81,34,.9); }
.horde-horn-cinematic strong { top:calc(50% + 98px); font-size:23px; }
.horde-horn-cinematic small { top:calc(50% + 130px); color:#c6b99a; font-size:10px; text-transform:uppercase; }
.bone-war-horn { width:330px; height:160px; position:relative; display:block; transform:rotate(-8deg); animation:horde-horn-arrival 1900ms cubic-bezier(.16,.68,.2,1) forwards; filter:drop-shadow(0 16px 15px rgba(0,0,0,.75)); }
.bone-war-horn .horn-body { width:255px; height:94px; position:absolute; left:38px; top:32px; border:8px solid #8d7956; border-left-width:16px; border-radius:74% 34% 42% 72%; background:linear-gradient(180deg,#f3e6be 0 20%,#cdb98c 48%,#897453 100%); clip-path:polygon(0 14%,100% 0,89% 38%,100% 100%,0 82%); box-shadow:inset 0 15px rgba(255,255,255,.22),inset 0 -18px rgba(73,52,32,.22); }
.bone-war-horn .horn-body::before { content:""; width:180px; height:34px; position:absolute; left:38px; top:25px; border-top:5px solid rgba(107,82,49,.34); border-radius:50%; transform:rotate(-3deg); }
.bone-war-horn .horn-bell { width:96px; height:142px; position:absolute; z-index:2; left:0; top:8px; border:9px solid #dbc99c; border-radius:50%; background:radial-gradient(ellipse at 62% 50%,#130f0b 0 42%,#4c3a25 44% 52%,#a58f67 54% 68%,#ead9ac 70%); transform:rotate(-4deg); box-shadow:inset 0 0 18px #000,0 0 0 4px #715d3e; }
.bone-war-horn .horn-rim { width:42px; height:55px; position:absolute; z-index:3; right:2px; top:50px; border:6px solid #b6a073; border-radius:10px 65% 65% 10px; background:#e5d5aa; box-shadow:inset -8px 0 #7a6749; }
.bone-war-horn .horn-straps { width:145px; height:70px; position:absolute; z-index:4; left:101px; top:58px; border:8px solid #5d3827; border-top:0; border-radius:0 0 50% 50%; transform:rotate(8deg); opacity:.9; }
.horn-sound-ring { width:300px; height:160px; position:absolute; left:50%; top:50%; border:6px solid rgba(226,190,111,.68); border-radius:50%; transform:translate(-50%,-50%); animation:horde-sound-ring 1500ms ease-out forwards; }
.horn-sound-ring.ring-two { animation-delay:260ms; }
.logistic-spawn-cinematic { position:fixed; inset:0; z-index:80; display:grid; place-items:center; overflow:hidden; pointer-events:none; background:transparent; }
.logistic-spawn-cinematic img { width:min(430px,72vw); height:min(430px,66vh); z-index:2; object-fit:cover; object-position:center 14%; border:2px solid #8d9b7b; border-radius:4px; box-shadow:0 24px 70px rgba(0,0,0,.72),0 0 38px rgba(111,200,174,.44); animation:logistic-creature-arrival 2100ms cubic-bezier(.14,.68,.18,1) forwards; }
.logistic-spawn-cinematic.endless_pit img { border-color:#696d49; box-shadow:0 24px 70px rgba(0,0,0,.72),0 0 42px rgba(113,157,64,.55); animation-duration:1650ms; }
.logistic-spawn-cinematic strong,.logistic-spawn-cinematic small { position:absolute; z-index:4; left:50%; transform:translateX(-50%); color:#e9f1df; text-align:center; text-shadow:0 3px 8px #000,0 0 20px rgba(100,202,169,.85); }
.logistic-spawn-cinematic strong { top:calc(50% + 228px); font-size:22px; }
.logistic-spawn-cinematic small { top:calc(50% + 258px); color:#b8c7b1; font-size:10px; text-transform:uppercase; }
.logistic-spawn-cinematic.endless_pit strong { color:#dbe8b3; text-shadow:0 3px 8px #000,0 0 20px rgba(114,164,59,.88); }
.fire-spirit-spawn-cinematic { position:fixed; inset:0; z-index:80; display:grid; place-items:center; overflow:hidden; pointer-events:none; background:rgba(84,28,8,.24); backdrop-filter:blur(2px) saturate(1.25); }
.fire-spirit-spawn-cinematic img { width:min(470px,76vw); height:min(570px,72vh); z-index:3; object-fit:contain; filter:drop-shadow(0 26px 25px rgba(34,8,2,.78)) drop-shadow(0 0 26px rgba(255,97,23,.78)); animation:fire-spirit-arrival var(--fire-spirit-spawn-duration,2400ms) cubic-bezier(.14,.66,.18,1) forwards; }
.fire-spirit-spawn-cinematic strong,.fire-spirit-spawn-cinematic small { position:absolute; z-index:5; left:50%; transform:translateX(-50%); width:min(760px,90vw); text-align:center; text-shadow:0 3px 8px #341006,0 0 22px #ec541d; }
.fire-spirit-spawn-cinematic strong { top:calc(50% + 255px); color:#ffe2a0; font-size:24px; }
.fire-spirit-spawn-cinematic small { top:calc(50% + 289px); color:#e7a56d; font-size:10px; text-transform:uppercase; }
.fire-spirit-rift { width:290px; height:500px; position:absolute; z-index:1; left:50%; top:50%; border:4px solid rgba(255,121,38,.62); transform:translate(-50%,-50%) skewX(-8deg); clip-path:polygon(45% 0,62% 18%,53% 34%,70% 52%,54% 68%,61% 100%,43% 82%,49% 63%,32% 48%,47% 29%); box-shadow:0 0 28px rgba(255,92,24,.7),inset 0 0 24px rgba(255,177,59,.4); animation:fire-rift-open 1700ms ease-out forwards; }
.fire-spirit-rift.rift-two { width:360px; height:560px; opacity:.48; transform:translate(-50%,-50%) scaleX(-1) skewX(-5deg); animation-delay:120ms; }
.spawn-energy { width:330px; height:330px; position:absolute; left:50%; top:50%; z-index:1; border:4px solid rgba(126,227,199,.72); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 34px rgba(81,222,184,.52),inset 0 0 34px rgba(81,222,184,.34); animation:logistic-spawn-energy 1600ms ease-out forwards; }
.spawn-energy.energy-two { width:470px; height:470px; border-style:dashed; animation-delay:170ms; }
.endless_pit .spawn-energy { border-color:rgba(151,196,76,.7); box-shadow:0 0 38px rgba(108,164,47,.55),inset 0 0 34px rgba(87,139,40,.36); }
.tower-slot.counter-firing, .center-defense-slot.counter-firing { animation: cannon-recoil 420ms ease; }
.tower-slot.electric-counter-firing { animation:electric-cannon-recoil 560ms ease; }
.battle-slot.rock-throwing { animation: rock-throw-source 1100ms cubic-bezier(.18,.62,.22,1); border-color: #a99b79; }
.battle-slot.firing { animation: muzzle-flash 360ms ease; }
.battle-slot.charge-attacking { animation: scout-charge-source 1180ms cubic-bezier(.18,.7,.2,1); border-color: #e7c66f; }
.battle-slot.blood-heal { animation: blood-thirst-heal 760ms ease; border-color: #b9322f; }
.battle-slot.gatling-firing { animation: gatling-recoil 920ms steps(4, end); border-color: #c6a25a; }
.battle-slot.fireball-casting { animation: pyro-cast 1100ms ease; border-color: #d76437; }
.battle-slot.fire-spirit-casting { animation:fire-spirit-cast 2200ms cubic-bezier(.16,.58,.2,1); border-color:#e87c33; }
.battle-slot.hybrid-cannon-firing { animation:hybrid-cannon-recoil 1480ms ease; border-color:#d5aa62; }
.battle-slot.ogre-spear-thrusting { animation:ogre-spear-thrust 1120ms ease; border-color:#77964f; }
.battle-slot.train-artillery-firing { animation:train-artillery-recoil 1700ms ease; border-color:#9aa8ad; }
.battle-slot.dirigible-bombing { animation:dirigible-bomb-release 1550ms ease; border-color:#b17645; }
.battle-slot.berserker-axe-throwing { animation:berserker-axe-throw-source 1450ms cubic-bezier(.16,.62,.2,1); border-color:#c95d38; }
.battle-slot.blue-fire-casting { animation: blue-fire-cast 1100ms ease; border-color: #55bdf5; }
.battle-slot.hit, .tower-slot.hit, .formation.hit { animation: impact-flash 360ms ease; }
.battle-slot.repairing { animation: repair-source 360ms ease; }
.battle-slot.repaired, .tower-slot.repaired { animation: repair-impact 360ms ease; }
.battle-slot.building-rampart { animation: rampart-source 620ms ease; }
.battle-slot.rampart-raised { animation: rampart-rise 620ms ease; }
.sapper-explosion { width: 300px; height: 300px; position: fixed; z-index: 47; pointer-events: none; transform: translate(-50%, -50%); }
.cinematic-explosion > i { position: absolute; display: block; pointer-events: none; }
.explosion-plate { inset: 0; background: url("images/recherches_et_skills/sapper_cinematic_explosion_transparent.webp") center / contain no-repeat; filter: contrast(1.12) saturate(1.25); animation: cinematic-fireball 1180ms cubic-bezier(.12,.66,.18,1) forwards; }
.impact-blast .explosion-plate { animation-duration: 1050ms; }
.explosion-flash { width: 72px; height: 72px; left: 50%; top: 55%; border-radius: 50%; background: #fffde3; box-shadow: 0 0 30px #fff, 0 0 75px #ffd45a, 0 0 140px #ff6b17; animation: cinematic-flash 520ms ease-out forwards; }
.explosion-smoke { width: 130px; height: 110px; left: 50%; top: 37%; border-radius: 48% 52% 44% 56%; background: radial-gradient(ellipse, rgba(20,20,18,.94), rgba(43,39,33,.74) 46%, transparent 72%); filter: blur(7px); animation: cinematic-smoke 1650ms ease-out forwards; }
.explosion-shock-ring { width: 68px; height: 68px; left: 50%; top: 57%; border: 8px solid rgba(255,228,158,.94); border-radius: 50%; box-shadow: 0 0 18px #ffb33c, inset 0 0 18px #ffb33c; animation: cinematic-shock-ring 780ms ease-out forwards; }
.explosion-embers { inset: 40px; background: radial-gradient(circle, #fff6ae 0 1px, transparent 2px) 0 0 / 19px 21px, radial-gradient(circle, #ff7b25 0 1px, transparent 2px) 7px 11px / 31px 27px; mix-blend-mode: screen; animation: cinematic-embers 1300ms ease-out forwards; }
.explosion-debris { width: 7px; height: 11px; left: 50%; top: 57%; background: linear-gradient(135deg, #f5b755, #332a20 55%, #0e0e0c); clip-path: polygon(13% 4%, 100% 20%, 72% 100%, 0 67%); transform-origin: center; animation: cinematic-debris 1100ms cubic-bezier(.16,.62,.25,1) var(--debris-delay) forwards; }
.sapper-explosion-wave { width: 76px; height: 48px; position: fixed; z-index: 48; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--angle)); animation: cinematic-blast-travel 820ms cubic-bezier(.18,.58,.2,1) forwards; }
.cinematic-blast-wave > i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
.cinematic-blast-wave > i:nth-child(1) { inset: 3px; background: radial-gradient(ellipse, #fffbd4, #ffb52f 28%, #e54818 58%, transparent 74%); box-shadow: 0 0 22px #ff9c26; }
.cinematic-blast-wave > i:nth-child(2) { width: 105px; height: 22px; right: 36px; top: 13px; background: linear-gradient(90deg, transparent, rgba(81,72,57,.65) 45%, #ff7b20); filter: blur(4px); }
.cinematic-blast-wave > i:nth-child(3) { width: 96px; height: 8px; right: 48px; top: 21px; background: linear-gradient(90deg, transparent, #ffd76a); filter: blur(2px); }
.battle-slot.sapper-detonating { z-index: 2; animation: sapper-detonation-source 860ms ease-out; }
.battle-slot.cinematic-explosion-hit, .tower-slot.cinematic-explosion-hit, .center-defense-slot.cinematic-explosion-hit { animation: cinematic-impact-hit 780ms ease-out; }
.battle-window.cinematic-shake { animation: cinematic-camera-shake 720ms cubic-bezier(.18,.72,.22,1); }
@keyframes battle-shot { 0% { opacity: 0; transform: translate(0,0) rotate(var(--angle)) scaleX(.25); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--angle)) scaleX(1); } }
@keyframes sniper-round-shot { 0%,24% { opacity:0; transform:translate(0,0) rotate(var(--angle)) scaleX(.18); } 30% { opacity:1; filter:brightness(2.3); } 78% { opacity:1; transform:translate(calc(var(--dx) * .78),calc(var(--dy) * .78)) rotate(var(--angle)) scaleX(1.1); } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scaleX(.5); } }
@keyframes red-rocket-shot { 0%,14% { opacity:0; transform:translate(0,0) rotate(var(--angle)) scale(.55); } 22% { opacity:1; } 56% { transform:translate(calc(var(--dx) * .54),calc(var(--dy) * .54 - 28px)) rotate(var(--angle)) scale(1); } 82% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scale(1.18); } }
@keyframes sniper-impact { 0% { opacity:0; transform:translate(-50%,-50%) scale(1.8); } 24% { opacity:1; transform:translate(-50%,-50%) scale(.72); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.2); } }
@keyframes rocket-impact { 0% { opacity:0; transform:translate(-50%,-50%) scale(.08); } 18% { opacity:1; filter:brightness(2.4); } 62% { opacity:1; transform:translate(-50%,-50%) scale(1.45); } 100% { opacity:0; transform:translate(-50%,-50%) scale(2.1); filter:brightness(.65); } }
@keyframes rocket-shock-ring { 0% { opacity:0; transform:scale(.1); } 18% { opacity:1; } 100% { opacity:0; transform:scale(2.4); border-width:1px; } }
@keyframes sniper-recoil { 0%,100% { transform:none; filter:none; } 23% { transform:translateX(-3px); filter:brightness(1.6); box-shadow:inset 0 0 0 2px #f0d483,0 0 24px rgba(225,178,65,.66); } 42% { transform:translateX(2px); } }
@keyframes rocket-rack-recoil { 0%,100% { transform:none; filter:none; } 20% { transform:translate(-4px,2px) rotate(-1deg); filter:brightness(1.5); box-shadow:inset 0 0 0 2px #d94d38,0 0 27px rgba(210,61,37,.7); } 48% { transform:translate(2px,-1px); } }
@keyframes logistic-impact-hit { 0%,100% { filter:none; } 22% { filter:brightness(3) saturate(1.6); transform:translateX(-3px); } 46% { transform:translateX(4px); } }
@keyframes logistic-target-pulse { from { filter:brightness(1); } to { filter:brightness(1.22); } }
@keyframes logistic-reserve-pulse { from { transform:scale(.9) rotate(-8deg); filter:brightness(.9); } to { transform:scale(1.12) rotate(7deg); filter:brightness(1.35); } }
@keyframes horde-horn-arrival { 0% { opacity:0; transform:translateX(-80px) rotate(-18deg) scale(.35); } 20% { opacity:1; transform:translateX(12px) rotate(-5deg) scale(1.08); } 58% { transform:translateX(0) rotate(-8deg) scale(1); filter:brightness(1.18); } 82% { opacity:1; } 100% { opacity:0; transform:translateX(38px) rotate(-4deg) scale(1.16); } }
@keyframes horde-sound-ring { 0%,18% { opacity:0; transform:translate(-50%,-50%) scale(.2); } 28% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(3.4); border-width:1px; } }
@keyframes logistic-creature-arrival { 0% { opacity:0; transform:translateY(54px) scale(.42); filter:brightness(2.2) contrast(1.3) saturate(.5); } 24% { opacity:1; transform:translateY(-12px) scale(1.05); } 58% { transform:none; filter:brightness(1.1) contrast(1.08) saturate(1.2); } 82% { opacity:1; } 100% { opacity:0; transform:translateY(-18px) scale(1.08); filter:brightness(.68) saturate(.75); } }
@keyframes logistic-spawn-energy { 0% { opacity:0; transform:translate(-50%,-50%) scale(.12) rotate(0); } 20% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.65) rotate(110deg); border-width:1px; } }
@keyframes rock-throw-shot { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.55); } 12% { opacity: 1; } 48% { transform: translate(calc(var(--dx) * .48), calc(var(--dy) * .48 - 36px)) rotate(210deg) scale(1.08); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(520deg) scale(1.25); } }
@keyframes hybrid-cannon-shot { 0%,22% { opacity:0; transform:translate(0,0) rotate(var(--angle)) scale(.4); } 28% { opacity:1; filter:brightness(2.1); } 62% { transform:translate(calc(var(--dx) * .58),calc(var(--dy) * .58 - 30px)) rotate(var(--angle)) scale(1.08); } 88% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scale(1.4); filter:brightness(1.45); } }
@keyframes ogre-spear-shot { 0%,18% { opacity:0; transform:translate(0,0) rotate(var(--angle)) scaleX(.45); } 25% { opacity:1; } 78% { opacity:1; transform:translate(calc(var(--dx) * .78),calc(var(--dy) * .78)) rotate(var(--angle)) scaleX(1.1); } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scaleX(.85); filter:brightness(1.8); } }
@keyframes train-artillery-shot { 0%,24% { opacity:0; transform:translate(0,0) rotate(var(--angle)) scale(.38); } 30% { opacity:1; filter:brightness(2.3); } 58% { transform:translate(calc(var(--dx) * .52),calc(var(--dy) * .52 - 54px)) rotate(var(--angle)) scale(1.05); } 88% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scale(1.38); filter:brightness(1.7); } }
@keyframes fuse-bomb-shot { 0%,14% { opacity:0; transform:translate(0,0) rotate(-30deg) scale(.35); } 22% { opacity:1; } 56% { transform:translate(calc(var(--dx) * .48),calc(var(--dy) * .48 - 92px)) rotate(190deg) scale(1.04); } 86% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(430deg) scale(1.42); filter:brightness(1.8); } }
@keyframes berserker-axe-shot { 0%,16% { opacity:0; transform:translate(0,0) rotate(var(--angle)) scale(.45); } 23% { opacity:1; filter:brightness(1.25); } 54% { opacity:1; transform:translate(calc(var(--dx) * .5),calc(var(--dy) * .5 - 62px)) rotate(calc(var(--angle) + 450deg)) scale(1.08); } 88% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(calc(var(--angle) + 900deg)) scale(.92); filter:brightness(1.8); } }
@keyframes fuse-spark { from { opacity:.55; transform:scale(.7); } to { opacity:1; transform:scale(1.35); } }
@keyframes fireball-shot { 0% { opacity: 0; transform: translate(0,0) scale(.35) rotate(0); } 15% { opacity: 1; } 70% { filter: brightness(1.2); } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(1.2) rotate(240deg); } }
@keyframes fire-breath-shot { 0%,18% { opacity:0; transform:translate(0,0) rotate(var(--angle)) scaleX(.12); filter:brightness(.6); } 28% { opacity:1; transform:translate(0,0) rotate(var(--angle)) scaleX(.45); filter:brightness(1.35); } 62% { opacity:1; transform:translate(calc(var(--dx) * .5),calc(var(--dy) * .5)) rotate(var(--angle)) scaleX(1.08); } 88% { opacity:1; filter:brightness(1.75); } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scaleX(.72); filter:brightness(2.1); } }
@keyframes gatling-recoil { 0%,100% { transform: none; box-shadow: none; } 18%,42%,66%,88% { transform: translateX(-4px); box-shadow: inset 0 0 0 2px #ffd06b, 0 0 22px rgba(224,151,54,.75); } 28%,52%,76% { transform: translateX(2px); } }
@keyframes hybrid-cannon-recoil { 0%,100% { transform:none; filter:none; box-shadow:none; } 20% { transform:translateY(2px) scale(.97); } 31% { transform:translateX(-10px) rotate(-2deg) scale(1.04); filter:brightness(1.8); box-shadow:inset 0 0 0 2px #f3c46c,0 0 36px rgba(228,137,48,.85); } 58% { transform:translateX(4px) rotate(1deg); } 78% { transform:translateX(-2px); filter:brightness(1.08); } }
@keyframes ogre-spear-thrust { 0%,100% { transform:none; filter:none; box-shadow:none; } 18% { transform:translateX(-7px) scale(.97); } 46% { transform:translateX(11px) scale(1.04); filter:brightness(1.35); box-shadow:inset 0 0 0 2px #a9c675,0 0 30px rgba(101,151,63,.72); } 68% { transform:translateX(-3px); } }
@keyframes train-artillery-recoil { 0%,100% { transform:none; filter:none; box-shadow:none; } 18% { transform:translateX(3px) scale(.98); } 31% { transform:translateX(-13px) scale(1.03); filter:brightness(1.75); box-shadow:inset 0 0 0 2px #d9c88d,0 0 38px rgba(231,139,47,.78); } 57% { transform:translateX(5px); } 78% { transform:translateX(-2px); filter:brightness(1.08); } }
@keyframes dirigible-bomb-release { 0%,100% { transform:none; filter:none; box-shadow:none; } 20% { transform:translateY(-6px) rotate(-1deg); } 38% { transform:translateY(5px) rotate(2deg) scale(1.03); filter:brightness(1.45); box-shadow:inset 0 0 0 2px #d39355,0 0 31px rgba(213,80,34,.72); } 66% { transform:translateY(-2px) rotate(-1deg); } }
@keyframes berserker-axe-throw-source { 0%,100% { transform:none; filter:none; box-shadow:none; } 16% { transform:translateX(-8px) rotate(-2deg) scale(.97); } 34% { transform:translateX(-14px) rotate(-4deg) scale(1.02); box-shadow:inset 0 0 0 2px #c84f31,0 0 28px rgba(199,59,34,.72); } 52% { transform:translateX(12px) rotate(3deg) scale(1.06); filter:brightness(1.48) saturate(1.32); box-shadow:inset 0 0 0 3px #ef8a4e,0 0 38px rgba(220,73,35,.84); } 72% { transform:translateX(-3px) rotate(-1deg); } }
@keyframes berserker-ready-pulse { from { filter:brightness(.92); } to { filter:brightness(1.35); } }
@keyframes scout-charge-shot { 0%,18% { opacity: 0; transform: translate(0,0) rotate(var(--angle)) scaleX(.48); filter: brightness(.75); } 24% { opacity: 1; transform: translate(0,0) rotate(var(--angle)) scaleX(.72); filter: brightness(1.15); } 68% { opacity: 1; transform: translate(calc(var(--dx) * .68), calc(var(--dy) * .68)) rotate(var(--angle)) scaleX(1.05); filter: brightness(1.35); } 90% { opacity: 1; transform: translate(calc(var(--dx) * .96), calc(var(--dy) * .96)) rotate(var(--angle)) scaleX(1.12); filter: brightness(1.8); } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--angle)) scaleX(.82); filter: brightness(2.2); } }
@keyframes scout-charge-source { 0%,100% { transform: none; box-shadow: none; filter: none; } 12% { transform: translateX(-3px) scale(.98); } 28% { transform: translateX(-8px) scale(.96); box-shadow: inset 0 0 0 2px #e8cc7b, 0 0 24px rgba(229,181,74,.62); filter: brightness(1.15); } 52% { transform: translateX(4px) scale(1.02); box-shadow: inset 0 0 0 2px #f4d986, 0 0 32px rgba(229,181,74,.72); } 74% { transform: translateX(12px) scale(1.07); filter: brightness(1.48); } 90% { transform: translateX(-2px) scale(1.01); } }
@keyframes blood-thirst-heal { 0%,100% { filter: none; box-shadow: none; } 28% { filter: saturate(1.7) brightness(1.25); box-shadow: inset 0 0 0 2px #d3473e, 0 0 28px rgba(181,43,38,.86); } 62% { filter: saturate(1.25); box-shadow: inset 0 0 0 1px #6fc36c, 0 0 20px rgba(87,178,82,.64); } }
@keyframes pyro-cast { 0%,100% { transform: none; filter: none; box-shadow: none; } 28% { transform: translateY(-3px) scale(1.02); filter: brightness(1.35) saturate(1.45); box-shadow: inset 0 0 0 2px #ff9a45, 0 0 30px rgba(237,77,27,.8); } 72% { transform: translateY(1px) scale(.99); } }
@keyframes fire-spirit-cast { 0%,100% { transform:none; filter:none; box-shadow:none; } 12% { transform:translateX(-3px) scale(.98); filter:brightness(.86); } 28% { transform:translateX(-7px) scale(.97); box-shadow:inset 0 0 0 2px #d95b25,0 0 22px rgba(220,61,20,.62); } 52% { transform:translateX(3px) scale(1.03); filter:brightness(1.5) saturate(1.45); box-shadow:inset 0 0 0 3px #ffc15b,0 0 42px rgba(241,72,18,.92); } 82% { transform:translateX(-2px); filter:brightness(1.16); } }
@keyframes fire-spirit-arrival { 0% { opacity:0; transform:translateY(80px) scale(.5); filter:brightness(3) saturate(1.8) blur(5px); } 28% { opacity:1; transform:translateY(18px) scale(.86); } 62% { transform:translateY(-5px) scale(1.04); filter:brightness(1.45) saturate(1.4) blur(0); } 82% { opacity:1; transform:translateY(0) scale(1); } 100% { opacity:0; transform:translateY(-8px) scale(1.02); filter:brightness(1.1); } }
@keyframes fire-rift-open { 0% { opacity:0; transform:translate(-50%,-50%) scale(.24) skewX(-8deg); } 35% { opacity:1; } 72% { opacity:.78; transform:translate(-50%,-50%) scale(1.04) skewX(-8deg); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.18) skewX(-8deg); } }
@keyframes blue-fire-cast { 0%,100% { transform: none; filter: none; box-shadow: none; } 28% { transform: translateY(-4px) scale(1.03); filter: brightness(1.42) saturate(1.6); box-shadow: inset 0 0 0 2px #8ee9ff, 0 0 36px rgba(25,126,255,.9); } 72% { transform: translateY(1px) scale(.99); } }
@keyframes blue-flame-aura { 0% { opacity: .58; transform: translateY(2px) scale(.94); } 100% { opacity: 1; transform: translateY(-2px) scale(1.05); } }
@keyframes muzzle-flash { 0%,100% { box-shadow: none; } 14% { box-shadow: inset 0 0 0 2px #fff1a6, 0 0 22px #e8aa42; } }
@keyframes impact-flash { 0%,100% { filter: none; } 82% { filter: brightness(1); } 90% { filter: brightness(2.3) saturate(1.5); } }
@keyframes repair-source { 0%,100% { box-shadow: none; } 18% { box-shadow: inset 0 0 0 2px #94e4c5, 0 0 21px rgba(78,205,157,.72); } }
@keyframes repair-impact { 0%,100% { filter: none; } 65% { filter: brightness(1.8) saturate(1.3); box-shadow: inset 0 0 0 2px #72d5af, 0 0 22px rgba(76,211,159,.72); } }
@keyframes rampart-source { 0%,100% { box-shadow: none; } 35% { box-shadow: inset 0 0 0 2px #b9c7ca, 0 0 22px rgba(160,184,190,.65); } }
@keyframes rampart-rise { 0%,100% { filter: none; } 55% { filter: brightness(1.8); box-shadow: inset 0 -4px 0 #a9b8bb; } }
@keyframes cinematic-fireball { 0% { opacity: 0; transform: scale(.12) rotate(-8deg); filter: brightness(3) contrast(1.2); } 8% { opacity: 1; } 34% { transform: scale(.92) rotate(2deg); filter: brightness(1.55) contrast(1.15) saturate(1.5); } 72% { opacity: 1; transform: scale(1.2) rotate(-2deg); filter: brightness(.92) contrast(1.15) saturate(1.05); } 100% { opacity: 0; transform: scale(1.38) translateY(-16px); filter: brightness(.5) grayscale(.38); } }
@keyframes cinematic-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } 45% { opacity: .92; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2); } }
@keyframes cinematic-smoke { 0%,20% { opacity: 0; transform: translate(-50%, -20%) scale(.35); } 48% { opacity: .55; } 100% { opacity: 0; transform: translate(-50%, -105%) scale(2.15); } }
@keyframes cinematic-shock-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2); border-width: 1px; } }
@keyframes cinematic-embers { 0% { opacity: 0; transform: scale(.25) rotate(0); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.65) rotate(36deg); } }
@keyframes cinematic-debris { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--debris-angle)) translateX(4px) scale(.25); } 14% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--debris-angle)) translateX(var(--debris-distance)) rotate(520deg) scale(.8); } }
@keyframes cinematic-blast-travel { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) scale(.2); } 10% { opacity: 1; } 70% { opacity: 1; filter: brightness(1.35); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--angle)) scale(1.45); } }
@keyframes sapper-detonation-source { 0%,100% { transform: none; } 14% { transform: scale(.96); filter: brightness(1.2); } 29% { transform: scale(1.08); filter: brightness(2.5) saturate(1.7); } 48% { transform: translate(-4px,2px) scale(.96); opacity: .72; } 72% { transform: translate(5px,-3px) scale(.9); opacity: .25; } }
@keyframes cinematic-impact-hit { 0%,100% { transform: none; filter: none; } 12% { transform: translate(-5px,2px); filter: brightness(3) saturate(1.8); } 28% { transform: translate(6px,-3px); } 46% { transform: translate(-3px,1px); filter: brightness(1.4); } }
@keyframes cinematic-camera-shake { 0%,100% { transform: none; } 12% { transform: translate(-4px,2px); } 22% { transform: translate(5px,-3px); } 34% { transform: translate(-3px,-2px); } 48% { transform: translate(3px,2px); } 64% { transform: translate(-2px,1px); } 80% { transform: translate(1px,-1px); } }
@keyframes cannon-recoil { 0%,100% { transform: none; filter: none; } 20% { transform: translateX(3px); filter: brightness(1.8); } 45% { transform: translateX(-2px); } }
@keyframes electric-cannon-recoil { 0%,100% { transform:none; filter:none; box-shadow:none; } 16% { transform:translateX(4px); filter:brightness(2); box-shadow:inset 0 0 0 2px #c6f8ff,0 0 32px rgba(41,204,238,.95); } 42% { transform:translateX(-5px); } 70% { transform:translateX(2px); filter:brightness(1.2); } }
@keyframes rock-throw-source { 0%,100% { transform: none; filter: none; box-shadow: none; } 18% { transform: translateY(3px) scale(.97); } 43% { transform: translateY(-5px) rotate(-2deg) scale(1.04); filter: brightness(1.28); box-shadow: inset 0 0 0 2px #b6a77e, 0 0 27px rgba(128,111,75,.72); } 63% { transform: translateX(5px) rotate(2deg); } }

.fishing-placement-modal { position:fixed; inset:0; z-index:41; display:grid; place-items:center; padding:18px; background:rgba(5,10,12,.88); backdrop-filter:blur(7px); }
.fishing-placement-modal.hidden { display:none; }
.fishing-placement-window { width:min(980px,100%); overflow:hidden; border:1px solid #5d8792; border-radius:6px; background:#192326; box-shadow:0 28px 80px rgba(0,0,0,.8); }
.fishing-placement-window.orc { border-color:#806b43; background:#20231c; }
.fishing-placement-header { padding:18px 22px 14px; border-bottom:1px solid #3c4d51; background:#202c30; }
.fishing-placement-window.orc .fishing-placement-header { background:#292820; }
.fishing-placement-header h2 { margin-top:4px; color:#f1e5ce; font-size:26px; }
.fishing-placement-description { margin:0; padding:14px 22px; color:#b9c6c7; font-size:13px; }
.fishing-placement-choices { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; padding:4px 22px 22px; }
.fishing-placement-choices button { min-width:0; min-height:245px; padding:8px; display:grid; grid-template-rows:160px auto auto; align-items:center; gap:5px; border-color:#4c747e; background:#18292f; color:#e7f1ef; }
.fishing-placement-window.orc .fishing-placement-choices button { border-color:#716445; background:#24261e; }
.fishing-placement-choices button:hover { border-color:#9bd4df; background:#203941; transform:translateY(-2px); }
.fishing-placement-window.orc .fishing-placement-choices button:hover { border-color:#c79a54; background:#343122; }
.fishing-choice-water { height:160px; position:relative; overflow:hidden; display:grid; place-items:center; background:linear-gradient(#236a7d,#123e50); border:1px solid rgba(142,211,225,.35); }
.fishing-placement-window.orc .fishing-choice-water { background:linear-gradient(#315b5b,#273a39); }
.fishing-choice-water::after { content:""; position:absolute; inset:auto 0 0; height:36%; background:repeating-radial-gradient(ellipse at 20% 100%,rgba(203,239,238,.3) 0 2px,transparent 3px 15px); }
.fishing-choice-water img { width:145px; height:132px; position:relative; z-index:2; object-fit:contain; filter:drop-shadow(0 8px 7px rgba(0,0,0,.65)); }
.fish-school { width:64px; height:28px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(ellipse at 10px 8px,#d7eff0 0 5px,transparent 6px),radial-gradient(ellipse at 36px 18px,#a9d6db 0 6px,transparent 7px),radial-gradient(ellipse at 55px 7px,#d7eff0 0 4px,transparent 5px); filter:drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.fishing-placement-choices strong { font-size:15px; }
.fishing-placement-choices small { min-height:28px; color:#9eb4b6; font-size:10px; line-height:1.35; }

.research-modal { position: fixed; inset: 0; z-index: 38; display: grid; place-items: center; padding: 18px; background: rgba(7,9,10,.86); backdrop-filter: blur(6px); }
.research-modal.hidden { display: none; }
.research-window { width: min(720px, 100%); overflow: hidden; border: 1px solid #6e603f; border-radius: 6px; background: #1b2022; box-shadow: 0 28px 80px rgba(0,0,0,.78); }
.research-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px; border-bottom: 1px solid #424748; background: #23282a; }
.research-header h2 { margin-top: 3px; color: #f1e5ce; font-size: 21px; }
.research-close { width: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; font-size: 22px; }
.research-content { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 310px; }
.research-visual { display: grid; place-items: center; position: relative; overflow: hidden; border-right: 1px solid #3b4041; background: #182126; }
.research-visual.orc { background: #20231d; }
.research-visual .unit-portrait { width: 150px; height: 150px; filter: drop-shadow(0 15px 12px rgba(0,0,0,.55)); }
.research-visual .building-portrait { width: 155px; height: 155px; filter: drop-shadow(0 15px 12px rgba(0,0,0,.55)); }
.research-visual.naval-training.human { background: #17262d; }
.research-visual.naval-training.orc { background: #29231a; }
.naval-training-icon { width: 82px; height: 82px; position: absolute; right: 15px; bottom: 22px; border: 5px solid #b9d5df; border-radius: 50%; background: radial-gradient(circle, #294653 0 20%, transparent 21%), repeating-conic-gradient(from 0deg, #d8edf2 0 6deg, transparent 6deg 39deg); box-shadow: 0 0 0 5px #426775, 0 8px 18px rgba(0,0,0,.55), 0 0 25px rgba(93,169,193,.35); }
.naval-training-icon::before { content: ""; width: 9px; height: 104px; position: absolute; left: 32px; top: -16px; border-radius: 5px; background: #d8edf2; box-shadow: 0 0 0 2px #426775; transform: rotate(45deg); }
.naval-training-icon::after { content: ""; width: 26px; height: 26px; position: absolute; left: 23px; top: 23px; border: 4px solid #d8edf2; border-radius: 50%; background: #294653; box-shadow: 0 0 0 2px #426775; }
.research-visual.naval-training.orc .naval-training-icon { width: 76px; height: 76px; border: 5px solid #a66337; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 50% 48%, #d8a14e 0 9%, #6f321e 10% 25%, transparent 26%), repeating-radial-gradient(circle, #4b2318 0 6px, #8a4728 7px 12px); box-shadow: 0 0 0 5px #3e251b, 0 8px 18px rgba(0,0,0,.6), 0 0 24px rgba(186,83,35,.38); transform: rotate(-7deg); }
.research-visual.naval-training.orc .naval-training-icon::before { width: 12px; height: 106px; left: 30px; top: -15px; border-radius: 2px; background: linear-gradient(90deg, #281812, #7f4c2c 45%, #d1954f 52%, #4b2c1e); box-shadow: none; transform: rotate(-34deg); }
.research-visual.naval-training.orc .naval-training-icon::after { width: 42px; height: 24px; left: 15px; top: 24px; border: 0; border-radius: 0; background: #d6b174; box-shadow: 0 0 0 3px #3f2419; clip-path: polygon(0 50%, 18% 0, 50% 23%, 82% 0, 100% 50%, 82% 100%, 50% 77%, 18% 100%); }
.research-visual.explosive-fishing { background:radial-gradient(circle at 50% 55%,#49311f,#211915 70%); }
.explosive-fishing-art { width:185px; height:250px; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(0,0,0,.7)); }
.explosive-fishing-label { color:#f0a057; }
.explosive-fishing-button { border-color:#b86c34; background:#774126; color:#fff1d9; }
.research-visual.advanced-fishing-nets { background:radial-gradient(circle at 50% 55%,#29444a,#172126 72%); }
.advanced-fishing-nets-art { width:195px; height:255px; object-fit:contain; filter:drop-shadow(0 14px 13px rgba(0,0,0,.68)); }
.advanced-fishing-nets-label { color:#d8c079; }
.advanced-fishing-nets-button { border-color:#b9a25c; background:#5f704f; color:#fff8dc; }
.research-visual.legendary-upgrade.extended-magazine { background: #202527; }
.research-visual.legendary-upgrade.blue-fire { background: #121d2a; }
.research-visual.legendary-upgrade.blue-fire .unit-portrait { box-shadow: inset 0 0 0 2px rgba(111,220,255,.5), 0 0 36px rgba(30,128,255,.55); }
.research-visual.electric-tower-upgrade { background:#17272c; }
.research-visual.electric-tower-upgrade .building-portrait { border-color:#79dff3; box-shadow:inset 0 0 0 2px rgba(91,210,236,.42),0 0 34px rgba(34,171,207,.48); }
.electric-upgrade-icon { width:42px; height:62px; position:absolute; right:24px; bottom:28px; background:#d9faff; clip-path:polygon(57% 0,100% 0,68% 38%,95% 38%,22% 100%,42% 55%,10% 55%); filter:drop-shadow(0 0 9px #36d6ff); }
.legendary-upgrade-icon { width: 62px; height: 44px; position: absolute; right: 20px; bottom: 27px; border: 3px solid #9b7732; background: repeating-linear-gradient(90deg, #e1b451 0 7px, #62421e 7px 10px); box-shadow: 0 7px 15px rgba(0,0,0,.55); transform: rotate(-12deg); }
.research-visual.blue-fire .legendary-upgrade-icon { width: 54px; height: 70px; border: 0; border-radius: 50% 50% 46% 46%; background: radial-gradient(ellipse at 50% 72%, #e9ffff 0 8%, #59dcff 20%, #1764e0 52%, transparent 70%); box-shadow: 0 0 30px #258eff; transform: none; animation: blue-flame-aura 1.1s ease-in-out infinite alternate; }
.research-armor-icon { width: 64px; height: 76px; position: absolute; right: 22px; bottom: 30px; border: 5px solid #a8bac4; border-radius: 30px 30px 42px 42px; background: linear-gradient(135deg, #5d7788, #c5d5dc 50%, #506b7b); box-shadow: 0 8px 16px rgba(0,0,0,.5); }
.research-armor-icon::after { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; border-left: 2px solid rgba(255,255,255,.55); }
.research-visual.orc .research-armor-icon { border-color: #8a7451; background: linear-gradient(135deg, #4a3d2d, #907856 50%, #3b3228); transform: rotate(-5deg); }
.research-visual.tier-iron { background: #1b2326; }
.research-visual.tier-iron .research-armor-icon { border-color: #7f9299; background: linear-gradient(135deg, #39484e, #91a2a7 50%, #303d42); box-shadow: 0 8px 16px rgba(0,0,0,.5), 0 0 20px rgba(118,145,154,.18); }
.research-visual.tier-silver { background: #20272a; }
.research-visual.tier-silver .research-armor-icon { border-color: #dce6e8; background: linear-gradient(135deg, #77878e, #f1f5f5 48%, #89999f); box-shadow: 0 8px 16px rgba(0,0,0,.5), 0 0 28px rgba(224,239,244,.4); }
.research-visual.tier-gold { background: #29251b; }
.research-visual.tier-gold .research-armor-icon { border-color: #f0c75f; background: linear-gradient(135deg, #8b5d18, #f7dd80 48%, #9e6c1c); box-shadow: 0 8px 16px rgba(0,0,0,.5), 0 0 30px rgba(237,185,55,.42); }
.research-visual.blood-thirst { background: #261817; }
.research-visual.blood-thirst .unit-portrait { border-color: #b84c42; box-shadow: inset 0 0 0 2px rgba(196,65,55,.42), 0 0 34px rgba(144,34,30,.48); }
.blood-thirst-icon { width: 54px; height: 68px; position: absolute; right: 20px; bottom: 26px; border: 3px solid #d66a5d; border-radius: 52% 48% 58% 42% / 62% 58% 42% 38%; background: radial-gradient(circle at 38% 28%, #ff9989 0 8%, #b82d29 32%, #5e1114 74%); box-shadow: 0 0 24px rgba(203,48,42,.72); transform: rotate(45deg); }
.research-copy { padding: 26px; }
.research-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.research-choices.hidden { display: none; }
.research-choices button { min-height: 34px; padding: 7px 8px; border-color: #4c5353; background: #24292b; color: #aaa79f; font-size: 10px; }
.research-choices button.active { border-color: #ad4b42; background: #512825; color: #ffd6c5; box-shadow: inset 0 -2px 0 #c55d4e; }
.research-label { color: #9f9a90; font-size: 9px; text-transform: uppercase; letter-spacing: 0; }
.blood-thirst-label { color: #ef7c70; }
.electric-tower-label { color:#8be5f5; }
.naval-training-human { color: #8ed0e4; }
.naval-training-orc { color: #e0a15d; }
.naval-training-button.human { border-color: #4f8291; background: #315f6d; }
.naval-training-button.orc { border-color: #9b5a35; background: #6b3826; }
.tag.research-tag.naval-training-tag { border-color: #4e8291; color: #a8dce8; background: rgba(47,104,121,.18); }
.tag.research-tag.explosive-fishing-tag { border-color:#a86637; color:#f0b16c; background:rgba(126,65,31,.22); }
.research-label.tier-iron { color: #a7bcc3; }
.research-label.tier-silver { color: #e3edef; }
.research-label.tier-gold { color: #f2ca65; }
.research-copy h3 { margin: 5px 0 10px; color: #f5dfaa; font-size: 27px; }
.research-copy p { color: #bbb7ae; font-size: 13px; line-height: 1.55; }
.research-effect { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 18px; padding: 10px; border-left: 3px solid #7197a7; background: #222b2f; }
.research-effect strong { color: #d7e8ec; font-size: 10px; text-transform: uppercase; }
.research-effect span { color: #b9c1c0; font-size: 11px; }
.research-effect b { color: #9bc6d8; font-size: 13px; }
.research-cost { margin-top: 14px; color: #d5bd88; font-size: 11px; }
.research-progress-track { height: 7px; margin-top: 18px; overflow: hidden; border: 1px solid #4d5354; background: #111516; }
.research-progress-track i { display: block; width: 0; height: 100%; background: #7aa6b5; transition: width 240ms ease; }
.research-window:has(.research-visual.tier-iron) .research-progress-track i { background: #7f979e; }
.research-window:has(.research-visual.tier-silver) .research-progress-track i { background: #d6e2e5; }
.research-window:has(.research-visual.tier-gold) .research-progress-track i { background: #dfb449; }
.research-progress { margin-top: 6px; color: #96938c; font-size: 10px; }
.research-footer { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid #3b4041; background: #202527; }
.research-footer button { min-width: 190px; }
.research-tier-button.tier-iron { border-color: #82979d; background: #4f656b; color: #f2f6f7; }
.research-tier-button.tier-silver { border-color: #d6e2e5; background: #85979d; color: #111719; }
.research-tier-button.tier-gold { border-color: #f0ca66; background: #a97820; color: #fff6d7; }
.legendary-upgrade-button.human { border-color: #b9964d; background: #70572d; }
.legendary-upgrade-button.orc { border-color: #55bfe9; background: #17568a; }
.blood-thirst-button { border-color: #c8584e; background: #7d2926; color: #fff0df; }
.electric-tower-button { border-color:#64cfe5; background:#286879; color:#effdff; }

.victory-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; overflow: hidden; background: rgba(6,8,9,.9); backdrop-filter: blur(7px); }
.victory-modal.hidden { display: none; }
.victory-window { width: min(560px, 100%); padding: 30px; border: 1px solid #75613b; border-radius: 6px; background: #202426; box-shadow: 0 32px 90px rgba(0,0,0,.8); text-align: center; }
.victory-window.human { border-color: #5d8bae; box-shadow: 0 32px 90px rgba(0,0,0,.8), inset 0 4px 0 #6f9dc1; }
.victory-window.orc { border-color: #6f925f; box-shadow: 0 32px 90px rgba(0,0,0,.8), inset 0 4px 0 #7ca76f; }
.victory-trophy { height: 110px; display: grid; place-items: center; font-size: 82px; line-height: 1; filter: drop-shadow(0 12px 16px rgba(0,0,0,.55)); animation: trophy-arrival 650ms cubic-bezier(.2,.8,.2,1) both; }
.victory-window h2 { margin: 8px 0 10px; color: #fff0cb; font-size: 31px; }
.victory-window p { color: #bcb7ad; font-size: 14px; line-height: 1.5; }
.victory-stats { display: flex; justify-content: center; gap: 8px; margin: 18px 0; }
.victory-stats span { padding: 6px 9px; border: 1px solid #454a4b; border-radius: 3px; color: #dbc28d; background: #292d2f; font-size: 10px; }
.victory-window button { min-width: 190px; }
@keyframes trophy-arrival { 0% { opacity: 0; transform: translateY(-28px) scale(.72) rotate(-7deg); } 70% { opacity: 1; transform: translateY(4px) scale(1.08) rotate(2deg); } 100% { transform: none; } }

.log-panel { min-height: 0; padding: 10px 12px; overflow: hidden; border-top: 1px solid var(--line); background: #171a1c; }
.log-heading { width: 100%; min-height: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
.log-heading:hover { border: 0; background: transparent; box-shadow: none; }
.log-heading i { width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid #b99a5d; border-bottom: 2px solid #b99a5d; transform: rotate(45deg); transition: transform 180ms ease; }
.game-area.log-collapsed .log-heading { margin-bottom: 0; }
.game-area.log-collapsed .log-heading span { display: none; }
.game-area.log-collapsed .log-heading i { transform: rotate(225deg); }
.game-area.log-collapsed .game-log { display: none; }
.log-heading { margin-bottom: 7px; }
.game-log { height: 93px; display: grid; align-content: start; gap: 4px; overflow-y: auto; color: var(--muted); font-size: 11px; }
.log-entry { padding: 5px 7px; border-left: 2px solid #826e47; background: #202426; }
.log-entry:first-child { color: #e4ded2; border-left-color: var(--brass); background: #282c2e; }

.selection-info,
.item-details,
.rule-list { color: var(--muted); font-size: 12px; line-height: 1.5; }
.selection-info strong,
.item-details strong,
.rule-list strong { color: #f5e9d0; }
.selection-title { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.tag.production-tag { border-color: #c7a354; color: #f0d28f; background: rgba(145, 105, 39, .18); }
.tag.production-ready { border-color: #668e62; color: #a9cf9c; background: rgba(54, 105, 61, .16); }
.selection-cancel-production { margin-top:7px; min-height:34px; width:100%; border-color:#915a43; color:#f0b18b; background:#342622; font-weight:800; }
.selection-cancel-production:hover { border-color:#d18760; color:#ffe0c4; background:#412c25; }
.tag.research-tag { border-color: #5f8796; color: #b9dce7; background: rgba(62, 112, 130, .16); }
.tag.research-tag.tier-iron { border-color: #6f858c; color: #b8c9ce; background: rgba(92, 113, 120, .16); }
.tag.research-tag.tier-silver { border-color: #c4d3d7; color: #e3edef; background: rgba(184, 203, 208, .16); }
.tag.research-tag.tier-gold { border-color: #d3a63e; color: #f2cf78; background: rgba(192, 137, 27, .17); }
.tag.research-tag.blood-thirst-tag { border-color: #a9443e; color: #f2a096; background: rgba(132, 38, 34, .2); }
.tag.electric-tag { border-color:#4aa5b8; color:#b9f1fa; background:rgba(38,128,147,.2); }
.action-state { padding: 3px 6px; border: 1px solid #5f8559; border-radius: 3px; color: #bde0b4; background: #2a3b2b; font-size: 9px; text-transform: uppercase; }
.action-state.used { border-color: #606466; color: #aaa; background: #292c2e; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin: 8px 0; }
.stat { padding: 6px; border: 1px solid #393d3e; border-radius: 3px; background: #222628; }
.stat small { display: block; color: #85827b; font-size: 9px; }
.stat strong { display: block; margin-top: 2px; font-size: 12px; }
.armor-stat { grid-column: 1 / -1; border-color: #536d7a; background: #202a2f; }
.order-note { margin-top: 9px; padding: 7px 8px; border-left: 3px solid var(--teal); background: #202b2e; color: #c9dddf; }
.item-details .meta { margin-top: 9px; }
.tag { display: inline-block; margin: 5px 4px 0 0; padding: 3px 6px; border: 1px solid #434748; border-radius: 3px; background: #24282a; color: #dbc89d; font-size: 10px; }
.rule-list { display: grid; gap: 7px; }
.rule-list p { padding-left: 10px; border-left: 2px solid #474b4c; }

@keyframes tactic-star-pulse {
  from { transform:translateY(0); box-shadow:inset 0 0 0 1px rgba(255,226,134,.24),0 0 10px rgba(235,186,67,.28); }
  to { transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(255,238,174,.48),0 0 22px rgba(235,186,67,.64); }
}

@media (max-width: 1320px) {
  .shell { grid-template-columns: 280px minmax(570px, 1fr) 270px; }
  .resources { grid-template-columns: repeat(4, minmax(70px, 1fr)); }
  .topbar { grid-template-columns: 175px auto 1fr; }
  .resource { height: 37px; grid-template-rows: 13px 13px; }
  .game-area { grid-template-rows: auto minmax(0, 1fr) 132px; }
}

@media (max-width: 1040px) {
  body { overflow: auto; }
  .shell { width: 100%; height: auto; min-height: 100vh; grid-template-columns: 280px minmax(600px, 1fr); }
  .right-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .right-panel .section { border-bottom: 0; }
  .game-area { min-height: 760px; }
  .battle-window { width: calc(100vw - 24px); }
  .building-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-body { grid-template-columns: 260px minmax(0,1fr); }
  .admin-edit-panel { grid-template-columns: minmax(230px,34%) minmax(0,1fr); }
  .admin-preview-column { padding: 16px; }
}

@media (max-width: 700px) {
  .multiplayer-modal { padding:8px; }
  .multiplayer-window { width:100%; max-height:calc(100vh - 16px); }
  .multiplayer-body { grid-template-columns:1fr; overflow:auto; }
  .multiplayer-separator { min-height:28px; }
  .multiplayer-separator::before { width:auto; height:1px; inset:auto 24px; }
  .multiplayer-separator span { padding:0 8px; }
  .multiplayer-create,.multiplayer-join { padding:20px; }
  .multiplayer-room-status { grid-template-columns:auto 1fr; }
  .multiplayer-room-status p { grid-column:1 / -1; }
  .fishing-placement-modal { padding:8px; }
  .fishing-placement-window { max-height:calc(100vh - 16px); overflow-y:auto; }
  .fishing-placement-choices { grid-template-columns:repeat(2,minmax(0,1fr)); padding:4px 12px 16px; }
  .fishing-placement-choices button { min-height:190px; grid-template-rows:112px auto auto; }
  .fishing-choice-water { height:112px; }
  .fishing-choice-water img { width:112px; height:102px; }
  .admin-modal { padding: 8px; }
  .admin-window { width: calc(100vw - 16px); height: calc(100vh - 16px); min-height: 0; }
  .admin-header { min-height: 70px; padding: 10px 12px; }
  .admin-header h2 { font-size: 20px; }
  .admin-header p { display: none; }
  .admin-category-tabs { gap: 3px; padding: 6px; }
  .admin-category-tabs button { min-height: 34px; padding: 4px; font-size: 9px; }
  .admin-body { grid-template-columns: 1fr; grid-template-rows: 180px minmax(0,1fr); }
  .admin-sidebar { border-right: 0; border-bottom: 1px solid #3b4041; }
  .admin-faction-filters { padding: 6px; }
  .admin-item-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-item { min-height: 54px; grid-template-columns: 46px minmax(0,1fr); padding: 3px 5px; }
  .admin-item-visual { width: 42px; height: 42px; }
  .admin-item-visual .building-portrait,.admin-item-visual .unit-portrait,.admin-item-visual .admin-logistic-image,.admin-item-visual .gatling-platform-portrait { width: 40px; height: 40px; }
  .admin-edit-panel { grid-template-columns: 128px minmax(0,1fr); }
  .admin-preview-column { justify-content: flex-start; padding: 10px; }
  .admin-preview { width: 108px; }
  .admin-entry-faction { margin-top: 9px; font-size: 7px; }
  .admin-preview-column h3 { font-size: 14px; }
  .admin-preview-column p { font-size: 8px; }
  .admin-fields-column { padding: 10px; }
  .admin-fields { grid-template-columns: 1fr; gap: 8px; }
  .admin-field.wide { grid-column: auto; }
  .admin-field textarea { min-height: 72px; }
  .admin-footer { min-height: 50px; padding: 6px 10px; }
  .admin-footer button { min-width: 0; flex: 1; min-height: 36px; }
  .battle-modal { padding: 8px; }
  .battle-window { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .unit-inspect-modal { padding: 8px; }
  .unit-inspect-window { width: calc(100vw - 16px); max-height: calc(100vh - 16px); grid-template-columns: 1fr; overflow-y: auto; }
  .unit-inspect-visual { min-height: 310px; border-right: 0; border-bottom: 1px solid #414748; }
  .unit-inspect-visual .unit-portrait { width: min(280px, 76vw); height: 280px; }
  .unit-inspect-visual .building-portrait { width: min(300px, 80vw); height: 280px; }
  .logistic-inspect-portrait { width:min(300px,80vw); height:280px; }
  .logistic-build-modal { padding:8px; }
  .logistic-build-window { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
  .logistic-build-header { padding:16px; }
  .logistic-build-header h2 { font-size:21px; }
  .logistic-build-modal-choices { grid-template-columns:1fr; padding:12px 16px 16px; }
  .logistic-build-card { min-height:390px; grid-template-rows:230px minmax(0,1fr); }
  .logistic-build-footer { padding:10px 16px 14px; }
  .building-catalog-modal { padding:8px; }
  .building-catalog-window { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
  .building-catalog-header { padding:16px; }
  .building-catalog-header h2 { font-size:21px; }
  .building-catalog-grid { grid-template-columns:1fr; padding:12px 16px 16px; }
  .building-catalog-grid .build-button { min-height:118px; }
  .building-catalog-footer { padding:10px 16px 14px; }
  .market-modal { padding:8px; }
  .market-window { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
  .market-header { padding:16px; }
  .market-header h2 { font-size:21px; }
  .market-content { grid-template-columns:1fr; }
  .market-visual { min-height:230px; border-right:0; border-bottom:1px solid #3d4649; }
  .market-visual .building-portrait { width:min(280px,72vw); height:220px; }
  .market-visual::after { bottom:22px; }
  .market-trade-panel { gap:15px; padding:18px 16px; }
  .market-stock { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .market-stock > span { min-height:55px; }
  .market-exchange-row { grid-template-columns:1fr; }
  .market-arrow { min-height:24px; transform:rotate(90deg); }
  .market-footer { padding:10px 16px 14px; }
  .market-footer button { min-width:0; flex:1; }
  .unit-inspect-content { padding: 28px 18px 24px; }
  .unit-inspect-content h2 { font-size: 26px; }
  .unit-inspect-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-header, .battle-status, .battle-board, .battle-report { padding-left: 10px; padding-right: 10px; }
  .battle-header { gap:8px; }
  .tactic-star { width:92px; }
  .tactic-modal { padding:8px; }
  .tactic-window { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
  .tactic-content { grid-template-columns:1fr; }
  .tactic-visual { min-height:260px; border-right:0; border-bottom:1px solid #3d4141; }
  .tactic-visual .unit-portrait { width:180px; height:220px; }
  .tactic-visual .gatling-platform-portrait { width:170px; height:180px; }
  .tactic-copy { padding:20px 16px; }
  .tactic-card { grid-template-columns:94px minmax(0,1fr); min-height:104px; }
  .tactic-card .gatling-platform-portrait { width:88px; height:82px; }
  .formation-grid { min-width: 760px; }
  .formation { overflow-x: auto; }
  .tile-build-menu { width: calc(100% - 16px); max-height: calc(100% - 16px); padding: 10px; }
  .tile-build-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-status { align-items: flex-start; flex-direction: column; gap: 3px; }
  .logistics-action-panel { align-items:stretch; flex-direction:column; }
  .logistic-build-choices { width:100%; grid-template-columns:1fr; }
  .bone-war-horn { transform:rotate(-8deg) scale(.72); }
  .research-modal { padding: 8px; }
  .research-window { max-height: calc(100vh - 16px); overflow-y: auto; }
  .research-content { grid-template-columns: 1fr; }
  .research-visual { min-height: 170px; border-right: 0; border-bottom: 1px solid #3b4041; }
  .research-visual .unit-portrait { width: 120px; height: 120px; }
  .research-visual .building-portrait { width: 120px; height: 120px; }
  .naval-training-icon { right: calc(50% - 105px); bottom: 18px; transform: scale(.78); }
  .research-visual.naval-training.orc .naval-training-icon { transform: rotate(-7deg) scale(.78); }
  .research-armor-icon { width: 48px; height: 58px; right: calc(50% - 88px); bottom: 18px; }
  .research-copy { padding: 18px; }
  .research-effect { grid-template-columns: 1fr auto; }
  .research-effect strong { grid-column: 1 / -1; }
}