/*
 * Paper Tank. Cream graph paper is the ground, ink is every outline, yellow
 * is the field. The game draws its own paper on the canvas; this sheet is
 * for everything printed on top of it — the screens, the HUD, the sticks.
 */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/fonts/nunito-700.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/caveat-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins-700.woff2") format("woff2");
}

:root {
  --font-display: "Caveat", "Poppins", ui-sans-serif, system-ui, sans-serif;
  /* A box drawn by hand: four different corners, none of them quite round. */
  --hand: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --font-body: "Nunito", ui-sans-serif, system-ui, sans-serif;

  --color-ink: #191919;
  --color-cream: #fffff0;
  --color-yellow: #ffd212;
  --color-highlight: #ffed00;
  --color-green: #02602a;
  --color-muted: #55524a;
  --color-dim: #6d6a60;
  --grid-cream: #f2f2e0;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* The game shows and hides whole screens with the `hidden` attribute, and a
   display rule on the screen itself would otherwise win over the browser's. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Display type: headings are lowercase statements or wide caps, never both. */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.95;
  text-wrap: balance;
}
.micro {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* The stage is the whole window. No card, no border: the window is the card. */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100dvh;
  background: var(--color-cream);
  color: var(--color-ink);
  --color-focus: var(--color-ink);
}
.stage > * { flex: 1; }

.tank {
  position: relative;
  min-height: inherit;
  height: 100%;
  overflow: hidden;
  background: var(--color-cream);
  color: var(--color-ink);
  /* Only the game itself owns the gestures. While a menu is up the page
     scrolls and the buttons behave like buttons. */
  touch-action: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
}
.tank .tank__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.tank[data-state="playing"] {
  touch-action: none;
}
.tank[data-state="playing"] .tank__canvas {
  cursor: crosshair;
}
.tank__fallback {
  position: absolute;
  inset: auto 1rem 1rem;
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.tank[data-state] .tank__fallback { display: none; }

/* A hit washes the whole field for a moment — cheaper to read than a number. */
.tank[data-hurt]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(214, 54, 43, 0.28);
  pointer-events: none;
  z-index: 3;
}

/* ---- screens ------------------------------------------------------- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--color-ink) 55%, transparent);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.screen--brief {
  background: color-mix(in srgb, var(--color-ink) 30%, transparent);
  pointer-events: none;
}

.card {
  width: min(30rem, 100%);
  padding: 1.5rem 1.6rem 1.7rem;
  background: var(--color-cream);
  border: 2px solid var(--color-ink);
  border-radius: var(--hand);
  box-shadow: 0 6px 0 0 var(--color-ink);
  text-align: left;
  transform: rotate(-0.5deg);
}
.card--wide { width: min(36rem, 100%); transform: rotate(0.35deg); }
.card__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--color-muted);
}
.card__title {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 4rem);
  line-height: 0.95;
  transform: rotate(-1.2deg);
  transform-origin: left bottom;
}
.card__lead {
  margin: 0.8rem 0 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.3rem;
}
.card__actions--stack { flex-direction: column; align-items: stretch; }
.card__foot { margin: 1.1rem 0 0; color: var(--color-muted); }
.card__foot b { color: var(--color-ink); }

.btn {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem 1.3rem;
  border-radius: var(--hand);
  border: 2px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--color-ink);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover, .btn:focus-visible {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--color-ink);
}
.btn--go { background: var(--color-yellow); }
.btn[aria-pressed="false"] { opacity: 0.55; }

.keys {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.85rem;
}
.keys li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.keys__combo {
  display: inline-flex;
  gap: 0.25rem;
  flex: 0 0 9.5rem;
}
.keys__label { color: var(--color-muted); }
kbd {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.42rem;
  border: 2px solid var(--color-ink);
  border-radius: 6px;
  background: var(--color-cream);
  box-shadow: 0 2px 0 0 var(--color-ink);
}
.keys--touch { display: none; }

.brief {
  text-align: center;
  color: var(--color-cream);
  text-shadow: 0 3px 0 rgba(25, 25, 25, 0.5);
}
.brief__number { margin: 0; letter-spacing: 0.18em; }
.brief__name {
  margin: 0.4rem 0 0;
  font-size: clamp(2.6rem, 12vw, 5.5rem);
  line-height: 1;
}
.brief__objective {
  margin: 0.6rem 0 0;
  font-size: 1rem;
  font-weight: 700;
}

.tally {
  display: grid;
  gap: 0.35rem;
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
}
.tally div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px dotted color-mix(in srgb, var(--color-ink) 30%, transparent);
  padding-bottom: 0.3rem;
}
.tally dt { color: var(--color-muted); }
.tally dd {
  margin: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---- heads-up display ---------------------------------------------- */

.hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.7rem;
  padding-top: max(0.7rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(0.7rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.7rem, env(safe-area-inset-right, 0px));
  pointer-events: none;
}
.hud__top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.hud__spacer { flex: 1; }
.hud__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-cream);
  box-shadow: 0 3px 0 0 var(--color-ink);
  font-size: 0.72rem;
}
.hud__chip b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.hud__chip i {
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.hud__chip--combo:empty { display: none; }
.hud__chip--combo {
  background: var(--color-yellow);
  font-weight: 800;
  font-size: 0.85rem;
}
.hud__heat { letter-spacing: 0.1em; }
.hud__heat[data-stars="0"] { opacity: 0.5; }
.hud__heat[data-stars="3"], .hud__heat[data-stars="4"], .hud__heat[data-stars="5"] {
  background: var(--color-yellow);
}
.hud__pause {
  pointer-events: auto;
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-cream);
  box-shadow: 0 3px 0 0 var(--color-ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  color: var(--color-ink);
}

.hud__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
}
.hud__meters { display: grid; gap: 0.35rem; }
.meter {
  position: relative;
  width: min(11rem, 38vw);
  height: 1.1rem;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-cream);
  box-shadow: 0 3px 0 0 var(--color-ink);
  overflow: hidden;
}
.meter__fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(var(--fill, 1));
  transition: transform 140ms linear;
}
.meter--hp .meter__fill { background: var(--color-yellow); }
.meter--boost { height: 0.6rem; width: min(7rem, 26vw); }
.meter--boost .meter__fill { background: var(--color-green); }
.meter__label {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  line-height: 1.05rem;
  font-size: 0.55rem;
}
.meter--boost .meter__label { display: none; }

.hud__weapon {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-yellow);
  box-shadow: 0 3px 0 0 var(--color-ink);
}
.hud__weapon b { font-size: 0.85rem; }
.hud__weapon i {
  font-style: normal;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

/* ---- thumb sticks --------------------------------------------------- */

.stick {
  position: absolute;
  z-index: 3;
  width: 7rem;
  height: 7rem;
  margin: -3.5rem 0 0 -3.5rem;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--color-ink) 45%, transparent);
  background: rgba(255, 255, 240, 0.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms linear;
}
.stick[data-on] { opacity: 1; }
.stick__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-yellow);
  border: 2px solid var(--color-ink);
  box-shadow: 0 3px 0 0 var(--color-ink);
}
.stick--right .stick__knob { background: var(--color-green); }

/* A touch device gets the touch legend and loses the keyboard one.
   By media query first, so the card is the right height on the very first
   paint rather than only after something has touched it — five rows of keys
   nobody has push the Play button off a phone screen. The attribute covers
   the hybrid case: a laptop with a touchscreen, once a finger arrives. */
@media (pointer: coarse) {
  .keys li:not(.keys--touch) { display: none; }
  .keys--touch { display: flex; }
}
.tank[data-touch] .keys li:not(.keys--touch) { display: none; }
.tank[data-touch] .keys--touch { display: flex; }


@media (max-width: 560px) {
  .keys__combo { flex-basis: 7.5rem; }
  .card { padding: 1.15rem 1.15rem 1.3rem; }
  .card__lead { font-size: 0.9rem; }
  .card__actions { margin-top: 1rem; }
  .hud__chip i { display: none; }
  .screen { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transition: none; transform: none; }
  .meter__fill { transition: none; }
}

/* ---- mods ------------------------------------------------------------- */
.mods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.7rem;
  margin-top: 1.1rem;
}
.mod {
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem 0.95rem 0.85rem;
  font: inherit;
  text-align: left;
  color: var(--color-ink);
  background: var(--color-cream);
  border: 2px solid var(--color-ink);
  border-radius: var(--hand);
  box-shadow: 0 4px 0 0 var(--color-ink);
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
}
.mod:nth-child(odd) { --tilt: -0.6deg; }
.mod:nth-child(even) { --tilt: 0.5deg; }
.mod b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.mod span { font-size: 0.86rem; line-height: 1.35; color: var(--color-muted); }
.mod i { font-style: normal; color: var(--color-muted); }
.mod[data-state="on"] { background: var(--color-yellow); }
.mod[data-state="on"] i { color: var(--color-ink); }
.mod[data-state="locked"] {
  cursor: default;
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  opacity: 0.75;
}
.mod:not([disabled]):hover { transform: translateY(2px) rotate(var(--tilt, 0deg)); box-shadow: 0 2px 0 0 var(--color-ink); }

/* ---- a word from the top --------------------------------------------- */
.toast {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 4.2rem);
  left: 50%;
  z-index: 6;
  padding: 0.6rem 1.1rem;
  background: var(--color-yellow);
  border: 2px solid var(--color-ink);
  border-radius: var(--hand);
  box-shadow: 0 4px 0 0 var(--color-ink);
  transform: translate(-50%, -1rem) rotate(-1deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.toast[data-on] { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }

/* The chips lean a little too, like stickers. */
.hud__chip, .hud__pause, .hud__weapon, .meter { border-radius: var(--hand); }
.hud__chip:nth-child(odd) { transform: rotate(-1deg); }
.hud__chip:nth-child(even) { transform: rotate(0.8deg); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ---- the garage -------------------------------------------------------- */
.garage .mod { grid-template-columns: auto 1fr; column-gap: 0.8rem; align-items: start; }
.garage .mod b { grid-column: 2; }
.garage .mod span, .garage .mod i { grid-column: 2; }
.garage .mod .bars { grid-column: 2; display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 0.2rem 0.45rem; margin-top: 0.3rem; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.garage .mod .bar { height: 0.42rem; border: 1.5px solid var(--color-ink); border-radius: var(--hand); background: linear-gradient(to right, var(--color-ink) calc(var(--fill) * 100%), transparent 0); }
.garage .mod[data-state="on"] .bar { background: linear-gradient(to right, var(--color-ink) calc(var(--fill) * 100%), var(--color-cream) 0); }
.garage .swatch { grid-row: 1 / span 4; width: 2.2rem; height: 1.5rem; margin-top: 0.3rem; border: 2px solid var(--color-ink); border-radius: var(--hand); background: var(--swatch); position: relative; }
.garage .swatch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.6rem; height: 0.6rem; transform: translate(-50%, -50%) rotate(8deg); border: 2px solid var(--color-ink); border-radius: 50%; background: var(--color-yellow); }

.btn--quiet { border-style: dashed; box-shadow: none; }
.btn--quiet:hover, .btn--quiet:focus-visible { box-shadow: none; }

/* ---- credits ----------------------------------------------------------- */
.credits { margin: 1rem 0 0; padding: 0; list-style: none; columns: 2; column-gap: 1.4rem; font-size: 0.86rem; line-height: 1.4; }
.credits li { break-inside: avoid; margin-bottom: 0.45rem; }
.credits b { font-family: var(--font-display); font-size: 1.15rem; margin-right: 0.35rem; }
.credits a { color: var(--color-ink); text-underline-offset: 0.15em; }
.credits span { color: var(--color-muted); }
.card__lead code { font-size: 0.85em; }
@media (max-width: 560px) { .credits { columns: 1; } }

/* A card taller than the window scrolls inside its screen instead of losing
   its feet; `safe` keeps the top reachable when it does. */
.screen { overflow-y: auto; align-items: safe center; }
.garage { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
.garage .mod b { font-size: 1.35rem; }
.garage .mod span { font-size: 0.8rem; }
.card--garage { width: min(56rem, 100%); }
.card--garage .garage { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

:root {
  --torn-a: polygon(0.00% 0.25%, 2.27% 0.62%, 4.55% 1.02%, 6.82% 0.51%, 9.09% 0.56%, 11.36% 0.65%, 13.64% 0.20%, 15.91% 0.56%, 18.18% 0.69%, 20.45% 0.87%, 22.73% 0.10%, 25.00% 0.33%, 27.27% 0.10%, 29.55% 0.89%, 31.82% 0.76%, 34.09% 0.05%, 36.36% 1.08%, 38.64% 1.06%, 40.91% 0.72%, 43.18% 0.68%, 45.45% 0.17%, 47.73% 0.02%, 50.00% 0.58%, 52.27% 0.07%, 54.55% 0.21%, 56.82% 0.27%, 59.09% 0.03%, 61.36% 0.51%, 63.64% 0.48%, 65.91% 0.93%, 68.18% 0.57%, 70.45% 0.70%, 72.73% 0.55%, 75.00% 0.73%, 77.27% 0.50%, 79.55% 0.31%, 81.82% 1.10%, 84.09% 1.10%, 86.36% 0.92%, 88.64% 0.78%, 90.91% 0.35%, 93.18% 0.25%, 95.45% 0.32%, 97.73% 0.08%, 100.00% 0.42%, 99.65% 2.27%, 99.26% 4.55%, 99.66% 6.82%, 99.16% 9.09%, 99.25% 11.36%, 100.00% 13.64%, 99.82% 15.91%, 99.20% 18.18%, 99.59% 20.45%, 99.14% 22.73%, 99.65% 25.00%, 99.94% 27.27%, 99.45% 29.55%, 99.31% 31.82%, 99.76% 34.09%, 99.92% 36.36%, 99.71% 38.64%, 99.15% 40.91%, 99.33% 43.18%, 99.90% 45.45%, 99.78% 47.73%, 99.91% 50.00%, 99.95% 52.27%, 99.30% 54.55%, 99.84% 56.82%, 99.51% 59.09%, 99.61% 61.36%, 99.83% 63.64%, 99.36% 65.91%, 99.88% 68.18%, 99.43% 70.45%, 99.90% 72.73%, 99.63% 75.00%, 99.81% 77.27%, 99.76% 79.55%, 99.15% 81.82%, 99.29% 84.09%, 99.73% 86.36%, 99.22% 88.64%, 99.81% 90.91%, 99.65% 93.18%, 99.25% 95.45%, 99.44% 97.73%, 99.96% 100.00%, 97.73% 98.91%, 95.45% 99.77%, 93.18% 99.72%, 90.91% 99.15%, 88.64% 99.64%, 86.36% 99.67%, 84.09% 99.92%, 81.82% 99.90%, 79.55% 99.36%, 77.27% 99.73%, 75.00% 99.34%, 72.73% 99.59%, 70.45% 99.50%, 68.18% 98.94%, 65.91% 99.47%, 63.64% 99.37%, 61.36% 99.05%, 59.09% 99.80%, 56.82% 99.83%, 54.55% 99.00%, 52.27% 99.10%, 50.00% 99.73%, 47.73% 99.79%, 45.45% 99.19%, 43.18% 98.97%, 40.91% 99.78%, 38.64% 98.95%, 36.36% 99.03%, 34.09% 99.34%, 31.82% 99.54%, 29.55% 99.89%, 27.27% 99.96%, 25.00% 98.94%, 22.73% 99.74%, 20.45% 99.22%, 18.18% 99.72%, 15.91% 99.09%, 13.64% 99.34%, 11.36% 99.68%, 9.09% 99.81%, 6.82% 99.21%, 4.55% 99.92%, 2.27% 99.75%, 0.00% 99.69%, 0.75% 97.73%, 0.54% 95.45%, 0.25% 93.18%, 0.81% 90.91%, 0.18% 88.64%, 0.01% 86.36%, 0.24% 84.09%, 0.39% 81.82%, 0.05% 79.55%, 0.16% 77.27%, 0.32% 75.00%, 0.50% 72.73%, 0.12% 70.45%, 0.32% 68.18%, 0.78% 65.91%, 0.86% 63.64%, 0.58% 61.36%, 0.61% 59.09%, 0.51% 56.82%, 0.12% 54.55%, 0.03% 52.27%, 0.02% 50.00%, 0.80% 47.73%, 0.62% 45.45%, 0.85% 43.18%, 0.02% 40.91%, 0.56% 38.64%, 0.42% 36.36%, 0.64% 34.09%, 0.28% 31.82%, 0.88% 29.55%, 0.07% 27.27%, 0.48% 25.00%, 0.65% 22.73%, 0.79% 20.45%, 0.65% 18.18%, 0.62% 15.91%, 0.70% 13.64%, 0.81% 11.36%, 0.31% 9.09%, 0.60% 6.82%, 0.79% 4.55%, 0.77% 2.27%);
  --torn-b: polygon(0.00% 0.29%, 3.33% 1.11%, 6.67% 1.21%, 10.00% 0.80%, 13.33% 0.87%, 16.67% 0.54%, 20.00% 0.82%, 23.33% 0.85%, 26.67% 0.11%, 30.00% 0.90%, 33.33% 1.39%, 36.67% 1.23%, 40.00% 1.02%, 43.33% 0.54%, 46.67% 1.03%, 50.00% 0.81%, 53.33% 0.62%, 56.67% 1.17%, 60.00% 0.12%, 63.33% 1.05%, 66.67% 0.04%, 70.00% 0.84%, 73.33% 0.67%, 76.67% 0.32%, 80.00% 0.98%, 83.33% 0.70%, 86.67% 0.86%, 90.00% 1.29%, 93.33% 0.36%, 96.67% 0.02%, 100.00% 0.21%, 99.24% 3.33%, 99.77% 6.67%, 99.81% 10.00%, 98.99% 13.33%, 99.26% 16.67%, 99.51% 20.00%, 99.00% 23.33%, 99.63% 26.67%, 99.25% 30.00%, 99.78% 33.33%, 99.52% 36.67%, 99.10% 40.00%, 98.98% 43.33%, 99.01% 46.67%, 99.57% 50.00%, 99.35% 53.33%, 99.65% 56.67%, 99.85% 60.00%, 99.44% 63.33%, 99.06% 66.67%, 99.05% 70.00%, 99.20% 73.33%, 98.94% 76.67%, 99.69% 80.00%, 99.81% 83.33%, 99.50% 86.67%, 99.69% 90.00%, 99.76% 93.33%, 99.54% 96.67%, 99.65% 100.00%, 96.67% 99.31%, 93.33% 99.56%, 90.00% 98.83%, 86.67% 98.63%, 83.33% 99.37%, 80.00% 99.90%, 76.67% 99.96%, 73.33% 98.78%, 70.00% 99.94%, 66.67% 99.01%, 63.33% 99.20%, 60.00% 99.57%, 56.67% 98.89%, 53.33% 99.97%, 50.00% 99.81%, 46.67% 99.36%, 43.33% 99.97%, 40.00% 98.84%, 36.67% 99.67%, 33.33% 99.80%, 30.00% 99.93%, 26.67% 99.12%, 23.33% 99.37%, 20.00% 99.12%, 16.67% 99.08%, 13.33% 98.87%, 10.00% 98.66%, 6.67% 99.04%, 3.33% 99.72%, 0.00% 99.67%, 0.20% 96.67%, 0.01% 93.33%, 0.53% 90.00%, 0.80% 86.67%, 0.20% 83.33%, 0.31% 80.00%, 0.39% 76.67%, 0.78% 73.33%, 0.58% 70.00%, 0.69% 66.67%, 0.85% 63.33%, 0.44% 60.00%, 0.89% 56.67%, 1.01% 53.33%, 0.10% 50.00%, 1.04% 46.67%, 0.81% 43.33%, 0.15% 40.00%, 0.51% 36.67%, 0.70% 33.33%, 1.02% 30.00%, 0.42% 26.67%, 0.64% 23.33%, 0.98% 20.00%, 0.89% 16.67%, 1.06% 13.33%, 0.52% 10.00%, 0.73% 6.67%, 0.23% 3.33%);
}

/* ---- torn paper --------------------------------------------------------
   A sheet is two ragged layers: ink behind, offset down for the hard shadow
   and showing through as the dark fibre along the edge, and cream on top
   with a slightly different tear. Nothing is a straight line. */
.sheet {
  position: relative;
  isolation: isolate;
  width: min(30rem, 100%);
  padding: 1.6rem 1.8rem 1.8rem;
  color: var(--color-ink);
  text-align: left;
}
.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
/* Outline and paper share one tear, so the ink is an even rim; the hard
   shadow is a filter on the sheet, so it follows the tear exactly. */
.sheet { filter: drop-shadow(3px 7px 0 var(--color-ink)); }
.sheet::before {
  inset: -3px;
  background: var(--color-ink);
  clip-path: var(--torn-a);
  z-index: -2;
}
.sheet::after {
  inset: 0;
  background: var(--color-cream);
  clip-path: var(--torn-a);
}
.sheet--wide { width: min(56rem, 100%); }
.sheet--title { width: min(60rem, 100%); padding: 1.8rem 2.2rem 1.6rem; }

/* The older cards take the same tear. */
.card {
  position: relative;
  isolation: isolate;
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  transform: none;
}
.card::before, .card::after { content: ""; position: absolute; pointer-events: none; }
.card { filter: drop-shadow(3px 6px 0 var(--color-ink)); }
.card::before { inset: -3px; background: var(--color-ink); clip-path: var(--torn-b); z-index: -2; }
.card::after { inset: 0; background: var(--color-cream); clip-path: var(--torn-b); z-index: -1; }
.card--wide { transform: none; }

.toast { border: 0; box-shadow: none; border-radius: 0; background: transparent; isolation: isolate; }
.toast::before, .toast::after { content: ""; position: absolute; pointer-events: none; }
.toast { filter: drop-shadow(2px 4px 0 var(--color-ink)); }
.toast::before { inset: -2px; background: var(--color-ink); clip-path: var(--torn-b); z-index: -2; }
.toast::after { inset: 0; background: var(--color-yellow); clip-path: var(--torn-b); z-index: -1; }

/* ---- the title sheet --------------------------------------------------- */
.title { display: grid; gap: 0.35rem; }
.title__eyebrow { margin: 0; color: var(--color-muted); }
.title__name {
  margin: 0;
  font-size: clamp(3.4rem, 9vw, 5.6rem);
  line-height: 0.9;
  transform: rotate(-1.6deg);
  transform-origin: left bottom;
}
.title__lead { margin: 0.3rem 0 0; max-width: 34rem; font-size: 1rem; line-height: 1.45; color: var(--color-muted); }

.title__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin-top: 1.3rem; }
.title__minor { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.btn--big { font-size: 0.95rem; padding: 1rem 2.4rem; box-shadow: 0 6px 0 0 var(--color-ink); transform: rotate(-1deg); }
.btn--big:hover, .btn--big:focus-visible { transform: translateY(3px) rotate(-1deg); box-shadow: 0 3px 0 0 var(--color-ink); }
.pill { display: inline-block; min-width: 1.4em; margin-left: 0.3em; padding: 0.05em 0.4em; font-size: 0.85em; background: var(--color-yellow); border: 1.5px solid var(--color-ink); border-radius: var(--hand); }
.pill:empty { display: none; }

.title__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.6rem 1.5rem; margin-top: 1.4rem; padding-top: 0.9rem; border-top: 2px dashed color-mix(in srgb, var(--color-ink) 35%, transparent); }
.keys--compact { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0; }
.keys--compact li { display: flex; align-items: center; gap: 0.4rem; }
.keys--compact .keys__combo { flex-basis: auto; }
.keys--compact kbd { font-size: 0.62rem; padding: 0.15rem 0.35rem; }
.keys--compact .keys__label { font-size: 0.78rem; }
.title__best { margin: 0; }

/* ---- the picker: five tanks in a row, drawn ---------------------------- */
.picker { margin-top: 1.3rem; }
.picker__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.7rem; }
.tankcard {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem 0.7rem;
  font: inherit;
  color: var(--color-ink);
  text-align: left;
  background: var(--color-cream);
  border: 2px solid var(--color-ink);
  border-radius: var(--hand);
  box-shadow: 0 4px 0 0 var(--color-ink);
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms;
}
.tankcard:nth-child(1) { --tilt: -1deg; }
.tankcard:nth-child(2) { --tilt: 0.7deg; }
.tankcard:nth-child(3) { --tilt: -0.5deg; }
.tankcard:nth-child(4) { --tilt: 0.9deg; }
.tankcard:nth-child(5) { --tilt: -0.8deg; }
.tankcard:not([disabled]):hover, .tankcard:focus-visible { transform: translateY(2px) rotate(var(--tilt, 0deg)); box-shadow: 0 2px 0 0 var(--color-ink); }
.tankcard[data-state="on"] { background: var(--color-yellow); transform: translateY(-4px) rotate(var(--tilt, 0deg)) scale(1.04); box-shadow: 0 8px 0 0 var(--color-ink); z-index: 1; }
.tankcard[data-state="locked"] { cursor: default; background: transparent; border-style: dashed; box-shadow: none; }
.tankcard__pic { display: block; width: 100%; height: 4.4rem; }
.tankcard__name { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; }
.tankcard__tag { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.tankcard[data-state="on"] .tankcard__tag { color: var(--color-ink); }
.tankcard__stats { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.4rem; margin-top: 0.3rem; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); align-items: center; }
.tankcard__stats .bar { height: 0.36rem; border: 1.5px solid var(--color-ink); border-radius: var(--hand); background: linear-gradient(to right, var(--color-ink) calc(var(--fill) * 100%), transparent 0); }
.tankcard__lock { position: absolute; inset: auto 0.5rem 0.5rem auto; font-size: 0.9rem; }
.picker__note { min-height: 1.3rem; margin: 0.6rem 0 0; font-size: 0.86rem; color: var(--color-muted); }
.picker__note:empty { display: none; }

/* ---- achievements ------------------------------------------------------- */
.ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.7rem; margin-top: 1.1rem; }
.ach__group { grid-column: 1 / -1; margin: 0.6rem 0 -0.2rem; color: var(--color-muted); }
.ach__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  grid-template-areas: "mark name toggle" "mark blurb toggle" "mark bar toggle";
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--color-ink);
  text-align: left;
  background: var(--color-cream);
  border: 2px solid var(--color-ink);
  border-radius: var(--hand);
  box-shadow: 0 4px 0 0 var(--color-ink);
  transform: rotate(var(--tilt, 0deg));
}
.ach__item:nth-child(odd) { --tilt: -0.5deg; }
.ach__item:nth-child(even) { --tilt: 0.45deg; }
.ach__item[data-state="locked"] { background: transparent; border-style: dashed; box-shadow: none; }
.ach__mark { grid-area: mark; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; font-family: var(--font-display); font-size: 1.4rem; border: 2px solid var(--color-ink); border-radius: 50%; background: var(--color-cream); transform: rotate(-6deg); }
.ach__item[data-state="on"] .ach__mark, .ach__item[data-state="earned"] .ach__mark { background: var(--color-yellow); }
.ach__name { grid-area: name; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.ach__blurb { grid-area: blurb; font-size: 0.82rem; line-height: 1.35; color: var(--color-muted); }
.ach__bar { grid-area: bar; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.ach__bar .bar { height: 0.42rem; border: 1.5px solid var(--color-ink); border-radius: var(--hand); background: linear-gradient(to right, var(--color-ink) calc(var(--fill) * 100%), transparent 0); }
.ach__toggle { grid-area: toggle; align-self: center; font-family: var(--font-body); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.45rem 0.7rem; border: 2px solid var(--color-ink); border-radius: var(--hand); background: transparent; color: var(--color-ink); cursor: pointer; box-shadow: 0 3px 0 0 var(--color-ink); }
.ach__toggle[aria-pressed="true"] { background: var(--color-yellow); }
.ach__toggle[disabled] { opacity: 0.4; cursor: default; box-shadow: none; border-style: dashed; }

@media (max-width: 760px) {
  .picker__strip { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .title__name { font-size: 3rem; }
}
.sheet--wide .card__lead { margin-top: 0.4rem; }
.ach { gap: 0.55rem; margin-top: 0.8rem; }
.ach__item { padding: 0.55rem 0.75rem; }
.ach__group { margin: 0.35rem 0 -0.25rem; }
.sheet--wide .card__actions { margin-top: 0.9rem; }
.sheet--wide .card__title { font-size: clamp(2.2rem, 6vw, 3.2rem); }

/* No bylines: the name stands on its own. */
.title { gap: 0; }
.title__name { transform: rotate(-1.4deg); }
.picker { margin-top: 1.1rem; }
.tankcard__tag:empty { display: none; }
.hud__chip--shield:empty { display: none; }
.hud__chip--shield { background: var(--color-yellow); }

/* ---- the workshop, on the clear card ----------------------------------- */
.workshop { margin-top: 1rem; padding-top: 0.8rem; border-top: 2px dashed color-mix(in srgb, var(--color-ink) 35%, transparent); }
.workshop__title { margin: 0 0 0.5rem; color: var(--color-muted); }
.workshop__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.upgrade {
  display: grid; gap: 0.2rem; padding: 0.6rem 0.7rem; font: inherit; text-align: left; color: var(--color-ink);
  background: var(--color-cream); border: 2px solid var(--color-ink); border-radius: var(--hand);
  box-shadow: 0 4px 0 0 var(--color-ink); cursor: pointer; transform: rotate(var(--tilt, 0deg));
}
.upgrade:nth-child(1) { --tilt: -0.8deg; } .upgrade:nth-child(2) { --tilt: 0.5deg; } .upgrade:nth-child(3) { --tilt: -0.4deg; }
.upgrade:not([disabled]):hover { transform: translateY(2px) rotate(var(--tilt, 0deg)); box-shadow: 0 2px 0 0 var(--color-ink); background: var(--color-yellow); }
.upgrade[disabled] { opacity: 0.5; box-shadow: none; cursor: default; border-style: dashed; }
.upgrade b { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; }
.upgrade span { font-size: 0.78rem; line-height: 1.3; color: var(--color-muted); }
.upgrade i { font-style: normal; color: var(--color-muted); }
.upgrade i:empty { display: none; }
.card .workshop:has(.workshop__list:empty) { display: none; }

/* ---- the paint shop ----------------------------------------------------- */
.shop { display: grid; grid-template-columns: 16rem 1fr; gap: 1.2rem; align-items: start; margin-top: 0.8rem; }
.shop__preview { width: 16rem; height: 10rem; border: 2px dashed color-mix(in srgb, var(--color-ink) 40%, transparent); border-radius: var(--hand); background: var(--color-cream); }
.shop__label { margin: 0 0 0.4rem; color: var(--color-muted); }
.shop__rows > .shop__label + * { margin-bottom: 0.9rem; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch {
  display: grid; justify-items: center; gap: 0.25rem; padding: 0.3rem; font: inherit; color: var(--color-ink);
  background: transparent; border: 2px solid transparent; border-radius: var(--hand); cursor: pointer;
}
.swatch::before { content: ""; width: 2.4rem; height: 1.7rem; background: var(--swatch); border: 2px solid var(--color-ink); border-radius: var(--hand); box-shadow: 0 3px 0 0 var(--color-ink); }
.swatch[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-yellow); }
.swatch .micro { font-size: 0.58rem; }
.decals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.decal {
  display: grid; justify-items: center; gap: 0.2rem; padding: 0.3rem 0.3rem 0.4rem; font: inherit; color: var(--color-ink);
  background: var(--color-cream); border: 2px solid var(--color-ink); border-radius: var(--hand); box-shadow: 0 3px 0 0 var(--color-ink); cursor: pointer;
}
.decal[aria-pressed="true"] { background: var(--color-yellow); }
.decal__pic { width: 100%; height: 3.2rem; }
.decal .micro { font-size: 0.58rem; }
@media (max-width: 760px) { .shop { grid-template-columns: 1fr; } .shop__preview { width: 100%; } }

/* Buttons the desktop app has no use for. */
html[data-desktop] .web-only { display: none; }

/* ---- settings ----------------------------------------------------------- */
.settings { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.settings .btn { text-align: left; }
.keys__combo i { font-style: normal; font-size: 0.62rem; color: var(--color-muted); margin: 0 0.15rem; align-self: center; }

/* ---- the workshop, as a stat sheet -------------------------------------- */
.workshop__stats { display: grid; gap: 0.35rem; }
.stat { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 0.6rem; }
.stat__name { font-family: var(--font-display); font-size: 1.2rem; line-height: 1; }
.stat__dots { display: flex; gap: 0.3rem; }
.stat__dots i { width: 0.9rem; height: 0.9rem; border: 2px solid var(--color-ink); border-radius: 50%; background: transparent; transform: rotate(-8deg); }
.stat__dots i[data-on] { background: var(--color-ink); }
.stat__dots i[data-new] { background: var(--color-yellow); }
.stat__up {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  width: 2.2rem; height: 2rem; padding: 0; border: 2px solid var(--color-ink); border-radius: var(--hand);
  background: var(--color-cream); color: var(--color-ink); cursor: pointer; box-shadow: 0 3px 0 0 var(--color-ink);
}
.stat__up:not([disabled]):hover { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--color-ink); background: var(--color-yellow); }
.stat__up[disabled] { opacity: 0.35; cursor: default; box-shadow: none; border-style: dashed; }
.workshop__trade { margin-top: 0.8rem; }
.workshop__trade:empty { display: none; }
.trade { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.3rem 0.7rem; padding: 0.6rem 0.8rem; border: 2px dashed var(--color-ink); border-radius: var(--hand); }
.trade b { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; grid-column: 1; }
.trade span { font-size: 0.8rem; line-height: 1.3; color: var(--color-muted); grid-column: 1; }
.trade .give { color: var(--color-green); }
.trade .take { color: #a13a2c; }
.trade .btn { grid-row: 1 / span 2; font-size: 0.66rem; padding: 0.55rem 0.9rem; }
.trade--taken { background: var(--color-yellow); border-style: solid; }
.trade[data-poor] { opacity: 0.7; }
.trade .btn[disabled] { opacity: 0.45; cursor: default; box-shadow: none; border-style: dashed; }

/* ---- the doors out of a yard -------------------------------------------- */
.card--clear { width: min(40rem, 100%); }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; margin-top: 1rem; }
.doors:empty { display: none; }
.door {
  display: grid; gap: 0.2rem; padding: 0.8rem 0.85rem 0.85rem; font: inherit; text-align: left;
  color: var(--color-ink); background: var(--color-cream); border: 2px solid var(--color-ink);
  border-radius: var(--hand); box-shadow: 0 5px 0 0 var(--color-ink); cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms;
}
.door:nth-child(1) { --tilt: -1deg; }
.door:nth-child(2) { --tilt: 0.8deg; }
.door:nth-child(3) { --tilt: -0.4deg; }
.door:hover, .door:focus-visible { transform: translateY(-3px) rotate(var(--tilt, 0deg)); box-shadow: 0 8px 0 0 var(--color-ink); background: var(--color-yellow); }
.door b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.door span { font-size: 0.82rem; line-height: 1.35; color: var(--color-muted); }
.door i { font-style: normal; color: var(--color-muted); }
.door[data-elite] { border-style: dashed; background: color-mix(in srgb, var(--color-yellow) 35%, var(--color-cream)); }
.door[data-elite] b::after { content: " ✦"; }

.btn--second { background: transparent; }

/* The clear card: what you did on the left, where you go next on the right. */
.card--clear { width: min(48rem, 100%); }
.clear__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.4rem; align-items: start; margin-top: 0.6rem; }
.clear__cols:has(.doors:empty) { grid-template-columns: 1fr; }
.clear__cols:has(.doors:empty) .clear__right { display: none; }
.clear__which { margin: 0 0 0.5rem; color: var(--color-muted); }
.clear__right .doors { grid-template-columns: 1fr; margin-top: 0; }
.clear__left .tally { margin-top: 0; }
@media (max-width: 720px) { .clear__cols { grid-template-columns: 1fr; } }

/* A trade reads as a sentence, then the choice. */
.trade { display: grid; grid-template-columns: 1fr; gap: 0.25rem; }
.trade .btn { grid-row: auto; }
.trade__buttons { display: flex; gap: 0.5rem; margin-top: 0.5rem; }