#zmp-game.zmp-trail { background: #f6efd8 url('img/scene-rich-20261003.webp') center/cover; }
#zmp-game.zmp-trail .zmp-g-start, #zmp-game.zmp-trail .zmp-g-done { background: #fffbeded; }
#zmp-game.zmp-trail .zmp-trail-stage { background: #fffbedec; border-radius: 1.5rem; padding: 1rem; margin: .5rem auto 1rem; width: min(calc(100% - 1rem), 56rem); }
.zmp-trail-modes { grid-template-columns: repeat(3,1fr); width: min(100%,35rem); }
.zmp-trail-help { display: block; min-height: 44px; padding: .5rem 1rem; margin: .75rem auto 0; border: 1px solid #8d9d70; border-radius: 2rem; background: #fffbed; color: #35533d; font: inherit; }
.zmp-trail-step[data-group="1"], .zmp-trail-step[data-group="3"] { box-shadow: 0 4px 0 #c9d5ab; }
.zmp-trail-step[data-group="0"], .zmp-trail-step[data-group="2"] { box-shadow: 0 4px 0 #ddc9a1; }
#zmp-game.zmp-trail[data-mode="long"] .zmp-trail-sequence { grid-template-columns: repeat(4,minmax(0,1fr)); max-width: 38rem; margin: auto; }
#zmp-game.zmp-trail .zmp-trail-welcome { flex-wrap: wrap; justify-content: center; max-width: 26rem; }
@media(max-width:500px) {
  .zmp-trail-modes { gap: .4rem; }
  .zmp-trail-mode { min-height: 6rem; padding: .5rem .3rem; }
  .zmp-trail-mode b { font-size: .9rem; }
  .zmp-trail-mode span { font-size: .75rem; }
  #zmp-game.zmp-trail .zmp-trail-stage { padding: .7rem; }
  #zmp-game.zmp-trail[data-mode="long"] .zmp-trail-step { min-height: 3.4rem; }
  #zmp-game.zmp-trail[data-mode="long"] .zmp-trail-icon { width: 2.5rem; height: 2.5rem; }
}
@media print {
  #zmp-print-sheet.zmp-trail-print[data-mode="long"] .zmp-trail-step { width: 11mm; }
  #zmp-print-sheet.zmp-trail-print[data-mode="long"] .zmp-trail-icon { width: 10mm; height: 12mm; }
}