.mm-body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 22%, rgba(95, 69, 39, 0.2), transparent 34rem),
    linear-gradient(rgba(9, 7, 5, 0.78), rgba(9, 7, 5, 0.9)),
    url('assets/feature-images/background.webp') center / cover fixed;
  color: #e8ddbf;
}

.mm-shell { width: min(760px, 94vw); margin: 0 auto; padding: 22px 0 44px; }
.mm-header { text-align: center; margin-bottom: 14px; perspective: 700px; }
.mm-header h1 {
  --mm-title-x: 0deg;
  --mm-title-y: 0deg;
  margin: 2px 0 0;
  display: inline-block;
  font: 64px/1 'Quill 8', 'RuneScape Bold', serif;
  color: var(--osrs-gold, #f2c75c);
  text-shadow:
    -1px -1px 0 #fff0a0,
    1px 1px 0 #d9a52f,
    2px 2px 0 #a86b16,
    3px 3px 0 #70420d,
    4px 4px 0 #362007,
    7px 8px 0 #080604b8;
  transform: rotateX(var(--mm-title-x)) rotateY(var(--mm-title-y));
  transform-style: preserve-3d;
  transform-origin: 50% 65%;
  will-change: transform;
}
.mm-header h1:not(.mm-title-aligning) { transition: transform .16s ease-out; }
.mm-title-aligning { animation: mm-title-align .9s cubic-bezier(.2,.78,.22,1) both; }
@keyframes mm-title-align {
  0% { opacity: .25; transform: translateY(-7px) rotateX(24deg) rotateY(-34deg) rotateZ(-4deg) scale(.94); }
  68% { opacity: 1; transform: translateY(0) rotateX(-3deg) rotateY(5deg) rotateZ(.5deg) scale(1.015); }
  100% { opacity: 1; transform: rotateX(0) rotateY(0) rotateZ(0) scale(1); }
}
.mm-header p { margin: 5px 0; color: #c9b98f; font-size: 1.05rem; }
.mm-kicker {
  color: #e8c96b; text-transform: uppercase; letter-spacing: .16em;
  font: 12px/1 'RuneScape Bold', sans-serif;
}

.mm-game {
  overflow: hidden; padding: 0; border-color: #755a32;
  background: linear-gradient(145deg, rgba(39, 34, 27, .98), rgba(22, 19, 16, .98));
  box-shadow: 0 18px 55px rgba(0,0,0,.48), inset 0 0 45px rgba(0,0,0,.22);
}
.mm-status-row {
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; align-items: center;
  padding: 13px 18px; border-bottom: 1px solid #574529; background: rgba(0,0,0,.22);
  text-align: center;
}
.mm-status-row > div:first-child { text-align: left; }
.mm-status-row > div:last-child { text-align: right; }
.mm-status-row > div:last-child strong { white-space: nowrap; }
.mm-label { display: block; color: #8f8166; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; }
.mm-status-row strong { color: #fff2bd; font: 18px/1.25 'RuneScape Bold', sans-serif; }
.mm-status-center strong { color: #f0ce67; }

.mm-stage-wrap { position: relative; min-height: 440px; background: radial-gradient(circle, #393027 0, #211d18 55%, #171411 100%); }
.mm-stage { position: relative; height: 430px; touch-action: none; cursor: grab; outline: none; overflow: hidden; }
.mm-stage:active { cursor: grabbing; }
.mm-stage.locked, .mm-stage.locked:active { cursor: default; }
.mm-stage:focus-visible { box-shadow: inset 0 0 0 3px #d5ae51; }
#mm-canvas {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .2));
}
/* The sprite is rasterised at 45x40 and upscaled with nearest-neighbour
   sampling. Keep this a whole number so every source pixel lands on the same
   number of screen pixels; fractional values make some pixels wider. */
#mm-inventory-canvas {
  --mm-sprite-scale: 6;
  position: absolute; left: 50%; top: 50%;
  width: calc(45px * var(--mm-sprite-scale)); height: calc(40px * var(--mm-sprite-scale));
  transform: translate(-50%, -50%);
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
#mm-inventory-canvas[hidden] { display: none; }
.mm-reference { position: absolute; z-index: 3; top: 18px; left: 18px; text-align: center; pointer-events: none; }
.mm-reference > span { display: block; margin-bottom: 5px; color: #ad9c77; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.mm-inventory-slot {
  width: 72px; height: 72px; display: grid; place-items: center;
  background: #3c352c; border: 2px solid #79684e; box-shadow: inset 0 0 0 2px #181511, 0 4px 12px #0009;
}
.mm-inventory-slot img { max-width: 58px; max-height: 58px; image-rendering: pixelated; }
.mm-scramble {
  position: absolute; z-index: 4; top: 18px; left: 18px; width: 36px; height: 36px; padding: 8px;
  display: grid; place-items: center; color: #c9b98f; cursor: pointer;
  background: #18140fdd; border: 1px solid #6c5a3d; border-radius: 3px;
  transition: color .15s, border-color .15s, opacity .15s;
}
.mm-scramble svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-scramble:hover { color: #f1d577; border-color: #9a7b43; }
.mm-scramble:focus-visible { outline: 2px solid #d5ae51; outline-offset: 2px; }
.mm-scramble:disabled { opacity: 0; pointer-events: none; }
.mm-render-toggle, .mm-gizmo-toggle {
  position: absolute; z-index: 4; top: 18px; right: 18px;
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  color: #c9b98f; font-size: .75rem; cursor: pointer; user-select: none;
  background: #18140fdd; border: 1px solid #6c5a3d; border-radius: 3px;
}
.mm-gizmo-toggle { top: 58px; }
.mm-render-toggle:hover, .mm-gizmo-toggle:hover { color: #f1d577; border-color: #9a7b43; }
.mm-gizmo-toggle input { width: 15px; height: 15px; margin: 0; accent-color: #d5ae51; }
.mm-render-toggle input {
  appearance: none; width: 36px; height: 19px; margin: 0; padding: 2px; flex: 0 0 auto;
  border: 1px solid #806a45; border-radius: 12px; background: #29231c; cursor: pointer;
}
.mm-render-toggle input::after {
  content: ''; display: block; width: 13px; height: 13px; border-radius: 50%;
  background: #e4c66d; box-shadow: 0 1px 3px #000b; transition: transform .16s ease;
}
.mm-render-toggle input:checked { background: #51421f; border-color: #bd9644; }
.mm-render-toggle input:checked::after { transform: translateX(17px); }
.mm-render-toggle > span { color: #80745f; transition: color .16s; }
.mm-render-toggle:has(input:not(:checked)) .mm-toggle-inventory,
.mm-render-toggle:has(input:checked) .mm-toggle-3d { color: #f1d577; }
.mm-render-toggle:has(input:focus-visible), .mm-gizmo-toggle:has(input:focus-visible) { outline: 2px solid #d5ae51; outline-offset: 2px; }
.mm-drag-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 7px; align-items: center;
  color: #c9b98f; font-size: .82rem; padding: 6px 11px; border: 1px solid #6c5a3d; background: #18140fbb;
  border-radius: 20px; transition: opacity .25s;
}
.mm-drag-hint span { color: #e8c96b; font-size: 1.15rem; }
.mm-stage.interacted .mm-drag-hint { opacity: 0; }
.mm-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #211d18; color: #e8c96b; z-index: 5; }
.mm-loading[hidden] { display: none; }
.mm-rotation-gizmo {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 210px; height: 210px;
  transform: translate(-50%, -50%); overflow: visible; pointer-events: none;
}
.mm-rotation-gizmo[hidden] { display: none; }
.mm-axis-ring {
  fill: none; stroke-width: 2; opacity: .36; pointer-events: none;
  vector-effect: non-scaling-stroke; transition: opacity .15s, stroke-width .15s, filter .15s;
}
.mm-axis-ring.active { opacity: 1; stroke-width: 3; filter: drop-shadow(0 0 3px currentColor); }
.mm-axis-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: grab; vector-effect: non-scaling-stroke; }
.mm-rotation-gizmo:has(.mm-axis-hit[data-axis="free"]:hover) .mm-axis-free,
.mm-rotation-gizmo:has(.mm-axis-hit[data-axis="x"]:hover) .mm-axis-x,
.mm-rotation-gizmo:has(.mm-axis-hit[data-axis="y"]:hover) .mm-axis-y,
.mm-rotation-gizmo:has(.mm-axis-hit[data-axis="z"]:hover) .mm-axis-z { opacity: .9; stroke-width: 3; }
.mm-axis-hit:focus { outline: none; }
.mm-axis-hit:focus-visible { stroke: #f1d57755; }
.mm-axis-hit:active { cursor: grabbing; }
.mm-axis-free { color: #ddd0ac; stroke: currentColor; stroke-dasharray: 3 4; }
.mm-axis-x { color: #dc625b; stroke: currentColor; }
.mm-axis-y { color: #6ac46c; stroke: currentColor; }
.mm-axis-z { color: #62a3df; stroke: currentColor; }
.mm-axis-arrow { fill: none; stroke-width: 2.25; opacity: .6; pointer-events: none; vector-effect: non-scaling-stroke; }
.mm-axis-arrow-free { stroke: #ddd0ac; stroke-dasharray: 3 4; }
.mm-axis-arrow-x { stroke: #dc625b; }
.mm-axis-arrow-y { stroke: #6ac46c; }
.mm-axis-arrow-z { stroke: #62a3df; }
.mm-stage[data-drag-axis="free"] .mm-axis-arrow-free,
.mm-stage[data-drag-axis="x"] .mm-axis-arrow-x,
.mm-stage[data-drag-axis="y"] .mm-axis-arrow-y,
.mm-stage[data-drag-axis="z"] .mm-axis-arrow-z { opacity: 1; stroke-width: 3; }
.mm-rotation-gizmo.disabled { opacity: .25; }
.mm-rotation-gizmo.disabled .mm-axis-hit { pointer-events: none; cursor: default; }
.mm-axis-readout {
  position: absolute; z-index: 4; bottom: 5px; left: 50%; transform: translateX(-50%);
  color: #756a58; font-size: .58rem; letter-spacing: .08em; white-space: nowrap; pointer-events: none;
}

.mm-feedback { min-height: 48px; padding: 13px 20px 8px; text-align: center; color: #c9b98f; }
.mm-feedback strong { color: #f1d577; }
.mm-feedback.good strong { color: #83d878; }
.mm-feedback.close strong { color: #ffb950; }
.mm-feedback.perfect strong { color: #83d878; }
.mm-perfect {
  display: block;
  margin-top: 3px;
  color: #83d878;
  font-weight: 700;
  letter-spacing: .04em;
}
.mm-meter { height: 5px; margin: 0 20px 13px; overflow: hidden; background: #100e0b; border: 1px solid #473a29; }
.mm-meter-fill { width: 0; height: 100%; background: linear-gradient(90deg, #a2392f, #ddb84f, #65c563); transition: width .35s ease; }
.mm-actions { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 20px 10px; }
.mm-actions .btn:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .45; }
.mm-check { width: min(100%, 400px); min-height: 45px; font-size: 1.08rem; }
.mm-help-link { padding: 5px 9px; color: #817661; background: none; border: 0; font: .75rem 'RuneScape Plain', sans-serif; cursor: pointer; }
.mm-help-link:hover { color: #c7b88f; text-decoration: underline; }
.mm-help-link:focus-visible { outline: 1px solid #9a7b43; outline-offset: 1px; }

.mm-dialog { width: min(440px, 90vw); color: #d8c9a5; }
.mm-dialog h2 { color: #f1d577; }
.mm-dialog li { margin: 9px 0; }
.modal .dialog.mm-help-dialog { width: min(520px, 92vw); padding: 18px 22px 20px; text-align: center; }
.mm-help-dialog h2 { margin: 0 0 10px; text-align: center; }
.mm-help-demo { width: min(100%, 460px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.modal .dialog .mm-help-summary { margin: 13px 0 9px; color: #d8cba8; font-size: .9rem; line-height: 1.45; }
.mm-help-stage {
  width: 100%; min-height: 184px; padding: 14px 18px 10px;
  display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; gap: 4px;
  background: radial-gradient(circle, #393027, #211d18 72%); border: 1px solid #5d4b31; border-radius: 6px;
  box-shadow: inset 0 0 30px #0006;
}
.mm-help-example { min-width: 0; margin: 0; display: grid; grid-template-rows: 140px auto; justify-items: center; align-items: center; gap: 7px; }
.mm-help-example figcaption { color: #9f9276; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.mm-help-model-wrap {
  width: 160px; height: 140px; display: grid; place-items: center;
}
.mm-help-model-wrap canvas:not([hidden]) { width: 160px; height: 140px; display: block; image-rendering: pixelated; }
.mm-help-icon-wrap {
  width: 116px; height: 112px; display: grid; place-items: center;
  background: #3c352c; border: 2px solid #79684e; box-shadow: inset 0 0 0 2px #181511;
}
.mm-help-icon-wrap img { width: 82px; height: 82px; object-fit: contain; image-rendering: pixelated; }
.mm-help-arrow { color: #e9c557; font: 42px/1 'RuneScape Plain', sans-serif; text-shadow: 2px 2px #17120b; transform: translateY(-10px); }

.modal .dialog .mm-help-controls { width: 100%; margin: 0; color: #a2957a; font-size: .78rem; line-height: 1.45; }
#mm-help-done { min-width: 88px; margin-top: 12px; }
.mm-credit { margin: 12px 0 0; text-align: center; color: #8d8168; font-size: .72rem; line-height: 1.4; }
.mm-credit a { color: #c9a227; text-decoration: underline; }
.mm-credit a:hover, .mm-credit a:focus-visible { color: #e9c557; }
.mm-finish { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; background: rgba(5,4,3,.82); backdrop-filter: blur(4px); }
.mm-finish[hidden] { display: none; }
.mm-finish-card {
  position: relative; width: min(600px, 92vw); max-height: 90vh; overflow-y: auto;
  padding: 20px 24px; text-align: center;
  background: linear-gradient(145deg, #565248, #464239 55%, #3d3931);
  border: 1px solid #b08b4d; border-radius: 4px;
  box-shadow:
    0 0 0 2px #18140f,
    0 0 0 5px #6f5936,
    0 0 0 6px #17130f,
    inset 0 0 0 2px #695a40,
    inset 0 0 28px #0d0b0870,
    0 22px 70px #000;
}
.mm-finish-card h2 { margin: 6px 0; color: #f1d577; font: 36px/1 'Quill 8', serif; }
.mm-finish-card > p { margin: 5px 0 12px; color: #c9b98f; font-size: 1.02rem; }
.mm-finish-card > p strong { color: #f1d577; font-size: 1.2em; }
.mm-results { display: grid; gap: 5px; margin-bottom: 12px; text-align: left; }
.mm-result {
  display: grid; grid-template-columns: 180px 130px auto; justify-content: center; align-items: center; gap: 14px;
  padding: 5px 10px; background: #211d18; border: 1px solid #625338; border-radius: 3px;
}
.mm-result-name { display: block; color: #ead16f; font-size: .96rem; }
.mm-result-score { font-size: .88rem; }
.mm-result-points { font-weight: 700; }
.mm-result-score span { display: block; margin-top: 3px; color: #82765e; font-size: .76rem; }
.mm-result-score .mm-perfect { color: #83d878; font-size: .78rem; }
.mm-result-views { display: grid; grid-template-columns: repeat(2, 66px); gap: 7px; }
.mm-result-view { margin: 0; text-align: center; }
.mm-result-view figcaption { margin-bottom: 3px; color: #96886b; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.mm-result-tile {
  width: 66px; height: 50px; display: grid; place-items: center; overflow: hidden;
  background: #3c352c; border: 1px solid #79684e; box-shadow: inset 0 0 0 2px #181511;
}
.mm-result-tile img { display: block; max-width: 60px; max-height: 46px; object-fit: contain; image-rendering: pixelated; }
.mm-result-view:last-child img { max-width: 44px; max-height: 44px; }
.mm-finish-actions { display: flex; justify-content: center; gap: 10px; }
.mm-finish-actions .btn { min-width: 118px; }

@media (max-width: 600px) {
  .mm-shell { width: 100%; padding-top: 12px; }
  .mm-game { border-left: 0; border-right: 0; border-radius: 0; }
  .mm-header h1 { font-size: 52px; }
  .mm-stage-wrap { min-height: 390px; }
  .mm-stage { height: 380px; }
  #mm-inventory-canvas { --mm-sprite-scale: 5; }
  .mm-reference { top: 12px; left: 12px; transform: scale(.86); transform-origin: top left; }
  .mm-render-toggle { top: 12px; right: 12px; }
  .mm-gizmo-toggle { top: 52px; right: 12px; }
  .mm-status-row { padding: 11px 12px; }
  .mm-status-row strong { font-size: 15px; }
  .mm-status-row > div:last-child strong { font-size: 13px; }
  .mm-actions { padding-inline: 12px; }
  .mm-finish-card { padding: 22px 14px; }
  .mm-result { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .mm-result-score { grid-column: 1; }
  .mm-result-views { grid-column: 2; grid-row: 1 / span 2; }
  .mm-finish-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-meter-fill, .mm-drag-hint { transition: none; }
  .mm-title { animation: none; transition: none !important; transform: none !important; }
}

@media (max-width: 480px) {
  .mm-help-stage { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); padding-inline: 6px; }
  .mm-help-example { grid-template-rows: 116px auto; }
  .mm-help-model-wrap, .mm-help-model-wrap canvas:not([hidden]) { width: 132px; height: 116px; }
  .mm-help-icon-wrap { width: 98px; height: 96px; }
  .mm-help-icon-wrap img { width: 70px; height: 70px; }
  .mm-help-example figcaption { font-size: .56rem; }
  .mm-help-arrow { font-size: 34px; }
}