.compass-field {
  position: relative; width: 520px; height: 268px;
  font-family: var(--font-read); color: var(--ink);
}
.compass-map {
  position: absolute; left: 4px; top: 5px; width: 258px; height: 258px;
  box-sizing: border-box; border: 4px solid var(--ink); background: var(--grass);
  box-shadow: inset 1px 1px 0 var(--paper);
}
.compass-grid { display: grid; grid-template-columns: repeat(5, 50px); grid-template-rows: repeat(5, 50px); width: 250px; height: 250px; }
.compass-cell {
  position: relative; width: 50px; height: 50px; min-width: 0; min-height: 0;
  box-sizing: border-box; margin: 0; padding: 0; border: 1px solid var(--grass-dark); border-radius: 0;
  background: var(--grass); color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.compass-cell:hover { background: #a4df88; }
.compass-cell:focus-visible { outline: 3px solid var(--ink); outline-offset: -4px; background: var(--lantern); }
.compass-place { position: absolute; left: 8px; top: 8px; display: block; width: 32px; height: 32px; pointer-events: none; }
.compass-place .figure, .compass-pip .figure { display: block; image-rendering: pixelated; }
.compass-glyph { display: block; width: 32px; height: 32px; shape-rendering: crispEdges; }
.compass-cell--pip .compass-place { left: 0; top: 0; }
.compass-grass {
  position: absolute; left: 12px; top: 31px; width: 2px; height: 4px;
  background: var(--grass-dark); box-shadow: 3px 2px 0 var(--grass-dark), 20px -19px 0 var(--grass-dark);
  pointer-events: none;
}
.compass-routes { position: absolute; left: 0; top: 0; width: 250px; height: 250px; z-index: 2; pointer-events: none; }
.compass-pip { position: absolute; width: 32px; height: 32px; z-index: 3; pointer-events: none; }

.compass-side { position: absolute; left: 272px; top: 5px; width: 244px; height: 258px; }
.compass-count {
  position: absolute; left: 0; top: 0; max-width: 244px; height: 30px;
  box-sizing: border-box; padding: 2px 10px; font-size: var(--text-small); line-height: 1;
  font-family: var(--font-pixel); white-space: nowrap;
}
.compass-count::before { border: 1px solid var(--ink); background: var(--paper); clip-path: none; box-shadow: inset 1px 1px 0 var(--white), inset -2px -2px 0 var(--paper-shade); }
.compass-rose { position: absolute; left: 72px; top: 36px; width: 100px; height: 100px; }
.compass-rose__star { position: absolute; left: 23px; top: 23px; width: 54px; height: 54px; }
.compass-rose__star svg { display: block; width: 54px; height: 54px; }
.compass-letter {
  position: absolute; display: grid; place-items: center; width: 24px; height: 24px;
  font-family: var(--font-pixel); font-size: var(--text-field); font-weight: 700; line-height: 1;
  color: var(--ink); background: var(--paper);
}
.compass-letter--north { left: 38px; top: 0; }
.compass-letter--east { right: 0; top: 38px; }
.compass-letter--south { left: 38px; bottom: 0; }
.compass-letter--west { left: 0; top: 38px; }

.compass-card {
  position: absolute; left: 0; top: 142px; width: 244px; height: 116px; box-sizing: border-box;
  display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: 36px 30px 20px; gap: 4px 8px;
  border: 2px solid var(--ink); padding: 6px; background: var(--paper);
  box-shadow: inset 1px 1px 0 var(--white), inset -2px -2px 0 var(--paper-shade);
}
.compass-card__pictures { width: 32px; height: 32px; align-self: center; justify-self: center; }
.compass-picture { display: block; width: 32px; height: 32px; }
.compass-card__title { margin: 0; min-width: 0; align-self: center; font-size: var(--text-field); line-height: 1; font-weight: 700; }
.compass-clues { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.compass-clue {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 8px; box-sizing: border-box;
  border: 1px solid var(--ink); color: var(--ink); background: var(--lantern);
  font-family: var(--font-pixel); font-size: var(--text-field); line-height: 1; white-space: nowrap;
}
.compass-card__hint { grid-column: 1 / -1; margin: 0; min-width: 0; font-size: var(--text-small); line-height: 1; }
.compass-picture[hidden], .compass-clue[hidden] { display: none; }
.compass-field--ready .compass-card { border-color: var(--finish); }
.compass-field--ready .compass-picture { color: var(--finish); }
/* Bigger words keep the same map and give the taller clue text a full 30px row. */
.large-text .compass-clue { min-height: 30px; padding-top: 1px; padding-bottom: 1px; }