:root {
  --cream: #e8d4b4;
  --red: #bf0d3e;
  --navy: #0a3161;
  --ink: #142033;
  --paper: #fff9ef;
  --muted: #6b5c4b;
  --mint: #9fcdb1;
  --line: rgba(10, 49, 97, 0.18);
}

/* Compass Club Solitaire deck visual prototype */
.solitaire-symbol-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.solitaire-prototype-page {
  --solitaire-card-w: clamp(146px, 14vw, 210px);
  --solitaire-face: #fff9ef;
  --solitaire-gold: #f7d66a;
  --solitaire-gold-deep: #c99437;
}

.solitaire-prototype-board,
.solitaire-review-section {
  display: grid;
  gap: 24px;
}

.solitaire-section-heading h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
}

.solitaire-card-row {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
  overflow-x: auto;
  padding: 4px 2px 12px;
}

.solitaire-card-row-large {
  grid-template-columns: repeat(5, minmax(0, var(--solitaire-card-w)));
}

.solitaire-card {
  position: relative;
  width: var(--solitaire-card-w);
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border: 2px solid var(--navy);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(20, 32, 51, 0.16);
}

.solitaire-card .suit-fill,
.solitaire-scale-card .suit-fill,
.card-index .suit-fill {
  fill: currentColor;
  stroke: none;
}

.solitaire-card .suit-line,
.solitaire-scale-card .suit-line,
.card-index .suit-line {
  fill: none;
  stroke: var(--solitaire-face);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.solitaire-card-back-prototype {
  display: grid;
  place-items: center;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 22%, rgba(247, 214, 106, 0.16), transparent 34%),
    linear-gradient(180deg, #0b3a6e, var(--navy));
}

.solitaire-card-back-prototype::before,
.solitaire-card-back-prototype::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid var(--solitaire-gold);
  border-radius: 6px;
  pointer-events: none;
}

.solitaire-card-back-prototype::after {
  inset: 28px;
  border-width: 1px;
  opacity: 0.62;
}

.solitaire-back-frame {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 78%;
  padding: 12px 8px;
  color: #fff9ef;
  text-align: center;
}

.solitaire-back-frame img {
  width: min(100%, 118px);
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  border: 1px solid rgba(247, 214, 106, 0.72);
  border-radius: 50%;
  background: #0b3a6e;
}

.solitaire-back-title,
.solitaire-back-subtitle {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff9ef;
}

.solitaire-back-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
}

.solitaire-back-subtitle {
  font-size: 0.72rem;
  font-weight: 800;
}

.solitaire-card-face {
  background:
    linear-gradient(180deg, rgba(255, 249, 239, 0.98), rgba(244, 230, 204, 0.92)),
    var(--solitaire-face);
  color: var(--navy);
}

.solitaire-card-face::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1.5px solid rgba(10, 49, 97, 0.18);
  border-radius: 5px;
  pointer-events: none;
}

.suit-navy {
  color: var(--navy);
}

.suit-red {
  color: var(--red);
}

.card-index {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 30px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  line-height: 1;
  color: currentColor;
}

.card-index span {
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
}

.card-index svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

.card-index-top {
  top: 12px;
  left: 12px;
}

.card-index-bottom {
  right: 12px;
  bottom: 12px;
  transform: rotate(180deg);
}

.pip-field {
  position: absolute;
  inset: 52px 34px;
}

.pip {
  position: absolute;
  width: clamp(25px, 3vw, 39px);
  height: clamp(25px, 3vw, 39px);
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  transform: translate(-50%, -50%);
}

.pip use[href="#suit-quilt-heart"],
.pip use[href="#suit-quartz"],
.card-index use[href="#suit-quilt-heart"],
.card-index use[href="#suit-quartz"],
.solitaire-scale-card use[href="#suit-quilt-heart"],
.solitaire-scale-card use[href="#suit-quartz"] {
  stroke-width: 4;
}

.rank-6 .pip,
.rank-8 .pip,
.rank-10 .pip {
  width: clamp(22px, 2.8vw, 34px);
  height: clamp(22px, 2.8vw, 34px);
}

.rank-10 .pip {
  width: clamp(20px, 2.5vw, 31px);
  height: clamp(20px, 2.5vw, 31px);
}

.pip-invert {
  rotate: 180deg;
}

.rank-3 .pip-1 { left: 50%; top: 18%; }
.rank-3 .pip-2 { left: 50%; top: 50%; }
.rank-3 .pip-3 { left: 50%; top: 82%; }
.rank-6 .pip-1 { left: 28%; top: 18%; }
.rank-6 .pip-2 { left: 72%; top: 18%; }
.rank-6 .pip-3 { left: 28%; top: 50%; }
.rank-6 .pip-4 { left: 72%; top: 50%; }
.rank-6 .pip-5 { left: 28%; top: 82%; }
.rank-6 .pip-6 { left: 72%; top: 82%; }
.rank-8 .pip-1 { left: 28%; top: 15%; }
.rank-8 .pip-2 { left: 72%; top: 15%; }
.rank-8 .pip-3 { left: 28%; top: 38%; }
.rank-8 .pip-4 { left: 72%; top: 38%; }
.rank-8 .pip-5 { left: 28%; top: 62%; }
.rank-8 .pip-6 { left: 72%; top: 62%; }
.rank-8 .pip-7 { left: 28%; top: 85%; }
.rank-8 .pip-8 { left: 72%; top: 85%; }
.rank-10 .pip-1 { left: 28%; top: 12%; }
.rank-10 .pip-2 { left: 72%; top: 12%; }
.rank-10 .pip-3 { left: 28%; top: 32%; }
.rank-10 .pip-4 { left: 72%; top: 32%; }
.rank-10 .pip-5 { left: 50%; top: 42%; }
.rank-10 .pip-6 { left: 50%; top: 58%; }
.rank-10 .pip-7 { left: 28%; top: 68%; }
.rank-10 .pip-8 { left: 72%; top: 68%; }
.rank-10 .pip-9 { left: 28%; top: 88%; }
.rank-10 .pip-10 { left: 72%; top: 88%; }

.solitaire-card-row-small {
  grid-template-columns: repeat(5, minmax(64px, 86px));
}

.solitaire-scale-card {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 3px;
  width: 76px;
  aspect-ratio: 5 / 7;
  padding-top: 7px;
  border: 2px solid var(--navy);
  border-radius: 5px;
  background: var(--solitaire-face);
  box-shadow: 0 8px 16px rgba(20, 32, 51, 0.12);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  line-height: 1;
}

.solitaire-scale-card span {
  font-size: 1.18rem;
}

.solitaire-scale-card svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

.solitaire-scale-card::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 20px;
  height: 20px;
  background: currentColor;
  clip-path: circle(42% at 50% 50%);
  opacity: 0.12;
}

.solitaire-scale-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(247, 214, 106, 0.2), transparent 38%),
    var(--navy);
}

.solitaire-scale-back::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid var(--solitaire-gold);
  border-radius: 4px;
}

.solitaire-scale-back::after {
  background: #fff9ef;
  opacity: 0.9;
  clip-path: polygon(50% 0, 58% 38%, 100% 50%, 58% 62%, 50% 100%, 42% 62%, 0 50%, 42% 38%);
  top: 42px;
  left: 29px;
  right: auto;
  bottom: auto;
  width: 18px;
  height: 18px;
}

@media (max-width: 980px) {
  .solitaire-prototype-page {
    --solitaire-card-w: 150px;
  }

  .solitaire-card-row-large {
    grid-template-columns: repeat(5, minmax(132px, 170px));
  }
}

/* Sojourner Solitaire playable prototype */
.sojourner-page {
  --sojourner-card-width: clamp(88px, 9vw, 104px);
  --sojourner-card-height: calc(var(--sojourner-card-width) * 1.4);
  --sojourner-table-extra-width: 64px;
  --sojourner-faceup-offset: 40px;
  --sojourner-facedown-offset: 20px;
  --sojourner-pip-size: clamp(20px, 2vw, 24px);
  --sojourner-index-suit-size: 15px;
  --sojourner-face: #fff9ef;
  --sojourner-gold: #f7d66a;
  --sojourner-gold-deep: #c99437;
}

.sojourner-table-wrap {
  display: grid;
  gap: 18px;
}

.sojourner-actions {
  justify-content: flex-start;
  gap: 10px;
}

.sojourner-actions .game-action-button:disabled,
.sojourner-road-end-actions .game-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.sojourner-status {
  margin: 0;
  color: var(--navy);
  font-weight: 800;
}

.sojourner-road-end-panel {
  display: grid;
  gap: 14px;
  border: 2px solid var(--navy);
  background:
    linear-gradient(180deg, rgba(255, 249, 239, 0.98), rgba(232, 212, 180, 0.88)),
    var(--paper);
  padding: 16px;
}

.sojourner-road-end-panel[hidden] {
  display: none;
}

.sojourner-road-end-copy {
  display: grid;
  gap: 6px;
}

.sojourner-road-end-copy h2,
.sojourner-road-end-copy p {
  margin: 0;
}

.sojourner-road-end-copy h2 {
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
}

.sojourner-road-end-copy p {
  color: var(--ink);
  font-weight: 800;
}

.sojourner-road-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sojourner-table {
  position: relative;
  display: grid;
  gap: 18px;
  overflow-x: auto;
  max-width: min(100%, var(--sojourner-usable-width, 100%));
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(150, 198, 179, 0.28), rgba(247, 214, 106, 0.16)),
    #f0dfc2;
  padding: clamp(12px, 2vw, 20px);
}

.sojourner-top-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: clamp(20px, 8vw, 96px);
  min-width: calc((var(--sojourner-card-width) * 7) + var(--sojourner-table-extra-width));
}

.sojourner-pile-group {
  display: flex;
  align-items: start;
  gap: clamp(8px, 1.4vw, 16px);
}

.sojourner-foundation-group {
  gap: clamp(8px, 1.7vw, 18px);
}

.sojourner-tableau {
  display: grid;
  grid-template-columns: repeat(7, var(--sojourner-card-width));
  justify-content: space-between;
  gap: clamp(8px, 1.8vw, 24px);
  min-width: calc((var(--sojourner-card-width) * 7) + var(--sojourner-table-extra-width));
}

.sojourner-pile,
.sojourner-empty-column {
  width: var(--sojourner-card-width);
  height: var(--sojourner-card-height);
  border: 2px dashed rgba(10, 49, 97, 0.46);
  border-radius: 7px;
  background: rgba(255, 249, 239, 0.46);
  color: var(--navy);
  font: inherit;
  padding: 0;
}

.sojourner-pile {
  position: relative;
  border-style: solid;
  cursor: pointer;
}

.sojourner-pile.is-empty {
  border-style: dashed;
}

.sojourner-pile:focus-visible,
.sojourner-table-card:focus-visible,
.sojourner-empty-column:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.sojourner-pile-label {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 8px;
  color: rgba(10, 49, 97, 0.72);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sojourner-column {
  position: relative;
  width: var(--sojourner-card-width);
  min-height: calc(var(--sojourner-card-height) + 260px);
}

.sojourner-orientation-prompt {
  display: none;
}

.sojourner-page[data-layout="compact-table"] {
  --sojourner-card-width: 66px;
  --sojourner-table-extra-width: 30px;
  --sojourner-faceup-offset: 32px;
  --sojourner-facedown-offset: 16px;
  --sojourner-pip-size: 19px;
  --sojourner-index-suit-size: 13px;
}

.sojourner-page[data-layout="compact-table"] .map-intro {
  margin-bottom: 12px;
}

.sojourner-page[data-layout="compact-table"] .sojourner-table-wrap {
  gap: 10px;
}

.sojourner-page[data-layout="compact-table"] .sojourner-actions {
  gap: 8px;
}

.sojourner-page[data-layout="compact-table"] .sojourner-actions .game-action-button {
  padding: 8px 10px;
  font-size: 0.82rem;
}

.sojourner-page[data-layout="compact-table"] .sojourner-status {
  font-size: 0.88rem;
}

.sojourner-page[data-layout="compact-table"] .sojourner-table {
  gap: 10px;
  padding: 10px;
}

.sojourner-page[data-layout="compact-table"] .sojourner-top-row,
.sojourner-page[data-layout="compact-table"] .sojourner-tableau {
  min-width: calc((var(--sojourner-card-width) * 7) + var(--sojourner-table-extra-width));
}

.sojourner-page[data-layout="compact-table"] .sojourner-top-row {
  gap: 18px;
}

.sojourner-page[data-layout="compact-table"] .sojourner-pile-group,
.sojourner-page[data-layout="compact-table"] .sojourner-foundation-group,
.sojourner-page[data-layout="compact-table"] .sojourner-tableau {
  gap: 6px;
}

.sojourner-page[data-layout="compact-table"] .sojourner-column {
  min-height: calc(var(--sojourner-card-height) + 230px);
}

.sojourner-page[data-layout="compact-table"] .sojourner-card-center {
  inset: 30px 14px;
}

.sojourner-page[data-layout="compact-table"] .sojourner-index {
  width: 22px;
}

.sojourner-page[data-layout="compact-table"] .sojourner-index span {
  font-size: 1rem;
}

.sojourner-page[data-layout="compact-table"] .sojourner-suit-index {
  width: var(--sojourner-index-suit-size);
  height: var(--sojourner-index-suit-size);
}

.sojourner-page[data-layout="compact-table"] img.sojourner-suit-spades.sojourner-suit-index {
  width: calc(var(--sojourner-index-suit-size) * 0.92);
  height: calc(var(--sojourner-index-suit-size) * 1.16);
}

.sojourner-page[data-layout="turn-compass"] {
  --sojourner-card-width: 64px;
}

.sojourner-page[data-layout="turn-compass"] .map-intro,
.sojourner-page[data-layout="turn-compass"] .sojourner-table-wrap > .theme-helper,
.sojourner-page[data-layout="turn-compass"] .sojourner-status {
  display: none;
}

.sojourner-page[data-layout="turn-compass"] .sojourner-actions {
  position: relative;
  z-index: 3;
  margin-bottom: 8px;
}

.sojourner-page[data-layout="turn-compass"] .sojourner-table {
  min-height: min(72vh, 520px);
  overflow: hidden;
}

.sojourner-page[data-layout="turn-compass"] .sojourner-top-row,
.sojourner-page[data-layout="turn-compass"] .sojourner-tableau {
  visibility: hidden;
  pointer-events: none;
}

.sojourner-page[data-layout="turn-compass"] .sojourner-orientation-prompt {
  position: absolute;
  inset: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 2px solid var(--navy);
  background:
    linear-gradient(180deg, rgba(255, 249, 239, 0.96), rgba(232, 212, 180, 0.92)),
    var(--paper);
  padding: 22px;
  text-align: center;
}

.sojourner-page[data-layout="turn-compass"] .sojourner-orientation-prompt h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 11vw, 3rem);
}

.sojourner-page[data-layout="turn-compass"] .sojourner-orientation-prompt p {
  max-width: 320px;
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.sojourner-page[data-layout="turn-compass"] .sojourner-orientation-prompt .eyebrow {
  color: #8c6a1f;
}

.sojourner-how-to-panel {
  border: 2px solid var(--navy);
  background:
    linear-gradient(180deg, rgba(255, 249, 239, 0.98), rgba(232, 212, 180, 0.82)),
    var(--paper);
  padding: 16px;
}

.sojourner-how-to-panel[hidden] {
  display: none;
}

.sojourner-how-to-copy {
  position: relative;
  display: grid;
  gap: 10px;
  max-width: 940px;
}

.sojourner-how-to-copy h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
}

.sojourner-how-to-copy p {
  margin: 0;
  color: var(--ink);
  line-height: 1.48;
}

.sojourner-how-to-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.sojourner-table-card {
  position: absolute;
  z-index: var(--stack-index, 0);
  top: calc((var(--face-up-before, 0) * var(--sojourner-faceup-offset)) + (var(--face-down-before, 0) * var(--sojourner-facedown-offset)));
  left: 0;
  width: var(--sojourner-card-width);
  height: var(--sojourner-card-height);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sojourner-table-card.is-face-down {
  cursor: default;
}

.sojourner-table-card.is-movable,
.sojourner-pile.is-movable {
  cursor: grab;
}

.sojourner-page.is-dragging .sojourner-table-card.is-movable,
.sojourner-page.is-dragging .sojourner-pile.is-movable {
  cursor: grabbing;
}

.sojourner-card,
.sojourner-card-back {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid var(--navy);
  border-radius: 7px;
  box-shadow: 0 8px 14px rgba(20, 32, 51, 0.16);
}

.sojourner-card {
  isolation: isolate;
  background: linear-gradient(180deg, #fff9ef, #f1e0c2);
}

.sojourner-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(10, 49, 97, 0.22);
  border-radius: 4px;
  pointer-events: none;
}

.sojourner-card *,
.sojourner-card-back * {
  pointer-events: none;
}

.sojourner-card-back {
  background: var(--navy);
}

.sojourner-card-back img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sojourner-navy {
  color: var(--navy);
}

.sojourner-red {
  color: var(--red);
}

.sojourner-index {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 24px;
  color: currentColor;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  line-height: 1;
}

.sojourner-index span {
  font-size: clamp(0.96rem, 1.1vw, 1.2rem);
}

.sojourner-index-top {
  top: 7px;
  left: 7px;
}

.sojourner-index-bottom {
  right: 7px;
  bottom: 7px;
  transform: rotate(180deg);
}

.sojourner-suit {
  display: inline-grid;
  place-items: center;
  color: currentColor;
  line-height: 1;
}

img.sojourner-suit {
  object-fit: contain;
}

.sojourner-suit-index {
  width: var(--sojourner-index-suit-size);
  height: var(--sojourner-index-suit-size);
  font-size: 1rem;
}

img.sojourner-suit-spades.sojourner-suit-index {
  width: calc(var(--sojourner-index-suit-size) * 0.94);
  height: calc(var(--sojourner-index-suit-size) * 1.16);
}

.sojourner-suit-pip {
  width: var(--sojourner-pip-size);
  height: var(--sojourner-pip-size);
  font-size: clamp(1.36rem, 2.5vw, 1.9rem);
}

img.sojourner-suit-spades.sojourner-suit-pip {
  width: calc(var(--sojourner-pip-size) * 0.94);
  height: calc(var(--sojourner-pip-size) * 1.14);
}

img.sojourner-suit-diamonds.sojourner-suit-pip {
  width: calc(var(--sojourner-pip-size) * 0.9);
  height: calc(var(--sojourner-pip-size) * 1.08);
}

.sojourner-suit-large {
  width: clamp(42px, 4vw, 58px);
  height: clamp(42px, 4vw, 58px);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
}

.sojourner-card-center {
  position: absolute;
  inset: 34px 20px;
  display: grid;
  place-items: center;
}

.sojourner-pips {
  position: absolute;
  inset: 0;
}

.sojourner-pips-2,
.sojourner-pips-3,
.sojourner-pips-4 {
  --sojourner-pip-size: clamp(21px, 2.1vw, 25px);
}

.sojourner-pips-5,
.sojourner-pips-6,
.sojourner-pips-7 {
  --sojourner-pip-size: clamp(19px, 1.9vw, 23px);
}

.sojourner-pips-8,
.sojourner-pips-9,
.sojourner-pips-10 {
  --sojourner-pip-size: clamp(17px, 1.7vw, 21px);
}

.sojourner-pip {
  position: absolute;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

.sojourner-pips-2 .sojourner-pip-1 { left: 50%; top: 20%; }
.sojourner-pips-2 .sojourner-pip-2 { left: 50%; top: 80%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-3 .sojourner-pip-1 { left: 50%; top: 18%; }
.sojourner-pips-3 .sojourner-pip-2 { left: 50%; top: 50%; }
.sojourner-pips-3 .sojourner-pip-3 { left: 50%; top: 82%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-4 .sojourner-pip-1 { left: 30%; top: 20%; }
.sojourner-pips-4 .sojourner-pip-2 { left: 70%; top: 20%; }
.sojourner-pips-4 .sojourner-pip-3 { left: 30%; top: 80%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-4 .sojourner-pip-4 { left: 70%; top: 80%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-5 .sojourner-pip-1 { left: 30%; top: 20%; }
.sojourner-pips-5 .sojourner-pip-2 { left: 70%; top: 20%; }
.sojourner-pips-5 .sojourner-pip-3 { left: 50%; top: 50%; }
.sojourner-pips-5 .sojourner-pip-4 { left: 30%; top: 80%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-5 .sojourner-pip-5 { left: 70%; top: 80%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-6 .sojourner-pip-1 { left: 30%; top: 18%; }
.sojourner-pips-6 .sojourner-pip-2 { left: 70%; top: 18%; }
.sojourner-pips-6 .sojourner-pip-3 { left: 30%; top: 50%; }
.sojourner-pips-6 .sojourner-pip-4 { left: 70%; top: 50%; }
.sojourner-pips-6 .sojourner-pip-5 { left: 30%; top: 82%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-6 .sojourner-pip-6 { left: 70%; top: 82%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-7 .sojourner-pip-1 { left: 30%; top: 14%; }
.sojourner-pips-7 .sojourner-pip-2 { left: 70%; top: 14%; }
.sojourner-pips-7 .sojourner-pip-3 { left: 50%; top: 34%; }
.sojourner-pips-7 .sojourner-pip-4 { left: 30%; top: 52%; }
.sojourner-pips-7 .sojourner-pip-5 { left: 70%; top: 52%; }
.sojourner-pips-7 .sojourner-pip-6 { left: 30%; top: 86%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-7 .sojourner-pip-7 { left: 70%; top: 86%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-8 .sojourner-pip-1 { left: 30%; top: 14%; }
.sojourner-pips-8 .sojourner-pip-2 { left: 70%; top: 14%; }
.sojourner-pips-8 .sojourner-pip-3 { left: 50%; top: 34%; }
.sojourner-pips-8 .sojourner-pip-4 { left: 30%; top: 50%; }
.sojourner-pips-8 .sojourner-pip-5 { left: 70%; top: 50%; }
.sojourner-pips-8 .sojourner-pip-6 { left: 50%; top: 66%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-8 .sojourner-pip-7 { left: 30%; top: 86%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-8 .sojourner-pip-8 { left: 70%; top: 86%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-9 .sojourner-pip-1 { left: 30%; top: 12%; }
.sojourner-pips-9 .sojourner-pip-2 { left: 70%; top: 12%; }
.sojourner-pips-9 .sojourner-pip-3 { left: 30%; top: 32%; }
.sojourner-pips-9 .sojourner-pip-4 { left: 70%; top: 32%; }
.sojourner-pips-9 .sojourner-pip-5 { left: 50%; top: 50%; }
.sojourner-pips-9 .sojourner-pip-6 { left: 30%; top: 68%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-9 .sojourner-pip-7 { left: 70%; top: 68%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-9 .sojourner-pip-8 { left: 30%; top: 88%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-9 .sojourner-pip-9 { left: 70%; top: 88%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-10 .sojourner-pip-1 { left: 30%; top: 10%; }
.sojourner-pips-10 .sojourner-pip-2 { left: 70%; top: 10%; }
.sojourner-pips-10 .sojourner-pip-3 { left: 30%; top: 29%; }
.sojourner-pips-10 .sojourner-pip-4 { left: 70%; top: 29%; }
.sojourner-pips-10 .sojourner-pip-5 { left: 50%; top: 40%; }
.sojourner-pips-10 .sojourner-pip-6 { left: 50%; top: 60%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-10 .sojourner-pip-7 { left: 30%; top: 71%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-10 .sojourner-pip-8 { left: 70%; top: 71%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-10 .sojourner-pip-9 { left: 30%; top: 90%; transform: translate(-50%, -50%) rotate(180deg); }
.sojourner-pips-10 .sojourner-pip-10 { left: 70%; top: 90%; transform: translate(-50%, -50%) rotate(180deg); }

.sojourner-placeholder-rank {
  display: block;
  color: currentColor;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.85rem, 3.8vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.sojourner-cornerstone-note {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #8c6a1f;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.sojourner-foundation-placeholder {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 8px;
  color: currentColor;
  font-size: 0.62rem;
  font-weight: 900;
  text-align: center;
}

.sojourner-pile.is-selected .sojourner-card,
.sojourner-table-card.is-selected .sojourner-card {
  border-color: var(--sojourner-gold-deep, #c99437);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(247, 214, 106, 0.76),
    0 12px 20px rgba(20, 32, 51, 0.24);
}

.sojourner-drop-target {
  outline: 3px solid rgba(201, 148, 55, 0.72);
  outline-offset: 4px;
}

.sojourner-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: var(--sojourner-card-width, 96px);
  height: var(--sojourner-card-height, 134px);
  pointer-events: none;
  opacity: 0.88;
  filter: drop-shadow(0 12px 16px rgba(20, 32, 51, 0.28));
}

.sojourner-drag-ghost .sojourner-card {
  width: 100%;
  height: 100%;
}

.sojourner-drag-count {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border: 2px solid var(--sojourner-gold-deep, #c99437);
  border-radius: 999px;
  background: var(--paper, #f6e5c4);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
}

@media (horizontal-viewport-segments: 2) {
  .sojourner-table-wrap {
    max-width: env(viewport-segment-width 0 0, 100%);
    padding-right: max(0px, calc(env(viewport-segment-left 1 0, 100vw) - env(viewport-segment-right 0 0, 100vw)));
  }
}

@media (vertical-viewport-segments: 2) {
  .sojourner-table-wrap {
    padding-bottom: max(0px, calc(env(viewport-segment-top 0 1, 100vh) - env(viewport-segment-bottom 0 0, 100vh)));
  }
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 0;
  background: #f6ecdc;
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-current-feature-id="travel-map"] {
  background: var(--navy);
}

.easy-read body {
  font-size: 1.12rem;
  line-height: 1.65;
}

.easy-read .travel-map-widget {
  width: min(1220px, calc(100% - 18px));
}

.easy-read .club-menu-list span,
.easy-read .theme-helper span,
.easy-read .game-tile p:not(.eyebrow),
.easy-read .play-mode-panel p,
.easy-read .field-note-form-status,
.easy-read dd {
  font-size: 1rem;
  line-height: 1.55;
}

.easy-read .filter-button,
.easy-read .quest-link,
.easy-read .game-action-button,
.easy-read .club-menu-button,
.easy-read .field-note-primary-button,
.easy-read .field-note-form input,
.easy-read .field-note-form select,
.easy-read .field-note-form textarea,
.easy-read .play-mode-panel select {
  min-height: 48px;
  font-size: 1rem;
}

.easy-read .play-mode-panel,
.easy-read .field-note-fieldset,
.easy-read .field-notes-contribution,
.easy-read .word-search-board-wrap,
.easy-read .word-search-list-panel,
.easy-read .sudoku-play-panel,
.easy-read .sudoku-tool-panel {
  gap: 14px;
  padding: 16px;
}

.easy-read .word-search-cell,
.easy-read .sudoku-number-button {
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
}

.easy-read .word-search-little .word-search-cell {
  font-size: clamp(1.2rem, 4vw, 1.65rem);
}

.travel-map-widget {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: 28px 0;
}

.compass-club-app {
  width: min(1220px, calc(100% - 24px));
}

.map-intro {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 24px 0 18px;
  border-bottom: 2px solid rgba(255, 249, 239, 0.42);
}

.intro-copy {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 720px;
  margin-bottom: 10px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 3.45vw, 3.15rem);
  line-height: 1;
  letter-spacing: 0;
}

body[data-current-feature-id="travel-map"] .map-intro .eyebrow {
  color: var(--cream);
}

body[data-current-feature-id="travel-map"] .map-intro h1 {
  color: var(--paper);
}

body[data-current-feature-id="travel-map"] .map-intro p:not(.eyebrow) {
  color: rgba(255, 249, 239, 0.86);
}

.easy-read .state-status-layout {
  grid-template-columns: 1fr;
}

.easy-read .state-status-panel {
  min-height: 0;
}

.easy-read .visited-status-toggle {
  min-height: 50px;
}

.easy-read .state-color-control {
  min-height: 0;
}

.easy-read .visited-date-row {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.easy-read .visited-date-or {
  padding-top: 0;
  text-align: center;
}

.compass-title {
  display: flex;
  align-items: stretch;
  gap: clamp(2px, 0.45vw, 6px);
  max-width: 760px;
}

.title-lines {
  display: grid;
  align-content: center;
  gap: 0;
}

.title-lines span {
  display: block;
}

.title-question {
  display: grid;
  align-items: center;
  color: var(--red);
  font-size: 2.2em;
  line-height: 0.76;
  margin-left: -0.03em;
  transform: translateY(-0.02em);
}

.map-intro p:not(.eyebrow) {
  max-width: 690px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0;
}

.theme-helper {
  display: grid;
  gap: 3px;
  padding: 18px 0 0;
  color: var(--red);
  text-align: left;
}

.theme-helper span {
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.tracker-hero-copy {
  max-width: 920px;
  padding: clamp(16px, 2.4vw, 24px) 0 0;
}

.tracker-hero-copy p {
  margin: 0;
  color: rgba(255, 249, 239, 0.9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  font-weight: 700;
  line-height: 1.45;
}

.milestone-road {
  display: grid;
  justify-items: center;
  gap: 0;
  width: 100%;
  margin: 8px 0 clamp(18px, 2.2vw, 26px);
  padding: 0;
  background: transparent;
  overflow: clip;
  overflow-clip-margin: 30px;
}

.milestone-road-status {
  position: relative;
  z-index: 10;
  display: grid;
  justify-items: center;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: clamp(12px, 1.7vw, 18px) auto 0;
}

.milestone-road-label {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0;
  padding: 4px 10px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 249, 239, 0.92);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  cursor: pointer;
}

.milestone-road-label:hover,
.milestone-road-label:focus-visible,
.milestone-road-label[aria-expanded="true"] {
  border-color: rgba(255, 249, 239, 0.48);
  background: rgba(255, 249, 239, 0.12);
  color: #fff9ef;
  outline: none;
}

.remaining-states-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 50%;
  box-sizing: border-box;
  width: min(300px, calc(100vw - 36px));
  max-height: min(340px, calc(100dvh - 120px));
  overflow: auto;
  padding: 16px 18px 14px;
  border: 2px solid rgba(10, 49, 97, 0.58);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 249, 239, 0.96), rgba(232, 212, 180, 0.92)),
    var(--paper);
  box-shadow:
    0 14px 26px rgba(4, 24, 43, 0.24),
    inset 0 0 0 1px rgba(255, 249, 239, 0.82);
  color: var(--navy);
  transform: translateX(-50%);
}

.remaining-states-popover[hidden] {
  display: none;
}

.remaining-states-popover strong {
  display: block;
  padding-right: 24px;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.remaining-states-popover ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.remaining-states-popover li {
  min-width: 0;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.15;
}

.remaining-states-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1.5px solid rgba(10, 49, 97, 0.4);
  border-radius: 999px;
  background: rgba(255, 249, 239, 0.84);
  color: var(--navy);
  font: 900 1rem/1 Georgia, "Times New Roman", serif;
  cursor: pointer;
}

.remaining-states-close:hover,
.remaining-states-close:focus-visible {
  border-color: var(--red);
  color: var(--red);
  outline: none;
}

.milestone-road-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.milestone-road-scene {
  --milestone-road-gold: #d89b2d;
  position: relative;
  width: min(92%, 1120px);
  aspect-ratio: 2048 / 683;
  margin: 0 auto;
  overflow: visible;
}

.dreamy-art-edge {
  --dreamy-haze-blur: 22px;
  --dreamy-haze-opacity: 0.24;
  --dreamy-haze-extension: 18px;
  --dreamy-edge-x: 4%;
  --dreamy-edge-y: 6%;
  isolation: isolate;
}

.dreamy-art-edge::before,
.dreamy-art-edge::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.dreamy-art-edge::before {
  z-index: 0;
  inset: calc(var(--dreamy-haze-extension) * -1);
  background: url("assets/tracker/milestone-road-east-to-west.png") center / 100% 100% no-repeat;
  filter: blur(var(--dreamy-haze-blur));
  opacity: var(--dreamy-haze-opacity);
  transform: translateZ(0);
}

.dreamy-art-edge::after {
  z-index: 3;
  inset: 0;
  background:
    radial-gradient(ellipse at top left, rgba(10, 49, 97, 0.24) 0, rgba(10, 49, 97, 0.08) 5%, rgba(10, 49, 97, 0) 13%),
    radial-gradient(ellipse at top right, rgba(10, 49, 97, 0.24) 0, rgba(10, 49, 97, 0.08) 5%, rgba(10, 49, 97, 0) 13%),
    radial-gradient(ellipse at bottom left, rgba(10, 49, 97, 0.24) 0, rgba(10, 49, 97, 0.08) 5%, rgba(10, 49, 97, 0) 13%),
    radial-gradient(ellipse at bottom right, rgba(10, 49, 97, 0.24) 0, rgba(10, 49, 97, 0.08) 5%, rgba(10, 49, 97, 0) 13%),
    linear-gradient(
      to right,
      rgba(10, 49, 97, 0.34) 0,
      rgba(10, 49, 97, 0.1) 1.5%,
      rgba(10, 49, 97, 0) var(--dreamy-edge-x),
      rgba(10, 49, 97, 0) calc(100% - var(--dreamy-edge-x)),
      rgba(10, 49, 97, 0.1) 98.5%,
      rgba(10, 49, 97, 0.34) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(10, 49, 97, 0.26) 0,
      rgba(10, 49, 97, 0.08) 1.5%,
      rgba(10, 49, 97, 0) var(--dreamy-edge-y),
      rgba(10, 49, 97, 0) calc(100% - var(--dreamy-edge-y)),
      rgba(10, 49, 97, 0.08) 98.5%,
      rgba(10, 49, 97, 0.26) 100%
    );
}

.milestone-road-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.milestone-road-progress-line {
  fill: none;
  stroke: var(--mint);
  stroke-width: var(--milestone-road-progress-width, 16);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0.72;
  pointer-events: none;
  transition: none;
}

.milestone-road-progress-line.is-animated {
  transition: stroke-dashoffset 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.milestone-marker {
  position: absolute;
  z-index: 4;
  left: calc((var(--marker-x) / 2048) * 100%);
  top: calc((var(--marker-y) / 683) * 100%);
  width: calc((var(--marker-w) / 2048) * 100%);
  height: calc((var(--marker-h) / 683) * 100%);
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: default;
  padding: 0;
  transform: translate(-50%, -50%);
}

.milestone-marker.is-reached {
  border-color: transparent;
  box-shadow: none;
}

.milestone-marker.is-clickable {
  cursor: pointer;
}

.milestone-marker:hover,
.milestone-marker:focus-visible {
  border-color: rgba(247, 214, 106, 0.95);
  box-shadow:
    0 0 0 2px rgba(10, 49, 97, 0.72),
    0 0 16px rgba(247, 214, 106, 0.58);
  outline: none;
}

.is-road-workshop .milestone-road-overlay {
  pointer-events: auto;
}

.is-road-workshop .milestone-marker {
  pointer-events: none;
}

.milestone-road-workshop-corridor,
.milestone-road-workshop-centerline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.milestone-road-workshop-corridor {
  stroke: rgba(150, 198, 179, 0.24);
  stroke-width: 58;
}

.milestone-road-workshop-centerline {
  stroke: rgba(255, 249, 239, 0.94);
  stroke-width: 3;
  stroke-dasharray: 16 10;
}

.road-workshop-layer {
  pointer-events: auto;
}

.road-workshop-point {
  fill: var(--red);
  stroke: #fff9ef;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  cursor: grab;
  filter: drop-shadow(0 2px 5px rgba(4, 24, 43, 0.3));
}

.road-workshop-point[data-milestone] {
  fill: var(--milestone-road-gold);
  stroke: var(--navy);
}

.road-workshop-point:hover,
.road-workshop-point:focus-visible {
  outline: none;
  stroke: #fff9ef;
  stroke-width: 5;
}

.road-workshop-point:active {
  cursor: grabbing;
}

.road-workshop-toolbar {
  position: relative;
  z-index: 8;
  display: grid;
  gap: 10px;
  width: min(760px, 100%);
  max-height: min(480px, calc(100dvh - 160px));
  margin: 12px auto 0;
  overflow: auto;
  padding: 14px;
  border: 2px solid rgba(10, 49, 97, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 249, 239, 0.97), rgba(232, 212, 180, 0.95)),
    var(--paper);
  box-shadow: 0 18px 36px rgba(4, 24, 43, 0.28);
  color: var(--navy);
}

.road-workshop-toolbar h2 {
  margin: 0;
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.road-workshop-toolbar p {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}

.road-workshop-toolbar button {
  min-height: 38px;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff9ef;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.road-workshop-toolbar button:hover,
.road-workshop-toolbar button:focus-visible {
  background: var(--red);
  border-color: var(--red);
  outline: none;
}

.road-workshop-toolbar textarea {
  min-height: 160px;
  resize: vertical;
  border: 1.5px solid rgba(10, 49, 97, 0.42);
  background: rgba(255, 253, 248, 0.94);
  color: var(--ink);
  font: 700 0.75rem/1.35 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  padding: 10px;
}

.road-workshop-toolbar output {
  min-height: 1.2em;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
}

.easy-read .milestone-road-progress-line {
  transition: none;
  stroke-opacity: 0.82;
}

.easy-read .dreamy-art-edge {
  --dreamy-haze-opacity: 0;
  --dreamy-haze-extension: 0px;
  --dreamy-edge-x: 2.5%;
  --dreamy-edge-y: 4%;
}

@media (max-width: 760px) {
  .dreamy-art-edge {
    --dreamy-haze-blur: 18px;
    --dreamy-haze-opacity: 0.2;
    --dreamy-haze-extension: 14px;
    --dreamy-edge-x: 3.5%;
    --dreamy-edge-y: 5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .milestone-road-progress-line {
    transition: none;
  }
}

@media (forced-colors: active) {
  .dreamy-art-edge::before,
  .dreamy-art-edge::after {
    display: none;
  }
}

.milestone-note {
  position: fixed;
  z-index: 950;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 24, 43, 0.58);
  color: var(--navy);
}

.milestone-note[hidden] {
  display: none;
}

.milestone-note-card {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(100%, 520px);
  border: 2px solid var(--navy);
  background: var(--paper);
  box-shadow: 0 20px 44px rgba(4, 24, 43, 0.32);
  padding: 26px 24px 22px;
}

.milestone-note-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.milestone-note-close:hover,
.milestone-note-close:focus-visible {
  border-color: var(--navy);
  background: var(--cream);
}

.milestone-note-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.milestone-note-title {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.85rem, 5vw, 2.55rem);
  line-height: 1.02;
}

.milestone-note-quote {
  display: grid;
  gap: 8px;
  margin: 0;
  border-left: 4px solid var(--mint);
  padding: 4px 0 4px 14px;
}

.milestone-note-quote[hidden] {
  display: none;
}

.milestone-note-quote blockquote {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.28;
  white-space: pre-line;
}

.milestone-note-quote figcaption {
  color: rgba(10, 49, 97, 0.78);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: pre-line;
}

.milestone-note-message,
.milestone-note-reward {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(10, 49, 97, 0.18);
  background: rgba(255, 249, 239, 0.55);
  padding: 12px;
}

.milestone-note-message h3,
.milestone-note-message p,
.milestone-note-reward h3,
.milestone-note-reward p {
  margin: 0;
}

.milestone-note-message h3,
.milestone-note-reward h3 {
  color: var(--red);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.milestone-note-message p,
.milestone-note-reward p {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
}

.milestone-note-reward {
  border-color: rgba(216, 155, 45, 0.45);
  background: rgba(255, 249, 239, 0.72);
}

.milestone-note-reward[hidden] {
  display: none;
}

.milestone-note-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.milestone-note-sources[hidden],
.milestone-note-sources a[hidden] {
  display: none;
}

.milestone-note-sources a {
  border: 1.5px solid rgba(10, 49, 97, 0.28);
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
  padding: 7px 9px;
  text-decoration: none;
  text-transform: uppercase;
}

.milestone-note-sources a:hover,
.milestone-note-sources a:focus-visible {
  border-color: var(--navy);
  background: var(--cream);
  outline: none;
}

.milestone-note-dismiss {
  justify-self: start;
  min-height: 34px;
  border: 1.5px solid var(--navy);
  background: var(--paper);
  color: var(--navy);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  text-transform: uppercase;
  cursor: pointer;
}

.milestone-note-dismiss:hover,
.milestone-note-dismiss:focus-visible {
  background: var(--navy);
  color: var(--paper);
}

.completion-celebration {
  position: fixed;
  z-index: 960;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 25%, rgba(232, 212, 180, 0.24), transparent 34%),
    rgba(4, 24, 43, 0.72);
  color: var(--navy);
  overflow: hidden;
}

.completion-map-overlay {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: min(78%, 760px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.completion-map-overlay[hidden] {
  display: none;
}

.completion-map-emblem {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(4, 24, 43, 0.36));
}

.completion-celebration[hidden] {
  display: none;
}

.completion-card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
  width: min(100%, 520px);
  max-height: min(94vh, 680px);
  overflow-y: auto;
  border: 2px solid var(--cream);
  background: var(--paper);
  box-shadow: 0 24px 64px rgba(4, 24, 43, 0.42);
  padding: clamp(18px, 3vw, 26px);
  text-align: center;
}

.completion-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.completion-close:hover,
.completion-close:focus-visible {
  border-color: var(--navy);
  background: var(--cream);
}

.completion-checkmark {
  width: min(42vw, 176px);
  justify-self: center;
  margin: -8px auto -6px;
  filter: drop-shadow(0 10px 18px rgba(102, 71, 0, 0.28));
}

.completion-eyebrow {
  margin: 0;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.completion-card h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 7vw, 3.75rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.completion-card p:not(.completion-eyebrow) {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
}

.completion-date {
  justify-self: center;
  border-top: 1px solid rgba(10, 49, 97, 0.2);
  border-bottom: 1px solid rgba(10, 49, 97, 0.2);
  padding: 5px 10px;
  color: var(--red);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.completion-primary-actions,
.completion-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}

.completion-return,
.completion-next-round,
.completion-cancel,
.completion-start-next-round {
  min-height: 36px;
  border: 1.5px solid var(--navy);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  text-transform: uppercase;
}

.completion-return,
.completion-cancel {
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
}

.completion-next-round {
  background: var(--navy);
  color: var(--paper);
  cursor: pointer;
}

.completion-return:hover,
.completion-return:focus-visible,
.completion-cancel:hover,
.completion-cancel:focus-visible {
  background: var(--cream);
}

.completion-next-round:hover,
.completion-next-round:focus-visible {
  background: var(--red);
}

.completion-next-info {
  display: grid;
  gap: 5px;
  margin-top: 4px;
  border: 1.5px solid rgba(10, 49, 97, 0.24);
  background: rgba(232, 212, 180, 0.36);
  padding: 9px;
}

.completion-next-info[hidden] {
  display: none;
}

.completion-next-info p {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.22;
}

.completion-next-info h3 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.completion-start-next-round {
  background: var(--red);
  color: var(--paper);
  cursor: pointer;
}

.completion-start-next-round:hover,
.completion-start-next-round:focus-visible {
  background: var(--navy);
}

.completion-start-next-round:disabled {
  background: rgba(107, 92, 75, 0.16);
  color: rgba(20, 32, 51, 0.56);
  cursor: wait;
}

.completion-next-error {
  min-height: 1em;
  color: var(--red);
}

.new-road-transition {
  position: fixed;
  z-index: 965;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 22%, rgba(159, 205, 177, 0.16), transparent 34%),
    rgba(4, 24, 43, 0.7);
  color: var(--navy);
  overflow: auto;
}

.new-road-transition[hidden] {
  display: none;
}

.new-road-card {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(100%, 560px);
  max-height: min(94vh, 720px);
  overflow-y: auto;
  border: 2px solid var(--cream);
  background: var(--paper);
  box-shadow: 0 24px 64px rgba(4, 24, 43, 0.42);
  padding: clamp(20px, 3vw, 30px);
}

.new-road-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.new-road-close:hover,
.new-road-close:focus-visible {
  border-color: var(--navy);
  background: var(--cream);
}

.new-road-eyebrow {
  margin: 0;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.new-road-card h2 {
  margin: 0;
  padding-right: 34px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 0.96;
}

.new-road-quote {
  display: grid;
  gap: 8px;
  margin: 0;
  border-left: 4px solid var(--mint);
  padding: 4px 0 4px 16px;
}

.new-road-quote blockquote {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.18rem, 3vw, 1.65rem);
  font-weight: 700;
  line-height: 1.28;
  white-space: pre-line;
}

.new-road-quote figcaption {
  color: var(--red);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.new-road-message {
  margin: 0;
  border: 1.5px solid rgba(10, 49, 97, 0.22);
  background: rgba(232, 212, 180, 0.36);
  color: var(--navy);
  padding: 12px;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.35;
}

.new-road-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.new-road-source,
.new-road-primary {
  min-height: 36px;
  border: 1.5px solid var(--navy);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  text-transform: uppercase;
}

.new-road-source {
  background: var(--paper);
  color: var(--navy);
  text-decoration: none;
}

.new-road-primary {
  background: var(--navy);
  color: var(--paper);
  cursor: pointer;
}

.new-road-source:hover,
.new-road-source:focus-visible {
  background: var(--cream);
}

.new-road-primary:hover,
.new-road-primary:focus-visible {
  background: var(--red);
}

@media (max-width: 520px) {
  .new-road-transition {
    padding: 14px;
  }

  .new-road-actions {
    align-items: stretch;
  }

  .new-road-source,
  .new-road-primary {
    width: 100%;
    text-align: center;
  }
}

.round-transition-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 0;
  width: min(100%, 760px);
  border: 1.5px solid rgba(10, 49, 97, 0.2);
  background: rgba(159, 205, 177, 0.28);
  color: var(--navy);
  padding: 9px 12px;
  text-align: center;
}

.round-transition-status[hidden] {
  display: none;
}

.round-transition-status span {
  font-weight: 800;
}

.round-transition-status button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.round-transition-status button:hover,
.round-transition-status button:focus-visible {
  border-color: var(--navy);
  background: var(--paper);
}

.completion-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.completion-effects canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.filter-button,
.quest-link {
  min-height: 44px;
  border: 2px solid var(--navy);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.filter-button {
  padding: 9px 13px;
  background: transparent;
  color: var(--navy);
}

.filter-button:hover,
.filter-button:focus-visible,
.filter-button.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.club-menu {
  position: relative;
  z-index: 10;
  justify-self: end;
  width: min(100%, 360px);
}

.club-menu-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  border: 2px solid var(--navy);
  background: var(--paper);
  color: var(--navy);
  font: inherit;
  font-weight: 900;
  padding: 9px 12px;
  cursor: pointer;
}

.club-menu-button::after {
  content: "v";
  font-size: 0.82rem;
  font-weight: 900;
}

.club-menu-list {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  display: grid;
  gap: 0;
  width: min(88vw, 420px);
  border: 2px solid var(--navy);
  background: var(--paper);
  box-shadow: 0 14px 30px rgba(10, 49, 97, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.club-menu:hover .club-menu-list,
.club-menu:focus-within .club-menu-list {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.club-menu-list a {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  color: var(--ink);
  text-decoration: none;
}

.club-menu-list a + a {
  border-top: 1.5px solid var(--line);
}

.club-menu-list strong {
  color: var(--navy);
  font-weight: 900;
}

.club-menu-list span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}

.club-menu-list a:hover,
.club-menu-list a:focus-visible {
  background: var(--cream);
}

.club-menu-accessibility {
  border-top: 1.5px solid var(--line);
  padding: 11px 12px;
}

.easy-read-toggle {
  display: flex;
  gap: 8px;
  align-items: start;
  color: var(--ink);
  cursor: pointer;
}

.easy-read-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--navy);
}

.easy-read-toggle span {
  display: grid;
  gap: 2px;
}

.easy-read-toggle small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}

.unlock-form {
  display: grid;
  gap: 6px;
}

.prototype-unlock-form {
  display: none;
}

.feature-card {
  border: 1.5px solid var(--line);
  background: rgba(255, 249, 239, 0.82);
}

.app-section {
  margin-top: 16px;
}

.unlock-form label {
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.unlock-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 6px;
}

.unlock-form input {
  min-height: 36px;
  width: 100%;
  border: 2px solid var(--navy);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 9px;
}

.unlock-submit-button {
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.unlock-submit-button:hover,
.unlock-submit-button:focus-visible {
  background: var(--red);
  border-color: var(--red);
}

.unlock-form input:focus-visible {
  outline: 3px solid rgba(10, 49, 97, 0.25);
  outline-offset: 2px;
}

.unlock-form.is-unlocked input,
.unlock-form.is-unlocked > div .unlock-submit-button {
  display: none;
}

.unlock-form.is-unlocked .test-reset-button {
  display: inline-flex;
}

.test-reset-button {
  min-height: 32px;
  justify-content: space-between;
  align-items: center;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  padding: 5px 9px;
}

.test-reset-button::after {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--cream);
  box-shadow: inset 0 0 0 2px rgba(10, 49, 97, 0.28);
  content: "";
}

.unlock-form.is-unlocked .test-reset-button::after {
  background: var(--navy);
  box-shadow: inset 0 0 0 4px var(--cream);
}

.test-reset-button:hover,
.test-reset-button:focus-visible {
  color: var(--navy);
}

.unlock-status {
  min-height: 1.25em;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 800;
}

.game-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 16px 0 0;
  border: 2px solid rgba(191, 13, 62, 0.58);
  background: var(--paper);
}

.game-panel-section {
  min-width: 0;
  padding: 14px 16px;
}

.game-panel-section + .game-panel-section {
  border-left: 1.5px solid rgba(191, 13, 62, 0.28);
}

.plate-game {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.game-panel h2 {
  margin-bottom: 5px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  line-height: 1.1;
}

.game-panel p {
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.42;
}

.game-panel p:last-child {
  margin-bottom: 0;
}

.clear-plates-button {
  min-height: 40px;
  padding: 8px 12px;
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-size: 0.82rem;
  white-space: normal;
}

.clear-plates-button:hover,
.clear-plates-button:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.plate-game-actions {
  display: grid;
  gap: 7px;
  justify-items: stretch;
  max-width: 330px;
}

.games-page .map-intro {
  align-items: end;
}

.games-hub {
  display: grid;
  gap: 14px;
}

.play-mode-panel {
  display: grid;
  grid-template-columns: max-content minmax(190px, 260px) minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  border: 2px solid var(--navy);
  background:
    linear-gradient(90deg, rgba(232, 212, 180, 0.72), rgba(255, 249, 239, 0.9)),
    var(--paper);
  padding: 12px 14px;
}

.play-mode-panel label {
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.play-mode-panel select {
  min-height: 38px;
  width: 100%;
  border: 2px solid var(--navy);
  background: var(--paper);
  color: var(--navy);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  padding: 7px 10px;
}

.play-mode-panel p {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
}

.games-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.game-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 8px;
  aspect-ratio: 1 / 1;
  min-height: max-content;
  border: 1.5px solid var(--line);
  background: rgba(255, 249, 239, 0.82);
  padding: 14px;
}

.game-tile::before,
.game-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.game-tile::before {
  z-index: -2;
  background: var(--game-bg, none) center / cover no-repeat;
  opacity: var(--game-bg-opacity, 0);
}

.game-tile::after {
  z-index: -1;
  background:
    var(--game-wash, linear-gradient(135deg, rgba(255, 249, 239, 0.94), rgba(232, 212, 180, 0.86))),
    linear-gradient(135deg, rgba(255, 249, 239, 0.94), rgba(232, 212, 180, 0.86)),
    rgba(255, 249, 239, 0.84);
}

.game-tile-feature {
  border: 2px solid var(--navy);
}

.game-tile-feature::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-safari {
  --game-bg: url("assets/games/american-safari.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-plates {
  --game-bg: url("assets/games/license-plate-game-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-plates::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-there-yet {
  /* Keep this game's actual entry link reachable when its copy wraps. */
  aspect-ratio: auto;
  --game-bg: url("assets/games/are-we-there-yet-background.png");
  --game-bg-opacity: 0.56;
}

.game-tile-there-yet::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-history {
  --game-bg: url("assets/games/memory-match-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-history::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-puzzles {
  --game-bg: url("assets/games/word-search-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-puzzles::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-crossword {
  --game-bg: url("assets/games/crossword-crossroads-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-crossword::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-sudoku {
  --game-bg: url("assets/games/sudoku-stop-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-sudoku::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-postcard {
  --game-bg: url("assets/games/postcard-stories-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-postcard::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-coloring {
  --game-bg: url("assets/games/coloring-challenges-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-coloring::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-solitaire {
  --game-bg: url("assets/games/sojourner-solitaire-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-solitaire::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-bingo {
  --game-bg: url("assets/games/window-bingo-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-bingo::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile-quiz {
  --game-bg: url("assets/games/americana-trivia-background.jpg");
  --game-bg-opacity: 0.56;
}

.game-tile-quiz::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.78), rgba(232, 212, 180, 0.58)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.08), rgba(191, 13, 62, 0.05));
}

.game-tile h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.05;
}

.game-tile p:not(.eyebrow) {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.42;
}

.game-tile-locked {
  border-color: rgba(10, 49, 97, 0.4);
}

.game-tile-locked::after {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.88), rgba(232, 212, 180, 0.72)),
    linear-gradient(90deg, rgba(10, 49, 97, 0.1), rgba(191, 13, 62, 0.04));
}

.game-access-badge {
  position: relative;
  z-index: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1.5px solid var(--navy);
  background: rgba(255, 249, 239, 0.92);
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 4px 7px;
  text-transform: uppercase;
}

.game-access-note {
  position: relative;
  z-index: 1;
  margin-top: 0;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.25;
}

.club-access-panel[hidden] {
  display: none;
}

.club-access-panel {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 32, 51, 0.46);
}

.club-access-card {
  display: grid;
  gap: 10px;
  width: min(100%, 360px);
  border: 2px solid var(--navy);
  background: var(--paper);
  color: var(--ink);
  padding: 18px;
  box-shadow: 0 18px 48px rgba(20, 32, 51, 0.24);
}

.club-access-card h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.08;
}

.club-access-card p:not(.eyebrow) {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.4;
}

/* License Plate Collection Clubhouse Wall */
.plate-wall-page {
  margin: 0;
  background: #061d35;
}

.plate-clubhouse {
  --wood-dark: #3b2112;
  --wood-mid: #6a3a1d;
  --wood-light: #9b6234;
  --rail-navy: #062744;
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  min-height: 100vh;
  color: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.plate-clubhouse-nav {
  position: sticky;
  top: 0;
  align-self: start;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  min-height: 100vh;
  padding: 22px 18px;
  background:
    linear-gradient(180deg, rgba(5, 32, 57, 0.96), rgba(4, 24, 43, 0.98)),
    var(--rail-navy);
  box-shadow: 10px 0 24px rgba(0, 0, 0, 0.26);
}

.plate-clubhouse-logo img {
  display: block;
  width: min(100%, 175px);
  margin: 0 auto;
}

.plate-rail-links {
  display: grid;
  gap: 5px;
}

.plate-rail-links a {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 13px 8px 13px 34px;
  border-top: 1px solid rgba(232, 212, 180, 0.16);
  color: #fff9ef;
  text-decoration: none;
}

.plate-rail-links a::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  clip-path: polygon(50% 0, 60% 36%, 100% 45%, 63% 58%, 50% 100%, 37% 58%, 0 45%, 40% 36%);
  opacity: 0.86;
}

.plate-rail-links a.is-locked::after {
  content: "Locked";
  align-self: start;
  justify-self: end;
  grid-column: 1;
  grid-row: 1;
  border: 1px solid rgba(232, 212, 180, 0.7);
  border-radius: 999px;
  color: #e8d4b4;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 2px 6px;
  text-transform: uppercase;
}

.plate-rail-links a[aria-current="page"] {
  background: rgba(255, 249, 239, 0.1);
}

.plate-rail-links strong {
  color: #fff9ef;
  font-size: 0.95rem;
  line-height: 1.2;
}

.plate-rail-links span {
  color: rgba(255, 249, 239, 0.74);
  font-size: 0.78rem;
  line-height: 1.35;
}

.plate-easy-read {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid rgba(232, 212, 180, 0.16);
  padding-top: 16px;
  color: #fff9ef;
  cursor: pointer;
}

.plate-easy-read input {
  width: 22px;
  height: 22px;
  accent-color: #e8d4b4;
}

.plate-room {
  --clubhouse-top-space: clamp(184px, 22dvh, 210px);
  position: relative;
  overflow: visible;
  min-height: 100dvh;
  padding: clamp(8px, 1.3vw, 18px);
  background: #061d35;
}

.plate-room::before {
  display: none;
}

.plate-room::after {
  display: none;
}

.plate-room-header,
.plate-count-sign,
.plate-room-scene,
.plate-add-button,
.plate-clear-button {
  position: relative;
  z-index: 1;
}

.plate-room-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}

#license-plate-collection .plate-wall-add-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 560px;
  min-width: 0;
  grid-column: 1 / -1;
}

#license-plate-collection .plate-wall-add-copy {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #e8d4b4;
  font-size: 0.875rem;
  line-height: 1.5;
}

.plate-road-sign {
  display: none;
  gap: 15px;
  align-items: center;
  width: min(720px, 100%);
  border: 5px solid #2b170c;
  background:
    linear-gradient(90deg, rgba(191, 13, 62, 0.14), transparent 36%),
    linear-gradient(180deg, #e8d4b4, #c99b5d);
  color: #1c140d;
  padding: 12px 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.plate-route-marker {
  width: 76px;
  margin: 0;
  border: 3px solid #0a3161;
  border-radius: 10px 10px 18px 18px;
  background: #0a3161;
  color: #fff9ef;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.05;
  padding: 8px 6px;
  text-align: center;
  text-transform: uppercase;
}

.plate-road-sign h1 {
  margin: 0;
  color: #1c140d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 4.4rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.92;
  text-transform: uppercase;
}

.plate-road-sign p:not(.plate-route-marker) {
  margin: 4px 0 0;
  color: #4a210f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.9rem, 1.5vw, 1.18rem);
  font-style: italic;
  font-weight: 800;
}

.plate-room-controls {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.plate-room-controls label {
  color: #fff9ef;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.plate-room-controls select,
.plate-search {
  min-height: 36px;
  border: 2px solid #e8d4b4;
  background: #0a3161;
  color: #fff9ef;
  font: inherit;
  font-weight: 900;
  padding: 6px 10px;
}

.plate-room-status {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plate-room-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plate-count-sign {
  display: inline-flex;
  margin: 0;
  border: 3px solid #4a210f;
  background: #e8d4b4;
  color: #3a1808;
  font-size: 0.98rem;
  font-weight: 900;
  padding: 6px 13px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.plate-clear-button {
  min-height: 36px;
  border: 2px solid rgba(232, 212, 180, 0.82);
  background: rgba(6, 29, 53, 0.84);
  color: #fff9ef;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 950;
  padding: 6px 10px;
  text-transform: uppercase;
  cursor: pointer;
}

.plate-clear-button[hidden] {
  display: none;
}

.plate-layout-editor[hidden],
.background-calibration-editor[hidden] {
  display: none;
}

.plate-layout-editor,
.background-calibration-editor {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  border: 2px solid #f4c542;
  background: rgba(6, 29, 53, 0.94);
  color: #fff9ef;
  padding: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.plate-layout-editor header,
.background-calibration-editor header,
.plate-editor-actions,
.background-calibration-actions,
.plate-editor-fields,
.background-calibration-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.plate-layout-editor header,
.background-calibration-editor header {
  justify-content: space-between;
}

.plate-layout-editor h2,
.plate-layout-editor p,
.background-calibration-editor h2,
.background-calibration-editor p {
  margin: 0;
}

.plate-layout-editor h2,
.background-calibration-editor h2 {
  color: #f4c542;
  font-size: 0.95rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plate-layout-editor p,
.plate-editor-status,
.background-calibration-editor p,
.background-calibration-status {
  font-size: 0.78rem;
  font-weight: 800;
}

.plate-editor-actions button,
.background-calibration-actions button {
  min-height: 36px;
  border: 2px solid #f4c542;
  background: #f4c542;
  color: #061d35;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 950;
  padding: 7px 10px;
  text-transform: uppercase;
  cursor: pointer;
}

.plate-editor-fields label,
.background-calibration-fields label {
  display: grid;
  gap: 3px;
  min-width: 78px;
  color: rgba(255, 249, 239, 0.78);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.plate-editor-fields output,
.plate-editor-fields input,
.background-calibration-fields output,
.background-calibration-fields input {
  min-height: 34px;
  border: 1px solid rgba(244, 197, 66, 0.72);
  background: #fff9ef;
  color: #061d35;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  padding: 5px 7px;
}

.plate-editor-fields output,
.background-calibration-fields output {
  display: inline-grid;
  align-items: center;
}

.plate-editor-fields input,
.background-calibration-fields input {
  width: 86px;
}

.plate-editor-status,
.background-calibration-status {
  margin: 0;
  color: #fff9ef;
}

.plate-layout-export,
.background-calibration-export {
  width: 100%;
  min-height: 140px;
  border: 1px solid rgba(244, 197, 66, 0.72);
  background: #fff9ef;
  color: #061d35;
  font: 0.78rem ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  padding: 8px;
}

.plate-room-scene {
  position: relative;
  width: min(100%, 1536px, calc((100dvh - var(--clubhouse-top-space)) * 1.5));
  margin: 0 auto;
}

.plate-room-artboard {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  container-type: inline-size;
  background: #2d190e;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.plate-approved-background {
  --clubhouse-bg-scale: 1;
  --clubhouse-bg-x: 0%;
  --clubhouse-bg-y: 0%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(var(--clubhouse-bg-x), var(--clubhouse-bg-y)) scale(var(--clubhouse-bg-scale));
  transform-origin: center center;
}

.plate-fireplace-overlay {
  --firebox-x: 65.20%;
  --firebox-y: 58.60%;
  --firebox-width: 18.7%;
  --firebox-height: 16.2%;
  --flame-opacity: 0.72;
  --glow-intensity: 0.58;
  position: absolute;
  left: var(--firebox-x);
  top: var(--firebox-y);
  z-index: 1;
  width: var(--firebox-width);
  height: var(--firebox-height);
  overflow: hidden;
  pointer-events: none;
  transform: skewX(-1.5deg);
  transform-origin: center bottom;
}

.plate-fireplace-glow {
  position: absolute;
  inset: -12% 2% -2%;
  background:
    radial-gradient(ellipse at 52% 74%, rgba(255, 223, 143, 0.36), rgba(247, 128, 24, 0.2) 34%, transparent 66%),
    radial-gradient(ellipse at 50% 92%, rgba(211, 65, 18, 0.22), transparent 58%);
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: calc(var(--glow-intensity) * 0.62);
  animation: plateFireGlow 5.6s ease-in-out infinite;
}

.plate-fireplace-flames {
  position: absolute;
  left: 18%;
  bottom: 0;
  display: block;
  width: 58%;
  height: 86%;
  filter: blur(0.25px) saturate(1.08);
  mix-blend-mode: screen;
  object-fit: contain;
  opacity: var(--flame-opacity);
  transform: translate(10%, -10%) rotate(10deg);
  transform-origin: center bottom;
}

.plate-hanger-layer {
  position: absolute;
  inset: 0;
}

.plate-wall-plate {
  position: absolute;
  z-index: 2;
  left: var(--plate-x);
  top: var(--plate-y);
  transform: translate(-50%, -50%) rotate(var(--plate-rotation)) scale(var(--plate-scale));
  transform-origin: center;
}

.plate-layout-editor-active .plate-wall-plate {
  cursor: grab;
  touch-action: none;
}

.plate-layout-editor-active .plate-wall-plate:active {
  cursor: grabbing;
}

.plate-wall-plate.is-editor-selected {
  outline: 3px solid #f4c542;
  outline-offset: 3px;
  z-index: 5;
}

@keyframes plateFireGlow {
  0%,
  100% {
    opacity: calc(var(--glow-intensity) * 0.5);
    transform: scale(0.99);
  }

  29% {
    opacity: calc(var(--glow-intensity) * 0.68);
    transform: scale(1.015);
  }

  63% {
    opacity: calc(var(--glow-intensity) * 0.57);
    transform: scale(1.004);
  }

  82% {
    opacity: calc(var(--glow-intensity) * 0.73);
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plate-fireplace-glow {
    animation: none;
  }

  .plate-fireplace-glow {
    opacity: 0;
  }

  .plate-fireplace-flames {
    display: none;
  }
}

.collection-plate {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 86px;
  min-height: 46px;
  border: 2px solid #1f2630;
  border-radius: 7px;
  background: var(--plate-fill, #f8f8f2);
  color: var(--plate-text, #0a3161);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.36),
    0 7px 10px rgba(0, 0, 0, 0.32);
  font: inherit;
  padding: 0 4px 4px;
  text-align: center;
}

.plate-wall-plate.collection-plate {
  width: clamp(42px, 5.6cqw, 86px);
  min-height: clamp(24px, 3cqw, 46px);
  border-radius: clamp(4px, 0.45cqw, 7px);
  padding: 0 clamp(2px, 0.26cqw, 4px) clamp(2px, 0.26cqw, 4px);
}

.plate-wall-plate .collection-plate-stripe {
  height: clamp(4px, 0.46cqw, 7px);
  margin-bottom: clamp(1px, 0.13cqw, 2px);
}

.plate-wall-plate .collection-plate-code {
  font-size: clamp(0.6rem, 1.08cqw, 1.02rem);
}

.plate-wall-plate .collection-plate-motif,
.plate-wall-plate .collection-plate-state {
  font-size: clamp(0.28rem, 0.5cqw, 0.46rem);
}

.collection-plate-stripe {
  display: block;
  height: 7px;
  margin: 0 -4px 2px;
  border-radius: 5px 5px 0 0;
  background: var(--plate-accent, #0a3161);
}

.collection-plate-code {
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1;
}

.collection-plate-motif,
.collection-plate-state {
  overflow: hidden;
  font-size: 0.46rem;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.collection-plate.has-plate-art {
  display: grid;
  align-items: center;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.collection-plate-art {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.32));
}

.plate-picker-item.collection-plate.has-plate-art {
  width: 100%;
  min-width: 0;
  grid-template-rows: auto 24px;
  gap: 6px;
  justify-items: center;
  align-content: start;
  min-height: 0;
}

.plate-picker-art-slot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px;
}

.plate-picker-art-slot .collection-plate-art {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

.plate-add-button {
  position: relative;
  z-index: 4;
  display: block;
  width: clamp(160px, 16vw, 206px);
  max-width: 100%;
  flex-shrink: 0;
  aspect-ratio: 2 / 1;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  margin: 0;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.plate-add-button img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  transform: scale(0.78);
}

.plate-add-button:hover,
.plate-add-button:focus-visible {
  filter: drop-shadow(0 13px 18px rgba(0, 0, 0, 0.32));
  transform: translateY(-1px);
}

.plate-add-button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.plate-add-button:active {
  transform: translateY(0) scale(0.99);
}

.plate-modal[hidden] {
  display: none;
}

.plate-modal {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 29, 53, 0.72);
}

.plate-modal-card {
  display: grid;
  gap: 14px;
  width: min(920px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 3px solid #0a3161;
  background: #fff9ef;
  color: var(--ink);
  padding: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

.plate-modal-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.plate-modal-header h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  text-transform: uppercase;
}

.plate-modal-close,
.plate-remove-button {
  min-height: 42px;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 900;
  padding: 8px 12px;
  cursor: pointer;
}

.plate-search-label {
  color: var(--navy);
  font-weight: 900;
}

.plate-search {
  width: min(100%, 420px);
  background: #fff9ef;
  color: var(--navy);
}

.plate-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.plate-picker-item {
  width: 100%;
  min-height: 96px;
  cursor: pointer;
}

.plate-picker-item:disabled {
  cursor: default;
  opacity: 0.72;
}

.plate-picker-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin: 0;
  color: var(--navy);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.plate-detail-card {
  width: min(440px, 100%);
}

.plate-clear-card {
  width: min(520px, 100%);
}

.plate-clear-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.plate-keep-button,
.plate-confirm-clear-button {
  min-height: 42px;
  border: 2px solid var(--navy);
  font: inherit;
  font-weight: 900;
  padding: 8px 12px;
  cursor: pointer;
}

.plate-keep-button {
  background: #fff9ef;
  color: var(--navy);
}

.plate-confirm-clear-button {
  border-color: #bf0d3e;
  background: #bf0d3e;
  color: #fff;
}

.collection-plate-detail {
  width: min(100%, 210px);
  min-height: 116px;
  margin: 0 auto;
}

.collection-plate-detail .collection-plate-code {
  font-size: 2rem;
}

.collection-plate-detail .collection-plate-motif,
.collection-plate-detail .collection-plate-state {
  font-size: 0.72rem;
}

.plate-detail-date {
  color: var(--ink);
  font-weight: 800;
}

.plate-remove-button {
  background: #bf0d3e;
  border-color: #bf0d3e;
}

@media (max-width: 980px) {
  .plate-clubhouse {
    grid-template-columns: 1fr;
  }

  .plate-clubhouse-nav {
    position: relative;
    min-height: auto;
    grid-template-rows: auto auto auto;
  }

  .plate-clubhouse-logo img {
    width: 138px;
  }

  .plate-rail-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plate-room-header {
    display: flex;
    align-items: flex-start;
  }

  .plate-room-scene {
    width: min(100%, 1536px);
  }

}

@media (max-width: 640px) {
  .plate-room {
    padding: 12px;
  }

  .plate-room-header,
  .plate-room-status {
    display: grid;
    justify-content: stretch;
  }

  .plate-room-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .plate-room-status {
    grid-column: 1 / -1;
  }

  .plate-room-header .plate-add-button {
    width: min(100%, 160px);
  }

  .plate-room-controls {
    min-width: 0;
  }

  .plate-room-controls,
  .plate-clear-button {
    width: 100%;
  }

  .plate-rail-links {
    grid-template-columns: 1fr;
  }

  .plate-road-sign {
    align-items: start;
    display: grid;
    padding: 12px;
  }

  .plate-route-marker {
    width: 92px;
  }

  .collection-plate {
    width: 76px;
  }

  .plate-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plate-wall-plate.collection-plate {
    width: clamp(26px, 5.6cqw, 76px);
    min-height: clamp(16px, 3cqw, 41px);
  }
}

.license-plate-page {
  padding-bottom: 28px;
}

.there-yet-page {
  padding-bottom: 28px;
}

.there-yet-hub {
  display: grid;
  gap: 14px;
}

.there-yet-controls {
  grid-template-columns: max-content minmax(190px, 260px) minmax(0, 1fr);
}

.there-yet-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 470px) minmax(260px, 360px);
  gap: 16px;
  align-items: start;
  justify-content: center;
}

.there-yet-roadbook-shell {
  display: grid;
  grid-template-rows: auto;
  gap: 0;
  align-items: start;
  justify-items: center;
}

.there-yet-roadbook {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 2 / 3;
  min-height: 0;
  height: auto;
  perspective: 1500px;
  perspective-origin: 50% 10%;
  overflow: visible;
}

.route-guide-frame {
  position: relative;
}

.there-yet-roadbook::before,
.there-yet-roadbook::after {
  position: absolute;
  right: 10px;
  bottom: -8px;
  left: 10px;
  height: 18px;
  border: 2px solid rgba(10, 49, 97, 0.14);
  background: #ead4aa;
  content: "";
  z-index: 0;
}

.there-yet-roadbook::after {
  right: 18px;
  bottom: -14px;
  left: 18px;
  height: 14px;
  opacity: 0.72;
}

.there-yet-page-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow:
    0 18px 36px rgba(76, 58, 34, 0.2);
  backface-visibility: visible;
  transform-origin: top center;
  transform-style: preserve-3d;
  z-index: 2;
}

.route-guide-art,
.route-guide-overlay {
  position: absolute;
  inset: 0;
}

.route-guide-art {
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.route-guide-overlay {
  z-index: 1;
  pointer-events: none;
}

.there-yet-page-face::before {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(76, 58, 34, 0.16));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 4;
}

.there-yet-page-face::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 74% 78%, rgba(255, 255, 255, 0.36), transparent 28%),
    repeating-linear-gradient(0deg, rgba(76, 58, 34, 0.035) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #f6e4c1, #e7cfa4);
  content: "";
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.there-yet-page-preview {
  z-index: 1;
  transform: translateY(10px) scale(0.985);
  opacity: 0;
  pointer-events: none;
}

.there-yet-roadbook.is-turning-forward .there-yet-page-preview {
  opacity: 1;
}

.there-yet-roadbook.is-turning-forward .there-yet-page-face:not(.there-yet-page-preview)::before,
.there-yet-roadbook.is-turning-forward .there-yet-page-face:not(.there-yet-page-preview)::after {
  opacity: 1;
}

.there-yet-roadbook.is-turning-forward::before {
  box-shadow: 0 -20px 30px rgba(76, 58, 34, 0.18);
}

.there-yet-roadbook.is-turning-back .there-yet-page-preview {
  z-index: 3;
  opacity: 1;
  transform-origin: top center;
}

.there-yet-page-face.is-flipping-up {
  animation: there-yet-page-flip-up 860ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

.there-yet-page-face.is-flipping-up .there-yet-page-heading,
.there-yet-page-face.is-flipping-up .there-yet-map-stage,
.there-yet-page-face.is-flipping-up .there-yet-page-turn {
  animation: there-yet-front-ink-fade 860ms ease both;
}

.there-yet-page-face.is-flipping-up::after {
  animation: there-yet-paper-back 860ms ease both;
}

.there-yet-page-preview.is-settling-down {
  animation: there-yet-page-settle-down 860ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

@keyframes there-yet-page-flip-up {
  0% {
    filter: brightness(1);
    transform: rotateX(0deg) translateZ(0);
  }

  28% {
    filter: brightness(1.03);
    transform: rotateX(34deg) translateZ(34px);
    box-shadow:
      0 30px 38px rgba(76, 58, 34, 0.2),
      inset 0 -18px 24px rgba(76, 58, 34, 0.12);
  }

  58% {
    filter: brightness(0.94);
    transform: rotateX(112deg) translateZ(46px);
    box-shadow:
      0 40px 48px rgba(76, 58, 34, 0.26),
      inset 0 -28px 28px rgba(76, 58, 34, 0.2);
  }

  100% {
    filter: brightness(0.88);
    transform: rotateX(178deg) translateZ(8px);
    box-shadow:
      0 8px 18px rgba(76, 58, 34, 0.1),
      inset 0 -18px 26px rgba(76, 58, 34, 0.22);
  }
}

@keyframes there-yet-page-settle-down {
  0% {
    filter: brightness(0.9);
    transform: rotateX(178deg) translateZ(8px);
  }

  42% {
    filter: brightness(0.96);
    transform: rotateX(92deg) translateZ(44px);
    box-shadow: 0 42px 50px rgba(76, 58, 34, 0.25);
  }

  74% {
    filter: brightness(1.03);
    transform: rotateX(26deg) translateZ(28px);
    box-shadow: 0 26px 34px rgba(76, 58, 34, 0.2);
  }

  100% {
    filter: brightness(1);
    transform: rotateX(0deg) translateZ(0);
    box-shadow:
      0 18px 36px rgba(76, 58, 34, 0.2),
      inset 10px 0 0 rgba(191, 13, 62, 0.09);
  }
}

@keyframes there-yet-front-ink-fade {
  0%,
  46% {
    opacity: 1;
  }

  58%,
  100% {
    opacity: 0;
  }
}

@keyframes there-yet-paper-back {
  0%,
  36% {
    opacity: 0;
  }

  52%,
  100% {
    opacity: 1;
  }
}

.there-yet-page-turn {
  position: absolute;
  z-index: 40;
  display: grid;
  place-items: center;
  width: clamp(58px, 18%, 78px);
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  color: var(--navy);
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 8px 10px rgba(76, 58, 34, 0.22));
  transform-style: preserve-3d;
  transition:
    filter 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.there-yet-page-turn::before {
  content: "";
  display: none;
}

.there-yet-page-turn span {
  display: none;
}

.there-yet-page-turn-next {
  /* Keep the approved artwork inside the paper; transparent corners pass map input through.
     These masks follow the assets' visible alpha bounds, independent of route geometry. */
  right: 2.75%;
  bottom: 2.75%;
  background-image: url("assets/games/triptik/triptik-curl-bottom-right.png");
  clip-path: polygon(100% 20%, 100% 100%, 20% 100%);
  transform-origin: right bottom;
}

.there-yet-page-turn-next:hover,
.there-yet-page-turn-next:focus-visible,
.there-yet-page-turn-next:active {
  filter: drop-shadow(-10px -12px 14px rgba(76, 58, 34, 0.3));
  transform: translate(-3px, -4px) rotate(-2deg);
}

.there-yet-page-turn-back {
  top: 2.75%;
  left: 2.75%;
  background-image: url("assets/games/triptik/triptik-curl-top-left.png");
  clip-path: polygon(0 0, 100% 0, 100% 1%, 1% 100%, 0 100%);
  opacity: 0.9;
  transform-origin: left top;
}

.there-yet-page-turn-back:hover,
.there-yet-page-turn-back:focus-visible,
.there-yet-page-turn-back:active {
  filter: drop-shadow(10px 12px 14px rgba(76, 58, 34, 0.28));
  transform: translate(3px, 4px) rotate(2deg);
}

.there-yet-page-turn:focus-visible {
  /* An external outline would be clipped by the artwork-shaped hit area. */
  outline: none;
  box-shadow: inset 0 0 0 3px #96c6b3;
  background-color: rgba(150, 198, 179, 0.45);
}

.there-yet-page-turn:disabled {
  cursor: not-allowed;
  opacity: 0.18;
  transform: none;
}

.there-yet-page-turn[hidden] {
  display: none;
}

.there-yet-layout:not([data-route-inactive]) .there-yet-page-turn:not([hidden]):not(:disabled) {
  animation: there-yet-corner-glow 3s ease-in-out infinite alternate;
}

@keyframes there-yet-corner-glow {
  from { filter: drop-shadow(0 0 3px rgba(201, 148, 55, 0.5)) brightness(1.04); }
  to { filter: drop-shadow(0 0 9px rgba(247, 214, 106, 0.9)) brightness(1.18); }
}

.there-yet-page-turn-help {
  margin: 10px 0 0;
  max-width: 34ch;
  color: var(--cream, #e8d4b4);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

.there-yet-page-turn-help[hidden] { display: none; }

.there-yet-route-progress-summary p {
  transition: color 300ms ease, text-shadow 300ms ease;
}

.there-yet-route-progress-summary.is-progress-changing p {
  color: #98651d;
  text-shadow: 0 0 5px rgba(247, 214, 106, 0.55);
}

.there-yet-sighting-marker {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
  .there-yet-layout:not([data-route-inactive]) .there-yet-page-turn:not([hidden]):not(:disabled) {
    animation: none;
    filter: drop-shadow(0 0 6px rgba(201, 148, 55, 0.65));
  }
  .there-yet-route-progress-summary p { transition: none; }
  .there-yet-page-turn {
    transition: none;
  }

  .there-yet-page-turn:hover,
  .there-yet-page-turn:focus-visible,
  .there-yet-page-turn:active {
    transform: none;
  }
}

.there-yet-page-heading {
  position: absolute;
  z-index: 30;
  top: 1.25%;
  right: 26%;
  left: 15.5%;
  display: grid;
  align-content: start;
  gap: 1px;
  border-bottom: 0;
  padding: 0;
  background: radial-gradient(ellipse at center, rgba(255, 249, 239, 0.9), rgba(255, 249, 239, 0.54) 68%, transparent 100%);
  text-align: left;
  pointer-events: none;
}

.there-yet-page-heading .eyebrow {
  margin: 0;
  color: rgba(191, 13, 62, 0.86);
  max-width: 100%;
  overflow: hidden;
  font-size: 0.56rem;
  letter-spacing: 0;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.there-yet-page-heading > p:not(.eyebrow) {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  color: rgba(10, 49, 97, 0.86);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.there-yet-route-progress-summary {
  display: grid;
  gap: 0;
  margin-top: 0;
}

.there-yet-route-progress-summary p {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--navy);
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.there-yet-map-stage {
  position: absolute;
  z-index: 10;
  inset: 12.1% 5.25% 3.75%;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  pointer-events: auto;
}

.there-yet-map-stage.is-highlighter {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M19 3 28 12 11 29 2 30 3 21Z' fill='%23f7d66a' stroke='%230a3161' stroke-width='2'/%3E%3Cpath d='M4 22 10 28' stroke='%230a3161' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 4 28, crosshair;
}

.there-yet-map-stage.is-draw {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M24 3 29 8 9 28 3 30 5 24Z' fill='%23f6e5c4' stroke='%230a3161' stroke-width='2'/%3E%3Cpath d='M21 6 26 11' stroke='%23c41245' stroke-width='2'/%3E%3Cpath d='M5 24 9 28' stroke='%230a3161' stroke-width='2'/%3E%3C/svg%3E") 5 27, crosshair;
}

.there-yet-map-stage.is-eraser {
  cursor: none;
}

.there-yet-map-stage.is-stamp {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M11 3h10l2 9H9Z' fill='%23f6e5c4' stroke='%230a3161' stroke-width='2'/%3E%3Cpath d='M7 13h18v8H7Z' fill='%230a3161'/%3E%3Cpath d='M5 22h22v6H5Z' fill='%23fff9ef' stroke='%23c41245' stroke-width='2'/%3E%3C/svg%3E") 16 25, pointer;
}

.there-yet-map-stage.is-placing-sighting {
  cursor: url("assets/games/spyglass-cursor.png") 18 18, pointer;
}

.there-yet-map-preview {
  pointer-events: none;
}

.there-yet-strip-map,
.route-guide-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.there-yet-map-context {
  pointer-events: none;
}

.there-yet-map-terrain,
.there-yet-map-park,
.there-yet-map-road,
.there-yet-map-water {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.there-yet-map-park {
  fill: rgba(137, 166, 103, 0.045);
  stroke: rgba(100, 133, 85, 0.1);
  stroke-width: 0.9;
  stroke-dasharray: 1 5;
}

.there-yet-map-park.forest {
  fill: rgba(134, 163, 105, 0.065);
}

.there-yet-map-terrain {
  opacity: 0.34;
  stroke-width: 0.95;
}

.there-yet-map-terrain.wetland {
  stroke: rgba(89, 136, 122, 0.2);
  stroke-dasharray: 1 7;
}

.there-yet-map-terrain.prairie {
  stroke: rgba(178, 139, 64, 0.16);
  stroke-dasharray: 18 10;
}

.there-yet-map-terrain.hills {
  stroke: rgba(169, 116, 61, 0.18);
  stroke-dasharray: 20 9;
}

.there-yet-map-terrain.mountains {
  stroke: rgba(144, 95, 50, 0.22);
  stroke-width: 1.2;
  stroke-dasharray: 12 7;
}

.there-yet-map-road-minor {
  stroke: rgba(148, 119, 86, 0.24);
  stroke-width: 1.2;
}

.there-yet-map-road-state {
  stroke: rgba(188, 135, 45, 0.42);
  stroke-width: 1.8;
}

.there-yet-map-road-us {
  stroke: rgba(191, 13, 62, 0.38);
  stroke-width: 2.05;
}

.there-yet-map-road-interstate {
  stroke: rgba(58, 111, 151, 0.4);
  stroke-width: 2.3;
}

.there-yet-map-water {
  stroke: rgba(91, 169, 199, 0.42);
  stroke-width: 1.7;
}

.there-yet-map-town circle {
  fill: rgba(255, 249, 239, 0.62);
  stroke: rgba(10, 49, 97, 0.42);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.there-yet-generated-milestone circle {
  fill: #fff9ef;
  stroke: #0a3161;
  stroke-width: 1.5;
}

.there-yet-generated-milestone text {
  fill: #0a3161;
  font-size: 11px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(255, 249, 239, 0.95);
  stroke-width: 3px;
}

.there-yet-map-town text,
.there-yet-map-label,
.there-yet-map-shield text {
  fill: rgba(10, 49, 97, 0.7);
  font-size: 9px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(255, 249, 239, 0.9);
  stroke-width: 3px;
}

.there-yet-map-label {
  fill: rgba(76, 58, 34, 0.58);
  font-size: 8px;
  font-style: italic;
  letter-spacing: 0.04em;
}

.there-yet-map-label.water-label {
  fill: rgba(48, 127, 160, 0.66);
}

.there-yet-map-shield path,
.there-yet-map-shield circle {
  fill: rgba(255, 249, 239, 0.84);
  stroke: rgba(10, 49, 97, 0.64);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.there-yet-map-shield.interstate path {
  fill: rgba(10, 49, 97, 0.82);
  stroke: rgba(255, 249, 239, 0.9);
}

.there-yet-map-shield.interstate text {
  fill: rgba(255, 249, 239, 0.96);
  stroke: rgba(10, 49, 97, 0.34);
}

.there-yet-map-shield.us path {
  fill: rgba(255, 249, 239, 0.72);
  stroke: rgba(191, 13, 62, 0.42);
}

.there-yet-map-shield.us text {
  fill: rgba(10, 49, 97, 0.54);
}

.there-yet-map-shield.state circle {
  fill: rgba(255, 249, 239, 0.72);
  stroke: rgba(188, 135, 45, 0.46);
}

.there-yet-map-shield.state text {
  fill: rgba(101, 73, 31, 0.58);
}

.there-yet-map-shield text {
  text-anchor: middle;
  stroke-width: 1.8px;
  font-size: 8px;
}

.there-yet-map-compass {
  pointer-events: none;
}

.there-yet-map-compass path {
  fill: rgba(10, 49, 97, 0.82);
  stroke: rgba(255, 249, 239, 0.72);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.there-yet-map-compass circle {
  fill: rgba(255, 249, 239, 0.28);
  stroke: rgba(10, 49, 97, 0.72);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.there-yet-map-compass text {
  fill: rgba(10, 49, 97, 0.82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 900;
  text-anchor: middle;
}

.there-yet-route-shadow,
.there-yet-route-base,
.there-yet-route-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.there-yet-route-shadow {
  stroke: rgba(255, 249, 239, 0.72);
  stroke-width: 13;
}

.there-yet-route-base {
  stroke: rgba(10, 49, 97, 0.9);
  stroke-width: 5.5;
}

.there-yet-route-highlight {
  stroke-width: 18;
  opacity: 0;
  transition: stroke-dashoffset 140ms ease;
}

.there-yet-draw-mark,
.there-yet-active-mark {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.there-yet-draw-mark,
.there-yet-active-mark.there-yet-draw-mark {
  filter: drop-shadow(0 1px 0 rgba(255, 249, 239, 0.35));
}

.there-yet-eraser-preview {
  pointer-events: none;
}

.there-yet-eraser-preview circle {
  fill: rgba(255, 253, 248, 0.28);
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.there-yet-eraser-preview path {
  fill: rgba(255, 253, 248, 0.9);
  stroke: var(--navy);
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.there-yet-checkpoint circle {
  fill: #fffdf8;
  stroke: var(--navy);
  stroke-width: 3;
}

.there-yet-checkpoint.is-reached circle {
  fill: #96c6b3;
}

.there-yet-checkpoint text {
  fill: var(--navy);
  font-size: 13px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(255, 249, 239, 0.8);
  stroke-width: 4px;
}

.there-yet-sighting-marker {
  color: var(--navy);
  cursor: pointer;
  pointer-events: auto;
}

.there-yet-sighting-marker:focus-visible {
  outline: none;
}

.there-yet-sighting-marker:focus-visible .there-yet-spyglass-icon {
  filter: drop-shadow(0 0 4px rgba(150, 198, 179, 0.9));
}

.there-yet-sighting-preview {
  opacity: 0.78;
  pointer-events: none;
}

.there-yet-sighting-cue {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  border: 1.5px dashed rgba(10, 49, 97, 0.42);
  background: rgba(150, 198, 179, 0.18);
  color: var(--navy);
  padding: 8px;
}

.there-yet-sighting-cue span {
  display: grid;
  place-items: center;
}

.there-yet-sighting-cue strong {
  font-size: 0.78rem;
  line-height: 1.2;
}

.there-yet-sighting-flyer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 42px;
  height: 42px;
  transform: translate(var(--sighting-start-x), var(--sighting-start-y)) translate(-50%, -50%);
  color: var(--navy);
  opacity: 0;
  pointer-events: none;
  animation: sighting-fly-to-map 650ms ease-out forwards;
}

.there-yet-sighting-cue .there-yet-spyglass-icon,
.there-yet-sighting-list .there-yet-spyglass-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

@keyframes sighting-fly-to-map {
  0% {
    opacity: 0;
    transform: translate(var(--sighting-start-x), var(--sighting-start-y)) translate(-50%, -50%) scale(0.68) rotate(-12deg);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0.86;
    transform: translate(var(--sighting-end-x), var(--sighting-end-y)) translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .there-yet-sighting-flyer {
    animation: none;
    opacity: 0;
  }
}

.there-yet-stamp-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
}

.there-yet-placed-stamp {
  position: absolute;
  z-index: 2;
  border: 3px double rgba(191, 13, 62, 0.82);
  background: rgba(255, 249, 239, 0.28);
  color: rgba(191, 13, 62, 0.86);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 7px 9px;
  text-transform: uppercase;
  pointer-events: auto;
  cursor: pointer;
  mix-blend-mode: multiply;
}

.there-yet-placed-stamp::after {
  position: absolute;
  inset: 3px;
  border: 1px dashed currentColor;
  opacity: 0.36;
  content: "";
}

.there-yet-placed-stamp.is-construction {
  border-color: rgba(191, 13, 62, 0.96);
  color: var(--red);
  font-size: 0.78rem;
}

.there-yet-tool-tray {
  display: grid;
  gap: 10px;
}

.there-yet-tool-card {
  position: relative;
  display: grid;
  gap: 9px;
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.96), rgba(232, 212, 180, 0.72)),
    var(--paper);
  padding: 13px;
}

.there-yet-tool-card h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1;
}

.there-yet-tool-card p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.4;
}

.there-yet-trip-actions {
  display: grid;
  gap: 8px;
}

.there-yet-trip-actions .game-action-button {
  width: 100%;
}

.there-yet-mark-tools {
  gap: 11px;
}

.there-yet-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.there-yet-mode-button {
  min-height: 42px;
  border: 2px solid var(--navy);
  background: rgba(255, 253, 248, 0.86);
  color: var(--navy);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
}

.there-yet-mode-button[aria-pressed="true"] {
  background: #96c6b3;
  color: var(--ink);
  box-shadow: inset 0 -4px 0 rgba(10, 49, 97, 0.18);
}

.there-yet-color-tools {
  display: grid;
  gap: 8px;
}

.there-yet-color-label {
  color: var(--navy) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}

.there-yet-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.there-yet-color-swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(10, 49, 97, 0.38);
  border-radius: 999px;
  background: var(--swatch-color);
  cursor: pointer;
}

.there-yet-color-swatch span {
  display: none;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 900;
  paint-order: stroke;
  -webkit-text-stroke: 3px rgba(255, 249, 239, 0.72);
}

.there-yet-color-swatch[aria-pressed="true"] {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px #fff9ef, 0 0 0 5px var(--navy);
}

.there-yet-color-swatch[aria-pressed="true"] span {
  display: block;
}

.there-yet-custom-color {
  display: grid;
  grid-template-columns: 1fr 52px;
  gap: 10px;
  align-items: center;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 900;
}

.there-yet-custom-color input {
  width: 52px;
  height: 38px;
  border: 2px solid var(--navy);
  background: var(--paper);
  cursor: pointer;
  padding: 2px;
}

.there-yet-custom-color.is-disabled {
  opacity: 0.52;
}

.there-yet-custom-color.is-disabled input {
  cursor: not-allowed;
}

.there-yet-mark-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.there-yet-mark-actions .game-action-button {
  width: 100%;
  font-size: 0.76rem;
}

.there-yet-lookout-card {
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.96), rgba(232, 212, 180, 0.72)),
    var(--paper);
  isolation: isolate;
  overflow: hidden;
}

.there-yet-lookout-card > * {
  position: relative;
  z-index: 1;
}

.there-yet-lookout-card::before,
.there-yet-lookout-card::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.there-yet-lookout-card::before {
  z-index: 0;
  background: url("assets/games/out-the-window-background.jpg") center 54% / cover no-repeat;
  opacity: 0.48;
}

.there-yet-lookout-card::after {
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.86), rgba(232, 212, 180, 0.72)),
    rgba(255, 249, 239, 0.62);
}

.there-yet-stamp-drawer-card {
  gap: 8px;
}

.there-yet-stamp-drawer-toggle {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 2px solid var(--navy);
  background: rgba(255, 253, 248, 0.86);
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  padding: 9px 10px;
  text-align: left;
}

.there-yet-stamp-drawer-toggle strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.82rem;
}

.there-yet-stamp-toggle-icon {
  display: grid;
  place-items: center;
  position: relative;
  width: 34px;
  height: 34px;
  border: 2px solid var(--red);
  border-radius: 999px;
}

.there-yet-stamp-toggle-icon::before {
  width: 18px;
  height: 18px;
  background: var(--navy);
  clip-path: polygon(30% 0, 70% 0, 76% 42%, 95% 42%, 95% 70%, 5% 70%, 5% 42%, 24% 42%);
  content: "";
}

.there-yet-stamp-toggle-icon::after {
  position: absolute;
  right: -4px;
  bottom: -9px;
  color: var(--navy);
  content: none;
  font-size: 0.9rem;
  font-weight: 900;
}

.there-yet-stamp-drawer-toggle.is-open .there-yet-stamp-toggle-icon::after {
  content: none;
}

.there-yet-stamp-palette {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 8px;
  width: min(320px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 24px));
  overflow: auto;
  border: 1.5px solid rgba(10, 49, 97, 0.24);
  box-shadow: 0 18px 36px rgba(10, 49, 97, 0.22);
  background: rgba(255, 249, 239, 0.96);
  padding: 8px;
}

.there-yet-stamp-palette[hidden] {
  display: none;
}

.there-yet-stamp-tray {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.there-yet-stamp-option {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: center;
  min-height: 50px;
  border: 1.5px solid var(--navy);
  background: rgba(255, 253, 248, 0.86);
  color: var(--navy);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
  padding: 5px;
  text-align: center;
  cursor: pointer;
}

.there-yet-stamp-symbol {
  display: grid;
  place-items: center;
  min-height: 30px;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: var(--red);
  font-size: 0.82rem;
}

.there-yet-stamp-symbol svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.there-yet-stamp-option[aria-pressed="true"] {
  background: #96c6b3;
  color: var(--ink);
}

.there-yet-stamp-option.is-construction {
  border-color: var(--red);
}

.there-yet-stamp-preview {
  position: absolute;
  z-index: 20;
  max-width: 110px;
  transform: translate(-50%, -50%) rotate(-3deg);
  border: 2px solid var(--red);
  border-radius: 999px;
  background: rgba(255, 249, 239, 0.58);
  color: var(--navy);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.58;
  pointer-events: none;
  padding: 6px 8px;
  text-align: center;
  text-transform: uppercase;
}

.there-yet-stamp-preview svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 3px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.there-yet-stamp-popover {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 6px;
  width: min(170px, 48%);
  transform: translate(-50%, calc(-100% - 12px));
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(246, 229, 196, 0.94)),
    var(--paper);
  box-shadow: 0 12px 24px rgba(10, 49, 97, 0.2);
  padding: 8px;
}

.there-yet-stamp-popover[hidden] {
  display: none;
}

.there-yet-stamp-popover::after {
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  background: rgba(246, 229, 196, 0.96);
  content: "";
}

.there-yet-stamp-popover button {
  position: relative;
  z-index: 1;
  min-height: 36px;
  border: 1.5px solid var(--navy);
  background: rgba(255, 249, 239, 0.9);
  color: var(--navy);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
}

.there-yet-stamp-popover button:hover,
.there-yet-stamp-popover button:focus-visible {
  background: #96c6b3;
}

.there-yet-interesting-prompt {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  display: grid;
  gap: 9px;
  width: min(280px, 86%);
  transform: translate(-50%, -50%);
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(246, 229, 196, 0.95)),
    var(--paper);
  box-shadow: 0 16px 30px rgba(10, 49, 97, 0.24);
  padding: 12px;
}

.there-yet-interesting-prompt[hidden] {
  display: none;
}

.there-yet-interesting-prompt label {
  display: grid;
  gap: 7px;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.there-yet-interesting-prompt input {
  min-height: 40px;
  border: 1.5px solid var(--navy);
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 8px 9px;
  text-transform: none;
}

.there-yet-interesting-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.there-yet-interesting-actions button {
  min-height: 38px;
  border: 1.5px solid var(--navy);
  background: rgba(255, 249, 239, 0.9);
  color: var(--navy);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.there-yet-interesting-actions button:first-child {
  background: var(--navy);
  color: #fffdf8;
}

.there-yet-interesting-actions button:hover,
.there-yet-interesting-actions button:focus-visible {
  background: #96c6b3;
  color: var(--navy);
}

.there-yet-sighting-popover {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 7px;
  width: min(190px, 54%);
  transform: translate(-50%, calc(-100% - 14px));
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(246, 229, 196, 0.95)),
    var(--paper);
  box-shadow: 0 14px 26px rgba(10, 49, 97, 0.22);
  padding: 10px;
}

.there-yet-sighting-popover[hidden] {
  display: none;
}

.there-yet-sighting-popover strong {
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.15;
}

.there-yet-sighting-popover div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.there-yet-sighting-popover button {
  min-height: 36px;
  border: 1.5px solid var(--navy);
  background: rgba(255, 249, 239, 0.9);
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
}

.there-yet-sighting-popover button:hover,
.there-yet-sighting-popover button:focus-visible {
  background: #96c6b3;
}

.there-yet-placed-stamp {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  align-items: center;
}

.there-yet-placed-stamp-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.there-yet-tool-note {
  color: var(--muted) !important;
  font-size: 0.82rem !important;
}

#there-yet-observation-control select,
#there-yet-observation-control input {
  width: 100%;
  min-height: 42px;
  border: 1.5px solid var(--navy);
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}

.there-yet-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(10, 49, 97, 0.28);
  background: rgba(255, 253, 248, 0.92);
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
}

.there-yet-placed-list {
  display: grid;
  gap: 6px;
}

.there-yet-placed-list-item {
  min-height: 34px;
  border: 1.5px solid var(--line);
  background: rgba(255, 253, 248, 0.84);
  color: var(--navy);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  padding: 6px 8px;
}

.there-yet-arrival,
.there-yet-reset-confirm {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(255, 249, 239, 0.78);
  backdrop-filter: blur(1px);
  padding: clamp(14px, 4vw, 28px);
}

.there-yet-arrival[hidden],
.there-yet-reset-confirm[hidden] {
  display: none;
}

.there-yet-arrival-card,
.there-yet-reset-confirm-card {
  position: relative;
  width: min(980px, 96%);
  max-height: min(820px, 96vh);
  overflow: auto;
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(246, 229, 196, 0.94)),
    var(--paper);
  box-shadow: 0 20px 48px rgba(10, 49, 97, 0.22);
  padding: clamp(18px, 4vw, 28px);
}

.there-yet-reset-confirm-card {
  width: min(520px, 94%);
}

.there-yet-reset-confirm-card h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1;
}

.there-yet-reset-confirm-card p {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}

.there-yet-arrival-card h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1;
}

.there-yet-screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.there-yet-postcard-chooser {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
}

.there-yet-postcard-template-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.there-yet-postcard-template {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 2px solid rgba(10, 49, 97, 0.24);
  border-radius: 8px;
  background: rgba(255, 249, 239, 0.88);
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.1;
  padding: 6px;
  text-align: center;
}

.there-yet-postcard-template img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  object-fit: cover;
}

.there-yet-postcard-template[aria-pressed="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(191, 13, 62, 0.14);
}

.there-yet-postcard-template:disabled {
  cursor: default;
  opacity: 0.62;
  transform: none;
}

.there-yet-postcard-template:hover,
.there-yet-postcard-template:focus-visible {
  border-color: var(--navy);
  outline: none;
  transform: translateY(-1px);
}

.there-yet-postcard-template:disabled:hover {
  border-color: rgba(10, 49, 97, 0.24);
  transform: none;
}

.there-yet-postcard-template:disabled[aria-pressed="true"]:hover {
  border-color: var(--red);
}

.there-yet-journey-postcard {
  position: relative;
  isolation: isolate;
  width: min(100%, 900px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 2px solid rgba(76, 58, 34, 0.38);
  border-radius: 10px;
  background: #f6e5c4;
  box-shadow: 0 20px 38px rgba(76, 58, 34, 0.24);
}

.there-yet-postcard-template-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.there-yet-postcard-route-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
}

.there-yet-postcard-road-base,
.there-yet-postcard-road-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.there-yet-postcard-road-base {
  stroke: rgba(10, 49, 97, 0.6);
  stroke-width: 9;
  filter: drop-shadow(0 2px 3px rgba(76, 58, 34, 0.14));
}

.there-yet-postcard-road-highlight {
  stroke: rgba(150, 198, 179, 0.78);
  stroke-width: 5;
  mix-blend-mode: normal;
}

.there-yet-postcard-endpoint {
  fill: #fff9ef;
  stroke: #0a3161;
  stroke-width: 3;
}

.there-yet-postcard-endpoint.is-finish {
  fill: #bf0d3e;
  stroke: #fff9ef;
}

.there-yet-postcard-record-banner {
  position: absolute;
  z-index: 4;
  top: 23%;
  right: 7%;
  left: 7%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 6px 12px;
  border: 1.5px solid rgba(10, 49, 97, 0.34);
  background:
    linear-gradient(90deg, rgba(255, 249, 239, 0.84), rgba(246, 229, 196, 0.7)),
    rgba(255, 249, 239, 0.72);
  box-shadow:
    0 8px 18px rgba(76, 58, 34, 0.14),
    inset 0 0 0 1px rgba(255, 249, 239, 0.54);
  padding: clamp(8px, 1.5vw, 14px) clamp(10px, 1.8vw, 18px);
  pointer-events: none;
}

.there-yet-postcard-place,
.there-yet-postcard-trip-meta,
.there-yet-postcard-route-arrow {
  color: #14324d;
  text-shadow:
    0 1px 0 rgba(255, 249, 239, 0.82),
    0 0 9px rgba(255, 249, 239, 0.72);
}

.there-yet-postcard-place {
  min-width: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.18rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.there-yet-postcard-destination {
  text-align: right;
}

.there-yet-postcard-route-arrow {
  align-self: center;
  color: var(--red);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
}

.there-yet-postcard-trip-meta {
  grid-column: 1 / -1;
  color: rgba(76, 58, 34, 0.92);
  font-size: clamp(0.72rem, 1.5vw, 1.02rem);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.there-yet-postcard-stamp-field {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.there-yet-postcard-stamp {
  position: absolute;
  display: inline-grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 98px;
  max-width: 150px;
  border: 2px solid rgba(191, 13, 62, 0.66);
  border-radius: 6px;
  background: rgba(255, 249, 239, 0.82);
  color: var(--red);
  font-size: clamp(0.58rem, 1.12vw, 0.78rem);
  font-weight: 900;
  line-height: 1.05;
  padding: 6px 8px;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(var(--stamp-rotate));
  box-shadow: 0 7px 14px rgba(76, 58, 34, 0.18);
}

.there-yet-postcard-stamp.is-custom {
  border-color: rgba(10, 49, 97, 0.68);
  color: var(--navy);
  text-transform: none;
}

.there-yet-postcard-stamp.is-more {
  grid-template-columns: 1fr;
  min-width: 88px;
  color: var(--navy);
  text-align: center;
}

.there-yet-postcard-stamp-icon {
  display: grid;
  place-items: center;
}

.there-yet-postcard-stamp-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.there-yet-keepsake-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 2px solid rgba(10, 49, 97, 0.18);
  padding-top: 16px;
}

.there-yet-keepsake-actions .there-yet-trip-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.there-yet-arrival-secondary-actions {
  margin-top: 10px;
}

.there-yet-keepsake-note {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.35;
}

.easy-read .there-yet-tool-card p,
.easy-read .there-yet-mode-button,
.easy-read .there-yet-stamp-option,
.easy-read .there-yet-custom-color,
.easy-read .there-yet-mark-actions .game-action-button {
  font-size: 1rem;
  line-height: 1.5;
}

.easy-read .there-yet-color-swatch,
.there-yet-little .there-yet-color-swatch {
  width: 46px;
  height: 46px;
}

.there-yet-little .there-yet-mode-button {
  min-height: 52px;
  font-size: 1rem;
}

.easy-read .there-yet-roadbook {
  width: min(100%, 480px);
}

.license-plate-hub {
  display: grid;
  gap: 14px;
}

.license-plate-controls {
  grid-template-columns: max-content minmax(170px, 230px) max-content minmax(150px, 210px) minmax(0, 1fr);
}

.license-plate-scoreboard,
.license-plate-crew-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 2px solid var(--navy);
  background:
    linear-gradient(90deg, rgba(255, 249, 239, 0.96), rgba(232, 212, 180, 0.7)),
    var(--paper);
  padding: clamp(12px, 2vw, 16px);
}

.license-plate-scoreboard p,
.license-plate-crew-panel p {
  margin: 0;
}

.license-plate-progress {
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1;
}

.license-plate-score-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
}

.license-plate-crew-panel {
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1fr);
  align-items: start;
}

.license-plate-crew-form {
  display: grid;
  grid-template-columns: max-content minmax(170px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.license-plate-crew-form label {
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.license-plate-crew-form input {
  min-height: 40px;
  border: 1.5px solid var(--navy);
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  padding: 8px 10px;
}

.license-plate-traveler-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.license-plate-traveler {
  min-height: 38px;
  border: 1.5px solid var(--navy);
  background: var(--paper);
  color: var(--navy);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  padding: 7px 11px;
  cursor: pointer;
}

.license-plate-traveler[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}

.license-plate-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.license-plate-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 4px;
  min-height: 118px;
  border: 2px solid var(--navy);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 45%),
    var(--plate-fill, #f8f8f2);
  color: var(--plate-text, var(--navy));
  box-shadow: 0 3px 0 rgba(10, 49, 97, 0.14);
  cursor: pointer;
  padding: 11px 10px 10px;
  text-align: center;
  touch-action: manipulation;
}

.license-plate-tile::before,
.license-plate-tile::after {
  position: absolute;
  top: 8px;
  width: 7px;
  aspect-ratio: 1;
  border: 1.5px solid rgba(10, 49, 97, 0.46);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.72);
  content: "";
}

.license-plate-tile::before {
  left: 10px;
}

.license-plate-tile::after {
  right: 10px;
}

.license-plate-tile[aria-pressed="true"] {
  background:
    linear-gradient(180deg, rgba(150, 198, 179, 0.78), rgba(150, 198, 179, 0.58)),
    var(--plate-fill, #f8f8f2);
  border-color: #2f6f3e;
}

.license-plate-tile-stripe {
  position: absolute;
  inset: 0 0 auto;
  height: 16px;
  background: var(--plate-accent, var(--navy));
}

.license-plate-code {
  position: relative;
  margin-top: 15px;
  color: var(--plate-text, var(--navy));
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 900;
  line-height: 0.9;
}

.license-plate-motif {
  color: var(--plate-text, var(--navy));
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.license-plate-name {
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.15;
}

.license-plate-claim {
  min-height: 1.2em;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
}

.license-plate-tile.has-plate-art {
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
  border-color: transparent;
  background: transparent;
  padding: 8px;
}

.license-plate-tile.has-plate-art::before,
.license-plate-tile.has-plate-art::after {
  display: none;
}

.license-plate-tile.has-plate-art[aria-pressed="true"] {
  background: rgba(150, 198, 179, 0.36);
  border-color: #2f6f3e;
}

.license-plate-art {
  display: block;
  width: min(100%, 240px);
  aspect-ratio: 2 / 1;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.26));
}

.license-plate-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 900;
}

.plate-wall-celebration {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--navy);
  background: linear-gradient(90deg, rgba(232, 212, 180, 0.82), rgba(255, 249, 239, 0.96));
  color: var(--ink);
  padding: 12px 14px;
}

.plate-wall-celebration[hidden] {
  display: none;
}

.plate-wall-celebration p {
  margin: 0;
}

.easy-read .license-plate-code {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
}

.easy-read .license-plate-name,
.easy-read .license-plate-progress,
.easy-read .license-plate-status {
  font-size: 1.12rem;
  line-height: 1.35;
}

.easy-read .license-plate-tile {
  min-height: 136px;
}

.game-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  margin-top: 6px;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
}

.safari-page {
  padding-bottom: 28px;
}

.word-search-page {
  padding-bottom: 28px;
}

.crossword-page {
  padding-bottom: 28px;
}

.mile-marker-page {
  padding-bottom: 28px;
}

.mile-marker-hub {
  display: grid;
  gap: 14px;
}

.mile-marker-controls {
  grid-template-columns: max-content minmax(190px, 260px) minmax(0, 1fr);
}

.mile-marker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mile-marker-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  gap: 14px;
  align-items: start;
}

.mile-marker-play-panel,
.mile-marker-info-panel {
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.96), rgba(232, 212, 180, 0.72)),
    var(--paper);
  padding: clamp(10px, 2vw, 16px);
}

.mile-marker-play-panel {
  position: relative;
  container-type: inline-size;
}

.mile-marker-side-column {
  display: grid;
  gap: 10px;
  align-content: start;
}

.mile-marker-board-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mile-marker-board-header h2,
.mile-marker-info-panel h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1;
}

.mile-marker-progress,
.mile-marker-info-panel p:not(.eyebrow) {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.4;
}

.mile-marker-location {
  color: var(--red) !important;
  font-weight: 900 !important;
}

.mile-marker-learning-content {
  display: grid;
  gap: 10px;
}

.mile-marker-learning-content[hidden] {
  display: none;
}

.mile-marker-learning-section {
  display: grid;
  gap: 4px;
}

.mile-marker-learning-section h3 {
  margin: 0;
  color: #8c6a1f;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mile-marker-learning-section p,
.mile-marker-learn-more {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.42;
}

.mile-marker-learn-more {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: baseline;
  color: rgba(10, 49, 97, 0.78);
  font-size: 0.78rem;
}

.mile-marker-learn-more a {
  color: var(--navy);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.mile-marker-learn-more a:focus-visible {
  outline: 2px solid #c99437;
  outline-offset: 2px;
}

.mile-marker-map {
  --pin-x: 50%;
  --pin-y: 50%;
  position: relative;
  overflow: hidden;
  min-height: 150px;
  border: 1.5px solid rgba(10, 49, 97, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.26), rgba(232, 212, 180, 0.16)),
    #2f9a9a;
  box-shadow: inset 0 0 0 3px rgba(255, 249, 239, 0.28);
}

.mile-marker-map[hidden] {
  display: none;
}

.mile-marker-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 249, 239, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 64%, rgba(10, 49, 97, 0.1) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 42%, rgba(10, 49, 97, 0.08) 43%, transparent 45%),
    linear-gradient(35deg, transparent 0 66%, rgba(255, 249, 239, 0.14) 67%, transparent 69%);
  opacity: 0.72;
  pointer-events: none;
}

.mile-marker-map-art {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
}

.mile-marker-map-field {
  fill: rgba(47, 154, 154, 0.92);
}

.mile-marker-map-us,
.mile-marker-map-inset {
  fill: rgba(255, 249, 239, 0.86);
  stroke: rgba(232, 212, 180, 0.92);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.mile-marker-map-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 249, 239, 0.9);
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 1px 0 rgba(10, 49, 97, 0.26), 0 0 0 3px rgba(191, 13, 62, 0.18);
  transform: translate(-50%, -50%);
}

.mile-marker-victory {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  border: 1.5px solid rgba(201, 148, 55, 0.68);
  background:
    linear-gradient(90deg, rgba(255, 249, 239, 0.94), rgba(232, 212, 180, 0.72)),
    var(--paper);
  box-shadow: inset 0 0 0 2px rgba(255, 249, 239, 0.58);
  padding: 10px;
}

.mile-marker-victory[hidden] {
  display: none;
}

.mile-marker-victory p:not(.eyebrow) {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.25;
}

.mile-marker-finish-celebration {
  position: absolute;
  z-index: 6;
  top: clamp(74px, 12%, 112px);
  left: clamp(8px, 3%, 28px);
  right: clamp(8px, 3%, 28px);
  height: min(360px, 58%);
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: mile-marker-finish-clear 2200ms ease-in-out both;
}

.mile-marker-finish-celebration[hidden] {
  display: none;
}

.mile-marker-finish-celebration::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 241, 176, 0.72), rgba(201, 148, 55, 0.18) 42%, transparent 68%);
  filter: blur(2px);
  opacity: 0;
  animation: mile-marker-finish-burst 1900ms ease-out 180ms both;
}

.mile-marker-finish-flag {
  position: relative;
  z-index: 1;
  width: min(440px, 74%);
  height: min(190px, 54%);
  animation: mile-marker-flag-sweep 1850ms cubic-bezier(0.2, 0.9, 0.22, 1) both;
}

.mile-marker-flag-pole {
  position: absolute;
  left: 7%;
  bottom: 4%;
  width: 10px;
  height: 84%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8c6a1f, #f7d66a 42%, #9f6c22);
  box-shadow: 0 4px 8px rgba(10, 49, 97, 0.2);
  transform: rotate(-18deg);
  transform-origin: bottom center;
}

.mile-marker-flag-cloth {
  position: absolute;
  left: 12%;
  top: 7%;
  width: 74%;
  height: 44%;
  border: 3px solid rgba(10, 49, 97, 0.86);
  border-left: 0;
  border-radius: 5px 16px 13px 4px;
  background:
    linear-gradient(115deg, rgba(255, 249, 239, 0.22), transparent 36%),
    repeating-conic-gradient(#fff9ef 0% 25%, #10131a 0% 50%) 0 0 / 34px 34px;
  box-shadow:
    0 0 0 2px rgba(247, 214, 106, 0.46),
    0 8px 18px rgba(10, 49, 97, 0.22);
  transform: skewY(-4deg);
  transform-origin: left center;
  animation: mile-marker-flag-wave 520ms ease-in-out 3 alternate;
}

.mile-marker-finish-banner {
  position: relative;
  z-index: 2;
  margin-top: min(160px, 24%);
  border: 2px solid rgba(201, 148, 55, 0.9);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(13, 56, 98, 0.98), rgba(10, 49, 97, 0.98));
  box-shadow:
    0 0 0 3px rgba(255, 249, 239, 0.72),
    0 0 22px rgba(247, 214, 106, 0.58);
  color: #fff9ef;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 6cqw, 3.2rem);
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: clamp(10px, 2.5cqw, 18px) clamp(18px, 5cqw, 42px);
  text-align: center;
  text-shadow: 0 2px 0 rgba(10, 49, 97, 0.8);
  animation: mile-marker-banner-pop 1700ms ease-out 220ms both;
}

.mile-marker-sparkle {
  position: absolute;
  z-index: 3;
  width: 10px;
  height: 10px;
  background: #f7d66a;
  box-shadow: 0 0 10px rgba(247, 214, 106, 0.78);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: mile-marker-sparkle 1200ms ease-out both;
}

.sparkle-one {
  top: 18%;
  left: 24%;
  animation-delay: 260ms;
}

.sparkle-two {
  top: 28%;
  right: 22%;
  width: 8px;
  height: 8px;
  background: #fff9ef;
  animation-delay: 480ms;
}

.sparkle-three {
  right: 35%;
  bottom: 26%;
  animation-delay: 720ms;
}

.sparkle-four {
  bottom: 34%;
  left: 31%;
  width: 7px;
  height: 7px;
  background: #96c6b3;
  animation-delay: 900ms;
}

.mile-marker-board {
  --mile-marker-columns: var(--mile-marker-profile-columns, 3);
  --mile-marker-card-min: 136px;
  --mile-marker-gap: 10px;
  display: grid;
  grid-template-columns: repeat(var(--mile-marker-columns), minmax(var(--mile-marker-card-min), 1fr));
  gap: var(--mile-marker-gap);
  align-items: stretch;
  justify-content: center;
  justify-items: stretch;
}

.mile-marker-board.is-complete {
  border-radius: 6px;
  box-shadow:
    0 0 0 2px rgba(201, 148, 55, 0.42),
    0 0 22px rgba(201, 148, 55, 0.34);
}

.mile-marker-board.is-discovery-cue {
  animation: mile-marker-discovery-board-cue 1100ms ease-out both;
}

.mile-marker-board.is-look-cue .mile-marker-card.is-discovery-card .mile-marker-card-front {
  animation: mile-marker-card-look-cue 900ms ease-out both;
}

.mile-marker-board.is-complete .mile-marker-card.is-discovery-card {
  cursor: zoom-in;
  transition: transform 160ms ease, filter 160ms ease;
}

.mile-marker-board.is-complete .mile-marker-card.is-discovery-card .mile-marker-card-front {
  border-color: #f7d66a;
  box-shadow:
    inset 0 0 0 3px rgba(247, 214, 106, 0.4),
    0 0 0 2px rgba(255, 249, 239, 0.66),
    0 0 14px rgba(247, 214, 106, 0.48);
}

.mile-marker-board.is-complete .mile-marker-card.is-discovery-card:hover,
.mile-marker-board.is-complete .mile-marker-card.is-discovery-card:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 7px 10px rgba(201, 148, 55, 0.48));
}

.mile-marker-board.is-complete .mile-marker-card.is-discovery-card:focus-visible {
  outline: 3px solid #c99437;
  outline-offset: 3px;
}

.mile-marker-card {
  position: relative;
  width: 100%;
  min-width: 0;
  height: clamp(178px, 30cqw, 224px);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  perspective: 900px;
}

.mile-marker-board[data-profile="little"] {
  --mile-marker-little-card-width: clamp(168px, 34cqw, 224px);
  grid-template-columns: repeat(2, minmax(0, var(--mile-marker-little-card-width)));
  justify-content: center;
}

.mile-marker-board[data-profile="little"] .mile-marker-card {
  height: calc(var(--mile-marker-little-card-width) * 1.25);
}

.mile-marker-board[data-profile="family"] .mile-marker-card {
  height: clamp(236px, 39cqw, 300px);
}

.mile-marker-card:disabled {
  cursor: default;
}

.mile-marker-card.is-takeback {
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(201, 148, 55, 0.34);
  cursor: pointer;
}

.mile-marker-card.is-takeback:hover,
.mile-marker-card.is-takeback:focus-visible {
  box-shadow: 0 0 0 2px rgba(201, 148, 55, 0.46);
}

.mile-marker-card:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.mile-marker-card-inner {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 260ms ease;
}

.mile-marker-card.is-flipped .mile-marker-card-inner,
.mile-marker-card.is-matched .mile-marker-card-inner {
  transform: rotateY(180deg);
}

.mile-marker-card-face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  overflow: hidden;
  border: 2px solid var(--navy);
  backface-visibility: hidden;
  padding: 10px;
  text-align: center;
}

.mile-marker-card-back {
  place-items: center;
  background: #0b3a6e;
  padding: 0;
}

.mile-marker-card-art {
  display: contents;
}

.mile-marker-card-back img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.mile-marker-board[data-profile="little"] .mile-marker-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mile-marker-board[data-profile="little"] .mile-marker-card-back {
  background: #012451;
}

.mile-marker-board[data-profile="little"] .mile-marker-card-art img {
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  object-position: center;
}

.mile-marker-card-front {
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: 0;
  transform: rotateY(180deg);
  background:
    linear-gradient(180deg, rgba(255, 249, 239, 0.98), rgba(232, 212, 180, 0.84)),
    var(--paper);
  color: var(--navy);
  padding: 8px;
}

.mile-marker-media {
  grid-area: 1 / 1;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1.5px solid rgba(10, 49, 97, 0.42);
  background:
    linear-gradient(135deg, rgba(150, 198, 179, 0.38), rgba(247, 214, 106, 0.34)),
    rgba(255, 253, 248, 0.88);
}

.mile-marker-card-copy {
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 26%;
  border: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 249, 239, 0) 0%,
    rgba(255, 249, 239, 0.28) 34%,
    rgba(255, 249, 239, 0.7) 72%,
    rgba(255, 249, 239, 0.9) 100%
  );
  padding: 12px 8px 7px;
}

.mile-marker-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--red);
  font-size: clamp(0.86rem, 2.3cqw, 1.12rem);
  font-weight: 1000;
  letter-spacing: 0.08em;
}

.mile-marker-landmark-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mile-marker-board[data-profile="little"] .mile-marker-landmark-image {
  object-fit: contain;
}

.mile-marker-card-copy strong {
  max-width: 100%;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.92rem, 2.4cqw, 1.12rem);
  line-height: 1.05;
  overflow-wrap: break-word;
  text-shadow:
    0 0 2px rgba(255, 249, 239, 0.96),
    0 0 4px rgba(255, 249, 239, 0.84),
    0 0 6px rgba(255, 249, 239, 0.5);
}

.mile-marker-card-copy span:last-child {
  max-width: 100%;
  color: var(--navy);
  font-size: clamp(0.68rem, 1.8cqw, 0.78rem);
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: break-word;
  text-shadow: 0 1px 0 rgba(255, 249, 239, 0.72), 0 0 5px rgba(255, 249, 239, 0.58);
}

@container (max-width: 620px) {
  .mile-marker-board[data-profile="teen"],
  .mile-marker-board[data-profile="grown"] {
    --mile-marker-columns: 3;
  }
}

@container (max-width: 500px) {
  .mile-marker-board[data-profile="family"],
  .mile-marker-board[data-profile="teen"],
  .mile-marker-board[data-profile="grown"] {
    --mile-marker-columns: 2;
  }
}

@container (max-width: 300px) {
  .mile-marker-board {
    --mile-marker-columns: 1;
  }

  .mile-marker-board[data-profile="little"] {
    grid-template-columns: minmax(0, min(100%, var(--mile-marker-little-card-width)));
  }
}

.mile-marker-card.is-matched .mile-marker-card-face {
  border-color: #c99437;
  box-shadow: inset 0 0 0 3px rgba(201, 148, 55, 0.34);
}

.mile-marker-info-panel {
  display: grid;
  gap: 8px;
}

.mile-marker-info-panel.is-complete {
  border-color: #c99437;
  box-shadow:
    0 0 0 3px rgba(255, 249, 239, 0.72),
    0 0 22px rgba(201, 148, 55, 0.38);
}

.mile-marker-info-panel.is-discovery-cue {
  animation: mile-marker-discovery-panel-cue 1100ms ease-out both;
}

.mile-marker-look-cue {
  display: grid;
  justify-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.mile-marker-look-cue[hidden] {
  display: none;
}

.mile-marker-look-cue.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mile-marker-look-arrow {
  width: 34px;
  height: 42px;
  background: #f7d66a;
  clip-path: polygon(50% 0, 86% 52%, 61% 52%, 61% 100%, 39% 100%, 39% 52%, 14% 52%);
  filter: drop-shadow(0 0 8px rgba(247, 214, 106, 0.68));
  animation: mile-marker-look-arrow-arrive 650ms ease-out both;
}

.mile-marker-look-panel-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 10px;
  width: min(100%, 330px);
}

.mile-marker-look-arrow-left {
  width: 42px;
  height: 34px;
  background: #f7d66a;
  clip-path: polygon(0 50%, 52% 14%, 52% 39%, 100% 39%, 100% 61%, 52% 61%, 52% 86%);
  filter: drop-shadow(0 0 8px rgba(247, 214, 106, 0.68));
  animation: mile-marker-look-arrow-arrive 650ms ease-out both;
}

.mile-marker-look-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 280px);
  border: 2px solid #f7d66a;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(13, 56, 98, 0.98), rgba(10, 49, 97, 0.98));
  box-shadow:
    0 0 0 3px rgba(255, 249, 239, 0.62),
    0 0 18px rgba(247, 214, 106, 0.52);
  color: #fff9ef;
  padding: 14px 16px 12px;
  text-align: center;
  animation: mile-marker-look-panel-arrive 760ms ease-out both;
}

.mile-marker-look-panel p {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0;
  color: #f7d66a;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.mile-marker-look-panel span:not(.mile-marker-look-star) {
  color: #fff9ef;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.26;
}

.mile-marker-look-star {
  width: 16px;
  height: 16px;
  background: #f7d66a;
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%);
  filter: drop-shadow(0 0 5px rgba(247, 214, 106, 0.48));
}

.mile-marker-book-icon {
  width: 56px;
  height: 40px;
  fill: none;
  stroke: #f7d66a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.mile-marker-discovery-lens {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  overflow: hidden;
  border: 1.5px solid rgba(201, 148, 55, 0.42);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 249, 239, 0.96), rgba(232, 212, 180, 0.48) 56%, rgba(255, 249, 239, 0.16) 100%),
    var(--paper);
}

.mile-marker-discovery-lens[hidden] {
  display: none;
}

.mile-marker-discovery-lens::before,
.mile-marker-discovery-lens::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.mile-marker-discovery-lens::before {
  inset: 12px;
  background:
    radial-gradient(circle at 18% 22%, rgba(201, 148, 55, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 34%, rgba(201, 148, 55, 0.34) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 78%, rgba(201, 148, 55, 0.28) 0 2px, transparent 3px),
    linear-gradient(135deg, transparent 0 46%, rgba(201, 148, 55, 0.22) 47%, transparent 49%);
  opacity: 0.7;
}

.mile-marker-discovery-lens::after {
  width: 74px;
  height: 1.5px;
  right: 18px;
  bottom: 36px;
  border-top: 2px dashed rgba(201, 148, 55, 0.54);
  transform: rotate(-28deg);
}

.mile-marker-lens-glass {
  position: relative;
  z-index: 1;
  width: min(148px, 70%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 8px solid #c99437;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.52), transparent 28%),
    rgba(255, 249, 239, 0.88);
  box-shadow:
    inset 0 0 0 3px rgba(10, 49, 97, 0.72),
    0 10px 18px rgba(10, 49, 97, 0.18);
}

.mile-marker-lens-glass svg {
  width: 84%;
  height: 68%;
}

.mile-marker-lens-map {
  fill: rgba(110, 170, 172, 0.72);
  stroke: rgba(10, 49, 97, 0.28);
  stroke-width: 2;
}

.mile-marker-lens-lines {
  fill: none;
  stroke: rgba(255, 249, 239, 0.58);
  stroke-width: 1.2;
}

.mile-marker-lens-pin {
  fill: var(--navy);
  stroke: rgba(255, 249, 239, 0.92);
  stroke-width: 3;
}

.mile-marker-lens-handle {
  position: absolute;
  z-index: 0;
  width: 24px;
  height: 86px;
  right: 42px;
  bottom: 18px;
  border: 4px solid #c99437;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--navy), #0b3a6e);
  box-shadow: inset 0 0 0 2px rgba(255, 249, 239, 0.18);
  transform: rotate(-36deg);
  transform-origin: top center;
}

@keyframes mile-marker-finish-clear {
  0%,
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mile-marker-finish-burst {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }

  26% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes mile-marker-flag-sweep {
  0% {
    opacity: 0;
    transform: translateX(-28%) rotate(-8deg) scale(0.92);
  }

  22%,
  70% {
    opacity: 1;
    transform: translateX(0) rotate(-2deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(18%) rotate(4deg) scale(0.96);
  }
}

@keyframes mile-marker-flag-wave {
  from {
    transform: skewY(-4deg) rotateY(-7deg);
  }

  to {
    transform: skewY(3deg) rotateY(7deg);
  }
}

@keyframes mile-marker-banner-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }

  18%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

@keyframes mile-marker-sparkle {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.55) rotate(0deg);
  }

  38% {
    opacity: 1;
    transform: translateY(0) scale(1.18) rotate(20deg);
  }

  100% {
    opacity: 0;
    transform: translateY(-18px) scale(0.72) rotate(45deg);
  }
}

@keyframes mile-marker-discovery-board-cue {
  0% {
    box-shadow:
      0 0 0 2px rgba(201, 148, 55, 0.42),
      0 0 22px rgba(201, 148, 55, 0.34);
  }

  36% {
    box-shadow:
      0 0 0 3px rgba(255, 249, 239, 0.84),
      0 0 28px rgba(247, 214, 106, 0.58);
  }

  100% {
    box-shadow:
      0 0 0 2px rgba(201, 148, 55, 0.42),
      0 0 22px rgba(201, 148, 55, 0.34);
  }
}

@keyframes mile-marker-discovery-panel-cue {
  0% {
    box-shadow:
      0 0 0 3px rgba(255, 249, 239, 0.72),
      0 0 22px rgba(201, 148, 55, 0.38);
  }

  42% {
    box-shadow:
      0 0 0 4px rgba(255, 249, 239, 0.9),
      0 0 32px rgba(247, 214, 106, 0.68);
  }

  100% {
    box-shadow:
      0 0 0 3px rgba(255, 249, 239, 0.72),
      0 0 22px rgba(201, 148, 55, 0.38);
  }
}

@keyframes mile-marker-look-arrow-arrive {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mile-marker-look-panel-arrive {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mile-marker-card-look-cue {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 3px rgba(247, 214, 106, 0.4),
      0 0 0 2px rgba(255, 249, 239, 0.66),
      0 0 14px rgba(247, 214, 106, 0.48);
  }

  42% {
    box-shadow:
      inset 0 0 0 3px rgba(247, 214, 106, 0.58),
      0 0 0 3px rgba(255, 249, 239, 0.78),
      0 0 22px rgba(247, 214, 106, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mile-marker-card-inner {
    transition: none;
  }

  .mile-marker-board.is-complete .mile-marker-card.is-discovery-card {
    transition: none;
  }

  .mile-marker-finish-celebration {
    animation: mile-marker-finish-clear 1400ms ease-in-out both;
  }

  .mile-marker-finish-celebration::before,
  .mile-marker-finish-flag,
  .mile-marker-flag-cloth,
  .mile-marker-finish-banner,
  .mile-marker-sparkle,
  .mile-marker-board.is-discovery-cue,
  .mile-marker-info-panel.is-discovery-cue,
  .mile-marker-look-arrow,
  .mile-marker-look-arrow-left,
  .mile-marker-look-panel,
  .mile-marker-board.is-look-cue .mile-marker-card.is-discovery-card .mile-marker-card-front {
    animation: none;
  }

  .mile-marker-finish-celebration::before,
  .mile-marker-sparkle {
    opacity: 0;
  }

  .mile-marker-finish-flag,
  .mile-marker-finish-banner {
    opacity: 1;
    transform: none;
  }

  .mile-marker-look-cue {
    transition: opacity 180ms ease;
    transform: none;
  }
}

.crossword-hub {
  display: grid;
  gap: 14px;
}

.crossword-controls {
  grid-template-columns: max-content minmax(160px, 220px) max-content minmax(190px, 260px) minmax(0, 1fr);
}

.crossword-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crossword-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 14px;
  align-items: start;
}

.crossword-play-panel,
.crossword-clue-panel {
  border: 2px solid var(--navy);
  background: var(--paper);
  padding: clamp(10px, 2vw, 16px);
}

.crossword-board-header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.crossword-board-header h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1;
}

.crossword-status {
  max-width: 280px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.crossword-board {
  display: grid;
  grid-template-columns: repeat(var(--crossword-width), minmax(0, 1fr));
  width: min(100%, 620px);
  margin: 0 auto;
  border: 2px solid var(--navy);
  background: var(--navy);
  gap: 1px;
}

.crossword-block {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(135deg, rgba(10, 49, 97, 0.96), rgba(20, 32, 51, 0.92));
}

.crossword-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fffdf8;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.crossword-cell.is-active-word {
  background: rgba(150, 198, 179, 0.2);
}

.crossword-cell.is-active-cell {
  box-shadow: inset 0 0 0 3px var(--navy);
}

.crossword-cell.is-solved {
  background: rgba(150, 198, 179, 0.34);
}

.crossword-cell.has-error {
  background:
    linear-gradient(135deg, rgba(191, 13, 62, 0.12), rgba(255, 249, 239, 0.92));
}

.crossword-cell.has-error::after {
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 900;
  content: "!";
}

.crossword-cell-number {
  position: absolute;
  top: 2px;
  left: 3px;
  z-index: 2;
  color: var(--navy);
  font-size: clamp(0.52rem, 1.4vw, 0.72rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.crossword-cell-input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: clamp(1rem, 3.2vw, 1.65rem);
  font-weight: 900;
  line-height: 1;
  padding: 10px 2px 2px;
  text-align: center;
  text-transform: uppercase;
}

.crossword-cell-input:focus {
  outline: none;
}

.crossword-clue-panel {
  display: grid;
  gap: 14px;
  max-height: 720px;
  overflow: auto;
}

.crossword-clue-panel section {
  display: grid;
  gap: 8px;
}

.crossword-clue-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crossword-clue {
  border: 1.5px solid var(--line);
  background: rgba(255, 249, 239, 0.78);
}

.crossword-clue.is-active {
  border-color: var(--navy);
  background: rgba(150, 198, 179, 0.2);
}

.crossword-clue.is-solved {
  border-color: rgba(47, 111, 62, 0.5);
}

.crossword-clue-button {
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.crossword-clue-button span {
  color: var(--red);
  font-weight: 900;
}

.crossword-clue-button:focus-visible,
.crossword-cell-input:focus-visible {
  outline: 3px solid #96c6b3;
  outline-offset: -3px;
}

.crossword-learn-fact {
  margin: 0 10px 10px;
  border-left: 4px solid #96c6b3;
  background: rgba(255, 253, 248, 0.72);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
  padding: 8px 10px;
}

.has-crossword-completion .crossword-play-panel,
.has-crossword-completion .crossword-clue-panel {
  pointer-events: none;
}

.crossword-completion {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(255, 249, 239, 0.74);
  backdrop-filter: blur(1px);
  padding: clamp(14px, 4vw, 28px);
}

.crossword-completion[hidden] {
  display: none;
}

.crossword-completion-card {
  position: relative;
  width: min(560px, 96%);
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(246, 229, 196, 0.94)),
    var(--paper);
  box-shadow: 0 20px 48px rgba(10, 49, 97, 0.22);
  padding: clamp(18px, 4vw, 28px);
}

.crossword-completion-close {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(10, 49, 97, 0.28);
  background: rgba(255, 253, 248, 0.92);
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.crossword-completion-card h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1;
}

.crossword-completion-card p:not(.eyebrow) {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.45;
}

.crossword-completion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crossword-little .crossword-cell-input {
  font-size: clamp(1.25rem, 4.4vw, 1.9rem);
}

.easy-read .crossword-play-panel,
.easy-read .crossword-clue-panel {
  gap: 14px;
  padding: 16px;
}

.easy-read .crossword-cell-input {
  font-size: clamp(1.2rem, 4.5vw, 2rem);
}

.easy-read .crossword-clue-button,
.easy-read .crossword-status,
.easy-read .crossword-learn-fact {
  font-size: 1rem;
  line-height: 1.55;
}

.word-search-hub {
  display: grid;
  gap: 14px;
}

.word-search-controls {
  grid-template-columns: max-content minmax(160px, 220px) max-content minmax(190px, 260px) minmax(0, 1fr);
}

.word-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.word-search-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 14px;
  align-items: start;
}

.word-search-board-wrap,
.word-search-list-panel {
  border: 2px solid var(--navy);
  background: var(--paper);
  padding: clamp(10px, 2vw, 16px);
}

.word-search-board-wrap {
  overflow-x: auto;
}

.word-search-board {
  display: grid;
  grid-template-columns: repeat(var(--word-search-size), minmax(0, 1fr));
  gap: 3px;
  width: max(100%, calc(var(--word-search-size) * 34px));
  max-width: 720px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
}

.word-search-instructions {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.word-search-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: 1.5px solid rgba(10, 49, 97, 0.26);
  background: #fffdf8;
  color: var(--navy);
  font: inherit;
  font-size: clamp(0.72rem, 1.8vw, 1.05rem);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.word-search-little .word-search-cell {
  gap: 4px;
  font-size: clamp(1rem, 3.4vw, 1.45rem);
}

.is-word-search-selecting {
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: contain;
}

.word-search-cell.is-selected {
  background: rgba(150, 198, 179, 0.55);
}

.word-search-cell.is-clearing {
  animation: word-search-selection-clear 240ms ease-out both;
}

.word-search-cell.is-found {
  background: #96c6b3;
  border-color: var(--navy);
  color: var(--ink);
}

@keyframes word-search-selection-clear {
  from {
    background: rgba(150, 198, 179, 0.42);
  }

  to {
    background: #fffdf8;
  }
}

.word-search-list-panel h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1;
}

.word-search-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.word-search-list li {
  border: 1.5px solid var(--line);
  background: rgba(255, 249, 239, 0.82);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
  padding: 7px 8px;
}

.word-search-list li.is-found {
  background: #96c6b3;
  text-decoration: line-through;
}

.word-search-celebration {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(10, 49, 97, 0.18);
  background: rgba(255, 249, 239, 0.72);
  backdrop-filter: blur(1px);
  padding: clamp(14px, 4vw, 28px);
}

.word-search-celebration[hidden] {
  display: none;
}

.word-search-celebration-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(240px, 1fr);
  gap: clamp(14px, 3vw, 22px);
  align-items: center;
  width: min(820px, 96%);
  max-height: min(620px, 96%);
  overflow: visible;
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(246, 229, 196, 0.92)),
    var(--paper);
  box-shadow: 0 20px 48px rgba(10, 49, 97, 0.22);
  padding: clamp(18px, 3vw, 28px);
}

.word-search-celebration-close {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(10, 49, 97, 0.28);
  background: rgba(255, 253, 248, 0.92);
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.word-search-celebration-close:focus-visible,
.word-search-celebration-actions :focus-visible {
  outline: 3px solid #96c6b3;
  outline-offset: 3px;
}

.word-search-celebration-stage {
  position: relative;
  min-height: clamp(190px, 30vw, 270px);
  overflow: visible;
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, rgba(255, 249, 239, 0.22), rgba(232, 212, 180, 0.42));
}

.word-search-celebration.is-little-travelers .word-search-celebration-card {
  width: min(880px, 98%);
}

.word-search-celebration.is-little-travelers .word-search-celebration-stage {
  min-height: clamp(230px, 38vw, 320px);
}

.has-word-search-celebration .word-search-board-wrap,
.has-word-search-celebration .word-search-list-panel {
  pointer-events: none;
}

.word-search-celebration-copy {
  position: relative;
  z-index: 2;
}

.word-search-celebration-copy h2 {
  margin: 0 0 14px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1;
}

.word-search-did-you-know {
  margin: 0 0 16px;
  border-left: 4px solid #96c6b3;
  background: rgba(255, 253, 248, 0.68);
  padding: 10px 12px;
}

.word-search-did-you-know .eyebrow {
  margin-bottom: 4px;
  color: var(--red);
  font-size: 0.74rem;
}

.word-search-did-you-know p:last-child {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.4;
}

.word-search-celebration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.celebration-water {
  position: absolute;
  inset: auto -18px -18px;
  height: 42%;
  border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  background:
    radial-gradient(ellipse at 18% 16%, rgba(255, 255, 255, 0.72), transparent 18%),
    radial-gradient(ellipse at 58% 12%, rgba(255, 255, 255, 0.5), transparent 15%),
    linear-gradient(180deg, #84c8d8, #2f8db5 62%, #1f6e98);
  box-shadow: inset 0 10px 20px rgba(255, 255, 255, 0.28);
}

.celebration-dolphin {
  position: absolute;
  left: 10%;
  bottom: 26%;
  width: clamp(88px, 14vw, 128px);
  height: clamp(38px, 6vw, 56px);
  border-radius: 70% 80% 60% 60%;
  background: #2c6f8f;
  transform: rotate(-12deg);
  box-shadow: inset -12px -8px 0 rgba(23, 77, 103, 0.42);
  animation: dolphin-jump 2100ms ease-in-out both;
}

.celebration-dolphin::before {
  position: absolute;
  right: -24%;
  top: 28%;
  border-width: 0.8em 0 0.8em 1.8em;
  border-style: solid;
  border-color: transparent transparent transparent #2c6f8f;
  content: "";
}

.celebration-dolphin::after {
  position: absolute;
  left: 36%;
  top: -50%;
  border-width: 0 0.75em 2em;
  border-style: solid;
  border-color: transparent transparent #2c6f8f;
  content: "";
}

@keyframes dolphin-jump {
  0% {
    transform: translate(-70%, 68%) rotate(-18deg);
    opacity: 0;
  }

  24% {
    opacity: 1;
  }

  58% {
    transform: translate(142%, -148%) rotate(12deg);
  }

  100% {
    transform: translate(320%, 62%) rotate(28deg);
    opacity: 0;
  }
}

.celebration-californiaSunset {
  background: linear-gradient(180deg, #f8c879, #f09b65 58%, #315f77 59%);
}

.celebration-sun {
  position: absolute;
  left: 18%;
  bottom: 36%;
  width: 118px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 219, 115, 0.9);
  animation: sunset-glow 1800ms ease-out both;
}

.celebration-coast {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(140deg, transparent 0 38%, #23475c 39% 100%);
}

.celebration-palm {
  position: absolute;
  right: 20%;
  bottom: 20%;
  width: 12px;
  height: 96px;
  background: #48351f;
  transform: rotate(8deg);
}

.celebration-palm::before {
  position: absolute;
  left: -46px;
  top: -24px;
  width: 104px;
  height: 44px;
  border-radius: 999px;
  background: #2f6d47;
  clip-path: polygon(50% 50%, 0 0, 42% 28%, 30% 0, 55% 30%, 74% 0, 66% 34%, 100% 10%, 72% 54%, 100% 84%, 60% 68%, 42% 100%, 42% 66%, 0 78%);
  content: "";
}

@keyframes sunset-glow {
  from {
    box-shadow: 0 0 0 rgba(255, 219, 115, 0);
  }

  to {
    box-shadow: 0 0 42px rgba(255, 219, 115, 0.72);
  }
}

.celebration-newYorkMarquee {
  background: linear-gradient(180deg, #142033, #0a3161);
}

.celebration-skyline,
.celebration-illinois-skyline {
  position: absolute;
  inset: auto 8% 0;
  height: 58%;
  background:
    linear-gradient(90deg, #1c2838 0 12%, transparent 12% 16%, #1c2838 16% 28%, transparent 28% 32%, #1c2838 32% 42%, transparent 42% 48%, #1c2838 48% 66%, transparent 66% 70%, #1c2838 70% 82%, transparent 82% 88%, #1c2838 88% 100%);
}

.celebration-marquee {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  border: 3px solid #f7d66a;
  background: #fff9ef;
  color: var(--red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  animation: marquee-lights 900ms steps(2, end) 3;
}

@keyframes marquee-lights {
  50% {
    box-shadow: 0 0 22px #f7d66a;
  }
}

.celebration-texasBluebonnets {
  background: linear-gradient(180deg, #fff0b8, #8cbf7b 62%);
}

.celebration-star {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 72px;
  aspect-ratio: 1;
  background: var(--navy);
  clip-path: polygon(50% 0, 61% 36%, 98% 36%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 36%, 39% 36%);
  opacity: 0.82;
}

.celebration-bluebonnets {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background:
    radial-gradient(circle at 9% 62%, #345db7 0 6px, transparent 7px),
    radial-gradient(circle at 17% 46%, #345db7 0 6px, transparent 7px),
    radial-gradient(circle at 29% 66%, #345db7 0 6px, transparent 7px),
    radial-gradient(circle at 43% 48%, #345db7 0 6px, transparent 7px),
    radial-gradient(circle at 55% 62%, #345db7 0 6px, transparent 7px),
    radial-gradient(circle at 70% 50%, #345db7 0 6px, transparent 7px),
    radial-gradient(circle at 84% 68%, #345db7 0 6px, transparent 7px),
    linear-gradient(180deg, transparent, rgba(47, 109, 71, 0.72));
  animation: bluebonnet-rise 900ms ease-out both;
}

@keyframes bluebonnet-rise {
  from {
    transform: translateY(36%);
  }

  to {
    transform: translateY(0);
  }
}

.celebration-illinoisSkyline {
  background: linear-gradient(180deg, #c9d7d9, #fff4d2 54%, #33515f 55%);
}

.celebration-city-lights {
  position: absolute;
  inset: auto 10% 20px;
  height: 44%;
  background:
    radial-gradient(circle at 14% 48%, #f7d66a 0 3px, transparent 4px),
    radial-gradient(circle at 29% 38%, #f7d66a 0 3px, transparent 4px),
    radial-gradient(circle at 42% 58%, #f7d66a 0 3px, transparent 4px),
    radial-gradient(circle at 58% 34%, #f7d66a 0 3px, transparent 4px),
    radial-gradient(circle at 76% 48%, #f7d66a 0 3px, transparent 4px);
  animation: city-lights 1200ms ease-out both;
}

@keyframes city-lights {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .word-search-celebration-stage *,
  .word-search-cell,
  .sudoku-board,
  .there-yet-page-face,
  .there-yet-route-highlight,
  .field-note-map-pin.is-new {
    animation: none !important;
    transition: none !important;
  }
}

.sudoku-page {
  padding-bottom: 28px;
}

.sudoku-hub {
  display: grid;
  gap: 14px;
}

.sudoku-controls {
  grid-template-columns: max-content minmax(190px, 260px) minmax(0, 1fr);
}

.sudoku-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sudoku-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 14px;
  align-items: start;
}

.sudoku-play-panel,
.sudoku-tool-panel {
  border: 2px solid var(--navy);
  background: var(--paper);
  padding: clamp(10px, 2vw, 16px);
}

.road-overseas {
  --sudoku-road-bg:
    linear-gradient(180deg, rgba(255, 249, 239, 0.1), rgba(10, 49, 97, 0.12)),
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.72), transparent 22%),
    linear-gradient(132deg, transparent 0 45%, rgba(255, 249, 239, 0.72) 46% 50%, transparent 51%),
    linear-gradient(180deg, #9ed4dd, #247fa7);
}

.road-route-66 {
  --sudoku-road-bg:
    linear-gradient(180deg, rgba(255, 249, 239, 0.1), rgba(10, 49, 97, 0.12)),
    linear-gradient(115deg, transparent 0 42%, rgba(37, 35, 31, 0.76) 43% 54%, transparent 55%),
    radial-gradient(circle at 72% 18%, rgba(255, 220, 120, 0.78), transparent 18%),
    linear-gradient(180deg, #dba65e, #c9793f 54%, #9f7447);
}

.road-glacier {
  --sudoku-road-bg:
    linear-gradient(180deg, rgba(255, 249, 239, 0.1), rgba(10, 49, 97, 0.12)),
    linear-gradient(135deg, transparent 0 50%, rgba(58, 60, 55, 0.78) 51% 56%, transparent 57%),
    radial-gradient(ellipse at 40% 20%, rgba(255, 255, 255, 0.85), transparent 28%),
    linear-gradient(150deg, #dfe9e5 0 35%, #6f8e70 36% 62%, #3c5f58 63% 100%);
}

.road-blue-ridge {
  --sudoku-road-bg:
    linear-gradient(180deg, rgba(255, 249, 239, 0.1), rgba(10, 49, 97, 0.12)),
    linear-gradient(120deg, transparent 0 46%, rgba(255, 249, 239, 0.56) 47% 51%, transparent 52%),
    radial-gradient(ellipse at 24% 64%, #5c7b63 0 28%, transparent 30%),
    radial-gradient(ellipse at 70% 58%, #355c65 0 34%, transparent 36%),
    linear-gradient(180deg, #b8d2d7, #698b78 64%);
}

.road-pacific-coast {
  --sudoku-road-bg:
    linear-gradient(180deg, rgba(255, 249, 239, 0.1), rgba(10, 49, 97, 0.12)),
    linear-gradient(128deg, #2d87ad 0 44%, #d9c17a 45% 53%, #5d734f 54% 100%),
    radial-gradient(circle at 18% 20%, rgba(255, 220, 120, 0.8), transparent 18%);
}

.sudoku-road-sign {
  position: relative;
  display: grid;
  gap: 4px;
  margin-top: 8px;
  border: 2px solid var(--navy);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(246, 229, 196, 0.92)),
    var(--paper);
  box-shadow: 0 7px 0 rgba(10, 49, 97, 0.12);
  padding: 14px 14px 16px;
}

.sudoku-road-sign::before,
.sudoku-road-sign::after {
  position: absolute;
  bottom: -18px;
  width: 6px;
  height: 18px;
  border-radius: 0 0 3px 3px;
  background: rgba(10, 49, 97, 0.62);
  content: "";
}

.sudoku-road-sign::before {
  left: 22%;
}

.sudoku-road-sign::after {
  right: 22%;
}

.sudoku-road-sign h2 {
  margin: 0 0 4px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.05;
}

.sudoku-road-sign p {
  margin: 0;
}

.sudoku-road-location,
.sudoku-road-route {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.35;
}

.sudoku-road-sign p:last-child {
  margin-top: 10px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.42;
}

.sudoku-board-header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sudoku-board-header h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1;
}

.sudoku-status,
.sudoku-instructions {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.sudoku-status {
  max-width: 280px;
  text-align: right;
}

.sudoku-instructions {
  margin-bottom: 12px;
}

.sudoku-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--sudoku-size), minmax(0, 1fr));
  width: min(100%, 620px);
  margin: 0 auto;
  border: 3px solid var(--navy);
  background: var(--paper);
  filter: saturate(0.92);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: filter 700ms ease;
}

.sudoku-board::before,
.sudoku-board::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.sudoku-board::before {
  z-index: -2;
  background: var(--sudoku-road-bg, var(--sudoku-road-image, none));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.56;
}

.sudoku-board::after {
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.88), rgba(232, 212, 180, 0.72)),
    rgba(255, 249, 239, 0.54);
  box-shadow: inset 0 0 0 1px rgba(10, 49, 97, 0.08);
}

.sudoku-board:focus-visible {
  outline: 3px solid #96c6b3;
  outline-offset: 4px;
}

.has-sudoku-completed-road .sudoku-board {
  filter: saturate(1.08) contrast(1.03);
}

.sudoku-cell {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: 0;
  border-right: 1.5px solid rgba(10, 49, 97, 0.72);
  border-bottom: 1.5px solid rgba(10, 49, 97, 0.72);
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: clamp(1rem, 4vw, 1.9rem);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}

.sudoku-4 .sudoku-cell {
  font-size: clamp(1.8rem, 9vw, 3rem);
}

.sudoku-6 .sudoku-cell {
  font-size: clamp(1.25rem, 6vw, 2.25rem);
}

.sudoku-cell.has-box-right {
  box-shadow: inset -3px 0 0 var(--navy);
}

.sudoku-cell.has-box-bottom {
  border-bottom: 3px solid var(--navy);
}

.sudoku-cell.is-given {
  background: rgba(255, 249, 239, 0.14);
  color: var(--ink);
}

.sudoku-cell.is-player {
  color: var(--navy);
}

.sudoku-cell.is-related {
  background: rgba(150, 198, 179, 0.18);
}

.sudoku-cell.is-selected {
  outline: 3px solid var(--navy);
  outline-offset: -6px;
  background: rgba(150, 198, 179, 0.34);
  box-shadow: inset 0 0 0 2px rgba(255, 253, 248, 0.9);
}

.sudoku-cell.has-conflict {
  background:
    linear-gradient(135deg, rgba(191, 13, 62, 0.08), rgba(255, 249, 239, 0.9)),
    #fffdf8;
}

.sudoku-cell.has-conflict::after {
  position: absolute;
  top: 4px;
  right: 5px;
  color: var(--red);
  content: "!";
  font-size: 0.72rem;
  font-weight: 900;
}

.sudoku-value {
  display: block;
}

.sudoku-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  width: 82%;
  color: var(--muted);
  font-size: clamp(0.52rem, 1.7vw, 0.78rem);
  font-weight: 900;
  line-height: 1;
}

.sudoku-4 .sudoku-notes-grid {
  grid-template-columns: repeat(2, 1fr);
  font-size: clamp(0.78rem, 3.8vw, 1.05rem);
}

.sudoku-6 .sudoku-notes-grid {
  grid-template-columns: repeat(3, 1fr);
  font-size: clamp(0.64rem, 2.5vw, 0.9rem);
}

.sudoku-tool-panel {
  display: grid;
  gap: 10px;
}

.sudoku-number-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sudoku-number-pad[style*="--sudoku-size: 4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sudoku-number-pad[style*="--sudoku-size: 6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sudoku-number-button {
  display: grid;
  place-items: center;
  min-height: 46px;
  border: 2px solid var(--navy);
  background: #fffdf8;
  color: var(--navy);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
}

.sudoku-number-button:hover,
.sudoku-number-button:focus-visible,
.sudoku-toggle.is-active {
  background: #96c6b3;
  color: var(--ink);
}

.sudoku-tool-panel .game-action-button {
  width: 100%;
}

.has-sudoku-celebration .sudoku-play-panel,
.has-sudoku-celebration .sudoku-tool-panel {
  pointer-events: none;
}

.sudoku-completion {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(10, 49, 97, 0.18);
  background: rgba(255, 249, 239, 0.68);
  backdrop-filter: blur(1px);
  padding: clamp(14px, 4vw, 28px);
}

.sudoku-completion[hidden] {
  display: none;
}

.sudoku-completion-card {
  position: relative;
  width: min(560px, 96%);
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(246, 229, 196, 0.94)),
    var(--paper);
  box-shadow: 0 20px 48px rgba(10, 49, 97, 0.2);
  padding: clamp(18px, 3vw, 28px);
}

.sudoku-completion-close {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(10, 49, 97, 0.28);
  background: rgba(255, 253, 248, 0.92);
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.sudoku-completion-copy h2 {
  margin: 0 0 14px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1;
}

.sudoku-completion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sudoku-completion-close:focus-visible,
.sudoku-completion-actions :focus-visible {
  outline: 3px solid #96c6b3;
  outline-offset: 3px;
}

.easy-read .sudoku-cell {
  font-size: clamp(1.2rem, 4.5vw, 2.15rem);
}

.easy-read .sudoku-4 .sudoku-cell {
  font-size: clamp(2rem, 10vw, 3.25rem);
}

.easy-read .sudoku-status,
.easy-read .sudoku-instructions {
  font-size: 1rem;
  line-height: 1.55;
}

.postcard-page {
  padding-bottom: 28px;
}

.postcard-hub {
  display: grid;
  gap: 14px;
}

.postcard-controls {
  grid-template-columns: max-content minmax(190px, 260px) minmax(0, 1fr);
}

.postcard-step {
  display: grid;
  gap: 14px;
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.96), rgba(232, 212, 180, 0.76)),
    var(--paper);
  padding: clamp(14px, 2.4vw, 20px);
}

.postcard-step[hidden],
.postcard-result[hidden] {
  display: none;
}

.postcard-step h2,
.postcard-result h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.7vw, 2.1rem);
  line-height: 1;
}

.postcard-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.postcard-category-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 148px;
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.92), rgba(246, 229, 196, 0.72)),
    var(--paper);
  color: var(--navy);
  font: inherit;
  font-weight: 900;
  line-height: 1.35;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.postcard-category-card span:last-child {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 800;
}

.postcard-category-card:hover,
.postcard-category-card:focus-visible,
.postcard-choice:hover,
.postcard-choice:focus-visible,
.postcard-choice.is-selected {
  background: #96c6b3;
  color: var(--ink);
}

.postcard-step-header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}

.postcard-form {
  display: grid;
  gap: 14px;
}

.postcard-prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.postcard-prompt {
  display: grid;
  gap: 7px;
  margin: 0;
  border: 1.5px solid rgba(10, 49, 97, 0.28);
  background: rgba(255, 253, 248, 0.72);
  padding: 12px;
}

.postcard-prompt span,
.postcard-prompt legend {
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.25;
}

.postcard-prompt input {
  width: 100%;
  min-height: 44px;
  border: 2px solid var(--navy);
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 8px 10px;
}

.postcard-prompt small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.postcard-choice-prompt {
  border: 1.5px solid rgba(10, 49, 97, 0.28);
}

.postcard-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.postcard-choice {
  min-height: 48px;
  border: 2px solid var(--navy);
  background: #fffdf8;
  color: var(--navy);
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.postcard-form-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--red);
  font-weight: 900;
}

.postcard-send-button {
  justify-self: start;
}

.postcard-result {
  display: grid;
  gap: 12px;
}

.postcard-result-surface {
  position: relative;
  overflow: hidden;
  border: 0;
  background:
    repeating-linear-gradient(135deg, var(--red) 0 18px, #fff9ef 18px 34px, var(--navy) 34px 52px, #fff9ef 52px 68px);
  box-shadow: 0 12px 0 rgba(10, 49, 97, 0.1);
  padding: clamp(12px, 1.8vw, 18px);
}

.postcard-result-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  gap: clamp(22px, 4vw, 42px);
  min-height: 520px;
  background:
    radial-gradient(circle at 12% 16%, rgba(232, 212, 180, 0.2), transparent 24%),
    radial-gradient(circle at 88% 72%, rgba(232, 212, 180, 0.18), transparent 24%),
    linear-gradient(90deg, rgba(255, 253, 248, 0.98), rgba(255, 249, 239, 0.94)),
    var(--paper);
  color: var(--navy);
  padding: clamp(24px, 4vw, 42px);
}

.postcard-story-side {
  display: grid;
  align-content: start;
  border-right: 2px solid rgba(10, 49, 97, 0.62);
  padding-right: clamp(18px, 3vw, 36px);
}

.postcard-story-side h2 {
  font-size: clamp(2rem, 4.5vw, 4rem);
  letter-spacing: 0;
}

.postcard-divider-flourish {
  display: grid;
  place-items: center;
  margin: 18px 0 24px;
  color: var(--navy);
}

.postcard-divider-flourish span {
  display: block;
  width: min(360px, 90%);
  height: 22px;
  background:
    radial-gradient(circle at 50% 50%, var(--navy) 0 2px, transparent 3px),
    linear-gradient(90deg, var(--navy) 0 32%, transparent 32% 68%, var(--navy) 68% 100%);
  opacity: 0.88;
}

.postcard-divider-flourish::after {
  margin-top: -22px;
  color: var(--navy);
  content: "+";
  font-size: 2rem;
  font-weight: 900;
}

.postcard-address-side {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}

.postcard-mail-top {
  position: relative;
  min-height: 126px;
}

.postcard-state-stamp {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 142px;
  min-height: 128px;
  border: 2px dashed rgba(10, 49, 97, 0.45);
  background:
    linear-gradient(180deg, rgba(225, 242, 240, 0.98), rgba(255, 249, 239, 0.94)),
    var(--paper);
  box-shadow: inset 0 0 0 4px rgba(255, 253, 248, 0.86);
  color: var(--navy);
  padding: 8px;
  text-align: center;
}

.postcard-stamp-state {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  font-weight: 900;
  text-transform: uppercase;
}

.postcard-stamp-art {
  position: relative;
  display: block;
  min-height: 58px;
}

.stamp-florida .postcard-stamp-art::before,
.stamp-florida .postcard-stamp-art::after {
  position: absolute;
  border-radius: 999px;
  background: #e87822;
  box-shadow: inset -5px -5px 0 rgba(160, 82, 28, 0.22);
  content: "";
}

.stamp-florida .postcard-stamp-art::before {
  left: 34px;
  top: 18px;
  width: 42px;
  height: 42px;
}

.stamp-florida .postcard-stamp-art::after {
  right: 22px;
  top: 30px;
  width: 34px;
  height: 34px;
}

.stamp-compass .postcard-stamp-art::before {
  display: grid;
  place-items: center;
  height: 58px;
  color: var(--navy);
  content: "+";
  font-size: 2.2rem;
}

.postcard-stamp-price {
  justify-self: end;
  color: rgba(10, 49, 97, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 900;
}

.postcard-postmark {
  position: absolute;
  top: 18px;
  right: 126px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border: 3px solid rgba(20, 20, 20, 0.82);
  border-radius: 999px;
  color: rgba(20, 20, 20, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

.postcard-postmark span:last-child {
  margin-top: -22px;
}

.postcard-cancel-lines {
  position: absolute;
  top: 34px;
  right: 54px;
  z-index: 3;
  display: grid;
  gap: 8px;
  width: 230px;
  pointer-events: none;
}

.postcard-cancel-lines span {
  height: 13px;
  border-top: 2px solid rgba(20, 20, 20, 0.82);
  border-radius: 50%;
}

.postcard-illustration {
  position: relative;
  min-height: 260px;
  color: var(--navy);
}

.sketch-sun {
  position: absolute;
  top: 16px;
  left: 34px;
  width: 48px;
  aspect-ratio: 1;
  border: 4px solid #e7a31c;
  border-radius: 999px;
  box-shadow: 0 0 0 8px rgba(231, 163, 28, 0.14);
}

.sketch-cloud {
  position: absolute;
  width: 88px;
  height: 28px;
  border: 3px dashed #6aa6bf;
  border-radius: 999px;
}

.sketch-cloud-one {
  top: 28px;
  left: 170px;
}

.sketch-cloud-two {
  top: 78px;
  left: 220px;
  width: 72px;
}

.sketch-traveler {
  position: absolute;
  left: 28px;
  top: 104px;
  width: 70px;
  height: 112px;
  border: 4px solid #2f2a26;
  border-radius: 46% 46% 38% 38%;
  background: rgba(255, 253, 248, 0.38);
}

.sketch-traveler::before {
  position: absolute;
  top: 30px;
  right: -18px;
  width: 24px;
  height: 9px;
  border-radius: 999px;
  background: #e87822;
  content: "";
}

.sketch-car {
  position: absolute;
  top: 132px;
  left: 130px;
  width: 146px;
  height: 62px;
  border: 4px solid #d45f2d;
  border-radius: 46px 46px 18px 18px;
  background: rgba(232, 120, 34, 0.2);
}

.sketch-car::before,
.sketch-car::after {
  position: absolute;
  bottom: -18px;
  width: 28px;
  aspect-ratio: 1;
  border: 4px solid #2f2a26;
  border-radius: 999px;
  background: #fff9ef;
  content: "";
}

.sketch-car::before {
  left: 20px;
}

.sketch-car::after {
  right: 20px;
}

.sketch-sign {
  position: absolute;
  left: 32px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 224px;
  min-height: 72px;
  border: 5px solid #6f4b2d;
  background: rgba(111, 75, 45, 0.9);
  color: #fff9ef;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.postcard-address-block {
  display: grid;
  gap: 8px;
  align-self: center;
  max-width: 360px;
  margin-left: auto;
  color: var(--navy);
}

.postcard-address-block p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
}

.postcard-address-block span {
  display: block;
  border-bottom: 2px solid rgba(10, 49, 97, 0.78);
  font-family: "Segoe Print", "Bradley Hand ITC", cursive;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  padding-bottom: 4px;
}

.postcard-wordmark {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: 0.22em;
}

.postcard-wordmark span {
  height: 2px;
  background: var(--red);
}

.postcard-story-text {
  margin-top: 16px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.5vw, 1.35rem);
  font-weight: 800;
  line-height: 1.62;
}

.postcard-story-text p {
  margin: 0 0 14px;
}

.postcard-player-word {
  background: transparent;
  color: var(--red);
  font: inherit;
  font-weight: 900;
}

.postcard-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.postcard-save-button:disabled {
  cursor: default;
  opacity: 0.72;
}

.postcard-filing-dialog {
  width: min(92vw, 520px);
  max-height: min(86vh, 720px);
  overflow: auto;
  border: 2px solid var(--navy);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(246, 229, 196, 0.9)),
    var(--paper);
  color: var(--ink);
  padding: 0;
  box-shadow: 0 18px 40px rgba(10, 49, 97, 0.28);
}

.postcard-filing-dialog::backdrop {
  background: rgba(10, 49, 97, 0.58);
}

.postcard-filing-form {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 4vw, 28px);
}

.postcard-filing-header {
  display: flex;
  gap: 16px;
  align-items: start;
  justify-content: space-between;
}

.postcard-filing-header h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 4vw, 2.2rem);
  line-height: 1;
}

.postcard-filing-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  min-height: 42px;
  border: 2px solid var(--navy);
  background: #fffdf8;
  color: var(--navy);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.postcard-filing-intro,
.postcard-filing-status,
.postcard-filing-field small {
  margin: 0;
  line-height: 1.45;
}

.postcard-filing-intro {
  color: var(--navy);
  font-weight: 800;
}

.postcard-filing-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.postcard-filing-field span {
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.postcard-filing-field input,
.postcard-filing-field select {
  width: 100%;
  min-height: 46px;
  border: 2px solid var(--navy);
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 9px 10px;
}

.postcard-filing-field small {
  color: var(--muted);
  font-weight: 800;
}

.postcard-filing-status {
  min-height: 1.45em;
  color: var(--navy);
  font-weight: 900;
}

.postcard-save-status {
  min-height: 1.45em;
  margin: 0;
  color: var(--navy);
  font-weight: 900;
  line-height: 1.45;
}

.postcard-filing-status[data-tone="error"] {
  color: var(--red);
}

.postcard-filing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: end;
}

.easy-read .postcard-category-card,
.easy-read .postcard-prompt input,
.easy-read .postcard-choice,
.easy-read .postcard-story-text,
.easy-read .postcard-filing-field input,
.easy-read .postcard-filing-field select {
  font-size: 1.08rem;
  line-height: 1.6;
}

.field-notes-page {
  padding-bottom: 28px;
  background: var(--navy);
  color: var(--paper);
}

.field-notes-page .map-intro {
  border-bottom-color: rgba(255, 249, 239, 0.42);
}

.field-notes-page .map-intro .eyebrow {
  color: var(--red);
  text-shadow: 0 1px 0 rgba(255, 249, 239, 0.32);
}

.field-notes-page .map-intro h1 {
  color: var(--paper);
}

.field-notes-page .map-intro p:not(.eyebrow) {
  color: rgba(255, 249, 239, 0.88);
}

.field-notes-hub {
  display: grid;
  gap: 18px;
  border-color: rgba(255, 249, 239, 0.26);
  background: transparent;
  box-shadow: none;
}

.field-notes-map-shell {
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 2px solid var(--navy);
  background: var(--paper);
  padding: clamp(14px, 3vw, 28px);
}

.field-notes-map-art {
  position: relative;
  isolation: isolate;
  width: min(100%, 960px);
  aspect-ratio: 959 / 593;
  overflow: hidden;
  border: 1.5px solid rgba(10, 49, 97, 0.32);
  background: var(--paper);
  box-shadow: 0 8px 18px rgba(76, 58, 34, 0.16);
}

.field-notes-relief-map,
.field-notes-hit-map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.field-notes-relief-map {
  z-index: 1;
  object-fit: cover;
}

.field-notes-hit-map {
  z-index: 2;
  pointer-events: auto;
}

.field-notes-pin-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.field-note-map-pin:focus-visible { outline: 3px solid #bf0d3e; outline-offset: 4px; }

.field-note-map-pin {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 999px 999px 999px 0;
  background: #1f77c9;
  box-shadow: 0 3px 8px rgba(10, 49, 97, 0.26);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -100%) rotate(-45deg);
  transform-origin: 50% 100%;
}

.field-note-map-pin::after {
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #fff;
  content: "";
}

/* Only owned marker hit areas capture touch dragging; the map still scrolls normally. */
.field-note-map-pin.is-owned { touch-action: none; cursor: grab; }
.field-note-map-pin.is-owned:active { cursor: grabbing; }
.field-note-map-pin.is-moving { z-index: 2; outline: 3px solid #bf0d3e; outline-offset: 3px; }
.field-note-map-pin.is-cluster {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #0a3161;
  color: #fff;
  font: bold 13px/1 Georgia, serif;
}
.field-note-map-pin.is-cluster::after { content: none; }
.field-note-dialog.field-note-preview-dialog {
  width: min(380px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  background: linear-gradient(135deg, rgba(232, 212, 180, 0.3), transparent 65%), var(--paper);
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(10, 49, 97, 0.18), 0 2px 4px rgba(10, 49, 97, 0.1);
}
.field-note-preview-dialog .field-note-form {
  overflow-wrap: anywhere; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  padding: 16px 20px 20px; max-height: calc(100dvh - 36px);
}
.field-note-preview-dialog .field-note-form > * { grid-column: 1 / -1; }
.field-note-preview-dialog .field-note-form > .eyebrow {
  grid-column: 1; grid-row: 1; margin: 0; align-self: center;
  color: var(--red); font-size: 0.7rem; letter-spacing: 0.12em;
}
.field-note-preview-dialog .field-note-form > h2 {
  margin: 0; color: var(--navy); font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 5vw, 1.5rem); line-height: 1.15;
}
.field-note-preview-dialog .quest-link.field-note-preview-close,
.field-note-preview-dialog .quest-link.field-note-preview-owner {
  width: auto; min-height: 44px; padding: 6px 8px; background: transparent; color: #0a3161;
  border: 0; box-shadow: none; text-decoration: underline; font-size: 0.8rem; justify-self: start;
}
.field-note-preview-dialog .quest-link.field-note-preview-close {
  grid-column: 2; grid-row: 1; justify-self: end; min-height: 32px; padding: 4px 0 4px 8px; font-size: 0.7rem;
}
.field-note-preview-location p,
.field-note-preview-visit p { margin: 0; font-size: 0.8rem; line-height: 1.5; }
.field-note-preview-location strong { text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em; }
.field-note-preview-story { color: var(--navy); line-height: 1.6; font-size: 0.95rem; border-top: 1px solid var(--line); padding-top: 12px; }
.field-note-preview-story p { margin: 0 0 12px; white-space: pre-wrap; }
.field-note-preview-story p:last-child { margin-bottom: 0; }
.field-note-preview-story strong { display: block; margin-bottom: 4px; font-size: 0.7rem; letter-spacing: 0.06em; }
.field-note-save { border-top: 1px solid var(--line); padding-top: 12px; }
.field-note-save .quest-link { max-width: 100%; white-space: normal; }
.field-note-save p { white-space: pre-line; font-size: 0.85rem; line-height: 1.5; margin: 8px 0 0; }
.field-note-save button:disabled { opacity: 0.65; cursor: default; }
.saved-field-note-item { border-top: 1px solid var(--line); padding-top: 12px; }
.saved-field-note-item h3 { font: bold 1.1rem/1.3 Georgia, serif; color: var(--navy); margin: 0 0 6px; }
.saved-field-note-item p { font-size: 0.9rem; line-height: 1.5; margin: 0 0 8px; }
.saved-field-note-item .quest-link { width: auto; font-size: 0.75rem; }
.field-note-cluster-list { display: grid; gap: 8px; }
.field-note-cluster-list .quest-link { white-space: normal; text-align: left; }
.field-note-move-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: #0a3161; }
.field-note-move-tools[hidden] { display: none; }
.field-note-move-tools p { flex: 1 1 220px; font-size: 0.9rem; }

.field-note-map-pin.is-new {
  animation: field-note-pin-pulse 1200ms ease-out 1;
}

@keyframes field-note-pin-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(31, 119, 201, 0.42),
      0 3px 8px rgba(10, 49, 97, 0.26);
  }

  70% {
    box-shadow:
      0 0 0 18px rgba(31, 119, 201, 0),
      0 3px 8px rgba(10, 49, 97, 0.26);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(31, 119, 201, 0),
      0 3px 8px rgba(10, 49, 97, 0.26);
  }
}

.field-notes-contribution {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 2px solid var(--navy);
  background:
    linear-gradient(90deg, rgba(255, 249, 239, 0.94), rgba(232, 212, 180, 0.64)),
    var(--paper);
  padding: clamp(14px, 2vw, 20px);
}

.field-notes-contribution h2,
.field-note-dialog-header h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
}

.field-notes-contribution h2 {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
}

.field-notes-contribution p:not(.eyebrow) {
  max-width: 700px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.45;
}

.field-note-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 900;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
}

.field-note-primary-button:hover,
.field-note-primary-button:focus-visible {
  background: var(--red);
  border-color: var(--red);
}

.field-note-pin-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid #fff;
  border-radius: 999px 999px 999px 0;
  background: #1f77c9;
  transform: rotate(-45deg);
}

.field-note-pin-icon::after {
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: #fff;
  content: "";
}

.field-note-dialog {
  width: min(920px, calc(100% - 24px));
  max-height: min(880px, calc(100vh - 24px));
  border: 2px solid var(--navy);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
}

.field-note-dialog::backdrop {
  background: rgba(20, 32, 51, 0.52);
}

.field-note-form {
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: clamp(16px, 3vw, 24px);
}

.field-note-dialog-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 14px;
}

.field-note-dialog-header h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.field-note-close-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 2px solid var(--navy);
  background: var(--paper);
  color: var(--navy);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.field-note-fieldset {
  display: grid;
  gap: 12px;
  margin: 0;
  border: 1.5px solid var(--line);
  background: rgba(255, 249, 239, 0.72);
  padding: 14px;
}

.field-note-fieldset legend {
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field-note-grid {
  display: grid;
  gap: 12px;
}

.field-note-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-note-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-note-form label,
.field-note-season-group {
  display: grid;
  gap: 6px;
}

.field-note-form label span,
.field-note-season-group p {
  margin: 0;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.25;
}

.field-note-form input[type="text"],
.field-note-form input[type="file"],
.field-note-form select,
.field-note-form textarea {
  width: 100%;
  min-height: 40px;
  border: 1.5px solid var(--navy);
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 8px 10px;
}

.field-note-form textarea {
  resize: vertical;
}

.field-note-adaptive-fields {
  display: grid;
  gap: 10px;
}

.field-note-adaptive-field {
  animation: field-note-adaptive-reveal 230ms ease-out both;
}

.field-note-adaptive-field[hidden] {
  display: none;
}

@keyframes field-note-adaptive-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-note-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.field-note-checkbox-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
}

.field-note-checkbox-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
}

.field-note-open-hours {
  max-width: 420px;
}

.field-note-postcard p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.field-note-postcard-preview {
  width: min(100%, 360px);
  margin: 0;
  border: 1.5px solid var(--navy);
  background: #fffdf8;
  padding: 10px;
}

.field-note-postcard-preview[hidden] {
  display: none;
}

.field-note-postcard-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.field-note-form-status {
  min-height: 1.3em;
  margin: 0;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 900;
}

.field-note-dialog-actions {
  display: flex;
  justify-content: end;
  gap: 10px;
}

.safari-hub {
  display: grid;
  gap: 14px;
}

.safari-controls {
  grid-template-columns: max-content minmax(180px, 250px) minmax(0, 1fr);
}

.safari-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid var(--navy);
  background: rgba(255, 249, 239, 0.86);
  padding: 10px 12px;
}

.safari-score-row p {
  margin: 0;
  color: var(--navy);
  font-weight: 900;
}

.safari-challenge {
  flex: 1;
  color: var(--red);
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: center;
}

.safari-challenge[hidden] {
  display: none;
}

.safari-reset {
  margin: 0;
}

.safari-round-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.safari-timer {
  min-width: 74px;
  margin: 0;
  border-color: var(--red);
  background: var(--red);
}

.safari-timer.is-running {
  box-shadow: 0 0 0 3px rgba(191, 13, 62, 0.18);
}

.safari-finale {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 26%, rgba(191, 13, 62, 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 25% 64%, rgba(232, 212, 180, 0.95) 0 5px, transparent 6px),
    radial-gradient(circle at 36% 18%, rgba(10, 49, 97, 0.82) 0 3px, transparent 4px),
    radial-gradient(circle at 44% 78%, rgba(191, 13, 62, 0.78) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 22%, rgba(232, 212, 180, 0.96) 0 5px, transparent 6px),
    radial-gradient(circle at 69% 68%, rgba(10, 49, 97, 0.86) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 34%, rgba(191, 13, 62, 0.8) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 76%, rgba(232, 212, 180, 0.92) 0 4px, transparent 5px);
}

.safari-finale[hidden] {
  display: none;
}

.safari-finale span {
  position: relative;
  display: grid;
  place-items: center;
  width: min(220px, 54vw);
  aspect-ratio: 1 / 1;
  border: 4px solid var(--red);
  border-radius: 999px;
  background: rgba(255, 249, 239, 0.94);
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 10vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 20px 50px rgba(10, 49, 97, 0.24);
}

.safari-finale span::before,
.safari-finale span::after {
  content: "";
  position: absolute;
  inset: -64px;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, var(--red) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 12%, var(--cream) 0 5px, transparent 6px),
    radial-gradient(circle at 96% 50%, var(--navy) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 86%, var(--red) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 100%, var(--cream) 0 5px, transparent 6px),
    radial-gradient(circle at 18% 86%, var(--navy) 0 4px, transparent 5px),
    radial-gradient(circle at 4% 50%, var(--red) 0 4px, transparent 5px),
    radial-gradient(circle at 22% 12%, var(--cream) 0 5px, transparent 6px);
}

.safari-finale span::after {
  inset: -96px;
  opacity: 0.78;
  transform: rotate(24deg);
}

.safari-finale.is-active {
  animation: safari-burst 900ms ease-out both;
}

.safari-finale.is-active span {
  animation: safari-pop 900ms ease-out both;
}

.safari-finale.is-active span::before {
  animation: safari-sparkle-ring 900ms ease-out both;
}

.safari-finale.is-active span::after {
  animation: safari-sparkle-ring-wide 900ms ease-out both;
}

@keyframes safari-burst {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes safari-pop {
  0% {
    transform: scale(0.72) rotate(-3deg);
  }
  42% {
    transform: scale(1.08) rotate(2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes safari-sparkle-ring {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(0deg);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.35) rotate(18deg);
  }
}

@keyframes safari-sparkle-ring-wide {
  0% {
    opacity: 0;
    transform: scale(0.28) rotate(24deg);
  }
  22% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(1.55) rotate(-16deg);
  }
}

.safari-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.safari-card {
  position: relative;
  min-height: 168px;
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font: inherit;
  perspective: 900px;
  cursor: pointer;
}

.safari-card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 249, 239, 0.88), rgba(232, 212, 180, 0.72)),
    var(--paper);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(10, 49, 97, 0.08);
  transition: transform 240ms ease;
}

.safari-card-front {
  transform: rotateY(0deg);
}

.safari-card-back {
  transform: rotateY(180deg);
}

.safari-card.is-found .safari-card-front {
  transform: rotateY(-180deg);
}

.safari-card.is-found .safari-card-back {
  transform: rotateY(0deg);
}

.safari-image {
  display: grid;
  place-items: center;
  width: min(118px, 72%);
  aspect-ratio: 1 / 1;
  line-height: 1;
}

.safari-icon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(10, 49, 97, 0.18));
}

.safari-icon-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 6vw, 4.7rem);
  font-weight: 900;
}

.safari-youngest {
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-transform: uppercase;
}

.safari-state-name {
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.safari-fact {
  max-height: 72px;
  margin: 0;
  overflow: auto;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.28;
  text-align: center;
}

.plate-progress {
  margin: 0;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: left;
}

.map-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.map-shell,
.state-card {
  position: relative;
  border: 2px solid var(--navy);
  background: var(--paper);
}

.map-shell {
  padding: clamp(10px, 2vw, 18px);
}

.reset-icon-button {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px dashed var(--navy);
  background: rgba(255, 249, 239, 0.9);
  box-shadow: 0 3px 10px rgba(10, 49, 97, 0.16);
  color: var(--navy);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.reset-icon-button:hover,
.reset-icon-button:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.map-reset-button {
  right: 14px;
  bottom: 14px;
}

.state-map {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 280px;
}

.state-map svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  overflow: visible;
}

.state-map .state-path {
  fill: var(--cream);
  stroke: var(--navy);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition:
    fill 160ms ease,
    opacity 160ms ease,
    stroke 160ms ease;
}

.state-map .state-path:hover,
.state-map .state-path:focus-visible {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 2.4;
}

.state-map .state-path:focus {
  /* SVG's native focus outline follows the bounding box, not the state. */
  outline: none;
}

.state-map .state-path.is-selected {
  fill: var(--navy);
  stroke: var(--navy);
}

.state-map .state-path.is-dimmed {
  opacity: 0.22;
}

.state-map .state-path.is-match {
  fill: var(--navy);
  stroke: var(--navy);
  stroke-width: 2.2;
}

.state-map .state-path.is-visited {
  fill: #9fcdb1;
  stroke: var(--navy);
}

.state-map .state-path.is-locked-state:not(.is-match):not(.is-selected) {
  opacity: 0.5;
}

.state-map .state-path:focus-visible {
  stroke: var(--red);
  stroke-width: 3;
  filter: drop-shadow(0 0 2px var(--paper));
}

@media (forced-colors: active) {
  .state-map .state-path:focus-visible {
    stroke: Highlight;
    filter: none;
  }
}

.state-map text,
.state-map .state-label,
.state-map title {
  pointer-events: none;
}

.state-map .plate-badge {
  pointer-events: none;
}

.map-loading,
.map-error {
  margin: 0;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.state-card {
  display: flex;
  flex-direction: column;
  position: static;
  height: var(--stable-card-height, auto);
  min-height: 0;
  max-height: var(--stable-card-height, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.state-card.is-locked {
  position: relative;
}

.state-card.is-locked dl,
.state-card.is-locked .quest-links {
  filter: blur(5px);
  opacity: 0.45;
  user-select: none;
  pointer-events: none;
}

.locked-card-message {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  padding: 18px;
  border: 2px solid var(--navy);
  background: rgba(232, 212, 180, 0.96);
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.state-card h2 {
  margin-bottom: 12px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1;
}

.build-card {
  container: tracker-builder / inline-size;
  min-height: clamp(345px, 39vw, 437px);
  height: auto;
  max-height: none;
  overflow: visible;
}

.state-card.build-card {
  overscroll-behavior-y: auto;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  height: auto;
  max-height: none;
  overflow: visible;
}

.tracker-state-workspace {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  position: relative;
  overflow: visible;
  padding: 12px clamp(12px, 1.2vw, 16px) 16px;
  border: 2px solid rgba(69, 42, 18, 0.74);
  border-radius: 12px;
  background: #b78345;
  box-shadow:
    0 18px 32px rgba(10, 49, 97, 0.2),
    inset 0 0 0 1px rgba(255, 249, 239, 0.26);
  isolation: isolate;
}

.tracker-state-workspace::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: url("assets/tracker/corkboard.png") center / cover no-repeat;
  opacity: 0.74;
  pointer-events: none;
}

.tracker-state-workspace::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 249, 239, 0.16), rgba(82, 45, 18, 0.14)),
    radial-gradient(circle at 52% 44%, rgba(159, 205, 177, 0.18), transparent 42%);
  pointer-events: none;
}

.tracker-state-workspace > * {
  position: relative;
  z-index: 1;
}

.build-card h2 {
  margin-bottom: 10px;
}

.builder-state-title {
  align-self: stretch;
  margin: clamp(2px, 0.45vw, 7px) 0 0;
  color: rgba(10, 49, 97, 0.92);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.55rem, 5.3vw, 5.25rem);
  line-height: 0.86;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 249, 239, 0.42);
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.state-builder {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(280px, 1.08fr) minmax(230px, 1fr);
  align-items: start;
  gap: clamp(12px, 1.5vw, 18px);
  width: 100%;
  min-height: 0;
  min-width: 0;
}

.state-builder[hidden],
.builder-empty[hidden] {
  display: none;
}

.builder-right-rail {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.25vw, 16px);
  align-self: start;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.builder-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 12px;
  border: 1.5px solid var(--line);
  background: rgba(255, 249, 239, 0.76);
}

.builder-label,
.icon-picker legend {
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.builder-notes {
  min-width: 0;
}

.builder-notes textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 180px;
  resize: none;
  border: 1.5px solid var(--navy);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.35;
  overflow-y: auto;
  padding: 9px;
}

.builder-save-button {
  width: 100%;
  max-width: 100%;
  min-height: 32px;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.builder-save-status {
  min-height: 1em;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.state-story-prompt {
  display: grid;
  padding: 0;
  border: 1px solid rgba(10, 49, 97, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 249, 231, 0.78), rgba(232, 212, 180, 0.5));
  box-shadow: inset 0 0 0 1px rgba(255, 249, 231, 0.42);
}

.state-story-prompt[hidden] {
  display: none;
}

.state-story-prompt a {
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  padding: 6px 8px;
  border: 1.5px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.state-story-prompt a:hover,
.state-story-prompt a:focus-visible {
  background: var(--red);
}

.builder-mini-state {
  min-width: 0;
}

.state-status-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.state-status-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1.5px solid rgba(10, 49, 97, 0.3);
  background: rgba(255, 249, 239, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 239, 0.62);
}

.visited-status-toggle {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 2px solid var(--navy);
  background: rgba(255, 249, 239, 0.98);
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.08;
  text-transform: uppercase;
  cursor: pointer;
}

.visited-status-toggle span {
  min-width: 0;
}

.visited-status-toggle input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
}

.visited-date-fields {
  display: grid;
  gap: 5px;
}

.visited-date-title {
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.visited-date-row {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) max-content minmax(76px, 0.64fr);
  align-items: end;
  gap: 7px;
  min-width: 0;
}

.visited-date-or {
  align-self: center;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  padding-top: 15px;
}

.visited-date-fields label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
}

.visited-date-fields input {
  min-width: 0;
  min-height: 30px;
  width: 100%;
  border: 1.5px solid var(--navy);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
  padding: 4px 5px;
}

.state-color-control {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 8px 10px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  border: 1.5px solid var(--navy);
  background: rgba(255, 249, 239, 0.98);
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  overflow: visible;
  padding: 11px;
}

.state-color-control > [data-color-card-heading] {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  cursor: pointer;
}

.state-color-control small {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}

.state-color-control__swatch {
  grid-column: 2;
  grid-row: 1;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--navy);
  background: var(--selected-state-color, #9fcdb1);
  pointer-events: none;
}

.state-color-control input[type="color"] {
  grid-column: 2;
  grid-row: 1;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 0;
  opacity: 0.01;
  cursor: pointer;
}

.state-color-control .state-builder-reset {
  position: static;
  z-index: auto;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  height: auto;
  min-height: 22px;
  margin-top: 0;
  padding: 2px 3px 2px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(10, 49, 97, 0.78);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.state-color-control .state-builder-reset span:first-child {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1.5px solid rgba(10, 49, 97, 0.46);
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1;
}

.state-color-control .state-builder-reset span:last-child {
  min-width: 0;
}

.state-color-control .state-builder-reset:hover,
.state-color-control .state-builder-reset:focus-visible {
  background: transparent;
  color: var(--navy);
}

.state-color-control .state-builder-reset:hover span:first-child,
.state-color-control .state-builder-reset:focus-visible span:first-child {
  border-color: var(--navy);
}

.tracker-color-workshop-toolbar {
  position: fixed;
  z-index: 930;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: min(620px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(10, 49, 97, 0.32);
  border-radius: 4px;
  background: rgba(255, 249, 239, 0.96);
  box-shadow: 0 8px 18px rgba(20, 32, 51, 0.16);
}

.tracker-color-workshop-toolbar button,
.tracker-color-workshop-toolbar select {
  min-height: 28px;
  border: 1px solid rgba(10, 49, 97, 0.34);
  border-radius: 3px;
  background: #fff9ef;
  color: var(--navy);
  font: 800 0.68rem/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tracker-color-workshop-toolbar button {
  cursor: pointer;
}

.tracker-color-workshop-toolbar button:disabled {
  cursor: default;
  opacity: 0.52;
}

.tracker-color-workshop-toolbar output {
  color: var(--muted);
  font: 700 0.68rem/1.2 Georgia, "Times New Roman", serif;
}

.tracker-color-workshop-reopen {
  position: fixed;
  z-index: 929;
  top: 10px;
  left: 10px;
  min-height: 30px;
  border: 1px solid rgba(10, 49, 97, 0.34);
  border-radius: 3px;
  background: rgba(255, 249, 239, 0.96);
  color: var(--navy);
  font: 800 0.68rem/1 Georgia, "Times New Roman", serif;
  text-transform: uppercase;
}

body.app-shell-enabled .tracker-color-workshop-toolbar,
body[data-app-shell] .tracker-color-workshop-toolbar {
  left: calc(var(--app-shell-rail-width, 0px) + 10px);
  max-width: min(620px, calc(100vw - var(--app-shell-rail-width, 0px) - 20px));
}

body.app-shell-enabled .tracker-color-workshop-reopen,
body[data-app-shell] .tracker-color-workshop-reopen {
  left: calc(var(--app-shell-rail-width, 0px) + 10px);
}

@media (max-width: 760px) {
  body.app-shell-enabled .tracker-color-workshop-toolbar,
  body[data-app-shell] .tracker-color-workshop-toolbar {
    top: 66px;
    left: 10px;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 78px);
  }

  body.app-shell-enabled .tracker-color-workshop-reopen,
  body[data-app-shell] .tracker-color-workshop-reopen {
    top: 66px;
    left: 10px;
  }
}

.tracker-color-workshop-layer {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}

.tracker-color-workshop-zone {
  position: absolute;
  border: 1px solid rgba(47, 111, 143, 0.55);
  background: rgba(47, 111, 143, 0.06);
  pointer-events: auto;
  transform: rotate(var(--tracker-color-zone-rotation, 0deg));
  transform-origin: 50% 50%;
}

.tracker-color-workshop-zone:hover,
.tracker-color-workshop-zone.is-selected {
  border-color: rgba(191, 13, 62, 0.78);
  background: rgba(191, 13, 62, 0.08);
}

.tracker-color-workshop-zone__resize,
.tracker-color-workshop-zone__rotate {
  position: absolute;
  right: -6px;
  display: none;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(10, 49, 97, 0.72);
  border-radius: 999px;
  background: #fff9ef;
}

.tracker-color-workshop-zone.is-selected .tracker-color-workshop-zone__resize,
.tracker-color-workshop-zone.is-selected .tracker-color-workshop-zone__rotate {
  display: block;
}

.tracker-color-workshop-zone__resize {
  bottom: -6px;
  cursor: nwse-resize;
}

.tracker-color-workshop-zone__rotate {
  top: -6px;
  cursor: ew-resize;
}

body.is-tracker-color-workshop-hidden .tracker-color-workshop-layer,
body.is-tracker-color-workshop-hidden .tracker-color-workshop-toolbar {
  display: none;
}

.mini-state-frame {
  display: grid;
  place-items: center;
  min-height: 170px;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  justify-self: stretch;
  align-self: stretch;
  border: 0;
  background: transparent;
  overflow: hidden;
  padding: 8px;
}

.mini-state-frame p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
}

.mini-state-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 190px;
  overflow: hidden;
}

.builder-tools {
  align-self: start;
  min-width: 0;
}

.icon-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.icon-picker legend,
.icon-picker-help {
  grid-column: 1 / -1;
}

.icon-picker legend {
  padding: 0 0 4px;
}

.icon-picker-help {
  margin: 0 0 4px;
  color: #6fa889;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
  min-width: 0;
}

.icon-picker label,
.visit-again-toggle {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: normal;
}

.icon-picker input,
.visit-again-toggle input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  accent-color: var(--navy);
}

.visit-again-toggle {
  margin-top: 0;
  padding: 8px;
  border: 1.5px solid rgba(191, 13, 62, 0.35);
  background: rgba(255, 249, 239, 0.8);
}

.promise-return-field {
  display: grid;
  gap: 7px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(10, 49, 97, 0.14);
}

.promises-handoff {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  margin-top: 10px;
  padding: 9px 0 0;
  border-top: 1px solid rgba(10, 49, 97, 0.18);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
  min-width: 0;
  white-space: normal;
}

.promises-handoff strong {
  color: var(--red);
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
}

.promises-handoff span {
  min-width: 0;
  color: rgba(20, 32, 51, 0.78);
  white-space: normal;
}

@container tracker-builder (max-width: 1020px) {
  .state-color-control small {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .state-color-control .state-builder-reset {
    grid-column: 2;
    grid-row: 3;
  }
}

@container tracker-builder (max-width: 820px) {
  .state-builder {
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    align-items: start;
  }

  .builder-mini-state {
    grid-column: 1;
    grid-row: auto;
  }

  .builder-notes {
    grid-column: 2;
    grid-row: auto;
  }

  .builder-notes textarea {
    min-height: 160px;
  }

  .builder-right-rail {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .builder-tools {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@container tracker-builder (max-width: 760px) {
  .state-builder {
    grid-template-columns: 1fr;
  }

  .builder-right-rail {
    display: contents;
  }

  .builder-state-title {
    order: -1;
    margin: 8px 0 4px;
    font-size: clamp(2.05rem, 11vw, 3.35rem);
    line-height: 1;
  }

  .builder-mini-state,
  .builder-notes,
  .builder-tools,
  .builder-state-title {
    grid-column: auto;
    grid-row: auto;
  }

  .builder-panel {
    min-height: 0;
  }

  .builder-notes {
    min-height: 0;
  }

  .icon-picker {
    grid-template-columns: 1fr;
  }
}

@container tracker-builder (max-width: 620px) {
  .visited-date-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mini-state-frame {
    min-height: 180px;
  }

  .visited-date-or {
    padding-top: 0;
    text-align: center;
  }
}

.builder-empty {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: clamp(18rem, 28vw, 25rem);
  margin: 0;
  padding: clamp(20px, 3vw, 48px) clamp(4px, 2vw, 28px);
  text-align: center;
}

.builder-empty-invitation {
  --paper-top: 64px;
  --paper-side: 41px;
  --paper-bottom: 60px;
  position: relative;
  isolation: isolate;
  width: 55%;
  min-width: 0;
  padding: var(--paper-top) var(--paper-side) var(--paper-bottom);
}

.builder-empty-invitation::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* Reuse the transparent artwork without stretching its pins or corners.
     Only the blank paper/edge slices repeat as the live copy wraps. */
  border: solid transparent;
  border-width: var(--paper-top) var(--paper-side) var(--paper-bottom);
  border-image-source: url("assets/tracker/start-your-story-paper.png");
  border-image-slice: 320 205 300 fill;
  border-image-repeat: round;
  pointer-events: none;
}

.builder-empty .builder-empty-title {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: clamp(1.5rem, 2.8cqw, 2rem);
  line-height: 1.12;
  letter-spacing: 0.025em;
  text-wrap: balance;
}

.builder-empty-invitation p {
  max-width: 36rem;
  margin: 0 auto;
  color: var(--navy);
  font-size: clamp(1rem, 1.35cqw, 1.1rem);
  line-height: 1.4;
  text-wrap: pretty;
}

@container tracker-builder (max-width: 900px) {
  .builder-empty-invitation {
    width: 85%;
  }
}

@container tracker-builder (max-width: 540px) {
  .builder-empty-invitation {
    --paper-top: 51.2px;
    --paper-side: 32.8px;
    --paper-bottom: 48px;
    width: 100%;
  }
}

dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

dt {
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.32;
  white-space: pre-line;
}

dd a {
  color: var(--navy);
  font-weight: 800;
  text-decoration-color: var(--red);
  text-underline-offset: 2px;
}

dd a:hover,
dd a:focus-visible {
  color: var(--red);
}

.state-trackers {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}

.state-trackers[hidden] {
  display: none;
}

.tracker-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tracker-box {
  display: grid;
  gap: 4px;
  min-height: 50px;
  padding: 6px 8px;
  border: 1.5px solid var(--line);
  background: var(--cream);
}

.tracker-box[hidden] {
  display: none;
}

.tracker-checkbox {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.tracker-checkbox input {
  width: 15px;
  height: 15px;
  accent-color: var(--navy);
}

.tracker-save-note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.quest-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.quest-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  background: var(--navy);
  color: #fff;
  font-size: 0.82rem;
  text-align: center;
  text-decoration: none;
}

.quest-link:hover,
.quest-link:focus-visible {
  background: var(--red);
  border-color: var(--red);
}

.quest-link-secondary {
  background: var(--paper);
  color: var(--navy);
}

.quest-link-secondary:hover,
.quest-link-secondary:focus-visible {
  background: var(--red);
  color: #fff;
}

.embed-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.compass-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.prototype-hidden-controls {
  display: none;
}

.feature-card {
  padding: 14px;
}

.feature-card h2 {
  margin-bottom: 8px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.08;
}

.feature-card p:not(.eyebrow) {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.42;
}

@media (max-width: 1040px) {
  .games-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .build-card {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .map-intro {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .milestone-road-scene {
    width: 100%;
  }

  .map-layout {
    grid-template-columns: 1fr;
  }

  .tracker-state-workspace::before {
    background-position: center top;
    background-repeat: repeat-y;
    background-size: auto 724px;
  }

  .game-panel,
  .compass-feature-grid,
  .plate-game,
  .games-board {
    grid-template-columns: 1fr;
  }

  .safari-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .play-mode-panel,
  .safari-controls,
  .word-search-controls,
  .crossword-controls,
  .sudoku-controls,
  .postcard-controls,
  .license-plate-controls,
  .mile-marker-controls,
  .there-yet-controls {
    grid-template-columns: 1fr;
  }

  .word-search-layout,
  .crossword-layout,
  .sudoku-layout,
  .mile-marker-layout,
  .there-yet-layout {
    grid-template-columns: 1fr;
  }

  .mile-marker-info-panel {
    position: static;
  }

  .mile-marker-look-panel-row {
    grid-template-columns: 1fr;
    width: min(100%, 280px);
  }

  .mile-marker-look-arrow-left {
    display: none;
  }

  .mile-marker-actions {
    display: grid;
  }

  .there-yet-roadbook {
    width: min(100%, 390px);
    height: auto;
  }

  .there-yet-tool-tray {
    order: 2;
  }

  .crossword-board-header {
    display: grid;
  }

  .crossword-status {
    max-width: none;
    text-align: left;
  }

  .crossword-clue-panel {
    max-height: none;
  }

  .crossword-completion-actions {
    display: grid;
  }

  .sudoku-board-header {
    display: grid;
  }

  .sudoku-status {
    max-width: none;
    text-align: left;
  }

  .word-search-celebration-card {
    grid-template-columns: 1fr;
    width: min(440px, 98%);
    max-height: none;
  }

  .word-search-celebration-actions {
    display: grid;
  }

  .postcard-category-grid,
  .postcard-prompts {
    grid-template-columns: 1fr;
  }

  .postcard-step-header,
  .postcard-result-actions {
    display: grid;
  }

  .postcard-result-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: clamp(18px, 5vw, 28px);
  }

  .postcard-story-side {
    border-right: 0;
    border-bottom: 2px solid rgba(10, 49, 97, 0.62);
    padding-right: 0;
    padding-bottom: 22px;
  }

  .postcard-mail-top {
    min-height: 132px;
  }

  .postcard-postmark {
    right: 104px;
    width: 96px;
  }

  .postcard-cancel-lines {
    right: 38px;
    width: 184px;
  }

  .postcard-illustration {
    min-height: 300px;
  }

  .postcard-address-block {
    margin-left: 0;
  }

  .postcard-wordmark {
    gap: 10px;
    font-size: clamp(1.15rem, 7vw, 1.8rem);
    letter-spacing: 0.14em;
  }

  .license-plate-scoreboard,
  .license-plate-crew-panel,
  .license-plate-crew-form {
    grid-template-columns: 1fr;
  }

  .license-plate-score-actions {
    display: grid;
    justify-content: stretch;
  }

  .license-plate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-notes-contribution,
  .field-note-grid-two,
  .field-note-grid-three {
    grid-template-columns: 1fr;
  }

  .field-note-dialog-actions {
    display: grid;
  }

  .field-notes-map-shell {
    min-height: 260px;
  }

  .game-tile-feature {
    grid-column: span 1;
  }

  .club-menu {
    justify-self: stretch;
    width: 100%;
  }

  .club-menu-list {
    position: static;
    width: 100%;
    margin-top: 8px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
  }

  .game-panel-section + .game-panel-section {
    border-left: 0;
    border-top: 1.5px solid rgba(191, 13, 62, 0.28);
  }

  .game-panel {
    margin-top: 12px;
  }

  .game-panel-section {
    padding: 10px 12px;
  }

  .game-panel h2 {
    font-size: 1.05rem;
  }

  .game-panel p {
    font-size: 0.78rem;
    line-height: 1.32;
  }

  .plate-game {
    gap: 7px;
  }

  .plate-game-actions {
    max-width: none;
  }

  .clear-plates-button {
    min-height: 34px;
    padding: 6px 9px;
  }

  .safari-score-row {
    align-items: stretch;
    flex-direction: column;
  }

  .safari-reset {
    width: 100%;
  }

  .safari-round-actions {
    display: grid;
    grid-template-columns: 0.42fr 1fr;
    width: 100%;
  }

  .state-card {
    position: static;
    height: var(--stable-card-height, auto);
    min-height: 0;
    max-height: var(--stable-card-height, none);
    overflow-y: auto;
  }

  .build-card {
    height: auto;
    max-height: none;
    overflow: visible;
    scroll-margin-top: 72px;
  }

  .state-builder {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-items: start;
  }

  .builder-right-rail {
    display: contents;
  }

  .builder-state-title {
    order: -1;
    margin: 8px 0 4px;
    font-size: clamp(2.05rem, 11vw, 3.35rem);
    line-height: 1;
  }

  .builder-panel {
    min-height: 0;
  }

  .state-status-layout {
    grid-template-columns: 1fr;
  }

  .state-status-panel {
    min-height: 0;
  }

  .visited-date-row {
    grid-template-columns: minmax(0, 1fr) max-content minmax(88px, 0.7fr);
  }

  .builder-mini-state,
  .builder-notes,
  .builder-tools,
  .builder-state-title {
    grid-column: auto;
    grid-row: auto;
  }

  .builder-notes {
    min-height: 0;
  }

  .builder-notes textarea {
    min-height: 150px;
  }

  .mini-state-frame {
    min-height: 180px;
  }

  .quest-links {
    grid-template-columns: 1fr;
  }

  .tracker-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) and (min-resolution: 1.5dppx) {
  .tracker-state-workspace::before {
    background-size: auto 362px;
  }
}

@media (max-width: 560px) {
  .travel-map-widget {
    width: min(100% - 16px, 1180px);
    padding-top: 12px;
  }

  .visited-date-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .visited-date-or {
    padding-top: 0;
    text-align: center;
  }

  .filter-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .filter-button {
    min-height: 46px;
    padding: 8px;
    font-size: 0.82rem;
  }

  .unlock-form > div {
    grid-template-columns: 1fr;
  }

  .map-shell {
    padding: 10px;
  }

  .milestone-note {
    place-items: center;
  }

  .milestone-note-dismiss {
    width: 100%;
  }

  .state-map {
    min-height: 220px;
  }

  .embed-note {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .license-plate-grid {
    grid-template-columns: 1fr;
  }

  .there-yet-roadbook {
    width: min(100%, 330px);
  }

  .there-yet-mark-actions {
    grid-template-columns: 1fr;
  }

  .there-yet-mode-tabs,
  .there-yet-stamp-tray {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .there-yet-stamp-palette {
    right: 12px;
    bottom: 12px;
    left: 12px;
    top: auto;
    width: auto;
    max-height: min(420px, calc(100vh - 24px));
  }

  .there-yet-arrival-card {
    width: min(100%, 420px);
    padding: 16px;
  }

  .there-yet-postcard-template-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .there-yet-journey-postcard {
    aspect-ratio: 3 / 2;
  }

  .there-yet-postcard-road-base {
    stroke-width: 7;
  }

  .there-yet-postcard-road-highlight {
    stroke-width: 4;
  }

  .there-yet-postcard-record-banner {
    top: 20%;
    right: 5%;
    left: 5%;
    gap: 4px 7px;
    padding: 7px 9px;
  }

  .there-yet-postcard-place {
    font-size: clamp(0.72rem, 4.4vw, 1.08rem);
  }

  .there-yet-postcard-trip-meta {
    font-size: clamp(0.52rem, 2.7vw, 0.66rem);
  }

  .there-yet-postcard-route-arrow {
    font-size: clamp(0.88rem, 4vw, 1.15rem);
  }

  .there-yet-postcard-stamp {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 3px;
    min-width: 58px;
    max-width: 92px;
    font-size: 0.42rem;
    padding: 4px 5px;
  }

  .there-yet-postcard-stamp-icon svg {
    width: 14px;
    height: 14px;
  }

  .there-yet-swatch-row {
    gap: 10px;
  }

  .there-yet-placed-stamp {
    font-size: 0.64rem;
    padding: 6px 7px;
  }

  .crossword-board {
    width: min(100%, 96vw);
  }

  .crossword-cell-input {
    font-size: clamp(0.86rem, 5.6vw, 1.32rem);
    padding-top: 9px;
  }

  .crossword-cell-number {
    font-size: 0.48rem;
  }

  .license-plate-tile,
  .license-plate-little .license-plate-tile {
    min-height: 132px;
  }
}