/* Caleb's War — per-screen layouts (menus). Reference 1600 × 900 at --ui 1. */

/* ------------------------------------------------------------- main menu --- */
.cw-main-mark { position: absolute; left: calc(56 * var(--px)); top: calc(40 * var(--px)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--px)); }
.cw-main-mark .cw-logo { align-items: flex-start; }
.cw-main-net { font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.34em; color: var(--cn-amber); opacity: 0.8; padding-left: calc(2 * var(--px)); }
.cw-main-col { position: absolute; display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.cw-menu-btn { transition: transform 160ms var(--ease-out), opacity 160ms, background 40ms linear, color 40ms linear; }
.cw-menu-btn.is-pre { opacity: 0; transform: translateX(calc(-40 * var(--px))); }
.cw-menu-continue { background: linear-gradient(90deg, rgba(255, 178, 63, 0.18), var(--cn-btn) 70%); }
.cw-menu-continue .cw-btn-label { color: var(--cn-amber-2); }

.cw-monitor { position: absolute; display: flex; flex-direction: column; background: rgba(5, 8, 10, 0.88); border: 1px solid rgba(255, 178, 63, 0.7);
  box-shadow: 0 0 0 1px #000, 0 0 40px rgba(255, 178, 63, 0.07), inset 0 0 50px rgba(0, 0, 0, 0.8); font-family: var(--f-mono); overflow: hidden; }
.cw-monitor::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px); }
.cw-monitor-head { display: flex; align-items: center; gap: calc(10 * var(--px)); height: calc(30 * var(--px)); padding: 0 calc(14 * var(--px));
  border-bottom: 1px solid rgba(255, 178, 63, 0.35); font-size: calc(12.5 * var(--px)); letter-spacing: 0.3em; color: #ffd592; background: rgba(255, 178, 63, 0.07); }
.cw-monitor-head .led { width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: 50%; background: var(--cn-green); box-shadow: 0 0 calc(6 * var(--px)) var(--cn-green); animation: cw-blink 1s steps(1) infinite; }
.cw-monitor-ch { margin-left: auto; color: rgba(255, 178, 63, 0.55); letter-spacing: 0.2em; }
.cw-monitor-body { flex: 1; padding: calc(16 * var(--px)) calc(18 * var(--px)); }
.cw-monitor-tag { font-size: calc(12 * var(--px)); letter-spacing: 0.28em; color: var(--cn-green); margin-bottom: calc(10 * var(--px)); text-shadow: 0 0 6px rgba(61, 255, 138, 0.5); }
.cw-monitor-text { font-size: calc(15.5 * var(--px)); line-height: 1.55; color: #ffb23f; text-shadow: 0 0 calc(6 * var(--px)) rgba(255, 178, 63, 0.45); white-space: normal; }
.cw-monitor-foot { display: flex; align-items: center; justify-content: space-between; height: calc(24 * var(--px)); padding: 0 calc(14 * var(--px));
  border-top: 1px solid rgba(255, 178, 63, 0.2); font-size: calc(10.5 * var(--px)); letter-spacing: 0.3em; color: rgba(255, 178, 63, 0.5); }
.cw-monitor-bars { display: inline-flex; align-items: flex-end; gap: calc(2 * var(--px)); height: calc(10 * var(--px)); }
.cw-monitor-bars i { width: calc(3 * var(--px)); background: var(--cn-green); opacity: 0.8; }
.cw-monitor-bars i:nth-child(1) { height: 30%; } .cw-monitor-bars i:nth-child(2) { height: 55%; } .cw-monitor-bars i:nth-child(3) { height: 80%; } .cw-monitor-bars i:nth-child(4) { height: 100%; animation: cw-blink 2.4s steps(1) infinite; }
.cw-screen-main.from-boot .cw-main-mark { animation: cw-fadein 400ms ease both; }
.cw-screen-main.from-boot .cw-status { animation: cw-fadein 600ms 200ms ease both; }
.cw-screen-main.from-boot .cw-monitor { animation: cw-fadein 250ms ease both; }
@keyframes cw-fadein { from { opacity: 0; } }

/* Soft console wash behind the menu column so buttons sit on a "rail". */
.cw-screen-main::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(520 * var(--px)); pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 5, 7, 0.78) 0%, rgba(3, 5, 7, 0.45) 60%, transparent 100%); }
.cw-screen-main.is-roll .cw-logo-mark { animation: cw-barrel 1s var(--ease-io); }
@keyframes cw-barrel { to { transform: rotate(360deg); } }
.cw-main-egg { position: absolute; left: calc(56 * var(--px)); top: calc(150 * var(--px)); font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.2em; color: var(--cn-green); }

/* --------------------------------------------------------- shared layout --- */
.cw-row-inline { display: flex; align-items: center; gap: calc(10 * var(--px)); flex-wrap: wrap; }
.cw-row-stack { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--px)); }
.cw-kv { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--px)); padding: calc(6 * var(--px)) 0; border-bottom: 1px solid rgba(38, 49, 58, 0.55); }
.cw-kv span { font: 600 calc(13 * var(--px)) var(--f-cond); letter-spacing: 0.12em; color: var(--cn-dim); }
.cw-kv b { font: 600 calc(15 * var(--px)) var(--f-mono); color: var(--cn-text); display: inline-flex; align-items: center; gap: calc(6 * var(--px)); }
.cw-xp-bar { position: relative; height: calc(10 * var(--px)); background: #070a0d; border: 1px solid var(--cn-line-hi); overflow: hidden; }
.cw-xp-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #b8862b, var(--cn-amber) 70%, #ffe0a3); box-shadow: 0 0 calc(10 * var(--px)) var(--cn-amber); transition: width 1200ms var(--ease-out); }
.cw-xp-label { margin-top: calc(6 * var(--px)); font: 500 calc(12.5 * var(--px)) var(--f-mono); letter-spacing: 0.06em; color: var(--cn-dim); }
.cw-dd:disabled { opacity: 0.35; cursor: default; }

/* ------------------------------------------------------- campaign select --- */
.cw-camp-grid { position: absolute; left: 50%; top: calc(96 * var(--px)); transform: translateX(-50%); width: min(calc(1180 * var(--px)), 94vw);
  display: flex; flex-direction: column; gap: calc(18 * var(--px)); }
.cw-camp-group-title { display: flex; align-items: center; gap: calc(14 * var(--px)); margin-bottom: calc(10 * var(--px)); font: 700 calc(15 * var(--px)) var(--f-cond); letter-spacing: 0.34em; color: var(--cn-amber); }
.cw-camp-group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cn-amber-dim), transparent); }
.cw-camp-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(18 * var(--px)); }
.cw-camp-card { position: relative; height: calc(300 * var(--px)); border: 1px solid var(--cn-line-hi); background: #0a0e12; padding: 0; text-align: left; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; color: var(--cn-text); transition: transform 120ms var(--ease-out), border-color 80ms, box-shadow 120ms; --acc: #6fa8ff; }
.cw-camp-card.side-soviets { --acc: #ff6a55; }
.cw-camp-card:hover, .cw-camp-card:focus-visible { transform: translateY(calc(-3 * var(--px))); border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), 0 calc(14 * var(--px)) calc(36 * var(--px)) rgba(0, 0, 0, 0.6), 0 0 calc(30 * var(--px)) color-mix(in srgb, var(--acc) 30%, transparent); outline: none; }
.cw-camp-art { position: absolute; inset: 0; }
.cw-camp-art svg { width: 100%; height: 100%; display: block; }
.cw-camp-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 6, 8, 0.94) 0%, rgba(4, 6, 8, 0.72) 42%, rgba(4, 6, 8, 0) 72%), linear-gradient(0deg, rgba(4, 6, 8, 0.85) 0%, rgba(4, 6, 8, 0) 32%); }
.cw-camp-body { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: calc(16 * var(--px)); padding: 0 calc(22 * var(--px)); }
.cw-camp-emblem { flex: none; filter: drop-shadow(0 calc(4 * var(--px)) calc(8 * var(--px)) rgba(0, 0, 0, 0.7)); }
.cw-camp-kicker { font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.28em; color: var(--acc); }
.cw-camp-card.is-x .cw-camp-kicker { color: #c9a8ff; }
.cw-camp-title { margin-top: calc(4 * var(--px)); font: 700 calc(26 * var(--px)) / 1.02 var(--f-din); letter-spacing: 0.04em; text-transform: uppercase; }
.cw-camp-card.side-allies .cw-camp-title { font-family: var(--f-cond); font-weight: 600; letter-spacing: 0.08em; }
.cw-camp-years { margin-top: calc(3 * var(--px)); font: 600 calc(11.5 * var(--px)) var(--f-mono); letter-spacing: 0.2em; color: var(--cn-dim); }
/* The branch-point coin between the two base campaigns (bible §2.4). */
.cw-camp-row { position: relative; }
.cw-coin { position: absolute; left: 50%; top: 50%; z-index: 3; width: calc(78 * var(--px)); height: calc(78 * var(--px)); transform: translate(-50%, -58%); perspective: calc(420 * var(--px)); pointer-events: none;
  filter: drop-shadow(0 calc(6 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.75)); }
.cw-coin-body { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cw-coin-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cw-coin-face.is-tails { transform: rotateY(180deg); }
.cw-coin-face svg { display: block; }
.cw-coin-label { position: absolute; left: 50%; top: 100%; margin-top: calc(8 * var(--px)); transform: translateX(-50%); font: 700 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.3em; color: #d9e0e6; opacity: 0; transition: opacity 200ms; white-space: nowrap; }
.cw-coin.is-held .cw-coin-label { opacity: 1; }
.cw-camp-blurb { margin-top: calc(6 * var(--px)); font-size: calc(13.5 * var(--px)); line-height: 1.35; color: var(--cn-text-2); max-width: calc(380 * var(--px)); }
.cw-camp-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(14 * var(--px)); padding: calc(12 * var(--px)) calc(22 * var(--px)) calc(14 * var(--px)); }
.cw-camp-prog { font: 600 calc(13 * var(--px)) var(--f-mono); letter-spacing: 0.14em; color: var(--cn-dim); white-space: nowrap; }
.cw-camp-prog b { color: var(--cn-text); font-size: calc(15 * var(--px)); }
.cw-camp-done { color: var(--cn-green); }
.cw-camp-dots { display: flex; gap: calc(4 * var(--px)); flex-wrap: wrap; }
.cw-camp-dots i { width: calc(10 * var(--px)); height: calc(10 * var(--px)); border: 1px solid rgba(255, 255, 255, 0.35); transform: rotate(45deg); }
.cw-camp-dots i.is-done { background: var(--dot); border-color: var(--dot); box-shadow: 0 0 calc(6 * var(--px)) var(--dot); }
.cw-camp-ribbon { margin-left: auto; padding: calc(3 * var(--px)) calc(8 * var(--px)); font: 700 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: #111; background: var(--rib); }

/* ---------------------------------------------------------- mission list --- */
.cw-ml-panel { position: absolute; left: calc(36 * var(--px)); top: calc(92 * var(--px)); bottom: calc(92 * var(--px)); width: 42%; display: flex; flex-direction: column; }
.cw-ml-head { display: flex; align-items: center; gap: calc(14 * var(--px)); padding: calc(14 * var(--px)) calc(18 * var(--px)); border-bottom: 1px solid var(--cn-line); }
.cw-ml-camp { font: 700 calc(22 * var(--px)) / 1.05 var(--f-din); letter-spacing: 0.06em; }
.cw-ml-sub { margin-top: calc(4 * var(--px)); font: 500 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: var(--cn-dim); }
.cw-ml-list { flex: 1; overflow-y: auto; padding: calc(6 * var(--px)) 0; }
.cw-ml-row { display: flex; align-items: center; gap: calc(16 * var(--px)); width: 100%; height: calc(64 * var(--px)); padding: 0 calc(18 * var(--px)); border: 0; border-left: calc(3 * var(--px)) solid transparent;
  background: transparent; text-align: left; color: var(--cn-text); transition: background 60ms; }
.cw-ml-row:hover { background: rgba(255, 255, 255, 0.035); }
.cw-ml-row.is-sel { background: linear-gradient(90deg, rgba(255, 178, 63, 0.14), rgba(255, 178, 63, 0.02)); border-left-color: var(--cn-amber); }
.cw-ml-row:focus-visible { outline: none; background: rgba(255, 178, 63, 0.1); }
.cw-ml-num { font: 500 calc(28 * var(--px)) var(--f-mono); color: var(--cn-amber); width: calc(44 * var(--px)); opacity: 0.9; }
.cw-ml-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.cw-ml-title { font: 600 calc(18 * var(--px)) / 1.1 var(--f-cond); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-ml-loc { font-size: calc(13 * var(--px)); color: var(--cn-dim); }
.cw-ml-row.is-locked .cw-ml-title { color: var(--cn-faint); letter-spacing: 0; }
.cw-ml-row.is-locked .cw-ml-num { color: var(--cn-faint); }
.cw-ml-status { display: inline-flex; align-items: center; gap: calc(6 * var(--px)); font: 600 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.14em; white-space: nowrap; }
.cw-ml-status svg { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
.cw-ml-status.is-done { color: var(--c); }
.cw-ml-status.is-next { color: var(--cn-green); animation: cw-pulse 1.1s ease-in-out infinite; }
@keyframes cw-pulse { 50% { opacity: 0.35; } }
.cw-ml-status.is-locked { color: var(--cn-faint); }
.cw-ml-status.is-pending { color: #f2c230; opacity: 0.8; }
.cw-ml-diff { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--px)); padding: calc(12 * var(--px)) calc(18 * var(--px)); border-top: 1px solid var(--cn-line); }
.cw-ml-pinlabel { position: absolute; right: calc(40 * var(--px)); bottom: calc(92 * var(--px)); padding: calc(8 * var(--px)) calc(14 * var(--px)); font: 600 calc(13 * var(--px)) var(--f-mono); letter-spacing: 0.12em;
  color: var(--cn-amber); background: rgba(5, 8, 10, 0.8); border: 1px solid var(--cn-amber-dim); opacity: 0; transition: opacity 200ms; text-transform: uppercase; }
.cw-ml-pinlabel.is-on { opacity: 1; }

/* -------------------------------------------------------------- briefing --- */
.cw-brief { position: absolute; left: calc(28 * var(--px)); right: calc(28 * var(--px)); top: calc(88 * var(--px)); bottom: calc(24 * var(--px));
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: calc(14 * var(--px)); }
/* The briefing art is a 16:9 plate with its satellite HUD (header, speaker
   inset, coin, scale bar) drawn right up to its edges, so the panel keeps the
   plate's own shape and nothing is cropped; the transmission panel below takes
   the remaining height. On screens wider than 16:9 the height cap wins and the
   plate is letterboxed (contain) rather than cut. */
.cw-brief-art { grid-column: 1; grid-row: 1; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 352 * var(--px)); }
.cw-brief-art svg, .cw-brief-art img, .cw-brief-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-brief-art .cw-mission-art { object-fit: contain; }
.cw-brief-art svg, .cw-brief-art .cw-mission-art { animation: cw-kenburns 30s ease-in-out infinite alternate; }
.cw-brief-art .cw-mission-art { animation: cw-art-in 500ms ease-out both, cw-kenburns 30s ease-in-out 500ms infinite alternate; }
.cw-brief-art.has-art .cw-brief-caption { display: none; }
.cw-brief-art.has-art .cw-brief-grain { opacity: 0.18; }
@keyframes cw-art-in { from { opacity: 0; filter: brightness(2.2) contrast(0.6); } }
/* Subtle drift only: at 1.02 the plate's own frame (1.3% in from each edge) stays in view. */
@keyframes cw-kenburns { from { transform: scale(1); } to { transform: scale(1.02); } }
.cw-brief-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.7)); }
.cw-brief-caption { position: absolute; left: calc(14 * var(--px)); bottom: calc(12 * var(--px)); display: flex; align-items: center; gap: calc(8 * var(--px));
  padding: calc(5 * var(--px)) calc(10 * var(--px)); background: rgba(0, 0, 0, 0.6); font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.2em; color: #d8e0e7; }
.cw-brief-caption .led, .cw-brief-tx-head .led { width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: 50%; background: var(--cn-red); box-shadow: 0 0 calc(6 * var(--px)) var(--cn-red); animation: cw-blink 1s steps(1) infinite; }
.cw-brief-tx { grid-column: 1; grid-row: 2; display: flex; gap: calc(16 * var(--px)); padding: calc(14 * var(--px)); transition: filter 60ms; }
.cw-brief > .cw-brief-tx { min-height: calc(212 * var(--px)); }
.cw-brief > .cw-brief-tx .cw-brief-portrait { width: auto; aspect-ratio: 1; max-width: 36%; }
.cw-brief-tx.is-glitch { filter: contrast(1.6) hue-rotate(20deg) blur(0.6px); }
.cw-brief-portrait { width: calc(180 * var(--px)); flex: none; border: 1px solid var(--cn-line-hi); background: #05080a; overflow: hidden; }
.cw-brief-portrait > * { width: 100%; height: 100%; display: block; object-fit: cover; }
.cw-brief-tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cw-brief-tx-head { display: flex; align-items: center; gap: calc(8 * var(--px)); font: 600 calc(11.5 * var(--px)) var(--f-mono); letter-spacing: 0.24em; color: var(--cn-dim); }
.cw-brief-count { margin-left: auto; color: var(--cn-amber); letter-spacing: 0.1em; }
.cw-brief-name { margin: calc(8 * var(--px)) 0 calc(6 * var(--px)); font: 700 calc(18 * var(--px)) var(--f-cond); letter-spacing: 0.12em; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cw-brief-name span { color: var(--cn-dim); font-weight: 500; }
.cw-brief-text { flex: 1; font: 400 calc(18 * var(--px)) / 1.5 var(--f-ui); color: #eef2f5; overflow-y: auto; cursor: pointer; text-shadow: 0 1px 2px #000; }
.cw-brief-right { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: calc(14 * var(--px)); min-height: 0; }
.cw-brief-loc { flex: 0 0 44%; display: flex; flex-direction: column; background: rgba(9, 13, 17, 0.25); backdrop-filter: none; }
.cw-brief-loc-view { flex: 1; }
.cw-brief-loc-foot { display: flex; justify-content: space-between; align-items: baseline; gap: calc(12 * var(--px)); padding: calc(8 * var(--px)) calc(12 * var(--px)); border-top: 1px solid var(--cn-line); background: rgba(5, 8, 10, 0.85); }
/* Long place names wrap; the coordinates always stay on one line. */
.cw-brief-locname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font: 700 calc(15 * var(--px)) / 1.3 var(--f-mono); letter-spacing: 0.14em; color: var(--cn-amber); min-height: 1.2em; }
.cw-brief-coord { flex: 0 0 auto; white-space: nowrap; font: 500 calc(13 * var(--px)) var(--f-mono); color: var(--cn-green); min-height: 1.2em; }
.cw-brief-obj { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cw-brief-objs { flex: 1; overflow-y: auto; padding: calc(12 * var(--px)) calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.cw-obj { display: flex; gap: calc(10 * var(--px)); font-size: calc(15 * var(--px)); line-height: 1.4; color: var(--cn-text-2); }
.cw-obj.is-primary { color: var(--cn-text); font-weight: 600; }
.cw-obj .box { flex: none; width: calc(14 * var(--px)); height: calc(14 * var(--px)); margin-top: calc(3 * var(--px)); border: 1.5px solid var(--cn-amber); }
.cw-obj.is-done .box { display: grid; place-items: center; border-color: var(--cn-green); color: var(--cn-green); }
.cw-obj.is-done .box .cw-ico { width: 100%; height: 100%; }
.cw-brief-intel { padding: calc(10 * var(--px)) calc(14 * var(--px)); border-top: 1px solid var(--cn-line); font-size: calc(13 * var(--px)); color: var(--cn-dim); }
.cw-brief-intel b { color: var(--cn-amber); font-family: var(--f-mono); letter-spacing: 0.14em; }
.cw-brief-btns { display: flex; gap: calc(10 * var(--px)); justify-content: flex-end; align-items: center; }
.cw-brief-secret { text-align: right; font: 700 calc(12 * var(--px)) / 1.35 var(--f-mono); letter-spacing: 0.16em; color: var(--cn-red); opacity: 0.85; }
.cw-brief-swings { font: 700 calc(13 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: #c9a8ff; }

/* ------------------------------------------------------------- skirmish --- */
.cw-sk { position: absolute; left: calc(24 * var(--px)); right: calc(24 * var(--px)); top: calc(86 * var(--px)); bottom: calc(86 * var(--px));
  display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: calc(14 * var(--px)); }
.cw-sk-left { display: flex; flex-direction: column; gap: calc(14 * var(--px)); min-height: 0; }
.cw-sk-players { flex: none; }
.cw-sk-thead, .cw-sk-row { display: grid; grid-template-columns: calc(30 * var(--px)) minmax(0, 1.15fr) minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 0.92fr) minmax(0, 0.72fr) minmax(0, 0.5fr);
  align-items: center; gap: calc(8 * var(--px)); padding: 0 calc(12 * var(--px)); }
.cw-sk-thead { height: calc(26 * var(--px)); font: 600 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: var(--cn-faint); border-bottom: 1px solid var(--cn-line); }
.cw-sk-row { height: calc(41 * var(--px)); border-bottom: 1px solid rgba(38, 49, 58, 0.45); border-left: calc(3 * var(--px)) solid transparent; }
.cw-sk-row.is-active { background: rgba(255, 178, 63, 0.05); border-left-color: var(--cn-amber-dim); }
.cw-sk-row.is-human .cw-sk-name { color: var(--cn-amber-2); }
.cw-sk-row.is-closed { opacity: 0.55; }
.cw-sk-row .cw-dd { width: 100%; height: calc(30 * var(--px)); font-size: calc(13.5 * var(--px)); }
.cw-sk-num { display: inline-flex; align-items: center; justify-content: center; width: calc(24 * var(--px)); height: calc(24 * var(--px)); font: 700 calc(12 * var(--px)) var(--f-mono);
  color: #0b0f13; background: var(--c, transparent); border: 1px solid var(--cn-line-hi); }
.cw-sk-row.is-closed .cw-sk-num { color: var(--cn-faint); }
.cw-sk-name { font: 600 calc(14.5 * var(--px)) var(--f-cond); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-sk-options { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cw-sk-opts { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 0 calc(22 * var(--px)); padding: calc(4 * var(--px)) calc(14 * var(--px)); overflow-y: auto; }
.cw-sk-opt { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--px)); min-height: calc(38 * var(--px)); border-bottom: 1px solid rgba(38, 49, 58, 0.45); }
.cw-sk-opt-label { font: 600 calc(14.5 * var(--px)) var(--f-cond); letter-spacing: 0.08em; color: var(--cn-text-2); text-transform: uppercase; white-space: nowrap; }
.cw-sk-opt-ctl { display: flex; align-items: center; min-width: 0; }
.cw-sk-modewarn { margin-top: calc(4 * var(--px)); font-size: calc(12 * var(--px)); line-height: 1.25; color: var(--cw-warn, #f2c230); max-width: calc(250 * var(--px)); }
.cw-sk-opt-ctl .cw-slider { width: calc(250 * var(--px)); }
.cw-sk-opt-ctl .cw-range { min-width: calc(110 * var(--px)); }
.cw-sk-opt-ctl .cw-range-val { min-width: calc(92 * var(--px)); }
.cw-sk-opt-ctl .cw-dd { min-width: calc(190 * var(--px)); }
.cw-sk-seedrow { display: flex; gap: calc(6 * var(--px)); align-items: center; }
.cw-sk-seed { width: calc(130 * var(--px)); }
.cw-sk-right { min-height: 0; display: flex; }
.cw-sk-map { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cw-sk-map .cw-panel-head .cw-dim { margin-left: auto; color: var(--cn-text); letter-spacing: 0.1em; text-transform: none; font-family: var(--f-ui); font-weight: 600; }
.cw-sk-preview { position: relative; height: calc(250 * var(--px)); margin: calc(10 * var(--px)) calc(12 * var(--px)) 0; background: radial-gradient(ellipse at center, #0c1319, #05080a 75%); border: 1px solid var(--cn-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cw-sk-stage { position: relative; transition: opacity 150ms, filter 150ms; }
.cw-sk-preview.is-busy .cw-sk-stage { opacity: 0.35; filter: blur(calc(1.5 * var(--px))) saturate(0.4); }
.cw-sk-preview.is-busy::after { content: "GENERATING BATTLEFIELD"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: calc(6 * var(--px)) calc(14 * var(--px));
  font: 700 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.28em; color: var(--cn-amber); background: rgba(3, 5, 7, 0.85); border: 1px solid var(--cn-amber-dim); animation: cw-breathe 1.1s ease-in-out infinite; }
@keyframes cw-breathe { 50% { opacity: 0.45; } }
.cw-sk-canvas { display: block; max-width: calc(440 * var(--px)); max-height: calc(240 * var(--px)); width: auto; height: auto; filter: drop-shadow(0 0 calc(12 * var(--px)) rgba(0, 0, 0, 0.8)); }
.cw-sk-marker { position: absolute; width: calc(24 * var(--px)); height: calc(24 * var(--px)); margin: calc(-12 * var(--px)) 0 0 calc(-12 * var(--px)); border-radius: 50%;
  border: 2px solid #fff; background: rgba(5, 8, 10, 0.75); color: #fff; font: 700 calc(12 * var(--px)) var(--f-mono); display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 0 0 1px #000, 0 0 calc(8 * var(--px)) rgba(0, 0, 0, 0.8); transition: transform 80ms; }
.cw-sk-marker:hover { transform: scale(1.18); }
.cw-sk-marker.is-taken { background: var(--c); color: #0b0f13; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); }
.cw-sk-nomap { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--px)); font: 600 calc(15 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: var(--cn-amber); }
.cw-sk-nomap small { font: 400 calc(12.5 * var(--px)) var(--f-ui); letter-spacing: 0; color: var(--cn-dim); }
.cw-sk-mapmeta { padding: calc(8 * var(--px)) calc(14 * var(--px)) 0; font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.14em; color: var(--cn-amber); }
.cw-sk-mapdesc { margin: calc(4 * var(--px)) calc(14 * var(--px)) calc(6 * var(--px)); font-size: calc(13 * var(--px)); line-height: 1.4; color: var(--cn-dim); min-height: calc(26 * var(--px));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cw-sk-chips { display: flex; gap: calc(6 * var(--px)); padding: calc(4 * var(--px)) calc(12 * var(--px)) calc(8 * var(--px)); flex-wrap: wrap; }
.cw-sk-maplist { flex: 1; min-height: 0; overflow-y: auto; margin: 0 calc(12 * var(--px)) calc(12 * var(--px)); border: 1px solid var(--cn-line); background: rgba(3, 5, 7, 0.5); }
.cw-sk-mapitem { display: flex; align-items: baseline; justify-content: space-between; gap: calc(10 * var(--px)); width: 100%; padding: calc(9 * var(--px)) calc(12 * var(--px)); border: 0;
  border-bottom: 1px solid rgba(38, 49, 58, 0.5); background: transparent; color: var(--cn-text); text-align: left; }
.cw-sk-mapitem .n { font: 600 calc(15 * var(--px)) var(--f-cond); letter-spacing: 0.06em; }
.cw-sk-mapitem .p { font: 500 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.1em; color: var(--cn-dim); white-space: nowrap; }
.cw-sk-mapitem:hover { background: rgba(255, 255, 255, 0.04); }
.cw-sk-mapitem.is-sel { background: linear-gradient(90deg, rgba(255, 178, 63, 0.16), transparent); box-shadow: inset calc(3 * var(--px)) 0 0 var(--cn-amber); }
.cw-sk-mapitem.is-random .n { color: var(--cn-green); }
.cw-sk-mapitem.is-short { opacity: 0.45; }
.cw-sk-gen { flex: 1; min-height: 0; overflow-y: auto; padding: calc(4 * var(--px)) calc(14 * var(--px)) calc(12 * var(--px)); }
.cw-sk-genhead { padding: calc(4 * var(--px)) 0 calc(6 * var(--px)); }
.cw-sk-gen .cw-sk-opt-ctl .cw-dd { min-width: calc(170 * var(--px)); }

/* --------------------------------------------------------------- loading --- */
.cw-screen-loading { background: #05080a; }
.cw-load { position: absolute; inset: 0 0 calc(150 * var(--px)) 0; display: grid; grid-template-columns: 60% 40%; }
.cw-load-art { position: relative; overflow: hidden; }
.cw-load-art svg.cw-art, .cw-load-art .cw-mission-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-load-art .cw-mission-art { animation: cw-art-in 500ms ease-out both; }
/* Campaign plate: shown whole (it carries its own HUD text), framed like a monitor. */
.cw-load-art.has-art .cw-mission-art { left: calc(48 * var(--px)); right: auto; top: calc(56 * var(--px)); bottom: auto; width: calc(100% - 72 * var(--px)); height: auto; aspect-ratio: 16 / 9;
  border: 1px solid var(--cn-line-hi); box-shadow: 0 0 calc(40 * var(--px)) rgba(0, 0, 0, 0.85), 0 0 0 calc(4 * var(--px)) rgba(3, 5, 7, 0.9); }
.cw-load-art.has-art .cw-load-emblem, .cw-load-art.has-art .cw-load-art-fade, .cw-load-art.has-art > svg { display: none; }
.cw-load-art-fade { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #05080a 100%), linear-gradient(0deg, #05080a 0%, transparent 30%); }
.cw-load-emblem { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 1; filter: drop-shadow(0 0 calc(30 * var(--px)) rgba(0, 0, 0, 0.9)); animation: cw-emblem-in 900ms var(--ease-out) both; }
@keyframes cw-emblem-in { from { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
.cw-load-info { position: relative; padding: calc(70 * var(--px)) calc(48 * var(--px)) calc(20 * var(--px)) calc(20 * var(--px)); display: flex; flex-direction: column; gap: calc(10 * var(--px)); min-width: 0; }
.cw-load-kicker { font: 600 calc(13 * var(--px)) var(--f-mono); letter-spacing: 0.3em; color: var(--accent); }
.cw-load-title { font: 700 calc(40 * var(--px)) / 1 var(--f-din); letter-spacing: 0.04em; text-transform: uppercase; color: #eef2f5; }
.cw-load-loc { font: 600 calc(16 * var(--px)) var(--f-mono); letter-spacing: 0.14em; color: var(--cn-amber); text-transform: uppercase; }
.cw-load-quote { margin-top: calc(18 * var(--px)); font: italic 400 calc(20 * var(--px)) / 1.4 var(--f-ui); color: var(--cn-text-2); }
.cw-load-diff { margin-top: calc(10 * var(--px)); font: 600 calc(13 * var(--px)) var(--f-mono); letter-spacing: 0.2em; color: var(--cn-dim); }
.cw-load-preview { display: flex; justify-content: center; padding: calc(10 * var(--px)) 0; }
.cw-load-canvas { max-width: 100%; height: auto; filter: drop-shadow(0 0 calc(14 * var(--px)) rgba(0, 0, 0, 0.9)); }
.cw-load-roster { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.cw-load-player { display: grid; grid-template-columns: calc(16 * var(--px)) calc(28 * var(--px)) minmax(0, 1fr) auto auto calc(58 * var(--px)); align-items: center; gap: calc(10 * var(--px));
  padding: calc(7 * var(--px)) calc(10 * var(--px)); background: rgba(255, 255, 255, 0.03); border-left: calc(3 * var(--px)) solid transparent; }
.cw-load-player.is-human { border-left-color: var(--cn-amber); background: rgba(255, 178, 63, 0.07); }
.cw-load-player .n { font: 600 calc(15 * var(--px)) var(--f-cond); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-load-player .c { font-size: calc(12.5 * var(--px)); color: var(--cn-dim); white-space: nowrap; }
.cw-load-player .t { font: 600 calc(11 * var(--px)) var(--f-mono); color: var(--cn-amber); }
.cw-load-player .d { font: 700 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.14em; text-align: right; color: var(--cn-green); }
.cw-load-bottom { position: absolute; left: calc(48 * var(--px)); right: calc(48 * var(--px)); bottom: calc(38 * var(--px)); display: flex; flex-direction: column; gap: calc(12 * var(--px)); }
.cw-load-tipwrap { display: flex; align-items: baseline; gap: calc(14 * var(--px)); min-height: calc(26 * var(--px)); }
.cw-load-tiplabel { flex: none; font: 700 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.26em; color: var(--cn-green); }
.cw-load-tip { font: 400 calc(17 * var(--px)) / 1.4 var(--f-ui); color: var(--cn-text-2); opacity: 0; transition: opacity 400ms; }
.cw-load-tip.is-in { opacity: 1; }
.cw-load-row { display: flex; justify-content: space-between; align-items: baseline; }
.cw-load-stage { font: 700 calc(14 * var(--px)) var(--f-mono); letter-spacing: 0.26em; color: var(--accent); }
.cw-load-pct { font: 700 calc(14 * var(--px)) var(--f-mono); color: var(--cn-text); }
.cw-load-bar { height: calc(8 * var(--px)); background: #0b0f13; border: 1px solid var(--cn-line-hi); overflow: hidden; }
.cw-load-fill { height: 100%; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #000), var(--accent)); box-shadow: 0 0 calc(12 * var(--px)) var(--accent);
  background-size: calc(40 * var(--px)) 100%; }
.cw-load-err { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: calc(12 * var(--px)); z-index: 3;
  padding: calc(26 * var(--px)) calc(34 * var(--px)); background: #0b0f13; border: 1px solid var(--cn-red); box-shadow: 0 0 calc(40 * var(--px)) rgba(255, 74, 61, 0.2); max-width: calc(560 * var(--px)); text-align: center; }
.cw-screen-loading.is-failed .cw-load-err { display: flex; }
.cw-load-err-title { font: 700 calc(30 * var(--px)) var(--f-din); letter-spacing: 0.08em; color: var(--cn-red); }
.cw-load-err-msg { font-size: calc(15 * var(--px)); line-height: 1.5; color: var(--cn-text-2); }

/* ----------------------------------------------------------------- score --- */
.cw-score { position: absolute; inset: 0 0 calc(72 * var(--px)) 0; display: flex; flex-direction: column; padding: calc(26 * var(--px)) calc(36 * var(--px)) calc(16 * var(--px)); gap: calc(16 * var(--px)); }
.cw-score-head { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--px)); }
.cw-score-stamp { font: 700 calc(84 * var(--px)) / 0.95 var(--f-din); letter-spacing: 0.04em; color: var(--accent); padding: calc(10 * var(--px)) calc(26 * var(--px)) calc(2 * var(--px));
  border: calc(4 * var(--px)) solid currentColor; border-radius: calc(8 * var(--px)); text-shadow: 0 0 calc(24 * var(--px)) color-mix(in srgb, currentColor 50%, transparent);
  transform: rotate(-2deg) scale(1.3); opacity: 0; }
.cw-score-stamp.is-on { transform: rotate(-2deg) scale(1); opacity: 1; transition: transform 110ms cubic-bezier(0.3, 1.6, 0.6, 1), opacity 60ms; }
.cw-score-stamp.is-victory { color: #3dff8a; }
.cw-score-stamp.is-defeat { color: #e5412f; }
.cw-score-stamp.is-quit { color: #9aa3ad; }
.cw-score-sub { font: 600 calc(14 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: var(--cn-text-2); }
.cw-score-test { padding: calc(4 * var(--px)) calc(12 * var(--px)); border: 2px solid var(--cn-red); color: var(--cn-red); font: 700 calc(14 * var(--px)) var(--f-mono); letter-spacing: 0.2em; transform: rotate(-1deg); }
.cw-score-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) calc(430 * var(--px)); gap: calc(16 * var(--px)); }
.cw-score-left { min-height: 0; display: flex; flex-direction: column; gap: calc(16 * var(--px)); }
.cw-score-stats { flex: none; max-height: 62%; overflow: auto; }
.cw-score-table th { font-size: calc(11 * var(--px)); letter-spacing: 0.12em; white-space: normal; line-height: 1.2; vertical-align: bottom; }
.cw-score-table td { height: calc(52 * var(--px)); }
/* 7–8 commanders: compact rows so every player fits without scrolling (RA2 shows them all). */
.cw-score-stats:has(tbody tr:nth-child(7)) { max-height: 70%; }
.cw-score-table tbody:has(tr:nth-child(7)) td { height: calc(36 * var(--px)); }
.cw-score-table td.num { position: relative; font-size: calc(17 * var(--px)); }
.cw-score-table td.num .bar { position: absolute; right: calc(10 * var(--px)); bottom: calc(9 * var(--px)); height: calc(3 * var(--px)); width: 0; background: var(--pc); opacity: 0.85; max-width: calc(100% - 20 * var(--px)); box-shadow: 0 0 calc(6 * var(--px)) var(--pc); }
.cw-score-table td.num .v { position: relative; }
.cw-score-table td.who { display: flex; align-items: center; gap: calc(10 * var(--px)); }
.cw-score-table td.who .n { font: 600 calc(17 * var(--px)) var(--f-cond); letter-spacing: 0.05em; }
.cw-score-table td.who .c { font-size: calc(12.5 * var(--px)); color: var(--cn-dim); }
.cw-score-table tr.is-human td { background: rgba(255, 178, 63, 0.05); }
.cw-score-table .crown { color: #e8b923; display: inline-flex; }
.cw-flag-sp { display: inline-block; width: calc(24 * var(--px)); }
.cw-score-career { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.cw-score-career > *:not(.cw-panel-head) { margin-left: calc(18 * var(--px)); margin-right: calc(18 * var(--px)); }
.cw-score-summary { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cw-score-summary > .cw-panel-head, .cw-score-summary-body { opacity: 0.25; transition: opacity 300ms; }
.cw-score-summary.is-on > .cw-panel-head, .cw-score-summary.is-on .cw-score-summary-body { opacity: 1; }
.cw-score-debrief { flex: none; margin: 0 calc(16 * var(--px)) calc(16 * var(--px)); background: rgba(3, 5, 7, 0.55); }
.cw-score-debrief .cw-brief-portrait { width: calc(112 * var(--px)); height: calc(112 * var(--px)); }
.cw-score-debrief .cw-brief-name { margin: calc(6 * var(--px)) 0 calc(4 * var(--px)); font-size: calc(15 * var(--px)); }
.cw-score-debrief .cw-brief-text { font-size: calc(16 * var(--px)); }
.cw-score-summary-body { display: flex; align-items: center; gap: calc(34 * var(--px)); padding: calc(18 * var(--px)) calc(24 * var(--px)); }
.cw-score-big { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.cw-score-big span { font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.2em; color: var(--cn-dim); }
.cw-score-big b { font: 700 calc(40 * var(--px)) / 1 var(--f-din); letter-spacing: 0.04em; color: #eef2f5; }
.cw-score-summary .cw-score-rating { margin: 0 0 0 auto; opacity: 0; transform: rotate(-3deg) scale(1.3); }
.cw-score-summary.is-on .cw-score-rating { opacity: 1; transform: rotate(-3deg) scale(1); transition: all 140ms cubic-bezier(0.3, 1.6, 0.6, 1) 200ms; }
.cw-score-kv { display: flex; justify-content: space-between; padding: calc(4 * var(--px)) 0; font: 600 calc(13 * var(--px)) var(--f-mono); letter-spacing: 0.12em; color: var(--cn-dim); }
.cw-score-kv b { color: var(--cn-text); font-size: calc(15 * var(--px)); }
.cw-score-rating { text-align: center; padding: calc(10 * var(--px)) calc(16 * var(--px)) calc(6 * var(--px)); border: calc(3 * var(--px)) solid var(--cn-amber); border-radius: calc(4 * var(--px));
  font: 700 calc(28 * var(--px)) / 1 var(--f-din); letter-spacing: 0.06em; color: var(--cn-amber); text-shadow: 0 0 calc(12 * var(--px)) rgba(255, 178, 63, 0.5); max-width: calc(300 * var(--px)); }
.cw-score-rankrow { display: flex; align-items: center; gap: calc(16 * var(--px)); margin-top: calc(16 * var(--px)); margin-bottom: calc(12 * var(--px)); }
.cw-score-insignia { width: calc(92 * var(--px)); height: calc(92 * var(--px)); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255, 178, 63, 0.14), transparent 70%); transition: transform 200ms; }
.cw-score-insignia svg { width: 100%; height: 100%; }
.cw-score-insignia.is-flip { animation: cw-flip 400ms var(--ease-io); }
@keyframes cw-flip { 50% { transform: rotateY(90deg) scale(1.1); } }
.cw-score-cmdr { font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.2em; }
.cw-score-rank { font: 700 calc(26 * var(--px)) var(--f-din); letter-spacing: 0.06em; }
.cw-score-xp { font: 700 calc(20 * var(--px)) var(--f-mono); color: var(--cn-amber); }
.cw-score-promo { min-height: calc(28 * var(--px)); margin-top: calc(10 * var(--px)); font: 700 calc(20 * var(--px)) var(--f-din); letter-spacing: 0.08em; color: var(--cn-green); opacity: 0; transform: scale(1.2); }
.cw-score-promo.is-on { opacity: 1; transform: none; transition: all 180ms cubic-bezier(0.3, 1.6, 0.6, 1); }
.cw-score-medals { display: flex; flex-direction: column; gap: calc(8 * var(--px)); padding-bottom: calc(14 * var(--px)); }
.cw-score-medal { display: flex; align-items: center; gap: calc(12 * var(--px)); animation: cw-slidein 400ms var(--ease-out) both; }
.cw-score-medal b { display: block; font: 700 calc(16 * var(--px)) var(--f-cond); letter-spacing: 0.08em; color: var(--cn-amber-2); }
.cw-score-medal span { font-size: calc(12.5 * var(--px)); color: var(--cn-dim); }
@keyframes cw-slidein { from { opacity: 0; transform: translateX(calc(30 * var(--px))); } }
.cw-score-none { font-size: calc(13 * var(--px)); }
/* ------------------------------------------------------ campaign complete --- */
.cw-cc { position: absolute; left: 50%; top: calc(56 * var(--px)); bottom: calc(84 * var(--px)); transform: translateX(-50%); width: min(calc(920 * var(--px)), 94vw);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--px)); text-align: center; }
.cw-cc.side-allies { --acc: #6fa8ff; } .cw-cc.side-soviets { --acc: #ff6a55; } .cw-cc.side-pale { --acc: #c9a8ff; }
.cw-cc > * { opacity: 0; transform: translateY(calc(10 * var(--px))); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.cw-cc.is-in > * { opacity: 1; transform: none; }
.cw-cc.is-in > :nth-child(2) { transition-delay: 120ms; } .cw-cc.is-in > :nth-child(3) { transition-delay: 200ms; }
.cw-cc.is-in > :nth-child(5), .cw-cc.is-in > :nth-child(6) { transition-delay: 900ms; } .cw-cc.is-in > :nth-child(7) { transition-delay: 1150ms; }
.cw-cc-emblem { position: relative; width: calc(188 * var(--px)); height: calc(188 * var(--px)); margin-bottom: calc(6 * var(--px)); }
.cw-cc-emblem svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 calc(24 * var(--px)) color-mix(in srgb, var(--acc) 55%, transparent)); }
.cw-cc-rays { position: absolute; inset: calc(-70 * var(--px)); border-radius: 50%; opacity: 0.55;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--acc) 26%, transparent) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: cw-spin 40s linear infinite; }
@keyframes cw-spin { to { transform: rotate(360deg); } }
.cw-cc-kicker { font: 600 calc(14 * var(--px)) var(--f-mono); letter-spacing: 0.3em; color: var(--acc); }
.cw-cc-name { font: 700 calc(30 * var(--px)) / 1.05 var(--f-din); letter-spacing: 0.06em; color: var(--cn-text); text-transform: uppercase; }
.cw-cc.side-allies .cw-cc-name { font-family: var(--f-cond); font-weight: 600; letter-spacing: 0.1em; }
.cw-cc-title { margin: calc(4 * var(--px)) 0 calc(2 * var(--px)); padding: calc(2 * var(--px)) calc(22 * var(--px)); font: 700 calc(76 * var(--px)) / 1 var(--f-din); letter-spacing: 0.06em; color: #f1f5f8;
  text-shadow: 0 0 calc(28 * var(--px)) color-mix(in srgb, var(--acc) 50%, transparent), 0 calc(3 * var(--px)) 0 rgba(0, 0, 0, 0.6); }
.cw-cc.is-in .cw-cc-title { opacity: 0; transform: scale(1.25); transition: none; }
.cw-cc.is-in .cw-cc-title.is-on { opacity: 1; transform: none; transition: opacity 120ms ease-out, transform 160ms cubic-bezier(0.3, 1.5, 0.6, 1); }
.cw-cc-prog { display: flex; align-items: center; gap: calc(12 * var(--px)); font: 600 calc(13 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: var(--cn-dim); }
.cw-cc-prog b { color: var(--cn-text); font-size: calc(16 * var(--px)); }
.cw-cc-best { padding: calc(3 * var(--px)) calc(8 * var(--px)); font: 700 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: #111; background: var(--rib); }
.cw-cc-dots { justify-content: center; margin-bottom: calc(10 * var(--px)); }
.cw-cc-tx { display: flex; gap: calc(16 * var(--px)); align-items: stretch; width: 100%; padding: calc(14 * var(--px)); text-align: left; }
.cw-cc-portrait { width: calc(112 * var(--px)); height: calc(112 * var(--px)); flex: none; border: 1px solid var(--cn-line-hi); background: #05080a; overflow: hidden; }
.cw-cc-portrait > * { width: 100%; height: 100%; display: block; object-fit: cover; }
.cw-cc-tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(8 * var(--px)); }
.cw-cc-plate { font: 700 calc(16 * var(--px)) var(--f-cond); letter-spacing: 0.12em; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cw-cc-plate span { color: var(--cn-dim); font-weight: 500; }
.cw-cc-quote { min-height: calc(54 * var(--px)); font: italic 400 calc(20 * var(--px)) / 1.45 var(--f-ui); color: #eef2f5; text-shadow: 0 1px 2px #000; }

/* --------------------------------------------------------------- options --- */
.cw-opt { position: absolute; left: 50%; top: calc(92 * var(--px)); bottom: calc(92 * var(--px)); transform: translateX(-50%); width: min(calc(1040 * var(--px)), 94vw); display: flex; flex-direction: column; }
.cw-opt .cw-tabs { padding: 0 calc(14 * var(--px)); }
.cw-opt-body { flex: 1; min-height: 0; overflow-y: auto; padding: calc(4 * var(--px)) calc(26 * var(--px)) calc(20 * var(--px)); }
.cw-opt .cw-slider { width: min(calc(420 * var(--px)), 100%); }
/* Fixed readout width: every track in Options is the same length, and doesn't resize while dragging ('3 Moderate' vs '4 Normal'). */
.cw-opt .cw-range-val { min-width: calc(110 * var(--px)); }
.cw-scheme-hint { font: 400 calc(12.5 * var(--px)) var(--f-ui); color: var(--cn-dim); }
.cw-juke { display: flex; flex-direction: column; border: 1px solid var(--cn-line); background: rgba(3, 5, 7, 0.4); }
.cw-juke-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: calc(12 * var(--px)); padding: calc(6 * var(--px)) calc(10 * var(--px)); border-bottom: 1px solid rgba(38, 49, 58, 0.5); }
.cw-juke-row .n { font: 600 calc(15 * var(--px)) var(--f-cond); letter-spacing: 0.06em; text-transform: uppercase; }
.cw-juke-row .src { font: 600 calc(10.5 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: var(--cn-faint); }
.cw-hk-note { margin: calc(14 * var(--px)) 0 calc(4 * var(--px)); padding: calc(10 * var(--px)) calc(12 * var(--px)); border-left: calc(3 * var(--px)) solid var(--cn-amber); background: rgba(255, 178, 63, 0.06); font-size: calc(13 * var(--px)); line-height: 1.45; color: var(--cn-text-2); }
.cw-hk-row { display: grid; grid-template-columns: 1fr calc(220 * var(--px)) calc(110 * var(--px)); align-items: center; gap: calc(12 * var(--px)); min-height: calc(38 * var(--px)); border-bottom: 1px solid rgba(38, 49, 58, 0.45); }
.cw-hk-row .n { font-size: calc(14.5 * var(--px)); color: var(--cn-text); }
.cw-hk-row .n small { display: block; font-size: calc(11.5 * var(--px)); color: var(--cn-faint); }
.cw-hk-key { justify-self: start; padding: calc(4 * var(--px)) calc(10 * var(--px)); background: #0b0f13; border: 1px solid var(--cn-line-hi); border-bottom-width: calc(3 * var(--px)); font: 600 calc(13 * var(--px)) var(--f-mono); color: var(--cn-text); white-space: nowrap; }
.cw-hk-key.is-custom { color: var(--cn-amber); border-color: var(--cn-amber-dim); }
.cw-hk-key.is-listening { color: #0b0f13; background: var(--cn-amber); animation: cw-pulse 0.8s ease-in-out infinite; }
.cw-hk-fixed { justify-self: start; font: 600 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: var(--cn-faint); }

/* ----------------------------------------------------------- load / save --- */
.cw-save { position: absolute; left: 50%; top: calc(92 * var(--px)); bottom: calc(92 * var(--px)); transform: translateX(-50%); width: min(calc(1080 * var(--px)), 94vw); display: flex; flex-direction: column; }
.cw-save-list { flex: 1; min-height: 0; overflow-y: auto; padding: calc(8 * var(--px)); display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.cw-save-row { display: grid; grid-template-columns: calc(110 * var(--px)) calc(160 * var(--px)) 1fr auto auto; align-items: center; gap: calc(16 * var(--px)); min-height: calc(96 * var(--px));
  padding: calc(3 * var(--px)) calc(12 * var(--px)); background: rgba(255, 255, 255, 0.025); border: 1px solid transparent; cursor: pointer; }
.cw-save-row:hover { background: rgba(255, 255, 255, 0.05); }
.cw-save-row.is-sel { border-color: var(--cn-amber); background: rgba(255, 178, 63, 0.07); }
.cw-save-row:focus-visible { outline: none; border-color: var(--cn-amber); }
.cw-save-row.is-empty { opacity: 0.55; }
.cw-save-row.is-bad { opacity: 0.6; filter: grayscale(0.8); }
.cw-save-slot { font: 700 calc(13 * var(--px)) var(--f-mono); letter-spacing: 0.14em; color: var(--cn-amber); }
.cw-save-thumb { width: calc(160 * var(--px)); height: calc(90 * var(--px)); background: #070a0d; border: 1px solid var(--cn-line-hi); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cw-save-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cw-save-thumb .empty { font: 600 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.2em; color: var(--cn-faint); }
.cw-save-name { font: 600 calc(18 * var(--px)) var(--f-cond); letter-spacing: 0.05em; }
.cw-save-meta { margin-top: calc(6 * var(--px)); display: flex; align-items: center; gap: calc(8 * var(--px)); font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.1em; color: var(--cn-dim); }
.cw-save-times { text-align: right; font-family: var(--f-mono); }
.cw-save-gt { font-size: calc(17 * var(--px)); color: var(--cn-text); }
.cw-save-date { font-size: calc(12 * var(--px)); color: var(--cn-dim); margin-top: calc(4 * var(--px)); }
.cw-save-del { width: calc(34 * var(--px)); height: calc(34 * var(--px)); display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--cn-line-hi); color: var(--cn-dim); }
.cw-save-del:hover { color: var(--cn-red); border-color: var(--cn-red); }
.cw-save-emptynote { margin: calc(16 * var(--px)); padding: calc(14 * var(--px)) calc(16 * var(--px)); border-left: calc(3 * var(--px)) solid var(--cn-amber); background: rgba(255, 178, 63, 0.06); font-size: calc(14.5 * var(--px)); color: var(--cn-text-2); }
.cw-save-namebar { display: flex; align-items: center; gap: calc(14 * var(--px)); padding: calc(12 * var(--px)) calc(16 * var(--px)); border-bottom: 1px solid var(--cn-line); }
.cw-save-input { flex: 1; font-family: var(--f-ui); font-size: calc(15 * var(--px)); }
.cw-save-row.is-readonly { cursor: default; }

/* --------------------------------------------------------------- profile --- */
.cw-prof { position: absolute; left: 50%; top: calc(92 * var(--px)); bottom: calc(46 * var(--px)); transform: translateX(-50%); width: min(calc(1180 * var(--px)), 95vw); display: flex; flex-direction: column; gap: calc(14 * var(--px)); }
.cw-prof-card { display: flex; align-items: center; gap: calc(26 * var(--px)); padding: calc(18 * var(--px)) calc(26 * var(--px)); }
.cw-prof-insignia { width: calc(110 * var(--px)); height: calc(110 * var(--px)); padding: 0; border: 1px solid var(--cn-line-hi); background: radial-gradient(circle, rgba(255, 178, 63, 0.16), #070a0d 72%); display: flex; align-items: center; justify-content: center; }
.cw-prof-insignia svg { width: 88%; height: 88%; }
.cw-prof-insignia.is-spin svg { animation: cw-spin 1s var(--ease-io); }
@keyframes cw-spin { to { transform: rotate(720deg); } }
.cw-prof-id { flex: 1; min-width: 0; }
.cw-prof-name { font: 600 calc(13 * var(--px)) var(--f-mono); letter-spacing: 0.24em; color: var(--cn-dim); }
.cw-prof-rank { margin: calc(4 * var(--px)) 0 calc(10 * var(--px)); font: 700 calc(36 * var(--px)) / 1 var(--f-din); letter-spacing: 0.05em; }
.cw-prof-dates { display: flex; flex-direction: column; gap: calc(8 * var(--px)); min-width: calc(250 * var(--px)); }
.cw-prof-dates div { display: flex; justify-content: space-between; gap: calc(16 * var(--px)); font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.12em; color: var(--cn-dim); }
.cw-prof-dates b { color: var(--cn-text); }
.cw-prof-tabs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cw-prof-tabs .cw-tabs { padding: 0 calc(14 * var(--px)); }
.cw-prof-body { flex: 1; min-height: 0; overflow-y: auto; padding: calc(8 * var(--px)) calc(24 * var(--px)) calc(18 * var(--px)); }
.cw-prof-record { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(30 * var(--px)); }
.cw-side-split { display: flex; height: calc(12 * var(--px)); background: #0b0f13; border: 1px solid var(--cn-line-hi); overflow: hidden; margin-top: calc(6 * var(--px)); }
.cw-side-split i { display: block; height: 100%; }
.cw-side-split .s-allies, .cw-side-legend .s-allies::before { background: #3f7fe6; }
.cw-side-split .s-soviets, .cw-side-legend .s-soviets::before { background: #d9312b; }
.cw-side-split .s-pale, .cw-side-legend .s-pale::before { background: #8a4bd1; }
.cw-side-split .s-none { width: 100%; }
.cw-side-legend { display: flex; gap: calc(14 * var(--px)); margin-top: calc(8 * var(--px)); font: 500 calc(12 * var(--px)) var(--f-mono); color: var(--cn-dim); }
.cw-side-legend span::before { content: ""; display: inline-block; width: calc(9 * var(--px)); height: calc(9 * var(--px)); margin-right: calc(6 * var(--px)); }
.cw-prof-medals { display: grid; grid-template-columns: minmax(0, 1fr) calc(300 * var(--px)); gap: calc(24 * var(--px)); }
.cw-medal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(8 * var(--px)); }
.cw-medal-cell { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--px)); padding: calc(8 * var(--px)) calc(4 * var(--px)); background: rgba(255, 255, 255, 0.025); border: 1px solid transparent; color: var(--cn-text); }
.cw-medal-cell span { font: 600 calc(12 * var(--px)) / 1.2 var(--f-cond); letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.cw-medal-cell.is-locked span { color: var(--cn-faint); }
.cw-medal-cell:hover, .cw-medal-cell.is-sel { border-color: var(--cn-amber-dim); background: rgba(255, 178, 63, 0.06); }
.cw-medal-detail { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--px)); padding: calc(18 * var(--px)); border: 1px solid var(--cn-line); background: rgba(3, 5, 7, 0.4); text-align: center; align-self: start; }
.cw-medal-dname { font: 700 calc(22 * var(--px)) var(--f-din); letter-spacing: 0.06em; color: var(--cn-amber-2); }
.cw-medal-ddesc { font-size: calc(14 * var(--px)); line-height: 1.45; color: var(--cn-text-2); margin-top: calc(6 * var(--px)); }
.cw-medal-ddate { margin-top: calc(10 * var(--px)); font: 600 calc(11.5 * var(--px)) var(--f-mono); letter-spacing: 0.16em; color: var(--cn-dim); }
.cw-prof-camps { display: flex; flex-direction: column; gap: calc(10 * var(--px)); padding-top: calc(10 * var(--px)); }
.cw-prof-camp { display: flex; align-items: center; gap: calc(16 * var(--px)); padding: calc(10 * var(--px)) calc(12 * var(--px)); background: rgba(255, 255, 255, 0.025); }
.cw-prof-camp-main { flex: 1; min-width: 0; }
.cw-prof-camp-title { font: 700 calc(18 * var(--px)) var(--f-din); letter-spacing: 0.06em; margin-bottom: calc(8 * var(--px)); }
.cw-prof-dots i { width: calc(14 * var(--px)); height: calc(14 * var(--px)); cursor: help; }
.cw-prof-camp-n { font: 600 calc(16 * var(--px)) var(--f-mono); color: var(--cn-amber); }

/* --------------------------------------------------------------- credits --- */
/* The roll fades out fully above the hint strip, so the two never overlap. */
.cw-credits { position: absolute; inset: 0 0 calc(58 * var(--px)) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 82%, transparent 100%); }
.cw-credits-roll { position: absolute; left: 50%; top: 0; width: min(calc(900 * var(--px)), 92vw); display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform;
  text-shadow: 0 2px 6px #000, 0 0 20px rgba(0, 0, 0, 0.8); }
.cw-credits-logo { margin-bottom: calc(10 * var(--px)); }
.cw-cr-sub { font: 600 calc(22 * var(--px)) var(--f-cond); letter-spacing: 0.3em; color: var(--cn-amber); text-transform: uppercase; }
.cw-cr-gap { height: calc(70 * var(--px)); }
.cw-cr-role { display: flex; align-items: baseline; gap: calc(12 * var(--px)); width: 100%; margin: calc(12 * var(--px)) 0; }
.cw-cr-role .a { font: 600 calc(15 * var(--px)) var(--f-mono); letter-spacing: 0.12em; color: var(--cn-amber); text-align: left; white-space: nowrap; }
.cw-cr-role .dots { flex: 1; border-bottom: 2px dotted rgba(255, 178, 63, 0.3); transform: translateY(calc(-4 * var(--px))); }
.cw-cr-role .b { font: 500 calc(18 * var(--px)) var(--f-ui); color: #eef2f5; text-align: right; max-width: 55%; }
.cw-cr-head { margin: calc(8 * var(--px)) 0 calc(16 * var(--px)); font: 700 calc(24 * var(--px)) var(--f-din); letter-spacing: 0.3em; color: var(--cn-amber); }
.cw-cr-line { margin: calc(7 * var(--px)) 0; font: 400 calc(19 * var(--px)) / 1.4 var(--f-ui); color: #e6edf2; }
.cw-cr-small { margin: calc(4 * var(--px)) 0; font: 500 calc(13 * var(--px)) / 1.5 var(--f-mono); color: var(--cn-dim); letter-spacing: 0.04em; }
.cw-cr-license { width: 100%; margin: 0; padding: calc(18 * var(--px)); text-align: left; white-space: pre-wrap; font: 400 calc(12.5 * var(--px)) / 1.55 var(--f-mono); color: var(--cn-text-2); background: rgba(3, 5, 7, 0.6); border: 1px solid var(--cn-line); }
.cw-cr-end { margin: calc(80 * var(--px)) 0 calc(40 * var(--px)); font: 600 calc(22 * var(--px)) var(--f-cond); letter-spacing: 0.2em; color: var(--cn-amber); text-transform: uppercase; }
.cw-credits-hint { position: absolute; left: 50%; bottom: calc(16 * var(--px)); transform: translateX(-50%); padding: calc(6 * var(--px)) calc(14 * var(--px)); background: rgba(3, 5, 7, 0.8); border: 1px solid var(--cn-line);
  font: 600 calc(11.5 * var(--px)) var(--f-mono); letter-spacing: 0.2em; color: var(--cn-dim); white-space: nowrap; z-index: 2; }
.cw-credits-back { position: absolute; left: calc(36 * var(--px)); top: calc(28 * var(--px)); }

/* ------------------------------------------------------------ test menu --- */
.cw-tm { position: absolute; left: calc(36 * var(--px)); top: calc(40 * var(--px)); width: calc(440 * var(--px)); height: min(calc(640 * var(--px)), calc(100% - 80 * var(--px)));
  display: flex; flex-direction: column; filter: drop-shadow(0 calc(20 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, 0.7)); }
.cw-tm-tab { align-self: flex-start; padding: calc(6 * var(--px)) calc(18 * var(--px)) calc(4 * var(--px)); background: #d9c08a; color: #3a2a10; font: 700 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.18em;
  clip-path: polygon(0 0, calc(100% - 14 * var(--px)) 0, 100% 100%, 0 100%); }
.cw-tm-head { height: calc(56 * var(--px)); display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #e4cd96, #cdb47a); border-bottom: 2px solid #9c8450; }
.cw-tm-stamp { padding: calc(4 * var(--px)) calc(12 * var(--px)) calc(1 * var(--px)); border: calc(3 * var(--px)) solid #c0261c; border-radius: calc(4 * var(--px)); color: #c0261c; font: 700 calc(22 * var(--px)) var(--f-din); letter-spacing: 0.08em; transform: rotate(-3deg); opacity: 0.9;
  -webkit-mask-image: repeating-radial-gradient(circle at 40% 30%, #000 0 2px, rgba(0, 0, 0, 0.8) 2px 3px); mask-image: repeating-radial-gradient(circle at 40% 30%, #000 0 2px, rgba(0, 0, 0, 0.8) 2px 3px); }
.cw-tm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(10 * var(--px)); padding: calc(16 * var(--px)); background: #101418; border: 1px solid #2c3339; border-top: 0; }
.cw-tm-note { font: 500 calc(12 * var(--px)) / 1.5 var(--f-mono); color: var(--cn-dim); }
.cw-tm-list { display: flex; flex-direction: column; gap: calc(6 * var(--px)); flex: 1; }
.cw-tm-btn { width: 100%; font-family: var(--f-mono); font-size: calc(14 * var(--px)); letter-spacing: 0.12em; }
.cw-tm-btn.is-on { background: var(--cn-btn-hi); }
.cw-tm-btn.is-on::before { width: calc(6 * var(--px)); background: var(--cn-green); }
.cw-tm-stage { position: absolute; left: calc(500 * var(--px)); right: calc(36 * var(--px)); top: calc(40 * var(--px)); bottom: calc(40 * var(--px)); }
.cw-tm-panel { height: 100%; display: flex; flex-direction: column; }
.cw-tm-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(12 * var(--px)); }
.cw-tm-missions, .cw-tm-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6 * var(--px)); }
.cw-tm-mission { justify-content: flex-start; }
.cw-tm-lines { display: flex; flex-direction: column; }
.cw-tm-line { display: flex; align-items: center; gap: calc(10 * var(--px)); padding: calc(4 * var(--px)) 0; border-bottom: 1px solid rgba(38, 49, 58, 0.5); }
.cw-tm-line .id { font: 600 calc(12.5 * var(--px)) var(--f-mono); color: var(--cn-amber); min-width: calc(220 * var(--px)); }
.cw-tm-line .t { font-size: calc(13 * var(--px)); color: var(--cn-text-2); }
.cw-tm-line .kinds { display: flex; gap: calc(4 * var(--px)); flex-wrap: wrap; }

/* Main-menu commander card (bottom-right). */
.cw-main-card { position: absolute; display: flex; align-items: center; gap: calc(16 * var(--px)); padding: calc(14 * var(--px)) calc(18 * var(--px));
  background: rgba(5, 8, 10, 0.82); border: 1px solid var(--cn-line-hi); color: var(--cn-text); text-align: left;
  box-shadow: 0 calc(14 * var(--px)) calc(34 * var(--px)) rgba(0, 0, 0, 0.5); transition: border-color 80ms, background 80ms; }
.cw-main-card:hover { border-color: var(--cn-amber-dim); background: rgba(12, 16, 20, 0.9); }
.cw-main-card-ins { flex: none; width: calc(78 * var(--px)); height: calc(78 * var(--px)); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255, 178, 63, 0.14), transparent 70%); }
.cw-main-card-ins svg { width: 100%; height: 100%; }
.cw-main-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.cw-main-card-k { font: 600 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.22em; color: var(--cn-dim); }
.cw-main-card-rank { font: 700 calc(24 * var(--px)) / 1 var(--f-din); letter-spacing: 0.06em; }
.cw-main-card-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(4 * var(--px)) calc(10 * var(--px)); font: 600 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.06em; color: var(--cn-dim); white-space: nowrap; }
.cw-screen-main.from-boot .cw-main-card { animation: cw-fadein 500ms 300ms ease both; }
.cw-save-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--px)); padding: calc(60 * var(--px)) calc(20 * var(--px)); text-align: center; }
.cw-save-empty-icon { width: calc(64 * var(--px)); height: calc(64 * var(--px)); color: var(--cn-amber); opacity: 0.6; }
.cw-save-empty-icon svg { width: 100%; height: 100%; }
.cw-save-empty-t { font: 700 calc(26 * var(--px)) var(--f-din); letter-spacing: 0.12em; color: var(--cn-text); }
.cw-save-empty-s { max-width: calc(520 * var(--px)); font-size: calc(15 * var(--px)); line-height: 1.5; color: var(--cn-dim); }
.cw-brief-head { gap: calc(18 * var(--px)); }
.cw-brief-titles { display: flex; flex-direction: column; gap: calc(4 * var(--px)); min-width: 0; }
.cw-brief-kick { font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.24em; color: var(--cn-amber); white-space: nowrap; }
.cw-brief-title { font: 700 calc(30 * var(--px)) / 1 var(--f-din); letter-spacing: 0.06em; color: #eef2f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-brief-where { margin-left: auto; text-align: right; font: 500 calc(13 * var(--px)) / 1.5 var(--f-mono); letter-spacing: 0.08em; color: var(--cn-text-2); white-space: nowrap; }
.cw-brief-where .cw-dim { font-size: calc(11 * var(--px)); letter-spacing: 0.14em; }
.cw-brief-head .cw-brief-secret { margin-left: calc(10 * var(--px)); padding-left: calc(18 * var(--px)); border-left: 1px solid var(--cn-line-hi); }
.cw-brief-info { padding: calc(10 * var(--px)) calc(14 * var(--px)) calc(12 * var(--px)); border-top: 1px solid var(--cn-line); display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.cw-brief-info div { display: flex; justify-content: space-between; font: 600 calc(12 * var(--px)) var(--f-mono); letter-spacing: 0.14em; color: var(--cn-dim); }
.cw-brief-info b { color: var(--cn-text); }
.cw-save-host { position: absolute; left: 50%; top: calc(56 * var(--px)); bottom: calc(56 * var(--px)); transform: translateX(-50%); width: min(calc(1080 * var(--px)), 94vw); display: flex; }
.cw-save-host > * { flex: 1; min-height: 0; }
.cw-save-host.is-ingame { position: relative; left: auto; top: auto; bottom: auto; transform: none; width: 100%; height: 100%; }
.cw-vet-ribbon { display: flex; align-items: center; gap: calc(10 * var(--px)); margin-top: calc(6 * var(--px)); font: 600 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.24em; color: var(--cn-text-2); }
.cw-vet-ribbon .cw-flag { animation: cw-wave 2.4s ease-in-out infinite; transform-origin: left center; }
@keyframes cw-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-4deg) scaleX(0.96); } }
/* Frontend screens mounted inside the in-game menu (Options). */
.cw-ingame-sub { position: absolute; inset: 0; background: rgba(3, 5, 7, 0.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* Skirmish: country brief of the selected player row (players panel head). */
.cw-sk-brief {
  flex: 1 1 auto; min-width: 0; margin-left: calc(18 * var(--px));
  display: flex; align-items: center; gap: calc(8 * var(--px));
  overflow: hidden; white-space: nowrap;
  font: 500 calc(13 * var(--px)) / 1 var(--f-ui); letter-spacing: 0.02em; text-transform: none; color: var(--cn-text);
}
.cw-sk-brief:empty { display: none; }
.cw-sk-brief .cw-flag { flex: none; }
.cw-sk-brief-who {
  flex: none; padding: calc(2 * var(--px)) calc(5 * var(--px)); border: 1px solid var(--cn-line);
  font: 600 calc(11 * var(--px)) / 1 var(--f-mono); letter-spacing: 0.08em; color: var(--cn-dim);
}
.cw-sk-brief b { flex: none; font: 600 calc(14 * var(--px)) / 1 var(--f-cond); letter-spacing: 0.1em; color: #fff; }
.cw-sk-brief-sp {
  flex: none; font: 600 calc(12 * var(--px)) / 1 var(--f-cond); letter-spacing: 0.12em;
  color: var(--sk-accent, var(--accent));
}
.cw-sk-brief-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--cn-dim); }

/* Score: Caleb's other numbers under the summary (fade in with it). */
.cw-score-details {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 calc(22 * var(--px));
  margin: 0 calc(24 * var(--px)) calc(10 * var(--px)); padding-top: calc(10 * var(--px));
  border-top: 1px solid var(--cn-line); opacity: 0.25; transition: opacity 300ms;
}
.cw-score-summary.is-on .cw-score-details { opacity: 1; }
.cw-score-detail {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--px));
  padding: calc(7 * var(--px)) 0; border-bottom: 1px solid rgba(38, 49, 58, 0.45);
}
.cw-score-detail span { font: 600 calc(11 * var(--px)) var(--f-mono); letter-spacing: 0.14em; color: var(--cn-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-score-detail b { font: 600 calc(17 * var(--px)) var(--f-cond); color: var(--cn-text); letter-spacing: 0.04em; }
.cw-sk-players .cw-sk-count { flex: none; white-space: nowrap; }