/* Fonts are self-hosted, so the game also works offline. */

@font-face {
  font-family: "Big Shoulders Stencil";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/big-shoulders-stencil-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Big Shoulders Stencil";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/big-shoulders-stencil-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Courier Prime";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/courier-prime-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Courier Prime";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/courier-prime-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Courier Prime";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/courier-prime-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Courier Prime";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/courier-prime-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-stencil: "Big Shoulders Stencil", Impact, "Arial Narrow", sans-serif;
  /* Headings and buttons are stencilled, typed-in text is typewritten, and
     everything else is in the system's own sans. */
  --font-type: "Courier Prime", "Courier New", monospace;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --paper: #ece0c0;
  --paper-shade: #d6c49a;
  --ink: #33281c;
  --ink-soft: #6a5842;
  --ink-faint: rgba(51, 40, 28, 0.18);

  --tin-light: #6e6a60;
  --tin: #48453e;
  --tin-dark: #2b2924;
  --tin-edge: #1c1a17;
  --tin-text: #efe6d0;
  --tin-muted: #b3ab98;

  --paint-light: #cf5b3e;
  --paint: #b4432b;
  --paint-dark: #82301c;
  --paint-edge: #5a1e10;
  --paint-text: #f6ecd6;

  --green-light: #82b453;
  --green: #5c8a33;
  --green-dark: #3a5f1d;

  --brass: #e0bd68;
  --brass-dark: #a98236;
  --signal-good: #a6d46f;
  --signal-bad: #f0a63a;

  /* Survivors' hunger stages: bar colors, and darker text for labels on metal. */
  --satiated: #6b9a3a;
  --satiated-text: #3d5e1c;
  --hungry: #e0921f;
  --hungry-text: #84500a;
  --starving: var(--paint);
  --starving-text: var(--paint-dark);

  /* A lighter grain, over the whole map. */
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.17 0 0 0 0 0.08 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Grain used on paper, tin and paint. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.08 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--tin-dark);
  color: var(--ink);
  font: 16px/1.4 var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Text the player types is typewritten. */
input {
  font-family: var(--font-type);
  user-select: text;
}

[hidden] {
  display: none !important;
}

.sprite {
  display: none;
}

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.muted {
  color: var(--ink-soft);
  font-size: 14px;
}

#map {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#map:active {
  cursor: grabbing;
}

/* The map is printed on aged paper. */
#map-paper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(80, 50, 18, 0.38) 100%),
    var(--grain-light);
}

/* The legend is printed over the map, with a paper halo that keeps it
   readable over dark forest and light dust alike. */
#map-legend {
  --halo: 0 0 1.5px var(--paper), 0 0 1.5px var(--paper), 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 14px;
  color: var(--ink);
  pointer-events: none;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#scale-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 2px;
}

#scale-label {
  font: 800 14px var(--font-stencil);
  letter-spacing: 0.05em;
  text-shadow: var(--halo);
}

#location {
  display: flex;
  flex-direction: column;
  font-family: var(--font-stencil);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: var(--halo);
}

#location-label {
  font-size: 24px;
}

/* "Day · dark in 3 h": searching in the dark finds less. */
#location-daylight {
  margin-top: 3px;
  font-size: 12px;
}

/* A hazard sticker on the Geiger counter: the ground here is hot. */
#fallout {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--hungry);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#fallout[hidden] {
  display: none;
}

/* A ring rippling out at each count, faster deeper in the fallout. */
.fallout-ring {
  position: absolute;
  inset: -2px;
  border: 2px solid var(--hungry);
  border-radius: 50%;
  pointer-events: none;
  animation: fallout-ring 1s ease-out forwards;
}

@keyframes fallout-ring {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(2.4); opacity: 0; }
}

#fallout .icon {
  width: 24px;
  height: 24px;
}

/* A scrap of paper with the rescue mission, jotted down from the radio. */
#mission-note {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 90px);
  margin: 0 14px;
  padding: 8px 14px 8px 10px;
  border-radius: 2px;
  transform: rotate(-1deg);
  animation: note-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

#mission-note .icon {
  width: 26px;
  height: 26px;
  color: var(--paint);
}

.mission-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#mission-title {
  font: 800 18px/1.1 var(--font-stencil);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#mission-detail {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

/* Alternating ink and paper segments, like on a printed map. */
#scale-line {
  height: 7px;
  border: 1.5px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 25%, var(--paper) 25% 50%);
  box-shadow: 0 0 0 1.5px rgba(236, 224, 192, 0.7);
}

/* Surfaces */

.paper {
  background:
    var(--grain),
    radial-gradient(130% 100% at 50% 35%, transparent 55%, rgba(120, 88, 40, 0.22)),
    var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tin {
  background:
    var(--grain),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--tin-light), var(--tin) 45%, var(--tin-dark));
  color: var(--tin-text);
}

/* Buttons */

button {
  font: inherit;
  color: inherit;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 6px;
  font-family: var(--font-stencil);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 80ms, box-shadow 80ms;
}

.btn:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}

.btn:disabled {
  cursor: default;
}

/* Painted metal sign: the main call to action. */
.btn-paint {
  background:
    var(--grain),
    linear-gradient(180deg, var(--paint-light), var(--paint) 55%, var(--paint-dark));
  color: var(--paint-text);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 4px 0 var(--paint-edge),
    0 8px 14px rgba(0, 0, 0, 0.35);
}

.btn-paint:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 1px 0 var(--paint-edge),
    0 3px 6px rgba(0, 0, 0, 0.3);
}

.btn-tin {
  background:
    var(--grain),
    linear-gradient(180deg, var(--tin-light), var(--tin) 55%, var(--tin-dark));
  color: var(--tin-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 4px 0 var(--tin-edge),
    0 8px 14px rgba(0, 0, 0, 0.35);
}

.btn-tin:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 1px 0 var(--tin-edge),
    0 3px 6px rgba(0, 0, 0, 0.3);
}

.btn-paint:disabled,
.btn-tin:disabled {
  background:
    var(--grain),
    linear-gradient(180deg, #7b776d, #5f5c54);
  color: #b9b2a2;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 0 #34322d,
    0 8px 14px rgba(0, 0, 0, 0.3);
}

/* Ink-stamped outline, used on paper. */
.btn-ink {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2.5px var(--ink);
}

.btn-ink:active:not(:disabled) {
  transform: translateY(2px);
  background: var(--ink-faint);
}

.btn-ink:disabled {
  opacity: 0.35;
}

.btn-square {
  width: 48px;
  height: 48px;
  padding: 0;
}

.btn-square .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

.btn-main {
  min-height: 58px;
  min-width: 220px;
  font-size: 24px;
}

.btn-main .icon {
  width: 26px;
  height: 26px;
  stroke-width: 2.6;
}

/* Shown while the shelter position is being averaged. */
#action-button.locating::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 6px;
  height: 4px;
  border-radius: 2px;
  background: var(--brass);
  animation: locating 10s linear forwards;
}

#action-button.locating .icon {
  animation: spin 2s linear infinite;
}

@keyframes locating {
  from { width: 0; }
  to { width: calc(100% - 12px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Map controls */

#side-controls {
  position: fixed;
  right: 12px;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-50%);
}

/* Status bar */

#top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

#game-header,
#debug-panel {
  pointer-events: auto;
}

/* A strip of darker tin above the status bar, with the menu button and the
   GPS signal. The menu button leaves the game for the start screen, so it is
   only an icon. */
#top-strip {
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top) 14px 0 4px;
  background:
    var(--grain),
    linear-gradient(180deg, #3a3833, var(--tin-dark));
  border-bottom: 1px solid var(--tin-edge);
}

/* The tabs: a row of tin under the top strip, four alike. */
#tabs {
  display: flex;
  padding: 0 2px;
  border-bottom: 2px solid var(--tin-edge);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.4);
}

#tabs .tab {
  gap: 5px;
  padding: 0 2px;
  font-size: 16px;
  letter-spacing: 0.04em;
}

#tabs .tab .icon {
  width: 18px;
  height: 18px;
}

/* On the narrowest phones the tab names alone have to do; the counts keep
   their icons, which tell them apart. */
@media (max-width: 349px) {
  #tabs .tab:not(.tab-count) .icon {
    display: none;
  }
}

.tab {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--tin-muted);
  font-family: var(--font-stencil);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.tab .icon {
  width: 20px;
  height: 20px;
}

.tab-menu {
  flex: 0 0 48px;
}

.tab-menu .icon {
  width: 24px;
  height: 24px;
}

.tab:active {
  background: rgba(0, 0, 0, 0.25);
}

.tab:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: -3px;
}

.tab[aria-selected="true"] {
  color: var(--tin-text);
}

.tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--brass);
}

/* In the shelter, where its actions work. */
.tab.here .icon {
  color: var(--green-light);
}

.hud-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-stencil);
}

.hud-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* A full backpack stands out, since anything found now won't fit. */
#backpack-status.full {
  color: var(--signal-bad);
}

.gps {
  margin-left: auto;
}

.gps.good {
  color: var(--signal-good);
}

.gps.bad {
  color: var(--signal-bad);
}

.signal-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}

.signal-bars i {
  width: 4px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.signal-bars i:nth-child(1) { height: 25%; }
.signal-bars i:nth-child(2) { height: 50%; }
.signal-bars i:nth-child(3) { height: 75%; }
.signal-bars i:nth-child(4) { height: 100%; }

.signal-bars i.on {
  background: currentColor;
}

/* Bottom: notes, hint and actions */

#bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 16px calc(env(safe-area-inset-bottom) + 18px);
  pointer-events: none;
}

#bottom > * {
  pointer-events: auto;
}

/* A note lying on the map. */
.note {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  margin-bottom: 4px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  transform: rotate(-1deg);
  animation: note-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

.note .icon {
  width: 26px;
  height: 26px;
}

@keyframes note-in {
  from {
    opacity: 0;
    transform: translateY(16px) rotate(-4deg) scale(0.92);
  }
}

#action-hint {
  margin: 0;
  padding: 5px 12px;
  border-radius: 3px;
  background: rgba(33, 30, 26, 0.85);
  color: var(--tin-text);
  font-size: 14px;
  text-align: center;
}

#actions {
  display: flex;
  gap: 12px;
}

/* Pages: the tabs other than Wastes, on paper over the map, below the bars. */

.page {
  position: fixed;
  inset: 0;
  padding: calc(var(--header-height, 110px) + 20px) 16px calc(env(safe-area-inset-bottom) + 90px);
  overflow-y: auto;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 40, 28, 0.4) transparent;
}

.page-content {
  width: min(420px, 100%);
  margin: 0 auto;
}

/* The map's own controls and notes only belong to the Wastes tab. */
body[data-tab="backpack"] :is(#map-legend, #mission-note, #side-controls, #actions, #action-hint),
body[data-tab="party"] :is(#map-legend, #mission-note, #side-controls, #actions, #action-hint),
body[data-tab="shelter"] :is(#map-legend, #mission-note, #side-controls, #actions, #action-hint) {
  display: none !important;
}

/* Start screen: the logo, a word on safety and the way into the game. It
   covers the map completely. */

.start-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  padding: calc(env(safe-area-inset-top) + 32px) 16px calc(env(safe-area-inset-bottom) + 24px);
  overflow-y: auto;
  box-shadow: none;
}

.start-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(320px, 100%);
  margin: auto;
  text-align: center;
}

.start-logo {
  margin: 0 0 22px;
}

.start-logo img {
  display: block;
  width: min(250px, 72vw);
  height: auto;
}

.start-small {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

/* A full-screen layer over the start screen, with a column of text. */
.layer-content {
  width: min(420px, 100%);
  margin: auto;
}

.start-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(250px, 100%);
  margin: 30px 0 32px;
}

/* Full-screen overlays: welcome and missing location */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  padding: 24px 16px;
  background: rgba(24, 20, 15, 0.72);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 230, 208, 0.35) transparent;
}

.card {
  width: min(400px, 100%);
  margin: auto;
  padding: 30px 24px 26px;
  border-radius: 3px;
}

.card h1 {
  margin: 0 0 10px;
  font-family: var(--font-stencil);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.icon-hero {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  color: var(--paint);
}

.card h1.wordmark {
  display: inline-block;
  font-size: 68px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* A stroke of red paint under the title. */
.wordmark::after {
  content: "";
  display: block;
  height: 7px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--paint);
  transform: rotate(-1.5deg);
}

.tagline {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
}

.steps {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1.5px dashed var(--ink-faint);
}

.steps li:last-child {
  border-bottom: 1.5px dashed var(--ink-faint);
}

.steps .icon {
  width: 28px;
  height: 28px;
  color: var(--paint);
  stroke-width: 2.3;
}

.card .btn {
  width: 100%;
  margin-top: 6px;
}

/* Dialogs */

/* Thin scrollbars in ink, here and on the overlays. Phones draw their own
   overlay scrollbars, so this mostly matters on desktop. */
dialog {
  width: min(380px, calc(100% - 32px));
  padding: 26px 22px 22px;
  border: 0;
  border-radius: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 40, 28, 0.4) transparent;
}

dialog[open] {
  animation: dialog-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(20px) rotate(-1.5deg) scale(0.95);
  }
}

dialog::backdrop {
  background: rgba(24, 20, 15, 0.65);
}

dialog h2,
.page h2,
.layer h2 {
  margin: 0 0 8px;
  font-family: var(--font-stencil);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

dialog h3,
.page h3,
.layer h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1.5px dashed var(--ink-faint);
  color: var(--ink-soft);
  font-family: var(--font-stencil);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

dialog p,
.page p,
.layer p {
  margin: 0 0 8px;
}

dialog input,
.layer input {
  width: 100%;
  margin-top: 8px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 2.5px solid var(--ink);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.3);
  color: var(--ink);
  font: 700 22px var(--font-type);
  outline: none;
}

dialog input:focus,
.layer input:focus {
  border-color: var(--paint);
}

#new-game-screen h2 {
  text-align: center;
}

.dialog-buttons.new-game-buttons {
  margin-top: 16px;
  padding-bottom: 20px;
  border-bottom: 1.5px dashed var(--ink-faint);
}

/* The rule sits under the buttons instead, setting the World ID apart. */
#new-game-screen h3 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#new-game-screen input {
  margin-top: 4px;
}

#new-game-screen .world-id-note {
  margin-top: 14px;
}

/* Selectable, so it can be copied and sent to friends. */
.world-id {
  color: var(--ink);
  font-weight: 600;
  user-select: text;
}

.landmark-art {
  display: block;
  width: min(260px, 100%);
  height: auto;
  margin: -6px auto 14px;
  filter: drop-shadow(0 3px 5px rgba(40, 28, 15, 0.35));
}

#landmark-dialog h2,
#landmark-dialog p,
#enemy-dialog h2,
#enemy-dialog p,
#encounter-dialog h2,
#encounter-dialog p {
  text-align: center;
}

/* Right after a discovery, the line under the name announces it. */
#landmark-visited.found {
  color: var(--paint);
  font-family: var(--font-stencil);
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
}

.dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.menu-buttons .btn {
  justify-content: flex-start;
}

.survivor-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portrait {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tin-light), var(--tin-dark));
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
  color: var(--brass);
}

.portrait .icon {
  width: 36px;
  height: 36px;
}

#survivor-name {
  font-family: var(--font-stencil);
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-title .icon {
  width: 34px;
  height: 34px;
  color: var(--paint);
  stroke-width: 2.3;
}

.panel-title h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.panel-load {
  margin-left: auto;
  font-family: var(--font-stencil);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

#backpack-party {
  margin: 6px 0 0;
}

.btn-small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 16px;
}

.btn-small .icon {
  width: 18px;
  height: 18px;
}

.backpack-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 10px;
  padding: 0;
  list-style: none;
}

.backpack-items li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 10px;
  border-radius: 3px;
  background: rgba(51, 40, 28, 0.07);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
  transition: background 150ms;
}

.backpack-items li.dropping {
  background: rgba(180, 67, 43, 0.12);
}

/* Items and manuals are dropped whole, so a marked one is crossed out. */
.backpack-items li.single.dropping .resource-name {
  text-decoration: line-through;
  text-decoration-color: var(--paint);
}

.resource-icon {
  width: 26px;
  height: 26px;
}

.resource-name {
  font-family: var(--font-stencil);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resource-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.drop-count {
  color: var(--paint);
  font-family: var(--font-stencil);
  font-size: 18px;
  font-weight: 800;
}

.steppers {
  display: flex;
  gap: 6px;
}

.btn-step {
  width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.btn-step .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.6;
}

.btn-ink:disabled {
  opacity: 0.3;
  transform: none;
  background: transparent;
}

.resource-grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resource-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 2px 6px;
  border-radius: 3px;
  background: rgba(51, 40, 28, 0.07);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}

.resource-grid .icon {
  width: 26px;
  height: 26px;
}

.resource-count {
  font-family: var(--font-stencil);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}

.resource-label {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Gear in storage and workshop recipes, each with its own button. */
.item-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.item-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 10px;
  border-radius: 3px;
  background: rgba(51, 40, 28, 0.07);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}

.item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.item-text .resource-name {
  font-size: 18px;
  line-height: 1.1;
}

.item-detail {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}

/* "Built", stamped in place of the button. */
.item-stamp {
  margin-right: 6px;
  padding: 2px 8px;
  border: 2px solid var(--paint);
  border-radius: 3px;
  color: var(--paint);
  font: 800 16px var(--font-stencil);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.manual-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.manual-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
}

.manual-list .icon {
  width: 18px;
  height: 18px;
}

#workshop-hint {
  margin-top: 6px;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.radio-row p {
  flex: 1;
  margin: 0;
}

#radio-listen {
  flex: none;
}

/* While listening, the radio icon shakes with the static. */
#radio-listen.listening .icon {
  animation: rummage 300ms linear infinite;
}

.count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  letter-spacing: 0;
}

/* People in the party and nearby: Info opens their card, the other button
   moves them in or out of the party. */
.person-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.person-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 6px 6px 6px 10px;
  border-radius: 3px;
  background: rgba(51, 40, 28, 0.07);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}

.person-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.person-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.person-name {
  overflow-wrap: anywhere;
  font-family: var(--font-stencil);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.person-detail {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}

#party-place-empty {
  margin-top: 8px;
}

/* A drop of blood for each wound, overlapping like a smear. */
.wound-drops {
  display: inline-flex;
  flex: none;
}

.wound-drops .icon {
  width: 16px;
  height: 16px;
  fill: var(--paint);
  stroke: var(--paint-edge);
  stroke-width: 1.5;
}

.wound-drops .icon + .icon {
  margin-left: -7px;
}

/* The player has no hunger, so their name tag shows only their wounds. */
.survivor-badges li.player :is(.hunger-stage, .hunger-bar, .hunger-time) {
  display: none;
}

/* Back from a person's card to the party. */
.back-link {
  margin: -6px 0 6px -8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-stencil);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.back-link:active {
  background: rgba(51, 40, 28, 0.1);
}

#person-where {
  margin-top: 4px;
}

#person-condition {
  margin-top: 14px;
}

/* Survivors as stamped metal name tags, each with a bar running down to the
   end of their current hunger stage. */
.survivor-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.survivor-badges li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 12px;
  padding: 6px 12px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #cfc8b6, #9d9785);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  color: var(--tin-dark);
}

.survivor-badge-name {
  overflow-wrap: anywhere;
  font-family: var(--font-stencil);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hunger-stage {
  justify-self: end;
  color: var(--satiated-text);
  font-family: var(--font-stencil);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hunger-bar {
  height: 7px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.hunger-fill {
  display: block;
  height: 100%;
  background: var(--satiated);
  transition: width 300ms ease-out;
}

.hunger-time {
  justify-self: end;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.survivor-badges [data-stage="hungry"] .hunger-stage {
  color: var(--hungry-text);
}

.survivor-badges [data-stage="hungry"] .hunger-fill {
  background: var(--hungry);
}

.survivor-badges [data-stage="starving"] .hunger-stage {
  color: var(--starving-text);
}

.survivor-badges [data-stage="starving"] .hunger-fill {
  background: var(--starving);
}

/* A wound runs across the whole name tag, under the hunger bar. */
.survivor-badges .wound {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--starving-text);
}

.wound .sick-icon {
  width: 18px;
  height: 18px;
}

.wound-label {
  font-family: var(--font-stencil);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wound-time {
  font-size: 12px;
  font-weight: 600;
}

.wound .treat {
  margin-left: auto;
  min-height: 30px;
  font-size: 14px;
}

/* A warning dot on the Shelter tab while survivors there go hungry. */
#shelter-tab[data-hunger="hungry"]::after,
#shelter-tab[data-hunger="starving"]::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hungry);
  box-shadow: 0 0 0 2px var(--tin-edge);
}

#shelter-tab[data-hunger="starving"]::after {
  background: var(--starving);
  animation: alert-pulse 1.2s ease-in-out infinite;
}

@keyframes alert-pulse {
  50% { transform: scale(1.25); }
}

/* Debug panel */

#debug-panel {
  margin: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(33, 30, 26, 0.92);
  color: var(--tin-text);
  font-size: 12px;
}

#debug-panel summary {
  color: var(--tin-muted);
  cursor: pointer;
}

#debug-panel dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 6px 0;
}

#debug-panel dt {
  color: var(--tin-muted);
}

#debug-panel dd {
  margin: 0;
}

#debug-panel .hint {
  margin: 4px 0;
  color: var(--tin-muted);
}

#debug-panel .debug-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

#debug-panel button {
  padding: 5px 10px;
  border: 0;
  border-radius: 4px;
  background: #4a463e;
  color: var(--tin-text);
  font-size: 12px;
  cursor: pointer;
}

#debug-panel button.active {
  background: var(--paint);
}

/* Animations and feedback */

#action-button.searching .icon {
  animation: rummage 0.5s ease-in-out infinite;
}

@keyframes rummage {
  25% { transform: translate(-3px, 1px) rotate(-12deg); }
  75% { transform: translate(3px, -1px) rotate(10deg); }
}

#reward-card {
  position: fixed;
  left: 50%;
  top: 38%;
  width: 240px;
  margin-left: -120px;
  padding: 24px 16px 16px;
  border-radius: 3px;
  text-align: center;
  pointer-events: none;
  transform: rotate(-1.5deg);
  animation: reward-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

#reward-card.empty {
  animation:
    reward-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1.4),
    shake 400ms 350ms;
}

#reward-card.leaving {
  animation: reward-out 300ms ease-in forwards;
}

@keyframes reward-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.6) rotate(-8deg);
  }
}

@keyframes reward-out {
  to {
    opacity: 0;
    transform: translateY(-16px) scale(0.9) rotate(2deg);
  }
}

@keyframes shake {
  20%, 60% { transform: translateX(-6px) rotate(-1.5deg); }
  40%, 80% { transform: translateX(6px) rotate(-1.5deg); }
}

#reward-medal {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tin-light), var(--tin-dark));
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink), 0 6px 12px rgba(0, 0, 0, 0.3);
  color: var(--brass);
}

#reward-medal .icon {
  width: 40px;
  height: 40px;
  stroke-width: 2.2;
  animation: wiggle 600ms 200ms ease-in-out;
}

#reward-card.empty #reward-medal {
  color: #b9b2a2;
}

@keyframes wiggle {
  25% { transform: rotate(-14deg) scale(1.15); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); }
}

.reward-title {
  font-family: var(--font-stencil);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

#reward-amount {
  color: var(--paint);
}

#reward-card.empty #reward-amount {
  color: var(--ink-soft);
}

#reward-note {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
}

/* What a search turned up: a medal for the find and the enemy's stash after a fight. */
#loot-dialog {
  width: min(320px, calc(100% - 32px));
  text-align: center;
}

.loot-medal {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tin-light), var(--tin-dark));
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--ink), 0 8px 16px rgba(0, 0, 0, 0.35);
  color: var(--brass);
}

.loot-medal .icon {
  width: 54px;
  height: 54px;
  stroke-width: 2.2;
}

#loot-dialog[open] .loot-medal {
  animation: portrait-in 420ms 80ms both cubic-bezier(0.2, 0.9, 0.3, 1.5);
}

#loot-dialog[open] .loot-medal .icon {
  animation: wiggle 600ms 400ms ease-in-out;
}

/* Nothing of this resource fitted in the backpack. */
.loot-find.none .loot-medal {
  color: #b9b2a2;
}

#loot-dialog[open] .loot-find.none .loot-medal {
  animation:
    portrait-in 420ms 80ms both cubic-bezier(0.2, 0.9, 0.3, 1.5),
    shake 400ms 500ms;
}

.loot-title {
  font-size: 40px;
}

.loot-amount {
  color: var(--paint);
}

.loot-find.none .loot-amount {
  color: var(--ink-soft);
}

/* A landmark's loot: one smaller medal per resource, side by side. */
#loot-place {
  margin: 0 0 12px;
  font-family: var(--font-stencil);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
}

#loot-finds.several {
  display: flex;
  justify-content: center;
  gap: 14px;
}

#loot-finds.several .loot-medal {
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
}

#loot-finds.several .loot-medal .icon {
  width: 36px;
  height: 36px;
}

#loot-finds.several .loot-title {
  font-size: 24px;
}

#loot-finds.several .loot-find:nth-child(2) .loot-medal {
  animation-delay: 160ms, 580ms;
}

#loot-finds.several .loot-find:nth-child(3) .loot-medal {
  animation-delay: 240ms, 660ms;
}

#loot-note {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
}

#loot-stash h3 {
  justify-content: center;
}

.loot-stash-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.loot-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 14px 3px 3px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-stencil);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
}

.loot-chip.none {
  opacity: 0.45;
}

.chip-medal {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tin-light), var(--tin-dark));
  color: var(--brass);
}

.chip-medal .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

/* An icon flying from the reward card into the status bar. */
.flyer {
  position: fixed;
  z-index: 10;
  color: var(--brass);
  stroke-width: 2.2;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

.bump {
  animation: bump 380ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes bump {
  40% { transform: scale(1.3); }
}

#survivor-dialog[open] .portrait,
#manual-dialog[open] .portrait,
#radio-dialog[open] .portrait {
  animation: portrait-in 500ms 150ms both cubic-bezier(0.2, 0.9, 0.3, 1.5);
}

/* The enemy's strength against the player's, side by side, and then their rolls. */
.duel {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 12px 0 4px;
}

.duel-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 120px;
  text-align: center;
}

.duel-label {
  color: var(--ink-soft);
  font-family: var(--font-stencil);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Strength in grey until it is rolled; tall enough for a roll, so nothing jumps. */
.duel-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  color: var(--ink-soft);
  font-family: var(--font-stencil);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
}

.duel-value small {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
}

.duel-value.rolled {
  color: var(--ink);
  font-size: 54px;
  font-weight: 900;
}

.duel-value.enemy.rolled {
  color: var(--paint-dark);
}

.duel-value.flip {
  animation: flip 420ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

@keyframes flip {
  from { transform: rotateY(90deg); }
}

/* The choices at each step of a fight: fighting or running, then which weapon. */
.encounter-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.encounter-choices .btn {
  justify-content: space-between;
  width: 100%;
}

/* A long detail wraps, never the name: "Combat knife" stays on one line. */
.encounter-choices .btn > :first-child {
  white-space: nowrap;
}

.choice-detail {
  text-align: right;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#encounter-message {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 600;
}

/* Smaller than a landmark's, to leave room for the fight below. */
.encounter-art {
  width: min(160px, 100%);
  margin-bottom: 8px;
}

#encounter-dialog[open] .encounter-art {
  animation:
    portrait-in 300ms 100ms both cubic-bezier(0.2, 0.9, 0.3, 1.5),
    shake 400ms 400ms;
}

@keyframes portrait-in {
  from { transform: scale(0) rotate(-30deg); }
}

.menu-toggles {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 2px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-stencil);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.toggle .switch {
  position: relative;
  width: 48px;
  height: 26px;
  margin-left: auto;
  border-radius: 13px;
  background: #8f8778;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35);
  transition: background 150ms;
}

.toggle .switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f3ecdc, #c9c1ad);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform 150ms;
}

.toggle[aria-checked="true"] .switch {
  background: var(--paint);
}

.toggle[aria-checked="true"] .switch::after {
  transform: translateX(22px);
}

.toggle:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}