/* ===========================================================================
   A war machine's stats page and workshop (js/machine-sheet.js; Goliath,
   2026-10-11: "make the crew / war machine upgrade page super artsy and cool
   looking as well as functional. These things are special").

   THE STAGE: the side's drafting loft (assets/backgrounds/painted/web/
   machine-workshop.jpg, the Horde's -evil), a blueprint grid, a lit floor and
   rising embers; the machine on its square rig with its parts bolted on (a
   silver glow at Mark II, gold at Mark III) and a blueprint ghost of each part
   not yet fitted; numbered pins on leader lines; the crew's medallion and the
   level badge. Then the gauge, the numbers, THE PARTS and the smith's actions.

   Built to the readability rules (docs/READABILITY.md): no word under 16 px,
   every button and pin at least 48 px, clear of a phone's camera indent on
   either side (the safe-area insets). One column on a phone. Motion only when
   the player has not asked for less.
   =========================================================================== */

.machine-sheet {
  --ms-ink: #fbf3e7;
  --ms-muted: #d2c5e4;
  --ms-base: #140d1e;
  --ms-surface: #241a3d;
  --ms-line: rgb(201 168 245 / 28%);
  --ms-gold: #f5c242;
  --ms-good: #6be04a;
  --ms-warn: #f5c242;
  --ms-bad: #ff6b6b;
  --ms-accent: #7fe0d6;
  --ms-print: rgb(127 224 214 / 14%);
  --ms-ember: #ffb347;
  --ms-loft: url('../backgrounds/painted/web/machine-workshop.jpg');
  --ms-silver: rgb(214 228 255 / 95%);
  --ms-gild: rgb(255 196 64 / 100%);
  --ms-edge-l: max(12px, env(safe-area-inset-left));
  --ms-edge-r: max(12px, env(safe-area-inset-right));
  box-sizing: border-box;
  width: min(760px, calc(100vw - var(--ms-edge-l) - var(--ms-edge-r)));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0 0 clamp(16px, 3vw, 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ms-ink);
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(245 194 66 / 10%), transparent 60%),
    linear-gradient(180deg, #1d1430 0%, var(--ms-base) 45%);
  border: 2px solid var(--ms-gold);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 60%), 0 0 40px rgb(245 194 66 / 18%), 0 24px 80px rgb(0 0 0 / 65%);
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
.machine-sheet--horde {
  --ms-gold: #c77dff;
  --ms-accent: #8dff6b;
  --ms-print: rgb(141 255 107 / 12%);
  --ms-ember: #8dff6b;
  --ms-loft: url('../backgrounds/painted/web/machine-workshop-evil.jpg');
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(141 255 107 / 9%), transparent 60%),
    linear-gradient(180deg, #1a1226 0%, #0f0a16 45%);
  border-color: #c77dff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 60%), 0 0 40px rgb(199 125 255 / 22%), 0 24px 80px rgb(0 0 0 / 65%);
}
.machine-sheet::backdrop { background: rgb(8 5 16 / 84%); }
.machine-sheet *, .machine-sheet *::before, .machine-sheet *::after { box-sizing: border-box; }
.machine-sheet > :not(.ms-stage) { margin-left: clamp(16px, 3vw, 28px); margin-right: clamp(16px, 3vw, 28px); }

/* ---- THE STAGE -------------------------------------------------------------- */
.ms-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  border-bottom: 2px solid var(--ms-gold);
  background: #0b0814 var(--ms-loft) center 60% / cover no-repeat;
  isolation: isolate;
}
.ms-stage::after {
  /* the loft darkened at its edges, so the machine is what is lit */
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 58%, transparent 30%, rgb(8 5 16 / 70%) 100%);
}
.ms-stage__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(var(--ms-print) 1px, transparent 1px),
    linear-gradient(90deg, var(--ms-print) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(65% 75% at 50% 55%, #000 35%, transparent 85%);
}
.ms-stage__floor {
  position: absolute; z-index: 1; pointer-events: none;
  left: 22%; right: 22%; bottom: 4%; height: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(245 194 66 / 42%), rgb(245 194 66 / 8%) 70%, transparent);
  filter: blur(2px);
}
.machine-sheet--horde .ms-stage__floor { background: radial-gradient(closest-side, rgb(141 255 107 / 34%), rgb(199 125 255 / 10%) 70%, transparent); }

.ms-embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ms-ember {
  position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ms-ember); box-shadow: 0 0 8px 2px var(--ms-ember);
  opacity: 0;
}

.ms-rig {
  position: absolute; z-index: 3;
  left: 25%; top: 10%; width: 50%; aspect-ratio: 1;
}
.ms-rig__machine { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgb(0 0 0 / 65%)); }
.ms-rig--wrecked .ms-rig__machine, .ms-rig--wrecked .ms-part { filter: grayscale(0.85) brightness(0.6) drop-shadow(0 10px 14px rgb(0 0 0 / 65%)); }
.ms-rig--destroyed .ms-rig__machine { filter: grayscale(1) brightness(0.35) blur(1px); }
.ms-part { position: absolute; height: auto; transform: translateY(-50%); pointer-events: none; }
.ms-part--mark1 { filter: drop-shadow(0 4px 6px rgb(0 0 0 / 55%)); }
.ms-part--mark2 { filter: drop-shadow(0 0 4px var(--ms-silver)) drop-shadow(0 4px 6px rgb(0 0 0 / 55%)); }
.ms-part--mark3 { filter: drop-shadow(0 0 3px var(--ms-gild)) drop-shadow(0 0 10px rgb(255 196 64 / 70%)) drop-shadow(0 4px 6px rgb(0 0 0 / 55%)); }
/* a slot not yet fitted: its part drawn as a blueprint, faint and pale */
.ms-part--ghost {
  opacity: 0.34;
  filter: grayscale(1) brightness(2.2) sepia(1) hue-rotate(130deg) saturate(2.4) drop-shadow(0 0 2px var(--ms-accent));
}
.ms-part--ghost.ms-part--lit { opacity: 0.62; }

.ms-leaders { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ms-leader { stroke: var(--ms-accent); stroke-width: 2px; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; opacity: 0.75; }
.ms-leader--fitted { stroke: var(--ms-gold); stroke-dasharray: none; opacity: 0.9; }
.ms-leader--lit { stroke-width: 3px; opacity: 1; }
.ms-leader__dot { fill: var(--ms-accent); }
.ms-leader__dot.ms-leader--fitted { fill: var(--ms-gold); }

.ms-pin {
  position: absolute; z-index: 5;
  width: 48px; min-width: 48px; height: 48px; min-height: 48px;
  margin: -24px 0 0 -24px;
  display: grid; place-items: center;
  font: inherit; font-size: 20px; font-weight: bold; color: var(--ms-ink);
  background: radial-gradient(circle at 35% 30%, #3a2f58, #160f24);
  border: 2px dashed var(--ms-accent); border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(8 5 16 / 55%), 0 4px 10px rgb(0 0 0 / 60%);
  cursor: pointer;
}
.ms-pin--mark1 { border-style: solid; border-color: #b9a27a; }
.ms-pin--mark2 { border-style: solid; border-color: var(--ms-silver); box-shadow: 0 0 0 4px rgb(8 5 16 / 55%), 0 0 12px var(--ms-silver); }
.ms-pin--mark3 { border-style: solid; border-color: var(--ms-gild); color: #14121a; background: radial-gradient(circle at 35% 30%, #ffe08a, #c98a12); box-shadow: 0 0 0 4px rgb(8 5 16 / 55%), 0 0 16px var(--ms-gild); }
.ms-pin--lit { outline: 3px solid var(--ms-ink); outline-offset: 2px; }
.ms-pin:focus-visible { outline: 3px solid var(--ms-accent); outline-offset: 3px; }

.ms-medal {
  position: absolute; z-index: 5; top: 10px; right: 10px;
  min-width: 96px; padding: 6px 12px 8px;
  display: grid; justify-items: center; gap: 2px;
  color: #14121a; text-align: center;
  background: radial-gradient(circle at 50% 20%, #ffe9a8, #d79a1e 70%, #8a5a08);
  border: 2px solid #fff3c4; border-radius: 14px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 55%), inset 0 -3px 0 rgb(0 0 0 / 22%);
}
.ms-medal--r0 { background: radial-gradient(circle at 50% 20%, #e7e1d2, #8f8a7c 70%, #4d4a42); border-color: #f4efe2; }
.ms-medal--r5 { box-shadow: 0 0 22px rgb(255 196 64 / 80%), 0 6px 16px rgb(0 0 0 / 55%), inset 0 -3px 0 rgb(0 0 0 / 22%); }
.ms-medal__stars { font-size: 16px; letter-spacing: 0.06em; line-height: 1; }
.ms-medal__name { font-size: 16px; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; }

.ms-badge {
  position: absolute; z-index: 5; top: 10px; left: 10px;
  width: 64px; height: 64px;
  display: grid; place-content: center; text-align: center;
  color: var(--ms-ink);
  background: radial-gradient(circle at 40% 30%, #3a2f58, #120c1e);
  border: 2px solid var(--ms-gold); border-radius: 50%;
  box-shadow: 0 6px 14px rgb(0 0 0 / 60%);
}
.ms-badge__k { font-size: 16px; line-height: 1; color: var(--ms-gold); letter-spacing: 0.04em; }
.ms-badge__v { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-size: 26px; font-weight: bold; line-height: 1; }
@media (max-width: 479px) {
  /* a taller stage and a bigger rig on a phone (js/machine-sheet.js stage() uses the same numbers) */
  .ms-stage { aspect-ratio: 4 / 3; }
  .ms-rig { left: 20%; width: 60%; }
  /* the level is in the name's line below; a lone number in the corner would read as a fourth pin */
  .ms-badge { display: none; }
  .ms-medal { min-width: 0; padding: 4px 10px 6px; }
  .ms-medal__stars { display: none; }
}

.ms-stamp {
  position: absolute; z-index: 6; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  padding: 4px 18px;
  font-size: clamp(26px, 7vw, 44px); font-weight: bold; letter-spacing: 0.12em;
  color: var(--ms-bad); border: 4px solid var(--ms-bad); border-radius: 8px;
  background: rgb(20 8 12 / 55%);
  text-shadow: 0 2px 8px rgb(0 0 0 / 80%);
}

/* ---- the name, the gauge and the numbers ----------------------------------- */
.ms-head { margin-top: 16px; }
.ms-kicker { margin: 0; color: var(--ms-gold); font-size: 16px; font-weight: bold; letter-spacing: 0.08em; }
.ms-title { margin: 2px 0 4px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-size: clamp(26px, 5.5vw, 36px); line-height: 1.1; text-shadow: 0 2px 0 rgb(0 0 0 / 45%), 0 0 18px rgb(245 194 66 / 25%); }
.ms-sub { margin: 0; font-size: 18px; }
.ms-rank { color: var(--ms-accent); font-weight: bold; }
.ms-rank--lost { color: var(--ms-bad); }
.ms-fitted { color: var(--ms-gold); font-weight: bold; }
.ms-state { margin: 6px 0 0; font-weight: bold; font-size: 17px; }
.ms-state--good { color: var(--ms-good); }
.ms-state--warn { color: var(--ms-warn); }
.ms-state--bad { color: var(--ms-bad); }

.ms-xp { margin-top: 16px; }
.ms-xp__label { margin: 0 0 6px; color: var(--ms-muted); }
.ms-bar { position: relative; height: 18px; border-radius: 9px; background: #2a1f42; border: 1px solid var(--ms-line); overflow: hidden; box-shadow: inset 0 2px 4px rgb(0 0 0 / 50%); }
.ms-bar__fill { height: 100%; background: linear-gradient(90deg, var(--ms-accent), var(--ms-gold)); box-shadow: 0 0 12px var(--ms-gold); }
.ms-ladder { display: flex; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.ms-ladder__rung { flex: 1; height: 8px; border-radius: 4px; background: #2a1f42; border: 1px solid var(--ms-line); }
.ms-ladder__rung--past { background: var(--ms-accent); border-color: var(--ms-accent); }
.ms-ladder__rung--now { background: var(--ms-gold); border-color: var(--ms-gold); box-shadow: 0 0 8px var(--ms-gold); }

.ms-stats { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 16px; margin-bottom: 0; }
@media (min-width: 560px) { .ms-stats { grid-template-columns: 1fr 1fr; } }
.ms-stat {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), transparent), var(--ms-surface);
  border: 1px solid var(--ms-line); border-left: 3px solid var(--ms-gold); border-radius: 10px;
}
.ms-stat__k { color: var(--ms-muted); }
.ms-stat__v { margin: 0; font-weight: bold; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.ms-chip { padding: 1px 8px; font-size: 16px; font-weight: bold; color: #14121a; background: var(--ms-gold); border-radius: 999px; }
.ms-power { margin: 14px 0 0; color: var(--ms-muted); font-style: italic; }
.ms-power--parts { margin-top: 6px; color: var(--ms-gold); font-style: normal; font-weight: bold; }

/* ---- THE PARTS ----------------------------------------------------------------- */
.ms-parts { margin-top: 22px; }
.ms-parts__title {
  margin: 0; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: 22px; letter-spacing: 0.14em; color: var(--ms-gold);
  display: flex; align-items: center; gap: 12px;
}
.ms-parts__title::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--ms-gold), transparent); }
.ms-parts__line { margin: 6px 0 0; color: var(--ms-muted); }
.ms-parts__list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.ms-part-card {
  display: flex; flex-direction: column;
  padding: 12px;
  border: 1px dashed var(--ms-accent); border-radius: 14px;
  background:
    linear-gradient(var(--ms-print) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--ms-print) 1px, transparent 1px) 0 0 / 16px 16px,
    #1a1330;
  scroll-margin: 24px;
}
.ms-part-card--mark1 { border-style: solid; border-color: #b9a27a; background: #211836; }
.ms-part-card--mark2 { border-style: solid; border-color: var(--ms-silver); background: #221a3a; box-shadow: 0 0 14px rgb(214 228 255 / 18%); }
.ms-part-card--mark3 { border: 2px solid var(--ms-gild); background: linear-gradient(160deg, #3a2a10, #1e1530 60%); box-shadow: 0 0 18px rgb(255 196 64 / 30%); }
.ms-part-card--lit { outline: 3px solid var(--ms-ink); outline-offset: 2px; }
.ms-part-card__top { display: flex; gap: 12px; align-items: center; }
.ms-part-card__thumb {
  position: relative; flex: 0 0 auto; width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: 12px; background: radial-gradient(circle, rgb(255 255 255 / 10%), transparent 70%), #120c1e;
  border: 1px solid var(--ms-line);
}
.ms-part-card__thumb img { width: 64px; height: 64px; object-fit: contain; }
.ms-part-card__thumb--ghost img { opacity: 0.45; filter: grayscale(1) brightness(2.2) sepia(1) hue-rotate(130deg) saturate(2.4); }
.ms-part-card--mark2 .ms-part-card__thumb img { filter: drop-shadow(0 0 4px var(--ms-silver)); }
.ms-part-card--mark3 .ms-part-card__thumb img { filter: drop-shadow(0 0 4px var(--ms-gild)) drop-shadow(0 0 8px rgb(255 196 64 / 60%)); }
.ms-part-card__num {
  position: absolute; left: -8px; top: -8px;
  min-width: 28px; height: 28px; padding: 0 6px;
  display: grid; place-items: center;
  font-size: 16px; font-weight: bold; color: #14121a;
  background: var(--ms-accent); border-radius: 999px; border: 2px solid #120c1e;
}
.ms-part-card--mark3 .ms-part-card__num { background: var(--ms-gild); }
.ms-part-card__head { min-width: 0; }
.ms-kind { display: inline-block; margin: 0; padding: 0 8px; font-size: 16px; font-weight: bold; letter-spacing: 0.08em; border-radius: 6px; color: #14121a; background: var(--ms-accent); }
.ms-kind--armour { background: #a9b8d6; }
.ms-kind--power { background: #c9a8f5; }
.ms-kind--weapon { background: #ff8f8f; }
.ms-kind--drive { background: #f5c242; }
.ms-part-card__name { margin: 4px 0 2px; font-size: 19px; line-height: 1.2; }
.ms-marks { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ms-pip {
  min-width: 30px; padding: 0 4px; text-align: center;
  font-size: 16px; font-weight: bold; color: var(--ms-muted);
  border: 1px solid var(--ms-line); border-radius: 6px; background: #120c1e;
}
.ms-pip--on { color: #14121a; border-color: transparent; }
.ms-pip--m1 { background: #b9a27a; }
.ms-pip--m2 { background: #d6e4ff; }
.ms-pip--m3 { background: #ffc440; }
.ms-marks__word { margin-left: 4px; font-size: 16px; font-weight: bold; color: var(--ms-gold); }
.ms-part-card__what { margin: 10px 0 0; color: var(--ms-muted); font-style: italic; }
.ms-part-card__now { margin: 8px 0 0; color: var(--ms-good); font-weight: bold; }
.ms-part-card__next { margin: 8px 0 0; font-weight: bold; }
.ms-part-card__price { margin: 4px 0 0; color: var(--ms-muted); }
.ms-part-card__gate { margin: 4px 0 0; color: var(--ms-muted); }
.ms-part-card__done { margin: 10px 0 0; color: var(--ms-gild); font-weight: bold; }
.ms-part-card .ms-btn { margin-top: 10px; }
@media (min-width: 560px) {
  .ms-part-card .ms-btn { width: auto; min-width: 260px; align-self: flex-end; }
}

/* ---- the smith's actions ------------------------------------------------------ */
.ms-actions { display: grid; gap: 12px; margin-top: 22px; }
.ms-action { padding: 14px; border: 1px solid var(--ms-line); border-radius: 12px; background: rgb(36 26 61 / 70%); }
.ms-action--gold { border-color: var(--ms-gold); }
.ms-action--bad { border-color: var(--ms-bad); }
.ms-action__title { margin: 0 0 6px; font-size: 19px; color: var(--ms-ink); }
.ms-action__line { margin: 0 0 6px; }

.ms-btn {
  display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 10px 16px;
  font: inherit; font-size: 18px; font-weight: bold; color: var(--ms-ink);
  background: var(--ms-surface); border: 2px solid var(--ms-line); border-radius: 10px; cursor: pointer;
}
.ms-btn:focus-visible { outline: 3px solid var(--ms-accent); outline-offset: 2px; }
.ms-btn--gold { color: #14121a; background: linear-gradient(180deg, #ffe08a, var(--ms-gold)); border-color: var(--ms-gold); box-shadow: 0 0 14px rgb(245 194 66 / 35%); }
.machine-sheet--horde .ms-btn--gold { background: linear-gradient(180deg, #e2b8ff, var(--ms-gold)); box-shadow: 0 0 14px rgb(199 125 255 / 40%); }
.ms-btn--go { color: #14121a; background: var(--ms-good); border-color: var(--ms-good); }
.ms-btn--bad { color: #14121a; background: var(--ms-bad); border-color: var(--ms-bad); }
.ms-btn--off, .ms-btn:disabled { color: var(--ms-muted); background: #1d1530; border-color: var(--ms-line); box-shadow: none; cursor: not-allowed; }
.ms-btn--plain:hover, .ms-btn--off:not(:disabled):hover { border-color: var(--ms-gold); }

.ms-message { margin-top: 14px; margin-bottom: 0; padding: 10px 12px; border-radius: 10px; background: #2a1f42; color: var(--ms-gold); font-weight: bold; border-left: 4px solid var(--ms-gold); }
.ms-how { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--ms-line); border-radius: 12px; }
.ms-how__title { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: bold; color: var(--ms-gold); }
.ms-how__line { margin: 8px 0 0; color: var(--ms-muted); }
.ms-foot { margin-top: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .ms-bar__fill { transition: width 400ms ease-out; }
  .ms-ember { animation: ms-rise 6s linear infinite; }
  .ms-part--mark3 { animation: ms-gleam 3.2s ease-in-out infinite; }
  .ms-part--new { animation: ms-bolt 700ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  .ms-medal--r5 { animation: ms-gleam 3.2s ease-in-out infinite; }
}
@keyframes ms-rise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: translate(18px, -420px) scale(0.3); opacity: 0; }
}
@keyframes ms-gleam {
  0%, 100% { filter: drop-shadow(0 0 3px var(--ms-gild)) drop-shadow(0 0 8px rgb(255 196 64 / 55%)) drop-shadow(0 4px 6px rgb(0 0 0 / 55%)); }
  50% { filter: drop-shadow(0 0 5px var(--ms-gild)) drop-shadow(0 0 16px rgb(255 196 64 / 90%)) drop-shadow(0 4px 6px rgb(0 0 0 / 55%)); }
}
@keyframes ms-bolt {
  0% { transform: translateY(-50%) translateY(-40px) scale(1.4); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateY(-50%) scale(1); opacity: 1; }
}