.field-board {
  width: min(100%, 62rem);
  margin-inline: auto;
  padding: clamp(.7rem, 2.4vw, 1.5rem);
  display: grid;
  justify-items: center;
  gap: clamp(.55rem, 1.7vw, 1rem);
  border: 1px solid #9cddb073;
  border-radius: 1.35rem;
  color: #f6ffdf;
  background:
    radial-gradient(ellipse at 8% -10%, #60957966, transparent 60%),
    linear-gradient(135deg, #286057, #153b45);
  box-shadow: 0 .55rem 1.5rem #0a122c66;
}

.field-board figure { margin: 0; }
.field-board img { display: block; max-width: 100%; }
.field-board figcaption {
  padding: .35rem .55rem;
  font-size: clamp(.88rem, 2vw, 1.4rem);
  font-weight: 900;
  line-height: 1.1;
  color: #29483b;
}
.field-portrait, .field-loupe, .field-photo-button {
  overflow: hidden;
  border: 2px solid #fff5c7;
  border-radius: .85rem;
  color: #29483b;
  background: #fff6d1;
  box-shadow: 0 .25rem .85rem #10343a91;
}
.field-portrait img { width: 100%; max-height: min(35vh, 20rem); object-fit: contain; background: #244e48; }
.field-board figure[draggable="true"] { cursor: grab; }
.field-board figure[draggable="true"] img { pointer-events: none; }
.field-observe { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: center; }
.field-observe-controls { width: 100%; display: grid; justify-items: center; gap: .7rem; }
.field-categories { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.field-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-width: 3.4rem;
  min-height: 2.85rem;
  padding: .5rem .85rem;
  border-radius: .75rem;
  color: #153a39;
  background: #d4f3bc;
  box-shadow: 0 .2rem 0 #7ab196;
  font-size: clamp(.78rem, 1.55vw, 1.14rem);
}
.field-action span { font-size: 1.34em; }
.field-category { min-height: clamp(3.2rem, 9vw, 6rem); flex-direction: column; }
.field-category span { font-size: clamp(1.4rem, 3.4vw, 2.8rem); }
.field-action.field-correct, .field-zone.field-correct { background: #fff096; color: #23382f; box-shadow: 0 .2rem 0 #c2aa5b; }
.field-action.field-try, .field-zone.field-try { outline: 2px dashed #ffc385; outline-offset: 2px; }
.field-loupe { max-width: 100%; }
.field-frame { position: relative; width: fit-content; max-width: 100%; }
.field-frame img { max-height: min(36vh, 20rem); width: auto; height: auto; }
.field-spot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.field-spot:nth-of-type(1) { --field-zone-color: #ff999f; }
.field-spot:nth-of-type(2) { --field-zone-color: #98ddff; }
.field-spot:nth-of-type(3) { --field-zone-color: #ffe680; }
.field-zone {
  width: clamp(2.05rem, 5vw, 3rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #fff5bb;
  color: #153934;
  background: var(--field-zone-color, #fff8df);
  box-shadow: 0 .12rem .45rem #16312fbd;
  font-size: clamp(.85rem, 2vw, 1.2rem);
}
.field-album { grid-column: 1 / -1; display: flex; gap: .42rem; }
.field-album span {
  display: grid;
  place-items: center;
  width: clamp(1.7rem, 4.7vw, 3.1rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #cfe6a7;
  border-radius: .35rem;
}
.field-album .field-empty { border-style: dashed; color: #a7ceb3; }
.field-album img { width: 100%; height: 100%; object-fit: cover; }

.field-memory { background: radial-gradient(ellipse at 50% -20%, #739aa3, transparent 72%), #254657; }
.field-pages, .field-candidates {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  justify-content: center;
  width: min(100%, 46rem);
  gap: clamp(.3rem, 1.1vw, .75rem);
}
.field-pages > *, .field-candidates > * { min-width: 0; }
.field-photo-button { width: 100%; padding: 0; }
.field-photo-button img, .field-pages .field-portrait img {
  width: 100%;
  height: clamp(3.9rem, 13vw, 8.3rem);
  object-fit: contain;
  background: #21444b;
}
.field-photo-button b { display: block; padding: .32rem .2rem; font-size: clamp(.7rem, 1.4vw, 1rem); overflow-wrap: anywhere; }
.field-candidates { width: min(100%, 37rem); }
.field-choice-line { width: 100%; display: grid; justify-items: center; gap: .6rem; }
.field-missing {
  display: grid;
  place-items: center;
  min-height: clamp(4.9rem, 15vw, 9rem);
  border-radius: .8rem;
  border: 2px dashed #f2e9a6;
  background: #173d52;
  color: #fff0ab;
  font-size: clamp(1.75rem, 5vw, 4rem);
  font-weight: 900;
  animation: field-cover .35s ease-out both;
}

.field-route, .field-travel-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 48rem);
  gap: .45rem;
}
.field-stop {
  min-height: 3rem;
  display: grid;
  place-items: center;
  gap: .1rem;
  padding: .35rem .22rem;
  border: 1px solid #d8edc24d;
  border-radius: .6rem;
  background: #143c42;
  color: #d8edcb;
  font-size: clamp(.67rem, 1.35vw, 1rem);
  text-align: center;
}
.field-stop span { font-size: 1.5em; }
.field-here { color: #223b31; background: #f8efa7; border-color: #fff4af; }
.field-landscape {
  display: grid;
  place-content: center;
  text-align: center;
  width: min(100%, 48rem);
  min-height: clamp(5.7rem, 16vw, 12rem);
  border: 1px solid #e3f7c770;
  border-radius: .95rem;
  background: radial-gradient(ellipse at 32% 32%, #7fc8b1, transparent 65%), #32858c;
  font-size: clamp(.95rem, 2.9vw, 1.9rem);
  animation: field-cover .4s ease-out both;
}
.field-landscape span { font-size: clamp(2rem, 6.5vw, 4.6rem); }
.field-landscape-1 { background: radial-gradient(ellipse at 32% 32%, #91ad66, transparent 65%), #36623e; }
.field-landscape-2 { background: radial-gradient(ellipse at 32% 32%, #dfa869, transparent 65%), #83634b; }
.field-landscape-3 { background: radial-gradient(ellipse at 32% 32%, #a58263, transparent 65%), #644c4d; }
.field-trail .field-portrait { width: min(100%, 20rem); }

@keyframes field-cover {
  from { opacity: .4; transform: translateY(.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 580px) {
  .field-observe { grid-template-columns: 1fr; }
  .field-observe-controls { gap: .45rem; }
  .field-observe .field-portrait img, .field-frame img { max-height: min(28vh, 12rem); }
  .field-travel-controls { grid-template-columns: 1fr 1fr; }
  .field-travel-controls .field-action { padding: .4rem .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .field-board * { animation: none; }
}