/* =========================================================================
   Maniti Movers — interface skin.
   Ink, flat colour and warm paper. Every frame is an SVG-filtered ink layer
   sitting behind crisp hand-lettered text, so borders wobble and words don't.
   ========================================================================= */

@import url('./fonts.css');

/* ------------------------------------------------------------------ root */

.mm-ui {
  --mm-ink: #1a141c;
  --mm-ink-soft: #3a3038;
  --mm-paper: #f4ecd8;
  --mm-paper-warm: #e8d9b2;
  --mm-paper-pale: #f6efdc;
  --mm-red: #cf3b32;
  --mm-blue: #2b6cae;
  --mm-yellow: #f0bc2c;
  --mm-green: #2f8a5c;
  --mm-cream: #f3e6c8;
  --mm-gold: #d9a63c;
  --mm-tape: #d9c9a4;
  --mm-wood: #93502c;
  --mm-wood-dark: #66341a;
  --mm-skin-ok: #dcae7d;
  --mm-skin-warm: #d59a63;
  --mm-skin-hot: #c98d5e;
  --mm-bubble-bg: #fbf6ea;
  --mm-shadow: 5px 7px 0 rgba(26, 20, 28, .26);
  --mm-shadow-s: 3px 4px 0 rgba(26, 20, 28, .24);

  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--mm-ink);
  font-family: var(--font-hand);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.32;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 10;
}

.mm-ui * { box-sizing: border-box; }
.mm-ui p, .mm-ui h1, .mm-ui h2, .mm-ui h3, .mm-ui dl, .mm-ui dd, .mm-ui ol, .mm-ui ul { margin: 0; padding: 0; }
.mm-ui ol, .mm-ui ul { list-style: none; }
.mm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mm-ui [class*='__host'], .mm-ui .mm-panel, .mm-ui .mm-board__grid, .mm-ui .mm-sheet__card { scrollbar-width: none; }
.mm-ui ::-webkit-scrollbar { width: 0; height: 0; }

.mm-layer { position: absolute; inset: 0; pointer-events: none; }
.mm-layer--hud[hidden] { display: none; }

/* ----------------------------------------------------------- paper stock */

.mm-panel {
  --stock: linear-gradient(168deg, #fbf4e2 0%, #f2e7cd 46%, #e9dbba 100%);
  position: relative;
  transform: rotate(var(--mm-tilt, 0deg));
  pointer-events: auto;
}
.mm-panel--card { --stock: linear-gradient(172deg, #f8eed4 0%, #eddfbb 60%, #e2d0a5 100%); }
.mm-panel--kraft { --stock: linear-gradient(170deg, #dcbb88 0%, #cda468 60%, #bb9053 100%); }
.mm-panel--index { --stock: linear-gradient(180deg, #fdf8ec 0%, #f7f0dd 100%); }
.mm-panel--dark { --stock: linear-gradient(170deg, #2a222c 0%, #191319 100%); color: var(--mm-paper); }

.mm-panel__ink {
  position: absolute;
  inset: 0;
  background-image: var(--mm-paper-noise), var(--stock);
  background-size: 180px 180px, auto;
  background-blend-mode: multiply;
  border: 3.5px solid var(--mm-ink);
  box-shadow: var(--mm-shadow);
  filter: url(#mmRoughL);
}
.mm-panel__ink2 {
  position: absolute;
  inset: 3px;
  border: 2px solid var(--mm-ink);
  opacity: .3;
  filter: url(#mmRough);
}
.mm-panel--dark .mm-panel__ink2 { border-color: var(--mm-paper); opacity: .35; }
.mm-panel__body { position: relative; padding: 14px 18px 15px; z-index: 1; }
.mm-panel--index .mm-panel__ink {
  background-image:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(43, 108, 174, .22) 25px 26px),
    var(--mm-paper-noise), var(--stock);
  background-size: auto, 180px 180px, auto;
}

/* --------------------------------------------------------- masking tape */

.mm-tape {
  position: absolute;
  width: 92px;
  height: 30px;
  background:
    var(--mm-paper-noise),
    linear-gradient(100deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 40%),
    var(--mm-tape);
  background-size: 180px 180px, auto, auto;
  background-blend-mode: multiply, normal, normal;
  opacity: .93;
  box-shadow: 1px 2px 0 rgba(26, 20, 28, .18);
  transform: rotate(var(--mm-tape-rot, -5deg));
  clip-path: polygon(3% 6%, 97% 0, 100% 96%, 6% 100%);
  z-index: 3;
  pointer-events: none;
}
.mm-tape--tl { left: -28px; top: -17px; }
.mm-tape--tr { right: -28px; top: -17px; }
.mm-tape--bl { left: -26px; bottom: -17px; }
.mm-tape--br { right: -26px; bottom: -17px; }
.mm-tape--top { left: 50%; top: -17px; margin-left: -46px; }
.mm-tape--left { left: -30px; top: 30%; width: 74px; }

/* --------------------------------------------------------------- stamps */

.mm-stamp {
  --tone: var(--mm-ink);
  color: var(--tone);
  transform: rotate(var(--mm-stamp-rot, -7deg));
  width: clamp(150px, 22vw, 230px);
  opacity: .92;
  pointer-events: none;
}
.mm-stamp--good { --tone: var(--mm-green); }
.mm-stamp--bad { --tone: var(--mm-red); }
.mm-stamp--mid { --tone: var(--mm-blue); }
.mm-stamp--gold { --tone: #b8791d; }
.mm-stamp__art { width: 100%; height: auto; display: block; }
.mm-stamp__text { font-family: var(--font-display); font-size: 44px; fill: currentColor; letter-spacing: .01em; }
.mm-stamp__sub { font-family: var(--font-hand); font-size: 17px; fill: currentColor; opacity: .85; }

/* ------------------------------------------------------------- underline */

.mm-underline { display: block; width: 100%; height: 11px; margin: 1px 0 5px; overflow: visible; }

/* --------------------------------------------------------------- buttons */

.mm-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 11px 22px 12px;
  min-height: 52px;
  border: 0;
  background: none;
  color: var(--mm-ink);
  cursor: pointer;
  pointer-events: auto;
  transform: rotate(var(--mm-tilt, 0deg));
  font: inherit;
  transition: transform .16s cubic-bezier(.2, 1.6, .36, 1);
}
.mm-btn__ink {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, #fbf4e2, #ecdec0);
  border: 3.4px solid var(--mm-ink);
  box-shadow: var(--mm-shadow-s);
  filter: url(#mmRough);
}
.mm-btn__ink2 { position: absolute; inset: 3px; border: 1.8px solid var(--mm-ink); opacity: .28; filter: url(#mmRoughS); }
.mm-btn__label { position: relative; font-family: var(--font-shout); font-size: 1.32em; letter-spacing: .045em; line-height: 1; }
.mm-btn__sub { position: relative; font-family: var(--font-hand); font-size: .78em; opacity: .72; line-height: 1; }
.mm-btn--red .mm-btn__ink { background: linear-gradient(170deg, #e2544a, #bf3128); }
.mm-btn--red { color: var(--mm-cream); }
.mm-btn--red .mm-btn__ink2 { border-color: var(--mm-cream); }
.mm-btn--blue .mm-btn__ink { background: linear-gradient(170deg, #3e83c6, #245c96); }
.mm-btn--blue { color: var(--mm-cream); }
.mm-btn:hover { transform: rotate(var(--mm-tilt, 0deg)) translateY(-2px) scale(1.02); }
.mm-btn:active { transform: rotate(var(--mm-tilt, 0deg)) translateY(1px) scale(.98); }
.mm-btn:focus { outline: none; }
.mm-btn:focus-visible .mm-btn__ink {
  box-shadow: var(--mm-shadow-s), 0 0 0 4px var(--mm-yellow), 0 0 0 7.5px var(--mm-ink);
}

/* ------------------------------------------------------------- key caps */

.mm-key { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 3px 8px 4px; margin: 0 2px; }
.mm-key__ink { position: absolute; inset: 0; background: var(--mm-paper-pale); border: 2.6px solid var(--mm-ink); box-shadow: 2px 3px 0 rgba(26, 20, 28, .3); filter: url(#mmRoughS); }
.mm-key__label { position: relative; font-family: var(--font-shout); font-size: .95em; letter-spacing: .04em; color: var(--mm-ink); }

/* ---------------------------------------------------------- stars / pips */

.mm-stars { width: 92px; height: auto; overflow: visible; }
.mm-diff { width: 86px; height: auto; }
.mm-mass { width: 66px; height: 16px; }
.mm-scratch { width: 110px; height: 15px; }

/* ------------------------------------------------------------- speech */

.mm-bubble {
  position: relative;
  display: block;
  max-width: min(46ch, 74vw);
  margin: 0 0 16px;
  padding: 9px 15px 10px;
  transform: rotate(var(--mm-tilt, 0deg));
  pointer-events: none;
}
.mm-bubble__ink {
  position: absolute;
  inset: 0;
  background: var(--mm-bubble-bg);
  border: 3.4px solid var(--mm-ink);
  border-radius: 16px;
  box-shadow: var(--mm-shadow-s);
  filter: url(#mmRough);
  z-index: -1;
}
.mm-bubble__tail { position: absolute; left: 22px; bottom: -15px; width: 26px; height: 22px; z-index: -2; filter: url(#mmRoughS); }
.mm-bubble__who { display: block; font-family: var(--font-shout); font-size: .82em; letter-spacing: .06em; opacity: .95; }
.mm-bubble__text { display: block; font-family: var(--font-hand); font-size: 1.06em; }
.mm-bubble--warn .mm-bubble__ink { background: #fdf0d4; border-color: #8c3a12; }
.mm-bubble--good .mm-bubble__ink { background: #eaf6e6; }
.mm-bubble--call .mm-bubble__text { font-family: var(--font-marker); letter-spacing: .01em; }
.mm-bubble.is-left { position: absolute; left: 4%; bottom: 16%; }
.mm-bubble.is-right { position: absolute; right: 4%; bottom: 16%; }

/* ========================================================== SCREEN SHELL */

.mm-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.2vw, 30px);
  pointer-events: none;
  overflow: hidden;
}
.mm-screen--dim { pointer-events: auto; }
.mm-screen--dim::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(46deg, rgba(26, 20, 28, .045) 0 1.5px, transparent 1.5px 13px),
    var(--mm-paper-noise),
    radial-gradient(125% 95% at 50% 18%, rgba(252, 246, 231, .95), rgba(238, 226, 198, .96) 58%, rgba(202, 182, 146, .96) 100%);
  background-size: auto, 180px 180px, auto;
  background-blend-mode: normal, multiply, normal;
}
.mm-screen--dim::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 5px solid var(--mm-ink);
  filter: url(#mmRoughXL);
  opacity: .82;
  pointer-events: none;
}

/* ---------------------------------------------------------------- boot */

.mm-screen--boot .mm-boot__card { width: min(560px, 88vw); }
.mm-boot__sign { position: relative; text-align: center; padding: 6px 0 14px; }
.mm-boot__word {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 52px);
  color: var(--mm-red);
  letter-spacing: .015em;
  clip-path: inset(0 calc(100% - var(--mm-boot-p, 0) * 100%) 0 0);
  transition: clip-path .3s linear;
}
.mm-boot__tag { display: block; font-family: var(--font-script); font-size: 1.15em; opacity: .8; }
.mm-boot__nib {
  position: absolute;
  top: 12%;
  left: calc(var(--mm-boot-p, 0) * 86% + 6%);
  width: 16px; height: 26px;
  background: var(--mm-ink);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: rotate(12deg);
  transition: left .3s linear;
}
.mm-boot__bar { display: block; width: 100%; height: 18px; margin: 4px 0 8px; }
.mm-boot__fill { transition: stroke-dashoffset .3s linear; }
.mm-boot__row { display: flex; justify-content: space-between; align-items: baseline; }
.mm-boot__note { font-family: var(--font-script); font-size: 1.1em; opacity: .82; }
.mm-boot__pct { font-family: var(--font-marker); }

/* --------------------------------------------------------------- title */

.mm-screen--title { flex-direction: column; }
.mm-title__sky { position: absolute; left: 0; right: 0; bottom: 0; height: 32vh; opacity: .5; }
.mm-title__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.4vh, 16px);
  width: min(940px, 96vw);
  max-height: 100%;
}
.mm-title__sign { width: min(760px, 92vw); text-align: center; }
.mm-title__sign .mm-panel__body { padding: clamp(10px, 2vw, 22px) clamp(16px, 4vw, 46px) clamp(12px, 2vw, 20px); }
.mm-title__kicker { font-family: var(--font-shout); letter-spacing: .5em; font-size: clamp(11px, 1.5vw, 16px); opacity: .72; margin-bottom: clamp(12px, 2.2vw, 28px); }
.mm-title__logo { display: flex; flex-direction: column; line-height: .96; padding-top: .1em; }
.mm-title__logo span {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(34px, 7vw, 88px);
  letter-spacing: .012em;
}
.mm-title__logo span::before {
  content: attr(data-t);
  position: absolute;
  left: 0; right: 0; top: 0;
  -webkit-text-stroke: .145em var(--mm-ink);
  color: var(--mm-ink);
  z-index: -1;
}
.mm-title__logo-a { color: var(--mm-red); }
.mm-title__logo-b { color: var(--mm-yellow); }
.mm-title__logo-b::before { transform: translate(4px, 2px); }
.mm-title__tag { font-family: var(--font-marker); font-size: clamp(13px, 1.9vw, 21px); letter-spacing: .02em; }
.mm-title__truck { width: min(400px, 56vw); max-height: 26vh; display: flex; justify-content: center; }
.mm-title__truck .mm-jeep { max-height: 26vh; width: auto; }
.mm-title__press { text-align: center; font-family: var(--font-shout); letter-spacing: .06em; }
.mm-title__press b { display: block; font-size: clamp(15px, 2.2vw, 24px); color: var(--mm-red); animation: mm-blink 1.6s steps(1) infinite; }
.mm-title__press span { font-family: var(--font-hand); font-size: .86em; opacity: .68; letter-spacing: 0; }
.mm-title__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1vw, 14px); }

@keyframes mm-blink { 0%, 62% { opacity: 1 } 63%, 100% { opacity: .28 } }

/* ---------------------------------------------------------------- jeep */

.mm-jeep { width: 100%; height: auto; display: block; overflow: visible; }
.mm-jeep__plate { font-family: var(--font-marker); font-size: 11.5px; fill: var(--mm-ink); letter-spacing: -.01em; }
.mm-jeep.is-idling .mm-jeep__body { animation: mm-idle 1.15s ease-in-out infinite; transform-origin: 50% 100%; }
.mm-jeep.is-idling .mm-jeep__puff { animation: mm-puff 1.7s ease-out infinite; transform-origin: 20px 96px; }
.mm-jeep.is-idling .mm-jeep__garland { animation: mm-sway 2.3s ease-in-out infinite; transform-origin: 214px 40px; }
.mm-jeep.is-idling .mm-jeep__wheel { animation: mm-wheel 2.6s linear infinite; }
@keyframes mm-idle { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-2.5px) rotate(-.35deg) } }
@keyframes mm-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.5) } 30% { opacity: .95 } 100% { opacity: 0; transform: translate(-28px, -34px) scale(1.5) } }
@keyframes mm-sway { 0%, 100% { transform: rotate(-6deg) } 50% { transform: rotate(6deg) } }
@keyframes mm-wheel { to { transform: rotate(360deg) } }

/* --------------------------------------------------------------- intro */

.mm-screen--intro { flex-direction: column; gap: 12px; }
.mm-comic__stage { display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0; }
.mm-comic { width: min(880px, 94vw); max-height: 100%; }
.mm-comic .mm-panel__body { padding: 16px 18px 14px; }
.mm-comic__art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
  background: linear-gradient(178deg, #eaf1f2 0%, #f6efdc 70%);
  border: 4px solid var(--mm-ink);
}
.mm-comic__cap { margin-top: 10px; font-family: var(--font-marker); font-size: clamp(14px, 2vw, 22px); }
.mm-comic__aside { font-family: var(--font-script); font-size: clamp(13px, 1.7vw, 19px); opacity: .74; }
.mm-comic__name { font-family: var(--font-hand); font-size: 15px; fill: var(--mm-ink); }
.mm-comic__bar { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mm-comic__pips { display: flex; gap: 7px; }
.mm-comic__pip { width: 14px; height: 14px; background: var(--mm-paper-pale); border: 3px solid var(--mm-ink); border-radius: 50%; box-shadow: 2px 2px 0 rgba(26, 20, 28, .3); }
.mm-comic__pip.is-on { background: var(--mm-red); transform: scale(1.25); }
.mm-comic__rooster { animation: mm-peck 2.4s ease-in-out infinite; transform-origin: 196px 56px; }
@keyframes mm-peck { 0%, 70%, 100% { transform: rotate(0) } 80% { transform: rotate(16deg) } }
.mm-comic__sun { animation: mm-spin 26s linear infinite; transform-origin: 320px 60px; }
@keyframes mm-spin { to { transform: rotate(360deg) } }

/* ------------------------------------------------------------ jobboard */

.mm-screen--board { flex-direction: column; gap: clamp(8px, 1.6vh, 20px); align-items: stretch; }
.mm-screen--board::before {
  background-image:
    var(--mm-cork-noise),
    radial-gradient(120% 100% at 50% 0%, #d4a86c 0%, #bd8d51 55%, #966a37 100%);
  background-size: 140px 140px, auto;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 140px rgba(40, 22, 8, .45);
}
.mm-board__note {
  position: relative;
  align-self: center;
  margin: 4px auto 0;
  padding: 7px 20px 9px;
  max-width: min(560px, 90vw);
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(14px, 1.7vw, 19px);
  background: linear-gradient(170deg, #fdf6e4, #efe2c2);
  border: 3.4px solid var(--mm-ink);
  box-shadow: var(--mm-shadow-s);
  transform: rotate(-.8deg);
}
.mm-board__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; position: relative; }
.mm-board__sign {
  background: linear-gradient(170deg, #fbf4e2, #ecdec0);
  border: 4px solid var(--mm-ink);
  box-shadow: var(--mm-shadow);
  padding: 8px 22px 10px;
  transform: rotate(-1deg);
}
.mm-board__sign h1 { font-family: var(--font-display); font-size: clamp(22px, 3.6vw, 40px); color: var(--mm-red); letter-spacing: .01em; }
.mm-board__sign p { font-family: var(--font-script); font-size: clamp(13px, 1.6vw, 18px); opacity: .8; }
.mm-board__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: clamp(12px, 2vw, 26px);
  align-content: start;
  align-items: start;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 6px 10px;
}
.mm-job { padding-top: 12px; }
.mm-job .mm-panel__body { padding: 20px 16px 14px; }
.mm-job__hit { position: absolute; inset: 0; background: none; border: 0; cursor: pointer; z-index: 4; }
.mm-job__hit:focus { outline: none; }
.mm-job__hit:focus-visible { outline: 4px solid var(--mm-yellow); outline-offset: 3px; }
.mm-job.is-locked { filter: saturate(.5) brightness(.94); }
.mm-job.is-locked .mm-job__hit { cursor: not-allowed; }
.mm-job__lock { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(var(--mm-stamp-rot)); width: 84%; z-index: 5; }
.mm-pin { position: absolute; left: 50%; top: -16px; margin-left: -17px; width: 34px; height: 34px; z-index: 4; }
.mm-job__top { display: flex; align-items: baseline; gap: 8px; }
.mm-job__no { font-family: var(--font-shout); color: var(--mm-red); font-size: 1.1em; }
.mm-job__title { font-family: var(--font-display); font-size: clamp(17px, 2.1vw, 25px); line-height: 1.05; }
.mm-job__where { font-family: var(--font-hand); font-size: .92em; opacity: .82; margin-top: 3px; }
.mm-job__plan { max-width: 250px; margin: 8px auto 6px; background: #fdf8ec; border: 3px solid var(--mm-ink); padding: 4px; }
.mm-plan { display: block; width: 100%; height: auto; }
.mm-plan__label { font-family: var(--font-hand); font-size: 11px; fill: var(--mm-ink); opacity: .8; }
.mm-plan__note { font-family: var(--font-hand); font-size: 10px; fill: var(--mm-ink); opacity: .7; }
.mm-job__blurb { font-family: var(--font-script); font-size: 1.05em; color: #6a3c1c; }
.mm-job__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mm-job__cap, .mm-led__cap { display: block; font-family: var(--font-shout); font-size: .72em; letter-spacing: .12em; opacity: .68; }
.mm-job__best { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-marker); font-size: .82em; }
.mm-job__best.is-none { font-family: var(--font-script); opacity: .55; }
.mm-job__rank.is-good { color: var(--mm-green); }
.mm-job__rank.is-gold { color: #b8791d; }
.mm-job__rank.is-bad { color: var(--mm-red); }
.mm-job__rank.is-mid { color: var(--mm-blue); }

/* ------------------------------------------------------------- briefing */

.mm-brief__host { width: min(1000px, 96vw); max-height: 100%; overflow: auto; }
.mm-brief__head > div:first-child { flex: 1 1 320px; min-width: 0; }
.mm-brief .mm-panel__body { padding: clamp(14px, 2.4vw, 26px); }
.mm-brief__head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.mm-brief__kicker { font-family: var(--font-shout); letter-spacing: .3em; font-size: .78em; opacity: .66; }
.mm-brief__title { font-family: var(--font-display); font-size: clamp(22px, 3.6vw, 40px); line-height: 1.12; }
.mm-brief__where { font-family: var(--font-hand); font-size: 1.02em; opacity: .84; }
.mm-brief__plan { flex: none; width: clamp(118px, 13vw, 152px); background: #fdf8ec; border: 3px solid var(--mm-ink); padding: 5px; text-align: center; align-self: flex-start; }
.mm-brief__plan .mm-plan { aspect-ratio: 6 / 5; }
.mm-brief__diff { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-shout); font-size: .74em; letter-spacing: .1em; }
.mm-brief__cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(12px, 2.4vw, 30px); margin-top: 10px; align-items: start; }
.mm-brief__sub { font-family: var(--font-shout); font-size: 1em; letter-spacing: .18em; color: var(--mm-red); margin-bottom: 4px; }
.mm-brief__list { display: flex; flex-direction: column; gap: 5px; }
.mm-brief__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  grid-template-areas: 'n label tag' 'n tl tag';
  align-items: baseline;
  column-gap: 8px;
  padding-bottom: 4px;
  border-bottom: 2px dotted rgba(26, 20, 28, .28);
}
.mm-brief__n { grid-area: n; }
.mm-brief__label { grid-area: label; }
.mm-brief__tl { grid-area: tl; }
.mm-brief__tag { grid-area: tag; align-self: center; }
.mm-brief__n { font-family: var(--font-marker); color: var(--mm-red); }
.mm-brief__label { font-family: var(--font-hand); font-size: 1.05em; }
.mm-brief__tl { font-family: var(--font-script); opacity: .7; font-size: .95em; }
.mm-brief__tag { font-family: var(--font-shout); font-size: .72em; letter-spacing: .07em; padding: 2px 7px; border: 2.4px solid var(--mm-ink); background: var(--mm-paper-pale); white-space: nowrap; }
.mm-brief__tag.is-two-person, .mm-brief__tag.is-bayanihan { background: var(--mm-yellow); }
.mm-brief__tag.is-fragile { background: #f2c6c0; }
.mm-brief__tag.is-heavy { background: #cdbfa2; }
.mm-brief__note-text { font-family: var(--font-script); font-size: clamp(15px, 1.8vw, 21px); line-height: 1.35; }
.mm-brief__note-from { font-family: var(--font-marker); text-align: right; margin-top: 6px; }
.mm-brief__notecol .mm-panel { margin-top: 16px; }
.mm-brief__foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }

/* ---------------------------------------------------------------- pause */

.mm-screen--pause .mm-pause__card { width: min(560px, 94vw); max-height: 94%; overflow: auto; }
.mm-pause__card .mm-panel__body { padding-bottom: 20px; }
.mm-pause__kicker { font-family: var(--font-shout); letter-spacing: .3em; font-size: .78em; opacity: .66; }
.mm-pause__title { font-family: var(--font-display); font-size: clamp(26px, 4.4vw, 44px); color: var(--mm-red); }
.mm-pause__aside { font-family: var(--font-script); opacity: .78; margin-bottom: 10px; }
.mm-pause__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* -------------------------------------------------------------- results */

.mm-res__host, .mm-fail__host { width: min(760px, 96vw); max-height: 100%; overflow: auto; }
.mm-res .mm-panel__body { padding: clamp(14px, 2vw, 22px) clamp(16px, 2.6vw, 28px); }
.mm-res__kicker { font-family: var(--font-shout); letter-spacing: .26em; font-size: .78em; opacity: .66; }
.mm-res__title { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 38px); line-height: 1.1; }
.mm-res__best { display: inline-block; font-family: var(--font-marker); color: var(--mm-red); transform: rotate(-3deg); }
.mm-res__rows { margin-top: 10px; }
.mm-res__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; opacity: 0; padding: 1px 0 2px; border-bottom: 2px dotted rgba(26, 20, 28, .22); }
.mm-res__row.is-in { opacity: 1; }
.mm-res__cap { font-family: var(--font-hand); font-size: 1.05em; }
.mm-res__val { font-family: var(--font-marker); font-size: 1.05em; white-space: nowrap; }
.mm-res__row.is-sub { padding-left: 14px; font-size: .92em; border-bottom: 0; }
.mm-res__row.is-head { border-bottom: 0; padding-bottom: 0; }
.mm-res__row.is-plus .mm-res__val { color: var(--mm-green); }
.mm-res__row.is-minus .mm-res__val { color: var(--mm-red); }
.mm-res__row.is-total { border-bottom: 0; border-top: 4px solid var(--mm-ink); margin-top: 8px; padding-top: 8px; }
.mm-res__row.is-total .mm-res__cap { font-family: var(--font-shout); font-size: 1.3em; letter-spacing: .1em; }
.mm-res__row.is-total .mm-res__val { font-family: var(--font-display); font-size: 1.7em; }
.mm-res__stamp { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 24px); margin: 4px 0 0; min-height: 74px; }
.mm-res__stamp .mm-stamp { width: clamp(130px, 17vw, 186px); }
.mm-res__quotes { opacity: 0; transition: opacity .3s ease; margin-top: 8px; }
.mm-res__quotes.is-in { opacity: 1; }
.mm-res__quote { font-family: var(--font-script); font-size: 1.12em; }
.mm-res__who { font-family: var(--font-shout); font-size: .82em; letter-spacing: .06em; margin-right: 6px; }
.mm-res__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; opacity: 0; transition: opacity .3s ease; }
.mm-res__foot.is-in { opacity: 1; }

/* ----------------------------------------------------------------- fail */

.mm-fail .mm-panel__body { padding: clamp(16px, 2.6vw, 28px); text-align: center; }
.mm-fail__kicker { font-family: var(--font-shout); letter-spacing: .3em; opacity: .66; font-size: .8em; }
.mm-fail__title { font-family: var(--font-display); font-size: clamp(24px, 4.4vw, 44px); }
.mm-fail__stamp { display: flex; justify-content: center; margin: 6px 0; }
.mm-fail__reason { font-family: var(--font-marker); font-size: 1.15em; color: var(--mm-red); }
.mm-fail__joke { font-family: var(--font-script); font-size: clamp(15px, 2vw, 22px); margin: 8px 0 10px; }
.mm-fail__tally { display: grid; grid-template-columns: auto auto; gap: 2px 14px; justify-content: center; font-family: var(--font-hand); opacity: .85; }
.mm-fail__tally dt { font-family: var(--font-shout); font-size: .78em; letter-spacing: .08em; text-align: right; }
.mm-fail__quote { font-family: var(--font-script); font-size: 1.06em; margin-top: 6px; }
.mm-fail__btns { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }

/* -------------------------------------------------------------- credits */

.mm-credits { width: min(680px, 94vw); max-height: 100%; overflow: auto; text-align: center; }
.mm-credits__kicker { font-family: var(--font-shout); letter-spacing: .34em; opacity: .68; font-size: .8em; }
.mm-credits__title { font-family: var(--font-display); font-size: clamp(26px, 5vw, 52px); color: var(--mm-red); }
.mm-credits__tag { font-family: var(--font-marker); }
.mm-credits__line { display: block; width: 100%; height: auto; margin: 10px 0; }
.mm-credits__list { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; text-align: left; margin-top: 6px; }
.mm-credits__list dt { font-family: var(--font-shout); font-size: .82em; letter-spacing: .08em; color: var(--mm-blue); }
.mm-credits__list dd { font-family: var(--font-hand); }
.mm-credits__aside { font-family: var(--font-script); font-size: 1.2em; margin-top: 12px; }
.mm-credits__btns { display: flex; justify-content: center; margin-top: 14px; }

/* ---------------------------------------------------------------- sheet */

.mm-sheet { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; padding: 3vh 2vw; }
.mm-sheet[hidden] { display: none; }
.mm-sheet__scrim { position: absolute; inset: 0; background: rgba(26, 20, 28, .55); }
.mm-sheet__card { position: relative; width: min(620px, 94vw); max-height: 94%; overflow: auto; }
.mm-sheet__card.is-wide { width: min(860px, 96vw); }
.mm-sheet__title { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 36px); color: var(--mm-red); }
.mm-sheet__sub { font-family: var(--font-script); opacity: .78; margin-bottom: 8px; }
.mm-sheet__aside { font-family: var(--font-script); margin-top: 10px; opacity: .8; }
.mm-sheet__foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.mm-ctrl { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3px 12px; align-items: baseline; }
.mm-ctrl__what { font-family: var(--font-hand); font-size: 1.02em; border-bottom: 2px dotted rgba(26, 20, 28, .25); }
.mm-ctrl__keys { display: flex; gap: 10px; justify-content: space-between; border-bottom: 2px dotted rgba(26, 20, 28, .25); }
.mm-ctrl__kb { font-family: var(--font-marker); font-size: .95em; }
.mm-ctrl__touch { font-family: var(--font-shout); font-size: .84em; letter-spacing: .06em; color: var(--mm-blue); }

/* ------------------------------------------------------------- settings */

.mm-set { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mm-set__row { display: grid; grid-template-columns: minmax(110px, 1fr) 1.4fr auto; align-items: center; gap: 10px; }
.mm-set__label { font-family: var(--font-hand); }
.mm-set__slot { position: relative; height: 26px; display: flex; align-items: center; }
.mm-set__rail { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-set__range { position: relative; width: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; height: 26px; pointer-events: auto; }
.mm-set__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--mm-red); border: 3px solid var(--mm-ink); box-shadow: 2px 2px 0 rgba(26, 20, 28, .3); cursor: pointer; }
.mm-set__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--mm-red); border: 3px solid var(--mm-ink); cursor: pointer; }
.mm-set__range:focus-visible { outline: 3px solid var(--mm-yellow); outline-offset: 2px; }
.mm-set__val { font-family: var(--font-marker); font-size: .9em; min-width: 46px; text-align: right; }
.mm-set__seg { display: flex; gap: 6px; }
.mm-seg { position: relative; padding: 5px 12px 6px; border: 0; background: none; font-family: var(--font-shout); font-size: .92em; letter-spacing: .05em; cursor: pointer; color: var(--mm-ink); pointer-events: auto; }
.mm-seg__ink { position: absolute; inset: 0; border: 3px solid var(--mm-ink); background: var(--mm-paper-pale); filter: url(#mmRoughS); }
.mm-seg.is-on .mm-seg__ink { background: var(--mm-yellow); }
.mm-seg span:last-child { position: relative; }
.mm-seg:focus { outline: none; }
.mm-seg:focus-visible .mm-seg__ink { box-shadow: 0 0 0 3px var(--mm-yellow), 0 0 0 6px var(--mm-ink); }
.mm-set__toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 12px; }
.mm-set__toggle { display: flex; align-items: center; gap: 8px; background: none; border: 0; font: inherit; font-family: var(--font-hand); color: inherit; cursor: pointer; padding: 3px 2px; text-align: left; pointer-events: auto; }
.mm-check { width: 26px; height: 24px; flex: none; }
.mm-set__toggle:focus { outline: none; }
.mm-set__toggle:focus-visible { outline: 3px solid var(--mm-yellow); outline-offset: 2px; }

/* ============================================================== THE HUD */

.mm-hud { position: absolute; inset: 0; pointer-events: none; }

/* rain: hand-inked streaks across the frame, never over the play area centre */
.mm-hud.is-rain .mm-hud__wrap::before {
  content: '';
  position: absolute;
  inset: -4%;
  pointer-events: none;
  background-image: repeating-linear-gradient(74deg,
    rgba(43, 108, 174, .5) 0 2px, transparent 2px 8px, rgba(43, 108, 174, .28) 8px 9px, transparent 9px 26px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, transparent 32%, #000 92%);
  mask-image: radial-gradient(120% 90% at 50% 45%, transparent 32%, #000 92%);
  opacity: .5;
  animation: mm-rain .55s linear infinite;
}
@keyframes mm-rain { to { background-position: -26px 92px } }
.mm-hud.is-rain .mm-hud__ledger .mm-panel__ink { border-color: var(--mm-blue); }
.mm-hud__wrap {
  position: absolute;
  inset: clamp(8px, 1.3vw, 18px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'tl tc tr' 'ml mc mr' 'bl bc br';
  gap: 8px;
  pointer-events: none;
}
.mm-hud .mm-panel { pointer-events: none; }

.mm-hud__job { grid-area: tl; justify-self: start; max-width: min(340px, 34vw); }
.mm-hud__job .mm-panel__body { padding: 15px 15px 11px; }
.mm-hud__job-title { font-family: var(--font-display); font-size: clamp(15px, 1.6vw, 22px); line-height: 1.18; }
.mm-hud__job-sub { font-family: var(--font-hand); font-size: .88em; opacity: .8; }
.mm-hud__obj { display: none; margin-top: 4px; }
.mm-hud__obj.is-on { display: block; }
.mm-hud__obj-cap { font-family: var(--font-shout); font-size: .7em; letter-spacing: .14em; color: var(--mm-red); margin-right: 5px; }
.mm-hud__obj-text { font-family: var(--font-marker); font-size: .96em; }

.mm-hud__clock { grid-area: tc; justify-self: center; align-self: start; }
.mm-hud__clock .mm-panel__body { display: flex; align-items: center; gap: 9px; padding: 6px 14px 7px; }
.mm-clock__face { width: 38px; height: 38px; flex: none; }
.mm-clock__nums { display: flex; flex-direction: column; line-height: 1; }
.mm-clock__time { font-family: var(--font-display); font-size: clamp(18px, 2vw, 27px); }
.mm-clock__par { font-family: var(--font-hand); font-size: .78em; opacity: .72; }
.mm-hud__clock.is-over .mm-clock__time { color: var(--mm-red); }
.mm-hud__clock.is-up { animation: mm-nudge .6s ease-in-out infinite; }
@keyframes mm-nudge { 0%, 100% { transform: rotate(var(--mm-tilt)) } 50% { transform: rotate(calc(var(--mm-tilt) + 1.6deg)) scale(1.03) } }

.mm-hud__ledger { grid-area: tr; justify-self: end; width: min(300px, 34vw); }
.mm-hud__ledger .mm-panel__body { padding: 8px 13px 9px; }
.mm-led__row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mm-led__row--dmg { margin-top: 2px; }
.mm-led__cap { min-width: 44px; }
.mm-led__money { font-family: var(--font-display); font-size: clamp(16px, 1.7vw, 23px); color: #1f6e46; }
.mm-led__big { font-family: var(--font-display); font-size: 1.28em; }
.mm-led__small { font-family: var(--font-hand); opacity: .74; }
.mm-led__note { font-family: var(--font-script); font-size: .92em; opacity: .74; }
.mm-led__minus { font-family: var(--font-marker); color: var(--mm-red); }
.mm-led__weather { margin-left: auto; }
.mm-weather { width: 34px; height: 28px; }
.mm-tally { flex: 1 1 120px; min-width: 90px; }
.mm-tally__art { display: block; width: 100%; height: 26px; }
.mm-tally__none { font-family: var(--font-script); font-size: 13px; fill: var(--mm-ink); opacity: .55; }
.mm-tally__more { font-family: var(--font-marker); font-size: 15px; fill: var(--mm-red); }
.mm-hud__ledger.is-bad .mm-panel__ink { border-color: var(--mm-red); }

/* gauges */
.mm-hud__gauges { grid-area: bl; align-self: end; justify-self: start; display: flex; align-items: flex-end; gap: 10px; }
.mm-gauge { position: relative; text-align: center; filter: drop-shadow(3px 4px 0 rgba(26, 20, 28, .3)); }
.mm-gauge__art { display: block; height: auto; }
.mm-gauge--stamina .mm-gauge__art { width: clamp(56px, 5.2vw, 76px); }
.mm-gauge--grip .mm-gauge__art { width: clamp(74px, 7vw, 104px); }
.mm-gauge__cap { display: block; font-family: var(--font-shout); font-size: .72em; letter-spacing: .12em; color: var(--mm-ink); text-shadow: 0 0 4px var(--mm-paper), 0 0 8px var(--mm-paper); }
.mm-gauge--grip { display: none; }
.mm-hud__gauges.is-carrying .mm-gauge--grip { display: block; }
.mm-drip { opacity: 0; transform-box: view-box; }
.mm-gauge--stamina.is-low .mm-drip { animation: mm-drip 1.5s ease-in infinite; }
.mm-gauge--stamina.is-low .mm-drip--1 { animation-delay: .5s; }
.mm-gauge--stamina.is-low .mm-drip--2 { animation-delay: 1s; }
@keyframes mm-drip { 0% { opacity: 0; transform: translateY(-4px) scale(.6) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(28px) scale(1) } }
.mm-gauge--stamina.is-strained { animation: mm-pulse .5s ease-in-out infinite; }
@keyframes mm-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.045) } }
.mm-finger, .mm-grip__load { transition: transform .18s cubic-bezier(.2, 1.5, .4, 1); }
.mm-gauge--grip.is-slipping { animation: mm-jitter .22s linear infinite; }
@keyframes mm-jitter { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(1.5px, -1px) } }

/* crew */
.mm-hud__crew { grid-area: ml; align-self: start; justify-self: start; display: flex; gap: 6px; margin-top: 7px; }
.mm-crew { position: relative; width: 40px; text-align: center; filter: drop-shadow(2px 3px 0 rgba(26, 20, 28, .3)); }
.mm-crew__art { display: block; width: 40px; height: 40px; }
.mm-crew__initial { position: absolute; left: 0; right: 0; top: 8px; font-family: var(--font-display); font-size: 17px; color: var(--mm-ink); }
.mm-crew__name { display: block; font-family: var(--font-hand); font-size: .7em; white-space: nowrap; text-shadow: 0 0 4px var(--mm-paper), 0 0 7px var(--mm-paper), 0 0 10px var(--mm-paper); }
.mm-crew--carrying .mm-crew__art { animation: mm-bob .6s ease-in-out infinite; }
.mm-crew--called .mm-crew__art { animation: mm-pulse .45s ease-in-out infinite; }
.mm-crew--tired { opacity: .55; }
@keyframes mm-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

/* truck */
.mm-hud__truck { grid-area: br; justify-self: end; align-self: end; width: clamp(136px, 14vw, 196px); }
.mm-hud__truck .mm-panel__body { padding: 6px 8px 4px; }
.mm-hud__truck-cap { display: block; font-family: var(--font-marker); font-size: .74em; text-align: center; color: #3a2413; }
.mm-truck__art { display: block; width: 100%; height: auto; }
.mm-truck__bed { transition: transform .25s ease; transform-origin: 58px 32px; }
.mm-truck.is-tipping .mm-truck__needle { animation: mm-jitter .2s linear infinite; }
.mm-truck.is-full .mm-truck__art { animation: mm-pulse .8s ease-in-out infinite; }

/* centre column */
.mm-hud__centre { grid-area: bc; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mm-hud__beat { display: none; }
.mm-hud__beat.is-on { display: block; }
.mm-beat__card .mm-panel__body { padding: 5px 12px 6px; }
.mm-beat { text-align: center; }
.mm-beat__cap { display: block; font-family: var(--font-shout); letter-spacing: .2em; font-size: .92em; color: var(--mm-red); text-shadow: 0 0 5px var(--mm-paper); }
.mm-beat__art { display: block; width: clamp(180px, 20vw, 260px); height: auto; }
.mm-beat.is-hot .mm-beat__cap { animation: mm-pulse .3s ease-in-out infinite; color: var(--mm-green); }
.mm-beat__marker { transition: none; }

.mm-hud__carry, .mm-hud__nearby, .mm-hud__prompt { display: none; }
.mm-hud__carry.is-on, .mm-hud__nearby.is-on, .mm-hud__prompt.is-on { display: block; }
.mm-carry { width: min(340px, 78vw); }
.mm-carry .mm-panel__body { padding: 9px 14px 10px; }
.mm-carry__head { display: flex; align-items: baseline; gap: 8px; }
.mm-carry__label { font-family: var(--font-display); font-size: 1.14em; }
.mm-carry__tl { font-family: var(--font-script); opacity: .74; }
.mm-carry__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0; }
.mm-tag { font-family: var(--font-shout); font-size: .68em; letter-spacing: .07em; padding: 1px 6px 2px; border: 2.4px solid var(--mm-ink); background: var(--mm-paper-pale); }
.mm-tag--two-person { background: var(--mm-yellow); }
.mm-tag--fragile { background: #f2c6c0; }
.mm-tag--upright { background: #cfe0cf; }
.mm-tag--heavy { background: #cdbfa2; }
.mm-tag--warn { background: var(--mm-red); color: var(--mm-cream); animation: mm-pulse .5s ease-in-out infinite; }
.mm-carry__dmg { display: flex; align-items: center; gap: 7px; }
.mm-carry__dmg-cap { font-family: var(--font-shout); font-size: .66em; letter-spacing: .12em; opacity: .7; }
.mm-near { width: min(320px, 76vw); }
.mm-near .mm-panel__body { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px 7px; }
.mm-near__label { font-family: var(--font-hand); font-size: 1.05em; }
.mm-near__tl { font-family: var(--font-script); opacity: .7; }
.mm-near__reason { font-family: var(--font-marker); font-size: .85em; color: var(--mm-red); width: 100%; }
.mm-near.is-blocked .mm-panel__ink { border-color: var(--mm-red); }
.mm-prompt .mm-panel__body { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 7px 15px 8px; }
.mm-prompt__keys { display: flex; align-items: center; gap: 3px; }
.mm-prompt .mm-key__ink { background: var(--mm-yellow); }
.mm-prompt__touch { display: none; font-family: var(--font-shout); background: var(--mm-yellow); color: var(--mm-ink); padding: 2px 9px; border: 2.6px solid var(--mm-paper); }
.mm-prompt__text { font-family: var(--font-marker); font-size: 1.06em; }
.mm-prompt__sub { font-family: var(--font-script); opacity: .8; font-size: .95em; }
.mm-hud__hint { display: none; font-family: var(--font-script); font-size: 1.05em; color: var(--mm-ink); text-shadow: 0 0 6px var(--mm-paper), 0 0 12px var(--mm-paper); }
.mm-hud__hint.is-on { display: block; }

/* tutorial card */
.mm-hud__tut { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none; z-index: 6; }
.mm-hud__tut.is-on { display: block; }
.mm-tut { width: min(280px, 44vw); }
.mm-tut .mm-panel__body { padding: 23px 16px 14px; }
.mm-tut__title { font-family: var(--font-display); font-size: 1.16em; line-height: 1.25; color: var(--mm-red); }
.mm-tut__art { display: block; width: 100%; height: auto; margin: 5px 0; }
.mm-tut__body { font-family: var(--font-hand); font-size: 1em; }
.mm-tut__keys { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }

/* toasts, pops, flash, countdown */
.mm-hud__toasts { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mm-toast { position: relative; padding: 5px 15px 6px; transform: rotate(var(--mm-tilt, 0deg)); }
.mm-toast__ink { position: absolute; inset: 0; background: var(--mm-paper); border: 3px solid var(--mm-ink); box-shadow: var(--mm-shadow-s); filter: url(#mmRough); }
.mm-toast__text { position: relative; font-family: var(--font-marker); font-size: 1.02em; white-space: nowrap; }
.mm-toast--good .mm-toast__ink { background: #d9efd4; }
.mm-toast--bad .mm-toast__ink { background: #f6cfc9; }
.mm-toast--money .mm-toast__ink { background: var(--mm-yellow); }
.mm-toast--money .mm-toast__text { font-family: var(--font-display); }

.mm-hud__pops { position: absolute; inset: 0; }
.mm-pop {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 34px);
  color: var(--mm-paper);
  -webkit-text-stroke: 5px var(--mm-ink);
  paint-order: stroke fill;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.mm-pop--good { color: #6fd08a; }
.mm-pop--bad { color: #f18d82; }
.mm-pop--money { color: var(--mm-yellow); }

.mm-flash { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.mm-flash__edge { fill: var(--mm-red); }
.mm-flash[data-kind='break'] .mm-flash__edge { fill: #7c1d16; }
.mm-flash[data-kind='good'] .mm-flash__edge { fill: var(--mm-green); }

.mm-hud__count-host { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.mm-count { position: relative; display: none; width: min(260px, 52vw); aspect-ratio: 1; align-items: center; justify-content: center; }
.mm-count.is-on { display: flex; }
.mm-count__ring { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(4px 6px 0 rgba(26, 20, 28, .3)); }
.mm-count__n {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(64px, 13vw, 130px);
  color: var(--mm-yellow);
  -webkit-text-stroke: 11px var(--mm-ink);
  paint-order: stroke fill;
  line-height: 1;
}
.mm-count__n.is-go { font-size: clamp(34px, 7vw, 74px); color: var(--mm-red); }

/* ============================================================ TRANSITION */

.mm-wipe { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 30; }
.mm-wipe.is-on { display: flex; }
.mm-wipe.is-covered { pointer-events: auto; }
.mm-wipe__blot {
  position: absolute;
  left: 50%; top: 50%;
  width: 160vmax; height: 160vmax;
  margin: -80vmax 0 0 -80vmax;
  border-radius: 46% 54% 51% 49% / 52% 47% 53% 48%;
  background: var(--mm-ink);
  filter: url(#mmBlot);
  transform: scale(.02);
}
.mm-wipe__label {
  position: relative;
  font-family: var(--font-marker);
  font-size: clamp(16px, 2.4vw, 26px);
  color: var(--mm-paper);
  opacity: 0;
  transition: opacity .25s ease .15s;
}
.mm-wipe.has-label.is-covered .mm-wipe__label { opacity: 1; }

/* ================================================================ TOUCH */

.mm-touch { position: absolute; inset: 0; display: none; }
.mm-ui[data-screen='hud'] .mm-touch.is-on { display: block; }
.mm-touch__look { position: absolute; right: 0; left: 34%; top: 8%; bottom: 30%; pointer-events: auto; touch-action: none; z-index: 1; }
.mm-stick { position: absolute; left: max(14px, 3vw); bottom: max(14px, 3vh); width: clamp(112px, 22vw, 168px); aspect-ratio: 1; pointer-events: auto; touch-action: none; z-index: 3; }
.mm-stick__art { width: 100%; height: 100%; filter: drop-shadow(3px 4px 0 rgba(26, 20, 28, .3)); }
.mm-stick__knob { transition: transform .06s linear; }
.mm-stick__cap { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-family: var(--font-shout); font-size: .76em; letter-spacing: .14em; text-shadow: 0 0 5px var(--mm-paper); }
.mm-touch__pad {
  position: absolute;
  right: max(10px, 2vw);
  bottom: max(10px, 2vh);
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-areas: '. cam brace' 'call rotl rotr' 'tilt heave grab';
  gap: clamp(5px, 1vw, 11px);
  align-items: end;
  justify-items: center;
  z-index: 3;
}
.mm-tbtn { position: relative; background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto; touch-action: none; width: clamp(52px, 11vw, 74px); aspect-ratio: 1; filter: drop-shadow(3px 4px 0 rgba(26, 20, 28, .3)); }
.mm-tbtn.is-big { width: clamp(72px, 15vw, 100px); }
.mm-tbtn__art { width: 100%; height: 100%; display: block; }
.mm-tbtn__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-shout); font-size: clamp(11px, 2.1vw, 15px); letter-spacing: .04em; color: var(--mm-ink); }
.mm-tbtn.is-big .mm-tbtn__label { font-size: clamp(14px, 2.8vw, 20px); }
.mm-tbtn.is-down { transform: scale(.93); }
.mm-tbtn.is-down .mm-tbtn__art path:first-child { fill: var(--mm-yellow); }
.mm-tbtn:focus { outline: none; }
.mm-tbtn:focus-visible { outline: 4px solid var(--mm-yellow); outline-offset: 2px; border-radius: 50%; }
.mm-tbtn--cam { grid-area: cam; }
.mm-tbtn--brace { grid-area: brace; }
.mm-tbtn--call { grid-area: call; }
.mm-tbtn--rotl { grid-area: rotl; }
.mm-tbtn--rotr { grid-area: rotr; }
.mm-tbtn--tilt { grid-area: tilt; }
.mm-tbtn--heave { grid-area: heave; }
.mm-tbtn--grab { grid-area: grab; }
.mm-touch__pause { display: none; position: absolute; right: max(10px, 2vw); top: max(10px, 2vh); width: 46px; height: 46px; background: none; border: 0; cursor: pointer; pointer-events: auto; font-family: var(--font-shout); font-size: 19px; color: var(--mm-ink); z-index: 4; }
.mm-ui--touch[data-screen='hud'] .mm-touch__pause { display: flex; align-items: center; justify-content: center; }
.mm-touch__pause-ink { position: absolute; inset: 0; background: var(--mm-paper); border: 3.4px solid var(--mm-ink); box-shadow: var(--mm-shadow-s); filter: url(#mmRough); }
.mm-touch__pause span:last-child { position: relative; letter-spacing: .1em; }

/* touch reshuffles the HUD so nothing sits under a thumb */
.mm-ui--touch .mm-prompt__touch { display: inline-block; }
.mm-ui--touch .mm-hud__gauges { align-self: start; margin-top: 4px; }
.mm-ui--touch .mm-hud__crew { display: none; }
.mm-ui--touch .mm-hud__truck { grid-area: mr; align-self: start; justify-self: end; width: clamp(104px, 22vw, 140px); }
.mm-ui--touch .mm-hud__centre { padding-bottom: clamp(150px, 26vh, 240px); }
.mm-ui--touch .mm-hud__bubbles { bottom: auto; top: 44%; }
.mm-ui--touch .mm-hud__tut { top: 38%; }
.mm-ui--touch .mm-hud__ledger { margin-right: 52px; }

.mm-hud__bubbles { position: absolute; left: 0; bottom: max(190px, 26%); display: flex; flex-direction: column-reverse; align-items: flex-start; max-width: min(420px, 46vw); }

/* =========================================================== RESPONSIVE */

@media (max-width: 900px) {
  .mm-brief__cols { grid-template-columns: 1fr; }
  .mm-hud__job { max-width: 42vw; }
  .mm-hud__ledger { width: min(300px, 36vw); }
}

/* short landscape (phone on its side): shrink the instruments, keep the read */
@media (max-height: 560px) and (min-width: 620px) {
  .mm-hud__ledger { width: min(260px, 30vw); }
  .mm-hud__job { max-width: min(290px, 30vw); }
  .mm-hud__job .mm-panel__body { padding: 14px 12px 9px; }
  .mm-hud__clock .mm-panel__body { padding: 4px 10px 5px; }
  .mm-clock__face { width: 28px; height: 28px; }
  .mm-gauge--stamina .mm-gauge__art { width: 44px; }
  .mm-gauge--grip .mm-gauge__art { width: 62px; }
  .mm-hud__bubbles { left: clamp(104px, 16vw, 150px); bottom: auto; top: 30%; max-width: min(300px, 40vw); }
  .mm-hud__truck { width: clamp(96px, 13vw, 130px); }
  .mm-tut { width: min(210px, 30vw); }
}

@media (max-width: 720px), (max-height: 460px) {
  .mm-ui { font-size: 13px; }
  .mm-hud__wrap { gap: 5px; }
  .mm-hud__crew { display: none; }
  .mm-hud__truck { width: clamp(96px, 24vw, 130px); }
  .mm-hud__gauges { gap: 5px; }
  .mm-title__btns { gap: 6px; }
  .mm-btn { padding: 8px 14px 9px; min-height: 44px; }
  .mm-screen--dim::after { inset: 6px; border-width: 4px; }
  .mm-hud__bubbles { max-width: 62vw; bottom: 38%; }
  .mm-tut { width: min(220px, 52vw); }
}

@media (orientation: portrait) and (max-width: 620px) {
  .mm-hud__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'tl tr' 'ml mr' 'bc bc'; }
  .mm-hud__clock { grid-area: tl; justify-self: start; align-self: start; margin-top: 4px; }
  .mm-hud__job { grid-area: tl; justify-self: start; max-width: 60vw; margin-top: 58px; }
  .mm-hud__ledger { grid-area: tr; width: 40vw; }
  .mm-hud__gauges { grid-area: ml; align-self: start; margin-top: 6px; }
  .mm-hud__truck { grid-area: mr; align-self: start; justify-self: end; }
  .mm-hud__tut { top: 42%; right: -4px; }
  .mm-title__stack { gap: 8px; }
  .mm-title__truck { width: 86vw; }
  .mm-res__foot, .mm-brief__foot { flex-wrap: wrap; justify-content: center; }
  .mm-comic__art { max-height: 42vh; }
}

/* short viewports: compact the paperwork so nothing needs scrolling */
@media (max-height: 620px) {
  .mm-res .mm-panel__body, .mm-fail .mm-panel__body { padding: 10px 16px 12px; }
  .mm-res__title, .mm-fail__title { font-size: clamp(18px, 3vw, 27px); }
  .mm-res__row { padding: 0 0 1px; font-size: .92em; }
  .mm-res__row.is-total { margin-top: 4px; padding-top: 4px; }
  .mm-res__row.is-total .mm-res__val { font-size: 1.4em; }
  .mm-res__stamp, .mm-fail__stamp { min-height: 0; margin: 2px 0 0; }
  .mm-res__stamp .mm-stamp, .mm-fail__stamp .mm-stamp { width: clamp(104px, 14vw, 146px); }
  .mm-stars { width: 72px; }
  .mm-res__quote, .mm-fail__quote { font-size: .95em; }
  .mm-res__foot, .mm-fail__btns { margin-top: 6px; }
  .mm-res__foot .mm-btn, .mm-fail__btns .mm-btn, .mm-brief__foot .mm-btn { min-height: 40px; padding: 6px 15px 7px; }
  .mm-brief__cols { margin-top: 6px; }
  .mm-brief__item { padding-bottom: 2px; font-size: .94em; }
  .mm-credits__line { max-height: 22vh; }
  .mm-set__row { font-size: .95em; }
  .mm-comic__art { max-height: 46vh; }
}

/* ====================================================== REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .mm-ui *, .mm-ui *::before, .mm-ui *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .mm-title__press b { opacity: 1; }
}
.mm-ui[data-motion='reduced'] *, .mm-ui[data-motion='reduced'] *::before {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* ---------------------------------------------------------------------------
 * Integration pass: two fit issues found in review.
 *  - on a phone the top HUD stack ate roughly a third of the viewport height
 *  - the corkboard's taped note let its last line sit outside the paper strip
 * ------------------------------------------------------------------------- */
@media (orientation: portrait) and (max-width: 620px) {
  .mm-hud__job .mm-panel__body { padding: 9px 11px 8px; }
  .mm-hud__job-title { font-size: clamp(13px, 4.2vw, 17px); }
  .mm-hud__job-sub { font-size: .78em; }
  .mm-hud__obj.is-on { font-size: .82em; line-height: 1.25; margin-top: 3px; }
  .mm-hud__job { max-width: 56vw; margin-top: 52px; }
  .mm-hud__ledger .mm-panel__body { padding: 6px 9px 7px; }
  .mm-hud__clock .mm-panel__body { padding: 4px 10px 5px; }
  .mm-hud__tut { top: 36%; max-width: 62vw; }
  .mm-hud__tut .mm-panel__body { padding: 9px 12px 10px; }
}

.mm-board__note {
  padding-bottom: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (orientation: portrait) and (max-width: 620px) {
  /* keep the drawn gauges and the truck card off the screen edges */
  .mm-hud__gauges { margin-left: 6px; }
  .mm-hud__truck { margin-right: 6px; }
}