.in-walk {
  background: #102e2a;
  color: #f5e4b8;
}
.in-walk .main {
  max-width: 520px;
  padding: 10px 12px 8px;
}
.trail-header {
  font-size: 11px;
  color: #e2d5ad;
}
.trail-header small {
  color: #a9b999;
}
.trail-exit,
.trail-pause {
  background: #193e36;
  color: #eee0b5;
  border: 1px solid #637a58;
  border-radius: 3px;
}
.trail-game {
  border-radius: 0;
  border: 3px solid #718461;
  box-shadow:
    0 0 0 3px #102723,
    0 14px 40px #0004;
}
.trail-hud {
  background: #102d30;
  color: #f2dfac;
  padding: 11px 17px;
  font-family: Consolas, monospace;
  font-size: 14px;
  border-bottom: 1px solid #506747;
}
.trail-combo {
  color: #f0dfb0;
}
.trail-progress {
  background: #102d30;
  padding: 9px 16px 7px;
  gap: 7px;
}
.trail-progress > span {
  background: #304e41;
  height: 3px;
}
.trail-progress i {
  background: #c8cf82;
}
.trail-question {
  background: #102d30;
  color: #ffedbd;
  border-bottom: 4px solid #6e805b;
  box-shadow: inset 0 -1px #b4be85;
  min-height: 110px;
  padding: 10px 10px 15px;
  position: relative;
}
.trail-question:before,
.trail-question:after {
  content: "✣";
  position: absolute;
  bottom: 12px;
  font-size: 23px;
  color: #6c854c;
}
.trail-question:before {
  left: 12px;
}
.trail-question:after {
  right: 12px;
}
.trail-question .word {
  font-family: Consolas, "Courier New", monospace;
  color: #ffedbd;
  font-size: 37px;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 7px 0;
}
.trail-question .listen {
  background: transparent;
  color: #f4d797;
  border-radius: 0;
  font-size: 19px;
}
.trail-question p {
  color: #d3cfb1;
  font-size: 11px;
  padding: 0 25px;
}
.trail-question-tag {
  color: #c0c6a1;
  font-size: 11px;
}
.trail-question-tag span {
  color: #8eaa91;
}
.trail-question-tag em {
  background: #38503f;
  color: #e6d7aa;
  border-radius: 2px;
}
.trail-field {
  height: calc(100dvh - 286px);
  max-height: 580px;
  min-height: 320px;
  background: #687e47;
}
.pixel-map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}
.trail-field .trail-flow {
  display: none;
}
.trail-zone-label {
  color: #f3edd1 !important;
  text-shadow: 0 1px 3px #152c19;
  top: 9px;
  font-size: 9px;
  background: #1b372e88;
  padding: 5px 8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  white-space: nowrap;
  border: 1px solid #b2bf8755;
}
.trail-gates {
  top: 18%;
  left: 14%;
  width: 72%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5%;
  transform: none;
  transition: none;
  z-index: 6;
  align-items: start;
}
.trail-gates .walk-gate {
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 1;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  position: relative;
  transition: filter 0.2s;
  opacity: 1;
}
.gate-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.trail-gates .gate-word {
  position: absolute;
  left: 25%;
  top: 19%;
  width: 50%;
  height: 14%;
  min-height: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b281c;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
  text-shadow: 0 1px #ffeece;
  letter-spacing: 0;
}
.trail-gates .gate-word.long {
  font-size: 10px;
  line-height: 1.1;
}
.trail-gates .walk-gate.selected {
  filter: drop-shadow(0 0 6px #f2dc75);
  box-shadow: none;
  border: 0;
}
.trail-gates .walk-gate.selected:after {
  content: "▲";
  position: absolute;
  bottom: -15%;
  left: 0;
  right: 0;
  color: #ffe493;
  font-size: 15px;
  text-shadow: 0 2px #3d542d;
}
.trail-gates .walk-gate.correct {
  background: none;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 6px #b7f59d);
}
.trail-gates .walk-gate.wrong {
  background: none;
  border: 0;
  filter: drop-shadow(0 0 5px #f7a37f);
}
.trail-gates .walk-gate.correct .gate-word,
.trail-gates .walk-gate.wrong .gate-word {
  background: none;
}
.trail-field .walk-fox {
  width: 105px;
  height: 112px;
  z-index: 5;
  transition:
    left 0.18s ease,
    top 0.07s linear;
}
.trail-field .walk-fox-sprite {
  width: 105px;
  height: 112px;
  filter: drop-shadow(0 6px 2px #183b2544);
}
.trail-field .walk-fox-sprite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  user-select: none;
  pointer-events: none;
}
.journey-field .pixel-map {
  height: 160%;
  top: 0;
  bottom: auto;
  object-position: center;
  will-change: transform;
}
.journey-field .trail-gates {
  top: -28%;
  will-change: top;
}
.journey-field:not(.at-gate) .gate-word {
  opacity: 0;
}
.journey-field .walk-fox {
  transition: left 0.35s ease;
}
.journey-field .fox-walk-atlas {
  background: url("../assets/pixel/fox-walk-v1.png") 50% 50% / 300% 100%
    no-repeat;
  image-rendering: pixelated;
}
.journey-field.moving .fox-walk-atlas {
  animation: foxSteps 0.55s steps(1) infinite;
}
.journey-field .trail-coin-line {
  display: none;
}
@keyframes foxSteps {
  0%,
  100% {
    background-position-x: 0%;
  }
  25%,
  75% {
    background-position-x: 50%;
  }
  50% {
    background-position-x: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey-field.moving .fox-walk-atlas {
    animation: none;
  }
}
.trail-coin-line {
  top: 46%;
  height: 23%;
  color: #ffd776;
  z-index: 2;
  opacity: 0.95;
  font-size: 22px;
  text-shadow:
    2px 2px #9b6b25,
    -1px -1px #fff6be;
}
.trail-field .walk-road-tip {
  background: #18372d88;
  color: #eee1b1;
  padding: 4px 9px;
  border-radius: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  white-space: nowrap;
  bottom: 8px;
  font-size: 9px;
}
.fox-aura {
  inset: 24px 9px 12px;
  opacity: 0;
}
.trail-controls {
  background: #102d30;
  border-top: 3px solid #70805c;
  color: #f0deae;
  padding: 9px 13px;
  gap: 15px;
}
.trail-controls .walk-arrow {
  background: #173c35;
  border: 2px solid #81906b;
  border-radius: 0;
  box-shadow: inset 0 0 0 3px #264a3a;
  color: #f4d9a2;
  width: 55px;
  height: 47px;
  font-size: 28px;
}
.trail-controls > div {
  min-width: 180px;
}
.trail-controls span {
  color: #e5dcb8;
  font-size: 10px;
}
.trail-fast {
  color: #b9c39a;
  font-size: 10px;
}
.trail-bottom {
  color: #a2b697;
  padding: 8px 3px;
}
.trail-dialog {
  background: #f6edd3;
  color: #263d30;
  border: 4px solid #718359;
  border-radius: 3px;
  box-shadow:
    0 0 0 3px #223f30,
    0 18px 40px #0004;
  padding: 20px;
}
.trail-dialog-icon {
  font-size: 0;
  background: url("../assets/pixel/fox-back-v1.png") center / contain no-repeat;
  width: 66px;
  height: 75px;
  margin: 0 auto 11px;
}
.trail-dialog p {
  color: #74845f;
}
.trail-dialog .btn,
.trail-route,
.trail-reveal .btn {
  border-radius: 2px;
}
.trail-dialog .btn.dark,
.trail-reveal .btn.dark {
  background: #274b37;
  color: #f7e7bf;
  border: 1px solid #62764c;
}
.trail-dialog .btn.ghost,
.trail-route {
  background: #e6e5bf;
  color: #385338;
  border: 1px solid #b7bf8c;
}
.trail-overlay {
  background: #17342c55;
  backdrop-filter: blur(2px);
}
.trail-reveal {
  color: #2b412f;
  background: #fbefd5f5;
  border: 3px solid #71835a;
  border-radius: 3px;
  box-shadow:
    0 0 0 2px #244031,
    0 8px 25px #132b2277;
}
.trail-reveal.bad {
  background: #fff0d9f5;
  border-color: #a28b60;
}
.trail-reveal p {
  color: #6c7e55;
}
.trail-reveal strong {
  color: #41643b;
}
.trail-reveal.bad strong {
  color: #9b694a;
}
.trail-route:hover {
  background: #d2dcab;
}
.trail-motes {
  z-index: 2;
}
.biome-ruins .trail-motes i {
  width: 4px;
  height: 4px;
  border-radius: 0;
}
@media (max-width: 640px) {
  .in-walk .main {
    padding: 6px 8px 5px;
  }
  .trail-header {
    height: 34px;
    font-size: 10px;
  }
  .trail-header small {
    font-size: 8px;
  }
  .trail-hud {
    padding: 9px 13px;
    font-size: 12px;
  }
  .trail-question {
    min-height: 109px;
    padding: 9px 8px 12px;
  }
  .trail-question .word {
    font-size: 32px;
    margin: 7px 0;
  }
  .trail-question p {
    font-size: 10px;
  }
  .trail-question-tag {
    font-size: 9px;
  }
  .trail-progress {
    padding: 7px 13px;
  }
  .trail-field {
    height: calc(100dvh - 312px);
    max-height: 600px;
    min-height: 285px;
  }
  .trail-gates {
    left: 12%;
    width: 76%;
    gap: 5%;
  }
  .trail-gates .gate-word {
    font-size: 11px;
    top: 19%;
    height: 14%;
  }
  .trail-gates .gate-word.long {
    font-size: 9px;
  }
  .trail-controls {
    padding: 8px 10px;
    gap: 10px;
  }
  .trail-controls .walk-arrow {
    width: 47px;
    height: 43px;
    font-size: 25px;
  }
  .trail-controls > div {
    min-width: 170px;
  }
  .trail-controls span {
    font-size: 9px;
  }
  .trail-field .walk-fox,
  .trail-field .walk-fox-sprite {
    width: 97px;
    height: 108px;
  }
  .trail-dialog {
    padding: 16px 13px;
  }
  .trail-dialog-icon {
    height: 60px;
    margin-bottom: 8px;
  }
  .trail-bottom {
    font-size: 8px;
  }
  .trail-zone-label {
    font-size: 8px;
  }
  .trail-question:before,
  .trail-question:after {
    font-size: 17px;
    bottom: 10px;
  }
  .trail-question:before {
    left: 9px;
  }
  .trail-question:after {
    right: 9px;
  }
}
.duel-sprite {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}
.duel-sprite img {
  position: absolute;
  max-width: none;
  width: 200%;
  height: 200%;
  object-fit: fill;
}
.browser-enemy-intent {
  position: absolute;
  z-index: 4;
  top: 12%;
  left: 10%;
  right: 10%;
  background: #183b2de6;
  border: 1px solid #b2c18a;
  border-radius: 12px;
  color: #fff6dc;
  font-size: 12px;
  padding: 8px 12px;
  text-align: center;
}
.journey-field.passing .walk-gate.selected .gate-word {
  opacity: 1;
}
.journey-field.passing .walk-gate:not(.selected) {
  filter: brightness(0.72);
  opacity: 0.6;
}
.journey-field.passing .walk-gate.selected .gate-art {
  filter: drop-shadow(0 0 10px #ffe9a2);
}