/* Legends of Ireland: an illuminated manuscript leaf on a night table.
   Self-contained colours, so it reads the same in light and dark site themes. */
.mv-lg {
  --lg-night: #141b20;
  --lg-vellum: #efe3c4;
  --lg-vellum-deep: #e0cda2;
  --lg-ink: #2a2118;
  --lg-ink-soft: #5b4a35;
  --lg-gold: #b8862a;
  --lg-gold-light: #f0c869;
  --lg-oxblood: #8a2e24;
  --lg-display: "Uncial Antiqua", "Palatino Linotype", Georgia, serif;
  --lg-body: "Alegreya", Georgia, "Times New Roman", serif;
  --lg-label: "Alegreya Sans SC", "Gill Sans", "Trebuchet MS", sans-serif;
  background: var(--lg-night);
  color: var(--lg-ink);
  font-family: var(--lg-body);
  font-size: 17px;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
}
.mv-lg__inner { max-width: 760px; margin: 0 auto; }
.mv-lg__back {
  display: inline-block; margin: 0 0 10px; color: var(--lg-vellum);
  font-family: var(--lg-label); letter-spacing: .05em; text-decoration: none;
}
.mv-lg__back:hover { text-decoration: underline; }
.mv-lg__leaf {
  position: relative; background: var(--lg-vellum); border-radius: 4px;
  box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0, 0, 0, .6); padding-bottom: 6px;
}
.mv-lg__leaf::after {
  content: ""; position: absolute; inset: 6px; border: 1.5px solid var(--lg-gold);
  border-radius: 2px; pointer-events: none; opacity: .7;
}
.mv-lg__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 4px 12px; padding: 14px 20px 8px; flex-wrap: wrap;
}
.mv-lg__brand {
  font-family: var(--lg-display); font-size: 1.4rem; font-weight: 400;
  color: var(--lg-oxblood); margin: 0; line-height: 1.1;
}
.mv-lg__chapter { font-family: var(--lg-label); font-size: .82rem; letter-spacing: .08em; color: var(--lg-ink-soft); }
.mv-lg__stage-wrap { padding: 0 14px; display: flex; justify-content: center; }
.mv-lg__stage {
  width: min(100%, calc(58vh * 1.6)); aspect-ratio: 8 / 5; max-width: 100%;
  border: 2px solid var(--lg-ink); border-radius: 3px; overflow: hidden;
  background: #24323a; touch-action: none;
}
.mv-lg__stage canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.mv-lg__plait {
  height: 12px; margin: 10px 20px 0; opacity: .85; background-repeat: repeat-x;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6C6 0 6 0 12 6S18 12 24 6' fill='none' stroke='%232a2118' stroke-width='4'/%3E%3Cpath d='M0 6C6 0 6 0 12 6S18 12 24 6' fill='none' stroke='%23b8862a' stroke-width='2'/%3E%3Cpath d='M0 6C6 12 6 12 12 6S18 0 24 6' fill='none' stroke='%232a2118' stroke-width='4'/%3E%3Cpath d='M0 6C6 12 6 12 12 6S18 0 24 6' fill='none' stroke='%238a2e24' stroke-width='2'/%3E%3C/svg%3E");
}
.mv-lg__page { padding: 12px 24px 20px; min-height: 13rem; }
.mv-lg__kicker {
  font-family: var(--lg-label); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lg-oxblood); margin: 0 0 4px;
}
.mv-lg__title {
  font-family: var(--lg-display); font-weight: 400; font-size: 1.7rem; line-height: 1.15;
  margin: 0 0 8px; text-wrap: balance; color: var(--lg-ink);
}
.mv-lg__text { margin: 0; line-height: 1.55; max-width: 62ch; color: var(--lg-ink); }
.mv-lg__text::first-letter {
  font-family: var(--lg-display); float: left; font-size: 2.7em; line-height: .85;
  padding: 6px 7px 4px; margin: 3px 9px 0 0; background: var(--lg-oxblood);
  color: var(--lg-gold-light); border: 1.5px solid var(--lg-gold); border-radius: 2px;
}
.mv-lg__extra:empty { display: none; }
.mv-lg__extra { margin-top: 12px; }
.mv-lg__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mv-lg__btn {
  font-family: var(--lg-label); font-weight: 700; font-size: 1rem; letter-spacing: .06em;
  padding: 11px 20px; border-radius: 3px; border: 1.5px solid var(--lg-ink);
  background: var(--lg-oxblood); color: var(--lg-vellum); cursor: pointer; min-height: 44px;
}
.mv-lg__btn:hover { background: #9e3a2e; }
.mv-lg__btn--alt { background: transparent; color: var(--lg-ink); }
.mv-lg__btn--alt:hover { background: var(--lg-vellum-deep); }
.mv-lg__btn:disabled { opacity: .45; cursor: default; }
.mv-lg__btn:focus-visible, .mv-lg__opt:focus-visible, .mv-lg__back:focus-visible {
  outline: 3px solid var(--lg-gold); outline-offset: 2px;
}
.mv-lg__q { font-weight: 700; font-size: 1.12rem; margin: 0 0 10px; text-wrap: balance; }
.mv-lg__opts { display: grid; grid-template-columns: 1fr; gap: 8px; }
.mv-lg__opt {
  font-family: var(--lg-body); font-size: 1rem; text-align: left; padding: 10px 14px;
  border: 1.5px solid var(--lg-ink-soft); border-radius: 3px; background: #f6edd6;
  color: var(--lg-ink); cursor: pointer; min-height: 44px;
}
.mv-lg__opt:hover:not(:disabled) { background: var(--lg-vellum-deep); }
.mv-lg__opt.is-gone { opacity: .25; text-decoration: line-through; }
.mv-lg__opt.is-right { background: #2f5d3a; color: #f4ecd6; border-color: #2f5d3a; opacity: 1; }
.mv-lg__opt.is-wrong { background: var(--lg-oxblood); color: #f4ecd6; border-color: var(--lg-oxblood); }
.mv-lg__qmeta {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px;
  font-family: var(--lg-label); letter-spacing: .05em; color: var(--lg-ink-soft); flex-wrap: wrap;
}
.mv-lg__feedback { min-height: 1.5em; margin: 8px 0 0; font-style: italic; }
.mv-lg__tally {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; max-width: 380px;
  margin: 4px 0 8px; font-variant-numeric: tabular-nums;
}
.mv-lg__tally dt { color: var(--lg-ink-soft); }
.mv-lg__tally dd { margin: 0; color: var(--lg-gold); letter-spacing: .15em; font-size: 1.1rem; }
.mv-lg__tally .is-total { font-weight: 700; color: var(--lg-ink); letter-spacing: normal; font-size: 1rem; }
.mv-lg__next { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.mv-lg__next li {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--lg-vellum-deep); padding-top: 6px;
}
.mv-lg__next span {
  font-family: var(--lg-label); font-size: .78rem; letter-spacing: .08em;
  color: var(--lg-ink-soft); white-space: nowrap;
}
.mv-lg__sub { font-family: var(--lg-label); letter-spacing: .08em; font-size: .85rem; color: var(--lg-ink-soft); margin: 14px 0 0; }
.mv-lg__toc { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 0; }
.mv-lg__toc li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px;
  border-top: 1px solid var(--lg-vellum-deep); padding: 10px 0;
}
.mv-lg__toc-name { font-weight: 600; min-width: 0; }
.mv-lg__toc-best {
  font-family: var(--lg-label); font-size: .8rem; letter-spacing: .08em;
  color: var(--lg-ink-soft); white-space: nowrap;
}
.mv-lg__toc li.is-soon .mv-lg__toc-name { color: var(--lg-ink-soft); font-weight: 400; }
.mv-lg__toc li.is-soon { grid-template-columns: minmax(0, 1fr) auto; }
.mv-lg__toc li.is-total { grid-template-columns: 1fr; color: var(--lg-oxblood); }
.mv-lg__hold {
  width: 100%; min-height: 64px; font-size: 1.15rem; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.mv-lg__hold:active { background: #6e241c; }
.mv-lg__toc .mv-lg__btn { padding: 8px 18px; min-height: 40px; }
@media (min-width: 560px) { .mv-lg__opts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .mv-lg { font-size: 16px; }
  .mv-lg__page { padding: 10px 18px 18px; }
  .mv-lg__title { font-size: 1.45rem; }
  .mv-lg__brand { font-size: 1.2rem; }
}