/* Professor Layton and the Miracle Mask: Mysteries tracker (loaded by _mysteries.html only).
   Green-felt case with the ten mystery cards, where each one joins the list and when it is answered.
   Uses the zone tokens from theme.css (--ml-*). Without JavaScript the tick-boxes and progress stay hidden. */
.mmt { max-width: none !important; margin: 1.2em 0 1.6em; padding: 16px; border: 3px solid var(--ml-wood); border-radius: 14px;
  background: radial-gradient(ellipse at 50% 30%, #1d7a4c, #0f4f30 75%); box-shadow: inset 0 0 0 2px rgba(246, 212, 128, .35), 0 6px 18px rgba(0, 0, 0, .25);
  color-scheme: light; overflow-wrap: anywhere; }
.mmt:not(.is-ready) .mmt-js { display: none; }
.mmt-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; color: #fbf1dc; }
.mmt-progress p { margin: 0; font-weight: 800; }
.mmt-progress strong { font-family: var(--ml-serif); font-size: 1.2rem; color: var(--ml-gold-light); }
.mmt-bar { position: relative; flex: 1 1 140px; height: 10px; border-radius: 99px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.mmt-bar > span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ml-gold), var(--ml-gold-light)); transition: width .25s ease; }
.mmt-reset { min-height: 36px; padding: 4px 14px; border: 1px solid rgba(246, 212, 128, .6); border-radius: 99px; background: transparent; color: #fbf1dc; font: 700 .82rem var(--ml-sans); cursor: pointer; }
.mmt-reset:disabled { opacity: .5; cursor: default; }
.mmt-reset:focus-visible, .mmt-tick input:focus-visible { outline: 3px solid var(--ml-gold-light); outline-offset: 2px; }
.prose .mmt-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.prose .mmt-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0; padding: 10px 12px;
  border: 1px solid var(--ml-gold-dark); border-radius: 10px; background: var(--ml-parchment); color: var(--ml-ink); }
.prose .mmt-row::marker { content: none; }
.prose .mmt-card { width: 58px; height: 74px; border: 0; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.prose .mmt-text p { margin: 0; }
.mmt-name { display: flex; align-items: center; gap: 8px; font-family: var(--ml-serif); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.mmt-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--ml-wood); border-radius: 50%;
  background: var(--ml-gold-light); color: var(--ml-wood-deep); font: 900 .85rem/1 var(--ml-sans); }
.prose .mmt-q { margin: 3px 0 4px; color: var(--ml-ink); font-size: .95rem; line-height: 1.45; }
.mmt-when { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .86rem; line-height: 1.4; color: #5a3d26; }
.mmt-when em { font-style: normal; font-weight: 800; color: #7d4c0a; margin-right: 4px; }
.mmt-tick { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--ml-gold-dark); border-radius: 99px;
  background: rgba(255, 255, 255, .55); font: 800 .85rem var(--ml-sans); cursor: pointer; white-space: nowrap; }
.mmt-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--ml-gold-dark); }
.prose .mmt-row.is-done { background: #fbf3dc; border-color: var(--ml-gold); }
.mmt-row.is-done .mmt-tick { background: linear-gradient(var(--ml-wood), var(--ml-wood-deep)); border-color: var(--ml-gold); color: var(--ml-gold-light); }
.prose .mmt-note { margin: 10px 0 0; color: #e6dcc4; font-size: .82rem; }
@media (max-width: 560px) {
  .mmt { padding: 10px; }
  .prose .mmt-row { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
  .prose .mmt-card { width: 46px; height: 59px; }
  .mmt-tick { grid-column: 1 / -1; justify-self: start; }
}