/* ===========================================================================
   CRM Wars identity and interface: black, white and one red, in Futura.
   Kept separate from the city and simulation. Rules of the system
     - black ground, white type, grey for support, red only to act or warn
     - Futura Bold for figures and headings, bold capitals for small labels
       and commands, Futura regular for reading text; the type kept small
     - slightly rounded corners: 10px for panels, 6px for cards and buttons,
       4px for chips; people's faces in circles
     - things sit 8px apart; no shadows, glows or gradients
   The rules further down that still name the older colours (--cw-blue, --ink
   and the rest) get the palette through the tokens re-pointed here.
   =========================================================================== */
:root{
  --v2-black:#0a0a0a; --v2-panel:#141414; --v2-raised:#1f1f1f; --v2-hover:#292929; --v2-line:#2c2c2c;
  --v2-red:#d9261c; --v2-red-hi:#ef3a2d; --v2-white:#fff; --v2-grey:#a6a6a6; --v2-dim:#6e6e6e;
  --v2-gain:#35d07f; --v2-warn:#f2b01e;
  --v2-f:Futura,"Futura PT","CW Jost",Jost,"Century Gothic",sans-serif;
  /* the older layers' tokens, re-pointed */
  --font-d:var(--v2-f); --font-u:var(--v2-f);
  --ink:#fff; --ink2:#a6a6a6; --ink3:#a6a6a6; --ink4:#6e6e6e; --text:#fff;
  --glass:#0a0a0a; --glass-hi:#0a0a0a; --hair:#2c2c2c; --line:#2c2c2c;
  --ok:#35d07f; --warn:#f2b01e; --bad:#ef3a2d; --coral-ink:#ef3a2d; --azure-ink:#fff; --violet-ink:#fff;
  --cw-ink:#fff; --cw-blue:#d9261c; --cw-paper:#141414; --cw-muted:#a6a6a6; --cw-line:#2c2c2c; --cw-lime:#fff;
  --sw-ink:#fff; --sw-paper:#0a0a0a; --sw-grey:#a6a6a6; --sw-rule:#2c2c2c; --sw-font:var(--v2-f);
  --r-lg:10px; --r-md:6px; --r-sm:4px; --sh1:none; --sh2:none;
}
button,input,select { -webkit-tap-highlight-color:transparent; }
.cw-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* A light title treatment leaves the live city as the key art. */
/* Behind the city: the paper it stands on, so any fade of the picture fades to paper, never to black */
body.city-3d {background:#f2f0ea}
#titleScreen:not(.setup)::after {background:linear-gradient(90deg,#f5f7fc 0%,#f5f7fcf5 22%,#f5f7fcb8 38%,#f5f7fc00 66%)}
#titleScreen:not(.setup) .logo-container {width:min(440px,40vw);max-width:none;align-self:flex-start;margin:0;padding:0;background:none;box-shadow:none;border:0;backdrop-filter:none;animation:cw-enter .5s ease-out both}
.cw-title-top {position:absolute;top:28px;left:6vw;right:4vw;display:flex;align-items:center;gap:12px;z-index:3;color:var(--cw-ink);font-size:12px;font-weight:600}
.cw-title-top img {width:36px;height:36px}
#titleScreen h1.cw-wordmark {font-size:0}
.cw-wordmark img {display:block}
#titleScreen:not(.setup) .subtitle {margin:28px 0 12px;color:var(--cw-ink);font:600 clamp(21px,2vw,28px)/1.2 var(--font-d);letter-spacing:-.025em;max-width:440px;text-transform:none}
.cw-intro {font-size:13px;line-height:1.75;color:var(--cw-muted);max-width:330px;margin-bottom:25px}
#mainMenu {flex-direction:column;align-items:stretch;gap:9px!important;margin-top:0!important;max-width:330px}
#titleScreen:not(.setup) #mainMenu {display:flex!important}
.menu-btn {padding:15px 20px;transition:background .15s,box-shadow .15s}
.menu-btn:hover {transform:none}
.menu-btn.go,#mainMenu .go {background:var(--cw-blue);border:1px solid var(--cw-blue);box-shadow:0 4px 10px #d9261c20}
.menu-btn.go:hover,#mainMenu .go:hover {background:var(--v2-red-hi);border-color:var(--v2-red-hi)}
#mainMenu .menu-btn {display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left}
#mainMenu .vs {background:#ffffff9e;color:var(--cw-ink);border:1px solid #bcc9df;box-shadow:none}
#mainMenu .vs:hover {background:#fff;border-color:var(--cw-blue)}
.cw-help-button {align-self:flex-start;background:none;border:0;color:var(--cw-muted);font:500 12px var(--font-u);padding:10px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* Pre-match briefing. */
#titleScreen.setup .cw-title-top,#titleScreen.setup .cw-intro {display:none}
#setupForm {scrollbar-color:#bdcbe4 transparent}
.setup-opt.active {border-color:#9cadf2!important}
.setup-opt .opt-sub {white-space:normal;overflow:visible;text-overflow:clip}
#aiSettings:not([style*="display: none"]):not([style*="display:none"]) {gap:17px 22px!important}
#aiDiffLabel {background:var(--cw-ink)!important;box-shadow:none!important;font:600 11px var(--font-u)!important;border-radius:5px!important}
.mp-btn {min-height:44px}

/* One command surface. The same right-hand anchor in both states. */
#cwCommandDeck {
  --cw-ui-scale:1;position:absolute;z-index:10;right:16px;top:16px;
  width:min(340px,calc((100vw - 32px)/var(--cw-ui-scale)));
  display:flex;flex-direction:column;pointer-events:none;
  transform:scale(var(--cw-ui-scale));transform-origin:top right;
  filter:drop-shadow(0 8px 22px #0a0a0a22);
}
#cwCommandDeck>* {pointer-events:auto}
#cwCommandDeck #topBar {
  position:relative;inset:auto;flex:0 0 auto;width:100%;max-width:none;
  color:#fff;
}
/* The name leads the header (no logo), then the five buttons */
#cwCommandDeck #companyChip {display:flex;grid-column:1;grid-row:1;gap:0}
#cwCommandDeck #companyStage {color:#b7c7e3;font:400 9px/1.3 var(--font-u);margin-top:3px}
#cwCommandDeck #accountsBtn {grid-column:2;grid-row:1}
#cwCommandDeck #greyBtn {grid-column:3;grid-row:1}
#cwCommandDeck #mapBtn {grid-column:4;grid-row:1}
#cwCommandDeck #settingsBtn2 {grid-column:5;grid-row:1}
#cwCommandDeck #panelToggle {grid-column:6;grid-row:1}
#cwCommandDeck #topBar .hud-btn,#cwCommandDeck #panelToggle {
  position:static;min-width:0;border:0;
}
#cwCommandDeck #greyLabel {display:none}
#cwCommandDeck #statRail {grid-row:2;justify-content:space-between;border-top:1px solid #ffffff1a}
#cwCommandDeck .stat-group {gap:0}
#cwCommandDeck .stat-group:last-child {padding-right:0}
/* Four figures: Cash, MRR, Salaries, Share */
#cwCommandDeck .stat-group+.stat-group::before {background:#ffffff16;top:4px;bottom:2px}
#cwCommandDeck #rightPanel {position:relative;inset:auto;width:100%;flex:1;min-height:0;overflow:hidden;transition:none}
#cwCommandDeck #panelTabs {flex-direction:row}
#cwCommandDeck .panel-tab {display:flex;align-items:center;justify-content:center;gap:6px}
#cwCommandDeck .panel-tab i {display:block;font-size:15px}
#cwCommandDeck .panel-tab span {display:inline}
#cwCommandDeck .panel-tab-content {overscroll-behavior:contain}
.panel-section {padding:15px 10px;border-color:var(--cw-line)}
.panel-title {margin:0 7px 10px}
.build-btn {padding:11px 8px;gap:10px;border-radius:8px;min-height:57px}
.build-btn+.build-btn {border-color:#0a0a0a08}
.build-btn:hover:not(:disabled) {background:var(--v2-hover)}.build-btn:active:not(:disabled) {background:var(--v2-raised)}
.build-btn:disabled {opacity:.68}
.build-btn .btn-icon {width:32px;height:34px;flex-basis:32px;border-radius:7px;background:#e7edfa;color:#335ba9;font-size:20px}
.build-btn .btn-name {font-size:12px;font-weight:600;line-height:1.4}
.build-btn .btn-cost {font-size:11px;color:#4d6388;line-height:1.45;margin-top:2px}
.build-btn .btn-desc {font-size:10px;color:var(--cw-muted);line-height:1.5}
.info-btn {width:26px;height:30px;font-size:12px;color:#536b94}.info-btn:hover {background:var(--v2-hover)}
.panel-map {padding:10px!important;border-top:1px solid var(--cw-line);flex-shrink:0}
.panel-map::before {content:'Map';display:block;color:var(--cw-muted);font-size:11px;font-weight:600;margin:1px 2px 8px}
/* The map opens from its button in the header, as a card over the tabs */
#cwCommandDeck .panel-map {display:none}
#cwCommandDeck.map-open > .panel-map {display:block;position:absolute;left:0;right:0;top:calc(var(--dk-map-top, 140px) + 6px);z-index:30;
  background:#f5f7fc;border:1px solid #fff;border-radius:12px;box-shadow:0 14px 34px #0a0a0a38}
#cwCommandDeck.map-open > .panel-map #minimap {display:block;margin:0 auto;border-radius:8px;max-width:none;max-height:none}
#minimap {border:1px solid #d4deec;border-radius:5px;width:190px;max-width:100%;height:auto;max-height:none;object-fit:fill;margin:auto}
.team-item {padding:8px 5px!important;gap:8px!important;min-height:43px;border-bottom-color:#0a0a0a09!important}
.team-name {font-size:11px!important;color:var(--cw-ink)!important}
.team-state {font-size:9px!important;letter-spacing:0!important;padding:3px 5px}
.team-portrait {width:30px;height:32px;flex-basis:30px;border-radius:6px}
.fire-btn {opacity:.7;min-width:24px;min-height:28px}
body.panel-collapsed #cwCommandDeck #rightPanel {flex:0 0 auto;width:100%}
body.panel-collapsed #cwCommandDeck #alertRail:not(:empty) {display:block;max-height:100px;overflow-y:auto;padding:8px}
#zoomLevel,body.panel-collapsed #zoomLevel {right:auto;left:16px;bottom:16px}
#cwCommandDeck #settingsPanel {position:relative;inset:auto;width:100%;max-height:none;min-height:0}
#cwCommandDeck:has(#settingsPanel.open) #rightPanel {display:none}

/* One objective and a short, progressively disclosed match setup. */
#setupForm {display:flex;flex-direction:column}
.cw-match-brief strong {display:block}
.cw-match-brief span {display:block;max-width:400px}
#aiDiffDesc {margin-top:9px}
.cw-match-options {padding-top:15px}
.cw-match-options summary {display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none}
.cw-match-options summary::-webkit-details-marker {display:none}
.cw-match-options summary i {color:var(--cw-blue)}
.cw-match-options summary .cw-less, .cw-match-options[open] summary .cw-more {display:none}
.cw-match-options[open] summary .cw-less {display:inline}
.cw-match-options summary span {margin-left:auto}
.cw-option-fields {display:grid;gap:16px;padding-top:18px}
#mpSettings .mp-section {border-top:0;margin:0!important;padding:0!important}
/* Dialog family. */
#settingsPanel {overflow:auto;padding:20px}
.settings-row {font-size:12px;gap:10px;margin-bottom:17px}
.settings-row select {padding:7px}
#graphicsStatus {font-size:10px;margin-bottom:16px}
input[type=range] {background:#cbd6ec}
input[type=range]::-webkit-slider-thumb {background:var(--cw-blue)}
input[type=range]::-moz-range-thumb {background:var(--cw-blue)}
input[type=range]:focus-visible {outline-offset:6px}
#gameOver,#infoModal,#exitConfirm {padding:20px}
.go-card,#infoModalContent,#exitConfirm .exit-box {padding:28px}
.go-row {padding:12px 0}.go-row b {font-size:18px}
#infoModalContent {min-width:0;width:min(400px,100%);max-height:calc(100dvh - 40px);overflow:auto}
.modal-stat {background:#e7edf8;border-radius:7px}
.modal-close {background:#e3eafa;color:var(--cw-blue)}
.toast,#jsTooltip {background:var(--cw-ink);border-radius:7px;font-size:12px}
.toast {top:94px;max-width:calc(100vw - 40px);text-align:center}
.cw-help {margin:auto;width:min(510px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:30px;color:var(--cw-ink)}
.cw-help img {width:40px;height:40px;margin-bottom:20px}
.cw-help h2 {margin-bottom:12px}
.cw-help p {font-size:13px;line-height:1.7}
.cw-help ol {padding:18px 0 18px 21px}
.cw-help li {padding-left:4px;margin-bottom:12px;font-size:13px;line-height:1.6}
.cw-help .menu-btn {width:100%;margin-top:20px}
.cw-controls {padding-top:14px;border-top:1px solid var(--cw-line)}
@keyframes cw-enter {from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:none}}
@media(min-width:1500px) {#titleScreen:not(.setup) .logo-container {width:480px}.cw-intro,#mainMenu {max-width:350px}}
@media(max-width:800px) {
  #titleScreen:not(.setup) .logo-container {width:340px;max-width:75vw}
  #titleScreen:not(.setup)::after {background:linear-gradient(90deg,#f5f7fcfa,#f5f7fce3 40%,#f5f7fc30 100%)}
  #cwCommandDeck {top:10px;right:10px;width:min(320px,calc((100vw - 20px)/var(--cw-ui-scale)))}
}
@media(max-width:520px) {
  #titleScreen:not(.setup) .logo-container {width:min(320px,85vw);max-width:100%}
  .cw-title-top {top:20px;left:24px;right:24px}
  #titleScreen:not(.setup) .subtitle {font-size:24px;margin-top:22px}.cw-intro {font-size:12px;margin-bottom:20px}
  .toast {top:auto;bottom:calc(76px + env(safe-area-inset-bottom))}
  /* Phones: the deck is a bar across the top, edge to edge; an open tab
     drops below it and scrolls, so the city and your reps stay in view
     beneath. The map buttons run along the bottom (game3d.js). */
  #cwCommandDeck {top:0;right:0;width:calc(100vw/var(--cw-ui-scale))}
}
@media(max-height:680px) and (min-width:700px) {
  #titleScreen:not(.setup) .logo-container {width:300px}
  #titleScreen:not(.setup) .subtitle {margin-top:17px;font-size:23px}.cw-intro {margin-bottom:16px}
  .cw-title-top {top:18px}
  #minimap {max-height:90px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* Character identity, shared between title art and the live team portraits. */
.cw-crew-strip {display:flex;align-items:center;margin:-5px 0 24px;gap:0}
.cw-face {display:block;width:42px;height:42px;border-radius:50%;border:2px solid var(--cw-paper);background-image:url('brand/sales-team.png');background-size:600% auto;flex:0 0 42px;box-shadow:0 2px 5px #0a0a0a16}
.cw-face+.cw-face {margin-left:-8px}
.cw-face-suit {background-position:36% 5%}.cw-face-bandana {background-position:62% 13%}.cw-face-headset {background-position:9% 19%}.cw-face-engineer {background-position:87% 21%}
.cw-crew-caption {font-size:10px;color:var(--cw-muted);line-height:1.5;margin-left:10px}
.cw-crew-poster {position:absolute;z-index:3;right:4vw;bottom:12vh;width:min(43vw,590px);margin:0;overflow:hidden;border-radius:16px;background:#0a0a0a;box-shadow:0 16px 48px #0a0a0a33;border:1px solid #ffffff70}
.cw-crew-poster img {display:block;width:100%;height:auto}
.cw-crew-poster figcaption {padding:13px 18px;color:#f5f7fc;font:500 13px var(--font-d);letter-spacing:.01em}
#titleScreen.setup .cw-crew-strip,#titleScreen.setup .cw-crew-poster {display:none}
@media(max-width:900px){.cw-crew-poster {display:none}}
@media(max-height:740px){.cw-crew-strip {margin-bottom:14px}.cw-crew-strip .cw-face {width:34px;height:34px;flex-basis:34px}#titleScreen:not(.setup) .logo-container {width:min(340px,40vw)}}
@media(max-height:740px) and (max-width:520px){#titleScreen:not(.setup) .logo-container {width:270px}.cw-intro {margin-bottom:14px}.cw-title-top {top:14px}#titleScreen:not(.setup) {padding-top:66px;padding-bottom:46px}}

/* Native dialog transitions include their closing state. */
#infoModal,#exitConfirm,.cw-help {
  transition:opacity .2s ease-in-out,display .2s allow-discrete,overlay .2s allow-discrete;
}
#infoModalContent,#exitConfirm .exit-box,.cw-help {transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s ease-in-out,display .25s allow-discrete,overlay .25s allow-discrete}
.cw-help::backdrop {transition:opacity .2s ease-in-out,display .2s allow-discrete,overlay .2s allow-discrete}
@starting-style {
  #infoModal.open,#exitConfirm.open,.cw-help[open],.cw-help[open]::backdrop {opacity:0}
  #infoModal.open #infoModalContent,#exitConfirm.open .exit-box,.cw-help[open] {transform:translateY(8px) scale(.98)}
}

.cw-identity {display:flex;align-items:center;gap:12px;margin-top:-8px}
.cw-identity>img {object-fit:contain;background:white;border:1px solid var(--cw-line);flex:0 0 52px}
.cw-identity-copy {min-width:0}.cw-identity-actions {display:flex;gap:12px;flex-wrap:wrap}
.cw-identity-actions button {padding:4px 0;background:none;border:0;cursor:pointer}
.cw-identity-actions button[hidden] {display:none}
#cwLogoStatus {font:400 10px/1.5 var(--font-u);color:var(--cw-muted);margin-top:3px}
#cwLogoStatus.error {color:var(--bad)}
#cwCommandDeck #cwCompanyLogo {object-fit:contain}
#cwResultLogo {display:block;object-fit:contain;border-radius:8px;margin-bottom:14px}
/* The result: the head and the button always in view; only the figures
   between scroll, and only on a short screen */
.go-card {display:flex;flex-direction:column;width:min(94vw,480px);max-height:calc(100dvh - 40px);overflow:hidden;padding:24px 26px 20px}
.go-head {flex:none}
#gameOver h2 {margin:0 0 6px}
.go-sum {margin:0 0 16px;font-size:14px;line-height:1.5}
.go-card > .go-stats {flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 6px 2px}
.go-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.go-tile {padding:9px 12px 10px}
.go-tile span {display:block}
.go-tile b {display:block;margin-top:2px;letter-spacing:-.01em;white-space:nowrap}
.go-tile small {font:500 11px var(--font-u);color:var(--cw-muted);letter-spacing:0}
.go-line {margin-top:8px;font-size:12.5px;line-height:1.5}
.go-line b {font-weight:600;color:var(--cw-ink)}
.go-note {margin-top:14px;padding-top:14px}
.go-note li {margin-bottom:5px}
.go-foot {flex:none;padding-top:16px}
.go-foot .menu-btn {width:100%}
@media (max-width:420px) {.go-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The advanced options sit directly under the match options, as one list,
   and short windows tighten the sheet so both stay in view. */
.cw-match-options + .cw-match-options {border-top:0;padding-top:0;margin-top:-8px}
@media (max-height:820px) {.cw-match-options {padding-top:10px}}

/* Hiring the first reps: a page of candidates after setup. Those you can
   hire now in a grid; the ones who will not join yet beneath, quieter. */
#hireScreen[hidden] {display:none}
#hireHead {display:flex}
.hire-grid {display:grid}
.hire-card {position:relative;display:grid;grid-template-columns:52px 1fr;gap:11px;align-items:start;
  text-align:left;font:inherit;cursor:pointer;
  transition:border-color .12s, box-shadow .12s, transform .08s}
.hire-card:active:not(.locked) {transform:translateY(1px)}
.hire-face {height:52px;background:#e9edf6}
.hire-main {display:flex;flex-direction:column;gap:3px;min-width:0}
.hire-top {display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hire-name {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hire-before {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hire-traits {display:flex;flex-direction:column;gap:3px;margin-top:6px}
.hire-meter {display:flex;align-items:center;gap:6px}
.hire-mlabel {width:44px}
.hire-dots {display:flex;gap:2px}
.hire-tick {position:absolute;display:none;place-items:center;font-size:11px}
.hire-card.picked .hire-tick {display:grid}
.hire-later .hire-card {cursor:default}
.hire-later .hire-face {filter:grayscale(1);opacity:.55}
.hire-later .hire-name, .hire-later .hire-role, .hire-later .hire-before {opacity:.7}
.hire-later .hire-dots i.on {background:#9aa8bf}
.hire-why {display:flex;align-items:center;gap:5px;margin-top:6px}
.hire-foot {display:flex;justify-content:space-between;gap:10px}
.hire-go {align-items:center;flex:1}
@media (max-width:640px) {.hire-card {grid-template-columns:40px 1fr} .hire-face {height:40px}}
#titleScreen.setup.hiring .logo-container {max-width:920px}

/* A rival's rep, looked at closely (double-click them) */
#infoModalContent .ri-head {display:grid;grid-template-columns:56px 1fr 30px;gap:12px;align-items:center;margin-bottom:12px}
#infoModalContent .ri-face {height:56px;border-radius:50%;background:var(--v2-raised)}
#infoModalContent .ri-who b {display:block;font:700 17px/1.2 var(--font-d)}
#infoModalContent .ri-who span {display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cw-muted)}
#infoModalContent .ri-dot {width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1.5px var(--v2-black),0 0 0 2.5px var(--v2-line)}
#infoModalContent .ri-x {height:30px;border:0;background:transparent;color:var(--cw-muted);cursor:pointer;align-self:start}
#infoModalContent .ri-x:hover {background:var(--v2-hover);color:#fff}
#infoModalContent .ri-now {display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px}
#infoModalContent .ri-chip {display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font:600 10.5px/1 var(--font-u);background:var(--v2-raised);color:#fff}
#infoModalContent .ri-chip.good {background:rgba(53,208,127,.14);color:var(--v2-gain)}
#infoModalContent .ri-chip.go {background:var(--v2-raised);color:#fff}
#infoModalContent .ri-chip.wait {background:rgba(242,176,30,.14);color:var(--v2-warn)}
#infoModalContent .ri-chip.bad {background:rgba(239,58,45,.14);color:var(--v2-red-hi)}
#infoModalContent .ri-meters {display:flex;gap:20px;margin-bottom:12px}
#infoModalContent .ri-meter {display:flex;align-items:center;gap:8px;font:600 11px var(--font-u);color:var(--cw-muted)}
#infoModalContent .ri-dots {display:flex;gap:3px}
#infoModalContent .ri-dots i {width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
#infoModalContent .ri-dots i.on {background:var(--cw-ink)}
#infoModalContent .ri-can {margin:12px 0 0;font-size:13px;line-height:1.55}

/* ---- The title, set as a Swiss poster ------------------------------------------------
   A paper panel on the left of the screen holds the type on a strict grid; the
   live city to its right is the picture. One grotesk in two weights (Helvetica
   Neue, or its free stand-in where it is not installed), ranged left, tight at
   display sizes; hairline rules; ink on paper, the city the only colour. */
@font-face {font-family:'CW Grotesk';src:url('fonts/cw-grotesk-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face {font-family:'CW Grotesk';src:url('fonts/cw-grotesk-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root {--sw-m:clamp(28px,3.3vw,56px)}
#titleScreen:not(.setup) {padding:0;justify-content:flex-start;align-items:stretch;background:transparent}
#titleScreen:not(.setup)::after {display:none}
#titleScreen:not(.setup) .logo-container {position:relative;z-index:3;display:flex;flex-direction:column;width:clamp(420px,40vw,620px);max-width:none;height:100%;margin:0;padding:var(--sw-m);background:var(--sw-paper);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-family:var(--sw-font);color:var(--sw-ink);animation:none;overflow:auto;text-align:left}
#titleScreen .cw-title-top {display:none}
.cw-meta {display:flex;justify-content:space-between;gap:16px;padding-bottom:13px;border-bottom:1px solid var(--sw-rule);font:400 12px/1.4 var(--sw-font);color:var(--sw-ink)}
.cw-meta span+span {color:var(--sw-grey);text-align:right}
#titleScreen:not(.setup) h1.cw-wordmark {margin:auto 0 0}
#titleScreen:not(.setup) .cw-wordmark img {width:clamp(210px,60%,350px);height:auto}
#titleScreen:not(.setup) .subtitle {max-width:none;margin:clamp(18px,3vh,30px) 0 clamp(26px,4.4vh,48px);font:500 clamp(22px,2.1vw,30px)/1.12 var(--sw-font);letter-spacing:-.02em;color:var(--sw-ink);text-transform:none}
#titleScreen:not(.setup) .cw-intro {display:none}
#titleScreen:not(.setup) #mainMenu {max-width:none;gap:0!important;margin:0!important;border-top:1px solid var(--sw-ink)}
#titleScreen:not(.setup) #mainMenu>button {display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;margin:0;padding:15px 2px;background:none;border:0;border-bottom:1px solid var(--sw-rule);border-radius:0;box-shadow:none;font:500 18px/1.2 var(--sw-font);letter-spacing:-.01em;color:var(--sw-ink);text-decoration:none;text-align:left;cursor:pointer;transition:padding .16s ease,background .16s ease}
#titleScreen:not(.setup) #mainMenu>button small {font:400 13px/1.2 var(--sw-font);letter-spacing:0;color:var(--sw-grey)}
#titleScreen:not(.setup) #mainMenu>button:hover {padding-left:8px}
#titleScreen:not(.setup) #mainMenu>.go {align-items:center;padding:17px 16px;background:var(--sw-ink);color:var(--sw-paper);border-bottom:0}
#titleScreen:not(.setup) #mainMenu>.go:hover {background:#000;padding-left:22px}
#titleScreen:not(.setup) #mainMenu>.go i {font-size:17px}
#titleScreen:not(.setup) #mainMenu>button:focus-visible {outline:3px solid var(--sw-ink);outline-offset:3px}
.cw-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--sw-rule);list-style:none;counter-reset:step;font:400 12px/1.5 var(--sw-font);color:var(--sw-grey)}
.cw-steps li {counter-increment:step}
.cw-steps li::before {content:counter(step);display:block;margin-bottom:10px;font:700 12px/1 var(--sw-font);color:var(--sw-ink)}
.cw-steps b {display:block;margin-bottom:2px;font-weight:700;color:var(--sw-ink)}
.cw-caption {position:absolute;z-index:3;right:var(--sw-m);bottom:var(--sw-m);padding:7px 11px;background:var(--sw-paper);font:400 12px/1.3 var(--sw-font)}
#titleScreen.setup .cw-meta,#titleScreen.setup .cw-steps,#titleScreen.setup .cw-caption {display:none}
@media (max-width:760px) {
  #titleScreen:not(.setup) .logo-container {width:100%}
  .cw-caption {display:none}
  .cw-steps {grid-template-columns:1fr;gap:10px}
  .cw-steps li::before {display:inline;margin:0 8px 0 0}
  .cw-steps b {display:inline}
}
@media (max-height:700px) and (min-width:761px) {
  .cw-steps {display:none}
  #titleScreen:not(.setup) .cw-wordmark img {width:clamp(180px,48%,280px)}
}

/* ---- Setup and hiring, on the same poster ---------------------------------------------
   The same paper panel as the title, the city sharp beside it; the same one
   grotesk; square controls on hairline rules; the ink bar to go on. */
#titleScreen.setup {padding:0;justify-content:flex-start;align-items:stretch;backdrop-filter:none}
#titleScreen.setup .logo-container {width:clamp(460px,40vw,620px);max-width:none;height:100%;max-height:none;padding:var(--sw-m);text-align:left}
#titleScreen.setup.hiring .logo-container {width:clamp(640px,68vw,1080px)}
#titleScreen.setup .cw-wordmark {margin:0 0 clamp(28px,5vh,56px)}
#titleScreen.setup .cw-wordmark img {width:100%;height:auto}
#setupHead,#hireHead {gap:12px;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--sw-ink)}
#setupHead .hud-btn {border:1px solid var(--sw-rule)!important;color:var(--sw-ink)!important}
#setupHead .hud-btn:hover {background:var(--v2-hover)!important;color:#fff!important}
#hireHead {justify-content:space-between;align-items:baseline}
.hire-count {font:400 12px var(--sw-font);color:var(--sw-grey)}
#setupForm {max-height:none;gap:22px;padding:0;overflow:visible}
.cw-match-brief {font:400 12.5px/1.55 var(--sw-font);color:var(--sw-grey)}
.cw-match-brief strong {font:700 17px/1.3 var(--sw-font);letter-spacing:-.01em;color:var(--sw-ink);margin-bottom:4px}
.setup-label {margin-bottom:8px}
.setup-input {padding:12px 0!important}
.setup-input:focus {border-bottom-width:2px!important;padding-bottom:11px!important}
.cw-identity button {font:500 13px var(--sw-font)!important;color:var(--sw-ink)!important;text-decoration:underline;text-underline-offset:4px}
.setup-opt {min-height:54px;padding:10px 8px!important;text-align:left}
.setup-opt:last-child {border-right:0!important}
.setup-opt .opt-sub {margin-top:3px}
.cw-match-options {border-top:1px solid var(--sw-rule)}
.cw-match-options summary {font:500 14px var(--sw-font);padding:13px 0}
.cw-match-options summary span {font:400 12px var(--sw-font);color:var(--sw-grey)}
#aiDiffLabel {background:var(--sw-ink)!important;border-radius:0!important;font:500 11px var(--sw-font)!important}
#aiDiffDesc {font:400 12px/1.55 var(--sw-font)!important;color:var(--sw-grey)!important}
#startSoloBtn,#startMpBtn,.hire-go {justify-content:space-between!important;gap:12px;margin-top:24px!important;padding:0 18px!important;text-align:left}
#startSoloBtn:hover,#startMpBtn:hover,.hire-go:hover:not(:disabled) {background:#000!important}
#startSoloBtn i,#startMpBtn i,.hire-go i {order:2}
.hire-go:disabled {cursor:default}
.hire-back {min-height:50px;padding:0 18px!important}
.hire-foot {align-items:stretch;margin-top:28px}
.hire-foot .hire-go {display:flex;margin-top:0!important}
.hire-lede {max-width:62ch;margin:14px 0 20px;font:400 13px/1.55 var(--sw-font)}
.hire-sub {margin:28px 0 10px;padding-top:12px;border-top:1px solid var(--sw-rule)}
.hire-grid {grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.hire-card {padding:16px 14px}
.hire-tick {bottom:0;right:0;width:22px;height:22px;background:var(--sw-ink)}
.hire-name {font:700 14px var(--sw-font);letter-spacing:-.01em}
.hire-fee {font:500 13px var(--sw-font)}
.hire-role,.hire-before {font:400 11.5px/1.4 var(--sw-font);color:var(--sw-grey)}
.hire-mlabel {font:400 11px var(--sw-font);color:var(--sw-grey)}
.hire-dots i {width:7px;height:7px}
@media (max-width:760px) {
  #titleScreen.setup .logo-container,#titleScreen.setup.hiring .logo-container {width:100%}
}

/* ===========================================================================
   The pieces over the city, the dialogs, setup and hiring, on black
   =========================================================================== */
/* ---- The first-game coach: styled with its code, in game3d.js ------------ */

/* ---- Settings ------------------------------------------------------------ */
#settingsPanel{background:var(--v2-black)!important;border:0!important}
#settingsPanel .panel-title{color:#fff!important;font:700 11px var(--v2-f)!important;letter-spacing:.12em}
#settingsPanel .settings-row{border-color:var(--v2-line)!important}
#settingsPanel .settings-row label{font:700 10px var(--v2-f)!important;letter-spacing:.1em;text-transform:uppercase}
#settingsPanel select{background:var(--v2-raised)!important;color:#fff!important;border:0!important;border-radius:var(--r-sm)!important}
#settingsPanel input[type=range]{accent-color:var(--v2-red)}
#settingsPanel input[type=checkbox]{accent-color:var(--v2-red)}
#settingsPanel span{color:#fff}
#exitGameBtn{background:transparent!important;box-shadow:inset 0 0 0 1px var(--v2-red)!important;border-radius:var(--r-md)!important;
  font:700 11px var(--v2-f)!important;letter-spacing:.1em!important;text-transform:uppercase}

/* ---- Over the city ------------------------------------------------------- */
#viewCtl{background:var(--v2-black)!important;border:0!important;border-radius:var(--r-md)!important;box-shadow:none!important}
#viewCtl button{color:#fff!important;border-radius:var(--r-sm)!important}
#viewCtl button:hover{background:var(--v2-raised)!important}
#ctlHint{background:var(--v2-black)!important;color:var(--v2-grey)!important;border-radius:var(--r-md)!important;font:400 11.5px var(--v2-f)!important}
#zoomLevel{background:var(--v2-black)!important;color:#fff!important;border-radius:var(--r-sm)!important;font:700 10px var(--v2-f)!important;letter-spacing:.1em}
#jsTooltip,.tt,.tt-head,.tt-detail{background:var(--v2-black)!important}
#jsTooltip,.tt{border-radius:var(--r-sm)!important}
.tt-head,.tt-detail{border-radius:0!important}
.tt-detail{color:var(--v2-grey)!important}
/* the account you clicked */
#custCard{background:var(--v2-black)!important;color:#fff!important;border:0!important;border-radius:var(--r-lg)!important;box-shadow:none!important;font-family:var(--v2-f)!important;overflow:visible}
#custCard *:not(i){font-family:var(--v2-f)!important}
#custCard [class*="name"],#custCard b,#custCard strong{color:#fff!important}
#custCard [class*="sub"],#custCard small{color:var(--v2-grey)!important}
#custCard button{background:var(--v2-raised)!important;color:#fff!important;border:0!important;border-radius:var(--r-md)!important;font:700 10.5px var(--v2-f)!important;letter-spacing:.08em!important;text-transform:uppercase}
#custCard button.cc-open,#custCard button.cc-send,#custCard button[class*="go"]{background:var(--v2-red)!important}
#custCard button.cc-open:hover,#custCard button.cc-send:hover,#custCard button[class*="go"]:hover{background:var(--v2-red-hi)!important}
#custCard button:disabled{background:var(--v2-raised)!important;color:var(--v2-dim)!important}
#custCard hr,#custCard [class*="row"]{border-color:var(--v2-line)!important}
/* the reps you can send, in circles */
#custCard .cc-row canvas{border-radius:50%!important}
/* the reps you can send, in circles */
#custCard .cc-row canvas{border-radius:50%!important}
/* the reps you can send, in circles */
#custCard .cc-row canvas{border-radius:50%!important}
#custCard input[type=checkbox]{accent-color:var(--v2-red)}

/* ---- Dialogs: help, info, exit, game over -------------------------------- */
dialog.cw-help,#infoModalContent,#exitConfirm .exit-box,.go-card{background:var(--v2-black)!important;border:0!important;border-radius:var(--r-lg)!important}
dialog.cw-help::backdrop,#infoModal,#exitConfirm{background:rgba(0,0,0,.72)!important;backdrop-filter:none!important}
dialog.cw-help h2,#infoModalContent h2,#infoModalContent h3,.go-card h2{color:#fff!important;font:700 22px/1.1 var(--v2-f)!important;letter-spacing:-.01em!important}
dialog.cw-help p,dialog.cw-help li,#infoModalContent p,.go-sum{color:var(--v2-grey)!important}
dialog.cw-help b,dialog.cw-help strong{color:#fff!important}
dialog.cw-help>img,dialog.cw-help .cw-help-mark,dialog.cw-help header img{display:none!important}
dialog.cw-help button,#infoModalContent button,#exitConfirm button{border-radius:var(--r-md)!important;font:700 11px var(--v2-f)!important;letter-spacing:.1em!important;text-transform:uppercase}
#gameOver{background:rgba(0,0,0,.8)!important;backdrop-filter:none!important}
.go-kicker{color:var(--v2-red-hi)!important;font:700 11px var(--v2-f)!important;letter-spacing:.14em!important;text-transform:uppercase}
.go-card h2{font-size:38px!important;line-height:1!important}
/* Losing: the villain at the head of the card, laughing at you. His face
   from the title art; a few quick bobs of a chuckle, then he leans in. */
.go-villain{display:none;position:relative;flex:none;height:190px;margin:-24px -26px 16px;overflow:hidden;background:var(--v2-black)}
#gameOver.lost .go-villain{display:block}
#gameOver.lost #cwResultLogo{display:none}
.go-villain i{position:absolute;inset:-12px;background:url('brand/title/villain-depth.webp') 50% -368px/512px auto no-repeat;transform-origin:50% 45%}
.go-villain i::before{content:"";position:absolute;inset:0;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle at 212px 72px,rgba(255,120,80,.9),rgba(255,40,20,0) 18px),radial-gradient(circle at 284px 72px,rgba(255,120,80,.9),rgba(255,40,20,0) 18px)}
.go-villain::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 74%,var(--v2-black) 100%)}
#gameOver.lost .go-villain i{animation:goLaugh 1.7s ease-in-out .3s both,goLoom 9s ease-out 2s forwards}
#gameOver.lost .go-villain i::before{animation:goGlare 1.7s ease-in-out .3s both}
@keyframes goLaugh{0%{transform:translateY(0) rotate(0) scale(1.03)}10%{transform:translateY(-4px) rotate(-.7deg) scale(1.035)}20%{transform:translateY(1px) rotate(.4deg) scale(1.035)}
  30%{transform:translateY(-4px) rotate(-.6deg) scale(1.04)}40%{transform:translateY(1px) rotate(.3deg) scale(1.04)}52%{transform:translateY(-3px) rotate(-.4deg) scale(1.045)}
  64%{transform:translateY(1px) rotate(.2deg) scale(1.045)}76%{transform:translateY(-1px) rotate(0) scale(1.05)}100%{transform:translateY(0) rotate(0) scale(1.05)}}
@keyframes goLoom{from{transform:scale(1.05)}to{transform:scale(1.12)}}
@keyframes goGlare{0%,100%{opacity:0}15%,45%{opacity:.85}30%,60%{opacity:.5}}
@media (prefers-reduced-motion:reduce){#gameOver.lost .go-villain i,#gameOver.lost .go-villain i::before{animation:none}}
.go-stats{border-color:var(--v2-line)!important}
.go-tile{border-top:2px solid var(--v2-line)!important;color:#fff!important}
.go-tile>*:first-child{color:var(--v2-grey)!important;font:700 9px/1.2 var(--v2-f)!important;letter-spacing:.12em!important;text-transform:uppercase}
.go-tile>*:last-child{font:700 18px/1.15 var(--v2-f)!important}
.go-foot .menu-btn.go,#goAgain{background:var(--v2-red)!important;border:0!important;border-radius:var(--r-md)!important;
  font:700 13px var(--v2-f)!important;letter-spacing:.1em!important;text-transform:uppercase;padding:14px 20px!important}

/* ---- Setup and hiring, on black ------------------------------------------- */
/* black under the villain title too, so nothing shows through him as he fades
   out to setup or back in from it (the city flashed through, or the page's
   paper behind it) */
#titleScreen,#titleScreen.setup,#titleScreen.hiring{background:var(--v2-black)!important}
/* with the 3D city running, it stands behind setup in its scan view; not on a
   phone, where the card fills the screen and the city would only flash
   through between the title and the card (nor the blur, with nothing to see) */
@media (min-width:761px){body.city-3d #titleScreen.setup,body.city-3d #titleScreen.hiring{background:transparent!important}}
@media (max-width:760px){#titleScreen.setup,#titleScreen.hiring{backdrop-filter:none}}
#titleScreen.setup #titleCity,#titleScreen.hiring #titleCity,#titleScreen.setup .sunwash,#titleScreen.setup .haze,#titleScreen.hiring .sunwash,#titleScreen.hiring .haze,
#titleScreen.setup .cw-caption,#titleScreen.hiring .cw-caption{display:none!important}
#titleScreen.setup .logo-container,#titleScreen.hiring .logo-container{background:var(--v2-black)!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
#titleScreen.setup .logo-container *,#titleScreen.hiring .logo-container *{box-shadow:none!important}
#setupHead{border-bottom:2px solid #fff!important}
#setupHead .crumb,.hire-title,#titleScreen .hire-head h2{color:#fff!important;font:700 22px/1.1 var(--v2-f)!important;letter-spacing:-.02em!important}
#titleScreen .setup-label{color:var(--v2-grey)!important;font:700 10px/1.2 var(--v2-f)!important;letter-spacing:.12em!important;text-transform:uppercase!important}
.setup-input,.mp-code-input{height:46px;background:var(--v2-raised)!important;border:0!important;border-bottom:2px solid #fff!important;border-radius:var(--r-sm) var(--r-sm) 0 0!important;
  font:700 16px var(--v2-f)!important;letter-spacing:.03em!important;text-transform:uppercase}
.setup-input:focus,.mp-code-input:focus{border-bottom-color:var(--v2-red)!important;outline:none!important}
.setup-options{background:transparent!important;gap:4px!important;padding:0!important}
.setup-opt{background:var(--v2-raised)!important;border:0!important;border-radius:var(--r-md)!important;color:var(--v2-grey)!important;font:700 10.5px/1.1 var(--v2-f)!important;letter-spacing:.08em!important;text-transform:uppercase}
.setup-opt .opt-sub{color:var(--v2-dim)!important;font:400 10.5px/1.3 var(--v2-f)!important;text-transform:none}
.setup-opt:hover:not(.active){background:var(--v2-hover)!important;color:#fff!important}
.setup-opt.active{background:#fff!important;color:#000!important}
.setup-opt.active .opt-sub{color:#555!important}
#titleScreen.setup details,#titleScreen.setup summary{border-color:var(--v2-line)!important}
#titleScreen.setup summary span:last-child,#titleScreen.setup .muted{color:var(--v2-grey)!important}
#startSoloBtn,#startMpBtn,.hire-go{background:var(--v2-red)!important;border:0!important;border-radius:var(--r-md)!important;
  min-height:50px;font:700 16px var(--v2-f)!important;letter-spacing:.06em!important;text-transform:uppercase}
#startSoloBtn:hover,#startMpBtn:hover,.hire-go:hover{background:var(--v2-red-hi)!important}
.hire-go:disabled{background:var(--v2-raised)!important;color:var(--v2-dim)!important}
.mp-btn{background:var(--v2-raised)!important;border-radius:var(--r-md)!important}
/* backing out is the one outline button (the style sheet's .btn.line) */
.hire-back{background:transparent!important;border:1.5px solid #fff!important;border-radius:var(--r-md)!important;
  font:700 12px/1 var(--v2-f)!important;letter-spacing:.1em!important;text-transform:uppercase}
/* as wide as its word (the old narrow-screen rule makes every menu button full width,
   which squeezed the red button beside it down to one word a line) */
.hire-foot .hire-back{width:auto}
/* the way on stays in view: the hiring buttons, and the start button on setup,
   keep to the bottom of the panel on a band of black while the list scrolls under */
/* (a sticky edge sits inside the panel's padding, so the panel has none at the foot
   and the pinned pieces bring their own) */
#titleScreen.setup .logo-container{padding-bottom:0}
.hire-foot{position:sticky;bottom:0;z-index:2;margin-top:20px!important;padding:12px 0 max(16px,env(safe-area-inset-bottom));background:var(--v2-black);border-top:1px solid var(--v2-line)}
#startSoloBtn,#startMpBtn{position:sticky;bottom:16px;z-index:2;margin-bottom:16px;box-shadow:0 0 0 16px var(--v2-black)!important}
.hire-card{background:var(--v2-raised)!important;border:0!important;border-radius:var(--r-md)!important;color:#fff!important}
/* faces in circles */
.hire-face{border-radius:50%}
.hire-card:hover{background:var(--v2-hover)!important}
.hire-card.picked{background:#fff!important;color:#000!important}
.hire-card.picked *{color:#000!important}
/* pace and closing: the filled squares full strength, the rest faint */
.hire-card .hire-meter i,.hire-card [class*="pip"]{background:rgba(255,255,255,.2)!important;border-radius:2px}
.hire-card .hire-meter i.on{background:#fff!important}
.hire-card.picked .hire-meter i{background:rgba(0,0,0,.16)!important}
.hire-card.picked .hire-meter i.on{background:#000!important}
#titleScreen.setup .cw-wordmark img,#titleScreen.hiring .cw-wordmark img{content:url('brand/wordmark-villain.svg')}

/* focus, for the keyboard: a white ring, as the style sheet has it (red is
   for acting and warning); inside the rows of a list, so it isn't cut off */
:focus-visible{outline:2px solid #fff!important;outline-offset:3px}
#cwCommandDeck .dk-member:focus-visible,#cwCommandDeck .acc-row:focus-visible,#cwCommandDeck .dk-card:focus-visible{outline-offset:-2px!important}

/* ---- Hiring, after the first run through every screen ------------------ */
#titleScreen.hiring .crumb{font:700 22px/1.1 var(--v2-f)!important;letter-spacing:-.02em!important}
#titleScreen.hiring .hire-sub{color:var(--v2-grey)!important;font:700 10px var(--v2-f)!important;letter-spacing:.12em!important;text-transform:uppercase}
.hire-lede{color:var(--v2-grey)!important}
.hire-grid{gap:4px!important}
/* the ones who join later: who and when, nothing more */
.hire-later .hire-card{opacity:.7}
.hire-later .hire-traits,.hire-later .hire-before{display:none!important}
.hire-why{color:var(--v2-grey)!important;font:400 11px/1.35 var(--v2-f)!important}

/* phones: the headings a size down, so they keep to a line and the start button stays in view;
   the hiring buttons one above the other, the red one first, so its label has the width */
@media (max-width:520px){
  #setupHead .crumb,.hire-title,#titleScreen .hire-head h2,#titleScreen.hiring .crumb{font-size:19px!important}
  .hire-foot{flex-direction:column-reverse;gap:8px!important}
  .hire-foot .hire-go{flex:none;font-size:14px!important;line-height:1.2!important;padding:10px 18px!important}
  .hire-foot .hire-back{min-height:48px}
}

/* ---- Your colour, and the room's seats ------------------------------------ */
/* eight colours in a row, the one you have ringed in white */
.cw-colours{display:flex;flex-wrap:wrap;gap:10px}
.cw-colour{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer;transition:transform .12s}
.cw-colour:hover{transform:scale(1.1)}
.cw-colour.on{outline:2px solid #fff;outline-offset:3px}
.cw-colour.taken{opacity:.25;cursor:not-allowed}
/* a room: four seats, each a player, an AI or open */
.mp-seats{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left}
.mp-seat{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:var(--r-md);background:var(--v2-raised);color:#fff}
.mp-seat.open{background:transparent;box-shadow:inset 0 0 0 1px var(--v2-line)}
.mp-seat-dot{width:14px;height:14px;border-radius:50%;background:var(--c,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.mp-seat-name{font:700 12.5px/1.2 var(--v2-f);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-seat-name small{display:block;margin-top:2px;font:400 11px/1.2 var(--v2-f);letter-spacing:0;text-transform:none;color:var(--v2-grey)}
.mp-seat.open .mp-seat-name{color:var(--v2-grey)}
.mp-seat button{height:30px;padding:0 12px;border:0;border-radius:var(--r-sm);background:var(--v2-hover);color:#fff;font:700 10px/1 var(--v2-f);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mp-seat button:hover{background:#3a3a3a}
/* in a room the match settings are already fixed: only your colour and the room remain */
#setupScreen.in-room .cw-match-options{display:none}

/* ===========================================================================
   Motion: nothing appears or goes without moving. Panels shown and hidden
   with the hidden attribute fade and move both ways (the display change
   waits for the transition: transition-behavior allow-discrete, with
   @starting-style for the way in); overlays shown by the game rise in.
   Reduced motion turns all of it off (above).
   =========================================================================== */
@keyframes fxFade {from {opacity:0}}
@keyframes fxRise {from {opacity:0;transform:translateY(8px)}}
@keyframes fxDrop {from {opacity:0;transform:translateY(-6px)}}
/* the whole tech tree: the dark fades, the panel rises */
.tt-back {transition:opacity .22s ease,display .22s allow-discrete,overlay .22s allow-discrete}
.tt-back[hidden] {opacity:0}
.tt-back .tt-panel {transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.tt-back[hidden] .tt-panel {transform:translateY(10px) scale(.985)}
@starting-style {.tt-back {opacity:0} .tt-back .tt-panel {transform:translateY(10px) scale(.985)}}
/* letting someone go: the small menu by the button */
.dk-menu {transition:opacity .14s ease,transform .18s cubic-bezier(.2,.8,.2,1),display .18s allow-discrete}
.dk-menu[hidden] {opacity:0;transform:translateY(-4px) scale(.98)}
@starting-style {.dk-menu {opacity:0;transform:translateY(-4px) scale(.98)}}
/* the result of a game: the dark fades in, the card rises */
#gameOver {animation:fxFade .3s ease}
#gameOver .go-card {animation:fxRise .45s cubic-bezier(.2,.8,.2,1) .06s both}
/* title and setup: the villain fades away as setup rises in, and back */
#villainTitle {transition:opacity .35s ease,visibility .35s}
#titleScreen.setup #villainTitle,#titleScreen.hiring #villainTitle {opacity:0}
#titleScreen.setup .logo-container {animation:fxRise .4s cubic-bezier(.2,.8,.2,1) .08s both}
/* alerts slide in under the tabs */
#alertRail > * {animation:fxDrop .28s cubic-bezier(.2,.8,.2,1)}
/* an account's card: the list of reps to send fades in */
#custCard .cc-pick:not([hidden]) {animation:fxFade .2s ease}

/* ---- New game, simplified ---------------------------------------------------
   Three things to decide: your name, your colour, how hard. Everything else is
   behind one "More options". The name is a plain rounded field that rings
   white while you type in it, with your colour beside it as one swatch that
   opens the picker. The difficulty is a quiet segmented control, so the only
   loud thing on the screen is the red Start button. */
#setupForm{gap:26px!important}
.cw-company-row{display:flex;align-items:stretch;gap:8px}
#setupForm .setup-input,#setupScreen .mp-code-input{height:48px;padding:0 14px!important;background:var(--v2-raised)!important;
  border:1px solid #333!important;border-radius:10px!important;box-shadow:none;transition:border-color .15s,box-shadow .15s}
#setupForm .cw-company .setup-input{flex:1;min-width:0}
#setupForm .setup-input:hover,#setupScreen .mp-code-input:hover{border-color:#4a4a4a!important}
#setupForm .setup-input:focus,#setupScreen .mp-code-input:focus{border-color:#fff!important;box-shadow:0 0 0 1px #fff;outline:none!important}
.cw-colour-pick{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;height:48px;padding:0 12px 0 15px;
  background:var(--v2-raised);border:1px solid #333;border-radius:10px;color:var(--v2-grey);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cw-colour-pick:hover{border-color:#4a4a4a}
.cw-colour-pick:focus-within{border-color:#fff;box-shadow:0 0 0 1px #fff}
.cw-swatch{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cw-colour-pick .ph-caret-down{font-size:12px}
.cw-colour-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}
/* difficulty: one track, the choice lit, not a white block */
#difficultyOptions{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0!important;padding:3px!important;background:var(--v2-raised)!important;border-radius:var(--r-md)}
#difficultyOptions .setup-opt{min-height:40px;padding:0 6px!important;text-align:center;justify-content:center;background:transparent!important;color:var(--v2-grey)!important;border-radius:calc(var(--r-md) - 2px)!important}
#difficultyOptions .setup-opt:hover:not(.active){background:transparent!important;color:#fff!important}
#difficultyOptions .setup-opt.active{background:#3a3a3a!important;color:#fff!important}
#aiDiffDesc{margin-top:10px!important}
/* the one drawer: a plain line, no summary of what is in it */
#setupForm .cw-match-options{padding-top:0;border-top:1px solid var(--v2-line)!important}
#setupForm .cw-match-options summary{padding:16px 0;font:600 13px var(--v2-f)}
/* keep the last line clear of the pinned Start button */
#setupForm{padding-bottom:8px!important}
/* typing on a phone: the Start button stops following the keyboard up */
@media (max-width:820px){
  #setupScreen:has(input:focus) #startSoloBtn,#setupScreen:has(input:focus) #startMpBtn{position:static}
}
/* every choice in the form lit the same quiet way, so no white blocks */
#setupForm .setup-opt.active{background:#3a3a3a!important;color:#fff!important}
#setupForm .setup-opt.active .opt-sub{color:#c9c9c9!important}
/* the header: a back arrow and the screen's name, nothing else (the wordmark
   was on the screen before this one; the rule under it went with it) */
#titleScreen.setup:not(.hiring) h1.cw-wordmark{display:none}
#setupHead{gap:6px!important;margin:0 0 22px!important;padding:0!important;border-bottom:0!important}
#setupHead .hud-btn{width:40px!important;height:40px!important;flex:0 0 40px!important;margin-left:-10px;border:0!important;border-radius:50%!important;background:transparent!important;font-size:20px}
#setupHead .hud-btn:hover{background:var(--v2-raised)!important}
/* and the same on the hiring screen that follows: no rule under its header */
#hireHead{border-bottom:0!important;padding-bottom:0!important}
/* the goal on its own: the line about money, reps and rivals is gone */
#cwMatchSummary{display:none!important}
.cw-match-brief strong{margin-bottom:0!important}