/* Labels extend from alternating sides of the checkpoint discs. */
body .level[data-chapter] .level-disc { position: relative; z-index: 1; }
body .level[data-chapter] .level-label {
  top: 50%;
  left: calc(50% + 18px);
  right: auto;
  transform: translateY(-50%);
  padding: 4px 7px 4px 10px;
  font-size: 9px;
  line-height: 1.2;
  width: max-content;
  max-width: 130px;
  text-align: left;
}
body .level[data-chapter="2"] .level-label,
body .level[data-chapter="4"] .level-label {
  left: auto;
  right: calc(50% + 18px);
  padding: 4px 10px 4px 7px;
  text-align: right;
}
@media (max-width: 700px) {
  .map-copyright { display: none; }
  body .adventure-layout .chapter-panel { padding-top: 18px; }
  body .level[data-chapter] .level-label { left: calc(50% + 13px); max-width: 100px; font-size: 8px; padding-block: 3px; }
  body .level[data-chapter="2"] .level-label,
  body .level[data-chapter="4"] .level-label { left: auto; right: calc(50% + 13px); }
}

body .intro > p:last-child { max-width: 680px; margin-inline: auto; }
body .travel-status.sr-only { padding: 0; }
.map-copyright { text-align: center; padding: 12px 16px; color: var(--muted); }
.map-copyright small { font-size: 10px; }
.map-clouds { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; user-select: none; }

/* Keep the portrait map and its selected chapter together on larger screens. */
.level-progress { grid-column: 1 / -1; min-width: 0; margin-top: 20px; --progress-fill: #d5a342; }
.level-progress[data-state="complete"] { --progress-fill: #568347; }
.level-progress progress { display: block; appearance: none; width: 100%; height: 14px; overflow: hidden; border: 2px solid #456249; border-radius: 4px; background: #e4e5cf; box-shadow: 0 2px 0 #c5cdb6; }
.level-progress progress::-webkit-progress-bar { background: #e4e5cf; }
.level-progress progress::-webkit-progress-value { background: var(--progress-fill); box-shadow: inset 0 3px 0 #ffffff30; }
.level-progress progress::-moz-progress-bar { background: var(--progress-fill); box-shadow: inset 0 3px 0 #ffffff30; }
.level-progress small { display: block; margin-top: 9px; font-size: 11px; line-height: 1.5; color: var(--muted); }

@media (min-width: 1000px) {
  .adventure-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
    grid-template-areas: 'map details' 'status details';
    gap: 0 36px;
    align-items: start;
  }
  .adventure-layout .world { grid-area: map; width: 100%; min-width: 0; }
  .adventure-layout .map-copyright { grid-area: status; }
  body .adventure-layout .map-legend { flex-wrap: wrap; gap: 10px 16px; }
  body .adventure-layout .map-hint { margin-left: 0; }
  body .adventure-layout .chapter-panel {
    grid-area: details;
    position: sticky;
    top: 28px;
    margin: 100px 0 0;
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    border: 1px solid #d9decb;
    border-radius: 6px;
    background: #fcf9ed;
    box-shadow: 0 5px 0 #e2e5d6, 0 12px 24px #294f4909;
  }
  .adventure-layout .chapter-panel::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 44px;
    width: 18px;
    height: 18px;
    background: #fcf9ed;
    border-left: 1px solid #d9decb;
    border-bottom: 1px solid #d9decb;
    transform: rotate(45deg);
  }
  body .adventure-layout .chapter-number { border: 0; font-size: 40px; letter-spacing: -2px; }
  body .adventure-layout .chapter-stamp { display: none; }
  body .adventure-layout .chapter-copy h2 { font-size: clamp(27px, 2.6vw, 33px); line-height: 1.15; }
  body .adventure-layout .chapter-actions { display: grid; gap: 18px; }
  body .adventure-layout .chapter-actions .button { min-height: 48px; align-items: center; }
}