@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/space-grotesk/space-grotesk-latin-500.woff2?v=0640890476fc") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/space-grotesk/space-grotesk-latin-600.woff2?v=0640890476fc") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk/space-grotesk-latin-700.woff2?v=0640890476fc") format("woff2");
}

@font-face {
  font-family: "Syncopate";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/syncopate/syncopate-latin-400.woff2?v=b57f964dfec1") format("woff2");
}

@font-face {
  font-family: "Syncopate";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/syncopate/syncopate-latin-400.woff2?v=b57f964dfec1") format("woff2");
}

@font-face {
  font-family: "Syncopate";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/syncopate/syncopate-latin-400.woff2?v=b57f964dfec1") format("woff2");
}

@font-face {
  font-family: "Syncopate";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/syncopate/syncopate-latin-700.woff2?v=8a462650535a") format("woff2");
}

/* Interface typography is always flat: no glow, embossing, or drop-shadow effects. */
*,
*::before,
*::after {
  text-shadow: none !important;
}

:root {
  --game-scale: 1;
  --menu-scale: 1;
  --menu-scale-x: 1;
  --menu-scale-y: 1;
  --menu-fluid-height: 675px;
  --menu-visible-edge-inset: 18px;
  --game-bleed-x: 0px;
  --game-center-x: 50vw;
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --game-width: 1200px;
  --game-height: 675px;
  --font-display: "Syncopate", sans-serif;
  --font-title: var(--font-display);
  --font-ui: "Space Grotesk", sans-serif;
  --font-menu: var(--font-display);
  --font-ticker: var(--font-ui);
  --font-heading: var(--font-display);
  --font-label: var(--font-menu);
  --font-copy: var(--font-ui);
  --font-data: var(--font-ticker);
  --font-mono: var(--font-data);
  --battle-bg: url("assets/generated-art/environment/mars-research-station.webp");
  --menu-bg: url("assets/generated-art/ui/title-background/mars-canyon-title-bg-v1.jpg");
  --ink: #17202a;
  --ink-soft: #5f6870;
  --glass: rgba(21, 28, 34, 0.78);
  --paper: #f5f0e4;
  --paper-edge: #d7c9a8;
  --gold: #b98a2d;
  --gold-bright: #e2bc66;
  --cyan: #35b8d9;
  --friendly: #3b927f;
  --friendly-dark: #174f58;
  --enemy: #d7d8d3;
  --enemy-dark: #242a2b;
  --good: #64ba83;
  --battle-hud-card-width: 170px;
  --battle-hud-card-height: 261px;
  --battle-hud-card-aspect: 170 / 261;
  --fieldworks-w: 96px;
  --rail-w: 132px;
  --stage-gap: 12px;
  --dock-bottom: max(34px, calc(var(--safe-bottom) + 24px));
}

.is-battle-screen {
  --game-width: 1600px;
  --game-height: 900px;
  --battle-ribbon-center-x: 60.5%;
  --battle-ribbon-top-y: 24px;
  --battle-top-y: var(--battle-ribbon-top-y);
  --fieldworks-w: 112px;
  --rail-w: 154px;
  --stage-gap: 16px;
  --battle-rail-card-height: 246px;
  --battle-rail-card-gap: 16px;
  --dock-bottom: max(38px, calc(var(--safe-bottom) + 28px));
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;   /* ADR-0038: track the visible area as mobile chrome collapses; 100% is the fallback */
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-synthesis: none;
  text-transform: uppercase;
  background: #cdd9dc;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

body {
  background:
    linear-gradient(180deg, rgba(6, 9, 8, 0.1), rgba(18, 11, 8, 0.62)),
    var(--menu-bg) center 50% / cover no-repeat,
    #6b3828;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: blur(1px);
}

body::before {
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0.32;
  background:
    radial-gradient(ellipse at 50% 74%, transparent 0 33%, rgba(48, 29, 14, 0.24) 78%),
    linear-gradient(180deg, rgba(255, 230, 180, 0.08), rgba(63, 39, 20, 0.12));
  filter: none;
}

body::after {
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0.08;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.35) 0,
    rgba(255, 255, 255, 0.35) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: soft-light;
  filter: none;
}

button {
  font: inherit;
  text-transform: uppercase;
}

.hud__menu,
.hud__label,
.rail__label,
.command-panel__action,
.end-turn,
.phase-label,
.banner button,
.rotate-device strong,
.discard-selected__label {
  font-family: var(--font-label);
  font-weight: 600;
}

.hud__val {
  font-family: var(--font-data);
  font-weight: 500;
}

.banner h2 {
  font-family: var(--font-heading);
  font-weight: 400;
}

#app,
.title-screen,
.submenu-screen {
  position: absolute;
  z-index: 1;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: var(--game-width);
  height: var(--game-height);
  overflow: visible;
}

#app {
  top: 50%;
  left: var(--game-center-x);
  overflow: hidden;
  background:
    linear-gradient(rgba(210, 104, 51, 0.12), rgba(78, 42, 24, 0.24)),
    var(--battle-bg) center / cover no-repeat,
    #9b5f39;
  transform: translate(-50%, -50%) scale(var(--game-scale));
  transform-origin: center;
}

.is-tutorial-locked #app {
  pointer-events: none;
}

.is-battle-screen body {
  background: #030506;
}

.is-battle-screen body::before,
.is-battle-screen body::after {
  opacity: 0;
}

.title-screen {
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--menu-scale-x), var(--menu-scale-y));
  transform-origin: center;
}

.submenu-screen {
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--game-scale));
  transform-origin: center;
}

#app[hidden],
.title-screen[hidden],
.submenu-screen[hidden] {
  display: none;
}

[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.title-screen {
  display: grid;
  place-items: center;
  width: max(var(--game-width), 100vw);
  height: var(--game-height);
  overflow: hidden;
  color: #f5e5b7;
  background:
    radial-gradient(circle at 29% 52%, rgba(156, 51, 27, 0.2), transparent 32%),
    linear-gradient(90deg, rgba(48, 17, 10, 0.42), rgba(3, 8, 10, 0.24) 52%, rgba(3, 8, 10, 0.56)),
    linear-gradient(180deg, rgba(240, 185, 77, 0.08), rgba(18, 11, 8, 0.48)),
    var(--kk-ui-title-bg) center / cover no-repeat,
    #061114;
  isolation: isolate;
}

.title-screen::before,
.title-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.title-screen::before {
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(168, 74, 36, 0.02) 0 22%, rgba(7, 10, 9, 0.24) 54%, rgba(3, 5, 5, 0.76) 100%),
    linear-gradient(90deg, rgba(4, 7, 6, 0.68), transparent 30% 70%, rgba(4, 7, 6, 0.68)),
    repeating-linear-gradient(90deg, rgba(224, 166, 76, 0.07) 0 1px, transparent 1px 64px);
}

.title-screen::after {
  z-index: 5;
  inset: 0;
  opacity: 0.13;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.25) 0 1px,
    transparent 1px 4px
  );
  mix-blend-mode: soft-light;
}

.title-screen__wash {
  position: absolute;
  z-index: -1;
  top: -130px;
  left: 50%;
  width: 780px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 74, 44, 0.28), rgba(116, 32, 25, 0.1) 48%, transparent 70%);
  transform: translateX(-50%);
  filter: blur(5px);
}

.title-screen__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 700px 280px;
  align-items: center;
  gap: 54px;
  width: 1034px;
  margin-top: 42px;
  text-align: center;
}

.title-screen__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.game-logo {
  position: relative;
  display: grid;
  justify-items: center;
  width: 690px;
  max-width: 100%;
  padding: 24px 38px 25px;
  overflow: hidden;
  border: 1px solid rgba(54, 226, 207, 0.42);
  border-radius: 0;
  color: #f9e9c0;
  background:
    linear-gradient(135deg, rgba(145, 43, 18, 0.3), transparent 36%, rgba(54, 226, 207, 0.08)),
    linear-gradient(180deg, rgba(5, 14, 15, 0.72), rgba(4, 8, 9, 0.88)),
    var(--kk-ui-row-active, none) center / 100% 100% no-repeat;
  background-blend-mode: normal, normal, screen;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(240, 185, 77, 0.13),
    inset 0 0 38px rgba(54, 226, 207, 0.08);
  transform: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.32));
}

.game-logo::before,
.game-logo::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  z-index: 0;
  display: block;
  height: 3px;
  background:
    linear-gradient(90deg, transparent, rgba(240, 185, 77, 0.9) 16%, rgba(239, 62, 48, 0.9) 50%, rgba(54, 226, 207, 0.72) 84%, transparent);
  box-shadow: 0 0 14px rgba(239, 62, 48, 0.24);
}

.game-logo::before {
  top: 10px;
}

.game-logo::after {
  bottom: 10px;
  transform: scaleX(-1);
}

.game-logo__killer,
.game-logo__from,
.game-logo__kosmonauts,
.game-logo__mars {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

.game-logo__killer,
.game-logo__from {
  font-family: var(--font-display);
  color: #f6d8a0;
  letter-spacing: 0;
  text-indent: 0;
}

.game-logo__killer {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  color: rgba(245, 229, 183, 0.86);
  background: none;
  font-size: 24px;
  line-height: 0.95;
  letter-spacing: 0.22em;
  text-indent: 0;
  text-shadow:
    0 1px 0 rgba(84, 22, 17, 0.44),
    0 0 8px rgba(240, 185, 77, 0.18);
  box-shadow: none;
  clip-path: none;
  -webkit-text-stroke: 0;
}

.game-logo__kosmonauts {
  margin-top: 7px;
  color: #fff2bd;
  font-family: var(--font-display);
  font-size: 58px;
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-indent: 0;
  white-space: nowrap;
  text-shadow:
    0 2px 0 rgba(84, 22, 17, 0.58),
    0 0 14px rgba(240, 185, 77, 0.2);
  -webkit-text-stroke: 0;
}

.game-logo__from {
  width: auto;
  margin-top: 11px;
  padding: 4px 22px 3px;
  color: var(--kk-teal, #36e2cf);
  background: rgba(4, 13, 14, 0.78);
  border: 1px solid rgba(54, 226, 207, 0.42);
  font-size: 13px;
  line-height: 1;
  box-shadow:
    0 0 14px rgba(54, 226, 207, 0.16),
    inset 0 0 0 1px rgba(240, 185, 77, 0.12);
}

.game-logo__mars {
  margin-top: 8px;
  color: #ef3e30;
  font-family: var(--font-display);
  font-size: 51px;
  line-height: 0.94;
  letter-spacing: 0.06em;
  text-indent: 0;
  text-shadow:
    0 1px 0 rgba(255, 225, 172, 0.24),
    0 2px 0 rgba(76, 17, 14, 0.5),
    0 0 12px rgba(235, 62, 48, 0.24);
  -webkit-text-stroke: 0;
}

.title-screen__strapline {
  max-width: 620px;
  margin: 14px 0 0;
  padding: 8px 14px;
  border: 1px solid rgba(215, 170, 76, 0.36);
  color: rgba(252, 228, 181, 0.86);
  background: rgba(20, 13, 9, 0.44);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.title-menu {
  display: grid;
  gap: 4px;
  width: 280px;
  padding: 14px 18px;
  border: 2px solid rgba(224, 183, 88, 0.55);
  border-radius: 8px 8px 18px 8px;
  background:
    radial-gradient(circle at 20% 0%, rgba(174, 81, 42, 0.24), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255, 220, 148, 0.05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(35, 31, 24, 0.94), rgba(8, 13, 12, 0.96));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.09),
    inset 0 -8px rgba(98, 45, 23, 0.22);
}

.title-menu__button {
  min-height: 42px;
  padding: 9px 14px 8px;
  border: 1px solid rgba(224, 183, 88, 0.36);
  border-radius: 6px 2px 6px 2px;
  color: rgba(247, 232, 196, 0.84);
  background:
    linear-gradient(90deg, rgba(180, 78, 38, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(54, 56, 47, 0.84), rgba(15, 21, 19, 0.9));
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.title-menu__button--primary {
  min-height: 48px;
  border-color: #e0b54d;
  color: #fff0c9;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 222, 137, 0.26), transparent 20%),
    linear-gradient(180deg, rgba(91, 78, 49, 0.98), rgba(28, 31, 24, 0.98));
  font-size: 14px;
}

.title-menu__button--toggle {
  min-height: 34px;
  color: rgba(143, 214, 201, 0.86);
  font-size: 10px;
}

.title-menu__button--toggle[aria-pressed="false"] {
  border-color: rgba(224, 183, 88, 0.5);
  color: rgba(245, 212, 129, 0.9);
  background:
    linear-gradient(90deg, rgba(139, 52, 38, 0.24), transparent 30%),
    linear-gradient(180deg, rgba(54, 38, 34, 0.9), rgba(16, 18, 17, 0.94));
}

.title-menu__button:hover {
  border-color: #f1d17c;
  color: #fff6dc;
  background:
    linear-gradient(90deg, rgba(211, 91, 44, 0.24), transparent 30%),
    linear-gradient(180deg, rgba(78, 76, 58, 0.98), rgba(24, 31, 29, 0.98));
  transform: translateY(-2px);
}

.title-menu__button:active {
  transform: translateY(1px);
}

.title-menu__button[hidden] {
  display: none;
}

.mobile-install {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  width: 480px;
  max-width: calc(var(--game-width) - 160px);
  padding: 26px 30px 28px;
  border: 2px solid rgba(224, 183, 88, 0.68);
  border-radius: 8px 8px 18px 8px;
  color: #f5e5b7;
  background:
    repeating-linear-gradient(0deg, rgba(255, 220, 148, 0.05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(35, 31, 24, 0.96), rgba(8, 13, 12, 0.98));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.46),
    inset 0 1px rgba(255, 255, 255, 0.08);
  text-align: center;
  transform: translate(-50%, -50%);
}

.mobile-install[hidden] {
  display: none;
}

.mobile-install strong {
  display: block;
  margin-bottom: 12px;
  color: #f0c15e;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.mobile-install p {
  margin: 0;
  color: rgba(245, 229, 183, 0.86);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.035em;
  text-transform: none;
}

.mobile-install__action {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border: 1px solid rgba(241, 209, 124, 0.74);
  border-radius: 6px 2px 6px 2px;
  color: #1c1710;
  background:
    linear-gradient(180deg, #f4cf73, #b9822d);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.38),
    0 6px 18px rgba(0, 0, 0, 0.36);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.045em;
  cursor: pointer;
}

.mobile-install__action[hidden] {
  display: none;
}

.mobile-install__steps {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  color: rgba(245, 229, 183, 0.9);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.035em;
  list-style: none;
  counter-reset: install-step;
  text-align: left;
}

.mobile-install__steps:empty {
  display: none;
}

.mobile-install__steps li {
  position: relative;
  min-height: 28px;
  padding: 6px 8px 6px 38px;
  border: 1px solid rgba(224, 183, 88, 0.24);
  background: rgba(8, 13, 12, 0.48);
  counter-increment: install-step;
  text-transform: none;
}

.mobile-install__steps li::before {
  content: counter(install-step);
  position: absolute;
  left: 9px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(240, 193, 94, 0.58);
  color: #f0c15e;
  font-family: var(--font-display);
  font-size: 10px;
  transform: translateY(-50%);
}

.mobile-home-menu {
  display: none;
}

.mobile-qr-scan {
  display: none;
}

.is-mobile-web-gated .title-screen__content {
  opacity: 0.34;
  pointer-events: none;
  filter: saturate(0.7);
}

.is-mobile-web-gated .title-screen::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(168, 74, 36, 0.02) 0 22%, rgba(7, 10, 9, 0.34) 54%, rgba(3, 5, 5, 0.88) 100%),
    linear-gradient(90deg, rgba(4, 7, 6, 0.76), transparent 30% 70%, rgba(4, 7, 6, 0.76)),
    repeating-linear-gradient(90deg, rgba(224, 166, 76, 0.07) 0 1px, transparent 1px 64px);
}

.title-screen__footer {
  position: absolute;
  bottom: 20px;
  margin: 0;
  color: rgba(243, 226, 190, 0.62);
  font-size: 10px;
  letter-spacing: 0.13em;
}

@media (pointer: coarse) and (orientation: landscape), (orientation: landscape) and (max-height: 760px) {
  .title-screen__content {
    grid-template-columns: 700px 330px;
    gap: 24px;
    width: 1054px;
    margin-top: 0;
  }

  .game-logo {
    width: 700px;
    padding: 16px 24px 18px;
  }

  .game-logo::before {
    top: 1px;
  }

  .game-logo::after {
    bottom: 5px;
  }

  .game-logo__killer {
    font-size: 42px;
  }

  .game-logo__kosmonauts {
    margin-top: 5px;
    font-size: 62px;
  }

  .game-logo__from {
    margin-top: 8px;
    font-size: 16px;
  }

  .game-logo__mars {
    margin-top: 5px;
    font-size: 56px;
  }

  .title-screen__strapline {
    max-width: 640px;
    margin-top: 6px;
    font-size: 12px;
  }

  .title-menu {
    width: 330px;
    gap: 9px;
    padding: 12px 14px;
  }

  .title-menu__button {
    min-height: 48px;
    padding: 10px 12px 9px;
    font-size: 13px;
  }

  .title-menu__button--primary {
    min-height: 56px;
    font-size: 15px;
  }

  .title-screen__footer {
    bottom: 14px;
    font-size: 9px;
  }
}

.title-screen {
  --kk-bg-dark: #071111;
  --kk-panel: rgba(6, 16, 15, 0.86);
  --kk-panel-strong: rgba(4, 11, 11, 0.94);
  --kk-cream: #f2dfb0;
  --kk-muted-cream: #b9a982;
  --kk-brass: #b68a33;
  --kk-gold: #f0b94d;
  --kk-teal: #36e2cf;
  --kk-teal-muted: #5aa9a3;
  --kk-warning: #ff6242;
  --kk-border-soft: rgba(242, 223, 176, 0.28);
  --kk-border-gold: rgba(240, 185, 77, 0.85);
  --kk-ui-title-bg: url("assets/generated-art/ui/title-background/mars-canyon-title-bg-v1.jpg");
  --kk-ui-panel-frame: url("assets/generated-art/ui/shockframe/panel-frame-v1.png");
  --kk-ui-row: url("assets/generated-art/ui/shockframe/table-row-v1.png");
  --kk-ui-row-active: url("assets/generated-art/ui/shockframe/table-row-highlight-v1.png");
  display: block;
  width: max(var(--game-width), 100vw);
  height: var(--game-height);
  color: var(--kk-cream);
  background:
    radial-gradient(circle at 29% 52%, rgba(156, 51, 27, 0.09), transparent 34%),
    linear-gradient(90deg, rgba(48, 17, 10, 0.3), rgba(3, 8, 10, 0.08) 48%, rgba(3, 8, 10, 0.46)),
    linear-gradient(180deg, rgba(240, 185, 77, 0.04), rgba(18, 11, 8, 0.34)),
    var(--kk-ui-title-bg) center / cover no-repeat,
    #061114;
}

.title-screen::before,
.title-screen::after {
  display: none;
}

.title-screen__backdrop,
.title-screen__vignette,
.title-screen__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.title-screen__backdrop {
  z-index: 0;
  background:
    radial-gradient(circle at 30% 64%, rgba(33, 176, 164, 0.045), transparent 24%),
    linear-gradient(90deg, rgba(0, 5, 7, 0.58), rgba(5, 10, 10, 0.08) 34%, rgba(4, 7, 7, 0.1) 66%, rgba(0, 4, 5, 0.62)),
    linear-gradient(180deg, rgba(2, 4, 5, 0.1), rgba(45, 13, 6, 0.1) 56%, rgba(2, 4, 5, 0.62));
}

.title-screen__vignette {
  z-index: 1;
  background:
    radial-gradient(ellipse at 42% 44%, transparent 0 48%, rgba(0, 0, 0, 0.18) 76%, rgba(0, 0, 0, 0.6) 100%),
    radial-gradient(circle at 74% 62%, rgba(240, 185, 77, 0.045), transparent 26%);
}

.title-screen__vignette::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(54, 226, 207, 0.32);
  background:
    linear-gradient(90deg, rgba(240, 185, 77, 0.62), transparent 92px) top left / 210px 2px no-repeat,
    linear-gradient(270deg, rgba(54, 226, 207, 0.62), transparent 92px) top right / 210px 2px no-repeat,
    linear-gradient(90deg, rgba(54, 226, 207, 0.48), transparent 92px) bottom left / 210px 2px no-repeat,
    linear-gradient(270deg, rgba(240, 185, 77, 0.48), transparent 92px) bottom right / 210px 2px no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(240, 185, 77, 0.08),
    inset 0 0 46px rgba(54, 226, 207, 0.06),
    0 0 22px rgba(54, 226, 207, 0.08);
}

.title-screen__scanlines {
  z-index: 2;
  opacity: 0.2;
  background:
    linear-gradient(180deg, rgba(255, 238, 190, 0.1), transparent 28%, rgba(0, 0, 0, 0.16) 100%),
    radial-gradient(ellipse at 50% 52%, transparent 0 50%, rgba(0, 0, 0, 0.22) 100%);
  mix-blend-mode: overlay;
}

.title-screen__scanlines::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(54, 226, 207, 0.28);
  background:
    linear-gradient(90deg, rgba(240, 185, 77, 0.65), transparent 82px) top left / 190px 2px no-repeat,
    linear-gradient(270deg, rgba(54, 226, 207, 0.65), transparent 82px) top right / 190px 2px no-repeat,
    linear-gradient(90deg, rgba(54, 226, 207, 0.5), transparent 82px) bottom left / 190px 2px no-repeat,
    linear-gradient(270deg, rgba(240, 185, 77, 0.5), transparent 82px) bottom right / 190px 2px no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(240, 185, 77, 0.08),
    inset 0 0 46px rgba(54, 226, 207, 0.06),
    0 0 22px rgba(54, 226, 207, 0.08);
}

.title-screen__content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1120px);
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  justify-content: center;
  gap: 25.5px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 42px 76px;
  text-align: center;
}

.title-hero {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  padding-top: 0;
}

.title-screen .game-logo {
  width: min(468px, 50vw);
  padding: 5px 18px 8px;
  border: 0;
  background: none;
  box-shadow: none;
  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 12px rgba(240, 185, 77, 0.12));
}

.title-screen .game-logo--image {
  width: min(270px, 24.2775vw);
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  transform: translateY(68px);
  filter:
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 16px rgba(240, 185, 77, 0.12));
}

.title-screen .game-logo--image::before,
.title-screen .game-logo--image::after {
  display: none;
}

.title-screen .game-logo__image {
  display: block;
  width: 100%;
  height: auto;
}

.title-screen .game-logo__killer {
  font-size: 15px;
}

.title-screen .game-logo__kosmonauts {
  margin-top: 4px;
  font-size: clamp(31px, 3vw, 38px);
}

.title-screen .game-logo__from {
  margin-top: 8px;
  border-color: rgba(54, 226, 207, 0.42);
  color: var(--kk-teal);
  box-shadow:
    0 0 14px rgba(54, 226, 207, 0.16),
    inset 0 0 0 1px rgba(240, 185, 77, 0.12);
}

.title-screen .game-logo__mars {
  margin-top: 6px;
  font-size: 31px;
  letter-spacing: 0.055em;
}

.title-screen__strapline {
  display: none;
  position: relative;
  width: min(600px, 91%);
  max-width: none;
  min-height: 31px;
  margin: 13px 0 0;
  padding: 8px 34px 7px 32px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: rgba(255, 218, 122, 0.96);
  background:
    linear-gradient(90deg, rgba(71, 31, 16, 0.32), rgba(5, 12, 13, 0.82) 42%, rgba(5, 12, 13, 0.9)),
    var(--kk-ui-row) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(240, 185, 77, 0.12),
    inset 0 0 0 1px rgba(54, 226, 207, 0.09);
  font-size: 10px;
  letter-spacing: 0.085em;
  text-align: center;
}

.title-screen__strapline::before,
.title-screen__strapline::after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  place-items: center;
  pointer-events: none;
}

.title-screen__strapline::before {
  content: "";
  left: 12px;
  width: 4px;
  border-right: 0;
  background:
    linear-gradient(180deg, rgba(54, 226, 207, 0.8), rgba(240, 185, 77, 0.62));
  box-shadow: 0 0 10px rgba(54, 226, 207, 0.24);
}

.title-screen__strapline::after {
  content: "";
  right: 12px;
  width: 16px;
  background:
    linear-gradient(90deg, rgba(54, 226, 207, 0.72), transparent 3px) center left / 3px 18px no-repeat,
    linear-gradient(90deg, rgba(240, 185, 77, 0.72), transparent 3px) center right / 3px 18px no-repeat;
  opacity: 0.9;
}

.operation-panel {
  display: none;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  width: min(520px, 88%);
  margin-top: 0;
  padding: 13px 16px 13px;
  overflow: hidden;
  border: 1px solid rgba(54, 226, 207, 0.16);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(12, 36, 34, 0.52), rgba(5, 10, 10, 0.88)),
    linear-gradient(180deg, rgba(240, 185, 77, 0.08), transparent 44%, rgba(54, 226, 207, 0.07)),
    var(--kk-ui-row) center / 100% 100% no-repeat;
  background-blend-mode: normal, normal, screen;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(240, 185, 77, 0.08),
    0 0 18px rgba(54, 226, 207, 0.06);
}

.operation-panel::before,
.operation-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.operation-panel::before {
  inset: 0;
  border-left: 3px solid rgba(54, 226, 207, 0.66);
  border-right: 1px solid rgba(240, 185, 77, 0.26);
  background:
    linear-gradient(90deg, rgba(54, 226, 207, 0.16), transparent 84px),
    linear-gradient(180deg, rgba(240, 185, 77, 0.18), transparent 2px) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(54, 226, 207, 0.2), transparent 2px) bottom / 100% 1px no-repeat;
  opacity: 0.72;
}

.operation-panel::after {
  content: "";
  top: 8px;
  right: 12px;
  width: 42px;
  height: 2px;
  background:
    linear-gradient(90deg, rgba(240, 185, 77, 0.72), transparent);
  box-shadow: 0 0 10px rgba(240, 185, 77, 0.22);
  opacity: 1;
}

.operation-panel__title {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #ffe7a5;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-shadow: 0 0 8px rgba(240, 185, 77, 0.38);
}

.operation-panel__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(54, 226, 207, 0.86);
  background: rgba(54, 226, 207, 0.22);
  box-shadow: 0 0 10px rgba(54, 226, 207, 0.62);
}

.operation-panel__rows {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
}

.operation-panel__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  min-width: 0;
  color: rgba(245, 229, 183, 0.72);
  font-size: 9.5px;
  line-height: 1.18;
  letter-spacing: 0.04em;
  text-transform: none;
  text-shadow: 0 0 5px rgba(240, 185, 77, 0.16);
}

.operation-panel__row[data-icon="campaign"],
.operation-panel__row[data-icon="mission"],
.operation-panel__row[data-icon="confidence"] {
  grid-column: 1 / -1;
}

.operation-panel__row::before {
  color: rgba(54, 226, 207, 0.82);
  font-family: var(--font-display);
  font-size: 8px;
  text-align: center;
  text-shadow: 0 0 7px rgba(54, 226, 207, 0.55);
}

.operation-panel__row[data-icon="campaign"]::before { content: "C>"; }
.operation-panel__row[data-icon="mission"]::before { content: "M>"; }
.operation-panel__row[data-icon="cards"]::before { content: "D>"; }
.operation-panel__row[data-icon="funds"]::before { content: "$>"; }
.operation-panel__row[data-icon="confidence"]::before { content: "!>"; }

.operation-panel__row-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-panel__row strong {
  color: var(--kk-teal);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow:
    0 0 7px rgba(54, 226, 207, 0.56),
    0 0 18px rgba(54, 226, 207, 0.22);
}

.operation-panel__row .is-warning {
  color: #ff8069;
  text-shadow: 0 0 8px rgba(255, 93, 63, 0.46);
}

.operation-progress {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(118px, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 1px;
  padding: 7px 0 0;
  border-top: 1px solid rgba(240, 185, 77, 0.26);
  background:
    linear-gradient(90deg, rgba(4, 10, 11, 0.78), rgba(4, 10, 11, 0.84)),
    var(--kk-ui-row) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
}

.operation-progress__label {
  color: rgba(245, 229, 183, 0.86);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-shadow: 0 0 7px rgba(240, 185, 77, 0.28);
}

.operation-progress__blocks {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}

.operation-progress__blocks span {
  height: 9px;
  border: 1px solid rgba(54, 226, 207, 0.24);
  background: rgba(54, 226, 207, 0.05);
  box-shadow: inset 0 0 8px rgba(7, 18, 32, 0.72);
}

.operation-progress__blocks span.is-filled {
  border-color: rgba(240, 185, 77, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 231, 165, 0.96), rgba(240, 185, 77, 0.86));
  box-shadow:
    0 0 9px rgba(240, 185, 77, 0.48),
    inset 0 1px rgba(255, 255, 255, 0.38);
}

.operation-progress__value {
  color: var(--kk-teal);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-align: right;
  text-shadow:
    0 0 7px rgba(54, 226, 207, 0.62),
    0 0 18px rgba(54, 226, 207, 0.24);
}

.title-primary-actions {
  display: none;
  justify-items: center;
  margin-top: 14px;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-width: 330px;
  height: 46px;
  padding: 0 30px;
  border: 1px solid var(--kk-border-gold);
  border-radius: 5px;
  color: var(--kk-gold);
  background:
    linear-gradient(180deg, rgba(44, 33, 15, 0.95), rgba(11, 13, 11, 0.96));
  box-shadow:
    inset 0 0 18px rgba(240, 185, 77, 0.12),
    0 0 16px rgba(240, 185, 77, 0.18);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.primary-action[hidden] {
  display: none;
}

.primary-action:hover,
.primary-action:focus-visible {
  color: #ffe7a5;
  background:
    linear-gradient(180deg, rgba(66, 48, 20, 0.98), rgba(18, 15, 9, 0.98));
  box-shadow:
    inset 0 0 22px rgba(240, 185, 77, 0.18),
    0 0 24px rgba(240, 185, 77, 0.32);
  outline: 2px solid rgba(240, 185, 77, 0.34);
  outline-offset: 3px;
  transform: translateY(-1px);
}

.primary-action:active {
  transform: translateY(1px);
}

.submenu-screen {
  overflow: hidden;
  color: #f5e5b7;
  background:
    linear-gradient(180deg, rgba(6, 10, 12, 0.48), rgba(18, 12, 8, 0.62)),
    var(--menu-bg) center 50% / cover no-repeat,
    #6b3828;
  isolation: isolate;
}

.submenu-screen::before,
.submenu-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.submenu-screen::before {
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(158, 85, 44, 0.08), rgba(4, 7, 8, 0.72) 92%),
    linear-gradient(90deg, rgba(4, 7, 8, 0.45), transparent 20% 80%, rgba(4, 7, 8, 0.45));
}

.submenu-screen::after {
  z-index: 5;
  inset: 0;
  opacity: 0.1;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.24) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}

body .submenu-screen :is(h1, h2, h3) {
  font-family: var(--font-title);
  font-weight: 400;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.submenu-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  align-items: center;
  min-height: 76px;
  padding: 0 40px;
  border-bottom: 1px solid rgba(224, 183, 88, 0.42);
  background: linear-gradient(180deg, rgba(10, 14, 15, 0.96), rgba(5, 8, 9, 0.93));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.submenu-header h1 {
  margin: 0;
  font-family: var(--font-title) !important;
  font-size: 24px;
  font-weight: 400 !important;
  letter-spacing: 0.16em;
  text-align: center;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.submenu-back {
  justify-self: start;
  min-width: 112px;
  padding: 11px 18px;
  border: 1px solid rgba(224, 183, 88, 0.52);
  color: #f3dfac;
  background: rgba(27, 34, 33, 0.88);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.submenu-back:hover,
.submenu-header__action:hover,
.deck-select select:hover,
.deck-faction-select select:hover {
  border-color: #efd079;
  color: #fff4d2;
}

.submenu-header__action {
  justify-self: end;
  min-width: 132px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid rgba(117, 213, 205, 0.5);
  color: #d7fff6;
  background:
    linear-gradient(180deg, rgba(117, 213, 205, 0.12), transparent),
    rgba(14, 31, 30, 0.9);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.submenu-header__action:disabled {
  opacity: 0.55;
  cursor: wait;
}

.shop-card__media .card-image--support,
.deck-card__art .card-image--support {
  object-position: center;
  transform: none;
  transform-origin: center 58%;
  background: #050b0d;
}

.shop-card__media .card-image--support {
  object-fit: contain;
}

.deck-card__art .card-image--support {
  object-fit: cover;
}

.shop-card--unit .shop-card__media img,
.deck-card--unit .deck-card__art img,
.deck-card--hero .deck-card__art img {
  object-fit: contain;
  object-position: center;
  padding: 6px;
  background:
    radial-gradient(circle at 50% 55%, rgba(56, 239, 225, 0.12), transparent 56%),
    #061013;
}

.deck-card--unit .deck-card__art img:not(.card-image--support),
.deck-card--hero .deck-card__art img:not(.card-image--support) {
  transform: translateY(-10%) scale(1.12);
}

.deck-card__art img.card-image--unit-sprite {
  align-self: start;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center top;
  padding: 4px;
  transform: none;
  background:
    radial-gradient(circle at 50% 60%, rgba(245, 77, 205, 0.16), transparent 44%),
    radial-gradient(circle at 50% 74%, rgba(240, 185, 77, 0.16), transparent 52%),
    #050b0d;
}

.submenu-header__titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 0;
}

.submenu-header__titlebar h1 {
  flex: 0 0 auto;
}


.dev-tools-scratch {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(1040px, calc(100% - 80px));
  margin: 96px auto 0;
}

.dev-tools-scratch__button {
  min-height: 168px;
  padding: 22px;
  border: 1px solid rgba(117, 213, 205, 0.38);
  color: #f5e5b7;
  background:
    linear-gradient(135deg, rgba(117, 213, 205, 0.14), transparent 52%),
    rgba(7, 13, 14, 0.9);
  font-family: var(--font-display);
  text-align: left;
  cursor: pointer;
}

.dev-tools-scratch__button:hover,
.dev-tools-scratch__button:focus-visible {
  border-color: rgba(245, 229, 183, 0.78);
  color: #fff5d2;
}

.dev-tools-scratch__button strong {
  display: block;
  margin-bottom: 12px;
  color: #75d5cd;
  font-size: 20px;
  letter-spacing: 0.08em;
}

.dev-tools-scratch__button small {
  display: block;
  color: rgba(245, 229, 183, 0.72);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
}

.dev-tools-scratch__button.is-active {
  border-color: rgba(224, 192, 120, 0.7);
  background:
    linear-gradient(135deg, rgba(224, 192, 120, 0.18), transparent 54%),
    rgba(18, 15, 9, 0.94);
}

/* HUD — one full-width command bar, divided into sections */
.hud {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: calc(var(--fieldworks-w) + (var(--rail-w) * 2) + (var(--stage-gap) * 2)) minmax(0, 1fr);
  column-gap: var(--stage-gap);
  align-items: stretch;
  width: calc(100% + (var(--game-bleed-x) * 2));
  margin-left: calc(-1 * var(--game-bleed-x));
  min-height: 52px;
  padding: 0 14px 0 10px;
  color: #fff;
  background: transparent;
}

.hud::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #101317 0%, #06090c 58%, #030506 100%);
  border-bottom: 1px solid rgba(224, 192, 120, 0.28);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px rgba(0, 0, 0, 0.7),
    0 3px 14px rgba(0, 0, 0, 0.4);
}

.hud__cluster,
.hud__section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud__cluster {
  min-width: 0;
}

.hud__cluster--left {
  grid-column: 1;
  justify-content: flex-start;
  gap: 10px;
}

.hud__board {
  position: relative;
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hud__cluster--board-left {
  grid-column: 1;
  justify-self: start;
  justify-content: flex-start;
  gap: 10px;
}

.hud__cluster--right {
  grid-column: 3;
  justify-self: end;
  justify-content: flex-end;
  gap: 10px;
}

.hud__section {
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  background: rgba(255, 255, 255, 0.018);
}

.hud__menu {
  flex: 0 0 auto;
  align-self: center;
  min-width: 92px;
  min-height: 34px;
  justify-content: center;
  padding: 0 18px;
  border-color: rgba(224, 192, 120, 0.34);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(224, 183, 88, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(20, 26, 25, 0.78), rgba(6, 10, 10, 0.84));
  color: #e0c074;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px rgba(0, 0, 0, 0.56);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.hud__menu:hover {
  background:
    linear-gradient(135deg, rgba(224, 183, 88, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(30, 36, 34, 0.86), rgba(9, 13, 13, 0.9));
  color: #f2d488;
}

.hud__menu--fullscreen {
  min-width: 66px;
  padding-inline: 12px;
  border-color: rgba(117, 213, 205, 0.34);
  color: #9ef2e6;
}

.hud__menu--fullscreen[aria-pressed="true"] {
  border-color: rgba(240, 185, 77, 0.72);
  color: #ffe0a0;
  background:
    linear-gradient(135deg, rgba(240, 185, 77, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(34, 28, 17, 0.88), rgba(12, 10, 7, 0.92));
}

.hud__menu:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.hud__section--score {
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding-inline: 12px;
}

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

.hud__section--score .hud__val {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  color: #f0cc75;
  font-size: 18px;
  text-align: left;
  text-shadow: 0 0 8px rgba(224, 183, 88, 0.28);
  transform-style: preserve-3d;
}

.hud__section--score .hud__val.is-changing {
  animation: score-split-flap 0.72s cubic-bezier(0.2, 0.76, 0.18, 1);
}

.hud__section--score .hud__val::before {
  content: attr(data-previous);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(245, 229, 183, 0.42);
  opacity: 0;
  transform-origin: center top;
  pointer-events: none;
}

.hud__section--score .hud__val.is-changing::before {
  animation: score-old-flap 0.32s ease-out;
}

@keyframes score-split-flap {
  0% {
    opacity: 0.46;
    transform: translateY(8px) rotateX(72deg);
    filter: blur(1.5px);
  }

  32% {
    opacity: 0.82;
    transform: translateY(-2px) rotateX(-12deg);
    filter: blur(0.5px);
  }

  58% {
    opacity: 1;
    transform: translateY(0) rotateX(7deg);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0);
    filter: blur(0);
  }
}

@keyframes score-old-flap {
  0% {
    opacity: 0.65;
    transform: translateY(0) rotateX(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-12px) rotateX(-82deg);
  }
}

.score-multiplier {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(224, 192, 120, 0.26);
  color: rgba(245, 229, 183, 0.78);
  background: rgba(8, 12, 12, 0.32);
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
}

.score-multiplier.is-boosted {
  border-color: rgba(255, 217, 119, 0.62);
  color: #ffd86b;
  background:
    linear-gradient(180deg, rgba(87, 63, 21, 0.72), rgba(20, 18, 12, 0.82));
  box-shadow: 0 0 8px rgba(255, 211, 91, 0.24);
}

.hud__section--discard {
  grid-column: 1;
  justify-self: start;
  min-width: 116px;
  justify-content: center;
  gap: 9px;
  border-color: rgba(224, 192, 120, 0.12);
  background:
    linear-gradient(135deg, rgba(224, 183, 88, 0.08), transparent 48%),
    rgba(8, 13, 13, 0.34);
}

.hud__section--discard.is-empty {
  opacity: 0.56;
}

.hud__section--discard .hud__val {
  min-width: 31px;
  text-align: center;
  color: #e8c56f;
}

.score-bar {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  height: auto;
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.score-bar::before,
.score-bar__fill {
  display: none;
}

.score-bar__star {
  position: relative;
  top: auto;
  left: auto;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 1px solid rgba(224, 192, 120, 0.48);
  border-radius: 50%;
  background: rgba(8, 12, 12, 0.36);
  transform: none;
  color: transparent;
  font-style: normal;
  text-align: center;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.35);
  text-shadow: none;
}

.score-bar__star::before {
  content: "";
  width: 14px;
  height: 14px;
  background: rgba(224, 192, 120, 0.72);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
}

.score-bar__star.is-lit {
  border-color: rgba(255, 217, 119, 0.78);
  color: #ffd86b;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 223, 124, 0.28), transparent 58%),
    linear-gradient(180deg, rgba(87, 63, 21, 0.88), rgba(20, 18, 12, 0.9));
  filter: drop-shadow(0 0 4px rgba(255, 211, 91, 0.42));
}

.score-bar__star.is-lit::before {
  background: #ffd86b;
}

.hud__section--base {
  min-width: 162px;
  justify-content: center;
}

.hud__label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hud__val {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.hud__val--fraction {
  padding: 2px 6px;
  border: 1px solid rgba(224, 192, 120, 0.3);
  border-radius: 2px;
  background: rgba(4, 8, 8, 0.46);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.hud__section--cannon {
  min-width: 0;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.hud__section--end-turn {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 148px;
  height: 38px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  border-color: transparent;
  background: transparent;
  transform: translate(-50%, -50%);
}

.hud__cannon-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid rgba(218, 176, 82, 0.24);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(218, 176, 82, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(31, 27, 20, 0.84), rgba(8, 8, 7, 0.92));
  color: #f2dfad;
  cursor: default;
  user-select: none;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px rgba(0, 0, 0, 0.58);
}

.hud__cannon-btn .hud__val {
  min-width: 18px;
  text-align: center;
  color: #f0c66b;
  text-shadow: 0 0 8px rgba(218, 176, 82, 0.28);
}

.hud__cannon-btn .cannon__bolt {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(236, 197, 99, 0.44);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 36%, #fff1c9 0 12%, #d9a53d 13% 28%, transparent 29%),
    conic-gradient(from 20deg, #282015, #9a7730, #2d2415, #d3a84d, #282015);
  box-shadow:
    inset 0 0 0 3px rgba(14, 12, 8, 0.78),
    inset 0 0 8px rgba(255, 218, 124, 0.24),
    0 0 7px rgba(218, 176, 82, 0.28);
}

.hud__cannon-btn .cannon__bolt::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #ffeab1;
  box-shadow: 0 0 7px rgba(246, 203, 92, 0.68);
}

.hud__cannon-btn.is-offline {
  opacity: 0.45;
}

.hud__cannon-btn.is-armed .cannon__bolt {
  border-color: rgba(255, 226, 145, 0.82);
  box-shadow:
    inset 0 0 0 3px rgba(14, 12, 8, 0.74),
    inset 0 0 10px rgba(255, 218, 124, 0.4),
    0 0 0 2px rgba(218, 176, 82, 0.22),
    0 0 12px rgba(218, 176, 82, 0.58);
}

.hud__cannon-btn.is-charged .hud__val {
  padding: 0 5px;
  border: 1px solid rgba(218, 176, 82, 0.56);
  border-radius: 2px;
  background: linear-gradient(180deg, #f3cf76, #ad7b2e);
  color: #21170a;
  text-shadow: none;
}

.hud__section--turn .hud__val {
  color: #e7d9b8;
}

.hud__section--turn {
  min-width: 78px;
  justify-content: center;
}

.hud__section--doctrine {
  min-width: 104px;
  justify-content: center;
  border-color: rgba(117, 213, 205, 0.2);
}

.hud__section--doctrine.is-armed .hud__val {
  color: #a9f3e8;
}

.hud__section--doctrine.is-spent .hud__val,
.hud__section--doctrine.is-locked .hud__val {
  color: rgba(245, 229, 183, 0.54);
}

.fieldwork-bays {
  display: grid;
  grid-template-columns: repeat(2, 86px);
  gap: 10px;
  align-items: center;
  justify-content: end;
  pointer-events: auto;
}

.fieldwork-bays[hidden] {
  display: none;
}

.fieldwork-bay {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  width: 86px;
  min-height: 72px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(245, 229, 183, 0.78);
  background: transparent;
  font-family: var(--font-display);
  text-align: center;
  cursor: default;
  overflow: visible;
}

.fieldwork-bay--crate {
  color: #f4d67f;
  cursor: pointer;
  pointer-events: auto;
}

.fieldwork-bay--crate:hover,
.fieldwork-bay--crate:focus-visible {
  color: #d7fff6;
  outline: 0;
}

.fieldwork-bay--empty,
.fieldwork-bay--locked {
  opacity: 0.72;
}

.fieldwork-bay__image {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 86px;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.32));
  pointer-events: none;
  user-select: none;
}

.fieldwork-bay__crate-image {
  position: absolute;
  left: 50%;
  bottom: 23px;
  z-index: 2;
  width: 78px;
  height: auto;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 12px 8px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 2px rgba(224, 183, 88, 0.18));
  pointer-events: none;
  transition: filter 0.14s ease, transform 0.14s ease;
  user-select: none;
}

.fieldwork-bay--crate:hover .fieldwork-bay__crate-image,
.fieldwork-bay--crate:focus-visible .fieldwork-bay__crate-image {
  transform: translate(-50%, -2px);
  filter:
    drop-shadow(0 11px 8px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 8px rgba(117, 213, 205, 0.3));
}

.fieldwork-bay--crate:hover .fieldwork-bay__image,
.fieldwork-bay--crate:focus-visible .fieldwork-bay__image {
  filter:
    drop-shadow(0 7px 7px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 7px rgba(117, 213, 205, 0.22));
}

.fieldwork-bay--locked .fieldwork-bay__image {
  filter: grayscale(0.5) brightness(0.66) drop-shadow(0 7px 7px rgba(0, 0, 0, 0.32));
}

.fieldwork-bay__tag {
  color: rgba(117, 213, 205, 0.76);
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0;
}

.fieldwork-bay__glyph,
.fieldwork-bay__tag,
.fieldwork-bay__name {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.fieldwork-board-tokens {
  pointer-events: auto;
}

.fieldwork-token {
  cursor: default;
  outline: none;
}

.fieldwork-token--crate {
  cursor: pointer;
}

.fieldwork-token__hitbox {
  fill: rgba(0, 0, 0, 0.001);
  stroke: none;
  pointer-events: all;
}

.fieldwork-token__bay,
.fieldwork-token__crate,
.fieldwork-token__refresh-pulse {
  pointer-events: none;
  user-select: none;
}

.fieldwork-token__crate {
  transform-box: fill-box;
  transform-origin: center;
}

.fieldwork-token__bay {
  opacity: 0.98;
  filter:
    drop-shadow(0 7px 5px rgba(18, 16, 13, 0.34))
    drop-shadow(0 0 2px rgba(117, 213, 205, 0.14));
}

.fieldwork-token__crate {
  filter:
    drop-shadow(0 11px 7px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 2px rgba(224, 183, 88, 0.18));
  transition: filter 0.14s ease, transform 0.14s ease;
}

.fieldwork-token__refresh-pulse {
  fill: rgba(201, 28, 34, 0.08);
  opacity: 0;
  stroke: rgba(255, 66, 69, 0.92);
  stroke-width: 2.25;
  filter: drop-shadow(0 0 7px rgba(255, 35, 47, 0.64));
}

.fieldwork-token--empty .fieldwork-token__bay,
.fieldwork-token--locked .fieldwork-token__bay {
  opacity: 0.78;
}

.fieldwork-token--locked .fieldwork-token__bay {
  filter: grayscale(0.5) brightness(0.7) drop-shadow(0 7px 5px rgba(18, 16, 13, 0.34));
}

.fieldwork-token--crate:hover .fieldwork-token__crate,
.fieldwork-token--crate:focus .fieldwork-token__crate {
  transform: translateY(-2px);
  filter:
    drop-shadow(0 11px 7px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 8px rgba(117, 213, 205, 0.32));
}

.fieldwork-token--crate:hover .fieldwork-token__bay,
.fieldwork-token--crate:focus .fieldwork-token__bay {
  filter:
    drop-shadow(0 7px 5px rgba(18, 16, 13, 0.36))
    drop-shadow(0 0 7px rgba(117, 213, 205, 0.24));
}

.fieldwork-token--refreshed .fieldwork-token__crate {
  animation: fieldwork-token-arrive 0.28s ease-out both;
  animation-delay: var(--fieldwork-refresh-delay, 0ms);
}

.fieldwork-token--refreshed .fieldwork-token__refresh-pulse {
  animation: fieldwork-board-refresh-red-pulse 0.72s ease-out 3;
  animation-delay: var(--fieldwork-refresh-delay, 0ms);
}

/* Battlefield */
.stage {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: var(--rail-w) var(--rail-w) minmax(0, 1fr);
  grid-template-areas: "support units board";
  column-gap: var(--stage-gap);
  align-items: center;
  min-height: 0;
  padding: 0 14px 0 10px;
}

.board-wrap {
  grid-area: board;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 0;
  min-height: 0;
}

.board-frame {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 52.5%;
  width: min(1220px, 100%);
  aspect-ratio: 1403 / 1001;
  transform: translateY(-50%);
}

.board-frame::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 5%;
  height: 16%;
  border-radius: 50%;
  background: rgba(49, 61, 64, 0.25);
  filter: blur(22px);
  transform: translateY(18%);
  z-index: 0;
}

#board {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  outline: none;
  touch-action: manipulation;
}

#board:focus-visible {
  outline: 2px solid rgba(143, 214, 201, 0.58);
  outline-offset: -8px;
}

.poisoned-quadrant {
  pointer-events: none;
}

.poisoned-quadrant__cell {
  fill: rgba(117, 132, 34, 0.34);
  stroke: rgba(196, 211, 74, 0.72);
  stroke-width: 1.1;
  stroke-dasharray: 2.5 3.5;
  filter: drop-shadow(0 0 5px rgba(138, 154, 41, 0.58));
  animation: poisoned-quadrant-breathe 1.8s ease-in-out infinite alternate;
}

.poisoned-quadrant__label-bg {
  fill: rgba(25, 31, 10, 0.92);
  stroke: rgba(211, 221, 93, 0.86);
  stroke-width: 1;
}

.poisoned-quadrant__label-text {
  fill: #f0efb0;
  font: 700 8px var(--font-ui);
  letter-spacing: 0.8px;
  paint-order: stroke;
  stroke: rgba(12, 16, 5, 0.85);
  stroke-width: 0.6px;
}

@keyframes poisoned-quadrant-breathe {
  from { fill-opacity: 0.58; stroke-opacity: 0.68; }
  to { fill-opacity: 1; stroke-opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .poisoned-quadrant__cell { animation: none; }
}

.board-skin {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 22px 28px rgba(17, 20, 18, 0.34));
}

.board-frame--skin #board {
  z-index: 2;
  opacity: 1;
}

.tutorial-panel {
  position: absolute;
  z-index: 5;
  left: 5.8%;
  top: 7.5%;
  width: min(285px, 32%);
  padding: 12px 14px 11px;
  border: 1px solid rgba(224, 192, 120, 0.5);
  border-radius: 4px;
  color: rgba(250, 244, 226, 0.94);
  background:
    linear-gradient(180deg, rgba(21, 27, 25, 0.9), rgba(7, 11, 11, 0.86));
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.tutorial-panel[hidden] {
  display: none;
}

.tutorial-spotlight {
  position: fixed;
  z-index: 70;
  inset: 0;
  pointer-events: auto;
  color: rgba(250, 244, 226, 0.94);
  background: rgba(0, 0, 0, 0.001);
  font-family: var(--font-ui);
  text-transform: uppercase;
}

.tutorial-spotlight--winSkirmish,
.tutorial-spotlight--tourComplete,
.tutorial-spotlight--fastEnemy,
.tutorial-spotlight--aircraftIntro,
.tutorial-spotlight--ionIntro,
.tutorial-spotlight--heroIntro,
.tutorial-spotlight--shieldIntro,
.tutorial-spotlight--repairIntro,
.tutorial-spotlight--lanePriority,
.tutorial-spotlight--rankIntro,
.tutorial-spotlight--closeRange,
.tutorial-spotlight--combinedFire,
.tutorial-spotlight--capstoneIntro {
  z-index: 75;
  display: grid;
  place-items: center;
  padding: max(22px, var(--safe-top)) max(22px, var(--safe-right)) max(22px, var(--safe-bottom)) max(22px, var(--safe-left));
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(4, 8, 9, 0.72), rgba(4, 8, 9, 0.88)),
    repeating-linear-gradient(0deg, rgba(224, 183, 88, 0.08) 0, rgba(224, 183, 88, 0.08) 1px, transparent 1px, transparent 18px);
}

.tutorial-spotlight__shade {
  position: fixed;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 8, 9, 0.64), rgba(4, 8, 9, 0.82)),
    repeating-linear-gradient(0deg, rgba(224, 183, 88, 0.055) 0, rgba(224, 183, 88, 0.055) 1px, transparent 1px, transparent 18px);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
    linear-gradient(#000 0 0) var(--spotlight-x) var(--spotlight-y) / var(--spotlight-w) var(--spotlight-h) no-repeat;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat,
    linear-gradient(#000 0 0) var(--spotlight-x) var(--spotlight-y) / var(--spotlight-w) var(--spotlight-h) no-repeat;
  mask-composite: exclude;
}

.tutorial-spotlight__shade-svg {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tutorial-spotlight__shade-fill {
  fill: rgba(4, 8, 9, 0.76);
}

.tutorial-spotlight__blocker {
  position: fixed;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, 0.001);
  cursor: default;
}

.tutorial-spotlight__modal {
  position: relative;
  z-index: 4;
  width: min(680px, 94vw);
  padding: 24px 26px 22px;
  border: 1px solid rgba(224, 183, 88, 0.56);
  background:
    linear-gradient(180deg, rgba(28, 35, 30, 0.96), rgba(10, 14, 14, 0.98)),
    radial-gradient(circle at 80% 0%, rgba(224, 183, 88, 0.12), transparent 42%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 238, 176, 0.12);
}

.tutorial-spotlight__modal-title {
  margin: 0 0 12px;
  color: #f4d67f;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.tutorial-spotlight__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 22px;
}

.tutorial-spotlight__actions > .tutorial-spotlight__action,
.tutorial-spotlight__controls > .tutorial-spotlight__action {
  margin-left: auto;
}

.tutorial-spotlight__action {
  min-height: 40px;
  min-width: 210px;
  padding: 0 18px;
  border: 1px solid rgba(224, 183, 88, 0.5);
  color: #251b0b;
  background: linear-gradient(180deg, #f4d67f, #b77f2d);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.tutorial-spotlight--rangeIntro .tutorial-spotlight__action,
.tutorial-spotlight--unitsIntro .tutorial-spotlight__action,
.tutorial-spotlight--enemyContact .tutorial-spotlight__action {
  color: #1a1206;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-shadow: 0 1px 0 rgba(255, 242, 192, 0.42);
}

.tutorial-spotlight__pass {
  position: fixed;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.tutorial-spotlight__pass:focus-visible {
  outline: 2px solid rgba(142, 232, 221, 0.86);
  outline-offset: 2px;
}

.tutorial-spotlight__ring {
  position: fixed;
  z-index: 3;
  border: 2px solid rgba(244, 214, 127, 0.92);
  border-radius: 9px;
  background: rgba(244, 214, 127, 0.035);
  box-shadow:
    0 0 0 1px rgba(8, 12, 12, 0.68),
    0 0 28px rgba(244, 214, 127, 0.46),
    inset 0 0 22px rgba(244, 214, 127, 0.12);
  pointer-events: none;
}

.tutorial-spotlight__ring--marine {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 0 5px rgba(244, 214, 127, 0.54))
    drop-shadow(0 0 14px rgba(244, 214, 127, 0.28));
}

.tutorial-spotlight__marine-silhouette {
  fill: rgba(244, 214, 127, 0.045);
  stroke: rgba(244, 214, 127, 0.94);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.tutorial-spotlight__ring--discardSwap {
  border-radius: 11px;
  box-shadow:
    0 0 0 1px rgba(8, 12, 12, 0.68),
    0 0 22px rgba(244, 214, 127, 0.42),
  inset 0 0 16px rgba(244, 214, 127, 0.1);
}

.tutorial-spotlight__ring--range1Confirm,
.tutorial-spotlight__ring--range2Confirm,
.tutorial-spotlight__ring--range3Confirm {
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(8, 12, 12, 0.78),
    0 0 18px rgba(244, 214, 127, 0.42);
}

.tutorial-spotlight__panel {
  position: fixed;
  z-index: 4;
  padding: 15px 17px 15px;
  border: 1px solid rgba(224, 183, 88, 0.56);
  background:
    linear-gradient(180deg, rgba(28, 35, 30, 0.96), rgba(10, 14, 14, 0.98)),
    radial-gradient(circle at 80% 0%, rgba(224, 183, 88, 0.12), transparent 42%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 238, 176, 0.12);
}

.is-campaign-one-terrain-targeting #recon-panel {
  visibility: hidden;
  pointer-events: none;
}

.is-campaign-one-terrain-confirming #recon-panel.recon-panel--engage {
  animation: none;
}

.tutorial-spotlight__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid rgba(224, 192, 120, 0.18);
}

.tutorial-spotlight__control {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(142, 232, 221, 0.34);
  color: rgba(218, 255, 249, 0.9);
  background: rgba(4, 16, 18, 0.62);
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.tutorial-spotlight__control--skip {
  order: -1;
  border-color: rgba(224, 183, 88, 0.42);
  color: #f7e3a6;
  background: rgba(68, 48, 18, 0.46);
}

.tutorial-spotlight__control:hover,
.tutorial-spotlight__control:focus-visible {
  border-color: rgba(244, 214, 127, 0.72);
  color: #fff2bd;
  outline: 2px solid rgba(244, 214, 127, 0.22);
  outline-offset: 2px;
}

.tutorial-spotlight__kicker {
  display: inline-block;
  color: #8ee8dd;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.tutorial-spotlight__step {
  float: right;
  margin: 0 0 10px 12px;
  padding: 5px 7px 4px;
  border: 1px solid rgba(142, 232, 221, 0.34);
  color: rgba(189, 246, 238, 0.92);
  background: rgba(4, 16, 18, 0.52);
  font-family: var(--font-display);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.tutorial-spotlight__title {
  clear: both;
  margin-top: 9px;
  color: #f4d67f;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 0.04em;
}

.tutorial-spotlight__body {
  margin-top: 0;
  color: rgba(250, 238, 207, 0.9);
  font-size: 15px;
  line-height: 1.42;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tutorial-spotlight__detail {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(224, 192, 120, 0.18);
  color: rgba(204, 226, 214, 0.84);
  text-transform: uppercase;
  white-space: pre-line;
}

.tutorial-spotlight__count {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 9px 5px;
  border: 1px solid rgba(224, 192, 120, 0.34);
  color: #f7e3a6;
  background: rgba(8, 12, 12, 0.54);
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.tutorial-panel__kicker {
  display: inline-block;
  color: #8ee8dd;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tutorial-panel__step {
  float: right;
  margin-left: 8px;
  padding: 3px 5px 2px;
  border: 1px solid rgba(142, 232, 221, 0.34);
  color: rgba(189, 246, 238, 0.92);
  background: rgba(4, 16, 18, 0.52);
  font-family: var(--font-display);
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.tutorial-panel__title {
  clear: both;
  margin-top: 4px;
  color: #f4d27a;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tutorial-panel__body {
  margin-top: 7px;
  color: rgba(245, 229, 183, 0.82);
  font-size: 11px;
  line-height: 1.28;
}

.tutorial-panel__detail {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(224, 192, 120, 0.18);
  color: rgba(204, 226, 214, 0.82);
}

.tutorial-panel__count {
  display: inline-block;
  margin-top: 9px;
  padding: 4px 7px 3px;
  border: 1px solid rgba(224, 192, 120, 0.34);
  color: #f7e3a6;
  background: rgba(8, 12, 12, 0.54);
  font-family: var(--font-display);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.08em;
}

@media (max-width: 760px) {
  .tutorial-panel {
    left: 3.5%;
    top: 6%;
    width: min(330px, 46%);
    padding: 10px 11px;
  }

  .tutorial-panel__title {
    font-size: 13px;
  }

  .tutorial-panel__body {
    font-size: 10px;
    line-height: 1.24;
  }
}

.cell-highlight {
  pointer-events: none;
  stroke-width: 1.5;
  filter: url("#soft-glow");
  mix-blend-mode: screen;
}

.cell-highlight--glow {
  stroke: none;
  filter: url("#soft-glow") blur(2px);
  opacity: 0.95;
}

.cell-highlight--target {
  fill: rgba(235, 178, 70, 0.16);
  stroke: rgba(242, 200, 102, 0.78);
}

.cell-highlight--affected {
  fill: rgba(255, 48, 58, 0.3);
  stroke: none;
}

.cell-highlight--support {
  fill: rgba(255, 58, 68, 0.26);
  stroke: none;
}

.terrain-placement-target {
  cursor: crosshair;
  pointer-events: auto;
  stroke-width: 1.6;
  filter: url("#soft-glow");
  transition: fill 120ms ease, stroke 120ms ease;
}

.terrain-placement-target--construct {
  fill: rgba(60, 224, 205, 0.13);
  stroke: rgba(91, 239, 219, 0.82);
}

.terrain-placement-target--demolish {
  fill: rgba(255, 126, 51, 0.22);
  stroke: rgba(255, 180, 78, 0.94);
}

.terrain-placement-target--trap {
  fill: rgba(176, 61, 43, 0.2);
  stroke: rgba(255, 137, 85, 0.92);
}

.terrain-placement-target:hover,
.terrain-placement-target:focus-visible {
  fill: rgba(255, 211, 105, 0.3);
  stroke: #fff1b8;
  outline: none;
}

.board-area-footprint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.board-area-footprint.is-preview {
  opacity: 1;
}

.board-area-footprint__cell {
  fill: rgba(255, 48, 58, 0.3);
  stroke: rgba(255, 211, 105, 0.9);
  stroke-width: 1.65;
  filter: url("#soft-glow");
  mix-blend-mode: screen;
}

.segment-target-preview {
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

.segment-target-preview.is-preview {
  opacity: 1;
}

.segment-target-preview__cell {
  fill: rgba(106, 0, 18, 0.22);
  stroke: rgba(255, 82, 92, 0.88);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: url("#soft-glow");
  mix-blend-mode: screen;
}

.segment-target-preview__reticle {
  color: #ff3348;
  filter:
    drop-shadow(0 0 1.2px rgba(33, 0, 4, 0.95))
    drop-shadow(0 0 3px rgba(255, 51, 72, 0.9));
  animation: segment-target-pulse 850ms ease-in-out infinite alternate;
}

.segment-target-preview__reticle-ring,
.segment-target-preview__reticle-cross {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.segment-target-preview__reticle-core {
  fill: #fff1cf;
  stroke: #ff3348;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

@keyframes segment-target-pulse {
  from {
    opacity: 0.58;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .segment-target-preview__reticle {
    animation: none;
  }
}

.board-area-target {
  cursor: crosshair;
  pointer-events: all;
  fill: rgba(60, 224, 205, 0.012);
  stroke: rgba(91, 239, 219, 0.18);
  stroke-width: 0.8;
  transition: fill 100ms ease, stroke 100ms ease;
}

.board-area-target:hover,
.board-area-target:focus-visible,
.board-area-target.is-preview {
  fill: rgba(255, 211, 105, 0.1);
  stroke: #fff1b8;
  stroke-width: 1.5;
  outline: none;
  filter: url("#soft-glow");
}

.terrain-object {
  pointer-events: none;
}

.terrain-object--targetable { cursor: crosshair; pointer-events: auto; }
.terrain-object__health { opacity: 0; pointer-events: none; }
.terrain-object--targetable .terrain-object__health,.terrain-object--pending-target .terrain-object__health { opacity: 1; }
.terrain-object__health-bg { fill: #03120a; stroke: #37c878; stroke-width: .65; }
.terrain-object__health-segment { stroke: #0007; stroke-width: .2; }

.is-full { fill: #188f4b; }
.is-empty { fill: #37c87829; }
.is-risk { fill: #ef3d3d; animation: hp-risk .52s steps(1, end) infinite; }

.terrain-object__render {
  overflow: visible;
  filter:
    drop-shadow(0 3px 2px rgba(0, 0, 0, 0.74))
    drop-shadow(0 0 4px rgba(255, 105, 28, 0.18));
}

.terrain-object__flame-object {
  overflow: visible;
  pointer-events: none;
}

.terrain-object__flame {
  width: 100%;
  height: 100%;
  background-image: var(--terrain-flame-asset);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 300% 200%;
  filter:
    drop-shadow(0 0 2px rgba(255, 225, 109, 0.88))
    drop-shadow(0 0 5px rgba(255, 91, 10, 0.68));
  mix-blend-mode: screen;
  transform-origin: 50% 82%;
  animation:
    terrain-flame-sprite var(--terrain-flame-duration, 660ms) steps(1, end) infinite,
    terrain-flame-breathe calc(var(--terrain-flame-duration, 660ms) * 2) ease-in-out infinite;
  animation-delay: var(--terrain-flame-delay, 0ms);
}

.terrain-object__flame.is-paused {
  animation: none;
}

.terrain-object__flame-glow {
  fill: rgba(255, 93, 18, 0.24);
  filter: blur(2px);
  mix-blend-mode: screen;
  transform-box: fill-box;
  transform-origin: center;
  animation: terrain-flame-glow 880ms ease-in-out infinite alternate;
}

.terrain-object__flame-glow.is-paused {
  animation-play-state: paused;
}

@keyframes terrain-flame-sprite {
  0%,
  16.666% { background-position: 0 0; }
  16.667%,
  33.332% { background-position: 50% 0; }
  33.333%,
  49.999% { background-position: 100% 0; }
  50%,
  66.666% { background-position: 0 100%; }
  66.667%,
  83.332% { background-position: 50% 100%; }
  83.333%,
  100% { background-position: 100% 100%; }
}

@keyframes terrain-flame-breathe {
  0%,
  100% { transform: scale(0.98, 0.96); }
  50% { transform: scale(1.02, 1.04); }
}

@keyframes terrain-flame-glow {
  from { opacity: 0.55; transform: scale(0.92); }
  to { opacity: 0.9; transform: scale(1.08); }
}

.fieldwork-cell-mine {
  cursor: help;
  outline: none;
  pointer-events: bounding-box;
}

.fieldwork-cell-mine__render {
  overflow: visible;
  pointer-events: none;
  filter:
    drop-shadow(0 2px 1.4px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 2px rgba(218, 76, 42, 0.18));
}

.fieldwork-cell-mine__lamp-object {
  overflow: visible;
  pointer-events: none;
}

.fieldwork-cell-mine__lamp {
  opacity: 0.72;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 1px rgba(255, 222, 157, 0.72))
    drop-shadow(0 0 3px rgba(255, 55, 28, 0.72));
  animation-name: fieldwork-cell-mine-pulse;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.fieldwork-cell-mine:hover .fieldwork-cell-mine__lamp,
.fieldwork-cell-mine:focus-visible .fieldwork-cell-mine__lamp {
  filter:
    drop-shadow(0 0 1.5px rgba(255, 236, 185, 0.9))
    drop-shadow(0 0 5px rgba(255, 55, 28, 0.88));
}

.fieldwork-cell-mine:focus-visible .fieldwork-cell-mine__render {
  filter:
    drop-shadow(0 2px 1.4px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 3px rgba(255, 206, 104, 0.62));
}

@keyframes fieldwork-cell-mine-pulse {
  0%,
  54% {
    background-position: 0 0;
    opacity: 0.58;
    transform: scale(0.985);
  }
  55% {
    background-position: 100% 0;
    opacity: 0.45;
    transform: scale(0.985);
  }
  76% {
    background-position: 100% 0;
    opacity: 0.96;
    transform: scale(1.015);
  }
  92% {
    background-position: 100% 0;
    opacity: 0.48;
    transform: scale(0.99);
  }
  93%,
  100% {
    background-position: 0 0;
    opacity: 0.58;
    transform: scale(0.985);
  }
}

.terrain-object__cell-centre {
  fill: #fff7cf;
  stroke: #0bdcca;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  filter: url("#soft-glow");
}

.board--terrain-calibrating .terrain-object--calibration {
  opacity: 0.92;
}

.terrain-calibration-panel {
  width: min(390px, calc(100vw - 24px));
  border-color: rgba(255, 135, 49, 0.78);
  background:
    linear-gradient(135deg, rgba(255, 104, 34, 0.18), transparent 48%),
    rgba(9, 8, 6, 0.96);
}

.terrain-calibration-panel .board-calibration-panel__title,
.terrain-calibration-panel .board-calibration-panel__selected {
  color: #ffbd70;
}

.terrain-calibration-panel__preview-modes,
.terrain-calibration-panel__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.terrain-calibration-panel__fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.terrain-calibration-panel__flame-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.terrain-calibration-panel__field {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: rgba(255, 224, 174, 0.76);
  font-size: 6px;
  letter-spacing: 0.08em;
}

.terrain-calibration-panel__field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 27px;
  padding: 4px 5px;
  border: 1px solid rgba(255, 164, 82, 0.38);
  border-radius: 0;
  color: #fff6c9;
  background: rgba(0, 0, 0, 0.44);
  font: 10px/1 var(--font-data);
}

.terrain-calibration-panel__field input:focus {
  border-color: #ffbd70;
  outline: 1px solid rgba(255, 189, 112, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .terrain-object__flame,
  .terrain-object__flame-glow,
  .fieldwork-mine-tooth__lamp,
  .fieldwork-cell-mine__lamp {
    animation: none !important;
  }

  .terrain-object__flame {
    background-position: 50% 0;
    transform: none;
  }

  .fieldwork-mine-tooth__lamp {
    background-position: 50% 0 !important;
  }

  .fieldwork-cell-mine__lamp {
    background-position: 100% 0 !important;
    opacity: 0.72;
    transform: none;
  }
}

.board--calibrating .token,
.board--calibrating .base-core,
.board--calibrating .skin-base {
  display: none;
}

.board-calibration-overlay {
  pointer-events: auto;
  mix-blend-mode: screen;
}

.board-calibration-cell {
  fill: rgba(11, 240, 219, 0.035);
  stroke: rgba(30, 245, 220, 0.5);
  stroke-width: 0.72;
  vector-effect: non-scaling-stroke;
}

.board-calibration-cell--base {
  fill: rgba(255, 209, 64, 0.12);
  stroke: rgba(255, 229, 112, 0.92);
}

.board-calibration-line {
  fill: none;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.board-calibration-line--row {
  stroke: rgba(70, 255, 231, 0.82);
}

.board-calibration-line--col {
  stroke: rgba(255, 104, 83, 0.62);
}

.board-calibration-centre {
  fill: #fff7cf;
  stroke: rgba(7, 13, 14, 0.9);
  stroke-width: 0.55;
}

.board-calibration-label {
  fill: rgba(255, 247, 207, 0.86);
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 2.4;
  paint-order: stroke;
  font-family: var(--font-display);
  font-size: 5.8px;
  letter-spacing: 0;
}

.board-calibration-base-footprint {
  fill: rgba(255, 214, 72, 0.1);
  stroke: #ffef94;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.board-calibration-point {
  pointer-events: auto;
  cursor: crosshair;
}

.board--calibration-dragging,
.board--calibration-dragging .board-calibration-point {
  cursor: grabbing;
}

.board-calibration-point__hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.board-calibration-point__dot {
  fill: rgba(255, 247, 207, 0.62);
  stroke: rgba(5, 8, 9, 0.86);
  stroke-width: 0.7;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.board-calibration-point:hover .board-calibration-point__dot,
.board-calibration-point.is-selected .board-calibration-point__dot {
  fill: #68f4e7;
  stroke: #fff7cf;
  stroke-width: 1.1;
  filter: url("#soft-glow");
}

.board-calibration-point__label {
  fill: #fff7cf;
  stroke: #050809;
  stroke-width: 3;
  paint-order: stroke;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.03em;
}

.board-calibration-corner {
  pointer-events: auto;
  cursor: crosshair;
}

.board-calibration-corner__dot {
  fill: #ffef94;
  stroke: #0b1516;
  stroke-width: 1.1;
  pointer-events: none;
  filter: url("#soft-glow");
}

.board-calibration-corner.is-selected .board-calibration-corner__dot {
  fill: #68f4e7;
  stroke: #fff7cf;
}

.board-calibration-corner__label {
  fill: #fff7cf;
  stroke: #050809;
  stroke-width: 3;
  paint-order: stroke;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.board-calibration-panel {
  position: fixed;
  z-index: 30;
  top: 92px;
  left: 12px;
  display: grid;
  gap: 6px;
  width: min(330px, calc(100vw - 24px));
  max-height: calc(100vh - 108px);
  padding: 9px;
  overflow: auto;
  border: 1px solid rgba(104, 244, 231, 0.62);
  color: #fff7cf;
  background:
    linear-gradient(135deg, rgba(30, 245, 220, 0.14), transparent 46%),
    rgba(5, 9, 10, 0.92);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
  font-family: var(--font-display);
  text-transform: uppercase;
}

.board-calibration-panel[hidden] {
  display: none;
}

.board-calibration-panel__title {
  color: #68f4e7;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.board-calibration-panel__hint {
  color: rgba(255, 247, 207, 0.72);
  font-size: 7px;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

.board-calibration-panel__selected {
  padding: 5px 6px;
  border: 1px solid rgba(104, 244, 231, 0.45);
  color: #68f4e7;
  background: rgba(40, 83, 79, 0.3);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.board-calibration-panel__corners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.board-layout-lab-panel__selection-heading {
  grid-column: 1 / -1;
  padding: 4px 2px 1px;
  color: rgba(255, 247, 207, 0.68);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.board-calibration-panel button {
  min-height: 24px;
  border: 1px solid rgba(224, 183, 88, 0.35);
  color: #f5d481;
  background: rgba(20, 27, 27, 0.9);
  font: inherit;
  font-size: 7px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.board-calibration-panel button:hover,
.board-calibration-panel button.is-selected {
  border-color: rgba(104, 244, 231, 0.82);
  color: #fff7cf;
  background: rgba(40, 83, 79, 0.62);
}

.board-calibration-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}

.board-calibration-panel__json {
  max-height: 126px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  border: 1px solid rgba(255, 247, 207, 0.16);
  color: rgba(255, 247, 207, 0.82);
  background: rgba(0, 0, 0, 0.3);
  font-family: var(--font-data);
  font-size: 8px;
  line-height: 1.3;
  text-transform: none;
}

.wall-calibration-overlay {
  pointer-events: auto;
}

.wall-geometry-calibration-shape,
.wall-geometry-calibration-line {
  fill: rgba(36, 221, 255, 0.16);
  stroke: rgba(112, 239, 255, 0.92);
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.wall-geometry-calibration-shape {
  stroke-width: 1;
}

.wall-geometry-calibration-line {
  fill: none;
  stroke-linecap: butt;
  opacity: 0.72;
}

.wall-geometry-calibration-shape.is-shield-disabled,
.wall-geometry-calibration-line.is-shield-disabled {
  opacity: 0;
}

.shield-corner-calibration-line {
  fill: none;
  stroke: rgba(255, 183, 90, 0.64);
  stroke-width: 0.7;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.wall-calibration-point {
  pointer-events: auto;
  cursor: crosshair;
}

.wall-calibration-point__hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.wall-calibration-point__dot {
  fill: #73f3ff;
  stroke: rgba(3, 19, 22, 0.94);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.wall-calibration-point.is-selected .wall-calibration-point__dot {
  fill: #fff7cf;
}

.shield-corner-calibration-point .wall-calibration-point__dot {
  fill: #ffb75a;
}

.shield-corner-calibration-point.is-selected .wall-calibration-point__dot {
  fill: #fff7cf;
  stroke: #ff8f29;
}

.wall-calibration-panel {
  border-color: rgba(255, 143, 41, 0.68);
  background:
    linear-gradient(135deg, rgba(255, 143, 41, 0.15), transparent 46%),
    rgba(11, 8, 6, 0.93);
}

.wall-calibration-panel .board-calibration-panel__title,
.wall-calibration-panel .board-calibration-panel__selected {
  color: #ffb75a;
}

.shield-calibration-panel__modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.shield-calibration-panel__modes button {
  min-height: 34px;
}

.shield-preview-panel {
  display: grid;
  place-items: center;
  min-height: 170px;
  border: 1px solid rgba(255, 183, 90, 0.2);
  background:
    radial-gradient(circle at center, rgba(71, 222, 235, 0.08), transparent 54%),
    rgba(0, 0, 0, 0.18);
}

.shield-preview-panel__picker {
  position: relative;
  width: 160px;
  height: 145px;
}

.shield-preview-panel__picker button {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 34px;
  min-height: 0;
  border-color: rgba(255, 183, 90, 0.32);
  color: rgba(255, 247, 207, 0.48);
}

.shield-preview-panel__picker button[data-shield-preview-side="0"] {
  top: 0;
  left: 57px;
}

.shield-preview-panel__picker button[data-shield-preview-side="1"] {
  top: 55px;
  right: 0;
}

.shield-preview-panel__picker button[data-shield-preview-side="2"] {
  bottom: 0;
  left: 57px;
}

.shield-preview-panel__picker button[data-shield-preview-side="3"] {
  top: 55px;
  left: 0;
}

.shield-preview-panel__picker button.is-active {
  border-color: #68f4e7;
  color: #fff7cf;
  background: rgba(20, 129, 133, 0.42);
  box-shadow: 0 0 12px rgba(35, 222, 232, 0.28);
}

.shield-preview-panel__core {
  position: absolute;
  inset: 47px 53px;
  border: 1px solid rgba(255, 183, 90, 0.38);
  background:
    linear-gradient(135deg, transparent 45%, rgba(255, 183, 90, 0.34) 46% 54%, transparent 55%),
    linear-gradient(45deg, transparent 45%, rgba(255, 183, 90, 0.34) 46% 54%, transparent 55%),
    rgba(255, 183, 90, 0.06);
}

.wall-calibration-panel__widths {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.token-centre-calibration-overlay {
  pointer-events: none;
}

.token-centre-calibration-cell {
  fill: rgba(87, 203, 190, 0.025);
  stroke: rgba(98, 213, 201, 0.16);
  stroke-width: 0.22;
  pointer-events: none;
}

.token-centre-calibration-cell.is-selected {
  fill: rgba(87, 203, 190, 0.1);
  stroke: rgba(141, 237, 225, 0.58);
}

.token-centre-calibration-offset {
  stroke: rgba(255, 238, 164, 0.72);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: 2.5 2.5;
  pointer-events: none;
}

.token-centre-calibration-point {
  pointer-events: all;
  cursor: grab;
}

.token-centre-calibration-point__hit {
  fill: rgba(0, 0, 0, 0.001);
  stroke: none;
}

.token-centre-calibration-point__dot {
  fill: #8df4e3;
  stroke: rgba(5, 18, 18, 0.88);
  stroke-width: 0.42;
  vector-effect: non-scaling-stroke;
  filter: none;
}

.token-centre-calibration-point.is-selected .token-centre-calibration-point__dot {
  fill: #fff5a8;
  stroke: #141006;
}

.token-centre-calibration-point__axis,
.token-centre-calibration-point__tick {
  fill: none;
  stroke: rgba(255, 245, 168, 0.82);
  stroke-width: 0.55;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.token-centre-calibration-point__axis {
  stroke-dasharray: 2.2 2.2;
}

.token-centre-calibration-point__tick {
  stroke: rgba(255, 245, 168, 0.96);
}

.token-centre-calibration-point__label {
  fill: #e8fffb;
  stroke: rgba(5, 9, 9, 0.86);
  stroke-width: 2.2;
  paint-order: stroke;
  font: 800 5.6px/1 var(--font-ui);
  letter-spacing: 0;
  pointer-events: none;
}

.token-centre-calibration-panel .board-calibration-panel__title,
.token-centre-calibration-panel .board-calibration-panel__selected {
  color: #8df4e3;
}

.token-centre-calibration-panel__zoom button:nth-child(2),
.wall-calibration-panel__zoom button:nth-child(2) {
  color: #d8fff8;
  border-color: rgba(104, 244, 231, 0.46);
}

.board-layout-lab-panel__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(104, 244, 231, 0.18);
}

.board-layout-lab-panel__nav button {
  min-height: 28px;
  font-size: 7px;
}

.board-layout-lab-panel__utilities {
  display: flex;
  justify-content: flex-end;
}

.board-layout-lab-panel__utilities button {
  min-height: 20px;
  padding: 2px 7px;
  border-color: rgba(104, 244, 231, 0.22);
  color: rgba(216, 255, 248, 0.68);
  font-size: 6px;
}

.base-hardware-calibration-panel {
  border-color: rgba(255, 204, 92, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 190, 51, 0.16), transparent 48%),
    rgba(10, 8, 5, 0.94);
}

.base-hardware-calibration-panel .board-calibration-panel__title,
.base-hardware-calibration-panel .board-calibration-panel__selected {
  color: #ffd66d;
}

.base-hardware-calibration-panel__rotate button:nth-child(2) {
  color: #fff2b8;
  border-color: rgba(255, 214, 109, 0.5);
}

.hud-layout-calibration-panel {
  width: min(390px, calc(100vw - 24px));
  border-color: rgba(255, 219, 107, 0.78);
  background:
    linear-gradient(135deg, rgba(255, 204, 74, 0.16), transparent 48%),
    rgba(7, 10, 10, 0.96);
}

.hud-layout-calibration-panel .board-calibration-panel__title,
.hud-layout-calibration-panel .board-calibration-panel__selected {
  color: #ffe083;
}

.hud-layout-calibration-panel__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.hud-layout-calibration-panel__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.hud-layout-calibration-panel__field {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: rgba(255, 240, 176, 0.72);
  font-size: 6px;
  letter-spacing: 0.08em;
}

.hud-layout-calibration-panel__field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 27px;
  padding: 4px 5px;
  border: 1px solid rgba(104, 244, 231, 0.32);
  border-radius: 0;
  color: #fff6c9;
  background: rgba(0, 0, 0, 0.44);
  font: 10px/1 var(--font-data);
}

.hud-layout-calibration-panel__field input:focus {
  border-color: #ffe083;
  outline: 1px solid rgba(255, 224, 131, 0.3);
}

.hud-layout-calibration-panel__actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.base-hardware-calibration-overlay {
  pointer-events: none;
}

.base-hardware-calibration-offset {
  stroke: rgba(255, 214, 109, 0.78);
  stroke-width: 0.8;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

.base-hardware-calibration-point {
  pointer-events: all;
  cursor: grab;
}

.base-hardware-calibration-point__hit {
  fill: rgba(0, 0, 0, 0.001);
  stroke: none;
}

.base-hardware-calibration-point__dot {
  fill: #ffd66d;
  stroke: #160f04;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
  filter: url("#soft-glow");
}

.base-hardware-calibration-point__axis,
.base-hardware-calibration-point__tick {
  stroke: rgba(255, 231, 151, 0.94);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.base-hardware-calibration-point__axis {
  stroke-dasharray: 3 2;
}

.base-hardware-calibration-point__label {
  fill: #fff1b4;
  stroke: rgba(10, 7, 3, 0.92);
  stroke-width: 2.5;
  paint-order: stroke;
  font-family: var(--font-display);
  font-size: 6px;
  font-weight: 700;
  pointer-events: none;
}

.skin-base {
  pointer-events: none;
}

.skin-base-cover {
  fill: rgba(190, 184, 164, 0.42);
  stroke: rgba(58, 57, 52, 0.98);
  stroke-width: 2.2;
  filter: none;
}

.skin-base-cover__seam {
  stroke: rgba(58, 57, 52, 0.9);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.skin-base-cover__node {
  fill: #3d3c38;
  stroke: rgba(160, 150, 123, 0.68);
  stroke-width: 0.55;
}

.skin-energy-fence {
  pointer-events: none;
}

.skin-energy-fence__side.is-down {
  opacity: 0.24;
}

.skin-energy-fence--wall .skin-energy-fence__side.is-down {
  opacity: 0;
}

.skin-energy-fence__side.is-down .skin-energy-fence__pane {
  fill: rgba(65, 61, 48, 0.1);
  stroke: rgba(108, 92, 58, 0.18);
}

.skin-energy-fence__side.is-down .skin-energy-fence__rock {
  opacity: 0.42;
  filter: saturate(0.42) brightness(0.7);
}

.skin-energy-fence__side.is-down .skin-energy-fence__bolt,
.skin-energy-fence__side.is-down .skin-energy-fence__glint,
.skin-energy-fence__side.is-down .skin-energy-fence__field-core,
.skin-energy-fence__side.is-down .skin-energy-fence__field-spark {
  opacity: 0;
}

.skin-energy-fence__side.is-overcharged .skin-energy-fence__track {
  stroke: rgba(238, 222, 156, 0.62);
}

.skin-energy-fence__side.is-overcharged .skin-energy-fence__pane {
  fill: rgba(255, 238, 160, 0.14);
  stroke: rgba(255, 241, 176, 0.64);
  filter:
    drop-shadow(0 0 6px rgba(255, 220, 108, 0.52))
    drop-shadow(0 2px 3px rgba(42, 28, 8, 0.14));
}

.skin-energy-fence__side.is-overcharged .skin-energy-fence__rock {
  stroke: rgba(255, 230, 143, 0.5);
  filter:
    drop-shadow(0 1px 0 rgba(255, 234, 160, 0.12))
    drop-shadow(0 0 4px rgba(230, 178, 74, 0.28))
    drop-shadow(0 4px 4px rgba(24, 18, 10, 0.26));
}

.skin-energy-fence__side.is-overcharged .skin-energy-fence__bolt {
  stroke: #fff4b0;
  stroke-width: 2.15;
}

.skin-energy-fence__side.is-overcharged .skin-energy-fence__node {
  fill: #fff8d7;
  stroke: #d4a94c;
}

.skin-energy-fence--wall .skin-energy-fence__side.is-overcharged .skin-shield-wall__cap {
  stroke: rgba(236, 204, 113, 0.62);
  filter:
    drop-shadow(0 0 4px rgba(236, 204, 113, 0.38))
    drop-shadow(0 3px 3px rgba(20, 16, 12, 0.22));
}

.skin-shield-wall__sprite {
  pointer-events: none;
  overflow: visible;
}

.skin-shield-wall__sprite--depleted {
  opacity: 0;
  filter: none;
}

.skin-shield-wall__shadow {
  fill: rgba(18, 16, 13, 0.26);
  stroke: none;
  filter: drop-shadow(0 4px 3px rgba(18, 14, 10, 0.22));
}

.skin-energy-fence--wall .skin-shield-wall__shadow {
  fill: rgba(38, 24, 8, 0.2);
}

.skin-shield-wall__face {
  fill: rgba(62, 65, 59, 0.96);
  stroke: rgba(30, 31, 28, 0.72);
  stroke-width: 0.72;
  filter:
    drop-shadow(0 1px 0 rgba(255, 247, 224, 0.08))
    drop-shadow(0 4px 4px rgba(18, 14, 10, 0.26));
}

.skin-energy-fence--wall .skin-shield-wall__face {
  fill: rgba(186, 130, 44, 0.42);
  stroke: rgba(255, 216, 126, 0.64);
  filter:
    drop-shadow(0 0 5px rgba(231, 164, 54, 0.34))
    drop-shadow(0 3px 3px rgba(22, 15, 8, 0.24));
}

.skin-shield-wall__cap {
  fill: rgba(112, 116, 103, 0.96);
  stroke: rgba(40, 42, 38, 0.64);
  stroke-width: 0.62;
  filter:
    drop-shadow(0 1px 0 rgba(255, 247, 224, 0.12))
    drop-shadow(0 2px 2px rgba(18, 14, 10, 0.18));
}

.skin-energy-fence--wall .skin-shield-wall__cap {
  fill: rgba(255, 202, 91, 0.42);
  stroke: rgba(255, 232, 153, 0.66);
}

.skin-shield-wall__block {
  fill: rgba(78, 82, 74, 0.98);
  stroke: rgba(31, 32, 29, 0.6);
  stroke-width: 0.42;
}

.skin-energy-fence--wall .skin-shield-wall__block {
  fill: rgba(202, 144, 48, 0.36);
  stroke: rgba(255, 219, 130, 0.46);
}

.skin-shield-wall__block--1,
.skin-shield-wall__block--3 {
  fill: rgba(68, 72, 66, 0.98);
}

.skin-shield-wall__buttress {
  fill: rgba(48, 51, 47, 0.98);
  stroke: rgba(25, 25, 22, 0.72);
  stroke-width: 0.5;
}

.skin-energy-fence--wall .skin-shield-wall__buttress {
  fill: rgba(123, 83, 28, 0.44);
  stroke: rgba(235, 176, 70, 0.44);
}

.skin-shield-wall__outer-edge {
  stroke: rgba(24, 24, 21, 0.72);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.skin-shield-wall__inner-edge {
  stroke: rgba(190, 188, 166, 0.42);
  stroke-width: 0.62;
  stroke-linecap: round;
}

.skin-energy-fence--wall .skin-shield-wall__outer-edge {
  stroke: rgba(85, 48, 12, 0.68);
}

.skin-energy-fence--wall .skin-shield-wall__inner-edge {
  stroke: rgba(255, 229, 151, 0.7);
}

.skin-shield-wall__highlight {
  stroke: rgba(218, 209, 178, 0.28);
  stroke-width: 0.46;
  stroke-linecap: round;
  stroke-dasharray: 10 8;
}

.skin-energy-fence--wall .skin-shield-wall__highlight {
  stroke: rgba(255, 239, 173, 0.74);
}

.skin-shield-wall__rubble {
  fill: rgba(67, 67, 60, 0.9);
  stroke: rgba(34, 32, 27, 0.54);
  stroke-width: 0.46;
  filter:
    drop-shadow(0 1px 0 rgba(255, 247, 224, 0.08))
    drop-shadow(0 2px 2px rgba(18, 14, 10, 0.2));
}

.skin-shield-wall__rubble--1,
.skin-shield-wall__rubble--4 {
  fill: rgba(89, 86, 73, 0.88);
}

.skin-shield-wall__rubble--2 {
  fill: rgba(50, 55, 51, 0.9);
}

.skin-shield-wall__broken-edge {
  stroke: rgba(26, 25, 22, 0.62);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 5 4;
}

.skin-energy-fence__pane {
  fill: rgba(255, 228, 136, 0.025);
  stroke: rgba(255, 229, 145, 0.16);
  stroke-width: 0.38;
  filter:
    drop-shadow(0 0 2px rgba(230, 178, 74, 0.16))
    drop-shadow(0 2px 2px rgba(34, 26, 12, 0.08));
}

.skin-energy-fence--rail .skin-energy-fence__pane {
  fill: rgba(255, 224, 124, 0.035);
  stroke: rgba(255, 226, 138, 0.12);
}

.skin-energy-fence--railfield .skin-energy-fence__pane {
  fill: rgba(255, 224, 124, 0.045);
  stroke: rgba(255, 232, 150, 0.18);
}

.skin-energy-fence--railfield .skin-energy-fence__railfield-pane {
  filter:
    drop-shadow(0 0 3px rgba(255, 220, 112, 0.2))
    drop-shadow(0 2px 2px rgba(28, 20, 10, 0.1));
}

.skin-energy-fence--rock .skin-energy-fence__pane {
  fill: rgba(77, 65, 42, 0.18);
  stroke: rgba(255, 224, 136, 0.28);
}

.skin-energy-fence--field .skin-energy-fence__pane {
  fill: rgba(255, 224, 136, 0.08);
  stroke: rgba(255, 236, 166, 0.34);
  filter:
    drop-shadow(0 0 4px rgba(255, 220, 112, 0.32))
    drop-shadow(0 2px 3px rgba(28, 20, 10, 0.14));
}

.skin-energy-fence__rock {
  fill: rgba(82, 75, 58, 0.95);
  stroke: rgba(220, 172, 84, 0.46);
  stroke-width: 0.62;
  filter:
    drop-shadow(0 1px 0 rgba(255, 230, 165, 0.12))
    drop-shadow(0 0 3px rgba(230, 178, 74, 0.18))
    drop-shadow(0 4px 4px rgba(24, 18, 10, 0.34));
}

.skin-energy-fence--rock .skin-energy-fence__rock {
  fill: rgba(54, 48, 38, 0.98);
  stroke: rgba(246, 199, 99, 0.7);
  stroke-width: 0.9;
  filter:
    drop-shadow(0 1px 0 rgba(255, 229, 156, 0.16))
    drop-shadow(0 0 4px rgba(230, 178, 74, 0.28))
    drop-shadow(0 5px 4px rgba(18, 14, 9, 0.36));
}

.skin-energy-fence__rock--1,
.skin-energy-fence__rock--4 {
  fill: rgba(104, 88, 58, 0.94);
}

.skin-energy-fence__rock--2 {
  fill: rgba(56, 62, 54, 0.96);
}

.skin-energy-fence__rock--3 {
  fill: rgba(110, 69, 45, 0.93);
}

.skin-energy-fence__rock-ridge {
  stroke: rgba(255, 217, 126, 0.28);
  stroke-width: 0.48;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 2px rgba(255, 214, 116, 0.24))
    drop-shadow(0 1px 1px rgba(18, 14, 10, 0.28));
}

.skin-energy-fence__rail-shadow {
  stroke: rgba(28, 24, 18, 0.62);
  stroke-width: 6;
  stroke-linecap: round;
}

.skin-energy-fence__rail {
  stroke: rgba(91, 78, 53, 0.92);
  stroke-width: 4;
  stroke-linecap: round;
  filter:
    drop-shadow(0 1px 0 rgba(255, 228, 154, 0.13))
    drop-shadow(0 3px 3px rgba(20, 16, 10, 0.28));
}

.skin-energy-fence--railfield .skin-energy-fence__rail {
  stroke: rgba(73, 66, 49, 0.94);
  stroke-width: 3.85;
}

.skin-energy-fence__field-core {
  stroke: rgba(255, 236, 166, 0.76);
  stroke-width: 2;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 3px rgba(255, 240, 184, 0.62))
    drop-shadow(0 0 8px rgba(230, 178, 74, 0.44));
}

.skin-energy-fence--railfield .skin-energy-fence__field-core {
  stroke: rgba(255, 232, 154, 0.5);
  stroke-width: 1.45;
  filter:
    drop-shadow(0 0 3px rgba(255, 235, 170, 0.44))
    drop-shadow(0 0 6px rgba(230, 178, 74, 0.26));
}

.skin-energy-fence__field-spark {
  stroke: rgba(255, 252, 220, 0.62);
  stroke-width: 0.72;
  stroke-linecap: round;
  stroke-dasharray: 5 5;
  filter: drop-shadow(0 0 4px rgba(255, 225, 132, 0.55));
}

.skin-energy-fence--railfield .skin-energy-fence__field-spark {
  stroke: rgba(255, 248, 206, 0.38);
  stroke-width: 0.48;
  stroke-dasharray: 6 9;
  filter: drop-shadow(0 0 3px rgba(255, 225, 132, 0.32));
}

.skin-energy-fence__track {
  stroke: rgba(42, 36, 27, 0.48);
  stroke-width: 6.2;
  stroke-linecap: round;
}

.skin-energy-fence--rock .skin-energy-fence__track {
  stroke: rgba(35, 30, 22, 0.62);
  stroke-width: 5.2;
}

.skin-energy-fence__bolt {
  stroke: rgba(255, 231, 142, 0.92);
  stroke-width: 1.35;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 2px rgba(255, 242, 185, 0.72))
    drop-shadow(0 0 5px rgba(230, 178, 74, 0.48));
}

.skin-energy-fence__glint {
  stroke: rgba(255, 255, 226, 0.72);
  stroke-width: 0.38;
  stroke-linecap: round;
  stroke-dasharray: 9 7;
  opacity: 0.68;
}

.skin-energy-fence__node {
  fill: #ffe69a;
  stroke: #8e6424;
  stroke-width: 0.72;
  filter:
    drop-shadow(0 0 2px rgba(255, 245, 190, 0.72))
    drop-shadow(0 0 5px rgba(230, 178, 74, 0.44));
}

.skin-energy-fence--rail .skin-energy-fence__node {
  fill: #fff0b5;
}

.skin-energy-fence--railfield .skin-energy-fence__node {
  fill: #ffeaa4;
  stroke: rgba(120, 86, 33, 0.86);
}

.skin-energy-fence--field .skin-energy-fence__node {
  fill: #fff9d8;
  stroke: rgba(190, 139, 45, 0.86);
}

.skin-base-cannon {
  pointer-events: auto;
}

.skin-cannon-sprite {
  overflow: visible;
  filter:
    drop-shadow(0 1px 0 rgba(255, 250, 230, 0.22))
    drop-shadow(0 5px 5px rgba(18, 18, 16, 0.36));
}

.base-cannon.power-0 .skin-cannon-sprite {
  filter:
    grayscale(0.42)
    brightness(0.78)
    drop-shadow(0 4px 4px rgba(18, 18, 16, 0.3));
}

.base-cannon.power-5 .skin-cannon-sprite {
  filter:
    drop-shadow(0 1px 0 rgba(255, 250, 230, 0.22))
    drop-shadow(0 0 5px rgba(130, 248, 255, 0.48))
    drop-shadow(0 5px 5px rgba(18, 18, 16, 0.36));
}

.base-console {
  fill: #688879;
  stroke: #273f3d;
  stroke-width: 1.5;
}

.base-dome {
  fill: #b9d4ca;
  stroke: #476b66;
  stroke-width: 1.5;
}

.base-detail {
  fill: #2e5e62;
}

.base-core {
  filter: drop-shadow(0 7px 5px rgba(43, 33, 22, 0.34));
}

.base-label {
  display: none;
}

.token__stand {
  stroke: #918b81;
  stroke-width: 1;
  fill: #d8d3c9;
}

.token__stem {
  stroke: #85847f;
  stroke-width: 3;
  stroke-linecap: round;
}

.token__body {
  stroke-width: 1.4;
}

.token--enemy .token__body,
.token--enemy .token__head {
  fill: var(--enemy);
  stroke: var(--enemy-dark);
}

.token--enemy .token__head {
  fill: #252b2c;
}

.token--enemy .token__panel {
  fill: #656b6a;
}

.token--friendly .token__body,
.token--friendly .token__head {
  fill: var(--friendly);
  stroke: var(--friendly-dark);
}

.token--friendly .token__panel {
  fill: #7dbb8a;
}

.token__head {
  stroke-width: 1.2;
}

.token__panel {
  stroke: rgba(25, 34, 34, 0.5);
  stroke-width: 0.8;
}

.token__weapon {
  stroke: #303638;
  stroke-width: 3;
  stroke-linecap: round;
}

/* Enemy health: hidden until the piece is hovered or being targeted. */
.token__health {
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.token--previewable:hover .token__health,
.token--inspected .token__health,
.token--pending-target .token__health {
  opacity: 1;
}

.token__statuses {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.token--previewable:hover .token__statuses,
.token--inspected .token__statuses,
.token--pending-target .token__statuses {
  opacity: 1;
}

.token__status-bg {
  fill: rgba(18, 24, 26, 0.88);
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 0.5;
}

.token__status--poison .token__status-bg {
  fill: rgba(57, 92, 58, 0.92);
}

.token__status--incapacitated .token__status-bg {
  fill: rgba(93, 76, 48, 0.94);
}

.token__status-text {
  fill: #fff4ce;
  font: 700 5px/1 var(--font-ui);
  letter-spacing: 0;
}

.token__hover-card {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.token--previewable:hover .token__hover-card,
.token--previewable:focus-visible .token__hover-card,
.token--inspected .token__hover-card,
.token--pending-target .token__hover-card {
  opacity: 1;
}

.token__hover-card-bg {
  fill: rgba(31, 27, 24, 0.76);
  stroke: rgba(244, 214, 116, 0.28);
  stroke-width: 0.7;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.24));
}

.token--pending-target .token__hover-card-bg {
  fill: rgba(20, 24, 23, 0.9);
  stroke: rgba(245, 209, 100, 0.58);
  filter:
    drop-shadow(0 0 4px rgba(224, 183, 88, 0.22))
    drop-shadow(0 4px 5px rgba(0, 0, 0, 0.26));
}

.token--inspected .token__hover-card-bg {
  stroke: rgba(120, 236, 226, 0.72);
  filter:
    drop-shadow(0 0 4px rgba(120, 236, 226, 0.24))
    drop-shadow(0 4px 5px rgba(0, 0, 0, 0.26));
}

.token__hover-card-icon,
.token__hover-card-value,
.token__hover-card-hp {
  fill: #f5d164;
  font: 900 10px/1 var(--font-display);
  letter-spacing: 0;
}

.token__hover-card-value,
.token__hover-card-hp {
  fill: #f6e8bf;
}

.token__hover-chip-bg--stat {
  fill: rgba(17, 23, 23, 0.82);
  stroke: rgba(120, 236, 226, 0.32);
}

.token__hover-chip-text--stat {
  fill: #e7fff7;
  font: 900 5.5px/1 var(--font-display);
}

.token__hover-chip-bg--perk {
  fill: rgba(245, 209, 100, 0.15);
  stroke: rgba(245, 209, 100, 0.3);
}

.token__hover-chip-bg--none {
  fill: rgba(204, 226, 214, 0.09);
  stroke: rgba(204, 226, 214, 0.2);
}

.token__hover-chip-text--perk {
  fill: #f3dc9c;
  font: 800 5.2px/1 var(--font-ui);
}

.token__hover-pip {
  stroke: rgba(0, 0, 0, 0.28);
  stroke-width: 0.18;
}

.token__hover-chip-bg {
  fill: rgba(245, 209, 100, 0.14);
  stroke: rgba(245, 209, 100, 0.28);
  stroke-width: 0.36;
}

.token__hover-chip-text {
  fill: #f3dc9c;
  font: 800 5.8px/1 var(--font-ui);
  letter-spacing: 0;
}

.token__health-card {
  opacity: 0.78;
  pointer-events: none;
  transition: opacity 0.12s ease, filter 0.12s ease;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.28));
}

.token--previewable:hover .token__health-card,
.token--previewable:focus-visible .token__health-card,
.token--keyboard-preview .token__health-card,
.token--inspected .token__health-card,
.token--pending-target .token__health-card {
  opacity: 1;
  filter:
    drop-shadow(0 0 5px rgba(120, 236, 226, 0.22))
    drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
}

.token--area-risk .token__health-card {
  opacity: 1;
  filter:
    drop-shadow(0 0 6px rgba(255, 60, 72, 0.66))
    drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
}

.token--area-risk .token__health-card-bg {
  stroke: rgba(255, 211, 105, 0.9);
}

.token--area-risk .token__sprite {
  filter:
    drop-shadow(0 0 3px rgba(245, 209, 100, 0.82))
    drop-shadow(0 0 8px rgba(255, 60, 72, 0.62))
    drop-shadow(0 4px 2px rgba(30, 25, 18, 0.24));
}

.token__health-card-bg {
  fill: rgba(3, 18, 10, 0.92);
  stroke: rgba(55, 200, 120, 0.72);
  stroke-width: 0.65;
}

.token--pending-target .token__health-card-bg {
  stroke: rgba(245, 209, 100, 0.76);
}

.token__health-label {
  fill: rgba(120, 236, 226, 0.88);
  font: 900 5.2px/1 var(--font-display);
  letter-spacing: 0;
}

.token__health-value {
  fill: #f6e8bf;
  font: 900 7px/1 var(--font-display);
  letter-spacing: 0;
}

.token__health-segment {
  stroke: rgba(6, 12, 12, 0.42);
  stroke-width: 0.18;
}

.token__threats {
  opacity: 0.86;
  pointer-events: none;
  transition: opacity 0.12s ease, filter 0.12s ease;
}

.token--previewable:hover .token__threats,
.token--inspected .token__threats,
.token--pending-target .token__threats {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(255, 230, 151, 0.18));
}

.token__threat-bg {
  fill: rgba(9, 17, 17, 0.88);
  stroke: rgba(148, 220, 212, 0.52);
  stroke-width: 0.55;
}

.token__threat-text {
  fill: #b8e4dc;
  font: 900 6.4px/1 var(--font-display);
  letter-spacing: 0;
}

.token__threat--breach .token__threat-bg {
  fill: rgba(72, 22, 21, 0.9);
  stroke: rgba(255, 97, 87, 0.78);
}

.token__threat--breach .token__threat-text {
  fill: #ffd7b8;
}

.token__threat--hero .token__threat-bg,
.token__threat--elite .token__threat-bg {
  fill: rgba(59, 40, 18, 0.92);
  stroke: rgba(248, 203, 87, 0.76);
}

.token__threat--hero .token__threat-text,
.token__threat--elite .token__threat-text {
  fill: #ffe8a8;
}

.token__threat--shield .token__threat-bg {
  fill: rgba(17, 40, 39, 0.9);
  stroke: rgba(128, 230, 219, 0.7);
}

.token__threat--control .token__threat-bg {
  fill: rgba(39, 24, 47, 0.9);
  stroke: rgba(208, 146, 245, 0.68);
}

.token__threat--control .token__threat-text {
  fill: #e4c7ff;
}

.token__threat--air .token__threat-bg {
  fill: rgba(18, 33, 54, 0.9);
  stroke: rgba(146, 200, 255, 0.68);
}

.token__threat--air .token__threat-text {
  fill: #cce4ff;
}

.token__health-plate {
  fill: rgba(3, 18, 10, 0.82);
  stroke: rgba(55, 200, 120, 0.46);
  stroke-width: 0.45;
}

.hp-seg {
  stroke: rgba(0, 0, 0, 0.24);
  stroke-width: 0.18;
}

.token-plinth {
  pointer-events: none;
}

.token-plinth__sprite {
  opacity: 0.98;
  filter: none;
}

.token-plinth--vehicle {
  opacity: 0.94;
}

.token-plinth--shadow {
  opacity: 0.72;
}

.token-plinth--flight {
  opacity: 0.9;
}

.token-plinth__vehicle-shadow {
  fill: rgba(21, 35, 42, 0.64);
  stroke: rgba(99, 226, 231, 0.46);
  stroke-width: 1.5;
  filter:
    drop-shadow(0 0 3px rgba(89, 231, 255, 0.28))
    drop-shadow(0 3px 2px rgba(14, 18, 18, 0.34));
}

.token-plinth--shadow .token-plinth__vehicle-shadow {
  fill: rgba(18, 15, 17, 0.46);
  stroke: rgba(42, 32, 38, 0.28);
  stroke-width: 0.7;
  filter: drop-shadow(0 2px 1px rgba(18, 14, 13, 0.28));
}

.token-plinth__vehicle-core {
  fill: rgba(42, 74, 76, 0.32);
  stroke: rgba(238, 211, 128, 0.34);
  stroke-width: 0.9;
}

.token-plinth__flight-stem {
  stroke: rgba(204, 224, 214, 0.62);
  stroke-width: 2.8;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 2px rgba(108, 250, 232, 0.26))
    drop-shadow(1px 2px 1px rgba(7, 12, 12, 0.48));
}

.token-plinth__flight-stem--back {
  stroke: rgba(5, 12, 13, 0.7);
  stroke-width: 4.6;
  filter: none;
}

.token-plinth__flight-foot {
  fill: rgba(26, 44, 48, 0.78);
  stroke: rgba(91, 229, 223, 0.52);
  stroke-width: 1.2;
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 3px rgba(72, 236, 227, 0.2));
}

.token-plinth__flight-socket {
  fill: rgba(230, 218, 170, 0.72);
  stroke: rgba(43, 64, 66, 0.92);
  stroke-width: 0.8;
}

.token__sprite {
  overflow: visible;
  filter:
    drop-shadow(0 1px 0 rgba(255, 245, 218, 0.25))
    drop-shadow(0 3px 2px rgba(30, 25, 18, 0.24));
}

.token__sprite--cropped {
  overflow: hidden;
}

.token--threat-breach:not(.token--unit-targetable) .token__sprite {
  filter:
    drop-shadow(0 0 3px rgba(255, 70, 62, 0.52))
    drop-shadow(0 3px 2px rgba(30, 25, 18, 0.24));
}

.token--threat-hero:not(.token--unit-targetable) .token__sprite,
.token--threat-elite:not(.token--unit-targetable) .token__sprite {
  filter:
    drop-shadow(0 0 3px rgba(248, 203, 87, 0.48))
    drop-shadow(0 3px 2px rgba(30, 25, 18, 0.24));
}

.token--threat-control:not(.token--unit-targetable) .token__sprite {
  filter:
    drop-shadow(0 0 3px rgba(208, 146, 245, 0.36))
    drop-shadow(0 3px 2px rgba(30, 25, 18, 0.24));
}

.token__hitbox {
  fill: rgba(0, 0, 0, 0.001);
  stroke: none;
  pointer-events: all;
}

.token--enemy {
  cursor: default;
  outline: none;
  transition: opacity 140ms ease;
}

.token--targetable {
  cursor: pointer;
}

.token--inactive-target {
  cursor: default;
}

.token--peek {
  opacity: 0.2;
  pointer-events: none;
}

.token--peek .token__hitbox {
  pointer-events: none;
}

.token--target-candidate {
  opacity: 1;
  transition: opacity 180ms ease, filter 180ms ease;
}

.token--target-candidate-muted {
  opacity: 0.56;
  filter: saturate(0.24) brightness(0.62);
  transition: opacity 180ms ease, filter 180ms ease;
}

.token--target-candidate .token__sprite {
  filter:
    saturate(1.04)
    brightness(1.02)
    drop-shadow(0 0 2px rgba(242, 207, 111, 0.38))
    drop-shadow(0 0 5px rgba(120, 236, 226, 0.22))
    drop-shadow(0 4px 2px rgba(30, 25, 18, 0.24));
  animation: target-candidate-pulse 1.65s ease-in-out infinite;
}

.token--target-candidate .token-plinth {
  animation: target-candidate-plinth-pulse 1.65s ease-in-out infinite;
}

.token--target-candidate .token__stand {
  stroke: rgba(242, 207, 111, 0.76);
  stroke-width: 1.35;
}

.token--pending-target .token__sprite {
  animation: none;
  filter:
    drop-shadow(0 0 3px rgba(245, 209, 100, 0.9))
    drop-shadow(0 0 8px rgba(255, 60, 72, 0.72))
    drop-shadow(0 4px 2px rgba(30, 25, 18, 0.24));
}

.token--hit {
  animation: target-hit 0.48s ease;
}

.token--entering {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: deploy-drop 0.58s cubic-bezier(0.2, 0.8, 0.25, 1.25);
}

/* Central laser turret on the core */
.base-cannon {
  pointer-events: all;
  cursor: pointer;
  outline: none;
}

.base-cannon.is-offline {
  cursor: default;
}

.base-cannon.is-ready:hover .skin-cannon-sprite,
.base-cannon.is-ready:focus .skin-cannon-sprite {
  filter:
    drop-shadow(0 0 3px rgba(232, 199, 115, 0.82))
    drop-shadow(0 4px 3px rgba(28, 24, 18, 0.38));
}

.cannon-mount {
  fill: #cdc7ba;
  stroke: #9b958a;
  stroke-width: 1;
}

.cannon-base {
  fill: #33403e;
  stroke: #1d2a29;
  stroke-width: 1;
}

.cannon-head {
  fill: #566d69;
  stroke: #223230;
  stroke-width: 1;
}

.cannon-barrel-rect {
  fill: #46524f;
  stroke: #223230;
  stroke-width: 1;
}

.cannon-muzzle {
  fill: #173f3a;
  stroke: #f0bf58;
  stroke-width: 1.5;
}

.cannon-eye {
  fill: #f5d887;
}

.base-cannon.power-0 .cannon-eye,
.base-cannon.power-0 .cannon-muzzle {
  fill: #5a6b68;
  stroke: #5a6b68;
}

.base-cannon.power-3 .cannon-eye,
.base-cannon.power-5 .cannon-eye,
.base-cannon.power-5 .cannon-muzzle {
  filter: drop-shadow(0 0 4px #f5cf70);
}

.base-cannon.is-armed {
  animation: cannon-arm 0.9s ease-in-out infinite;
}

.base-cannon.is-armed .cannon-eye {
  fill: #fff;
  filter: drop-shadow(0 0 6px #b9fff0);
}

.card {
  --unit-accent: #5ff6d5;
  --unit-accent-2: #ffe07d;
  --unit-deep: #071213;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  min-height: 0;
  flex: 0 1 auto;
  overflow: hidden;
  padding: 4px;
  border: 1px solid rgba(91, 75, 47, 0.58);
  border-radius: 4px;
  color: #303638;
  background:
    linear-gradient(180deg, #f4eddd, #ded0af);
  box-shadow:
    0 5px 12px rgba(21, 18, 13, 0.22),
    inset 0 0 0 1px rgba(112, 89, 49, 0.22),
    inset 0 0 0 3px rgba(255, 250, 235, 0.3);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    opacity 0.18s ease,
    filter 0.18s ease;
}

.is-battle-screen .rail__cards .card:is(.card--unit, .card--support),
#new-basecamp-screen .battle-hud-card:is(.card--unit, .card--support) {
  aspect-ratio: auto;
  height: var(--battle-rail-card-height);
  flex: 0 0 var(--battle-rail-card-height);
}

.card::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(83, 67, 42, 0.14);
  border-radius: 2px;
  pointer-events: none;
}

.card:active {
  transform: scale(0.97);
}

.card.is-selected {
  z-index: 2;
  border-color: #f5d887;
  box-shadow:
    0 0 0 2px rgba(226, 176, 65, 0.72),
    0 8px 20px rgba(58, 43, 18, 0.34),
    inset 0 0 0 1px rgba(112, 89, 49, 0.24),
    inset 0 0 0 3px rgba(255, 250, 235, 0.3);
  transform: scale(1.025);
}

.card.is-dimmed {
  opacity: 0.38;
  filter: grayscale(0.8);
}

.card.is-dimmed:hover {
  opacity: 0.58;
  filter: grayscale(0.5);
}

.card.is-targetable {
  opacity: 1;
  filter: none;
  border-color: #e6c066;
  box-shadow:
    0 0 0 2px rgba(226, 176, 65, 0.55),
    0 7px 18px rgba(58, 43, 18, 0.26),
    inset 0 0 0 1px rgba(112, 89, 49, 0.24),
    inset 0 0 0 3px rgba(255, 250, 235, 0.3);
}

.card--spent {
  opacity: 0.38;
  filter: grayscale(0.8);
  cursor: default;
  pointer-events: none;
}

.card--sealed {
  cursor: default;
  filter: saturate(0.58) brightness(0.82);
}

.card--sealed::before {
  border-color: rgba(120, 215, 206, 0.5);
  box-shadow: inset 0 0 18px rgba(64, 188, 181, 0.18);
}

.card__seal {
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 8px;
  padding: 4px 6px 3px;
  border: 1px solid rgba(130, 226, 216, 0.48);
  color: #c7fff7;
  background: rgba(9, 24, 25, 0.86);
  box-shadow: 0 0 14px rgba(50, 190, 182, 0.2);
  font-family: var(--font-display);
  font-size: 6.8px;
  line-height: 1;
}

.card--placeholder {
  cursor: default;
  pointer-events: none;
  color: rgba(222, 215, 197, 0.72);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025) 0 5px,
      transparent 5px 10px
    ),
    linear-gradient(160deg, #353b39, #1a201f);
  border-color: rgba(229, 218, 190, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.46),
    0 3px 8px rgba(20, 24, 24, 0.2);
}

.card--placeholder::after {
  border-color: rgba(219, 200, 154, 0.28);
}

.card.card--placeholder::before {
  display: none;
}

.card__back {
  display: grid;
  place-items: center;
  height: calc(100% - 26px);
  min-height: 88px;
  margin: 6px;
  border: 1px solid rgba(224, 207, 164, 0.22);
  background:
    radial-gradient(circle at center, rgba(182, 159, 103, 0.12), transparent 46%),
    rgba(6, 11, 11, 0.24);
}

.card__back-emblem {
  width: min(58%, 64px);
  height: auto;
  opacity: 0.48;
}

.card__back-frame {
  fill: none;
  stroke: #dac99f;
  stroke-width: 1.5;
}

.card__back-head,
.card__back-body {
  fill: #dac99f;
}

.card--placeholder .card__name {
  color: rgba(229, 218, 190, 0.54);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.card--locked {
  pointer-events: auto;
}

.locked-card {
  --locked-border: rgba(231, 218, 182, 0.58);
  --locked-border-soft: rgba(231, 218, 182, 0.18);
  --locked-cyan: rgba(123, 198, 196, 0.72);
  --locked-paper: rgba(249, 235, 191, 0.9);
  --locked-muted: rgba(205, 192, 164, 0.68);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  border-color: var(--locked-border);
  color: var(--locked-paper);
  background:
    radial-gradient(circle at 50% 40%, rgba(123, 198, 196, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(12, 22, 22, 0.98), rgba(3, 9, 10, 0.995));
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 216, 0.08),
    inset 0 0 0 4px rgba(0, 0, 0, 0.32),
    0 5px 14px rgba(5, 8, 8, 0.34);
  cursor: default;
  filter: saturate(0.78) brightness(0.88);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}

.locked-card::before,
.locked-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.locked-card::before {
  z-index: -1;
  opacity: 0.66;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(0deg, rgba(123, 198, 196, 0.035) 0 1px, transparent 1px 6px);
}

.locked-card::after {
  z-index: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(231, 218, 182, 0.09), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 22%, transparent 76%, rgba(0, 0, 0, 0.34));
}

.locked-card:hover,
.locked-card.is-selected {
  border-color: rgba(249, 235, 191, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 216, 0.12),
    inset 0 0 0 4px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(123, 198, 196, 0.22),
    0 6px 18px rgba(5, 8, 8, 0.4);
  filter: saturate(0.86) brightness(0.94);
}

.locked-card__category,
.locked-card__state,
.locked-card__unlock {
  position: relative;
  z-index: 1;
  max-width: 100%;
  font-family: var(--font-display);
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.locked-card__category {
  align-self: start;
  color: var(--locked-cyan);
  font-size: 6.6px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.locked-card__seal {
  position: relative;
  z-index: 1;
  align-self: end;
  width: 46px;
  height: 46px;
  margin-bottom: 3px;
  opacity: 0.88;
  filter:
    drop-shadow(0 0 8px rgba(123, 198, 196, 0.18))
    drop-shadow(0 4px 7px rgba(0, 0, 0, 0.4));
}

.locked-card__seal-image {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(0.95) brightness(1.12);
  object-fit: contain;
}

.locked-card__state {
  color: var(--locked-paper);
  font-size: 8px;
  line-height: 1.08;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
}

.locked-card__unlock {
  align-self: end;
  color: var(--locked-muted);
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;
}

.card--support.card--locked.locked-card {
  padding: 12px 10px 13px;
}

.card.locked-card--tall {
  gap: 8px;
}

.card.locked-card--tall .locked-card__seal {
  width: 64px;
  height: 64px;
}

.card--discarding {
  transform-origin: center;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.46);
}

.has-card-tabletop-motion.is-battle-screen .card:not(.card--spent, .locked-card) {transform-origin:50% 16%;transition:transform 160ms cubic-bezier(.18,.78,.22,1),box-shadow 160ms ease}

.has-card-tabletop-motion.is-battle-screen .card:not(.card--spent, .locked-card):hover { box-shadow: 0 16px 28px rgba(0, 0, 0, .48), 0 0 0 1px rgba(236, 218, 171, .28); transform: translate3d(5px, -4px, 18px) rotate(-.5deg) scale(1.018); }

.has-card-tabletop-motion.is-battle-screen .card.is-selected { box-shadow: 0 19px 34px rgba(0, 0, 0, .54), 0 0 0 1px rgba(141, 255, 242, .48); transform: translate3d(12px, -8px, 28px) rotate(-1deg) scale(1.035); }

.has-card-tabletop-motion.is-battle-screen .card.card--spent { opacity: .08; filter: grayscale(1) brightness(.56); transform: translate3d(7px, 20px, 0) rotate(4deg) scale(.95); }

.card-fall-motion-layer { position: fixed; z-index: 120; inset: 0; overflow: hidden; perspective: 900px; pointer-events: none; }

.card--falling-ghost, .card-fall-shadow { position: fixed; margin: 0; pointer-events: none; transform-origin: 50% 16%; will-change: transform, opacity, filter; }

.card--falling-ghost { z-index: 2; box-shadow: 0 1px 0 rgba(255, 255, 255, .14), 0 18px 36px rgba(0, 0, 0, .52); backface-visibility: hidden; }

.card-fall-shadow { border-radius: 7px; background: #000b; }

.card-base-intake {
  position: fixed;
  z-index: 1;
  border: 2px solid rgba(255, 224, 139, .88);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 205, .9) 0 7%, rgba(255, 184, 76, .44) 18%, rgba(75, 244, 218, .22) 42%, transparent 70%);
  box-shadow: 0 0 10px rgba(255, 211, 107, .9), 0 0 28px rgba(75, 244, 218, .58);
  opacity: 0;
  pointer-events: none;
}

.is-card-base-deploying .recon-panel {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .has-card-tabletop-motion.is-battle-screen .card:not(.card--spent, .locked-card) { transition-duration: .01ms; }
}

.card__tag,
.card__desc {
  display: none;
}

.card__name {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 5px 7px 4px;
  border: 1px solid rgba(234, 219, 179, 0.34);
  border-radius: 1px;
  color: rgba(249, 239, 214, 0.96);
  background:
    linear-gradient(180deg, #17201f, #08100f);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px rgba(0, 0, 0, 0.56),
    0 1px 3px rgba(0, 0, 0, 0.2);
  font-family: var(--font-ui);
  font-size: 7.8px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
}

.card__art {
  position: absolute;
  z-index: 1;
  top: 36px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  border: 1px solid rgba(65, 55, 37, 0.42);
  border-radius: 2px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, #e8c977, #a9781d);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -16px 20px rgba(14, 11, 7, 0.1);
  font: 700 23px/1 var(--font-display);
  overflow: hidden;
}

.card__art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.card:is(.card--unit, .card--support) .card__art {
  top: 4px;
  right: 4px;
  bottom: 42px;
  left: 4px;
  border-radius: 2px;
  color: #eaf8fb;
  background:
    radial-gradient(ellipse at 50% 75%, rgba(246, 232, 190, 0.16), transparent 30%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #081012, #10282c 58%, #081012);
}

.card:is(.card--unit, .card--support) .card__art:has(img) {
  border-color: rgba(246, 232, 190, 0.82);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -18px 22px rgba(14, 11, 7, 0.1);
  background:
    radial-gradient(ellipse at 50% 75%, rgba(246, 232, 190, 0.16), transparent 30%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #081012, #10282c 58%, #081012);
}

.card--family-doctrine .card__art {
  border-color: rgba(117, 213, 205, 0.58);
  background:
    radial-gradient(circle at 50% 42%, rgba(117, 213, 205, 0.22), transparent 52%),
    repeating-linear-gradient(135deg, rgba(240, 185, 77, 0.055) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #071313, #122423 58%, #060d0d);
}

.card--family-doctrine .card__art .doctrine-card-mark {
  width: 62px;
  height: 72px;
}

.card--family-doctrine .card__name {
  border-color: rgba(117, 213, 205, 0.36);
  color: #fff0c4;
  background:
    linear-gradient(180deg, rgba(27, 56, 52, 0.96), rgba(6, 16, 15, 0.96));
}

.card--unit .card__art:has(img) img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center center;
  transform: none;
  filter:
    saturate(1.05)
    contrast(1.06)
    brightness(1.02);
}

.card:is(.card--unit, .card--support) {
  padding: 1px;
  border-color: rgba(246, 232, 190, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 244, 205, 0.96), rgba(214, 198, 160, 0.94));
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.56);
}

.card:is(.card--unit, .card--support)::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 3px;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(246, 232, 190, 0.1), transparent 28%, transparent 73%, rgba(0, 0, 0, 0.22));
  mix-blend-mode: screen;
  opacity: 0.34;
}

.card:is(.card--unit, .card--support) .card__name {
  top: auto;
  right: 5px;
  bottom: 5px;
  left: 5px;
  min-height: 34px;
  border-color: rgba(246, 232, 190, 0.72);
  color: #fff4b8;
  background:
    linear-gradient(90deg, rgba(246, 232, 190, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(7, 20, 22, 0.96), rgba(2, 8, 10, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 7px rgba(0, 0, 0, 0.4);
  font-size: 8.3px;
}

.is-battle-screen .rail__cards .card:is(.card--unit, .card--support) .card__art,
#new-basecamp-screen .battle-hud-card:is(.card--unit, .card--support) .card__art {
  bottom: 64px;
}

.is-battle-screen .rail__cards .card:is(.card--unit, .card--support) .card__name,
#new-basecamp-screen .battle-hud-card:is(.card--unit, .card--support) .card__name {
  min-height: 56px;
  padding: 8px 8px 7px;
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

.unit-dossier-card.card--unit {
  border-color: rgba(119, 92, 184, 0.88);
  border-radius: 2px;
  color: #fff8d5;
  background:
    linear-gradient(180deg, rgba(26, 32, 42, 0.98), rgba(2, 7, 9, 0.99));
  box-shadow:
    0 0 0 1px rgba(43, 249, 230, 0.28),
    0 9px 18px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(202, 184, 255, 0.26);
}

.unit-dossier-card.card--unit::before {
  z-index: 4;
  inset: 4px;
  border: 1px solid rgba(39, 238, 224, 0.24);
  background:
    linear-gradient(180deg, rgba(160, 126, 255, 0.12), transparent 18%, transparent 68%, rgba(0, 0, 0, 0.74));
  mix-blend-mode: normal;
  opacity: 1;
}

.unit-dossier-card.card--unit::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 5px;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 10%, rgba(43, 249, 230, 0.14), transparent 22%),
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.72) 86%, rgba(0, 0, 0, 0.94));
}

.unit-dossier-card.card--unit .card__art,
.is-battle-screen .rail__cards .unit-dossier-card.card--unit .card__art {
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-color: rgba(43, 249, 230, 0.2);
  background:
    radial-gradient(circle at 60% 18%, rgba(43, 249, 230, 0.14), transparent 34%),
    linear-gradient(180deg, #061112, #020608);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.58);
}

.unit-dossier-card.card--unit .card__art img {
  transform: scale(1.1);
  transform-origin: 50% 32%;
  filter:
    saturate(1.08)
    contrast(1.1)
    brightness(0.94)
    drop-shadow(0 0 5px rgba(43, 249, 230, 0.54));
}

.unit-dossier-card__overlay {
  position: absolute;
  z-index: 6;
  inset: 10px 9px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.unit-dossier-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 22px;
}

.unit-dossier-card__rank {
  width: max-content;
  min-width: 48px;
  padding: 4px 6px 3px;
  border: 1px solid rgba(169, 142, 255, 0.72);
  color: #f4efff;
  background: rgba(20, 16, 42, 0.78);
  box-shadow: inset 0 0 8px rgba(169, 142, 255, 0.22);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.unit-dossier-card__lower {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.unit-dossier-card__title {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #fff3c4;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 8px rgba(255, 230, 144, 0.32);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

.unit-dossier-card__title--long {
  font-size: 16px;
  line-height: 1.18;
}

.unit-dossier-card__title--compact {
  font-size: 14px;
}

.unit-dossier-card__health {
  display: grid;
  grid-template-columns: 1fr;
}

.unit-dossier-card__health-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  min-width: 0;
}

.unit-dossier-card__health-segment {
  height: 5px;
  border: 1px solid rgba(55, 200, 120, 0.28);
  background: rgba(3, 18, 10, 0.76);
}

.unit-dossier-card__health-segment.is-filled {
  border-color: rgba(91, 226, 147, 0.72);
  background:
    linear-gradient(180deg, #41d483, #188f4b 74%, #0c5d2e);
  box-shadow: 0 0 5px rgba(55, 200, 120, 0.48);
}

.unit-dossier-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.unit-dossier-card__chip {
  flex: 1 1 42px;
  min-width: 0;
  padding: 4px 4px 3px;
  border: 1px solid rgba(43, 249, 230, 0.42);
  color: #f5fffb;
  background: rgba(8, 28, 29, 0.82);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-dossier-card__chip.is-shielded {
  border-color: rgba(43, 249, 230, 0.62);
  color: #8ffff5;
}

.unit-dossier-card__chip.is-anthem-boosted {
  border-color: rgba(255, 218, 101, 0.82);
  color: #fff1b3;
  background: linear-gradient(90deg, rgba(181, 56, 42, 0.72), rgba(85, 28, 31, 0.86));
  box-shadow:
    0 0 8px rgba(255, 204, 79, 0.22),
    inset 0 1px rgba(255, 245, 199, 0.16);
}

.battle-hud-card.card--unit.is-anthem-boosted {
  border-color: rgba(255, 218, 101, 0.9);
  box-shadow:
    0 0 0 2px rgba(187, 57, 42, 0.52),
    0 0 20px rgba(255, 207, 77, 0.3),
    0 10px 26px rgba(0, 0, 0, 0.42),
    inset 0 0 24px rgba(202, 61, 43, 0.12);
}

.card--id-bureauVisitorLiaisonOfficer,
.card--id-bureau-compulsory-arbitration-unit { --unit-accent: #69ffb2; --unit-accent-2: #ff4d6a; --unit-deep: #10241c; }
.card--id-hero { --unit-accent: #ff4d6a; --unit-accent-2: #ffd85a; --unit-deep: #271016; }
.card--id-scout { --unit-accent: #ffd85a; --unit-accent-2: #48ffd2; --unit-deep: #251b08; }
.card--id-bureauWorkplaceSafetyEnforcer { --unit-accent: #ff9a3c; --unit-accent-2: #5bffcb; --unit-deep: #281606; }
.card--id-bureauOutreachOfficer { --unit-accent: #b85cff; --unit-accent-2: #ffef6a; --unit-deep: #1c102a; }

.card--support .card__art:has(img) img {
  width: 100%;
  height: 100%;
  padding: 3px 2px;
  object-fit: cover;
  object-position: center;
  transform: none;
  transform-origin: center;
  filter: saturate(1.08) contrast(1.08) brightness(1.02);
}

.card--support .card__art img.card__image--support-poster {
  object-fit: cover;
  object-position: center;
  transform: none;
  filter: saturate(1.08) contrast(1.08) brightness(1.02);
}

.card--support:not(.locked-card) {
  --support-red: #a9473d;
  --support-red-hot: #d56858;
  --support-red-soft: rgba(213, 104, 88, 0.34);
  --support-ember: #f0b56e;
  border-color: rgba(169, 71, 61, 0.86);
  border-radius: 2px;
  color: #fff0cc;
  background:
    linear-gradient(180deg, rgba(33, 22, 20, 0.98), rgba(7, 6, 6, 0.99));
  box-shadow:
    0 0 0 1px rgba(240, 181, 110, 0.16),
    0 9px 18px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(213, 104, 88, 0.28);
}

.card--support:not(.locked-card)::before {
  z-index: 4;
  inset: 4px;
  border: 1px solid rgba(213, 104, 88, 0.28);
  background:
    linear-gradient(180deg, rgba(213, 104, 88, 0.2), transparent 16%, transparent 70%, rgba(0, 0, 0, 0.72)),
    repeating-linear-gradient(0deg, rgba(255, 220, 176, 0.06) 0 1px, transparent 1px 5px);
  mix-blend-mode: normal;
  opacity: 1;
}

.card--support:not(.locked-card)::after {
  z-index: 2;
  inset: 5px;
  border: 0;
  background:
    radial-gradient(circle at 76% 10%, rgba(213, 104, 88, 0.18), transparent 23%),
    radial-gradient(circle at 24% 82%, rgba(240, 181, 110, 0.12), transparent 24%),
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.7) 86%, rgba(0, 0, 0, 0.93));
}

.card--support:not(.locked-card) .card__art,
.card--support:not(.locked-card) .card__art:has(img) {
  top: 5px;
  right: 5px;
  bottom: 56px;
  left: 5px;
  border-color: rgba(213, 104, 88, 0.34);
  background:
    radial-gradient(circle at 56% 18%, rgba(213, 104, 88, 0.15), transparent 34%),
    linear-gradient(180deg, #170b0a, #060505);
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 188, 0.08),
    inset 0 0 22px rgba(0, 0, 0, 0.58);
}

.card--support:not(.locked-card) .card__art:has(img) img,
.card--support:not(.locked-card) .card__art img.card__image--support-poster {
  padding: 0;
  filter:
    saturate(1.08)
    contrast(1.1)
    brightness(0.96)
    drop-shadow(0 0 5px rgba(213, 104, 88, 0.42));
}

.card--support:not(.locked-card) .card__name {
  right: 8px;
  bottom: 10px;
  left: 8px;
  min-height: 38px;
  border-color: rgba(213, 104, 88, 0.6);
  color: #ffe5b2;
  background:
    linear-gradient(90deg, rgba(213, 104, 88, 0.18), transparent 34%, rgba(240, 181, 110, 0.08)),
    linear-gradient(180deg, rgba(28, 12, 10, 0.98), rgba(6, 5, 5, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 180, 0.08),
    0 0 10px rgba(213, 104, 88, 0.16),
    0 2px 7px rgba(0, 0, 0, 0.42);
}

.card:has(img[src*="land"],img[src*="ipbm"],img[src*="anthem"],img[src*="screw-the-un"],img[src*="diktat"],img[src*="marx"],img[src*="bureau-scrapper-drone"],img[src*="bureau-perimeter-mine"],img[src*="concussion-charge"],img[src*="danger-close"],img[src*="violence-redux"],img[src*="false-flag"],img[src*="extra-shifts"],img[src*="fortress-pulse"],img[src*="martian-power"])::before,
.card:has(img[src*="land"],img[src*="ipbm"],img[src*="anthem"],img[src*="screw-the-un"],img[src*="diktat"],img[src*="marx"],img[src*="bureau-scrapper-drone"],img[src*="bureau-perimeter-mine"],img[src*="concussion-charge"],img[src*="danger-close"],img[src*="violence-redux"],img[src*="false-flag"],img[src*="extra-shifts"],img[src*="fortress-pulse"],img[src*="martian-power"])::after { display: none; }

.card:has(img[src*="land"],img[src*="ipbm"],img[src*="anthem"],img[src*="screw-the-un"],img[src*="diktat"],img[src*="marx"],img[src*="bureau-scrapper-drone"],img[src*="bureau-perimeter-mine"],img[src*="concussion-charge"],img[src*="danger-close"],img[src*="violence-redux"],img[src*="false-flag"],img[src*="extra-shifts"],img[src*="fortress-pulse"],img[src*="martian-power"]) .card__art,
.card:has(img[src*="land"],img[src*="ipbm"],img[src*="anthem"],img[src*="screw-the-un"],img[src*="diktat"],img[src*="marx"],img[src*="bureau-scrapper-drone"],img[src*="bureau-perimeter-mine"],img[src*="concussion-charge"],img[src*="danger-close"],img[src*="violence-redux"],img[src*="false-flag"],img[src*="extra-shifts"],img[src*="fortress-pulse"],img[src*="martian-power"]) .card__art:has(img),
.is-battle-screen .rail__cards .card:has(img[src*="land"],img[src*="ipbm"],img[src*="anthem"],img[src*="screw-the-un"],img[src*="diktat"],img[src*="marx"],img[src*="bureau-scrapper-drone"],img[src*="bureau-perimeter-mine"],img[src*="concussion-charge"],img[src*="danger-close"],img[src*="violence-redux"],img[src*="false-flag"],img[src*="extra-shifts"],img[src*="fortress-pulse"],img[src*="martian-power"]) .card__art {
  inset: 1px; border: 0; box-shadow: none;
}

.card:has(img[src*="land"],img[src*="ipbm"],img[src*="anthem"],img[src*="screw-the-un"],img[src*="diktat"],img[src*="marx"],img[src*="bureau-scrapper-drone"],img[src*="bureau-perimeter-mine"],img[src*="concussion-charge"],img[src*="danger-close"],img[src*="violence-redux"],img[src*="false-flag"],img[src*="extra-shifts"],img[src*="fortress-pulse"],img[src*="martian-power"]) .card__art:has(img) img {
  padding: 0; filter: none;
}

.card:not(.card--id-cid-screw-the-un):not(.card--id-cidscrewtheun):has(img[src*="land"],img[src*="ipbm"],img[src*="anthem"],img[src*="screw-the-un"],img[src*="diktat"],img[src*="marx"],img[src*="bureau-scrapper-drone"],img[src*="bureau-perimeter-mine"],img[src*="concussion-charge"],img[src*="danger-close"],img[src*="violence-redux"],img[src*="false-flag"],img[src*="extra-shifts"],img[src*="fortress-pulse"],img[src*="martian-power"]) .card__name { display: none; }

.card.card--id-cid-screw-the-un .card__name,
.card.card--id-cidscrewtheun .card__name {
  top: 4.1%;
  right: 6.4%;
  bottom: auto;
  left: 6.4%;
  display: flex;
  min-height: 12.2%;
  padding: 0 4px;
  border: 0;
  color: #f1deb2;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.035em;
  text-shadow:
    0 1px 0 rgba(49, 16, 10, 0.72),
    0 0 4px rgba(243, 216, 163, 0.1);
  white-space: nowrap;
}

.card.card--id-breach-trap::before,
.card.card--id-breach-trap::after,
.card.card--id-breachtrap::before,
.card.card--id-breachtrap::after {
  display: none;
}

.card.card--id-breach-trap .card__art,
.card.card--id-breach-trap .card__art:has(img),
.is-battle-screen .rail__cards .card.card--id-breach-trap .card__art,
.card.card--id-breachtrap .card__art,
.card.card--id-breachtrap .card__art:has(img),
.is-battle-screen .rail__cards .card.card--id-breachtrap .card__art {
  inset: 1px;
  border: 0;
  box-shadow: none;
}

.card.card--id-breach-trap .card__art:has(img) img,
.card.card--id-breachtrap .card__art:has(img) img {
  padding: 0;
  filter: none;
}

.card.card--id-breach-trap .card__name,
.card.card--id-breachtrap .card__name {
  display: none;
}

.card.card--id-breach-trap.card--active-limit,
.card.card--id-breachtrap.card--active-limit {
  cursor: not-allowed;
  filter: saturate(0.42) brightness(0.62);
}

.card.card--id-breach-trap.card--active-limit::after,
.card.card--id-breachtrap.card--active-limit::after {
  position: absolute;
  z-index: 8;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: block;
  padding: 6px 5px;
  border: 1px solid rgba(221, 74, 58, 0.84);
  color: #ffe5bb;
  background: rgba(52, 10, 7, 0.94);
  content: "ONE ACTIVE // ARMED";
  font-family: var(--font-label);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-align: center;
}

.unit-rank-marker {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  align-items: center;
  padding: 2px;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.48));
  pointer-events: none;
}

.unit-rank-marker__mark {
  width: 5px;
  height: 13px;
  transform: skewX(-16deg);
  border: 1px solid rgba(246, 232, 190, 0.2);
  background: rgba(4, 10, 10, 0.62);
  box-shadow:
    inset 0 -1px rgba(0, 0, 0, 0.52),
    inset 0 1px rgba(255, 255, 255, 0.06);
}

.unit-rank-marker__mark.is-active {
  border-color: color-mix(in srgb, var(--unit-accent) 68%, #f6e8bf);
  background: linear-gradient(180deg, color-mix(in srgb, var(--unit-accent) 72%, #fff2bd), var(--unit-accent));
  box-shadow:
    0 0 5px color-mix(in srgb, var(--unit-accent) 42%, transparent),
    inset 0 1px rgba(255, 255, 255, 0.42);
}

.unit-card-status {
  position: absolute;
  z-index: 4;
  left: 7px;
  right: 7px;
  bottom: 42px;
  display: grid;
  gap: 4px;
  pointer-events: none;
}

.unit-card-status__mods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

.unit-card-status__mod {
  max-width: 100%;
  padding: 3px 6px 2px;
  border: 1px solid color-mix(in srgb, var(--unit-accent) 48%, rgba(246, 232, 190, 0.42));
  color: #f8efd8;
  background: rgba(12, 16, 15, 0.82);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  font-family: var(--font-display);
  font-size: 7.3px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.unit-card-status__mod {
  border-color: color-mix(in srgb, var(--unit-accent-2) 62%, rgba(220, 184, 97, 0.68));
  color: #ffe2a0;
  background: rgba(44, 32, 14, 0.84);
  font-size: 7px;
}

/* Support cards share the unit card shell; only the visualization content differs. */

.card--effect-damageRing .card__art {
  color: #e6b96c;
  background:
    radial-gradient(circle at 50% 70%, rgba(230, 142, 68, 0.26), transparent 45%),
    linear-gradient(160deg, #6f4935, #302c28);
}

.card--effect-repairBase .card__art {
  color: #d7c784;
  background:
    radial-gradient(circle at 50% 42%, rgba(191, 190, 124, 0.25), transparent 48%),
    linear-gradient(160deg, #626650, #30342e);
}

.card--effect-freeze .card__art {
  color: #a9c5d0;
  background:
    radial-gradient(circle at 50% 45%, rgba(132, 168, 184, 0.27), transparent 50%),
    linear-gradient(160deg, #4a5260, #282d35);
}

.support-illustration {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.support-illustration__frame {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.34;
}

.support-illustration__ground {
  fill: currentColor;
  opacity: 0.2;
}

.support-illustration__projectile {
  fill: #ede0bc;
  stroke: currentColor;
  stroke-width: 1.2;
}

.support-illustration__trail,
.support-illustration__target,
.support-illustration__tool,
.support-illustration__antenna,
.support-illustration__wave,
.support-illustration__pulse,
.support-illustration__field {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-illustration__target {
  stroke-width: 1.5;
  opacity: 0.8;
}

.support-illustration__target--inner {
  stroke: #f4dfad;
}

.support-illustration__shield {
  fill: rgba(216, 203, 145, 0.18);
  stroke: currentColor;
  stroke-width: 2.4;
}

.support-illustration__cross {
  fill: #e7d59a;
  opacity: 0.88;
}

.support-illustration__tool-head {
  fill: #d8c78d;
  stroke: #554f3d;
  stroke-width: 1;
}

.support-illustration__emitter {
  fill: rgba(169, 197, 208, 0.2);
  stroke: currentColor;
  stroke-width: 2;
}

.support-illustration__wave {
  opacity: 0.46;
}

.support-illustration__pulse {
  stroke: #d9e6e8;
  stroke-width: 2.6;
}

.support-illustration__field {
  fill: rgba(167, 199, 210, 0.13);
  opacity: 0.82;
}

.card--effect-damageRing {
  --support-accent: #9e4c2e;
}

.card--effect-repairBase {
  --support-accent: #66704e;
}

.card--effect-freeze {
  --support-accent: #53667a;
}

.card--support.card--locked.locked-card {
  --support-locked-gold: #e0bd69;
  --support-locked-gold-hot: #ffe29a;
  --support-locked-silver: #d8d3c4;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 16px 13px 15px;
  border-color: rgba(224, 183, 88, 0.92);
  color: var(--support-locked-silver);
  background:
    radial-gradient(circle at 50% 43%, rgba(224, 183, 88, 0.12), transparent 34%),
    linear-gradient(180deg, #10100d 0%, #030303 54%, #050504 100%);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(255, 230, 160, 0.2),
    inset 0 0 0 4px rgba(0, 0, 0, 0.72);
  filter: none;
}

.card--support.card--locked.locked-card::before {
  z-index: -1;
  inset: 6px;
  width: auto;
  height: auto;
  opacity: 1;
  border: 1px solid rgba(224, 183, 88, 0.34);
  background:
    repeating-linear-gradient(135deg, rgba(224, 183, 88, 0.045) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(0deg, rgba(216, 211, 196, 0.028) 0 1px, transparent 1px 7px);
}

.card--support.card--locked.locked-card::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%, transparent 74%, rgba(0, 0, 0, 0.48)),
    radial-gradient(circle at 50% 50%, transparent 36%, rgba(0, 0, 0, 0.32));
}

.card--support.card--locked.locked-card .locked-card__seal {
  align-self: center;
  width: 68px;
  height: 68px;
  margin-top: 8px;
  margin-bottom: 0;
  opacity: 1;
  filter:
    drop-shadow(0 0 10px rgba(224, 183, 88, 0.32))
    drop-shadow(0 7px 8px rgba(0, 0, 0, 0.5));
}

.card--support.card--locked.locked-card .locked-card__seal-image {
  filter: grayscale(0.32) sepia(0.34) saturate(1.36) brightness(1.1) contrast(1.05);
}

.card--support.card--locked.locked-card .locked-card__state {
  margin-top: 3px;
  color: var(--support-locked-gold-hot);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.95),
    0 0 9px rgba(224, 183, 88, 0.24);
}

.card--support.card--locked.locked-card .locked-card__unlock {
  max-width: 120px;
  margin-top: 8px;
  color: var(--support-locked-silver);
  font-size: 10px;
  line-height: 1.18;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95);
}

/* A locked Support slot is just a red card back and one centred painted lock. */
.card--support.card--locked.locked-card {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  padding: 14px;
  border: 1px solid #bd4f40;
  border-radius: 1px;
  background: linear-gradient(180deg, #551915, #210a08 58%, #0b0504);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.4),
    0 7px 16px rgba(0, 0, 0, 0.34);
  filter: none;
}

.card--support.card--locked.locked-card::before,
.card--support.card--locked.locked-card::after {
  content: none;
}

.card--support.card--locked.locked-card:hover,
.card--support.card--locked.locked-card.is-selected {
  border-color: #d96a56;
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.36),
    0 8px 18px rgba(0, 0, 0, 0.4);
  filter: none;
}

.card--support.card--locked.locked-card .locked-card__seal {
  position: static;
  display: grid;
  place-items: center;
  align-self: center;
  width: 100%;
  height: auto;
  margin: 0;
  opacity: 1;
  filter: none;
}

.card--support.card--locked.locked-card .locked-card__seal::before,
.card--support.card--locked.locked-card .locked-card__seal::after {
  content: none;
}

.card--support.card--locked.locked-card .locked-card__seal-image {
  display: block;
  width: min(88%, 104px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.34));
}

.card--support:not(.locked-card) .card__name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.045em;
}

.banner[hidden] {
  display: none;
}

.banner {
  position: absolute;
  z-index: 20;
  inset: 4%;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 20px);
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 24%, rgba(227, 183, 83, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(4, 7, 8, 0.76), rgba(2, 4, 5, 0.9));
  backdrop-filter: blur(9px) saturate(0.72);
  text-align: center;
}

.is-battle-debrief .board-frame > :not(.banner) {
  filter: blur(4px) brightness(0.46) saturate(0.72);
  opacity: 0.7;
}

.is-battle-debrief .rail,
.is-battle-debrief .battle-action-panel,
.is-battle-debrief .battle-vdu,
.is-battle-debrief .battle-command-rail,
.is-battle-debrief .dock,
.is-battle-debrief .enemy-strength-hud,
.is-battle-debrief .discard-selected,
.is-battle-debrief #menu-btn,
.is-battle-debrief .tutorial-spotlight,
.is-battle-debrief #toast,
.is-battle-debrief .score-toast {
  filter: blur(4px) brightness(0.42) saturate(0.65);
  opacity: 0.46;
  pointer-events: none;
}


.banner__panel {
  position: relative;
  box-sizing: border-box;
  width: min(860px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(16px, 2.1vw, 24px);
  border: 1px solid rgba(232, 216, 172, 0.45);
  background:
    linear-gradient(180deg, rgba(25, 31, 27, 0.99), rgba(7, 15, 15, 0.995)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.72),
    0 0 0 999vmax rgba(1, 4, 5, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.banner__stage {
  animation: banner-stage-in 0.34s ease-out both;
}

.banner__stage[data-stage="result"] {
  animation-delay: 0.04s;
}

.banner__stage[data-stage="brief"] {
  animation-delay: 0.14s;
}

.banner__stage[data-stage="score"] {
  animation-delay: 0.26s;
}

.banner__stage[data-stage="details"] {
  animation-delay: 0.34s;
}

.banner__stage[data-stage="rewards"] {
  animation-delay: 0.46s;
}

.banner__stage[data-stage="actions"] {
  animation-delay: 0.58s;
}

.banner.win {
  background:
    radial-gradient(circle at 50% 24%, rgba(224, 183, 88, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(4, 9, 9, 0.78), rgba(2, 4, 5, 0.92));
  backdrop-filter: blur(9px) saturate(0.72);
}

.banner.win .banner__panel {
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.72),
    0 0 0 999vmax rgba(1, 4, 5, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.banner__panel::before,
.banner__panel::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(224, 183, 88, 0.85), transparent);
  opacity: 0.8;
}

.banner__panel::before {
  top: 14px;
}

.banner__panel::after {
  bottom: 14px;
}

.banner__kicker,
.banner__title,
.banner__subtitle,
.banner__metric-label,
.banner__metric-value,
.banner__metric-note {
  margin: 0;
}

.banner__header {
  display: grid;
  gap: clamp(5px, 1vw, 8px);
  margin-top: clamp(10px, 1.2vw, 14px);
}

.banner__status-strip {
  display: grid;
  grid-template-columns: 0.68fr 1.35fr 0.78fr;
  gap: 8px;
  margin-bottom: clamp(8px, 1.2vw, 12px);
  text-align: left;
}

.banner__status-cell {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(232, 216, 172, 0.18);
  background:
    linear-gradient(90deg, rgba(224, 183, 88, 0.12), rgba(4, 9, 10, 0.46)),
    rgba(4, 9, 10, 0.48);
}

.banner__status-label {
  color: rgba(244, 230, 200, 0.56);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.banner__status-value {
  margin-top: 4px;
  color: #fff8df;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.18vw, 16px);
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.banner__kicker {
  color: #e0bd63;
  font-size: clamp(10px, 1.2vw, 13px);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.banner__title {
  color: #fffaf0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.8vw, 46px);
  line-height: 0.98;
  text-transform: uppercase;
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.48);
  overflow-wrap: anywhere;
}

.banner__subtitle {
  max-width: 56ch;
  margin: 0 auto;
  color: rgba(244, 230, 200, 0.82);
  font-size: clamp(13px, 1.5vw, 17px);
  line-height: 1.4;
}

.banner__stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  align-self: center;
}

.banner__star {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(232, 216, 172, 0.28);
  color: rgba(244, 230, 200, 0.25);
  background: rgba(0, 0, 0, 0.22);
  font-size: 20px;
  line-height: 1;
}

.banner__star.is-earned {
  border-color: rgba(255, 221, 124, 0.88);
  color: #ffdd7c;
  background: linear-gradient(180deg, rgba(214, 165, 61, 0.34), rgba(109, 74, 21, 0.44));
  box-shadow: 0 0 20px rgba(224, 183, 88, 0.24);
}

.banner__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: clamp(8px, 1.2vw, 12px);
}

.banner__result-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  margin-top: clamp(12px, 1.6vw, 18px);
  padding: clamp(12px, 1.5vw, 16px);
  border: 1px solid rgba(224, 183, 88, 0.42);
  background:
    linear-gradient(90deg, rgba(224, 183, 88, 0.2), rgba(6, 12, 12, 0.54) 20%, rgba(6, 12, 12, 0.54) 80%, rgba(224, 183, 88, 0.14)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 0, 0, 0.22);
}

.banner__score-block,
.banner__reward-block {
  min-width: 0;
  text-align: left;
}

.banner__reward-block {
  text-align: right;
}

.banner__score-value,
.banner__reward-value {
  margin-top: 5px;
  color: #fff8df;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.42);
}

.banner__reward-value {
  color: #f6d883;
  font-size: clamp(22px, 2.9vw, 38px);
}

.banner__metric {
  min-width: 0;
  padding: 9px 8px 8px;
  border: 1px solid rgba(232, 216, 172, 0.22);
  background: rgba(5, 10, 10, 0.38);
}

.banner__metric-label,
.banner__metric-note {
  color: rgba(244, 230, 200, 0.62);
  font-size: 10px;
  text-transform: uppercase;
}

.banner__metric-value {
  margin-top: 4px;
  color: #fff8df;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 22px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.banner__metric-note {
  margin-top: 5px;
}

.banner__unlock {
  display: grid;
  gap: 2px;
  max-width: none;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid rgba(125, 229, 219, 0.42);
  background:
    linear-gradient(90deg, rgba(80, 210, 202, 0.16), rgba(8, 18, 18, 0.42)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 10px);
  box-shadow: inset 3px 0 0 rgba(125, 229, 219, 0.68);
  text-align: left;
}

.banner__unlock-kicker,
.banner__unlock-title,
.banner__unlock-copy {
  margin: 0;
}

.banner__unlock-kicker {
  color: #7de5db;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.banner__unlock-title {
  color: #fff8df;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1;
  text-transform: uppercase;
}

.banner__unlock-copy {
  color: rgba(244, 230, 200, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.banner__medals {
  display: grid;
  gap: 7px;
  max-width: none;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(224, 183, 88, 0.36);
  background:
    linear-gradient(90deg, rgba(224, 183, 88, 0.16), rgba(8, 18, 18, 0.46)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 10px);
  box-shadow: inset 3px 0 0 rgba(224, 183, 88, 0.62);
  text-align: left;
}

.banner__medals-kicker,
.banner__medals-copy,
.banner__medal-name {
  margin: 0;
}

.banner__medals-kicker {
  color: #e0bd63;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.banner__medals-copy {
  color: rgba(244, 230, 200, 0.68);
  font-size: 12px;
}

.banner__medals-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.banner__medal {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(232, 216, 172, 0.22);
  background: rgba(3, 10, 11, 0.42);
}

.banner__medal-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(224, 183, 88, 0.54);
  color: #fff8df;
  background: rgba(224, 183, 88, 0.16);
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1;
}

.banner__medal-name {
  min-width: 0;
  color: #fff8df;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.4vw, 17px);
  line-height: 1;
  text-transform: uppercase;
}

.banner__medal--more {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  color: rgba(244, 230, 200, 0.72);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.banner__reward-row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  gap: 10px;
  align-items: stretch;
  margin: clamp(8px, 1.2vw, 12px) auto 0;
  width: min(780px, 100%);
}

.banner__reward-row .banner__unlock:only-child,
.banner__reward-row .banner__medals:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(680px, 100%);
}

.banner__reward-row .banner__medals-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.banner__reward-row .banner__medal-name {
  font-size: clamp(12px, 1.2vw, 15px);
}

.banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(8px, 1.2vw, 12px);
}

.banner button {
  min-width: 220px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid rgba(232, 216, 172, 0.48);
  color: #17201f;
  background: linear-gradient(180deg, #e0bd63, #b98526);
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.38);
}

.banner button:not(.banner__primary) {
  color: #f4e6c8;
  background: linear-gradient(180deg, rgba(72, 78, 75, 0.96), rgba(42, 47, 45, 0.96));
}

.banner.lose .banner__panel {
  border-color: rgba(255, 119, 96, 0.48);
  background:
    linear-gradient(180deg, rgba(47, 35, 32, 0.96), rgba(17, 18, 18, 0.97)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px);
}

.banner.lose .banner__panel::before,
.banner.lose .banner__panel::after {
  background: linear-gradient(90deg, transparent, rgba(255, 119, 96, 0.85), transparent);
}

.banner.lose .banner__kicker {
  color: #ffad91;
}

.banner.lose .banner__status-cell,
.banner.lose .banner__result-card {
  border-color: rgba(255, 119, 96, 0.3);
  background:
    linear-gradient(90deg, rgba(255, 119, 96, 0.16), rgba(13, 10, 10, 0.56)),
    rgba(12, 8, 8, 0.52);
}

.banner.lose .banner__score-value,
.banner.lose .banner__reward-value {
  color: #ffddc9;
}

@keyframes banner-stage-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .banner {
    inset: 4%;
    padding: 12px;
  }

  .banner__panel {
    width: 100%;
    padding: 22px 16px;
  }

  .banner__status-strip,
  .banner__result-card,
  .banner__reward-row {
    grid-template-columns: 1fr;
  }

  .banner__reward-row .banner__unlock:only-child,
  .banner__reward-row .banner__medals:only-child {
    width: 100%;
  }

  .banner__score-block,
  .banner__reward-block {
    text-align: center;
  }

  .banner__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .banner__medals-list {
    grid-template-columns: 1fr;
  }

  .banner button {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner__stage {
    animation: none;
  }
}

/* After-action dossier: fixed, campaign-led debrief presentation. */
.banner {
  --debrief-frame-art: url("assets/generated-art/ui/shockframe/panel-frame-clean-v1.png");
  --debrief-row-art: url("assets/generated-art/ui/shockframe/table-row-v1.png");
  --debrief-row-active-art: url("assets/generated-art/ui/shockframe/table-row-highlight-v1.png");
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: clamp(18px, 3vw, 42px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(1, 8, 10, 0.94), rgba(2, 12, 14, 0.7) 46%, rgba(2, 8, 10, 0.91)),
    linear-gradient(180deg, rgba(3, 10, 12, 0.5), rgba(2, 6, 8, 0.82)),
    var(--battle-bg) center / cover no-repeat,
    #02080a;
  backdrop-filter: none;
  color: #fff2bd;
  text-align: left;
  animation: banner-veil-in 240ms ease-out both;
}

.banner::before,
.banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.banner::before {
  inset: 10px;
  border: 1px solid rgba(54, 226, 207, 0.48);
  clip-path: polygon(0 0, 6% 0, 6% 2px, 94% 2px, 94% 0, 100% 0, 100% 8%, calc(100% - 2px) 8%, calc(100% - 2px) 92%, 100% 92%, 100% 100%, 94% 100%, 94% calc(100% - 2px), 6% calc(100% - 2px), 6% 100%, 0 100%, 0 92%, 2px 92%, 2px 8%, 0 8%);
  box-shadow: inset 0 0 34px rgba(54, 226, 207, 0.05);
}

.banner::after {
  inset: 0;
  opacity: 0.2;
  background: repeating-linear-gradient(0deg, rgba(117, 213, 205, 0.06) 0 1px, transparent 1px 6px);
}

.banner__panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  box-sizing: border-box;
  width: min(1180px, 100%);
  height: min(720px, 100%);
  max-height: 100%;
  padding: 18px;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(180deg, rgba(2, 20, 23, 0.94), rgba(1, 8, 11, 0.985)),
    radial-gradient(circle at 42% 18%, rgba(54, 226, 207, 0.1), transparent 46%),
    var(--debrief-frame-art) center / 100% 100% no-repeat,
    #02080a;
  background-blend-mode: normal, normal, screen, normal;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.68),
    inset 0 0 0 1px rgba(54, 226, 207, 0.16),
    inset 0 0 44px rgba(54, 226, 207, 0.05);
  animation: banner-dossier-in 360ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

.banner__panel::before,
.banner__panel::after {
  left: 22px;
  right: 22px;
  height: 2px;
  opacity: 0.76;
  background: linear-gradient(90deg, transparent, rgba(54, 226, 207, 0.82), transparent);
}

.banner__status-strip {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  margin: 0;
  padding: 3px 4px 9px;
  border-bottom: 1px solid rgba(54, 226, 207, 0.18);
}

.banner__mission-file {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.banner__status-label,
.banner__identity-label {
  color: rgba(54, 226, 207, 0.7);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.banner__status-value {
  margin: 0;
  color: rgba(255, 242, 189, 0.88);
  font-family: var(--font-menu);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.banner__report-label {
  flex: 0 0 auto;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.07em;
}

.banner__body {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.72fr);
  gap: 12px;
  min-height: 0;
}

.banner__header {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(22px, 3vw, 38px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 8, 9, 0.22), rgba(2, 8, 9, 0.08) 52%, rgba(2, 8, 9, 0.54)),
    linear-gradient(180deg, rgba(2, 8, 9, 0.02) 26%, rgba(2, 8, 9, 0.91)),
    var(--battle-bg) center / cover no-repeat,
    #031013;
  box-shadow:
    inset 0 0 0 1px rgba(54, 226, 207, 0.16),
    0 16px 38px rgba(0, 0, 0, 0.28);
}

.banner__header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(54, 226, 207, 0.09), transparent 32%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

.banner__kicker {
  color: rgba(243, 205, 98, 0.9);
  font-family: var(--font-menu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.88);
}

.banner__title {
  max-width: 92%;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: clamp(38px, 5vw, 70px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0.025em;
  text-shadow: 0 5px 16px rgba(0, 0, 0, 0.88);
}

.banner__subtitle {
  max-width: 64ch;
  margin: 0;
  color: rgba(255, 242, 189, 0.76);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.92);
}

.banner__stars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0 0;
}

.banner__star-criterion {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 242, 189, 0.18);
  color: rgba(255, 242, 189, 0.34);
  background: rgba(2, 9, 10, 0.72);
  animation: banner-star-in 280ms calc(500ms + var(--star-index) * 110ms) ease-out both;
}

.banner__star-criterion.is-earned {
  border-color: rgba(243, 205, 98, 0.62);
  color: #f3cd62;
  background:
    linear-gradient(90deg, rgba(243, 205, 98, 0.2), rgba(2, 9, 10, 0.72)),
    var(--debrief-row-active-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  box-shadow: 0 0 18px rgba(243, 205, 98, 0.12);
}

.banner__star {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  color: currentColor;
  background: transparent;
  font-size: 19px;
}

.banner__star-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.banner__star-grade {
  color: currentColor;
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.banner__star-threshold {
  color: rgba(255, 242, 189, 0.5);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.banner__result-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 0.92fr) auto;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.banner__score-block,
.banner__reward-block {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(54, 226, 207, 0.14);
  text-align: left;
  background:
    linear-gradient(90deg, rgba(9, 43, 43, 0.26), rgba(3, 10, 11, 0.82)),
    var(--debrief-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
}

.banner__reward-block {
  border-color: rgba(243, 205, 98, 0.28);
  background:
    linear-gradient(90deg, rgba(92, 68, 16, 0.24), rgba(3, 10, 11, 0.84)),
    var(--debrief-row-active-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  text-align: left;
}

.banner__score-value,
.banner__reward-value {
  margin-top: 7px;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.82);
}

.banner__reward-value {
  color: #f3cd62;
  font-size: clamp(26px, 3vw, 42px);
}

.banner__metric-label,
.banner__metric-note {
  color: rgba(255, 242, 189, 0.56);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.banner__metric-note {
  margin-top: 5px;
}

.banner__metrics-stage {
  min-height: 0;
}

.banner__metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  height: 100%;
  margin: 0;
}

.banner__metric {
  display: grid;
  align-content: center;
  min-height: 0;
  padding: 9px 10px;
  border: 1px solid rgba(54, 226, 207, 0.12);
  background: rgba(2, 9, 11, 0.76);
}

.banner__metric-value {
  margin-top: 4px;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.banner__reward-row {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin: 0;
}

.banner__reward-row .banner__unlock:only-child,
.banner__reward-row .banner__medals:only-child {
  justify-self: stretch;
  width: auto;
}

.banner__unlock {
  padding: 8px 12px;
}

.banner__unlock-kicker {
  font-size: 8px;
}

.banner__unlock-title {
  font-size: 14px;
}

.banner__unlock-copy {
  font-size: 9px;
}

.banner__footer {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  min-height: 54px;
}

.banner__identity {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 14px 6px 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 10, 12, 0.52), rgba(2, 10, 12, 0.86)),
    var(--banner-card-image) center / cover no-repeat,
    var(--debrief-row-art) center / 100% 100% no-repeat,
    #031013;
  background-blend-mode: normal, normal, screen, normal;
  box-shadow: inset 0 0 0 1px rgba(54, 226, 207, 0.13);
}

.banner__identity::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 9, 10, 0.26), rgba(2, 9, 10, 0.72));
}

.banner__identity-emblem {
  width: 42px;
  height: 42px;
  background: var(--banner-emblem-image) center / contain no-repeat;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.7));
}

.banner__identity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.banner__identity-name {
  min-width: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner__actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.banner button {
  min-width: 176px;
  min-height: 48px;
  padding: 9px 15px;
  border: 1px solid rgba(54, 226, 207, 0.24);
  color: rgba(255, 242, 189, 0.86);
  background:
    linear-gradient(90deg, rgba(9, 43, 43, 0.34), rgba(3, 10, 11, 0.86)),
    var(--debrief-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  box-shadow: none;
  font-family: var(--font-menu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  cursor: pointer;
}

.banner button.banner__primary {
  border-color: rgba(243, 205, 98, 0.66);
  color: #181203;
  background:
    linear-gradient(180deg, rgba(243, 205, 98, 0.98), rgba(185, 127, 35, 0.98)),
    var(--debrief-row-active-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, soft-light;
  box-shadow: 0 0 22px rgba(243, 205, 98, 0.13);
}

.banner button.banner__secondary {
  color: rgba(255, 242, 189, 0.86);
  background:
    linear-gradient(90deg, rgba(9, 43, 43, 0.34), rgba(3, 10, 11, 0.86)),
    var(--debrief-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
}

.banner button:hover,
.banner button:focus-visible {
  border-color: rgba(117, 213, 205, 0.74);
  color: #d8fff8;
  outline: 0;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(54, 226, 207, 0.16);
}

.banner button.banner__primary:hover,
.banner button.banner__primary:focus-visible {
  border-color: #fff2bd;
  color: #071113;
  background: #fff2bd;
  box-shadow: 0 0 24px rgba(243, 205, 98, 0.24);
}

.banner.win {
  background:
    linear-gradient(90deg, rgba(1, 8, 10, 0.94), rgba(2, 12, 14, 0.7) 46%, rgba(2, 8, 10, 0.91)),
    linear-gradient(180deg, rgba(3, 10, 12, 0.5), rgba(2, 6, 8, 0.82)),
    var(--battle-bg) center / cover no-repeat,
    #02080a;
  backdrop-filter: none;
}

.banner.win .banner__panel {
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.68),
    inset 0 0 0 1px rgba(54, 226, 207, 0.16),
    inset 0 0 44px rgba(54, 226, 207, 0.05);
}

.banner.lose {
  background:
    linear-gradient(90deg, rgba(15, 4, 5, 0.94), rgba(19, 7, 7, 0.7) 46%, rgba(10, 3, 4, 0.92)),
    linear-gradient(180deg, rgba(16, 5, 5, 0.5), rgba(4, 2, 3, 0.85)),
    var(--battle-bg) center / cover no-repeat,
    #090304;
}

.banner.lose::before {
  border-color: rgba(255, 119, 96, 0.48);
  box-shadow: inset 0 0 34px rgba(255, 119, 96, 0.05);
}

.banner.lose .banner__panel {
  border: 0;
  background:
    linear-gradient(180deg, rgba(30, 12, 13, 0.95), rgba(10, 5, 7, 0.985)),
    radial-gradient(circle at 42% 18%, rgba(255, 119, 96, 0.09), transparent 46%),
    var(--debrief-frame-art) center / 100% 100% no-repeat,
    #080304;
  background-blend-mode: normal, normal, screen, normal;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 119, 96, 0.18),
    inset 0 0 44px rgba(255, 119, 96, 0.04);
}

.banner.lose .banner__panel::before,
.banner.lose .banner__panel::after {
  background: linear-gradient(90deg, transparent, rgba(255, 119, 96, 0.82), transparent);
}

.banner.lose .banner__status-strip {
  border-bottom-color: rgba(255, 119, 96, 0.2);
}

.banner.lose .banner__status-label,
.banner.lose .banner__identity-label,
.banner.lose .banner__kicker {
  color: rgba(255, 153, 128, 0.86);
}

.banner.lose .banner__header {
  background:
    linear-gradient(90deg, rgba(18, 4, 5, 0.26), rgba(18, 4, 5, 0.08) 52%, rgba(18, 4, 5, 0.62)),
    linear-gradient(180deg, rgba(18, 4, 5, 0.08) 26%, rgba(18, 4, 5, 0.93)),
    var(--battle-bg) center / cover no-repeat,
    #0b0304;
  box-shadow: inset 0 0 0 1px rgba(255, 119, 96, 0.2), 0 16px 38px rgba(0, 0, 0, 0.3);
}

.banner.lose .banner__title,
.banner.lose .banner__score-value,
.banner.lose .banner__reward-value {
  color: #ffddc9;
}

.banner.lose .banner__score-block,
.banner.lose .banner__reward-block,
.banner.lose .banner__metric {
  border-color: rgba(255, 119, 96, 0.18);
  background:
    linear-gradient(90deg, rgba(84, 22, 18, 0.24), rgba(12, 5, 7, 0.84)),
    var(--debrief-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
}

@keyframes banner-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes banner-dossier-in {
  from {
    opacity: 0;
    transform: scale(0.975);
    clip-path: inset(48% 0 48% 0);
  }
  to {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes banner-star-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 860px) {
  .banner {
    padding: 14px;
  }

  .banner__panel {
    gap: 8px;
    padding: 12px;
  }

  .banner__body {
    grid-template-columns: minmax(0, 1.25fr) minmax(230px, 0.75fr);
    gap: 8px;
  }

  .banner__header {
    padding: 18px;
  }

  .banner__title {
    font-size: clamp(30px, 6vw, 48px);
  }

  .banner__star-criterion {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 4px;
    padding: 5px;
  }

  .banner__star {
    width: 22px;
    height: 22px;
    font-size: 15px;
  }

  .banner__footer {
    grid-template-columns: minmax(190px, 0.6fr) minmax(0, 1.4fr);
    gap: 8px;
  }

  .banner button {
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner,
  .banner__panel,
  .banner__star-criterion {
    animation: none;
  }
}

.is-battle-debrief .board-frame > :not(.banner), .is-battle-debrief .rail, .is-battle-debrief .battle-action-panel, .is-battle-debrief .battle-vdu, .is-battle-debrief .enemy-strength-hud, .is-battle-debrief .discard-selected, .is-battle-debrief #menu-btn, .is-battle-debrief .tutorial-spotlight, .is-battle-debrief #toast, .is-battle-debrief .score-toast{visibility: hidden;}.banner, .banner.win, .banner.lose{place-items: stretch;padding: 24px 28px;background: linear-gradient(90deg, rgba(1, 8, 10, 0.98), rgba(2, 14, 16, 0.88) 54%, rgba(1, 8, 10, 0.96)), var(--battle-bg) center / cover no-repeat, #02080a;}.banner::before{inset: 16px 18px;border: 0;border-left: 1px solid rgba(224, 183, 88, 0.62);border-right: 1px solid rgba(224, 183, 88, 0.2);clip-path: none;box-shadow: none;}.banner::after{content: none;}.banner__panel, .banner.win .banner__panel, .banner.lose .banner__panel{justify-self: center;align-self: center;width: min(1180px, 100%);height: min(720px, 100%);max-height: 100%;gap: 10px;padding: 0 20px;border: 0;border-radius: 0;background: rgba(2, 11, 13, 0.88);box-shadow: none;animation: banner-veil-in 220ms ease-out both;}.banner__panel::before, .banner__panel::after{content: none;}.banner__status-strip{min-height: 48px;padding: 4px 0 10px;border-bottom-color: rgba(224, 183, 88, 0.34);}.banner__status-label, .banner__identity-label{color: rgba(54, 226, 207, 0.72);}.banner__body{grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.66fr);gap: 18px;overflow: hidden;}.banner__header, .banner.lose .banner__header{align-content: end;padding: clamp(24px, 3.4vw, 50px);border: 0;border-left: 3px solid rgba(224, 183, 88, 0.86);border-radius: 0;background: linear-gradient(90deg, rgba(2, 9, 10, 0.2), rgba(2, 9, 10, 0.12) 52%, rgba(2, 9, 10, 0.68)), linear-gradient(180deg, rgba(2, 9, 10, 0.04) 26%, rgba(2, 9, 10, 0.92)), var(--battle-bg) center / cover no-repeat, #031013;box-shadow: none;}.banner__header, .banner__result-card, .banner__metrics-stage, .banner__reward-row, .banner__footer{min-height: 0;overflow: hidden;}.banner__title{font-size: clamp(36px, 4.4vw, 64px);text-shadow: 0 4px 14px rgba(0, 0, 0, 0.82);}.banner__stars{gap: 0;margin-top: 14px;border-top: 1px solid rgba(224, 183, 88, 0.2);}.banner__star-criterion, .banner__star-criterion.is-earned{min-height: 48px;padding: 7px 10px;border: 0;border-right: 1px solid rgba(224, 183, 88, 0.16);border-radius: 0;background: rgba(2, 9, 10, 0.66);box-shadow: none;}.banner__star-criterion.is-earned{background: linear-gradient(90deg, rgba(224, 183, 88, 0.11), rgba(2, 9, 10, 0.68));}.banner__result-card{gap: 0;border-left: 1px solid rgba(224, 183, 88, 0.42);}.banner__score-block, .banner__reward-block, .banner.lose .banner__score-block, .banner.lose .banner__reward-block{padding: 18px 20px;border: 0;border-bottom: 1px solid rgba(224, 183, 88, 0.18);border-radius: 0;background: rgba(2, 10, 12, 0.72);box-shadow: none;}.banner__reward-block{background: linear-gradient(90deg, rgba(224, 183, 88, 0.08), rgba(2, 10, 12, 0.72));}.banner__metrics{gap: 0;}.banner__metric, .banner.lose .banner__metric{padding: 10px 12px;border: 0;border-right: 1px solid rgba(224, 183, 88, 0.12);border-bottom: 1px solid rgba(224, 183, 88, 0.12);border-radius: 0;background: rgba(2, 9, 11, 0.64);box-shadow: none;}.banner__reward-row{border-top: 1px solid rgba(224, 183, 88, 0.18);}.banner__unlock, .banner__medals{border: 0;border-radius: 0;background: rgba(2, 10, 12, 0.56);box-shadow: none;}.banner__footer{grid-template-columns: minmax(250px, 0.58fr) minmax(0, 1.42fr);gap: 18px;min-height: 56px;padding-top: 10px;border-top: 1px solid rgba(224, 183, 88, 0.3);}.banner__identity{border: 0;border-left: 2px solid rgba(54, 226, 207, 0.68);border-radius: 0;background: linear-gradient(90deg, rgba(2, 10, 12, 0.48), rgba(2, 10, 12, 0.9)), var(--banner-card-image) center / cover no-repeat, #031013;box-shadow: none;}.banner button, .banner button.banner__primary, .banner button.banner__secondary{min-height: 46px;border-radius: 0;background-image: none;box-shadow: none;}.banner button.banner__primary{border-color: rgba(224, 183, 88, 0.72);color: #f3cd62;background: rgba(224, 183, 88, 0.08);box-shadow: inset 3px 0 0 rgba(224, 183, 88, 0.78);}.banner button.banner__secondary{background: rgba(3, 14, 15, 0.72);}.banner button.banner__primary:hover, .banner button.banner__primary:focus-visible{color: #071113;background: #f3cd62;box-shadow: none;}@media (max-width: 860px){.banner{padding: 16px 18px;}.banner__panel{padding: 0 12px;}}

.is-battle-debrief .banner{place-items:center;padding:clamp(24px,4vh,40px) clamp(28px,4vw,56px);pointer-events:auto}.is-battle-debrief .banner__panel,.is-battle-debrief .banner.win .banner__panel,.is-battle-debrief .banner.lose .banner__panel{grid-template-rows:auto auto auto auto;width:min(1180px,100%);height:auto;max-height:100%;padding:14px 20px 16px;border-top:1px solid rgba(224,183,88,.28);border-bottom:1px solid rgba(54,226,207,.16);background:linear-gradient(180deg,rgba(2,16,18,.96),rgba(1,8,10,.98)),#02080a;box-shadow:0 30px 80px rgba(0,0,0,.48),inset 0 0 0 1px rgba(54,226,207,.05)}.is-battle-debrief .banner__body{height:clamp(390px,49vh,440px)}.is-battle-debrief .banner__result-card{grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto}.is-battle-debrief .banner__score-block,.is-battle-debrief .banner__reward-block{align-content:end;padding-block:16px}.is-battle-debrief .banner__footer{min-height:56px;padding-top:10px}@media (max-width:860px){.is-battle-debrief .banner{padding:16px 18px}.is-battle-debrief .banner__panel,.is-battle-debrief .banner.win .banner__panel,.is-battle-debrief .banner.lose .banner__panel{padding:12px}.is-battle-debrief .banner__body{height:clamp(360px,52vh,420px)}}

/* Use the same 6:1 calling-card contract as the battle HUD and Callsign Room. */
.is-battle-debrief .banner__identity {
  --banner-identity-emblem-size: 78%;
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 6 / 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(211, 169, 82, 0.46);
  border-radius: 8px 3px 8px 3px;
  background:
    linear-gradient(90deg, rgba(3, 4, 5, 0.02), rgba(3, 4, 5, 0.46) 70%, rgba(3, 4, 5, 0.76)),
    var(--banner-card-image) center / cover no-repeat,
    #07090a;
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -18px 32px rgba(0, 0, 0, 0.42);
}

.is-battle-debrief .banner__identity::after {
  content: none;
}

.banner__identity-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.06), transparent 52%, rgba(0, 0, 0, 0.58)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.24), transparent 56%);
}

.is-battle-debrief .banner__identity-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 0 20% 0 14%;
  text-align: left;
}

.is-battle-debrief .banner__identity-name {
  width: 100%;
  max-width: 100%;
  color: #fff1bc;
  font-family: var(--font-menu);
  font-size: clamp(10px, 1.15vw, 15px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: clip;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.84);
  text-transform: uppercase;
  white-space: nowrap;
}

.banner__identity-emblems {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 3%;
  display: flex;
  align-items: center;
  height: var(--banner-identity-emblem-size);
  transform: translateY(-50%);
}

.is-battle-debrief .banner__identity-emblem {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 0;
}

/* The report column opens with the commander's callsign, then the result
 * ledger. The wider dossier keeps that 6:1 identity strip comfortably clear
 * of the score and reward rows. */
.is-battle-debrief .banner__panel,
.is-battle-debrief .banner.win .banner__panel,
.is-battle-debrief .banner.lose .banner__panel {
  width: min(1240px, 100%);
}

.is-battle-debrief .banner__status-strip {
  justify-content: flex-end;
}

.is-battle-debrief .banner__body {
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.8fr);
  height: clamp(430px, 55vh, 500px);
}

.is-battle-debrief .banner__result-card {
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 0.84fr) auto;
}

.is-battle-debrief .banner__footer {
  grid-template-columns: minmax(0, 1fr);
}

.is-battle-debrief .banner__actions {
  width: 100%;
}

@media (max-width: 860px) {
  .is-battle-debrief .banner__body {
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
    height: clamp(400px, 55vh, 450px);
  }
}

.banner__score-breakdown {
  margin-top: 7px;
  color: rgba(54, 226, 207, 0.72);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
}

.duel-overlay[hidden] {
  display: none;
}

.duel-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: max(10px, var(--safe-top)) max(10px, var(--safe-right)) max(10px, var(--safe-bottom)) max(10px, var(--safe-left));
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 8, 9, 0), rgba(4, 8, 9, 0)),
    repeating-linear-gradient(0deg, rgba(224, 183, 88, 0) 0, rgba(224, 183, 88, 0) 1px, transparent 1px, transparent 18px);
  backdrop-filter: blur(0) saturate(1);
  opacity: 1;
  transition: opacity 0.5s ease-out, background 0.18s ease, backdrop-filter 0.18s ease;
}

.duel-overlay.is-settled {
  background:
    radial-gradient(circle at 22% 54%, rgba(78, 203, 190, 0.1), transparent 30%),
    radial-gradient(circle at 78% 48%, rgba(224, 92, 84, 0.1), transparent 31%),
    linear-gradient(180deg, rgba(4, 8, 9, 0.64), rgba(4, 8, 9, 0.82)),
    repeating-linear-gradient(0deg, rgba(224, 183, 88, 0.055) 0, rgba(224, 183, 88, 0.055) 1px, transparent 1px, transparent 18px);
  backdrop-filter: blur(7px) saturate(0.84);
}

.duel-overlay.is-leaving {
  opacity: 0;
}

.duel-overlay--message,
.duel-overlay--message.is-settled {
  background: transparent;
  backdrop-filter: none;
  transition: none;
}

.duel-overlay__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(75vw, calc(100vw - 20px - var(--safe-left) - var(--safe-right)));
  min-height: min(75dvh, calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom)));
  max-height: min(75dvh, calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom)));
  overflow: hidden;
  padding: clamp(16px, 2.2vw, 26px);
  border: 1px solid rgba(232, 216, 172, 0.42);
  background:
    linear-gradient(90deg, rgba(224, 183, 88, 0.13), transparent 18%, transparent 82%, rgba(224, 183, 88, 0.13)),
    radial-gradient(circle at 50% 42%, rgba(245, 216, 131, 0.11), transparent 48%),
    linear-gradient(180deg, rgba(22, 28, 30, 0.96), rgba(7, 10, 11, 0.97)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 11px);
  box-shadow: inset 0 0 0 1px rgba(255, 238, 176, 0.08), 0 26px 90px rgba(0, 0, 0, 0.64);
  animation: duel-in 0.5s ease-out both;
}

.duel-overlay__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(239, 255, 219, 0.08), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.22)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 7px);
  opacity: 0.58;
}

.duel-overlay__panel::after {
  content: "VS";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 44%;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(224, 183, 88, 0.24);
  color: rgba(245, 216, 131, 0.18);
  background: rgba(4, 8, 9, 0.36);
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.duel-overlay__panel--message {
  display: grid;
  gap: 12px;
  width: min(500px, 76vw);
  min-height: auto;
  text-align: center;
}

.duel-overlay__panel--message::after {
  content: none;
}

.duel-overlay__panel--support {
  border-color: rgba(143, 214, 201, 0.42);
}

.duel-overlay__panel--attack {
  border-color: rgba(224, 183, 88, 0.62);
}

.duel-overlay__panel--cannon {
  border-color: rgba(255, 216, 107, 0.66);
}

.duel-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(12px, 2vh, 20px);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(224, 183, 88, 0.28);
  text-align: left;
}

.duel-header__kicker {
  color: rgba(245, 229, 183, 0.54);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.duel-header__title {
  color: #f6d883;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 32px);
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

.duel-message {
  color: #f5e7c3;
  font-family: var(--font-copy);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.duel-message__detail {
  color: rgba(245, 229, 183, 0.64);
  font-size: 11px;
  line-height: 1.32;
  text-transform: none;
}

.duel-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(250px, 0.66fr) minmax(220px, 1fr);
  align-items: stretch;
  gap: clamp(14px, 2vw, 28px);
  min-height: 0;
  padding: clamp(6px, 1vh, 14px) 0;
}

.duel-combatant {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  justify-items: center;
  align-items: end;
  gap: 7px;
  min-width: 0;
  padding: clamp(12px, 2vh, 20px) clamp(10px, 1.5vw, 18px);
}

.duel-combatant::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% 4% 9%;
  border: 1px solid rgba(224, 183, 88, 0.11);
  background:
    radial-gradient(ellipse at center, rgba(224, 183, 88, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.duel-combatant__sprite {
  width: clamp(150px, 18vw, 280px);
  height: clamp(170px, 30vh, 330px);
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  transform-origin: center bottom;
  will-change: transform, filter;
}

.duel-combatant__sprite--enemy {
  width: clamp(142px, 16vw, 250px);
  height: clamp(158px, 25vh, 278px);
  place-items: end center;
  overflow: hidden;
}

.duel-combatant__image {
  position: relative;
  z-index: 1;
  max-width: min(92%, 270px);
  max-height: min(96%, 315px);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 17px 20px rgba(0, 0, 0, 0.52));
}

.duel-combatant__image--cropped {
  overflow: hidden;
}

.duel-combatant--enemy .duel-combatant__image {
  max-width: min(84%, 215px);
  max-height: min(92%, 248px);
  object-position: center bottom;
}

.duel-combatant__image--flip-x {
  transform: scaleX(-1);
}

.duel-combatant--cannon .duel-combatant__sprite {
  place-items: center;
}

.duel-combatant--cannon .duel-combatant__image {
  max-width: min(86%, 300px);
  max-height: min(86%, 320px);
  filter: drop-shadow(0 0 13px rgba(255, 216, 107, 0.42)) drop-shadow(0 13px 15px rgba(0, 0, 0, 0.42));
}

.duel-combatant__fallback {
  width: min(86%, 300px);
  height: min(92%, 390px);
  overflow: visible;
}

.duel-combatant__name,
.duel-combatant__hp {
  max-width: 100%;
  color: var(--paper);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.duel-combatant__hp {
  color: var(--muted);
  font-size: clamp(9px, 0.9vw, 11px);
}

.duel-combatant__pips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  width: min(180px, 100%);
  min-height: 10px;
}

.duel-combatant__pip {
  width: 13px;
  height: 5px;
  border: 1px solid rgba(245, 229, 183, 0.24);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.35);
}

.duel-combatant__pip.is-full {
  border-color: rgba(224, 192, 120, 0.54);
  background: #d9b55e;
}

.duel-combatant__pip.is-lost {
  background: rgba(190, 77, 61, 0.22);
}

.duel-combatant.is-striking .duel-combatant__sprite {
  animation: duel-strike-friendly 0.32s cubic-bezier(0.24, 0.84, 0.3, 1.06);
}

.duel-combatant--enemy.is-striking .duel-combatant__sprite {
  animation-name: duel-strike-enemy;
}

.duel-combatant.is-hit .duel-combatant__sprite {
  animation: duel-hit-friendly 0.29s ease-out;
  filter: drop-shadow(0 0 10px rgba(255, 213, 129, 0.76));
}

.duel-combatant--enemy.is-hit .duel-combatant__sprite {
  animation-name: duel-hit-enemy;
}

.duel-combatant.is-evading .duel-combatant__sprite {
  animation: duel-evade 0.31s ease-out;
}

.duel-combatant.is-blocking .duel-combatant__sprite {
  animation: duel-block 0.31s ease-out;
  filter: drop-shadow(0 0 11px rgba(143, 218, 193, 0.78));
}

.duel-combatant.is-delayed .duel-combatant__sprite {
  animation: duel-held 0.36s ease-out;
  filter: saturate(0.55) brightness(0.86);
}

.duel-log {
  position: relative;
  z-index: 4;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(7px, 1.1vh, 12px);
  min-width: min(360px, 100%);
  min-height: clamp(92px, 16vh, 150px);
  max-height: min(34vh, 260px);
  overflow: hidden;
  padding: 0 clamp(4px, 0.8vw, 12px);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.duel-log::before {
  content: "";
  position: absolute;
  inset: 50% -10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 183, 88, 0.28), transparent);
}

.duel-log__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: clamp(46px, 6vh, 72px);
  padding: clamp(10px, 1.4vh, 16px) clamp(14px, 1.8vw, 24px);
  border: 1px solid rgba(224, 183, 88, 0.3);
  color: var(--paper);
  background:
    linear-gradient(90deg, rgba(224, 183, 88, 0.14), rgba(7, 12, 12, 0.88) 22%, rgba(7, 12, 12, 0.88) 78%, rgba(224, 183, 88, 0.14)),
    rgba(5, 9, 10, 0.82);
  box-shadow: inset 0 0 0 1px rgba(245, 229, 183, 0.06), 0 12px 28px rgba(0, 0, 0, 0.26);
  font-family: var(--font-display);
  font-size: clamp(12px, 1vw, 17px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-wrap: balance;
  opacity: 0.46;
  transform: translateY(0);
  transform-origin: center bottom;
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.duel-log__row:empty {
  display: none;
}

.duel-log__row.is-active {
  min-height: clamp(56px, 7vh, 84px);
  font-size: clamp(16px, 1.35vw, 24px);
  opacity: 1;
  transform: scale(1.065);
  border-color: rgba(245, 216, 131, 0.66);
  background:
    linear-gradient(90deg, rgba(245, 216, 131, 0.3), rgba(17, 24, 22, 0.94) 24%, rgba(17, 24, 22, 0.94) 76%, rgba(245, 216, 131, 0.3)),
    rgba(224, 192, 120, 0.18);
  box-shadow: inset 0 0 0 1px rgba(245, 229, 183, 0.16), 0 0 34px rgba(224, 183, 88, 0.26);
}

.duel-log__row.is-complete {
  opacity: 0.84;
}

.duel-log__row--attacker {
  color: #8fdac1;
}

.duel-log__row--defender {
  color: #e3957f;
}

.duel-summary {
  position: relative;
  z-index: 2;
  margin-top: clamp(8px, 1.4vh, 14px);
  padding: 10px 12px;
  border: 1px solid rgba(224, 183, 88, 0.24);
  color: #f6d883;
  background: rgba(224, 183, 88, 0.07);
  font-family: var(--font-display);
  font-size: clamp(9px, 0.96vw, 12px);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease, visibility 0.18s ease;
}

.duel-result-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: clamp(8px, 1.4vh, 14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.duel-overlay__panel--resolved .duel-summary,
.duel-overlay__panel--resolved .duel-result-grid {
  opacity: 0.76;
  visibility: visible;
}

.duel-overlay__panel--resolved .duel-result-grid {
  opacity: 1;
}

.duel-result-stat {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(224, 183, 88, 0.22);
  background: rgba(8, 13, 13, 0.58);
}

.duel-result-stat__label {
  color: rgba(245, 229, 183, 0.58);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.duel-result-stat__value {
  margin-top: 3px;
  color: #ffd86b;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
}

.duel-overlay__panel--resolved .duel-summary {
  opacity: 1;
  border-color: rgba(224, 183, 88, 0.46);
  background: rgba(224, 183, 88, 0.11);
}

.duel-fx {
  position: absolute;
  z-index: 5;
  inset: 18% 17% 24%;
  pointer-events: none;
}

.duel-strike {
  position: absolute;
  top: 50%;
  left: 2%;
  width: 96%;
  height: 56px;
  transform: translateY(-50%);
  opacity: 0;
  animation: duel-shot-attacker 0.36s cubic-bezier(0.12, 0.82, 0.24, 1) both;
}

.duel-strike--defender {
  animation-name: duel-shot-defender;
}

.duel-strike::before,
.duel-strike::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4%;
  right: 4%;
  height: 3px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #f6d883 16%, #efffdb 50%, rgba(143, 218, 193, 0.0));
  box-shadow: 0 0 12px rgba(246, 216, 131, 0.68), 0 0 34px rgba(246, 216, 131, 0.26);
}

.duel-strike::after {
  left: auto;
  right: 0;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(246, 216, 131, 0.78);
  border-radius: 50%;
  background: radial-gradient(circle, #fff9c6 0 16%, rgba(224, 99, 69, 0.52) 36%, transparent 64%);
  transform: translateY(-50%) scale(0.7);
  animation: duel-impact-burst 0.24s ease-out 0.1s both;
}

.duel-strike--defender::before {
  background: linear-gradient(270deg, transparent, #e3957f 16%, #fff6d4 50%, rgba(227, 149, 127, 0.0));
  box-shadow: 0 0 12px rgba(227, 149, 127, 0.64);
}

.duel-strike--defender::after {
  right: auto;
  left: 0;
}

.duel-strike--miss::before {
  opacity: 0.45;
  background: linear-gradient(90deg, transparent, rgba(245, 231, 195, 0.68), transparent);
}

.duel-strike--shield::after {
  border-color: rgba(143, 218, 193, 0.86);
  background: radial-gradient(circle, #e9fff7 0 15%, rgba(96, 216, 189, 0.54) 34%, transparent 66%);
}

.duel-strike--crit::before {
  height: 5px;
  background: linear-gradient(90deg, transparent, #f09d57 13%, #fff3b2 48%, transparent);
  box-shadow: 0 0 18px rgba(240, 157, 87, 0.8);
}

.duel-strike--delayed::before {
  opacity: 0.38;
  background: repeating-linear-gradient(90deg, rgba(245, 231, 195, 0.78) 0 8px, transparent 8px 14px);
}

.duel-strike__label {
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 50%;
  min-width: 66px;
  max-width: 118px;
  padding: 4px 8px;
  border: 1px solid rgba(245, 229, 183, 0.42);
  color: #f7e9c9;
  background: rgba(9, 12, 13, 0.82);
  font: 900 9px/1.05 var(--font-ui);
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transform: translateX(-50%) rotate(-3deg);
}

.duel-strike--defender .duel-strike__label {
  transform: translateX(-50%) rotate(3deg);
}

@media (pointer: coarse), (max-width: 900px), (max-height: 620px) {
  .duel-overlay {
    padding: max(8px, var(--safe-top)) max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));
    background:
      linear-gradient(180deg, rgba(4, 8, 9, 0), rgba(4, 8, 9, 0)),
      repeating-linear-gradient(0deg, rgba(224, 183, 88, 0) 0, rgba(224, 183, 88, 0) 1px, transparent 1px, transparent 18px);
    backdrop-filter: blur(0) saturate(1);
  }

  .duel-overlay.is-settled {
    background:
      radial-gradient(circle at 50% 42%, rgba(224, 183, 88, 0.14), transparent 42%),
      linear-gradient(180deg, rgba(4, 8, 9, 0.66), rgba(4, 8, 9, 0.84)),
      repeating-linear-gradient(0deg, rgba(224, 183, 88, 0.055) 0, rgba(224, 183, 88, 0.055) 1px, transparent 1px, transparent 18px);
    backdrop-filter: blur(6px) saturate(0.86);
  }

  .duel-overlay__panel {
    display: flex;
    flex-direction: column;
    width: min(75vw, calc(100vw - 16px - var(--safe-left) - var(--safe-right)));
    min-height: min(75dvh, calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom)));
    max-height: min(75dvh, calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom)));
    padding: clamp(10px, 2.4vh, 16px);
    background:
      linear-gradient(90deg, rgba(224, 183, 88, 0.1), transparent 24%, transparent 76%, rgba(224, 183, 88, 0.1)),
      linear-gradient(180deg, rgba(20, 25, 27, 0.985), rgba(8, 11, 12, 0.985)),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px);
  }

  .duel-overlay__panel--message {
    justify-content: center;
    width: calc(100vw - 16px - var(--safe-left) - var(--safe-right));
    min-height: min(360px, calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom)));
  }

  .duel-header {
    flex: 0 0 auto;
    margin-bottom: clamp(7px, 1.8vh, 12px);
  }

  .duel-header__title {
    font-size: clamp(12px, 3.2vh, 16px);
  }

  .duel-stage {
    flex: 0 0 auto;
    grid-template-columns: minmax(96px, 1fr) minmax(132px, 0.78fr) minmax(96px, 1fr);
    gap: clamp(6px, 1.6vw, 12px);
    min-height: clamp(132px, 37vh, 184px);
  }

  .duel-combatant__sprite {
    width: clamp(78px, 17vw, 112px);
    height: clamp(86px, 24vh, 124px);
  }

  .duel-combatant__sprite--enemy {
    width: clamp(74px, 15vw, 100px);
    height: clamp(82px, 22vh, 112px);
  }

  .duel-combatant__name,
  .duel-combatant__hp {
    font-size: 8px;
  }

  .duel-combatant__pips {
    max-width: 104px;
  }

  .duel-log {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-inline: 3px;
  }

  .duel-log__row {
    min-height: 34px;
    padding: 7px 9px;
    font-size: clamp(10px, 2.4vw, 13px);
    letter-spacing: 0.04em;
  }

  .duel-log__row.is-active {
    transform: scale(1.035);
  }

  .duel-summary {
    margin-top: 8px;
    padding: 8px;
    font-size: 9px;
  }

  .duel-result-grid {
    gap: 5px;
    margin-top: 8px;
  }
}

.choice-overlay[hidden] {
  display: none;
}

.enemy-info-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(24px, var(--safe-top)) max(24px, var(--safe-right)) max(24px, var(--safe-bottom)) max(24px, var(--safe-left));
  color: #f7ead0;
  background:
    linear-gradient(180deg, rgba(5, 8, 9, 0.78), rgba(5, 8, 9, 0.92)),
    repeating-linear-gradient(0deg, rgba(224, 183, 88, 0.07) 0, rgba(224, 183, 88, 0.07) 1px, transparent 1px, transparent 16px);
}

.enemy-info-overlay__panel {
  position: relative;
  display: grid;
  gap: 18px;
  width: min(920px, 94vw);
  max-height: min(720px, 92vh);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(224, 183, 88, 0.5);
  background:
    linear-gradient(90deg, rgba(224, 183, 88, 0.08), transparent 26%, transparent 74%, rgba(224, 183, 88, 0.08)),
    linear-gradient(180deg, rgba(26, 31, 29, 0.98), rgba(9, 12, 12, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
}

.enemy-info-overlay__close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(224, 192, 120, 0.36);
  color: #f1dfb3;
  background: rgba(255, 255, 255, 0.08);
  font: 900 10px/1 var(--font-ui);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.enemy-info-overlay__header {
  display: grid;
  gap: 6px;
  padding-right: 90px;
}

.enemy-info-overlay__kicker,
.enemy-info-overlay__section-title {
  color: rgba(245, 209, 100, 0.72);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.enemy-info-overlay h2 {
  margin: 0;
  color: #f5d164;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.enemy-info-overlay__body {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.enemy-info-overlay__media {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(224, 192, 120, 0.22);
  background:
    radial-gradient(circle at 50% 58%, rgba(224, 183, 88, 0.12), transparent 42%),
    rgba(0, 0, 0, 0.24);
}

.enemy-info-overlay__image {
  position: relative;
  z-index: 1;
  max-width: min(220px, 100%);
  max-height: 190px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.42));
}

.enemy-display-plinth--overlay {
  bottom: 20px;
  width: min(72%, 170px);
  height: 34px;
}

.enemy-info-overlay__summary {
  display: grid;
  gap: 16px;
}

.enemy-info-overlay__copy,
.enemy-info-overlay__empty,
.enemy-info-overlay__note,
.enemy-info-overlay__perk-copy {
  color: rgba(247, 234, 208, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.enemy-info-overlay__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.enemy-info-overlay__stat {
  display: grid;
  gap: 4px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(224, 192, 120, 0.24);
  background: rgba(0, 0, 0, 0.22);
}

.enemy-info-overlay__stat-label {
  color: rgba(245, 229, 183, 0.54);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.enemy-info-overlay__stat-value {
  color: #f5d164;
  font-family: var(--font-display);
  font-size: 18px;
}

.enemy-info-overlay__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.enemy-info-overlay__section {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(224, 192, 120, 0.2);
  background: rgba(0, 0, 0, 0.18);
}

.enemy-info-overlay__section--threat {
  border-color: rgba(128, 220, 212, 0.28);
  background:
    linear-gradient(90deg, rgba(128, 220, 212, 0.08), transparent 55%),
    rgba(0, 0, 0, 0.2);
}

.enemy-info-overlay__threats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.enemy-info-overlay__perk-list,
.enemy-info-overlay__notes {
  display: grid;
  gap: 8px;
}

.enemy-info-overlay__perk {
  display: grid;
  gap: 2px;
}

.enemy-info-overlay__perk-name {
  color: #f5d164;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.choice-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(224, 183, 88, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(6, 9, 9, 0.58), rgba(4, 7, 7, 0.74));
  backdrop-filter: blur(2px) saturate(0.88);
}

.choice-overlay__panel {
  width: min(780px, 86vw);
  padding: 18px;
  border: 1px solid rgba(224, 183, 88, 0.42);
  background:
    linear-gradient(90deg, rgba(224, 183, 88, 0.08), transparent 18%, transparent 82%, rgba(224, 183, 88, 0.08)),
    repeating-linear-gradient(0deg, rgba(117, 213, 205, 0.035) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(15, 22, 21, 0.97), rgba(5, 9, 9, 0.98));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(245, 229, 183, 0.06);
}

.choice-overlay__title {
  margin-bottom: 14px;
  color: #f5d481;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.choice-overlay__instruction {
  margin: -3px 0 16px;
  color: #f5e7c3;
  font-family: var(--font-label);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.choice-overlay__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.choice-overlay__options--rank {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-card {
  --choice-accent: rgba(224, 183, 88, 0.5);
  display: grid;
  grid-template-rows: auto minmax(126px, 0.9fr) auto minmax(48px, auto);
  gap: 8px;
  min-width: 0;
  min-height: 304px;
  padding: 10px;
  border: 1px solid rgba(224, 183, 88, 0.28);
  border-radius: 3px;
  color: #f5e7c3;
  background:
    linear-gradient(180deg, rgba(245, 229, 183, 0.045), transparent 34%),
    linear-gradient(135deg, rgba(117, 213, 205, 0.04), transparent 48%),
    rgba(9, 16, 16, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(245, 229, 183, 0.045),
    0 14px 30px rgba(0, 0, 0, 0.34);
  font-family: var(--font-label);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.choice-card--rank {
  grid-template-rows: auto minmax(86px, 0.7fr) auto minmax(32px, auto);
  min-height: 224px;
}

.choice-card:hover {
  border-color: rgba(117, 213, 205, 0.72);
  background:
    linear-gradient(180deg, rgba(117, 213, 205, 0.08), transparent 38%),
    linear-gradient(135deg, rgba(224, 183, 88, 0.08), transparent 52%),
    rgba(12, 21, 21, 0.98);
  box-shadow:
    inset 0 0 0 1px rgba(245, 229, 183, 0.06),
    0 0 18px rgba(117, 213, 205, 0.18),
    0 18px 36px rgba(0, 0, 0, 0.42);
  transform: translateY(-1px);
}

.choice-card__kind,
.choice-card__name {
  overflow-wrap: anywhere;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.choice-card__kind {
  justify-self: center;
  min-width: 82px;
  padding: 4px 7px 3px;
  border: 1px solid rgba(117, 213, 205, 0.3);
  color: rgba(143, 214, 201, 0.86);
  background: rgba(7, 14, 14, 0.78);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.choice-card__name {
  color: #f5d481;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.06em;
}

.choice-card__desc {
  align-self: start;
  color: rgba(245, 229, 183, 0.76);
  font-size: 9px;
  font-family: var(--font-copy);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.choice-card__art {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(224, 183, 88, 0.24);
  background:
    radial-gradient(circle at 50% 54%, rgba(117, 213, 205, 0.11), transparent 56%),
    rgba(3, 7, 8, 0.92);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.42),
    0 8px 18px rgba(0, 0, 0, 0.26);
}

.choice-card__art--mode {
  display: grid;
  place-items: center;
  color: #f8efd8;
  background:
    radial-gradient(circle at 50% 42%, rgba(112, 232, 200, 0.24), transparent 48%),
    linear-gradient(150deg, #253334, #101616);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
}

.choice-card--mode {
  grid-template-rows: auto 132px auto minmax(38px, auto);
  background: rgba(9, 16, 16, 0.94);
}

.choice-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
  filter: saturate(0.86) contrast(1.08) brightness(0.82);
  transition: opacity 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}

.choice-card:hover .choice-card__image {
  opacity: 1;
  filter: saturate(0.98) contrast(1.08) brightness(0.94);
  transform: scale(1.015);
}

.choice-card__image--support-poster {
  object-position: center 58%;
}

.choice-overlay--discovery {
  align-items: start;
  justify-items: center;
  padding: 68px 22px 22px;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.choice-overlay--discovery .choice-overlay__panel--discovery {
  width: min(720px, 54vw);
  padding: 10px;
  border-color: rgba(117, 213, 205, 0.5);
  background:
    linear-gradient(90deg, rgba(117, 213, 205, 0.08), transparent 18%, transparent 82%, rgba(117, 213, 205, 0.08)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(7, 19, 20, 0.96), rgba(3, 8, 9, 0.97));
  pointer-events: auto;
}

.choice-overlay--discovery .choice-overlay__title--discovery {
  margin-bottom: 7px;
  color: rgba(141, 255, 242, 0.9);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.choice-overlay--discovery .choice-overlay__options--discovery {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: stretch;
  gap: 8px;
}

.choice-overlay--discovery .choice-card--discovery {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  gap: 2px 8px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
  text-align: left;
}

.choice-overlay--discovery .choice-card--discovery::before,
.choice-overlay--discovery .choice-card--discovery::after {
  inset: 3px;
}

.choice-overlay--discovery .choice-card--discovery:hover,
.choice-overlay--discovery .choice-card--discovery.is-selected {
  border-color: #f5d887;
  box-shadow:
    0 0 0 2px rgba(226, 176, 65, 0.72),
    0 8px 20px rgba(58, 43, 18, 0.34),
    inset 0 0 0 1px rgba(112, 89, 49, 0.24),
    inset 0 0 0 3px rgba(255, 250, 235, 0.3);
  transform: translateY(-1px);
}

.choice-overlay--discovery .choice-card__kind {
  display: none;
}

.choice-overlay--discovery .choice-card__desc {
  grid-column: 2;
  display: block;
  color: rgba(245, 229, 183, 0.72);
  font-size: 8.5px;
  line-height: 1.26;
  text-align: left;
}

.choice-overlay--discovery .choice-card__art {
  grid-row: 1 / span 2;
  grid-column: 1;
  position: relative;
  inset: auto;
  width: 38px;
  height: 50px;
  min-height: 0;
  border-color: rgba(246, 232, 190, 0.82);
  background:
    radial-gradient(ellipse at 50% 75%, rgba(246, 232, 190, 0.16), transparent 30%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #081012, #10282c 58%, #081012);
}

.choice-overlay--discovery .choice-card__name {
  position: static;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  letter-spacing: 0;
  line-height: 1.08;
  text-align: left;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 1100px), (max-height: 720px) {
  .choice-overlay--discovery {
    padding-top: 70px;
  }

  .choice-overlay--discovery .choice-overlay__panel--discovery {
    width: min(720px, 70vw);
  }

  .choice-overlay--discovery .choice-card__desc {
    display: none;
  }
}

#toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 88px;
  max-width: 80vw;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(25, 33, 37, 0.9);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.18s, transform 0.18s;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.phase-label {
  position: absolute;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 258px;
  padding: 11px 25px 12px;
  overflow: hidden;
  border: 1px solid rgba(226, 198, 111, 0.58);
  border-radius: 2px;
  color: #f7e8bd;
  background:
    repeating-linear-gradient(0deg, rgba(255, 236, 184, 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(7, 14, 14, 0.94), rgba(2, 7, 7, 0.96));
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.54),
    inset 9px 0 rgba(226, 198, 111, 0.06),
    inset -9px 0 rgba(226, 198, 111, 0.06),
    inset 0 1px rgba(255, 244, 208, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.28);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.74);
  text-transform: uppercase;
  transform: translate(-50%, -100%);
  animation: phase-in 0.2s ease-out;
}

.phase-label::before {
  content: "STATION COMMAND";
  color: rgba(221, 204, 151, 0.68);
  font-family: var(--font-ticker);
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-shadow: none;
}

.phase-label::after {
  content: "";
  width: 52px;
  height: 1px;
  background: rgba(226, 198, 111, 0.52);
  box-shadow: 0 0 7px rgba(226, 198, 111, 0.14);
}

.phase-label[hidden] {
  display: none;
}

.fire-trace {
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fire-trace 0.16s cubic-bezier(0.1, 0.72, 0.2, 1) both;
}

.fire-trace--glow {
  stroke: rgba(77, 196, 188, 0.5);
  stroke-width: 7;
  filter: blur(1.2px);
}

.fire-trace--core {
  stroke: #efffdb;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 2px #63d8cb);
}

.fire-impact {
  fill: #fffbd1;
  stroke: #63d8cb;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: fire-impact 0.18s ease-out both;
}

.board--advance .token--enemy {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
}

.board--effect-damageRing {
  animation: board-barrage 0.48s ease;
}

.is-resolving .card,
.is-resolving .hud__menu {
  pointer-events: none;
}

.rotate-device {
  display: none;
}

.discard-selected {
  position: fixed;
  z-index: 9;
  left: calc(var(--fieldworks-w) + (var(--rail-w) * 2) - 20px);
  bottom: calc(var(--dock-bottom) + 153px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 150px;
  min-width: 0;
  height: 88px;
  min-height: 0;
  padding: 8px 14px;
  border: 1px solid rgba(224, 192, 120, 0.55);
  border-radius: 4px;
  color: #f1dfb3;
  background: linear-gradient(180deg, rgba(31, 34, 32, 0.96), rgba(7, 10, 10, 0.96));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  font: 700 13px/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  animation: discard-pop 0.16s ease-out;
}

.discard-selected[hidden] {
  display: none;
}

.discard-selected:hover {
  border-color: #e0c074;
  background: linear-gradient(180deg, rgba(48, 52, 48, 0.97), rgba(15, 19, 18, 0.97));
}

.discard-selected:disabled {
  cursor: default;
  opacity: 0.76;
}

.discard-selected:disabled:hover {
  border-color: rgba(224, 192, 120, 0.55);
  background: linear-gradient(180deg, rgba(31, 34, 32, 0.96), rgba(7, 10, 10, 0.96));
}

.discard-selected.is-armed {
  border-color: rgba(224, 192, 120, 0.78);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 0 16px rgba(224, 192, 120, 0.12);
}

.discard-selected:active {
  transform: scale(0.96);
}

.discard-selected__points {
  display: grid;
  grid-template-columns: repeat(2, 18px);
  gap: 5px;
}

.discard-selected__pip {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(224, 192, 120, 0.66);
  border-radius: 2px;
  background: rgba(4, 8, 8, 0.72);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.36);
}

.discard-selected__pip.is-filled {
  border-color: rgba(255, 229, 151, 0.82);
  background: linear-gradient(180deg, #f3cf76, #ad7b2e);
  box-shadow:
    inset 0 1px rgba(255, 246, 196, 0.42),
    inset 0 -1px rgba(70, 39, 8, 0.5),
    0 0 8px rgba(224, 192, 120, 0.22);
}

@keyframes discard-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes deploy-drop {
  0% { opacity: 0; translate: 0 -42px; scale: 1.35; }
  65% { opacity: 1; translate: 0 3px; scale: 0.94; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes fire-trace {
  0% { opacity: 0; stroke-dashoffset: 1; }
  12% { opacity: 1; }
  48% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes fire-impact {
  0%, 28% { opacity: 0; transform: scale(0.25); }
  48% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.8); }
}

@keyframes target-hit {
  0%, 100% { opacity: 1; }
  22% { opacity: 0.28; transform: translateX(-2px); }
  46% { opacity: 1; transform: translateX(2px); }
  70% { transform: translateX(-1px); }
}

@keyframes target-candidate-pulse {
  0%, 100% {
    opacity: 0.94;
  }
  50% {
    opacity: 1;
    filter:
      saturate(1.1)
      brightness(1.07)
      drop-shadow(0 0 3px rgba(242, 207, 111, 0.52))
      drop-shadow(0 0 7px rgba(120, 236, 226, 0.3))
      drop-shadow(0 4px 2px rgba(30, 25, 18, 0.24));
  }
}

@keyframes target-candidate-plinth-pulse {
  0%, 100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .token--target-candidate .token__sprite,
  .token--target-candidate .token-plinth,
  .is-risk {
    animation: none;
  }
}

@keyframes phase-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% + 5px)); }
}

@keyframes duel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes duel-strike-friendly {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
  36% { transform: translateX(18px) rotate(2deg) scale(1.08); }
  54% { transform: translateX(10px) rotate(-1deg) scale(1.03); }
}

@keyframes duel-strike-enemy {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
  36% { transform: translateX(-18px) rotate(-2deg) scale(1.08); }
  54% { transform: translateX(-10px) rotate(1deg) scale(1.03); }
}

@keyframes duel-hit-friendly {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  28% { transform: translateX(-11px) rotate(-3deg); }
  52% { transform: translateX(5px) rotate(1deg); }
}

@keyframes duel-hit-enemy {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  28% { transform: translateX(11px) rotate(3deg); }
  52% { transform: translateX(-5px) rotate(-1deg); }
}

@keyframes duel-evade {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  35% { transform: translateX(14px) translateY(-4px) rotate(3deg); }
  68% { transform: translateX(-4px) translateY(0) rotate(-1deg); }
}

@keyframes duel-block {
  0%, 100% { transform: translateX(0) scale(1); }
  32% { transform: translateX(-3px) scale(1.08); }
  58% { transform: translateX(2px) scale(1.02); }
}

@keyframes duel-held {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(2px); }
  75% { transform: translateY(-1px); }
}

@keyframes duel-shot-attacker {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-8px, -50%); }
  18% { opacity: 1; }
  72% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(8px, -50%); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); transform: translate(14px, -50%); }
}

@keyframes duel-shot-defender {
  0% { opacity: 0; clip-path: inset(0 0 0 100%); transform: translate(8px, -50%); }
  18% { opacity: 1; }
  72% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(-8px, -50%); }
  100% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-14px, -50%); }
}

@keyframes duel-impact-burst {
  0% { opacity: 0; transform: translateY(-50%) scale(0.35); }
  48% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(1.75); }
}

@keyframes hp-risk {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.22; }
}

@keyframes cannon-arm {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes fieldwork-token-arrive {
  0% { opacity: 0; transform: translateY(-6px) scale(0.94); }
  62% { opacity: 1; transform: translateY(1px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fieldwork-board-refresh-red-pulse {
  0% { opacity: 0; stroke-width: 4; }
  16% { opacity: 1; stroke-width: 3; }
  100% { opacity: 0; stroke-width: 0.75; }
}

@keyframes board-barrage {
  0%, 100% { filter: none; }
  25% { filter: sepia(1) saturate(3) brightness(1.45); transform: translateX(-2px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-1px); }
}

@keyframes base-heal {
  50% {
    filter:
      brightness(1.45)
      drop-shadow(0 0 4px rgba(236, 198, 101, 0.84));
  }
}

@keyframes ion-freeze {
  50% { fill: rgba(184, 225, 231, 0.92); filter: drop-shadow(0 0 14px #b9f6ff); }
}

@media (max-aspect-ratio: 3 / 2) {
  html,
  body {
    background: #090d0d;
  }

  .rotate-device {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100vw;
    height: 100vh;
    min-height: 100dvh;
    min-height: 100lvh;
    overflow: hidden;
    padding: 30px;
    color: #f5e7c8;
    background: #090d0d;
    isolation: isolate;
    text-align: center;
  }

  .rotate-device::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14vh 0;
    background:
      linear-gradient(rgba(24, 25, 22, 0.68), rgba(19, 18, 16, 0.88)),
      var(--battle-bg) center / cover no-repeat;
  }

  .rotate-device__glyph {
    position: relative;
    width: 88px;
    height: 58px;
    margin-bottom: 8px;
    border: 3px solid #d1ab58;
    border-radius: 10px;
    animation: rotate-prompt 2.4s ease-in-out infinite;
  }

  .rotate-device__glyph span {
    position: absolute;
    right: 5px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d1ab58;
    transform: translateY(-50%);
  }

  .rotate-device strong {
    font-family: var(--font-display);
    font-size: 23px;
    letter-spacing: 0.04em;
  }

  .rotate-device small {
    color: rgba(245, 231, 200, 0.72);
    font-size: 12px;
  }

  .is-attacker-console .rotate-device {
    display: none;
  }

  #app {
    visibility: hidden;
  }
}


@keyframes rotate-prompt {
  0%, 18% { transform: rotate(90deg); }
  48%, 100% { transform: rotate(0deg); }
}

@media (max-width: 760px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
  html,
  body {
    height: auto;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .rotate-device {
    display: none !important;
  }

  #app {
    visibility: visible;
  }

  .title-screen,
  .submenu-screen {
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    transform: none;
  }

  .title-screen {
    padding-bottom: max(18px, var(--safe-bottom));
  }

  .title-screen__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    height: auto;
    min-height: 100svh;
    padding: max(18px, var(--safe-top)) 16px 22px;
  }

  .title-hero {
    align-content: start;
    width: min(100%, 430px);
    margin: 0 auto;
    padding-top: 0;
  }

  .title-screen .game-logo {
    width: 100%;
    padding: 12px 14px 14px;
  }

  .title-screen .game-logo--image {
    width: min(60%, 234px);
    padding: 0;
    transform: none;
  }

  .title-screen .game-logo__image {
    max-height: 126px;
  }

  .title-screen .game-logo__killer {
    font-size: 24px;
  }

  .title-screen .game-logo__kosmonauts {
    margin-top: 4px;
    font-size: 36px;
    line-height: 0.95;
  }

  .title-screen .game-logo__from {
    margin-top: 7px;
    font-size: 12px;
  }

  .title-screen .game-logo__mars {
    margin-top: 4px;
    font-size: 35px;
  }

  .title-screen__strapline {
    margin: 10px 0 0;
    padding: 7px 10px;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.08em;
  }

  .operation-panel,
  .title-primary-actions,
  #title-command-menu {
    display: none;
  }

  .mobile-home-menu {
    display: grid;
    gap: 10px;
    width: min(100%, 430px);
    margin: 0 auto;
  }

  .mobile-home-menu__item {
    display: grid;
    gap: 5px;
    min-height: 74px;
    padding: 13px 15px;
    border: 1px solid rgba(240, 185, 77, 0.36);
    border-radius: 6px;
    color: var(--kk-cream);
    background:
      radial-gradient(circle at 0% 50%, rgba(54, 226, 207, 0.08), transparent 58%),
      linear-gradient(180deg, rgba(12, 27, 25, 0.9), rgba(4, 10, 10, 0.94));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
    text-align: left;
    cursor: pointer;
  }

  .mobile-home-menu__item--primary {
    border-color: rgba(240, 185, 77, 0.72);
    background:
      radial-gradient(circle at 0% 50%, rgba(54, 226, 207, 0.12), transparent 62%),
      linear-gradient(180deg, rgba(67, 51, 24, 0.92), rgba(7, 13, 12, 0.96));
  }

  .mobile-home-menu__item span {
    color: #ffe7a5;
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }

  .mobile-home-menu__item small {
    color: rgba(245, 229, 183, 0.72);
    font-size: 12px;
    line-height: 1.25;
    text-transform: none;
  }

  .mobile-install {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 430px);
    max-width: none;
    margin: 0 auto;
    padding: 14px 15px 15px;
    border-width: 1px;
    border-radius: 6px;
    text-align: left;
    transform: none;
  }

  .mobile-install strong {
    margin-bottom: 7px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .mobile-install p {
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.02em;
  }

  .mobile-install__steps {
    gap: 6px;
    margin-top: 10px;
    font-size: 11px;
  }

  .system-ticker {
    display: none;
  }

  .submenu-screen {
    color: var(--kk-cream);
    background:
      linear-gradient(180deg, rgba(3, 7, 7, 0.84), rgba(6, 8, 7, 0.92)),
      var(--menu-bg) center / cover no-repeat,
      #6b3828;
  }

  .submenu-header {
    position: sticky;
    top: 0;
    z-index: 30;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 58px;
    padding: max(8px, var(--safe-top)) 10px 8px;
    background: rgba(4, 9, 9, 0.95);
  }

  .submenu-header h1 {
    font-size: 18px;
    line-height: 1.05;
  }

  .submenu-back {
    min-width: 72px;
    min-height: 40px;
  }

  .submenu-header__titlebar {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
    justify-items: start;
    justify-self: stretch;
    gap: 6px;
  }

  .submenu-header__titlebar h1 {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: left;
  }


}

/* New Basecamp refinement: align Prepare with the campaign select/detail stage. */
.new-basecamp-screen {
  --new-basecamp-frame-art: url("assets/generated-art/ui/shockframe/panel-frame-clean-v1.png");
  --new-basecamp-row-art: url("assets/generated-art/ui/shockframe/table-row-v1.png");
  --new-basecamp-row-active-art: url("assets/generated-art/ui/shockframe/table-row-highlight-v1.png");
  --new-basecamp-title-decor-art: url("assets/generated-art/ui/shockframe/decor-title-v1.png");
  --new-basecamp-icon-list: url("assets/generated-art/ui/advanced-scifi/icon-list-v1.png");
  display: grid;
  grid-template-rows: 104px minmax(0, 1fr);
  width: max(var(--game-width), calc(100vw / var(--game-scale)));
  height: max(var(--game-height), calc(100dvh / var(--game-scale)));
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 38%, rgba(162, 76, 41, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(2, 7, 9, 0.24), rgba(2, 7, 9, 0.52)),
    var(--menu-bg) center / cover no-repeat,
    #02080a;
  font-family: var(--font-menu);
}

.new-basecamp-screen::before,
.new-basecamp-screen::after {
  content: none;
}

.new-basecamp-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr) 138px;
  gap: 16px;
  align-items: center;
  width: min(1168px, calc(var(--game-width) - 32px));
  min-height: 92px;
  margin: 0 auto;
  padding: 8px 20px 18px;
  border: 0;
  border-bottom: 1px solid rgba(54, 226, 207, 0.28);
  background: transparent;
  box-shadow: none;
}

.new-basecamp-header::before {
  content: "";
  position: absolute;
  right: 208px;
  bottom: -5px;
  left: 208px;
  height: 13px;
  opacity: 0.72;
  background: var(--new-basecamp-title-decor-art) center / contain no-repeat;
}

.new-basecamp-header__kicker {
  color: rgba(54, 226, 207, 0.78);
  font-family: var(--font-menu);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.new-basecamp-header h1 {
  margin: 2px 0 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 44px;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(130, 62, 35, 0.62);
}

.new-basecamp-screen .submenu-back {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  justify-self: start;
  width: 138px;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px 0 0;
  border: 0;
  color: #ded2ad;
  background:
    linear-gradient(90deg, rgba(9, 43, 43, 0.34), rgba(3, 10, 11, 0.76)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  box-shadow:
    inset 0 0 0 1px rgba(240, 185, 77, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.22);
  font-family: var(--font-menu);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
}

.new-basecamp-screen .submenu-back::before {
  content: "";
  align-self: stretch;
  width: 42px;
  border-right: 1px solid rgba(240, 185, 77, 0.22);
  background:
    radial-gradient(circle, rgba(54, 226, 207, 0.18), transparent 56%),
    var(--new-basecamp-icon-list) center / 20px 20px no-repeat,
    rgba(54, 226, 207, 0.03);
}

.new-basecamp-screen .submenu-back:hover,
.new-basecamp-screen .submenu-back:focus-visible {
  color: var(--kk-teal);
  background:
    linear-gradient(90deg, rgba(16, 76, 76, 0.52), rgba(3, 15, 16, 0.8)),
    var(--new-basecamp-row-active-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  box-shadow:
    0 0 0 1px rgba(54, 226, 207, 0.12),
    0 0 22px rgba(54, 226, 207, 0.16);
  outline: 0;
}

.new-basecamp-workspace {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 182px minmax(0, 1fr);
  grid-template-rows: 52px minmax(0, 1fr);
  gap: 12px;
  width: min(1168px, calc(var(--game-width) - 32px));
  height: min(558px, calc(var(--game-height) - 112px));
  min-height: 0;
  margin: 0 auto 16px;
  font-family: var(--font-menu);
}

.new-basecamp-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.new-basecamp-topbar__item,
.new-basecamp-topbar__deck {
  min-height: 44px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(9, 43, 43, 0.34), rgba(3, 10, 11, 0.76)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  box-shadow:
    inset 0 0 0 1px rgba(240, 185, 77, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.new-basecamp-topbar__item {
  display: grid;
  align-content: center;
  width: 164px;
  gap: 2px;
  padding: 0 12px;
}

.new-basecamp-topbar__item small,
.new-basecamp-nav__kicker,
.new-basecamp-detail__kicker,
.new-basecamp-detail__status,
.new-basecamp-entry small,
.new-basecamp-command-slots__kicker {
  color: rgba(54, 226, 207, 0.76);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.new-basecamp-topbar__item strong {
  color: rgba(255, 242, 189, 0.94);
  font-family: var(--font-menu);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.new-basecamp-topbar__deck,
.new-basecamp-primary,
.new-basecamp-secondary {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  color: rgba(255, 242, 189, 0.94);
  font-family: var(--font-menu);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.new-basecamp-topbar__deck:hover,
.new-basecamp-topbar__deck:focus-visible,
.new-basecamp-primary:hover,
.new-basecamp-primary:focus-visible,
.new-basecamp-secondary:hover,
.new-basecamp-secondary:focus-visible {
  color: #d8fff8;
  background:
    linear-gradient(90deg, rgba(16, 76, 76, 0.52), rgba(3, 15, 16, 0.8)),
    var(--new-basecamp-row-active-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  outline: 0;
}

.new-basecamp-nav,
.new-basecamp-monitor {
  min-height: 0;
  border: 0;
  background:
    linear-gradient(180deg, rgba(2, 20, 23, 0.86), rgba(1, 8, 11, 0.94)),
    radial-gradient(circle at 50% 16%, rgba(54, 226, 207, 0.1), transparent 46%),
    var(--new-basecamp-frame-art) center / 100% 100% no-repeat,
    #02080a;
  background-blend-mode: normal, normal, screen, normal;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(54, 226, 207, 0.12),
    inset 0 0 42px rgba(54, 226, 207, 0.06);
  backdrop-filter: none;
}

.new-basecamp-nav {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 12px;
  overflow: hidden;
}

.new-basecamp-nav__kicker {
  margin: 0 4px 4px;
}

.new-basecamp-nav__item {
  display: grid;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(224, 183, 88, 0.14);
  color: rgba(245, 229, 183, 0.7);
  background:
    linear-gradient(90deg, rgba(11, 32, 33, 0.38), rgba(2, 9, 10, 0.3));
  text-align: left;
  cursor: pointer;
}

.new-basecamp-nav__item:hover,
.new-basecamp-nav__item:focus-visible,
.new-basecamp-nav__item.is-active {
  border-color: rgba(224, 183, 88, 0.58);
  color: #fff2bd;
  background:
    linear-gradient(90deg, rgba(224, 183, 88, 0.13), transparent 64%),
    rgba(16, 25, 22, 0.84);
  outline: 0;
}

.new-basecamp-nav__item strong,
.new-basecamp-nav__deck strong {
  color: inherit;
  font-family: var(--font-menu);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.new-basecamp-nav__item small,
.new-basecamp-nav__slot small {
  color: rgba(245, 229, 183, 0.52);
  font-family: var(--font-menu);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.new-basecamp-nav__deck {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid rgba(54, 226, 207, 0.16);
  background: rgba(3, 12, 13, 0.58);
}

.new-basecamp-nav__slot {
  display: grid;
  gap: 2px;
  padding-top: 5px;
  border-top: 1px solid rgba(54, 226, 207, 0.1);
}

.new-basecamp-nav__slot span {
  color: rgba(245, 229, 183, 0.76);
  font-family: var(--font-menu);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.new-basecamp-monitor {
  display: grid;
  grid-template-rows: 88px minmax(0, 1fr);
  padding: 18px 22px 20px;
}

.new-basecamp-monitor__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-content: center;
  align-items: center;
  gap: 3px;
  min-height: 0;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(54, 226, 207, 0.18);
  background: transparent;
}

.new-basecamp-monitor__header span {
  color: rgba(54, 226, 207, 0.76);
  font-family: var(--font-menu);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.new-basecamp-monitor__header h2,
.new-basecamp-detail h2 {
  margin: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.new-basecamp-monitor__header h2 {
  font-size: 30px;
  line-height: 1;
}

.new-basecamp-monitor__header p {
  display: none;
}

.new-basecamp-search {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.new-basecamp-search span {
  grid-column: 1 / -1;
  color: rgba(54, 226, 207, 0.72);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.new-basecamp-search input {
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(54, 226, 207, 0.22);
  color: #fff2bd;
  background: rgba(1, 8, 10, 0.74);
  font-family: var(--font-menu);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  outline: 0;
}

.new-basecamp-search input:focus {
  border-color: rgba(54, 226, 207, 0.66);
  box-shadow: 0 0 0 1px rgba(54, 226, 207, 0.16);
}

.new-basecamp-search button {
  height: 32px;
  padding: 0 7px;
  border: 1px solid rgba(224, 183, 88, 0.18);
  color: rgba(245, 229, 183, 0.74);
  background: rgba(4, 12, 13, 0.76);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.new-basecamp-search button:not(:disabled) {
  cursor: pointer;
}

.new-basecamp-search button:not(:disabled):hover,
.new-basecamp-search button:not(:disabled):focus-visible {
  border-color: rgba(54, 226, 207, 0.58);
  color: #d8fff8;
  outline: 0;
}

.new-basecamp-search button:disabled {
  opacity: 0.42;
}

.new-basecamp-search small {
  grid-column: 1 / -1;
  color: rgba(245, 229, 183, 0.54);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.new-basecamp-monitor__body {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding-top: 14px;
}

.new-basecamp-entry-list {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  padding-right: 2px;
  overflow: hidden auto;
  scrollbar-width: none;
}

.new-basecamp-entry-list::-webkit-scrollbar,
.new-basecamp-detail__dossier::-webkit-scrollbar,
.new-basecamp-deck-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.new-basecamp-entry {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 3px 9px;
  align-items: center;
  min-height: 50px;
  padding: 6px;
  border: 1px solid rgba(224, 183, 88, 0.14);
  color: rgba(245, 229, 183, 0.76);
  background: rgba(5, 13, 14, 0.54);
  text-align: left;
  cursor: pointer;
}

.new-basecamp-entry:hover,
.new-basecamp-entry:focus-visible,
.new-basecamp-entry.is-selected {
  border-color: rgba(54, 226, 207, 0.58);
  color: #fff2bd;
  background:
    linear-gradient(90deg, rgba(54, 226, 207, 0.12), transparent 68%),
    rgba(11, 24, 24, 0.78);
  outline: 0;
}

.new-basecamp-entry__thumb {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 38px;
  overflow: hidden;
  border: 1px solid rgba(54, 226, 207, 0.16);
  color: rgba(54, 226, 207, 0.74);
  background: rgba(3, 10, 11, 0.82);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
}

.new-basecamp-entry strong {
  color: inherit;
  font-family: var(--font-menu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.035em;
}

.new-basecamp-detail {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

.new-basecamp-detail__visual {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(224, 183, 88, 0.18);
  background:
    linear-gradient(180deg, rgba(18, 27, 26, 0.72), rgba(3, 9, 10, 0.82));
}

.new-basecamp-detail__visual .shop-card__game-card {
  width: 100%;
  min-height: 0;
}

.new-basecamp-detail__visual figcaption {
  color: rgba(245, 229, 183, 0.56);
  font-family: var(--font-menu);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.new-basecamp-detail__visual--manual {
  min-height: 0;
  color: rgba(54, 226, 207, 0.82);
  background:
    linear-gradient(180deg, rgba(18, 27, 26, 0.5), rgba(3, 9, 10, 0.78)),
    repeating-linear-gradient(0deg, rgba(54, 226, 207, 0.035) 0 1px, transparent 1px 9px);
}

.new-basecamp-detail__visual--manual strong {
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 24px;
  font-weight: 600;
}

.new-basecamp-detail__visual--mode,
.new-basecamp-detail__visual--archive {
  position: relative;
  overflow: hidden;
}

.new-basecamp-detail__visual--mode img,
.new-basecamp-detail__visual--archive > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.new-basecamp-detail__visual--mode.is-redacted img,
.new-basecamp-detail__visual--archive.is-redacted > img {
  opacity: 0.18;
  filter: grayscale(1) contrast(1.3);
}

.new-basecamp-detail__visual--mode.is-redacted::after,
.new-basecamp-detail__visual--archive.is-redacted::after {
  content: "CLASSIFIED";
  position: absolute;
  inset: 50% auto auto 50%;
  padding: 8px 10px;
  border: 1px solid rgba(224, 183, 88, 0.4);
  color: rgba(245, 229, 183, 0.82);
  background: rgba(3, 9, 10, 0.86);
  font-family: var(--font-menu);
  font-size: 9px;
  letter-spacing: 0.1em;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.new-basecamp-archive-actions {
  display: grid;
  gap: 7px;
  padding-top: 2px;
}

.new-basecamp-detail__dossier {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden auto;
  scrollbar-width: none;
}

.new-basecamp-screen.is-intelligence-workspace .new-basecamp-detail__dossier {
  -webkit-user-select: text;
  user-select: text;
}

.new-basecamp-screen.is-intelligence-workspace .new-basecamp-detail__dossier
  :is(a, button, input, select, textarea, [role="button"]) {
  -webkit-user-select: none;
  user-select: none;
}

.new-basecamp-detail__heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(224, 183, 88, 0.16);
}

.new-basecamp-detail h2 {
  font-size: 27px;
  line-height: 1.02;
}

.new-basecamp-detail__summary,
.new-basecamp-detail__note,
.new-basecamp-command-slots p {
  margin: 0;
  color: rgba(245, 229, 183, 0.8);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.36;
  text-transform: none;
}

.new-basecamp-detail__chips,
.new-basecamp-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.new-basecamp-detail__mechanics,
.new-basecamp-detail__procurement {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(54, 226, 207, 0.14);
  background:
    linear-gradient(180deg, rgba(4, 20, 22, 0.72), rgba(1, 8, 10, 0.42)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
}

.new-basecamp-detail__prep-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(250px, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

.new-basecamp-detail__procurement {
  align-content: start;
  border-color: rgba(224, 183, 88, 0.24);
  background:
    linear-gradient(180deg, rgba(44, 35, 18, 0.58), rgba(1, 8, 10, 0.52)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
}

.new-basecamp-detail__section-kicker {
  color: rgba(54, 226, 207, 0.78);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.new-basecamp-detail__stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.new-basecamp-detail__stat-grid div {
  display: grid;
  gap: 3px;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid rgba(54, 226, 207, 0.12);
  background: rgba(0, 7, 9, 0.42);
}

.new-basecamp-detail__stat-grid dt {
  color: rgba(54, 226, 207, 0.72);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.new-basecamp-detail__stat-grid dd {
  margin: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.new-basecamp-detail__perk-grid,
.new-basecamp-detail__shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.new-basecamp-detail__perk-grid span {
  min-height: 22px;
  padding: 5px 7px 4px;
  border: 1px solid rgba(224, 183, 88, 0.22);
  color: rgba(245, 229, 183, 0.82);
  background: rgba(224, 183, 88, 0.07);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.new-basecamp-detail__rank-note,
.new-basecamp-detail__procurement p,
.new-basecamp-detail__procurement small {
  margin: 0;
  color: rgba(245, 229, 183, 0.72);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
}

.new-basecamp-detail__procurement strong {
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.new-basecamp-detail__shop-actions button:disabled {
  cursor: default;
  opacity: 0.42;
  filter: grayscale(0.35);
}

.new-basecamp-detail__chips span {
  min-height: 22px;
  padding: 5px 7px 4px;
  border: 1px solid rgba(224, 183, 88, 0.2);
  color: rgba(245, 229, 183, 0.76);
  background: rgba(224, 183, 88, 0.06);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.new-basecamp-detail__rows {
  display: grid;
  gap: 7px;
  margin: 0;
}

.new-basecamp-detail__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(54, 226, 207, 0.12);
  background: rgba(1, 8, 10, 0.36);
}

.new-basecamp-detail__row dt {
  color: rgba(54, 226, 207, 0.76);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.new-basecamp-detail__row dd {
  margin: 0;
  color: rgba(245, 229, 183, 0.78);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.28;
}

.new-basecamp-deck-dialog {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 44px;
  background: rgba(0, 5, 7, 0.64);
}

.new-basecamp-dev-dialog {
  position: absolute;
  z-index: 72;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 44px;
  background: rgba(0, 5, 7, 0.66);
}

.new-basecamp-deck-dialog__panel {
  display: grid;
  grid-template-rows: 68px minmax(0, 1fr);
  width: min(980px, 84vw);
  height: min(548px, 82vh);
  border: 0;
  background:
    linear-gradient(180deg, rgba(2, 20, 23, 0.96), rgba(1, 8, 11, 0.98)),
    var(--new-basecamp-frame-art) center / 100% 100% no-repeat,
    #02080a;
  background-blend-mode: normal, screen, normal;
  box-shadow:
    0 34px 86px rgba(0, 0, 0, 0.64),
    inset 0 0 0 1px rgba(54, 226, 207, 0.14);
}

.new-basecamp-dev-dialog__panel {
  display: grid;
  grid-template-rows: 68px minmax(0, 1fr);
  width: min(900px, 75vw);
  height: min(560px, 75vh);
  border: 0;
  background:
    linear-gradient(180deg, rgba(2, 20, 23, 0.96), rgba(1, 8, 11, 0.98)),
    var(--new-basecamp-frame-art) center / 100% 100% no-repeat,
    #02080a;
  background-blend-mode: normal, screen, normal;
  box-shadow:
    0 34px 86px rgba(0, 0, 0, 0.64),
    inset 0 0 0 1px rgba(54, 226, 207, 0.14);
}

.new-basecamp-deck-dialog__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 82px;
  gap: 12px;
  align-items: center;
  min-height: 0;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(54, 226, 207, 0.18);
}

.new-basecamp-dev-dialog__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 12px;
  align-items: center;
  min-height: 0;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(54, 226, 207, 0.18);
}

.new-basecamp-deck-dialog__header h2 {
  margin: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.new-basecamp-dev-dialog__header h2 {
  margin: 4px 0 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.new-basecamp-deck-picker {
  display: flex;
  gap: 6px;
}

.new-basecamp-deck-picker button,
.new-basecamp-deck-dialog__close,
.new-basecamp-dev-dialog__close {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(224, 183, 88, 0.22);
  color: rgba(245, 229, 183, 0.74);
  background: rgba(4, 12, 13, 0.76);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.new-basecamp-dev-dialog__close:hover,
.new-basecamp-dev-dialog__close:focus-visible {
  border-color: rgba(54, 226, 207, 0.64);
  color: #d8fff8;
  outline: 0;
}

.new-basecamp-deck-picker button.is-active {
  border-color: rgba(54, 226, 207, 0.64);
  color: #d8fff8;
}

.new-basecamp-deck-dialog__body {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 14px 18px 18px;
}

.new-basecamp-dev-dialog__body {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  min-height: 0;
  padding: 14px 18px 18px;
  overflow: hidden;
}

.new-basecamp-deck-summary,
.new-basecamp-deck-browser {
  border: 0;
  background: transparent;
}

.new-basecamp-deck-summary {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.new-basecamp-loadout-rules {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(54, 226, 207, 0.18);
  background: rgba(54, 226, 207, 0.045);
}

.new-basecamp-loadout-rules p {
  margin: 0;
  color: rgba(245, 229, 183, 0.78);
  font-family: var(--font-menu);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
}

.new-basecamp-loadout-rules__list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.new-basecamp-loadout-rules__list li {
  display: grid;
  gap: 2px;
  padding-top: 7px;
  border-top: 1px solid rgba(224, 183, 88, 0.12);
}

.new-basecamp-loadout-rules__list strong {
  color: #d8fff8;
  font-family: var(--font-menu);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.new-basecamp-loadout-rules__list span {
  color: rgba(245, 229, 183, 0.66);
  font-size: 9px;
  line-height: 1.32;
}

.new-basecamp-deck-browser {
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  min-height: 0;
  padding: 0;
}

.new-basecamp-dev-section {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(54, 226, 207, 0.13);
  background:
    linear-gradient(135deg, rgba(54, 226, 207, 0.06), transparent 38%),
    rgba(1, 8, 10, 0.46);
  overflow: hidden auto;
  scrollbar-width: thin;
}

.new-basecamp-dev-section--overview {
  grid-row: 1 / span 2;
}

.new-basecamp-dev-section h3 {
  margin: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.new-basecamp-dev-grid {
  display: grid;
  gap: 7px;
  margin: 0;
}

.new-basecamp-dev-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 8px;
  border: 1px solid rgba(224, 183, 88, 0.12);
  background: rgba(224, 183, 88, 0.04);
}

.new-basecamp-dev-row dt,
.new-basecamp-dev-artwork__body small,
.new-basecamp-dev-sound small,
.new-basecamp-dev-badges span {
  color: rgba(54, 226, 207, 0.72);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.new-basecamp-dev-row dd {
  margin: 0;
  color: rgba(245, 229, 183, 0.78);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.new-basecamp-dev-row code,
.new-basecamp-dev-artwork__body code,
.new-basecamp-dev-sound code {
  color: #d9fff8;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.new-basecamp-dev-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.new-basecamp-dev-badges span {
  padding: 5px 7px;
  border: 1px solid rgba(240, 91, 80, 0.32);
  color: #ffd2cb;
  background: rgba(80, 18, 16, 0.22);
}

.new-basecamp-dev-artwork,
.new-basecamp-dev-sounds {
  display: grid;
  gap: 8px;
}

.new-basecamp-dev-artwork__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(224, 183, 88, 0.12);
  background: rgba(3, 10, 11, 0.54);
}

.new-basecamp-dev-artwork__thumb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(54, 226, 207, 0.16);
  background:
    radial-gradient(circle at 50% 55%, rgba(54, 226, 207, 0.1), transparent 55%),
    rgba(0, 5, 7, 0.82);
  overflow: hidden;
}

.new-basecamp-dev-artwork__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.new-basecamp-dev-artwork__body,
.new-basecamp-dev-sound {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.new-basecamp-dev-artwork__body strong,
.new-basecamp-dev-sound strong {
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.new-basecamp-dev-sound {
  padding: 8px;
  border: 1px solid rgba(224, 183, 88, 0.12);
  background: rgba(3, 10, 11, 0.54);
}

.new-basecamp-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 7px;
  min-height: 0;
  overflow: hidden auto;
  scrollbar-width: none;
}

.new-basecamp-deck-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 102px;
  padding: 7px;
  border: 1px solid rgba(224, 183, 88, 0.14);
  color: rgba(245, 229, 183, 0.78);
  background: rgba(5, 13, 14, 0.62);
  cursor: pointer;
}

.new-basecamp-deck-card.is-selected {
  border-color: rgba(54, 226, 207, 0.64);
  background:
    linear-gradient(90deg, rgba(54, 226, 207, 0.12), transparent 66%),
    rgba(11, 24, 24, 0.78);
}

.new-basecamp-deck-card__body strong {
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 10px;
  font-weight: 600;
}

.new-basecamp-deck-card__body small,
.new-basecamp-deck-card__body span {
  font-family: var(--font-menu);
  font-size: 7px;
}

.new-basecamp-service-preview {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
  border-color: rgba(54, 226, 207, 0.2);
  background:
    linear-gradient(180deg, rgba(18, 27, 26, 0.5), rgba(3, 9, 10, 0.78)),
    repeating-linear-gradient(0deg, rgba(54, 226, 207, 0.035) 0 1px, transparent 1px 9px);
}

.new-basecamp-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: min(47vh, 430px);
  overflow: hidden auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.new-basecamp-service-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 58px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 8px;
  border-color: rgba(224, 183, 88, 0.14);
  background: rgba(5, 13, 14, 0.58);
}

.identity-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.identity-calling-card,
.identity-emblem {
  position: relative;
  display: grid;
  place-items: end start;
  min-width: 0;
  width: 100%;
  min-height: 48px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(224, 183, 88, 0.22);
  background: rgba(3, 9, 10, 0.72);
}

.identity-calling-card {
  grid-column: span 2;
  aspect-ratio: 6 / 1;
}

.identity-emblem {
  place-items: center;
  aspect-ratio: 1 / 1;
}

.identity-calling-card img,
.identity-emblem img,
.new-basecamp-service-card__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.identity-calling-card img {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.identity-calling-card strong,
.identity-emblem strong {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding: 5px 7px;
  color: #fff1bc;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent);
  font-family: var(--font-menu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.identity-emblem strong {
  display: none;
}

.new-basecamp-screen {
  grid-template-rows: 92px minmax(0, 1fr);
  font-family: var(--font-menu);
}

.new-basecamp-header {
  grid-template-columns: 158px minmax(0, 1fr) 158px;
  width: min(1168px, calc(var(--game-width) - 32px));
  min-height: 84px;
  padding: 8px 0 12px;
}

.new-basecamp-header::before {
  right: 202px;
  left: 202px;
}

.new-basecamp-header h1 {
  font-family: var(--font-menu);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.new-basecamp-menu {
  position: relative;
  z-index: 8;
  align-self: center;
  justify-self: start;
  width: 158px;
}

.new-basecamp-menu__toggle,
.new-basecamp-menu__item {
  width: 100%;
  border: 0;
  color: #ded2ad;
  background:
    linear-gradient(90deg, rgba(9, 43, 43, 0.34), rgba(3, 10, 11, 0.76)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  box-shadow:
    inset 0 0 0 1px rgba(240, 185, 77, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.22);
  font-family: var(--font-menu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.new-basecamp-menu__toggle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  padding: 0 14px 0 0;
  text-align: left;
}

.new-basecamp-menu__toggle span {
  align-self: stretch;
  border-right: 1px solid rgba(240, 185, 77, 0.22);
  background:
    radial-gradient(circle, rgba(54, 226, 207, 0.18), transparent 56%),
    var(--new-basecamp-icon-list) center / 20px 20px no-repeat,
    rgba(54, 226, 207, 0.03);
}

.new-basecamp-menu__toggle strong {
  font: inherit;
  padding-left: 6px;
}

.new-basecamp-menu__list {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  display: grid;
  gap: 6px;
  width: 184px;
  padding: 8px;
  border: 1px solid rgba(54, 226, 207, 0.22);
  background: rgba(2, 10, 12, 0.96);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(240, 185, 77, 0.05);
}

.new-basecamp-menu__item {
  min-height: 36px;
  padding: 0 12px;
  text-align: left;
}

.new-basecamp-menu__toggle:hover,
.new-basecamp-menu__toggle:focus-visible,
.new-basecamp-menu__item:hover,
.new-basecamp-menu__item:focus-visible,
.new-basecamp-menu__item.is-active {
  color: var(--kk-teal);
  background:
    linear-gradient(90deg, rgba(16, 76, 76, 0.52), rgba(3, 15, 16, 0.8)),
    var(--new-basecamp-row-active-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  outline: 0;
}

.new-basecamp-workspace {
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-rows: 48px minmax(0, 1fr);
  gap: 10px 14px;
  width: min(1168px, calc(var(--game-width) - 32px));
  height: min(566px, calc(var(--game-height) - 100px));
  margin: 0 auto 14px;
}

.new-basecamp-topbar {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 136px;
  gap: 7px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.new-basecamp-topbar__item,
.new-basecamp-topbar__deck {
  min-height: 44px;
  background:
    linear-gradient(90deg, rgba(9, 43, 43, 0.34), rgba(3, 10, 11, 0.76)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  box-shadow:
    inset 0 0 0 1px rgba(240, 185, 77, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.new-basecamp-topbar__item {
  padding: 7px 10px;
}

.new-basecamp-topbar__item strong,
.new-basecamp-nav__item strong,
.new-basecamp-nav__deck strong,
.new-basecamp-entry strong,
.new-basecamp-nav__slot span {
  font-family: var(--font-menu);
  font-weight: 600;
}

.new-basecamp-topbar__item strong {
  font-size: 12px;
  letter-spacing: 0.04em;
}

.new-basecamp-nav {
  grid-column: 1;
  grid-row: 1 / 3;
  gap: 5px;
  padding: 10px 9px;
  overflow: hidden auto;
  scrollbar-width: none;
}

.new-basecamp-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.new-basecamp-nav__item {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  align-content: center;
  min-height: 32px;
  padding: 5px 8px;
}

.new-basecamp-nav__item strong,
.new-basecamp-nav__deck strong {
  font-size: 9px;
  letter-spacing: 0.05em;
}

.new-basecamp-nav__item small,
.new-basecamp-nav__slot small {
  font-size: 7px;
}

.new-basecamp-nav__item strong,
.new-basecamp-nav__item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-basecamp-nav__item small {
  justify-self: end;
}

.new-basecamp-nav__filters {
  display: grid;
  gap: 5px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(54, 226, 207, 0.13);
}

.new-basecamp-faction-filter,
.new-basecamp-unit-filter {
  display: grid;
  gap: 3px;
}

.new-basecamp-faction-filter {
  grid-template-columns: minmax(0, 1fr);
}

.new-basecamp-unit-filter {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.new-basecamp-faction-filter button,
.new-basecamp-faction-select select,
.new-basecamp-unit-filter button {
  min-height: 20px;
  padding: 0 4px;
  border: 1px solid rgba(224, 183, 88, 0.18);
  color: rgba(245, 229, 183, 0.68);
  background: rgba(5, 14, 15, 0.62);
  font-family: var(--font-menu);
  font-size: 6.8px;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-align: center;
  cursor: pointer;
}

.new-basecamp-faction-filter button {
  justify-content: flex-start;
  min-height: 30px;
  padding: 0 8px;
  line-height: 1.15;
  text-align: left;
  white-space: normal;
}

.new-basecamp-faction-select {
  display: grid;
  gap: 3px;
}

.new-basecamp-faction-select span {
  color: rgba(54, 226, 207, 0.62);
  font-family: var(--font-menu);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.new-basecamp-faction-select select {
  width: 100%;
  min-height: 32px;
  padding: 0 24px 0 8px;
  appearance: none;
  background:
    linear-gradient(135deg, transparent calc(100% - 18px), rgba(54, 226, 207, 0.18) calc(100% - 18px)),
    linear-gradient(90deg, rgba(5, 14, 15, 0.78), rgba(5, 14, 15, 0.62));
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.new-basecamp-faction-filter button:hover,
.new-basecamp-faction-filter button:focus-visible,
.new-basecamp-faction-filter button.is-active,
.new-basecamp-faction-select select:hover,
.new-basecamp-faction-select select:focus-visible,
.new-basecamp-faction-select select.is-active,
.new-basecamp-unit-filter button:hover,
.new-basecamp-unit-filter button:focus-visible,
.new-basecamp-unit-filter button.is-active {
  border-color: rgba(54, 226, 207, 0.58);
  color: #d8fff8;
  background:
    linear-gradient(90deg, rgba(54, 226, 207, 0.13), transparent 66%),
    rgba(10, 24, 25, 0.86);
  outline: 0;
}

.new-basecamp-multiselect {
  position: relative;
  z-index: 8;
  display: block;
  width: 100%;
  color: var(--basecamp-cream);
}

.new-basecamp-multiselect[open] {
  z-index: 18;
}

.new-basecamp-multiselect__summary {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 8px 42px 8px 12px;
  border: 1px solid rgba(224, 183, 88, 0.36);
  color: var(--basecamp-cream);
  background: rgba(3, 15, 15, 0.96);
  cursor: pointer;
  list-style: none;
}

.new-basecamp-multiselect__summary::-webkit-details-marker {
  display: none;
}

.new-basecamp-multiselect__summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--basecamp-signal);
  border-bottom: 2px solid var(--basecamp-signal);
  transform: translateY(-68%) rotate(45deg);
}

.new-basecamp-multiselect[open] > .new-basecamp-multiselect__summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.new-basecamp-multiselect__summary > span,
.new-basecamp-faction-select .new-basecamp-multiselect__summary > span {
  color: var(--basecamp-signal);
  font: 700 10px/13px var(--font-menu);
  letter-spacing: 0.08em;
}

.new-basecamp-multiselect__summary > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--basecamp-cream);
  font: 600 12px/16px var(--font-menu);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-basecamp-multiselect__menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: grid;
  max-height: 340px;
  padding: 6px;
  overflow: hidden auto;
  border: 1px solid rgba(54, 226, 207, 0.56);
  background: rgba(1, 10, 11, 0.99);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.72);
}

.new-basecamp-multiselect__option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid transparent;
  color: rgba(245, 229, 183, 0.82);
  background: rgba(5, 14, 15, 0.72);
  font: 600 12px/16px var(--font-menu);
  cursor: pointer;
}

.new-basecamp-multiselect__option:hover,
.new-basecamp-multiselect__option:focus-within {
  border-color: rgba(54, 226, 207, 0.48);
  color: #eafffa;
  background: rgba(54, 226, 207, 0.12);
}

.new-basecamp-multiselect__option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--basecamp-signal);
}

.new-basecamp-multiselect__option > span,
.new-basecamp-faction-select .new-basecamp-multiselect__option > span {
  color: inherit;
  font: inherit;
  letter-spacing: 0.02em;
  text-transform: none;
}

.new-basecamp-nav__deck {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  padding: 7px 8px;
}

.new-basecamp-nav__deck > .new-basecamp-nav__kicker {
  margin: 0;
}

.new-basecamp-nav__deck > strong {
  justify-self: end;
  font-size: 9px;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.new-basecamp-nav__slot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.new-basecamp-nav__slot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-basecamp-monitor {
  grid-column: 2;
  grid-row: 2;
  grid-template-rows: 72px minmax(0, 1fr);
  padding: 18px 20px 18px;
}

.new-basecamp-monitor__header {
  min-height: 0;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(54, 226, 207, 0.18);
  background: transparent;
}

.new-basecamp-monitor__header h2,
.new-basecamp-detail h2,
.new-basecamp-detail__visual--manual span,
.new-basecamp-detail__visual--manual strong,
.new-basecamp-service-preview strong,
.new-basecamp-service-card__mark {
  font-family: var(--font-menu);
  font-weight: 600;
}

.new-basecamp-monitor__header h2 {
  font-size: 30px;
  letter-spacing: 0.055em;
}

.new-basecamp-monitor__header p {
  display: none;
}

.new-basecamp-monitor__body {
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 14px;
  padding-top: 13px;
}

.new-basecamp-monitor__body--docs {
  grid-template-columns: minmax(0, 1fr);
}

.new-basecamp-entry {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 50px;
  padding: 6px;
}

.new-basecamp-entry__thumb {
  width: 44px;
  height: 38px;
}

.new-basecamp-entry strong {
  font-size: 10px;
}

.new-basecamp-detail {
  grid-template-columns: 206px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.new-basecamp-detail__visual {
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.new-basecamp-detail__dossier {
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
}

.new-basecamp-detail h2 {
  font-size: 26px;
  letter-spacing: 0.04em;
}

.new-basecamp-detail__summary,
.new-basecamp-detail__note,
.new-basecamp-command-slots p,
.new-basecamp-info-card p,
.new-basecamp-info-card__note {
  font-family: var(--font-menu);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.32;
}

.new-basecamp-info-docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow: hidden auto;
  scrollbar-width: none;
}

.new-basecamp-info-docs::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.new-basecamp-info-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(224, 183, 88, 0.16);
  background:
    linear-gradient(135deg, rgba(54, 226, 207, 0.08), transparent 42%),
    rgba(4, 12, 13, 0.66);
}

.new-basecamp-info-card__header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(54, 226, 207, 0.14);
}

.new-basecamp-info-card__header span,
.new-basecamp-info-card__header small {
  color: rgba(54, 226, 207, 0.76);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.new-basecamp-info-card__header small {
  color: rgba(245, 229, 183, 0.56);
}

.new-basecamp-info-card h3 {
  margin: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.045em;
}

.new-basecamp-info-card p,
.new-basecamp-info-card__note {
  margin: 0;
  color: rgba(245, 229, 183, 0.78);
  text-transform: none;
}

.new-basecamp-info-card__list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 0 0 18px;
  color: rgba(245, 229, 183, 0.8);
  font-family: var(--font-menu);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.32;
  text-transform: none;
}

.new-basecamp-info-card__list li {
  min-width: 0;
  padding-left: 2px;
  overflow-wrap: anywhere;
}

.new-basecamp-info-card__note {
  padding: 8px 9px;
  border-left: 2px solid rgba(224, 183, 88, 0.44);
  background: rgba(224, 183, 88, 0.05);
}

.new-basecamp-detail--perk-reference {
  align-items: stretch;
}

.perk-reference-index,
.perk-reference-dossier,
.perk-reference-group,
.perk-reference-card {
  min-width: 0;
}

.perk-reference-index {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(224, 183, 88, 0.18);
  background:
    linear-gradient(160deg, rgba(54, 226, 207, 0.08), transparent 42%),
    repeating-linear-gradient(0deg, rgba(54, 226, 207, 0.025) 0 1px, transparent 1px 9px),
    rgba(1, 8, 9, 0.86);
  overflow: hidden auto;
  scrollbar-width: thin;
}

.perk-reference-index:focus-visible,
.perk-reference-dossier:focus-visible {
  outline: 2px solid rgba(54, 226, 207, 0.82);
  outline-offset: -2px;
}

.perk-reference-index__kicker,
.perk-reference-card__code,
.perk-reference-card__status,
.perk-reference-group__header span,
.perk-reference-group__header > strong {
  color: rgba(54, 226, 207, 0.76);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.perk-reference-index > strong {
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.08;
}

.perk-reference-index > p,
.perk-reference-index__rules p,
.perk-reference-group__description,
.perk-reference-card__description {
  margin: 0;
  color: rgba(245, 229, 183, 0.76);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
}

.perk-reference-index__counts {
  display: grid;
  gap: 5px;
  margin: 0;
}

.perk-reference-index__counts .perk-reference-card__row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.perk-reference-index__rules {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(54, 226, 207, 0.18);
}

.perk-reference-index__rules h3 {
  margin: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.perk-reference-index__rules div {
  display: grid;
  gap: 3px;
}

.perk-reference-index__rules strong {
  color: rgba(54, 226, 207, 0.76);
  font-family: var(--font-menu);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.perk-reference-dossier {
  padding-right: 9px;
  overflow: hidden auto;
  scrollbar-width: thin;
}

.perk-reference-group {
  display: grid;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(54, 226, 207, 0.2);
}

.perk-reference-group__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
}

.perk-reference-group__header > div {
  display: grid;
  gap: 3px;
}

.perk-reference-group__header h3 {
  margin: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.045em;
}

.perk-reference-group__header > strong {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid rgba(54, 226, 207, 0.18);
  background: rgba(54, 226, 207, 0.05);
}

.perk-reference-grid {
  display: grid;
  gap: 9px;
}

.perk-reference-card {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(224, 183, 88, 0.15);
  background:
    linear-gradient(120deg, rgba(54, 226, 207, 0.055), transparent 38%),
    rgba(2, 10, 11, 0.72);
}

.perk-reference-card--hook {
  border-left: 2px solid rgba(224, 183, 88, 0.42);
}

.perk-reference-card--doctrine {
  border-left: 2px solid rgba(240, 91, 80, 0.42);
}

.perk-reference-card__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.perk-reference-card__identity {
  display: grid;
  gap: 2px;
}

.perk-reference-card__identity h4 {
  margin: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.perk-reference-card__code {
  color: rgba(54, 226, 207, 0.62);
  font-family: var(--font-mono);
  text-transform: none;
}

.perk-reference-card__status {
  flex: 0 0 auto;
  max-width: 190px;
  padding: 5px 7px;
  border: 1px solid rgba(54, 226, 207, 0.28);
  color: #bafff5;
  background: rgba(54, 226, 207, 0.07);
  line-height: 1.25;
  text-align: right;
}

.perk-reference-card__status.is-dormant {
  border-color: rgba(224, 183, 88, 0.3);
  color: #ffe7a4;
  background: rgba(224, 183, 88, 0.07);
}

.perk-reference-card__status.is-incomplete {
  border-color: rgba(240, 91, 80, 0.34);
  color: #ffd2cb;
  background: rgba(240, 91, 80, 0.08);
}

.perk-reference-card__description {
  color: rgba(245, 229, 183, 0.9);
  font-size: 11px;
}

.perk-reference-card__rows {
  display: grid;
  gap: 4px;
  margin: 0;
}

.perk-reference-card__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 9px;
  padding: 6px 7px;
  border-top: 1px solid rgba(54, 226, 207, 0.1);
}

.perk-reference-card__row dt {
  color: rgba(54, 226, 207, 0.68);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.perk-reference-card__row dd {
  margin: 0;
  color: rgba(245, 229, 183, 0.75);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-transform: none;
}

@media (max-width: 900px), (max-height: 620px) {
  .new-basecamp-detail--perk-reference {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start;
    overflow: hidden auto !important;
  }

  .perk-reference-index,
  .perk-reference-dossier {
    max-height: none;
    overflow: visible;
  }

  .perk-reference-card__header {
    display: grid;
  }

  .perk-reference-card__status {
    justify-self: start;
    max-width: none;
    text-align: left;
  }

  .perk-reference-card__row {
    grid-template-columns: 82px minmax(0, 1fr);
  }
}

.new-basecamp-detail__visual-title {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid rgba(54, 226, 207, 0.2);
  background:
    linear-gradient(90deg, rgba(18, 68, 69, 0.52), rgba(4, 12, 13, 0.86)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
}

.new-basecamp-detail__visual-title span {
  color: rgba(54, 226, 207, 0.76);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.new-basecamp-detail__visual-title strong {
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.06;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.new-basecamp-card-preview {
  cursor: default;
}

.new-basecamp-detail__visual .new-basecamp-card-preview {
  width: min(100%, 186px);
  justify-self: center;
  border-radius: 3px;
}

.new-basecamp-detail__visual .new-basecamp-card-preview:has(.card-image--runtime-aspect) {
  aspect-ratio: var(--battle-hud-card-aspect);
}

.new-basecamp-detail__visual .unit-dossier-card.card--unit {
  box-shadow:
    0 0 0 1px rgba(43, 249, 230, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(202, 184, 255, 0.24);
}

.new-basecamp-card-readout {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(54, 226, 207, 0.18);
  color: rgba(245, 229, 183, 0.78);
  background:
    linear-gradient(180deg, rgba(4, 20, 22, 0.72), rgba(1, 8, 10, 0.56)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
}

.new-basecamp-card-readout__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.new-basecamp-card-readout__stats div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(54, 226, 207, 0.12);
  background: rgba(0, 7, 9, 0.44);
}

.new-basecamp-card-readout__stats dt {
  min-width: 0;
  color: rgba(54, 226, 207, 0.72);
  font-family: var(--font-menu);
  font-size: 6.4px;
  font-weight: 600;
  letter-spacing: 0;
  overflow: visible;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

.new-basecamp-card-readout__stats dd {
  margin: 0;
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.new-basecamp-detail__row {
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 38px;
  padding: 8px 9px;
}

.new-basecamp-primary,
.new-basecamp-secondary {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  color: rgba(255, 242, 189, 0.94);
  background:
    linear-gradient(90deg, rgba(65, 51, 26, 0.82), rgba(3, 10, 11, 0.82)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, screen;
  font-family: var(--font-menu);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.new-basecamp-secondary {
  color: #cffff6;
  background:
    linear-gradient(90deg, rgba(16, 76, 76, 0.46), rgba(3, 10, 11, 0.82)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
}

.new-basecamp-entry.is-locked,
.new-basecamp-deck-card.is-locked,
.new-basecamp-service-card.is-locked {
  opacity: 0.56;
}

.new-basecamp-service-card.is-locked {
  filter: saturate(0.72);
}

.new-basecamp-service-card.is-locked::after {
  content: "LOCKED";
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 217, 142, 0.3);
  color: rgba(255, 226, 164, 0.88);
  background: rgba(0, 0, 0, 0.62);
  font-family: var(--font-menu);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.new-basecamp-entry__thumb img,
.new-basecamp-deck-card__art img {
  width: 100%;
  height: 100%;
}

.new-basecamp-entry__thumb img {
  object-fit: cover;
}

.new-basecamp-deck-card__art img {
  object-fit: contain;
}

.new-basecamp-deck-summary > strong {
  color: #fff2bd;
  font-family: var(--font-menu);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.new-basecamp-command-slots {
  display: grid;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(224, 183, 88, 0.18);
}

.new-basecamp-command-slot,
.new-basecamp-deck-field,
.new-basecamp-service-field {
  display: grid;
  gap: 5px;
}

.new-basecamp-command-slot span,
.new-basecamp-deck-field span,
.new-basecamp-service-field span,
.new-basecamp-service-preview__kicker,
.new-basecamp-service-card__body small {
  color: rgba(54, 226, 207, 0.76);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.new-basecamp-command-slot select,
.new-basecamp-deck-field select,
.new-basecamp-service-field select {
  min-height: 34px;
  border: 1px solid rgba(224, 183, 88, 0.26);
  color: rgba(245, 229, 183, 0.86);
  background: rgba(3, 9, 10, 0.96);
  font-family: var(--font-menu);
  font-size: 9px;
}

.new-basecamp-deck-browser__toolbar {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.new-basecamp-deck-picker button:disabled,
.new-basecamp-deck-card__controls button:disabled,
.new-basecamp-service-card button:disabled {
  opacity: 0.4;
  cursor: default;
}

.new-basecamp-deck-card__art {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(54, 226, 207, 0.14);
  background:
    radial-gradient(circle at 50% 42%, rgba(224, 183, 88, 0.08), transparent 58%),
    rgba(3, 9, 10, 0.9);
}

.new-basecamp-deck-card__body {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.new-basecamp-deck-card__controls {
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  gap: 4px;
}

.new-basecamp-deck-card__controls button {
  min-height: 26px;
  border: 1px solid rgba(224, 183, 88, 0.42);
  color: #ffe4a0;
  background: rgba(16, 22, 20, 0.94);
  cursor: pointer;
}

.new-basecamp-service-card__mark {
  display: grid;
  place-items: center;
  width: 58px;
  min-height: 58px;
  overflow: hidden;
  border: 1px solid rgba(224, 183, 88, 0.26);
  color: #ffe4a0;
  background: rgba(224, 183, 88, 0.09);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.new-basecamp-service-card__mark--calling {
  width: 72px;
  min-height: 42px;
  aspect-ratio: 6 / 1.8;
}

.new-basecamp-service-card__mark--calling img {
  object-fit: cover;
}

.new-basecamp-deck-card__controls span {
  display: grid;
  place-items: center;
  color: rgba(245, 229, 183, 0.82);
  font-family: var(--font-menu);
  font-size: 8px;
}

.new-basecamp-deck-explainer {
  grid-column: 1 / -1;
}

.new-basecamp-detail__visual--service {
  grid-template-rows: minmax(0, 1fr) auto;
}

.new-basecamp-service-preview small {
  color: rgba(245, 229, 183, 0.72);
  font-size: 11px;
  line-height: 1.3;
  text-transform: none;
}

.new-basecamp-service-preview__ribbon {
  display: grid;
  gap: 3px;
  min-width: 74px;
  padding: 8px 10px;
  border: 1px solid rgba(224, 183, 88, 0.34);
  color: #ffe4a0;
  background:
    linear-gradient(180deg, rgba(54, 226, 207, 0.12), transparent),
    rgba(11, 20, 19, 0.9);
}

.new-basecamp-service-preview__ribbon span {
  font-family: var(--font-menu);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.new-basecamp-service-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.new-basecamp-service-card.is-equipped {
  border-color: rgba(54, 226, 207, 0.64);
  background:
    linear-gradient(90deg, rgba(54, 226, 207, 0.11), transparent 62%),
    rgba(10, 25, 25, 0.82);
}

.new-basecamp-service-card__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.new-basecamp-service-card__body strong {
  overflow: hidden;
  color: rgba(255, 225, 145, 0.95);
  font-family: var(--font-menu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-basecamp-service-card__body span {
  color: rgba(245, 229, 183, 0.64);
  font-size: 10px;
  line-height: 1.25;
  text-transform: none;
}

.new-basecamp-service-card button {
  min-height: 30px;
  border: 1px solid rgba(54, 226, 207, 0.34);
  color: #cffff6;
  background: rgba(8, 18, 18, 0.9);
  font-family: var(--font-menu);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.new-basecamp-service-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.new-basecamp-service-card__actions button {
  min-width: 0;
  min-height: 28px;
  padding: 0 4px;
}

/* Basecamp production shell: a physical Bureau equipment room, sharing the
   Operations Viewer language without turning every surface into a CRT. */
.new-basecamp-screen {
  --basecamp-cream: #ead9a8;
  --basecamp-bright: #fff1bf;
  --basecamp-brass: #9c7a3d;
  --basecamp-signal: #37ddd0;
  position: relative;
  grid-template-rows: 90px minmax(0, 1fr);
  background:
    linear-gradient(180deg, rgba(2, 7, 9, 0.18), rgba(2, 7, 9, 0.46)),
    var(--menu-bg) center / cover no-repeat,
    #02080a;
}

.new-basecamp-screen::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(1168px, calc(var(--game-width) - 32px));
  height: min(643px, calc(var(--game-height) - 24px));
  border: 2px solid rgba(176, 145, 83, 0.6);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 54% 42%, rgba(55, 221, 208, 0.045), transparent 57%),
    linear-gradient(180deg, rgba(14, 14, 11, 0.97), rgba(2, 7, 7, 0.99)),
    repeating-linear-gradient(90deg, rgba(234, 217, 168, 0.018) 0 1px, transparent 1px 7px),
    #020505;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.58),
    inset 0 0 0 4px rgba(4, 5, 4, 0.9),
    inset 0 0 0 6px rgba(176, 145, 83, 0.2),
    inset 0 0 64px rgba(0, 0, 0, 0.72);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.new-basecamp-screen::after {
  content: "BUREAU QUARTERMASTER // EQUIPMENT ROOM 02";
  position: absolute;
  z-index: 6;
  top: 16px;
  left: max(218px, calc(50% - 370px));
  color: rgba(234, 217, 168, 0.58);
  font-family: var(--font-ticker);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.13em;
  pointer-events: none;
}

.new-basecamp-header {
  width: min(1116px, calc(var(--game-width) - 84px));
  min-height: 86px;
  padding: 22px 0 10px;
  border-bottom-color: rgba(176, 145, 83, 0.34);
}

.new-basecamp-header::before {
  opacity: 0.28;
  filter: sepia(1) saturate(0.6);
}

.new-basecamp-header h1 {
  color: var(--basecamp-bright);
  font-size: 39px;
  font-weight: 500;
  text-shadow: none;
}

.new-basecamp-workspace {
  width: min(1116px, calc(var(--game-width) - 84px));
  height: min(541px, calc(var(--game-height) - 118px));
  margin: 0 auto 22px;
}

.new-basecamp-workspace::before {
  content: "STORES LINK // VERIFIED";
  position: absolute;
  z-index: 7;
  top: -74px;
  right: 12px;
  color: rgba(55, 221, 208, 0.62);
  font-family: var(--font-ticker);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.13em;
  pointer-events: none;
}

.new-basecamp-topbar__mobile-label {
  display: none;
}

.new-basecamp-menu__toggle,
.new-basecamp-menu__item,
.new-basecamp-topbar__item,
.new-basecamp-topbar__deck {
  color: var(--basecamp-cream);
  background:
    linear-gradient(180deg, rgba(36, 31, 22, 0.84), rgba(7, 9, 8, 0.94)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, soft-light;
}

.new-basecamp-menu__toggle:hover,
.new-basecamp-menu__toggle:focus-visible,
.new-basecamp-menu__item:hover,
.new-basecamp-menu__item:focus-visible,
.new-basecamp-menu__item.is-active,
.new-basecamp-topbar__deck:hover,
.new-basecamp-topbar__deck:focus-visible {
  color: var(--basecamp-bright);
  background:
    linear-gradient(180deg, rgba(88, 68, 34, 0.82), rgba(9, 14, 12, 0.96)),
    var(--new-basecamp-row-active-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, soft-light;
  box-shadow:
    inset 0 -2px 0 rgba(55, 221, 208, 0.46),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.new-basecamp-nav,
.new-basecamp-monitor {
  border: 1px solid rgba(176, 145, 83, 0.28);
  background:
    linear-gradient(180deg, rgba(11, 13, 11, 0.94), rgba(2, 8, 8, 0.97)),
    radial-gradient(circle at 50% 16%, rgba(54, 226, 207, 0.045), transparent 44%),
    #020707;
  background-blend-mode: normal;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(234, 217, 168, 0.035),
    inset 0 0 28px rgba(0, 0, 0, 0.34);
}

.new-basecamp-nav__item {
  border-color: rgba(176, 145, 83, 0.2);
  color: rgba(234, 217, 168, 0.72);
  background: linear-gradient(90deg, rgba(30, 28, 21, 0.66), rgba(3, 10, 10, 0.54));
}

.new-basecamp-nav__item:hover,
.new-basecamp-nav__item:focus-visible,
.new-basecamp-nav__item.is-active {
  border-color: rgba(230, 194, 112, 0.54);
  color: var(--basecamp-bright);
  background: linear-gradient(90deg, rgba(93, 70, 31, 0.46), rgba(5, 19, 19, 0.82));
  box-shadow: inset 3px 0 0 rgba(55, 221, 208, 0.48);
}

.new-basecamp-nav__filters {
  border-top-color: rgba(176, 145, 83, 0.22);
}

.new-basecamp-monitor__header {
  border-bottom-color: rgba(176, 145, 83, 0.3);
}

.new-basecamp-monitor__header h2,
.new-basecamp-detail h2 {
  color: var(--basecamp-bright);
  font-weight: 500;
}

.new-basecamp-entry {
  border-color: rgba(176, 145, 83, 0.18);
  background: linear-gradient(90deg, rgba(27, 25, 19, 0.7), rgba(3, 11, 12, 0.82));
}

.new-basecamp-entry:hover,
.new-basecamp-entry:focus-visible,
.new-basecamp-entry.is-selected {
  border-color: rgba(230, 194, 112, 0.54);
  background: linear-gradient(90deg, rgba(82, 62, 29, 0.5), rgba(5, 24, 24, 0.86));
  box-shadow: inset 3px 0 0 rgba(55, 221, 208, 0.52);
}

.new-basecamp-detail__visual,
.new-basecamp-detail__mechanics,
.new-basecamp-detail__procurement,
.new-basecamp-detail__row,
.new-basecamp-info-card {
  border-color: rgba(176, 145, 83, 0.24);
  background:
    linear-gradient(135deg, rgba(83, 62, 28, 0.1), transparent 44%),
    rgba(3, 11, 11, 0.72);
}

.new-basecamp-detail__visual-title,
.new-basecamp-card-readout {
  border-color: rgba(176, 145, 83, 0.26);
  background:
    linear-gradient(90deg, rgba(48, 40, 24, 0.62), rgba(3, 12, 13, 0.86)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, soft-light;
}

.new-basecamp-detail__procurement {
  border-left: 2px solid rgba(224, 183, 88, 0.58);
}

.new-basecamp-primary {
  color: #21190b;
  background:
    linear-gradient(180deg, rgba(239, 192, 85, 0.94), rgba(171, 111, 33, 0.94)),
    var(--new-basecamp-row-active-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, soft-light;
}

.new-basecamp-secondary {
  color: var(--basecamp-cream);
  background:
    linear-gradient(180deg, rgba(49, 42, 28, 0.86), rgba(5, 12, 11, 0.94)),
    var(--new-basecamp-row-art) center / 100% 100% no-repeat;
  background-blend-mode: normal, soft-light;
}

@media (max-width: 700px), (max-height: 520px) {
  .new-basecamp-screen {
    display: block;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: 100svh;
    overflow-y: auto;
  }

  .new-basecamp-header {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    width: calc(100vw - 20px);
    min-height: 70px;
    padding: max(8px, var(--safe-top)) 0 10px;
  }

  .new-basecamp-header::before {
    content: none;
  }

  .new-basecamp-header h1 {
    font-size: 22px;
    text-align: left;
  }

  .new-basecamp-header .submenu-header__spacer {
    display: none;
  }

  .new-basecamp-menu {
    width: 112px;
  }

  .new-basecamp-menu__toggle {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 40px;
    padding-right: 8px;
    font-size: 10px;
  }

  .new-basecamp-menu__toggle span {
    background-size: 17px 17px;
  }

  .new-basecamp-menu__list {
    width: min(184px, calc(100vw - 20px));
  }

  .new-basecamp-workspace {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    height: auto;
    margin: 10px auto 18px;
  }

  .new-basecamp-topbar {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .new-basecamp-topbar__item {
    width: auto;
    min-width: 0;
  }

  .new-basecamp-topbar__deck {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
  }

  .new-basecamp-nav {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
  }

  .new-basecamp-nav__kicker,
  .new-basecamp-nav__deck,
  .new-basecamp-nav__filters {
    grid-column: 1 / -1;
  }

  .new-basecamp-monitor {
    grid-column: 1;
    grid-row: 3;
    grid-template-rows: auto auto;
    padding: 14px;
  }

  .new-basecamp-monitor__header {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .new-basecamp-search {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .new-basecamp-monitor__body {
    padding-top: 12px;
  }

  .new-basecamp-monitor__body,
  .new-basecamp-detail,
  .new-basecamp-detail__prep-grid,
  .new-basecamp-deck-dialog__body,
  .new-basecamp-dev-dialog__body {
    grid-template-columns: 1fr;
  }

  .new-basecamp-entry-list,
  .new-basecamp-detail__dossier,
  .new-basecamp-deck-grid,
  .new-basecamp-info-docs {
    max-height: none;
    overflow: visible;
  }

  .new-basecamp-info-docs {
    grid-template-columns: 1fr;
  }

  .new-basecamp-detail__visual {
    max-width: min(300px, 100%);
    justify-self: center;
  }

  .new-basecamp-deck-dialog,
  .new-basecamp-dev-dialog {
    position: fixed;
    inset: 0;
    padding: 10px;
    overflow: hidden;
  }

  .new-basecamp-deck-dialog__panel,
  .new-basecamp-dev-dialog__panel {
    width: calc(100vw - 20px);
    height: calc(100svh - 20px);
    max-width: calc(100vw - 20px);
  }

  .new-basecamp-deck-dialog__header,
  .new-basecamp-dev-dialog__header {
    grid-template-columns: 1fr auto;
    gap: 8px;
    min-height: auto;
  }

  .new-basecamp-deck-picker {
    grid-column: 1 / -1;
    order: 3;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .new-basecamp-deck-picker::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* Portrait phones use Basecamp as a read-only field kit: owned equipment,
   active loadout context, campaign progress, and reference material. */
@media (max-width: 540px) and (orientation: portrait) {
  .new-basecamp-screen[data-basecamp-presentation="field-kit"] {
    display: grid;
    grid-template-rows: 58px minmax(0, 1fr);
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"]::before {
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    width: auto;
    height: auto;
    border-radius: 12px;
    transform: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"]::after {
    content: "QUARTERMASTER // FIELD KIT";
    top: 10px;
    left: 74px;
    font-size: 6px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-header {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px;
    width: calc(100vw - 24px);
    min-height: 58px;
    padding: max(18px, var(--safe-top)) 4px 5px;
    border-bottom-color: rgba(176, 145, 83, 0.28);
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-header h1 {
    align-self: center;
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-align: right;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-menu {
    width: 46px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-menu__toggle {
    display: block;
    width: 46px;
    min-height: 32px;
    padding: 0;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-menu__toggle span {
    display: block;
    width: 100%;
    height: 32px;
    border-right: 0;
    background-size: 16px 16px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-menu__toggle strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-menu__list {
    top: calc(100% + 5px);
    width: min(184px, calc(100vw - 28px));
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 40px 48px minmax(0, 1fr);
    gap: 6px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    height: calc(100svh - 68px - var(--safe-bottom));
    min-height: 0;
    margin: 4px auto max(8px, var(--safe-bottom));
    overflow: hidden;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-workspace::before {
    content: "MOBILE LINK // VERIFIED";
    top: -48px;
    right: 4px;
    font-size: 6px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-topbar {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    min-height: 0;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-topbar__mobile-label {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 0 10px;
    border-left: 2px solid rgba(55, 221, 208, 0.48);
    color: rgba(234, 217, 168, 0.72);
    background: rgba(8, 12, 10, 0.84);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] :is(
    .new-basecamp-topbar__item--credits,
    .new-basecamp-topbar__item--unlocks,
    .new-basecamp-topbar__deck
  ) {
    display: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-topbar__item--active-deck {
    display: grid;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 4px 9px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-topbar__item--active-deck small {
    font-size: 6px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-topbar__item--active-deck strong {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    gap: 5px;
    align-items: stretch;
    max-height: 48px;
    padding: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav::-webkit-scrollbar {
    display: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav > .new-basecamp-nav__kicker,
  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav__filters,
  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav__item[data-new-basecamp-category="attackers"],
  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav__item[data-new-basecamp-category="factions"],
  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav__item[data-new-basecamp-category="mechanics"],
  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav__item[data-new-basecamp-category="gameModes"] {
    display: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav__item {
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    padding: 0 11px;
    scroll-snap-align: start;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav__item--task {
    border-color: rgba(240, 185, 77, 0.46);
    color: rgba(242, 223, 176, 0.78);
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav__item--task.is-active {
    border-color: rgba(240, 185, 77, 0.92);
    color: #07100f;
    background: #f0b94d;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-nav__item strong {
    font-size: 8px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-monitor {
    grid-column: 1;
    grid-row: 3;
    grid-template-rows: 56px minmax(0, 1fr);
    min-height: 0;
    padding: 10px;
    overflow: hidden;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-monitor__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    min-height: 0;
    padding: 0 2px 8px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-monitor__header > span {
    font-size: 7px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-monitor__header h2 {
    overflow: hidden;
    font-size: 21px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-monitor__header p,
  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-search {
    display: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-monitor__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 72px minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    padding-top: 8px;
    overflow: hidden;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-monitor__body--docs {
    grid-template-rows: minmax(0, 1fr);
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-entry-list {
    display: flex;
    gap: 6px;
    min-width: 0;
    max-height: 72px;
    padding: 0 0 3px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-entry-list::-webkit-scrollbar {
    display: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-entry {
    flex: 0 0 150px;
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 66px;
    padding: 5px;
    scroll-snap-align: start;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-entry__thumb {
    width: 40px;
    height: 54px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-entry strong {
    font-size: 8px;
    white-space: normal;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-entry small {
    font-size: 6px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail {
    position: relative;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail__visual {
    align-self: start;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 100%;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail__visual .new-basecamp-card-preview {
    width: 100%;
    max-height: 100%;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail__visual > figcaption:last-child {
    display: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-card-readout {
    display: grid;
    padding: 5px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-card-readout__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-card-readout__stats div {
    padding: 4px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail--card::after {
    content: "FIELD DOSSIER // READ ONLY";
    position: absolute;
    right: 4px;
    bottom: 4px;
    color: rgba(55, 221, 208, 0.42);
    font-family: var(--font-ticker);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.1em;
    pointer-events: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail__dossier {
    min-height: 0;
    max-height: none;
    padding: 0 4px 10px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail h2 {
    font-size: 19px;
    line-height: 1.08;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] :is(
    .new-basecamp-detail__summary,
    .new-basecamp-detail__note,
    .new-basecamp-info-card p,
    .new-basecamp-info-card__note
  ) {
    font-size: 10px;
    line-height: 1.28;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail__prep-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] :is(
    .new-basecamp-detail__procurement,
    .new-basecamp-detail--card .new-basecamp-detail__actions,
    .new-basecamp-detail--card .new-basecamp-archive-actions
  ) {
    display: none;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail__row {
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 34px;
    padding: 7px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-info-docs {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    padding-right: 3px;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-info-card {
    padding: 10px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-info-card h3 {
    font-size: 16px;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-monitor__body--perk-reference {
    display: block;
    padding-right: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] .new-basecamp-detail--perk-reference {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    gap: 12px;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .new-basecamp-screen[data-basecamp-presentation="field-kit"] :is(
    .perk-reference-index,
    .perk-reference-dossier
  ) {
    max-height: none;
    overflow: visible;
  }
}