:root {
  color-scheme: dark;
  --ink: #fff8eb;
  --muted: #aab1c4;
  --panel: rgba(8, 11, 22, 0.94);
  --line: rgba(255, 255, 255, 0.13);
  --blue: #34a7ff;
  --red: #ff4d4d;
  --gold: #ffd25f;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #070912;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior: none;
}

button {
  color: inherit;
  font: inherit;
}

button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

#app,
#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#game {
  background: #0c1422;
}

.is-hidden {
  display: none !important;
}

.screen {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(24px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));
  overflow-y: auto;
  background:
    radial-gradient(circle at 16% 16%, rgba(36, 112, 255, 0.24), transparent 31%),
    radial-gradient(circle at 84% 80%, rgba(255, 72, 72, 0.18), transparent 34%),
    linear-gradient(145deg, #0c1223 0%, #05070f 100%);
}

.screen > .panel {
  flex: 0 0 auto;
  margin-block: auto;
}

.screen::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent);
}

.screen--glass {
  background: rgba(5, 7, 15, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.edition,
.eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.2em;
}

.logo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 8px;
  font-weight: 1000;
  font-style: italic;
  line-height: 0.78;
  letter-spacing: -0.075em;
  transform: rotate(-2deg);
}

.logo span {
  font-size: clamp(50px, 16vw, 84px);
  text-shadow: 0 5px 0 #173b78, 0 16px 34px #000;
}

.logo strong {
  color: var(--red);
  font-size: clamp(48px, 15vw, 88px);
  text-shadow: 0 5px 0 #7a1118, 0 16px 34px #000;
}

.tagline {
  position: relative;
  z-index: 1;
  max-width: 430px;
  margin: 12px 0 24px;
  color: #d7deec;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

.faction-picker {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 460px);
  gap: 10px;
}

.faction-picker--single {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}

.faction-card--single {
  width: 100%;
}

.faction-card {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

.faction-card--blue {
  background: linear-gradient(135deg, #114886, #0a214d);
}

.faction-card--red {
  background: linear-gradient(135deg, #8b1d29, #451018);
}

.faction-card:active,
.primary-button:active,
.secondary-button:active,
.character-card:active,
.upgrade-card:active {
  transform: scale(0.98);
}

.faction-card__mark {
  display: grid;
  width: 56px;
  height: 56px;
  margin-right: 14px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 30px;
  font-weight: 1000;
}

.faction-card strong,
.faction-card small {
  display: block;
}

.faction-card strong {
  font-size: 16px;
  letter-spacing: 0.06em;
}

.faction-card small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  line-height: 1.35;
}

.text-button {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding: 8px;
  border: 0;
  background: none;
  color: #d6ddeb;
  text-decoration: underline;
  cursor: pointer;
}

.disclaimer {
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 12px 0 0;
  color: #7c8598;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

.panel {
  position: relative;
  z-index: 1;
  width: min(100%, 470px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
}

.panel--wide {
  width: min(100%, 680px);
}

.panel--maps {
  width: min(100%, 620px);
}

.map-list {
  display: grid;
  gap: 10px;
}

.map-card {
  display: grid;
  grid-template-columns: 105px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 112px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--map-color) 42%, rgba(255, 255, 255, 0.12));
  border-radius: 19px;
  background: color-mix(in srgb, var(--map-color) 11%, rgba(255, 255, 255, 0.05));
  text-align: left;
  cursor: pointer;
}

.map-card__preview {
  position: relative;
  width: 105px;
  height: 84px;
  overflow: hidden;
  border: 2px solid var(--map-color);
  border-radius: 15px;
  background: linear-gradient(#182d43 0 42%, #284b31 42%);
}

.map-card__preview.has-chapter-art img {
  filter: saturate(1.08) contrast(1.04);
  transform: none;
}

.campaign-briefing__art {
  display: block;
  width: 100%;
  height: clamp(96px, 21vw, 142px);
  margin: 0 0 12px;
  border-radius: 11px;
  object-fit: cover;
  object-position: center 55%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.campaign-briefing__art.is-hidden { display: none; }

.map-card__preview::before,
.map-card__preview::after {
  position: absolute;
  content: "";
}

.map-card[data-region="washington"] .map-card__preview::before {
  left: 22px;
  bottom: 13px;
  width: 61px;
  height: 34px;
  border-radius: 8px 8px 2px 2px;
  background: repeating-linear-gradient(90deg, #f3ead9 0 7px, #bfb4a1 7px 11px);
}

.map-card[data-region="washington"] .map-card__preview::after {
  left: 38px;
  bottom: 47px;
  width: 30px;
  height: 19px;
  border-radius: 30px 30px 0 0;
  background: #f7f0df;
}

.map-card[data-region="new-york"] .map-card__preview {
  background: linear-gradient(90deg, #347da1 0 18%, #303d45 18% 82%, #347da1 82%);
}

.map-card[data-region="new-york"] .map-card__preview::before {
  left: 23px;
  bottom: 9px;
  width: 60px;
  height: 59px;
  background: linear-gradient(90deg, #8896a5 0 11px, transparent 11px 15px, #d0aa4b 15px 29px, transparent 29px 34px, #6d7e91 34px 47px, transparent 47px 50px, #a9b3bd 50px);
  clip-path: polygon(0 36%, 18% 36%, 18% 12%, 36% 12%, 36% 42%, 54% 42%, 54% 0, 72% 0, 72% 23%, 100% 23%, 100% 100%, 0 100%);
}

.map-card[data-region="new-york"] .map-card__preview::after {
  left: 50px;
  top: 6px;
  width: 4px;
  height: 27px;
  background: #f5dc78;
}

.map-card[data-region="california"] .map-card__preview {
  background: linear-gradient(120deg, #337da4 0 34%, #4c7542 35% 100%);
}

.map-card[data-region="california"] .map-card__preview::before {
  left: 38px;
  top: 9px;
  width: 35px;
  height: 67px;
  border: 3px solid #f0c36a;
  background: rgba(238, 182, 58, 0.26);
  clip-path: polygon(22% 0, 78% 5%, 68% 45%, 100% 84%, 60% 100%, 35% 72%, 0 36%);
}

.map-card__copy strong,
.map-card__copy small,
.map-card__copy span {
  display: block;
}

.map-card__copy span {
  margin-bottom: 3px;
  color: var(--map-color);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.12em;
}

.map-card__copy strong {
  color: #fff;
  font-size: 18px;
}

.map-card__copy small {
  margin-top: 5px;
  color: #aeb8ca;
  font-size: 11px;
  line-height: 1.3;
}

.map-card__count {
  padding: 6px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--map-color) 24%, transparent);
  color: #fff;
  font-size: 9px;
  font-weight: 1000;
  white-space: nowrap;
}

.panel--small {
  text-align: center;
}

.panel--upgrade {
  width: min(100%, 780px);
}

.panel--boss-intro {
  --boss-color: #ff5c4d;
  width: min(100%, 520px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--boss-color) 58%, white 12%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--boss-color) 13%, transparent), transparent 43%),
    #090d18;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), inset 0 4px 0 var(--boss-color);
}

.panel--boss-intro::after {
  position: absolute;
  top: 16px;
  right: -38px;
  width: 140px;
  padding: 5px 0;
  background: var(--boss-color);
  color: white;
  content: var(--boss-ribbon, "SPECIAL GUEST");
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.13em;
  text-align: center;
  transform: rotate(36deg);
}

.boss-intro__hero {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 17px;
  align-items: center;
}

.boss-intro__hero small {
  color: color-mix(in srgb, var(--boss-color) 62%, white);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.1em;
}

.panel--boss-intro .boss-intro__hero h2 {
  margin: 4px 0 3px;
  color: white;
  font-size: clamp(25px, 7vw, 38px);
  line-height: 0.94;
}

.boss-intro__hero p {
  margin: 0;
  color: #b8c0d0;
  font-size: 12px;
  font-weight: 800;
}

.boss-intro__briefing {
  margin: 15px 0 12px;
  padding: 12px 13px;
  border-left: 4px solid var(--boss-color);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, 0.055);
  color: #e8ecf5;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.38;
}

.boss-intro__intel {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 8px;
}

.boss-intro__intel div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
}

.boss-intro__intel span,
.boss-intro__intel strong {
  display: block;
}

.boss-intro__intel span {
  margin-bottom: 4px;
  color: var(--boss-color);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.14em;
}

.boss-intro__intel strong {
  color: #f8f3e8;
  font-size: 10px;
  line-height: 1.25;
}

.panel--boss-intro .primary-button {
  background: linear-gradient(135deg, color-mix(in srgb, var(--boss-color) 72%, #ffd25f), var(--boss-color));
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.boss-portrait {
  position: relative;
  width: 118px;
  height: 132px;
  overflow: hidden;
  border: 3px solid var(--boss-color);
  border-radius: 27px;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.22), transparent 26%),
    color-mix(in srgb, var(--boss-color) 22%, #111827);
  box-shadow: inset 0 -18px 30px rgba(0, 0, 0, 0.28), 0 12px 28px rgba(0, 0, 0, 0.34);
}

.boss-portrait__body {
  position: absolute;
  left: 17px;
  bottom: -25px;
  width: 80px;
  height: 82px;
  border: 4px solid #080b14;
  border-radius: 34px 34px 12px 12px;
  background: #18253d;
}

.boss-portrait__body::before,
.boss-portrait__body::after {
  position: absolute;
  top: 3px;
  width: 24px;
  height: 54px;
  background: #f4f1e9;
  content: "";
}

.boss-portrait__body::before {
  left: 11px;
  clip-path: polygon(0 0, 100% 0, 60% 100%);
}

.boss-portrait__body::after {
  right: 11px;
  clip-path: polygon(0 0, 100% 0, 40% 100%);
}

.boss-portrait__head {
  position: absolute;
  z-index: 2;
  left: 30px;
  top: 24px;
  width: 58px;
  height: 67px;
  border: 4px solid #080b14;
  border-radius: 46% 46% 44% 44%;
  background: #e8b184;
}

.boss-portrait__hair {
  position: absolute;
  z-index: 3;
  left: 31px;
  top: 17px;
  width: 59px;
  height: 28px;
  border: 4px solid #080b14;
  border-bottom: 0;
  border-radius: 50% 55% 28% 25%;
  background: #413026;
  transform: rotate(-4deg);
}

.boss-portrait__face {
  position: absolute;
  z-index: 4;
  left: 45px;
  top: 53px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #111827;
  box-shadow: 22px 0 #111827;
}

.boss-portrait__face::after {
  position: absolute;
  left: 8px;
  top: 18px;
  width: 14px;
  height: 6px;
  border-bottom: 3px solid #713b32;
  border-radius: 50%;
  content: "";
}

.boss-portrait__prop {
  position: absolute;
  z-index: 5;
  left: 53px;
  bottom: 5px;
  width: 13px;
  height: 43px;
  background: var(--boss-color);
  clip-path: polygon(50% 0, 100% 18%, 75% 100%, 25% 100%, 0 18%);
}

.boss-portrait[data-boss="jd-vance"] .boss-portrait__head::after {
  position: absolute;
  inset: 34px 5px 3px;
  border-radius: 4px 4px 18px 18px;
  background: #4b3025;
  content: "";
}

.boss-portrait[data-boss="jd-vance"]::before {
  position: absolute;
  z-index: 0;
  left: 3px;
  bottom: 12px;
  width: 42px;
  height: 27px;
  border: 3px solid #080b14;
  border-radius: 10px 10px 5px 5px;
  background: #45648c;
  box-shadow: inset 0 -8px rgba(0, 0, 0, 0.18);
  content: "";
}

.boss-portrait[data-boss="rfk-jr"] .boss-portrait__hair {
  background: #b9aa91;
  transform: rotate(4deg);
}

.boss-portrait[data-boss="rfk-jr"] .boss-portrait__prop {
  left: auto;
  right: 8px;
  bottom: 12px;
  width: 25px;
  height: 25px;
  border: 3px solid #294821;
  border-radius: 50%;
  background: #7bd15e;
  clip-path: none;
  box-shadow: -8px -10px 0 -5px #b9f58e, 7px -8px 0 -5px #b9f58e;
}

.boss-portrait[data-boss="trump"] .boss-portrait__head {
  background: #df935d;
}

.boss-portrait[data-boss="trump"] .boss-portrait__hair {
  left: 26px;
  top: 13px;
  width: 69px;
  height: 31px;
  border-radius: 70% 32% 55% 18%;
  background: #f2c34c;
  transform: rotate(-9deg);
}

.boss-portrait[data-boss="trump"]::before {
  position: absolute;
  left: 4px;
  bottom: 7px;
  width: 38px;
  height: 30px;
  border: 3px solid #080b14;
  background: repeating-linear-gradient(90deg, #f1d37d 0 5px, #fff2c5 5px 10px);
  content: "";
  clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0 100%);
}

.boss-portrait[data-boss="hakeem-jeffries"]::before {
  position: absolute;
  z-index: 6;
  right: 5px;
  top: 9px;
  color: #8fc8ff;
  content: "A B C";
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.04em;
  transform: rotate(8deg);
}

.boss-portrait[data-boss="ken-martin"] .boss-portrait__prop,
.boss-portrait[data-boss="hakeem-jeffries"] .boss-portrait__prop,
.boss-portrait[data-boss="chuck-schumer"] .boss-portrait__prop {
  background: #437bd8;
}

.boss-portrait[data-boss="hakeem-jeffries"] .boss-portrait__head {
  background: #8f583b;
}

.boss-portrait[data-boss="hakeem-jeffries"] .boss-portrait__hair {
  top: 20px;
  height: 18px;
  background: #171514;
}

.boss-portrait[data-boss="chuck-schumer"] .boss-portrait__hair {
  background: #b4a69a;
}

.boss-portrait[data-boss="chuck-schumer"] .boss-portrait__face::before {
  position: absolute;
  left: -6px;
  top: -5px;
  width: 14px;
  height: 10px;
  border: 3px solid #171a22;
  border-radius: 4px;
  box-shadow: 21px 0 0 -3px transparent, 21px 0 0 0 #171a22;
  content: "";
}

.boss-portrait[data-boss="zohran-mamdani"] .boss-portrait__head {
  background: #aa7357;
}

.boss-portrait[data-boss="zohran-mamdani"] .boss-portrait__hair {
  height: 25px;
  background: #251e1b;
}

.boss-portrait[data-boss="zohran-mamdani"] .boss-portrait__head::after {
  position: absolute;
  inset: 38px 7px 2px;
  border-radius: 5px 5px 18px 18px;
  background: #251e1b;
  content: "";
}

.boss-portrait[data-boss="zohran-mamdani"] .boss-portrait__prop {
  left: 6px;
  bottom: 8px;
  width: 42px;
  height: 26px;
  border: 3px solid #080b14;
  border-radius: 7px;
  background: #f2c14c;
  clip-path: none;
}

.boss-portrait[data-boss="zohran-mamdani"] .boss-portrait__prop::after {
  position: absolute;
  inset: 6px 2px auto;
  color: #252044;
  content: "RENT $0";
  font-size: 7px;
  font-weight: 1000;
  text-align: center;
}

.boss-portrait[data-boss="gavin-newsom"] .boss-portrait__head {
  background: #e6b18a;
}

.boss-portrait[data-boss="gavin-newsom"] .boss-portrait__hair {
  left: 27px;
  top: 11px;
  width: 68px;
  height: 34px;
  border-radius: 60% 50% 24% 35%;
  background: linear-gradient(150deg, #26201e 0 54%, #8b817a 56% 61%, #302824 63%);
  transform: rotate(-7deg);
}

.boss-portrait[data-boss="gavin-newsom"] .boss-portrait__prop {
  left: auto;
  right: 8px;
  bottom: 11px;
  width: 18px;
  height: 45px;
  border: 3px solid #080b14;
  border-radius: 9px;
  background: #16233d;
  clip-path: none;
  transform: rotate(-18deg);
}

.boss-portrait[data-boss="gavin-newsom"]::before {
  position: absolute;
  z-index: 6;
  left: 5px;
  bottom: 9px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #e8f4ff;
  color: #173f77;
  content: "2028?";
  font-size: 8px;
  font-weight: 1000;
}

.boss-portrait[data-boss="pete-hegseth"] .boss-portrait__hair {
  top: 15px;
  height: 25px;
  background: #76502d;
  transform: rotate(-8deg);
}

.boss-portrait[data-boss="pete-hegseth"] .boss-portrait__head::after {
  position: absolute;
  inset: 39px 7px 2px;
  border-radius: 5px 5px 18px 18px;
  background: #70422c;
  content: "";
}

.boss-portrait[data-boss="pete-hegseth"] .boss-portrait__prop {
  left: auto;
  right: 5px;
  bottom: 10px;
  width: 37px;
  height: 45px;
  border: 3px solid #080b14;
  border-radius: 7px;
  background: #202733;
  clip-path: none;
}

.boss-portrait[data-boss="pete-hegseth"] .boss-portrait__prop::after {
  position: absolute;
  inset: 8px 2px auto;
  color: #77d6ff;
  content: "CHAT";
  font-size: 7px;
  font-weight: 1000;
  text-align: center;
}

.boss-portrait[data-boss="marco-rubio"] .boss-portrait__head {
  background: #d79a72;
}

.boss-portrait[data-boss="marco-rubio"] .boss-portrait__hair {
  top: 17px;
  height: 22px;
  background: #25201e;
}

.boss-portrait[data-boss="marco-rubio"] .boss-portrait__prop {
  left: 5px;
  bottom: 8px;
  width: 36px;
  height: 46px;
  border: 3px solid #080b14;
  border-radius: 5px;
  background: #244f86;
  clip-path: none;
}

.boss-portrait[data-boss="marco-rubio"] .boss-portrait__prop::after {
  position: absolute;
  inset: 12px 2px auto;
  color: #d7b56d;
  content: "USA";
  font-size: 8px;
  font-weight: 1000;
  text-align: center;
}

.boss-portrait[data-boss="elon-musk"] .boss-portrait__hair {
  left: 27px;
  top: 12px;
  width: 67px;
  height: 32px;
  border-radius: 65% 45% 30% 30%;
  background: #3c302b;
  transform: rotate(-7deg);
}

.boss-portrait[data-boss="elon-musk"] .boss-portrait__prop {
  left: auto;
  right: 4px;
  bottom: 13px;
  width: 42px;
  height: 19px;
  border: 3px solid #080b14;
  border-radius: 50% 8px 8px 50%;
  background: #e5ebf0;
  clip-path: none;
  transform: rotate(-18deg);
}

.boss-portrait[data-boss="elon-musk"]::before {
  position: absolute;
  z-index: 6;
  left: 7px;
  bottom: 10px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #f2f4f6;
  color: #121820;
  content: "X · DOGE";
  font-size: 7px;
  font-weight: 1000;
}

.panel--objective-intro {
  --objective-color: #35a7ff;
  width: min(100%, 500px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--objective-color) 70%, white 10%);
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--objective-color) 25%, transparent), transparent 34%),
    rgba(7, 10, 20, 0.97);
}

.panel--objective-intro::after {
  position: absolute;
  right: -38px;
  top: 24px;
  width: 150px;
  padding: 6px 0;
  background: var(--objective-color);
  color: white;
  content: "CAPTURED";
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.13em;
  text-align: center;
  transform: rotate(42deg);
}

.objective-intro__hero {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.objective-intro__badge {
  position: relative;
  display: grid;
  width: 104px;
  height: 118px;
  overflow: hidden;
  border: 3px solid var(--objective-color);
  border-radius: 24px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22), transparent 35%),
    color-mix(in srgb, var(--objective-color) 23%, #101728);
  place-items: center;
  box-shadow: inset 0 -24px 34px rgba(0, 0, 0, 0.34);
}

.objective-intro__badge::before {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  height: 45px;
  border: 4px solid #0a0d16;
  border-top: 0;
  background: repeating-linear-gradient(90deg, #f5efe0 0 10px, #aebbd2 10px 14px);
  content: "";
  clip-path: polygon(0 24%, 50% 0, 100% 24%, 94% 100%, 6% 100%);
}

.objective-intro__badge::after {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: color-mix(in srgb, var(--objective-color) 72%, #111827);
  content: "";
  transform: translateX(-50%);
}

.objective-intro__badge span {
  position: relative;
  z-index: 2;
  margin-top: -49px;
  color: white;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.03em;
}

.objective-intro__image {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.16);
}

.objective-intro__badge.has-art .objective-intro__image { display: block; }
.objective-intro__badge.has-art::before,
.objective-intro__badge.has-art::after,
.objective-intro__badge.has-art span { display: none; }
.objective-intro__badge.has-art { background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--objective-color) 28%, white), transparent 68%); }

.objective-intro__badge[data-region="new-york"]::before {
  height: 55px;
  background: repeating-linear-gradient(90deg, #596579 0 11px, #eac05d 11px 14px);
  clip-path: polygon(5% 100%, 5% 15%, 25% 15%, 25% 0, 48% 0, 48% 25%, 66% 25%, 66% 8%, 94% 8%, 94% 100%);
}

.objective-intro__badge[data-region="california"]::before {
  border: 0;
  background: linear-gradient(150deg, #5a7f45 0 52%, #c6954e 53% 100%);
  clip-path: polygon(0 100%, 0 66%, 30% 28%, 53% 55%, 72% 12%, 100% 62%, 100% 100%);
}

.objective-intro__hero small {
  color: color-mix(in srgb, var(--objective-color) 70%, white);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.14em;
}

.panel--objective-intro .objective-intro__hero h2 {
  margin: 5px 0 7px;
  font-size: clamp(25px, 7vw, 37px);
  line-height: 0.96;
}

.objective-intro__hero p {
  margin: 0;
  color: var(--gold);
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.objective-intro__context {
  margin: 16px 0 10px;
  padding: 13px 14px;
  border-left: 4px solid var(--objective-color);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, 0.07);
  color: #f1f3f8;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.4;
}

.objective-intro__outcome {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--objective-color) 35%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--objective-color) 10%, transparent);
}

.objective-intro__outcome span {
  color: color-mix(in srgb, var(--objective-color) 72%, white);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.16em;
}

.objective-intro__outcome p {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.objective-intro__progress {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 13px 0;
}

.objective-intro__progress > span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 1000;
}

.objective-intro__progress .bar {
  height: 7px;
}

.objective-intro__progress .bar span {
  height: 100%;
  background: linear-gradient(90deg, var(--objective-color), var(--gold));
}

.map-toggle {
  position: fixed;
  z-index: 14;
  right: 40px;
  bottom: calc(126px + var(--safe-bottom));
  display: grid;
  width: 56px;
  height: 48px;
  padding: 6px 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 17px;
  background: rgba(7, 10, 20, 0.86);
  color: #fff;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.map-toggle__lines {
  position: relative;
  width: 27px;
  height: 16px;
  border: 2px solid #8fd0ff;
  border-radius: 3px;
  transform: skewY(-8deg);
}

.map-toggle__lines::before,
.map-toggle__lines::after {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 16px;
  background: #8fd0ff;
  content: "";
}

.map-toggle__lines::before { left: 8px; transform: skewY(16deg); }
.map-toggle__lines::after { right: 8px; transform: skewY(16deg); }

.map-toggle small {
  margin-top: -2px;
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.12em;
}

.panel--tactical-map {
  width: min(100%, 520px);
  padding: 20px;
}

.tactical-map__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.panel--tactical-map h2 {
  margin: 0 0 12px;
  font-size: 27px;
}

.map-close {
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  place-items: center;
  font-size: 24px;
  cursor: pointer;
}

.tactical-map__field {
  position: relative;
  width: 100%;
  aspect-ratio: 15 / 11;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.11) 50% 51%, transparent 52%),
    linear-gradient(transparent 49%, rgba(255, 255, 255, 0.11) 50% 51%, transparent 52%),
    #254f3d;
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.34);
}

.tactical-map__field[data-region="washington"] {
  background:
    linear-gradient(90deg, transparent 49%, rgba(240, 240, 220, 0.16) 50% 51%, transparent 52%),
    linear-gradient(transparent 49%, rgba(240, 240, 220, 0.16) 50% 51%, transparent 52%),
    linear-gradient(165deg, #294a3e 0 64%, #315c72 65% 74%, #294a3e 75%);
}

.tactical-map__field[data-region="new-york"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(235, 225, 194, 0.1) 11.5% 12%),
    repeating-linear-gradient(0deg, transparent 0 15%, rgba(235, 225, 194, 0.1) 15.5% 16%),
    linear-gradient(105deg, #226078 0 12%, #3b4b50 13% 85%, #226078 86%);
}

.tactical-map__field[data-region="california"] {
  background:
    linear-gradient(115deg, #25657a 0 18%, transparent 19%),
    repeating-linear-gradient(145deg, transparent 0 19%, rgba(255, 227, 142, 0.1) 20% 21%, transparent 22% 35%),
    linear-gradient(145deg, #3f6b40 0 60%, #806a3d 100%);
}

.tactical-map__marker {
  position: absolute;
  display: grid;
  width: 25px;
  height: 25px;
  border: 3px solid #090c15;
  border-radius: 50% 50% 50% 8px;
  background: var(--marker-color, #ff5964);
  color: #080b12;
  place-items: center;
  font-size: 9px;
  font-weight: 1000;
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.48);
}

.tactical-map__marker span {
  transform: rotate(45deg);
}

.tactical-map__marker.is-done {
  background: #ffd25f;
}

.tactical-map__marker.is-active {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--marker-color) 30%, transparent), 0 6px 12px rgba(0, 0, 0, 0.48);
}

.tactical-map__marker.is-locked {
  border-color: #272d38;
  background: #5d6675;
  color: #c4cad4;
  opacity: 0.42;
}

.tactical-map__player {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--player-color, #35a7ff);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--player-color) 30%, transparent), 0 4px 12px #000;
}

.tactical-map__player::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  content: "";
  transform: translate(-50%, -50%);
}

.tactical-map__legend {
  display: flex;
  gap: 12px;
  margin: 9px 0;
  color: #b9c2d1;
  font-size: 7px;
  letter-spacing: 0.06em;
}

.tactical-map__legend span {
  display: flex;
  gap: 5px;
  align-items: center;
}

.map-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5964;
}

.map-dot--player { border: 2px solid white; background: #35a7ff; }
.map-dot--done { background: #ffd25f; }

.tactical-map__objectives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.tactical-map__objective {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.tactical-map__objective > b {
  display: grid;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #ff5964;
  color: #080b12;
  place-items: center;
  font-size: 8px;
}

.tactical-map__objective.is-done > b { background: #ffd25f; }

.tactical-map__objective.is-active {
  border-color: color-mix(in srgb, var(--campaign-primary) 55%, transparent);
  background: color-mix(in srgb, var(--campaign-primary) 12%, rgba(255, 255, 255, 0.04));
}

.tactical-map__objective.is-locked {
  opacity: 0.46;
}

.tactical-map__objective.is-locked > b {
  background: #596170;
  color: #cbd1db;
}

.tactical-map__objective span {
  overflow: hidden;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-map__objective small {
  color: #8791a4;
  font-size: 7px;
  font-weight: 1000;
}

.tactical-map__incidents {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 210, 95, 0.22);
  border-radius: 10px;
  background: rgba(255, 210, 95, 0.06);
}

.tactical-map__incidents > strong {
  width: 100%;
  color: #ffd25f;
  font-size: 7px;
  letter-spacing: 0.08em;
}

.tactical-map__incidents > span {
  display: flex;
  gap: 5px;
  align-items: center;
  color: #d8deea;
  font-size: 7px;
  font-weight: 850;
}

.tactical-map__incidents b {
  display: grid;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffd25f;
  color: #111827;
  place-items: center;
  font-size: 7px;
}

.panel h1,
.panel h2 {
  margin: 0 0 20px;
  font-size: clamp(27px, 7vw, 42px);
  letter-spacing: -0.045em;
}

.back-button {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.character-list {
  display: grid;
  gap: 10px;
}

.character-card {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 13px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
  cursor: pointer;
}

.character-card__avatar {
  position: relative;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 3px solid var(--accent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.36), transparent 18%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  color: var(--accent);
  font-size: 34px;
  font-weight: 1000;
  overflow: hidden;
  isolation: isolate;
}

.avatar__head {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 9px;
  width: 31px;
  height: 31px;
  border: 3px solid #080b14;
  border-radius: 48% 48% 45% 45%;
  background: #efbd92;
  transform: translateX(-50%);
}

.avatar__head::before {
  position: absolute;
  left: -2px;
  top: -5px;
  width: 29px;
  height: 13px;
  border-radius: 50% 50% 35% 35%;
  background: #493021;
  content: "";
}

.avatar__head::after {
  position: absolute;
  left: 7px;
  top: 14px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #111827;
  box-shadow: 10px 0 #111827;
  content: "";
}

.avatar__body {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -8px;
  display: grid;
  width: 52px;
  height: 42px;
  border: 3px solid #080b14;
  border-radius: 15px 15px 8px 8px;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 78%, #142139);
  color: #fff;
  font-size: 8px;
  letter-spacing: 0.03em;
  transform: translateX(-50%);
}

.avatar__prop {
  position: absolute;
  z-index: 4;
  display: block;
}

.avatar--organizer .avatar__prop {
  right: 3px;
  top: 29px;
  width: 25px;
  height: 17px;
  border: 3px solid #080b14;
  background: #fff;
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
}

.avatar--organizer::after {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 11px;
  width: 15px;
  height: 29px;
  border: 3px solid #080b14;
  border-radius: 50%;
  background: #493021;
  content: "";
  transform: rotate(18deg);
}

.avatar--reporter .avatar__head::before {
  left: -3px;
  top: -6px;
  width: 31px;
  height: 14px;
  border: 0;
  border-radius: 55% 45% 35% 30%;
  background: #2d241d;
  content: "";
}

.avatar--reporter .avatar__prop {
  left: 4px;
  top: 32px;
  width: 19px;
  height: 24px;
  border: 2px solid #080b14;
  background:
    linear-gradient(#3b8bd4 0 3px, transparent 3px 7px, #3b8bd4 7px 10px, transparent 10px 14px, #3b8bd4 14px 17px),
    #fff7df;
}

.avatar--reporter::after,
.avatar--union::after {
  position: absolute;
  z-index: 5;
  left: 23px;
  top: 25px;
  width: 12px;
  height: 8px;
  border: 2px solid #111827;
  border-radius: 3px;
  content: "";
  filter: drop-shadow(13px 0 0 #111827);
}

.avatar--union .avatar__head::before {
  left: -6px;
  top: -7px;
  width: 37px;
  height: 18px;
  border: 2px solid #080b14;
  border-radius: 50% 50% 34% 34%;
  background: #e8e3d9;
}

.avatar--podcaster .avatar__head {
  box-shadow: 0 0 0 5px #111827;
}

.avatar--podcaster .avatar__prop {
  right: 7px;
  top: 31px;
  width: 8px;
  height: 24px;
  border: 2px solid #080b14;
  border-radius: 5px;
  background: #d8dce4;
  transform: rotate(24deg);
}

.avatar--patriot::before {
  position: absolute;
  z-index: 1;
  inset: 26px 4px 1px;
  border-radius: 8px;
  background: repeating-linear-gradient(#c82936 0 6px, #fff 6px 11px);
  content: "";
  transform: rotate(-8deg);
}

.avatar--patriot .avatar__head::before {
  left: -6px;
  top: -8px;
  width: 37px;
  height: 17px;
  border: 2px solid #080b14;
  border-radius: 60% 45% 30% 35%;
  background: #e7c56d;
}

.avatar--sheriff .avatar__head::before {
  left: -4px;
  top: -6px;
  width: 33px;
  height: 15px;
  border: 2px solid #080b14;
  border-radius: 50% 50% 30% 30%;
  background: #c8c2b8;
}

.avatar--sheriff .avatar__prop {
  right: 7px;
  top: 39px;
  width: 15px;
  height: 15px;
  background: #ffd25f;
  clip-path: polygon(50% 0, 62% 34%, 98% 20%, 75% 50%, 98% 80%, 62% 66%, 50% 100%, 38% 66%, 2% 80%, 25% 50%, 2% 20%, 38% 34%);
}

.character-card strong,
.character-card small {
  display: block;
}

.character-card .character-card__attack {
  margin-top: 6px;
  color: color-mix(in srgb, var(--accent) 72%, white);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.character-card__attack b {
  display: inline-block;
  margin-right: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: #fff;
  font-size: 7px;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

.character-card strong {
  font-size: 17px;
}

.character-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.character-card__stat {
  min-width: 74px;
  padding: 8px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  text-align: center;
}

.upgrade-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.upgrade-card {
  position: relative;
  min-height: 224px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--upgrade-accent) 38%, rgba(255, 255, 255, 0.12));
  border-radius: 21px;
  background:
    radial-gradient(circle at 13% 18%, color-mix(in srgb, var(--upgrade-accent) 20%, transparent), transparent 35%),
    rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  text-align: left;
  cursor: pointer;
}

.upgrade-card::after {
  position: absolute;
  right: -25px;
  bottom: -35px;
  width: 100px;
  height: 100px;
  border: 2px solid color-mix(in srgb, var(--upgrade-accent) 28%, transparent);
  border-radius: 50%;
  content: "";
}

.upgrade-card__type {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--upgrade-accent);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.14em;
}

.upgrade-card__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.upgrade-card__head > span:last-child {
  min-width: 0;
}

.upgrade-card__head small {
  display: block;
  margin-top: 5px;
  color: var(--upgrade-accent);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.12em;
}

.upgrade-icon {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid var(--upgrade-accent);
  border-radius: 17px;
  background: color-mix(in srgb, var(--upgrade-accent) 18%, #101522);
  place-items: center;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--upgrade-accent) 16%, transparent);
}

.upgrade-icon b {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
}

.upgrade-icon i,
.upgrade-icon::before,
.upgrade-icon::after {
  position: absolute;
  content: "";
}

.upgrade-icon i {
  inset: 7px;
  border: 2px solid color-mix(in srgb, var(--upgrade-accent) 55%, transparent);
  border-radius: 50%;
}

.upgrade-icon::before {
  width: 76px;
  height: 8px;
  background: color-mix(in srgb, var(--upgrade-accent) 30%, transparent);
  transform: rotate(-42deg);
}

.upgrade-icon::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--upgrade-accent);
  box-shadow: -17px 12px color-mix(in srgb, var(--upgrade-accent) 70%, transparent), 18px -13px color-mix(in srgb, var(--upgrade-accent) 70%, transparent);
}

.upgrade-icon--speed::before {
  width: 48px;
  height: 3px;
  box-shadow: 0 10px color-mix(in srgb, var(--upgrade-accent) 45%, transparent), 0 -10px color-mix(in srgb, var(--upgrade-accent) 45%, transparent);
  transform: skewX(-25deg);
}

.upgrade-icon--maxHp i,
.upgrade-icon--heal i {
  inset: auto;
  width: 30px;
  height: 9px;
  border: 0;
  border-radius: 4px;
  background: var(--upgrade-accent);
}

.upgrade-icon--maxHp i::after,
.upgrade-icon--heal i::after {
  position: absolute;
  left: 10px;
  top: -10px;
  width: 9px;
  height: 30px;
  border-radius: 4px;
  background: inherit;
  content: "";
}

.upgrade-icon--orbit i {
  border-style: dashed;
}

.upgrade-icon--reveal i {
  inset: 13px 9px 9px;
  border-radius: 5px;
  transform: rotate(-5deg);
}

.upgrade-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.06;
}

.upgrade-card p {
  margin: 0;
  color: #c2cad9;
  font-size: 13px;
  line-height: 1.4;
}

.upgrade-card__effect {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-top: 13px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--upgrade-accent) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--upgrade-accent) 13%, transparent);
  color: color-mix(in srgb, var(--upgrade-accent) 74%, white);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.05em;
}

.primary-button,
.secondary-button {
  width: 100%;
  min-height: 54px;
  margin-top: 10px;
  border-radius: 17px;
  font-weight: 1000;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.primary-button {
  border: 0;
  background: linear-gradient(135deg, var(--gold), #ff8f3b);
  color: #211409;
}

.secondary-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08);
}

.how-list {
  display: grid;
  gap: 11px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.how-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  color: #d9deea;
}

.how-list li > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 210, 95, 0.16);
  color: var(--gold);
  font-weight: 1000;
}

.language-button {
  position: absolute;
  z-index: 3;
  top: calc(14px + var(--safe-top));
  right: 16px;
  min-width: 47px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(7, 10, 20, 0.74);
  color: #fff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hud {
  position: fixed;
  z-index: 10;
  top: calc(10px + var(--safe-top));
  left: 10px;
  right: 10px;
  pointer-events: none;
}

.hud__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pill,
.icon-button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(6, 8, 18, 0.72);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 950;
}

.pill__dot {
  font-size: 20px;
}

.icon-button {
  display: grid;
  width: 38px;
  padding: 0;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
}

.audio-button {
  margin-left: auto;
  font-size: 15px;
}

.audio-button.is-muted {
  opacity: 0.62;
  filter: grayscale(1);
}

.bars {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.bar {
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
}

.bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  transition: width 0.12s linear;
}

.bar--health span {
  background: linear-gradient(90deg, #31d578, #b7f263);
}

.bar--xp span {
  background: linear-gradient(90deg, #8c73ff, #35baff);
}

.bar--boss {
  height: 9px;
}

.bar--boss span {
  background: linear-gradient(90deg, #ff4646, #ffb23b);
}

.bar--mission {
  height: 8px;
  margin-top: 5px;
}

.bar--mission span {
  background: linear-gradient(90deg, #ffd25f, #fff2b8);
}

.boss-hud,
.mission {
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(6, 8, 18, 0.74);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.boss-hud {
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr;
  gap: 8px;
  align-items: center;
}

.boss-hud span,
.mission span {
  margin: 0;
  color: var(--gold);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.1em;
}

.mission {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
}

.mission strong {
  overflow: hidden;
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission small {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  color: #aeb7c9;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.mission--active small {
  display: block;
}

.mission .bar {
  grid-column: 1 / -1;
  margin: 0;
  height: 5px;
}

.upgrade-strip {
  display: flex;
  max-width: 100%;
  gap: 6px;
  margin-top: 5px;
  padding-bottom: 7px;
  overflow: hidden;
}

.upgrade-strip span {
  display: grid;
  min-width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(6, 8, 18, 0.72);
  font-size: 15px;
}

.upgrade-strip .upgrade-chip {
  position: relative;
  display: grid;
  min-width: 36px;
  height: 34px;
  border-color: color-mix(in srgb, var(--upgrade-accent) 48%, transparent);
  background: color-mix(in srgb, var(--upgrade-accent) 15%, rgba(6, 8, 18, 0.82));
  place-items: center;
}

.upgrade-chip b {
  color: color-mix(in srgb, var(--upgrade-accent) 74%, white);
  font-size: 8px;
  font-weight: 1000;
}

.upgrade-chip em {
  position: absolute;
  right: -2px;
  top: -5px;
  display: grid;
  width: 15px;
  height: 15px;
  border: 2px solid #0a0d16;
  border-radius: 50%;
  background: var(--upgrade-accent);
  color: #0a0d16;
  place-items: center;
  font-size: 8px;
  font-style: normal;
  font-weight: 1000;
}

.upgrade-chip.is-suppressed {
  border-color: #ff5d76;
  background: repeating-linear-gradient(135deg, rgba(255, 93, 118, 0.22) 0 5px, rgba(6, 8, 18, 0.86) 5px 10px);
  animation: suppressed-upgrade-pulse 0.75s ease-in-out infinite alternate;
  filter: saturate(0.5);
}

.upgrade-chip.is-suppressed > b {
  text-decoration: line-through 2px #ff5d76;
}

.upgrade-chip.is-suppressed > i {
  position: absolute;
  bottom: -7px;
  left: 50%;
  padding: 1px 4px;
  border-radius: 4px;
  background: #ff5d76;
  color: #18070c;
  font-size: 6px;
  font-style: normal;
  font-weight: 1000;
  transform: translateX(-50%);
}

@keyframes suppressed-upgrade-pulse {
  from { box-shadow: 0 0 0 rgba(255, 93, 118, 0); }
  to { box-shadow: 0 0 14px rgba(255, 93, 118, 0.68); }
}

.controls {
  position: fixed;
  z-index: 12;
  inset: auto 0 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0 18px calc(18px + var(--safe-bottom));
  pointer-events: none;
}

.joystick {
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}

.joystick {
  position: relative;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 58%),
    rgba(5, 7, 16, 0.46);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.joystick__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(196, 207, 232, 0.76));
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.36);
  transform: translate(-50%, -50%);
}

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(158px + var(--safe-bottom));
  max-width: min(92vw, 460px);
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(8, 11, 22, 0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 16px;
}

.results div {
  padding: 12px 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
}

.results strong,
.results span {
  display: block;
}

.end-run-report {
  margin: 0 0 16px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
  text-align: left;
}

.end-run-report summary {
  cursor: pointer;
  color: var(--gold);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.13em;
}

.end-run-report__threat { display: flex; margin-top: 11px; flex-direction: column; gap: 3px; }
.end-run-report small { color: var(--muted); font-size: 8px; font-weight: 950; letter-spacing: 0.1em; }
.end-run-report__threat strong { color: #fff; font-size: 12px; line-height: 1.3; }
.end-run-report__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 9px; }
.end-run-report__facts span { display: flex; min-width: 0; padding: 7px; border-radius: 9px; background: rgba(0, 0, 0, 0.18); flex-direction: column; }
.end-run-report__facts b { margin-top: 3px; color: #fff; font-size: 13px; }
.end-run-report__build { margin-top: 10px; }
.end-run-report__build > div { display: flex; margin-top: 5px; flex-wrap: wrap; gap: 5px; }
.end-run-report__build span { padding: 5px 7px; border-radius: 999px; background: rgba(255, 210, 95, 0.1); color: #fff; font-size: 9px; font-weight: 800; }
.end-run-report__build b { color: var(--gold); }
.end-run-report > p { margin: 9px 0 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.end-run-report__copy { width:100%; margin-top:9px; padding:8px; border:1px solid rgba(255,255,255,.16); border-radius:9px; background:rgba(255,255,255,.07); color:#fff; font:900 9px/1 inherit; letter-spacing:.08em; }

.results strong {
  color: var(--gold);
  font-size: 24px;
}

.results span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.orientation-hint {
  display: none;
  position: fixed;
  z-index: 40;
  inset: 0;
  place-items: center;
  padding: 24px;
  background: rgba(5, 7, 14, 0.93);
  color: white;
  font-size: 24px;
  font-weight: 1000;
  text-align: center;
}

@media (max-width: 680px) {
  .map-card {
    grid-template-columns: 84px 1fr;
  }

  .map-card__preview {
    width: 84px;
    height: 76px;
  }

  .map-card__count {
    grid-column: 2;
    justify-self: start;
    margin-top: -5px;
  }

  .upgrade-choices {
    grid-template-columns: 1fr;
  }

  .upgrade-card {
    min-height: 118px;
  }

  .character-card {
    grid-template-columns: 64px 1fr;
  }

  .character-card__avatar {
    width: 64px;
    height: 64px;
  }

  .character-card__stat {
    grid-column: 2;
    justify-self: start;
    margin-top: -4px;
  }

  .results {
    gap: 5px;
  }

  .results div {
    padding: 10px 3px;
  }

  .results strong {
    font-size: 20px;
  }

  .results span {
    font-size: 8px;
    letter-spacing: 0.06em;
  }
}

@media (max-width: 380px), (max-height: 640px) {
  .panel--objective-intro,
  .panel--tactical-map {
    padding: 15px;
  }

  .objective-intro__hero {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 11px;
  }

  .objective-intro__badge {
    width: 80px;
    height: 90px;
    border-radius: 19px;
  }

  .objective-intro__context {
    margin: 10px 0 7px;
    padding: 9px 10px;
    font-size: 10px;
  }

  .objective-intro__outcome {
    padding: 8px 10px;
  }

  .objective-intro__outcome p {
    font-size: 10px;
  }

  .objective-intro__progress {
    margin: 8px 0;
  }

  .panel--objective-intro .primary-button,
  .panel--tactical-map .primary-button {
    min-height: 42px;
  }

  .tactical-map__field {
    max-height: 175px;
  }

  .tactical-map__legend {
    margin: 6px 0;
  }

  .tactical-map__objectives {
    gap: 4px;
    margin-bottom: 8px;
  }

  .tactical-map__objective {
    padding: 5px 6px;
  }

  .panel--boss-intro {
    padding: 17px;
  }

  .boss-intro__hero {
    grid-template-columns: 92px 1fr;
    gap: 12px;
  }

  .boss-portrait {
    width: 92px;
    height: 106px;
    transform-origin: left center;
  }

  .boss-portrait__body,
  .boss-portrait__head,
  .boss-portrait__hair,
  .boss-portrait__face,
  .boss-portrait__prop {
    transform: scale(0.78);
    transform-origin: top left;
  }

  .boss-portrait:not([data-boss="rfk-jr"]) .boss-portrait__prop {
    bottom: -8px;
  }

  .panel--boss-intro .boss-intro__hero h2 {
    font-size: 24px;
  }

  .boss-intro__briefing {
    margin: 10px 0 8px;
    padding: 9px 10px;
    font-size: 11px;
  }

  .boss-intro__intel div {
    padding: 8px;
  }

  .boss-intro__intel strong {
    font-size: 8px;
  }

  .panel--boss-intro .primary-button {
    min-height: 46px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .orientation-hint {
    display: grid;
  }
}

/* Expandable campaign intelligence shared by character, objective and boss screens. */
.character-card { display: block; padding: 0; overflow: hidden; cursor: default; }
.character-card__select { display: grid; grid-template-columns: 72px 1fr auto; gap: 13px; align-items: center; width: 100%; padding: 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.character-card__details,
.expandable-copy { border-top: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.16); }
.character-card__details summary,
.expandable-copy summary { padding: 9px 12px; color: color-mix(in srgb, var(--accent, var(--boss-color)) 75%, white); font-size: 8px; font-weight: 1000; letter-spacing: .11em; cursor: pointer; list-style: none; }
.character-card__details summary::after,
.expandable-copy summary::after { float: right; content: "+"; }
.character-card__details[open] summary::after,
.expandable-copy[open] summary::after { content: "−"; }
.character-card__details p,
.expandable-copy p { margin: 0; padding: 0 12px 12px; color: #c9cfdb; font-size: 11px; line-height: 1.45; }
.expandable-copy { margin: -2px 0 9px; border: 1px solid color-mix(in srgb, var(--boss-color) 28%, transparent); border-radius: 11px; }
.expandable-copy--objective { --boss-color: var(--objective-color); }
.intel-button { width: 100%; margin: 2px 0 12px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; background: linear-gradient(90deg, rgba(53,167,255,.16), rgba(255,77,77,.16)); color: #f7eecf; font-size: 10px; font-weight: 1000; letter-spacing: .09em; }
.panel--intel { max-height: min(92vh, 800px); overflow-y: auto; }
.intel-subtitle { margin: -7px 0 13px; color: var(--muted); font-size: 12px; }
.enemy-guide-list { display: grid; gap: 9px; }
.enemy-intel-card { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; padding: 10px; border: 1px solid color-mix(in srgb, var(--enemy-color) 42%, rgba(255,255,255,.12)); border-radius: 15px; background: color-mix(in srgb, var(--enemy-color) 10%, rgba(255,255,255,.035)); }
.enemy-intel-card__avatar { display: grid; width: 54px; height: 54px; place-items: center; border: 3px solid #080b14; border-radius: 17px; background: var(--enemy-color); color: white; font-size: 13px; font-weight: 1000; box-shadow: inset 0 -10px rgba(0,0,0,.2); }
.enemy-intel-card__copy small,
.enemy-intel-card__copy strong,
.enemy-intel-card__copy em { display: block; }
.enemy-intel-card__copy small { color: var(--enemy-color); font-size: 8px; font-weight: 950; text-transform: uppercase; }
.enemy-intel-card__copy strong { margin: 2px 0; color: #fff; font-size: 14px; }
.enemy-intel-card__copy em { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 900; }
.enemy-intel-card details { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.08); }
.enemy-intel-card summary { padding-top: 8px; color: #f4d76c; font-size: 8px; font-weight: 1000; cursor: pointer; list-style: none; }
.enemy-intel-card p { margin: 8px 0 5px; color: #cbd1dc; font-size: 11px; line-height: 1.4; }
.enemy-intel-card details b { color: white; font-size: 8px; letter-spacing: .06em; }

.character-master { display: block; user-select: none; -webkit-user-drag: none; }
.character-master--card { position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.character-card__avatar.has-master .avatar__head,
.character-card__avatar.has-master .avatar__body,
.character-card__avatar.has-master .avatar__prop,
.boss-portrait.has-master .boss-portrait__body,
.boss-portrait.has-master .boss-portrait__head,
.boss-portrait.has-master .boss-portrait__hair,
.boss-portrait.has-master .boss-portrait__face,
.boss-portrait.has-master .boss-portrait__prop,
.boss-portrait.has-master::before { display: none; }
.boss-portrait.has-master { background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.24), transparent 34%), color-mix(in srgb, var(--boss-color) 20%, #111827); }
.character-master--dossier { width: 100%; height: 100%; object-fit: cover; object-position: 50% 7%; }
.boss-portrait:not(.has-master) .character-master--dossier { display: none; }

/* Narrative chapter card and illustrated campaign archive. */
.campaign-briefing { margin: 4px 0 12px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--accent, #ffd25f) 34%, rgba(255,255,255,.12)); border-radius: 16px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent, #ffd25f) 15%, transparent), transparent 42%), rgba(255,255,255,.035); }
.campaign-briefing__chapter { margin: 0 0 4px; color: #ffd25f; font-size: 8px; font-weight: 1000; letter-spacing: .12em; }
.campaign-briefing h2 { margin: 0; color: #fff; font-size: 17px; line-height: 1.08; }
.campaign-briefing__premise { margin: 7px 0 9px; color: #cbd1dc; font-size: 11px; line-height: 1.42; }
.campaign-briefing details { border-top: 1px solid rgba(255,255,255,.09); }
.campaign-briefing summary { padding-top: 9px; color: color-mix(in srgb, var(--accent, #ffd25f) 78%, white); font-size: 8px; font-weight: 1000; letter-spacing: .1em; list-style: none; cursor: pointer; }
.campaign-briefing summary::after { float: right; content: "+"; }
.campaign-briefing details[open] summary::after { content: "−"; }
.campaign-briefing ol { display: grid; gap: 6px; margin: 10px 0 8px; padding-left: 22px; color: #e4e8ef; font-size: 10px; line-height: 1.35; }
.campaign-briefing ol li::marker { color: #ffd25f; font-weight: 1000; }
.campaign-briefing__finale { margin: 0; padding: 9px 10px; border-left: 3px solid var(--accent, #ffd25f); border-radius: 0 9px 9px 0; background: rgba(0,0,0,.22); color: #fff0bd; font-size: 10px; line-height: 1.38; }
.intel-button--prominent { margin: 0 0 14px; border-color: rgba(255,210,95,.55); background: linear-gradient(90deg, rgba(255,210,95,.18), rgba(53,167,255,.14), rgba(255,77,77,.14)); color: #ffe58f; }
.enemy-guide-regions { display: flex; gap: 6px; margin: 0 0 12px; }
.enemy-guide-region { flex: 1; padding: 8px 5px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 9px; font-weight: 950; }
.enemy-guide-region.is-active { border-color: #ffd25f; background: rgba(255,210,95,.16); color: #fff1b5; }
.enemy-intel-card__avatar { overflow: hidden; }
.enemy-intel-card__avatar img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 3px 1px rgba(0,0,0,.28)); }

@media (max-width: 680px) {
  .character-card__select { grid-template-columns: 64px 1fr; }
}

@media (max-width: 380px), (max-height: 640px) {
  .panel--boss-intro { max-height: 96vh; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.start-utility {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}

.settings-panel {
  max-height: min(92vh, 720px);
  overflow-y: auto;
}

.settings-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.settings-form {
  display: grid;
  gap: 11px;
}

.settings-field {
  display: grid;
  gap: 6px;
  color: #f4d76c;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.settings-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: #161b28;
  color: #fff;
  font: 900 12px Inter, system-ui, sans-serif;
}

html[data-visual-density="reduced"] .upgrade-chip:nth-child(n+9) {
  display: none;
}

html[data-ui-size="large"] .panel p,
html[data-ui-size="large"] .panel li,
html[data-ui-size="large"] .panel summary,
html[data-ui-size="large"] .enemy-intel-card__copy strong {
  font-size: max(13px, 1em);
  line-height: 1.5;
}

html[data-ui-size="large"] .panel button,
html[data-ui-size="large"] .panel select {
  min-height: 48px;
  font-size: 12px;
}

html[data-ui-size="large"] .mission strong { font-size: 15px; }
html[data-ui-size="large"] .mission small,
html[data-ui-size="large"] .mission em { font-size: 10px; }

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  transition: none !important;
  animation: none !important;
}

/* Red's own American campaign identity, without changing Blue's presentation. */
html[data-theme="ballot-red"] .screen--start::after {
  background:
    linear-gradient(to top, var(--campaign-bg) 0 6%, transparent 34%),
    linear-gradient(90deg, #b22234 0 36%, #f7f3e8 36% 65%, #214b82 65% 100%) top / 100% 4px no-repeat;
}