/* Absturd's field kit. Authored ink assets, stitched cloth and issued paper.
   Keep moving text and aim points steady; the crookedness belongs to the props. */
:root {
  --ink: #342d29;
  --paper: #f0e1b9;
  --blue: #82d2cf;
  --orange: #ed9c7c;
  --hand: "Chalkboard SE", "Chalkboard", "Comic Sans MS", cursive;
  --label: "Trebuchet MS", "Verdana", sans-serif;
  --sheet: url("/ui/paper.svg");
  --ribbon: url("/ui/ink-ribbon.svg");
}
/* The crew roll call is an issued sheet with crooked ink stamps and portraits. */
#crew-assembly {
  width: min(590px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  box-sizing: border-box;
  overflow: auto;
  padding: clamp(20px, 4vw, 36px);
  color: var(--ink);
  background:
    var(--sheet) center / 100% 100%,
    var(--paper);
  border: 3px solid var(--ink);
  border-radius: 5px 14px 6px 11px / 11px 4px 12px 5px;
  box-shadow: 9px 10px 0 #1d242250;
}
#crew-assembly.is-queued .crew-vacancy,
#crew-assembly.is-queued .crew-intro,
#crew-assembly.is-queued .crew-foot,
#crew-assembly.is-queued #crew-sheet > label,
#crew-assembly.is-queued .crew-invite-row {
  display: none;
}
#crew-queue {
  border-top: 1px dashed currentColor;
  padding-top: 12px;
  font-size: 12px;
  line-height: 1.5;
}
#crew-assembly.is-queued .crew-actions {
  position: sticky;
  bottom: 0;
  padding: 8px 0;
  background: #efe0b8;
}
#crew-assembly::backdrop {
  background: #202a2ac9;
  backdrop-filter: blur(3px);
}
.crew-heading {
  display: flex;
  gap: 16px;
  align-items: start;
  justify-content: space-between;
  border-bottom: 3px double var(--ink);
  padding-bottom: 13px;
}
.crew-heading small,
.crew-foot,
#crew-sheet > label,
.crew-join-row label {
  font-size: 10px;
  letter-spacing: 0.8px;
}
.crew-heading h2 {
  margin: 8px 0 0;
  font: 700 clamp(27px, 5vw, 37px) / 1.05 var(--hand);
}
.crew-heading h2 em {
  color: #98543b;
}
#crew-close {
  flex: 0 0 34px;
  height: 34px;
}
.crew-intro,
#crew-help {
  font-size: 12px;
  line-height: 1.55;
}
#crew-playlist {
  font: 700 17px var(--hand);
  border-bottom: 2px dashed #8a7556;
  padding-bottom: 12px;
}
#crew-roster {
  padding: 0;
  margin: 15px 0 20px;
  list-style: none;
}
.crew-resident {
  min-height: 63px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px dashed #9b8868;
}
.crew-resident img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.crew-resident > span {
  flex: 1;
  min-width: 0;
}
.crew-resident strong {
  display: block;
  font: 700 16px var(--hand);
  overflow-wrap: anywhere;
}
.crew-resident small {
  display: block;
  margin-top: 3px;
  font-size: 9px;
}
.crew-stamp {
  font: 700 11px var(--hand);
  color: #7b6a51;
  border: 2px dashed currentColor;
  border-radius: 3px 8px 2px 5px;
  padding: 5px;
  transform: rotate(-5deg);
}
.crew-resident:nth-child(even) .crew-stamp {
  transform: rotate(4deg);
}
.crew-stamp.is-ready {
  color: #286759;
  border-style: solid;
}
.crew-vacancy {
  color: #7d6c50;
  font: 13px var(--hand);
}
.crew-vacancy > b {
  width: 48px;
  text-align: center;
  font-size: 28px;
}
.crew-invite-row {
  display: flex;
  gap: 7px;
  margin-top: 7px;
}
.crew-invite-row input {
  flex: 1;
  min-width: 0;
  font-size: 11px;
}
#crew-assembly input {
  box-sizing: border-box;
  background: #fff7df80;
  color: var(--ink);
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 1px 4px 3px 1px;
  padding: 10px;
}
#crew-assembly button {
  padding: 10px 12px;
  font-size: 10px;
  font-weight: bold;
}
.crew-join-row {
  margin-top: 22px;
  display: grid;
  gap: 9px;
}
.crew-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 16px 0;
}
#crew-ready[aria-pressed="true"] {
  background: #a9c9ae;
}
#crew-status {
  min-height: 18px;
  color: #84432f;
  font-size: 12px;
  line-height: 1.4;
}
.crew-foot {
  display: block;
  line-height: 1.5;
}
body {
  font-family: var(--label);
}
button,
input,
textarea,
select {
  font-family: inherit;
}
button,
a,
input,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  transition:
    background-color 120ms,
    box-shadow 120ms,
    color 120ms;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid #276f71;
  outline-offset: 4px;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}
[hidden] {
  display: none !important;
}
/* Native semantics stay intact, but the drawing is ours. */
button,
#armory button {
  color: var(--ink);
  background: #e7d3a5;
  border: 2px solid var(--ink);
  border-radius: 3px 8px 4px 9px / 8px 3px 7px 4px;
  box-shadow: 2px 3px 0 #342d293b;
  font-family: var(--label);
}
button:hover:not(:disabled),
#armory button:hover:not(:disabled) {
  background-color: #f9edc9;
  box-shadow: 3px 4px 0 #342d2960;
}
button:active:not(:disabled),
#armory button:active:not(:disabled) {
  box-shadow: 0 1px 0 var(--ink);
}
input:not([type="range"]):not([type="checkbox"]),
textarea {
  background: #fff5d755;
  border: 0;
  border-bottom: 2px solid #65563e;
  border-radius: 0 0 45% 4% / 0 0 4px 3px;
  font-family: var(--hand);
}
input::placeholder {
  color: #776348;
  opacity: 1;
}
input[type="range"] {
  appearance: none;
  height: 8px;
  background: #b4a07a;
  border: 1.5px solid var(--ink);
  border-radius: 41% 15% 30% 10%;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 19px;
  height: 23px;
  background: #82b5a5;
  border: 2px solid var(--ink);
  border-radius: 40% 30% 45% 20%;
  box-shadow: 2px 2px 0 #342d2940;
}
input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 21px;
  background: #82b5a5;
  border: 2px solid var(--ink);
  border-radius: 40% 30% 45% 20%;
}
input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 2px 5px 1px 4px;
  background: #f8edcc;
  flex: 0 0 auto;
}
input[type="checkbox"]:checked {
  background: #76b6ac
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m3 9 5 6L17 3' stroke='%23342d29' fill='none' stroke-width='3'/%3E%3C/svg%3E")
    center / contain;
}
progress {
  appearance: none;
  border: 1px solid var(--ink);
  background: #b3a485;
}
progress::-webkit-progress-bar {
  background: #b3a485;
}
progress::-webkit-progress-value {
  background: repeating-linear-gradient(
    100deg,
    #6ea99b 0 9px,
    #5b9185 9px 11px
  );
}
progress::-moz-progress-bar {
  background: #6ea99b;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #897555 #dfcfa8;
}
.primary,
#armory .primary,
.pause-card > .primary {
  background: #37675d;
  color: #fff0c8;
  border: 3px solid #2d3c32;
  border-radius: 3px 10px 2px 6px / 8px 4px 6px 3px;
  font-family: var(--hand);
  font-size: 17px;
  letter-spacing: 0.6px;
  box-shadow:
    3px 5px 0 #342d2955,
    inset 0 0 0 2px #82a48770;
}
.primary:hover:not(:disabled),
#armory .primary:hover:not(:disabled),
.pause-card > .primary:hover:not(:disabled) {
  background: #294e47;
  color: #fff6da;
}

/* Enlistment desk: a playable world behind a signed, scuffed field document. */
#menu {
  background: linear-gradient(90deg, #25342b35, transparent 45%, #272a2470);
}
.menu-brand {
  top: 35px;
  left: 4vw;
  transform: rotate(-3deg);
  text-align: center;
}
.menu-brand > span {
  font: 900 clamp(38px, 5.3vw, 78px) / 1 var(--hand);
  letter-spacing: -4px;
  -webkit-text-stroke: 1px #f0e1b9;
  text-shadow:
    3px 4px 0 #342d29,
    -2px 1px 0 #342d29;
}
.menu-brand small {
  font: 800 18px var(--label);
  letter-spacing: 3px;
  background: var(--ribbon) center / 100% 100% no-repeat;
  padding: 12px 24px 15px;
  margin: 3px -12px 0;
}
.menu-brand small i {
  color: #e4b772;
  font: 24px var(--hand);
}
.menu-brand p {
  font: 14px var(--hand);
  letter-spacing: 0;
  margin: 10px 0;
}
.dispatch-note {
  position: absolute;
  left: 5vw;
  top: 42%;
  width: 260px;
  padding: 25px 30px 23px;
  color: var(--ink);
  background: var(--sheet) center / 100% 100%;
  transform: rotate(-6deg);
  filter: drop-shadow(5px 7px 0 #302c2940);
}
.dispatch-note::before,
.menu-card::before {
  content: "";
  position: absolute;
  left: 42%;
  top: -6px;
  width: 70px;
  height: 24px;
  transform: rotate(5deg);
  background: #d3bb82ba;
  border-left: 2px dotted #b6a278;
  border-right: 2px dotted #b6a278;
  pointer-events: none;
}
.dispatch-note > span {
  display: block;
  font: 8px var(--label);
  letter-spacing: 1px;
}
.dispatch-note > b {
  display: block;
  font: 30px/1.05 var(--hand);
  margin-top: 15px;
}
.dispatch-note svg {
  width: 75px;
  height: 75px;
  float: right;
  transform: rotate(12deg);
}
.dispatch-note p {
  font: 13px/1.6 var(--hand);
}
.dispatch-note > i {
  display: block;
  clear: both;
  font: 12px var(--hand);
  color: #8b4937;
}
.menu-card {
  width: clamp(390px, 35vw, 480px);
  right: 4vw;
  max-height: calc(100dvh - 36px);
  padding: 27px 30px 24px;
  background: var(--sheet) center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(7px 9px 0 #242a2340);
}
.dossier-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 8px var(--label);
  letter-spacing: 1px;
  border-bottom: 2px solid var(--ink);
  padding: 0 0 8px;
  margin-bottom: 11px;
}
.eyebrow {
  color: #6a563d;
  font-size: 9px;
  letter-spacing: 1px;
}
.menu-card h1 {
  font: 700 35px/1.02 var(--hand);
  margin: 10px 0;
  letter-spacing: -1.3px;
}
.menu-card h1 em {
  font-style: normal;
  color: #38685f;
}
.menu-card p {
  font: 12px/1.45 var(--label);
  color: #645239;
  margin-bottom: 10px;
}
.career-entry {
  margin: 12px 0 10px;
  padding: 7px 0;
  border-color: #96815c;
  font: 10px/1.4 var(--label);
}
.career-entry button {
  font-size: 10px;
  padding: 9px;
  white-space: nowrap;
  transform: rotate(-2deg);
  background: #c4d4b5;
}
.field-label {
  font-size: 9px;
  margin: 10px 0 5px;
}
.field-label span {
  color: #715d44;
}
#player-name {
  font: 17px var(--hand);
  height: 32px;
  padding: 2px 8px;
}
#family-picker {
  gap: 9px;
  padding: 4px 1px 1px;
}
#family-picker button {
  position: relative;
  background: #e2cca3;
  border: 2px solid #79664b;
  border-radius: 2px 6px 3px 1px;
  transform: rotate(-3deg);
  padding: 1px 3px 5px;
  box-shadow: 2px 3px 0 #342d2933;
}
#family-picker button:nth-child(even) {
  transform: rotate(3deg);
}
#family-picker button.selected {
  background: #c3d8bd;
  border: 2px solid #315d54;
}
#family-picker button.selected::after {
  content: "✓";
  position: absolute;
  right: -5px;
  top: -8px;
  color: #264c43;
  font: bold 24px var(--hand);
  transform: rotate(-12deg);
}
#family-picker img {
  width: 51px;
  height: 49px;
}
#family-picker span {
  font: bold 12px var(--hand);
}
.match-options {
  gap: 12px;
  margin-top: 13px;
  grid-template-columns: 1.3fr 1fr;
}
.match-options label,
.match-options .paper-choice-label {
  font-size: 9px;
  letter-spacing: 0.12em;
}
.choice-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  margin-top: 5px;
  border-top: 1px solid #8e7855;
  border-bottom: 2px solid #8e7855;
}
.choice-value {
  flex: 1;
  min-width: 0;
  text-align: center;
  font: 700 11px/1.25 var(--hand);
  letter-spacing: 0;
}
.choice-strip button,
#armory .choice-strip button {
  flex: 0 0 28px;
  padding: 0;
  height: 32px;
  border: 0;
  box-shadow: none;
  background: transparent;
  font: bold 27px/1 var(--hand);
}
.choice-locked {
  margin: 6px 0;
  font: 10px/1.5 var(--label);
  color: #67533b;
}
.choice-locked summary {
  cursor: pointer;
  padding: 4px 0;
}
.choice-locked > span {
  display: block;
  padding: 7px;
  background: #ddcba5;
}
.choice-strip button:hover:not(:disabled),
#armory .choice-strip button:hover:not(:disabled) {
  background: #a9c5b1;
  box-shadow: none;
}
#map-description {
  font: 10px var(--hand);
  color: #6c583e;
  margin: 5px 0;
}
.mode-picker {
  margin: 10px 0 12px;
  gap: 8px;
}
.mode-picker button {
  position: relative;
  padding: 5px 3px 7px;
  background: #dfcea9;
  border: 1.5px solid #8a7452;
  border-radius: 2px 7px 1px 4px;
}
.mode-picker button.selected {
  background: #f8ebc7;
  border: 2px solid #38665c;
}
.mode-picker button.selected::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 20%;
  width: 60%;
  height: 3px;
  background: #38665c;
  transform: rotate(-2deg);
  border-radius: 50%;
}
.mode-art {
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto 3px;
}
.mode-picker b {
  font: 700 11px var(--hand);
}
.mode-picker small {
  font-size: 8px;
  line-height: 1.3;
  margin: 3px 0;
}
#start {
  padding: 10px 16px;
}
.join-row {
  margin-top: 9px;
}
.join-row input {
  width: 62%;
  font-size: 12px;
  padding: 7px;
}
.join-row button {
  background: #dfc79b;
  border: 1.5px solid #6d573d;
  font-size: 9px;
}
.menu-foot {
  font: 9px/1.5 var(--label);
  margin-top: 10px;
  color: #68563d;
}
.menu-bottom {
  left: 4vw;
  font: 16px var(--hand);
}
.menu-bottom span {
  font: 9px var(--label);
}

/* Combat field kit. Scored cloth above, map and supplies tucked in the corners. */
#hud {
  text-shadow: 1px 2px 0 #292a23;
}
#map-panel {
  background: var(--sheet) center / 100% 100%;
  border: 0;
  border-radius: 0;
  padding: 16px 11px 11px;
  box-shadow: none;
  top: 19px;
  left: 20px;
  filter: drop-shadow(3px 5px 0 #26282255);
}
.map-annotation {
  position: absolute;
  right: 14px;
  top: 3px;
  font: 8px var(--hand);
  color: #6b5940;
}
#map-panel canvas {
  border: 1px solid #8d785466;
  border-radius: 3px 12px 2px 8px;
}
#map-panel > div {
  font: bold 10px var(--hand);
  padding: 5px 2px 0;
}
#match-header {
  top: 17px;
}
.scoreline {
  padding: 10px 17px 12px;
  border-radius: 0;
  background: var(--ribbon) center / 100% 100%;
  box-shadow: none;
  gap: 10px;
}
.scoreline strong {
  font: bold 36px/0.9 var(--hand);
}
#clock {
  font: 25px/1 var(--hand);
  border: 0;
  padding: 0 11px;
  min-width: 78px;
  color: #f8eac4;
}
.team-name {
  font: bold 9px/1.1 var(--label);
  max-width: 35px;
  white-space: normal;
}
.roster {
  gap: 3px;
}
.roster img {
  width: 27px;
  height: 31px;
  border-bottom-width: 4px;
  border-radius: 0 0 35% 20%;
}
#round-label {
  background: var(--sheet) center / 100% 100%;
  border: 0;
  padding: 9px 24px;
  margin-top: 3px;
  font: bold 12px var(--hand);
}
#objective-copy {
  display: table;
  margin: 5px auto 0;
  background: #302e29d9;
  padding: 3px 10px;
  border-radius: 30% 4% 25% 5% / 4px 2px 3px 2px;
  font-size: 11px;
  max-width: 360px;
}
#brand {
  font-family: var(--hand);
  font-size: 28px;
  transform: rotate(3deg);
}
#brand small {
  font: 9px var(--label);
}
#brand > span {
  font: 8px var(--label);
}
#feed > div {
  background: var(--ribbon) center / 100% 100%;
  border-radius: 0;
  padding: 7px 14px;
  font: 11px var(--label);
}
#training-progress {
  color: var(--ink);
  text-shadow: none;
  background: var(--sheet) center / 100% 100%;
  border-radius: 0;
  padding: 12px 14px;
  font: 10px/1.8 var(--hand);
  transform: rotate(1deg);
}
#squad {
  padding-left: 7px;
}
.squadmate img {
  border-radius: 43% 51% 39% 46%;
  border: 2px solid #303c32;
  background: #d6c69d;
}
.squadmate .life {
  height: 6px;
  border: 1px solid #292a23;
  transform: rotate(-1deg);
}
.squadmate .life i {
  background: #7bcbd0;
}
.squadmate > div > div:first-child {
  font-family: var(--hand);
}
.self {
  gap: 0;
}
.self > img {
  position: relative;
  z-index: 1;
  width: 75px;
  height: 79px;
  background: #e4d0a4;
  border: 4px solid #75c3c5;
  outline: 2px solid #30332b;
  border-radius: 43% 48% 41% 47%;
  transform: rotate(-4deg);
}
.self > div {
  margin-left: -9px;
  padding: 11px 17px 11px 18px;
  border-radius: 0;
  background: var(--ribbon) center / 100% 100%;
}
.meter {
  gap: 6px;
}
.meter > div {
  border: 2px solid #211f1b;
  border-radius: 3px 2px 4px 1px;
  height: 15px;
  transform: rotate(-1deg);
}
.meter i {
  background: repeating-linear-gradient(
    100deg,
    #e99479 0 12px,
    #d7836c 12px 14px
  );
  border-radius: 2px 1px 4px 1px;
}
.stamina i {
  background: repeating-linear-gradient(
    100deg,
    #79ced0 0 12px,
    #66b5b8 12px 14px
  );
}
.meter b {
  font-family: var(--hand);
}
#weapon {
  width: 252px;
  right: 24px;
  bottom: 34px;
}
.equipment-label {
  display: block;
  font: 8px var(--label);
  letter-spacing: 1px;
  margin: 0 2px 8px;
}
#weapon-name {
  display: block;
  background: var(--ribbon) center / 100% 100%;
  border-radius: 0;
  padding: 11px 15px 8px;
  font: bold 12px var(--hand);
  min-height: 36px;
}
#ammo {
  width: fit-content;
  min-width: 95px;
  max-width: 252px;
  margin-left: auto;
  background: var(--sheet) center / 100% 100%;
  color: var(--ink);
  text-shadow: none;
  padding: 3px 16px 8px;
  font: bold 40px/1.15 var(--hand);
  transform: rotate(2deg);
}
#ammo small {
  font: 17px/1.2 var(--hand);
  opacity: 1;
}
#reload {
  margin: 4px 4px 0;
  background: #282720;
  height: 5px;
}
#reload i {
  background: #e2bf71;
}
.slots {
  gap: 7px;
  margin-top: 10px;
}
.slots > div {
  flex: 1;
  width: auto;
  height: 58px;
  border: 0;
  border-radius: 0;
  background: var(--sheet) center / 100% 100%;
  color: var(--ink);
  text-shadow: none;
  transform: rotate(-3deg);
}
.slots > div:nth-child(even) {
  transform: rotate(3deg);
}
.slots > div.selected {
  box-shadow: none;
  filter: drop-shadow(0 3px 0 #70c8bd);
}
.slots > div.selected::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 10px;
  height: 3px;
  background: #286d62;
  border-radius: 50%;
  transform: rotate(-4deg);
}
.slots .slot-art {
  display: block;
  height: 47px;
}
.slots .weapon-drawing {
  height: 47px;
}
.slots .weapon-drawing svg {
  transform: rotate(-25deg);
}
.supply-art {
  width: 43px;
  height: 47px;
}
.slots kbd {
  bottom: -7px;
  left: 20px;
  border: 1px solid #46392b;
  border-radius: 1px 4px 1px 2px;
  font-size: 10px;
}
.slots b {
  right: 5px;
  top: 6px;
  font: bold 11px var(--hand);
}
#pause-button {
  bottom: 254px;
  width: 39px;
  height: 37px;
  border: 0;
  background: var(--sheet) center / 100% 100%;
  color: var(--ink);
  font: bold 18px var(--hand);
  border-radius: 0;
}
#quick-help {
  opacity: 0.9;
  bottom: 19px;
  font: 9px/2.3 var(--label);
}
kbd {
  border-radius: 2px 4px 1px 3px;
  border-color: #b4aa8e;
  background: #302e29b0;
}
#connection {
  font: 8px var(--label);
  opacity: 0.85;
}
#crosshair i {
  border-radius: 35% 20% 40% 15%;
}
#combat-feedback {
  font-family: var(--hand);
}
#crew-feedback {
  position: fixed;
  top: calc(50% + 103px);
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  max-width: 85vw;
  padding: 8px 18px;
  background: var(--ribbon) center / 100% 100%;
  color: #cce5ce;
  font: 13px var(--hand);
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
#result-detail {
  font: 12px var(--hand);
  margin: 9px 0;
}
.score-card td:first-child {
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .score-card th,
  .score-card td {
    padding: 6px 3px;
    font-size: 11px;
  }
}
#toast,
#cover-warning {
  background: var(--ribbon) center / 100% 100%;
  border: 0;
  border-radius: 0;
  padding: 10px 18px;
  color: #f7e4bc;
}
#cover-warning {
  top: calc(50% + 65px);
}
#interaction span {
  font-family: var(--hand);
}
.world-label .name {
  border-radius: 2px 6px 1px 4px;
}
.world-label.enemy .diamond {
  display: block;
  color: #f1a58a;
  font-size: 21px;
  line-height: 16px;
  text-shadow: -1px -1px var(--ink), 1px -1px var(--ink), -1px 1px var(--ink), 1px 1px var(--ink);
}
.world-label .rival-tag {
  display: block;
  padding: 2px 7px 1px;
  color: #fff0c9;
  background: #9e4437;
  border: 2px solid var(--ink);
  border-radius: 3px 1px 4px 2px / 1px 4px 2px 3px;
  box-shadow: inset 0 0 0 1px #d9856b, 1px 2px 0 #342d2970;
  transform: rotate(-3deg);
  font: bold 11px/1.25 var(--hand);
  letter-spacing: .06em;
  text-shadow: none;
}
/* Wounded yard targets wear a crooked paper score slip, not match health bars. */
.world-label .practice-health {
  display: block;
  width: max-content;
  margin: 2px auto;
  padding: 3px 8px 4px;
  color: var(--ink);
  background: #f5dfaa;
  border: 2px solid var(--ink);
  border-radius: 1px 5px 2px 4px;
  box-shadow: 2px 2px 0 #342d2950;
  transform: rotate(-3deg);
  font: bold 12px/1.2 var(--hand);
  text-shadow: none;
}
.world-label.parcel-label {
  color: #f4dfa7;
  font: 11px/1.25 var(--hand);
  text-shadow:
    -1px -1px #382d27,
    1px 1px #382d27,
    0 2px #382d27;
}
.parcel-label img {
  display: block;
  margin: 0 auto 2px;
  width: 38px;
  height: 31px;
  transform: rotate(-7deg);
  filter: drop-shadow(1px 2px 0 #382d2766);
}
.parcel-label small {
  display: block;
  margin-top: 2px;
  font: 10px var(--label);
  color: #fff4d6;
}
.world-label .site {
  font-family: var(--hand);
}
.crew-ping b,
.crew-ping small {
  font-family: var(--hand);
}

/* Records and interruptions are objects from the same messy department. */
#pause,
#capture-overlay,
#scoreboard {
  background: #202a247a;
  backdrop-filter: blur(3px);
}
.pause-card,
.capture-card,
.score-card,
#result,
#defeat-card {
  background: var(--sheet) center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(6px 8px 0 #24282255);
  color: var(--ink);
  text-shadow: none;
}
.pause-card {
  position: relative;
  width: 410px;
  max-width: 94vw;
  padding: 30px;
}
.margin-note {
  display: block;
  text-align: right;
  margin-bottom: 12px;
  font: 11px var(--hand);
  color: #8b523c;
  transform: rotate(2deg);
}
.pause-card h2,
.capture-card h2,
.score-card h2,
#result h2 {
  font-family: var(--hand);
  font-weight: bold;
}
.pause-card > button {
  border: 2px solid var(--ink);
  padding: 10px;
}
.pause-card .muted {
  color: #6c583d;
}
.pause-card label {
  font-family: var(--hand);
}
#training-rack {
  margin: 12px 0;
  padding: 12px;
  text-align: left;
  border: 2px dashed #846b49;
  background: #eee1bd;
}
#training-rack summary {
  cursor: pointer;
  font: bold 14px var(--hand);
}
#training-rack p,
#training-rack legend {
  font: 11px/1.5 var(--label);
}
#training-rack fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
#training-rack .rack-editor section {
  border-bottom: 2px solid #a58d65;
  margin: 12px 0;
  padding-bottom: 12px;
}
#training-rack h4 {
  margin: 12px 0 0;
  font: bold 18px var(--hand);
  transform: rotate(-2deg);
}
#training-rack button {
  background: #e9d6a7;
  border: 2px solid var(--ink);
  border-radius: 2px 6px 3px 1px;
  padding: 9px;
  font: bold 12px var(--hand);
}
#training-rack fieldset > button {
  display: block;
  width: 100%;
  margin: 8px 0;
}
#training-rack .weapon-drawing {
  width: 100%;
  height: 75px;
}
#training-rack .paper-choice-label {
  display: block;
  margin-top: 10px;
}
#training-rack [role="status"] {
  color: #4a6350;
  min-height: 2.5em;
}
#training-rack summary:focus-visible,
#training-rack button:focus-visible {
  outline: 2px dashed var(--ink);
  outline-offset: 3px;
}
.card-illustration {
  width: 87px;
  height: 87px;
  display: block;
  margin: 0 auto 12px;
  transform: rotate(-9deg);
}
.capture-card {
  padding: 30px;
}
.score-card {
  padding: 28px;
  max-height: 90dvh;
  overflow: auto;
}
.score-card h2 {
  font-size: 29px;
}
.score-card th {
  font: 12px var(--hand);
  border-bottom: 2px solid #736044;
}
.score-card td {
  border-bottom-style: dashed;
  font-size: 12px;
}
#result {
  padding: 28px 40px;
}
#result-score {
  font: bold 42px var(--hand);
  color: #37675d;
}
#result #career-receipt {
  color: #3c6154;
  font: 12px/1.5 var(--label);
}
.result-seal {
  position: absolute;
  right: -15px;
  top: -25px;
  width: 75px;
  height: 83px;
  transform: rotate(14deg);
}
#result small {
  color: #6b573c;
}
#result.has-ballot {
  top: 50%;
  width: min(620px, 92vw);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  pointer-events: auto;
  padding: 20px 28px;
}
#map-ballot {
  border-top: 2px dashed #8d7857;
  margin-top: 15px;
  padding-top: 8px;
}
#map-ballot[hidden] {
  display: none;
}
#map-ballot h3 {
  font: 20px var(--hand);
  margin: 6px 0 10px;
  transform: rotate(-1deg);
}
#map-ballot-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
#map-ballot-choices button {
  background: #e6d4ab url("/ui/paper.svg") center / 100% 100%;
  border: 2px solid #6c5a40;
  border-radius: 3px 8px 5px 2px;
  color: #473b2b;
  box-shadow: 2px 3px 0 #78634940;
  padding: 6px 4px 9px;
  font: 14px/1.25 var(--hand);
  min-height: 99px;
  transform: rotate(-1deg);
}
#map-ballot-choices button:nth-child(2) {
  transform: rotate(1deg);
}
#map-ballot-choices button::before {
  content: "";
  display: block;
  width: 72px;
  height: 54px;
  margin: 0 auto 4px;
  background: url("/ui/battlegrounds.svg") 0 0 / 216px 54px;
}
#map-ballot-choices button[data-map="market"]::before {
  background-position: -72px 0;
}
#map-ballot-choices button[data-map="orchard"]::before {
  background-position: -144px 0;
}
#map-ballot-choices button.selected {
  border: 3px solid #37675d;
  color: #244e45;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: 3px 3px 0 #37675d50;
}
#map-ballot-choices button:focus-visible {
  outline: 3px dashed #37675d;
  outline-offset: 3px;
}
#map-ballot > small {
  display: block;
  margin-top: 8px;
  line-height: 1.4;
}
@media (max-width: 450px) {
  #result.has-ballot {
    padding: 15px;
  }
  #map-ballot-choices {
    gap: 5px;
  }
  #map-ballot-choices button {
    font-size: 12px;
  }
}
#defeat-card {
  padding: 18px 28px;
  width: min(460px, 92vw);
}
#defeat-summary {
  display: block;
  font: bold 17px var(--hand);
}
.late-bolt-note {
  margin: 8px 0;
  padding: 5px 8px;
  border: 2px dashed currentColor;
  color: #316b65;
  font: bold 15px/1.3 var(--hand);
  transform: rotate(-1deg);
}
#defeat-card:not(.hidden) ~ #toast {
  visibility: hidden;
}
#defeat-hint {
  margin: 8px 0;
  font: 12px/1.4 var(--label);
}
#defeat-window {
  opacity: 0.75;
  margin-bottom: 7px;
}
#spectator-strip {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 2px dashed #8b7654;
  font-family: var(--hand);
}
#spectator-strip > small:first-child {
  color: #316b65;
  letter-spacing: 0.08em;
}
#spectator-count {
  margin-left: 8px;
  font-style: normal;
}
.spectator-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 9px;
  align-items: center;
  margin: 7px 0;
}
#spectator-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: bold 19px var(--hand);
}
.spectator-row button {
  pointer-events: auto;
  min-height: 36px;
  padding: 0;
  font: bold 26px var(--hand);
  transform: rotate(-4deg);
  background: #d5dbc0;
}
.spectator-row button:last-child {
  transform: rotate(4deg);
}
#spectator-help {
  font: 10px/1.4 var(--label);
}
#last-exchange {
  margin: 14px 0;
  padding: 12px 8px;
  border-top: 3px double #8b7654;
  border-bottom: 2px dashed #8b7654;
  text-align: left;
  overflow-wrap: anywhere;
}
#last-exchange b,
#last-exchange strong {
  font: bold 13px var(--hand);
  color: #8b4937;
}
#last-exchange p,
#last-exchange li {
  font: 11px/1.5 var(--label);
  margin: 7px 0;
}
#last-exchange ul {
  padding-left: 18px;
  margin: 10px 0;
}
#last-exchange small {
  font: 10px var(--hand);
}
@media (max-height: 600px) {
  #defeat-card {
    bottom: 100px;
    padding: 10px 20px;
  }
  #defeat-card span {
    font-size: 13px;
    margin: 4px 0;
  }
  #defeat-card small {
    font-size: 10px;
  }
}
#defeat-card b {
  color: #8b4937;
  font-family: var(--hand);
}
#loading {
  background: #e4d4ae;
  font: 28px var(--hand);
}
#loading::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 125px;
  top: calc(50% - 155px);
  left: calc(50% - 55px);
  background: url("/portraits/nub-base.svg") center / contain no-repeat;
  transform: rotate(-8deg);
}

/* Armory: an open quartermaster's ledger, weapon scraps, cloth rank ribbons. */
#armory {
  background: #eadbb4;
  border: 3px solid #44382c;
  border-radius: 5px 13px 3px 8px;
  font: 14px var(--label);
  box-shadow: 7px 9px 0 #1e25236b;
}
#armory::backdrop {
  background: #17251fc9;
  backdrop-filter: blur(4px);
}
.armory-header {
  background: #dac59b;
  border-bottom: 3px double #786044;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 27px,
    #65563710 27px 28px
  );
}
.armory-header h2 {
  font: bold 39px/1.05 var(--hand);
  letter-spacing: -1.5px;
}
.armory-header em {
  color: #38685f;
  font-style: normal;
}
.armory-header small,
.prestige-section small {
  font: 9px var(--label);
  letter-spacing: 1.5px;
}
#armory h3 {
  font-family: var(--hand);
}
.career-ribbon {
  margin: 10px 18px 0;
  padding: 22px 22px;
  background: var(--ribbon) center / 100% 100%;
  gap: 28px;
}
.career-ribbon b {
  font: bold 18px var(--hand);
  color: #f4d58b;
}
.career-ribbon span {
  font-size: 11px;
}
.armory-account {
  margin: 0 18px;
  padding: 16px 12px;
  border-color: #9b8057;
}
.armory-account > div {
  border-left: 3px double #8b7657;
  padding-left: 12px;
}
#armory .armory-account button {
  font-size: 11px;
  max-width: 190px;
  background: #c4d5b7;
}
#account-fallback {
  margin: 12px 30px;
  padding: 14px;
  background: #f6e8c3;
  border: 2px dashed #8c795b;
}
#account-window-link {
  color: #235c54;
  text-decoration-thickness: 2px;
}
#account-fallback summary {
  cursor: pointer;
  padding: 12px 0;
  font-family: var(--hand);
}
#account-code {
  width: 100%;
  min-height: 60px;
}
#kit-slots {
  padding-bottom: 0;
  gap: 8px;
  border-bottom: 2px solid #917751;
  margin: 0 30px;
  padding-left: 0;
  padding-right: 0;
}
#kit-slots button {
  border-radius: 8px 13px 0 0;
  border-bottom: 0;
  font: bold 12px var(--hand);
  transform: rotate(-1deg);
  padding: 10px 18px;
}
#kit-slots .selected {
  background: #acc7ad;
  box-shadow: none;
}
#kit-editor {
  background: linear-gradient(
    90deg,
    transparent 49.8%,
    #8c75562e 50%,
    transparent 50.3%
  );
}
.kit-column h3 {
  border-bottom: 2px solid #816c4d;
  padding-bottom: 10px;
  font-size: 19px;
}
.weapon-catalog {
  gap: 14px;
  padding: 3px;
}
#armory .weapon-card {
  background: var(--sheet) center / 100% 100%;
  border: 0;
  border-radius: 0;
  padding: 13px 13px 14px;
  transform: rotate(-1.5deg);
  box-shadow: 2px 4px 0 #58472c29;
}
#armory .weapon-card:nth-child(even) {
  transform: rotate(1.5deg);
}
#armory .weapon-card:disabled {
  opacity: 0.6;
  filter: grayscale(0.65);
}
#armory .weapon-card.equipped {
  background-color: #b9d0b5;
  border: 0;
  box-shadow: 0 4px 0 #4a8574;
}
#armory .weapon-card.equipped::after {
  content: "ISSUED ✓";
  position: absolute;
  top: 8px;
  right: 8px;
  border: 1.5px solid #3d6c58;
  color: #3d6c58;
  transform: rotate(9deg);
  font: bold 9px var(--label);
  padding: 3px;
}
.weapon-card strong {
  font: bold 16px var(--hand);
}
.weapon-card small {
  font: 10px var(--label);
}
.weapon-drawing {
  height: 78px;
}
.weapon-details {
  padding: 12px 4px;
}
.weapon-details h4 {
  margin: 22px 0 6px;
  font: 15px var(--hand);
  transform: rotate(-1deg);
}
.workshop-slip {
  margin: 15px 0;
  padding: 12px;
  background: #e4d4aa;
  border-top: 2px dashed #867451;
  border-bottom: 2px solid #867451;
  transform: rotate(-0.35deg);
}
.weapon-details .workshop-slip h4 {
  margin: 0 0 8px;
  color: #4d7160;
}
.workshop-slip > strong,
.workshop-slip > small {
  display: block;
  margin-bottom: 6px;
}
.workshop-rhythm { max-width: 360px; margin: 9px 0 0; }
.workshop-rhythm svg { display: block; width: 100%; height: auto; }
.workshop-rhythm-key { color: #574433; letter-spacing: .08em; }
.workshop-slip table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  font: 11px/1.6 var(--label);
  text-align: right;
}
.workshop-slip th:first-child {
  text-align: left;
}
.workshop-slip td,
.workshop-slip th {
  padding: 3px;
  border-bottom: 1px dashed #9b8a67;
}
.workshop-slip .workshop-pair {
  font: 13px/1.5 var(--hand);
}
.mastery-slip {
  margin: 15px 0;
  padding: 13px 12px;
  background: #eee2bd;
  border: 2px solid #756349;
  border-radius: 2% 1% 3% 1% / 3% 2% 1% 3%;
  box-shadow: 3px 3px 0 #b5a17b;
}
.weapon-details .mastery-slip h4 {
  margin: 0 0 7px;
  color: #755244;
}
.mastery-slip > strong,
.mastery-slip > small {
  display: block;
  margin-bottom: 8px;
}
.mastery-route summary {
  cursor: pointer;
  list-style: none;
  border-top: 1px dashed #978260;
  padding: 10px 0 2px;
  font: bold 14px var(--hand);
}
.mastery-route summary::-webkit-details-marker {
  display: none;
}
.mastery-route summary::before {
  content: "+ ";
}
.mastery-route[open] summary::before {
  content: "− ";
}
.mastery-route summary:focus-visible {
  outline: 2px dashed #584e3a;
  outline-offset: 3px;
}
.mastery-route ol {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.mastery-route li {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 3px 8px;
  padding: 9px 0;
  border-top: 1px dashed #b09a73;
}
.mastery-route li > b {
  grid-row: span 2;
  align-self: start;
  border: 1px solid currentColor;
  padding: 3px 1px;
  text-align: center;
  transform: rotate(-5deg);
  font: bold 13px var(--hand);
}
.mastery-route li:nth-child(even) > b {
  transform: rotate(4deg);
}
.mastery-route li > span {
  font: 13px/1.4 var(--hand);
}
.mastery-route li.earned > b,
.mastery-route li.earned > small {
  color: #3d6c58;
}
.finish-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
  margin: 12px 0;
}
#armory .finish-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 9px;
  min-width: 0;
  background: var(--sheet) center / 100% 100%;
  border: 0;
  border-bottom: 3px solid #a59773;
  text-align: left;
  color: #453c30;
}
#armory .finish-card:disabled {
  opacity: 0.82;
  cursor: default;
}
#armory .finish-card.selected {
  border-bottom-color: #4a8574;
  background-color: #b9d0b5;
}
.finish-card .weapon-drawing {
  height: 58px;
}
.finish-card strong {
  font: 12px var(--hand);
}
.finish-card span,
.finish-card small {
  font: 10px/1.5 var(--label);
}
.finish-card progress {
  margin-top: auto;
  width: 100%;
}
.weapon-details > strong {
  display: block;
  font: 11px/1.6 var(--label);
  background: #d8c298;
  padding: 7px 9px;
  border-left: 3px solid #756244;
}
.weapon-details p {
  font-size: 12px;
  min-height: 0;
}
.weapon-details label {
  font: 13px var(--hand);
}
.weapon-details .paper-choice-label {
  font: 13px var(--hand);
  margin-top: 16px;
}
.weapon-details .choice-value {
  font-size: 13px;
}
.weapon-details small {
  font-size: 11px;
  line-height: 1.5;
  color: #6b553c;
}
#armory progress {
  height: 10px;
  border-radius: 1px 3px 2px 4px;
}
.armory-save {
  border-bottom: 3px double #8e7756;
}
.armory-save .primary {
  width: auto;
}
.unlock-section {
  border-top: 0;
}
#unlock-road {
  position: relative;
  gap: 12px;
  padding: 8px 0;
  border-top: 2px dashed #92794f;
}
#unlock-road span {
  background: var(--sheet) center / 100% 100%;
  border: 0;
  font: 12px var(--hand);
  padding: 12px 15px;
  transform: rotate(-2deg);
}
.prestige-section {
  background: #d3b87b url("/ui/seal.svg") 97% 10px / 90px 100px no-repeat;
  padding-right: 125px;
  border-top: 3px double #806742;
}
.prestige-section button {
  min-width: 150px;
}
.record-section {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 28px,
    #79664818 28px 29px
  );
}
.record-section p {
  font: 12px/1.6 var(--hand);
}
#prestige-review {
  background: #edc9aa;
  border: 2px dashed #8b523d;
}
#prestige-review > button {
  margin: 10px 8px 0 0;
}

/* Scale the kit, not the aim point. Menus remain scrollable on small displays. */
@media (min-width: 1500px) {
  #map-panel canvas {
    width: 180px;
    height: 169px;
  }
  #training-progress {
    top: 260px;
  }
  #vitals {
    bottom: 36px;
  }
  .menu-card {
    padding: 30px 35px;
  }
  .menu-card h1 {
    font-size: 42px;
  }
  .mode-art {
    height: 48px;
    width: 48px;
  }
  .menu-card .mode-picker {
    margin: 14px 0;
  }
}
@media (max-width: 1100px) {
  .dispatch-note {
    left: 4vw;
    width: 220px;
    padding: 23px;
  }
  .dispatch-note > b {
    font-size: 26px;
  }
  .menu-brand {
    left: 3vw;
  }
  .menu-brand p {
    font-size: 11px;
  }
  .menu-brand small {
    font-size: 14px;
  }
  .menu-card {
    right: 3vw;
    width: 390px;
    padding: 23px 27px;
  }
  #weapon {
    width: 224px;
    right: 18px;
  }
  .equipment-label {
    font-size: 7px;
  }
  .slots kbd {
    left: 17px;
  }
  #brand {
    font-size: 22px;
  }
  .roster img {
    width: 23px;
    height: 28px;
  }
  .scoreline {
    gap: 7px;
    padding: 10px 14px;
  }
}
@media (max-height: 800px) {
  .menu-brand {
    top: 22px;
  }
  .dispatch-note {
    top: 40%;
  }
  .menu-card {
    padding-top: 19px;
    padding-bottom: 19px;
  }
  .menu-card h1 {
    font-size: 31px;
    margin: 8px 0;
  }
  .dossier-heading {
    padding-bottom: 5px;
    margin-bottom: 7px;
  }
  .career-entry {
    margin: 8px 0;
    padding: 5px 0;
  }
  .menu-card .field-label {
    margin-top: 8px;
  }
  #family-picker img {
    height: 42px;
  }
  .mode-art {
    width: 30px;
    height: 30px;
  }
  .menu-card .mode-picker {
    margin: 8px 0;
  }
  .menu-foot {
    margin-top: 7px;
  }
}
@media (max-width: 850px) {
  .dispatch-note {
    display: none;
  }
  .menu-brand {
    top: 30px;
    left: 3vw;
  }
  .menu-brand > span {
    font-size: 38px;
  }
  .menu-brand small {
    font-size: 10px;
    letter-spacing: 1px;
    padding: 8px 14px;
  }
  .menu-brand p {
    max-width: 180px;
    font-size: 10px;
  }
  #weapon {
    width: 196px;
  }
  .slots > div {
    height: 50px;
  }
  .slots .slot-art,
  .slots .weapon-drawing,
  .supply-art {
    height: 40px;
  }
  .supply-art {
    width: 36px;
  }
  .slots kbd {
    left: 12px;
  }
  #ammo {
    font-size: 34px;
  }
  #ammo small {
    font-size: 13px;
  }
  #weapon-name {
    font-size: 10px;
  }
  #pause-button {
    bottom: 232px;
  }
  .meter > div {
    width: 75px;
  }
  .self > img {
    width: 60px;
    height: 65px;
  }
  #quick-help {
    display: none;
  }
}
@media (max-width: 650px) {
  #menu {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    gap: 12px;
  }
  .menu-brand {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
  .menu-brand > span {
    font-size: 30px;
    letter-spacing: -2px;
  }
  .menu-brand small {
    margin-top: 0;
    padding: 6px 15px;
  }
  .menu-brand p {
    display: none;
  }
  .menu-card {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: min(390px, 96vw);
    max-height: none;
    flex-shrink: 0;
  }
  #map-panel {
    top: 12px;
    left: 10px;
    padding: 14px 8px 9px;
  }
  #map-panel canvas {
    width: 90px;
    height: 85px;
  }
  #map-panel > div {
    font-size: 8px;
  }
  .map-annotation {
    font-size: 6px;
    top: 4px;
  }
  #match-header {
    top: 10px;
    left: 65%;
    width: 65%;
  }
  .scoreline strong {
    font-size: 28px;
  }
  #clock {
    font-size: 20px;
    min-width: 65px;
    padding: 0 4px;
  }
  #round-label {
    font-size: 10px;
    padding: 7px 14px;
  }
  #vitals {
    left: 9px;
    bottom: 35px;
  }
  .self > img {
    width: 44px;
    height: 50px;
    border-width: 3px;
  }
  .self > div {
    padding: 7px 10px 7px 16px;
  }
  .meter {
    gap: 3px;
  }
  .meter b {
    font-size: 14px;
    width: 24px;
  }
  .meter span {
    font-size: 16px;
    width: 14px;
  }
  .meter > div {
    width: 45px;
    height: 11px;
  }
  #weapon {
    width: 157px;
    right: 10px;
    bottom: 35px;
  }
  #weapon-name {
    font-size: 9px;
    padding: 9px;
  }
  .equipment-label {
    display: none;
  }
  .slots {
    gap: 3px;
  }
  .slots kbd {
    left: 10px;
    font-size: 9px;
  }
  .slots > div {
    height: 44px;
  }
  .slots .slot-art,
  .slots .weapon-drawing,
  .supply-art {
    height: 34px;
  }
  .supply-art {
    width: 31px;
  }
  #pause-button {
    bottom: 211px;
    right: 10px;
  }
  #connection {
    left: 10px;
    font-size: 7px;
    letter-spacing: 0;
  }
  .prestige-section {
    padding-right: 30px;
    background-position: 96% 9px;
    background-size: 55px 65px;
  }
  .prestige-section > div {
    padding-right: 24px;
  }
  #kit-editor {
    padding: 20px;
    background: none;
  }
  .armory-header {
    padding: 22px;
  }
  .armory-header h2 {
    font-size: 30px;
  }
  .career-ribbon {
    gap: 15px;
  }
  #kit-slots {
    margin: 0 20px;
  }
  #kit-slots button {
    padding: 9px 12px;
    font-size: 10px;
  }
  .armory-account {
    margin: 0 12px;
  }
  #result {
    padding: 25px;
  }
  .result-seal {
    width: 55px;
    right: -5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}
body.reduced button {
  transition: none;
}
@media (forced-colors: active) {
  button,
  #armory button,
  .choice-strip {
    border: 2px solid ButtonText;
  }
  .menu-card,
  .pause-card,
  .capture-card,
  .score-card,
  #result,
  #defeat-card {
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }
}

/* The crew's post pouch: quiet during combat, expanded while typing. */
.online-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.online-actions button {
  padding: 10px;
  background: #bdd1b5;
  font: bold 12px var(--hand);
}
.online-actions small {
  font: 9px/1.5 var(--label);
  text-align: center;
  color: #69553d;
}
/* Keep the post in the crew column so roster size and viewport height cannot
   put its launcher over a teammate's health. The open sheet uses the viewport. */
#crew-chat {
  position: relative;
  margin-bottom: 12px;
  width: 280px;
  max-width: 45vw;
  pointer-events: auto;
  text-shadow: none;
  color: var(--ink);
}
#chat-open {
  font: 10px var(--hand);
  padding: 6px 10px;
  background: #e3d2ac;
}
#chat-lines {
  max-height: 100px;
  overflow-y: auto;
  font: 10px/1.5 var(--label);
  background: #f0e1b9e8;
  border-radius: 2px 8px 3px 5px;
}
#chat-lines:empty {
  display: none;
}
#chat-lines > div {
  padding: 5px 9px;
  overflow-wrap: anywhere;
  border-bottom: 1px dashed #8b76564d;
}
#chat-lines b {
  color: #305c53;
}
#chat-lines button {
  display: none;
  padding: 3px 7px;
  margin: 4px 4px 0 0;
  font-size: 9px;
}
#crew-chat.chat-open {
  position: fixed;
  margin-bottom: 0;
  z-index: 30;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  max-width: 94vw;
  background: var(--sheet) center / 100% 100%;
  padding: 22px;
  filter: drop-shadow(5px 8px 0 #272d2555);
}
#crew-chat.chat-open #chat-lines {
  max-height: 35vh;
}
#crew-chat.chat-open #chat-lines button {
  display: inline-block;
}
#chat-form {
  margin-top: 12px;
}
#chat-form > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
#chat-form button {
  padding: 8px 12px;
  font: 11px var(--hand);
}
#chat-form label {
  display: block;
  font: 13px var(--hand);
  margin-top: 12px;
}
#chat-input {
  width: 100%;
  margin-bottom: 10px;
}
#chat-status {
  display: block;
  font: 11px/1.4 var(--label);
  margin-top: 8px;
}
@media (max-width: 850px), (max-height: 650px) {
  #crew-chat:not(.chat-open) {
    width: 220px;
  }
  #crew-chat:not(.chat-open) #chat-lines {
    max-height: 65px;
  }
}

#result-armory {
  pointer-events: auto;
  margin: 8px auto;
  padding: 9px 15px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid currentColor;
  transform: rotate(-1deg);
  font: 14px var(--hand);
}

/* A pinned ink ribbon remains readable above the pause sheet. */
#idle-warning {
  position: fixed;
  z-index: 150;
  top: 18%;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 18px 26px;
  background: var(--ribbon) center / 100% 100% no-repeat;
  color: #f7e4bc;
  text-align: center;
  font: 15px/1.4 var(--hand);
  pointer-events: none;
}
#idle-warning strong, #idle-warning span { display: block; }
#idle-warning strong { color: #f1bd73; font-size: 19px; }
#armory #armory-idle-warning {
  background: var(--ribbon) center / 100% 100% no-repeat;
  color: #f7e4bc;
  padding: 14px 22px;
  font: 16px/1.4 var(--hand);
}
/* Original paper landmarks for the two additional battlegrounds. */
#map-ballot-choices button[data-map="dust"]::before {
  background: url("/ui/dusty-dispatch.svg") center / contain no-repeat;
}
#map-ballot-choices button[data-map="belfry"]::before {
  background: url("/ui/rimebound-belfry.svg") center / contain no-repeat;
}

@media (min-width: 600px) {
  #map-ballot-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #map-ballot-choices button { font-size: 12px; }
  #map-ballot-choices button::before { width: 60px; height: 45px; background-size: 180px 45px; }
  #map-ballot-choices button[data-map="market"]::before { background-position: -60px 0; }
  #map-ballot-choices button[data-map="orchard"]::before { background-position: -120px 0; }
  #map-ballot-choices button[data-map="dust"]::before,
  #map-ballot-choices button[data-map="belfry"]::before { background-size: contain; background-position: center; }
}