#zmp-game.zmp-trail {
  background: #F2F2D9;
  color: #244537;
  overflow-y: auto;
}
#zmp-game.zmp-trail .zmp-g-exit { background: #DEE6CA; color: #244537; }
#zmp-game.zmp-trail .zmp-trail-top { max-width: 50rem; gap: .5rem 1rem; flex-wrap: wrap; }
.zmp-trail-top .zmp-trail-progress { order: 2; flex: 1 0 100%; margin: .2rem 0; }
.zmp-trail-progress { display: flex; justify-content: center; gap: .45rem; flex: 1; margin: 0; padding: 0; list-style: none; }
.zmp-trail-progress-step { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid #A4B591; border-radius: 50%; color: #496247; background: #F9F9EA; font-size: .8rem; }
.zmp-trail-progress-step--done { background: #355B42; color: #FFFDEE; border-color: #355B42; }
.zmp-trail-progress-step[aria-current] { outline: 2px solid #355B42; outline-offset: 3px; }
.zmp-trail-stage { width: min(100%, 50rem); margin: auto 0; padding: .4rem 1.1rem 1rem; }
.zmp-trail-task-title { margin: 0; text-align: center; color: #244537; font-size: clamp(1.25rem, 5vw, 1.7rem); }
.zmp-trail-direction { margin: .45rem 0 1rem; font-size: .9rem; text-align: center; }
.zmp-trail-icon { display: block; width: 3.5rem; height: 3.5rem; }
.zmp-trail-icon svg { display: block; width: 100%; height: 100%; }
.zmp-trail-sequence { display: grid; grid-template-columns: repeat(var(--trail-columns, 9), minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.zmp-trail-step { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 5rem; border: 2px solid #D0DBC0; border-radius: 1rem; background: #FFFDF0; }
.zmp-trail-order { color: #526844; font-size: .7rem; line-height: 1.3; }
.zmp-trail-step .zmp-trail-icon { width: min(100%, 3.2rem); height: 3.2rem; }
.zmp-trail-step--next { border-style: dashed; border-color: #6C8457; background: #E4EDCF; }
.zmp-trail-question { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; font-size: 2rem; font-weight: 600; color: #355B42; }
.zmp-trail-step--hint { border-color: #8D662E; background: #F7EAC6; }
.zmp-trail-step--found { border-style: solid; border-color: #355B42; }
.zmp-trail-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; max-width: 30rem; margin: 1.4rem auto 0; }
.zmp-trail-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 6rem; padding: .5rem .25rem; border: 2px solid #97AC81; border-radius: 1rem; background: #FFFDF0; color: #244537; font: inherit; cursor: pointer; }
.zmp-trail-option-name { font-size: .8rem; }
.zmp-trail-option:active { transform: translateY(2px); }
.zmp-trail-option:disabled { opacity: .55; cursor: default; }
.zmp-trail-option--correct:disabled { opacity: 1; border-color: #355B42; background: #D8E8BC; }
.zmp-trail-feedback { min-height: 2.8rem; margin: 1rem auto 0; max-width: 32rem; text-align: center; color: #35533D; font-size: .94rem; line-height: 1.45; }
#zmp-game.zmp-trail .zmp-g-start, #zmp-game.zmp-trail .zmp-g-done { overflow: auto; background: #F2F2D9; gap: 1rem; padding-top: 8.5rem; }
.zmp-trail-start h2, .zmp-trail-done h2 { margin: 0; color: #244537; font-size: clamp(1.35rem, 5vw, 1.8rem); text-align: center; }
.zmp-trail-start p, .zmp-trail-done p { margin: 0; text-align: center; max-width: 24rem; }
.zmp-trail-welcome { display: flex; gap: .5rem; padding: 1rem; border-radius: 2rem; background: #E3EACE; }
.zmp-trail-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; width: min(100%, 28rem); }
.zmp-trail-mode { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 7rem; padding: .75rem; border: 2px solid #80996D; border-radius: 1rem; background: #FFFDF0; color: #244537; font: inherit; cursor: pointer; }
.zmp-trail-mode b { font-size: 1.08rem; }
.zmp-trail-mode span { font-size: .83rem; line-height: 1.4; }
.zmp-trail-small { font-size: .88rem; color: #496247; }
.zmp-trail-primary, .zmp-trail-parent { min-height: 3rem; padding: .7rem 1.5rem; border-radius: 1rem; font: inherit; cursor: pointer; }
.zmp-trail-primary { border: 2px solid #355B42; background: #355B42; color: #FFFDEE; }
.zmp-trail-parent { border: 1px solid #97AC81; background: #FFFDF0; color: #244537; }
#zmp-game.zmp-trail button:focus-visible { outline: 3px solid #735529; outline-offset: 4px; }
#zmp-print-sheet.zmp-trail-print { display: none; }
@media (max-width: 650px) {
  .zmp-trail-sequence { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; max-width: 24rem; margin: auto; }
  .zmp-trail-step { min-height: 4.6rem; }
  .zmp-trail-options { gap: .45rem; margin-top: 1rem; }
  .zmp-trail-option { min-height: 5.6rem; }
  .zmp-trail-option .zmp-trail-icon { width: 3rem; height: 3rem; }
  .zmp-trail-welcome { gap: .2rem; padding: .8rem; }
}
@media (max-height: 600px) {
  #zmp-game.zmp-trail .zmp-g-start, #zmp-game.zmp-trail .zmp-g-done { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .zmp-trail-option:active { transform: none; } }
@media print {
  body > * { display: none !important; }
  #zmp-print-sheet.zmp-trail-print { display: block !important; position: static !important; width: auto !important; color: #111; font: 11pt/1.4 Arial, sans-serif; }
  .zmp-trail-print-page { break-after: page; }
  .zmp-trail-print-page:last-child { break-after: auto; }
  .zmp-trail-print-page h1 { margin: 0 0 4mm; font-size: 21pt; }
  .zmp-trail-print-page h2 { margin: 6mm 0 3mm; font-size: 14pt; }
  #zmp-print-sheet.zmp-trail-print .zmp-trail-print-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5mm; margin-top: 8mm; }
  .zmp-trail-print-row { display: flex; align-items: center; gap: 3mm; break-inside: avoid; }
  .zmp-trail-print-number { flex: 0 0 5mm; }
  .zmp-trail-print-row .zmp-trail-sequence { display: flex; gap: 1.5mm; margin: 0; max-width: none; }
  .zmp-trail-print-row .zmp-trail-step { width: 14.5mm; min-height: 19mm; border: .35mm solid #777; border-radius: 2mm; background: none; }
  .zmp-trail-print-row .zmp-trail-step--next { border-style: dashed; }
  .zmp-trail-print-row .zmp-trail-order { font-size: 7pt; color: #333; }
  .zmp-trail-print-row .zmp-trail-icon { width: 13mm; height: 13mm; }
  .zmp-trail-print-row .zmp-trail-question { width: 13mm; height: 13mm; }
  .zmp-trail-print-answers { margin: 4mm 0 0; padding-left: 7mm; }
  .zmp-trail-print-answers li { padding-left: 2mm; margin: 3mm 0; break-inside: avoid; }
  .zmp-trail-print-answers .zmp-trail-icon { display: inline-block; width: 12mm; height: 12mm; vertical-align: middle; margin-right: 3mm; }
}