/* ===========================================================================
   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 ------------------------------------------- */
#titleScreen.setup,#titleScreen.hiring{background:var(--v2-black)!important}
/* with the 3D city running, it stands behind setup in its scan view */
body.city-3d #titleScreen.setup,body.city-3d #titleScreen.hiring{background:transparent!important}
#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}