.forest-map-content {
  inset: 0 !important;
  pointer-events: none;
}
.map-landmarks {
  position: absolute;
  inset: 0;
}
.map-signpost {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  background: none;
  color: #fff8d6;
  padding: 0.8cqw;
  cursor: pointer;
  pointer-events: auto;
  font-family: inherit;
  filter: drop-shadow(0 0.35cqw 0.3cqw #20382380);
  transition: transform 0.18s;
}
.map-signpost:hover {
  transform: translate(-50%, -54%) scale(1.04);
}
.map-signpost:focus-visible {
  outline: 3px solid #fff2aa;
  outline-offset: 3px;
  border-radius: 1cqw;
}
.map-sign-face {
  display: flex;
  gap: 0.7cqw;
  align-items: center;
  border: 0.2cqw solid #c7a066;
  border-radius: 0.65cqw 0.9cqw 0.7cqw 0.5cqw;
  padding: 0.6cqw 0.9cqw;
  background: linear-gradient(#805731, #563718);
  box-shadow: inset 0 0 0 0.18cqw #986d41;
}
.map-sign-face strong {
  font-size: 1.8cqw;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.map-sign-face i {
  font-style: normal;
  font-size: 2.1cqw;
  color: #f4cf7e;
}
.map-sign-face > span {
  font-size: 2.2cqw;
}
.map-signpost small {
  display: block;
  margin: 0.35cqw auto 0;
  width: max-content;
  font-size: 1.05cqw;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px #162d0e;
  background: #28412de0;
  padding: 0.2cqw 0.7cqw;
  border-radius: 1cqw;
}
.map-signpost-numbers {
  left: 21%;
  top: 44%;
}
.map-signpost-arithmetic {
  left: 44%;
  top: 78%;
}
.map-signpost-shapes {
  left: 67%;
  top: 43%;
}
.map-signpost-patterns {
  left: 86%;
  top: 75%;
}
.map-bottom-menu {
  position: absolute;
  bottom: 3%;
  left: 3%;
  right: 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  pointer-events: auto;
}
.map-menu-button,
.map-continue {
  font: inherit;
  border: 0.15cqw solid #e8d6a9;
  background: #fffae9ed;
  color: #3d583a;
  box-shadow: 0 0.3cqw 1cqw #102b3040;
  cursor: pointer;
  border-radius: 2cqw;
  padding: 0.7cqw 1.4cqw;
  min-height: 44px;
  font-size: 1.35cqw;
  font-weight: 750;
}
.map-continue {
  border-radius: 1.2cqw;
  background: #355840f5;
  color: #fff5d7;
  display: flex;
  align-items: center;
  gap: 1cqw;
}
.map-continue span {
  font-size: 1.15cqw;
  font-weight: 400;
}
.map-continue strong {
  font-size: 1.55cqw;
}
.map-invitation {
  color: #fff8de;
  text-shadow: 0 2px 5px #193b25;
  font-size: 1.55cqw;
  font-weight: 700;
  background: #263f2d9c;
  padding: 0.6cqw 1.4cqw;
  border-radius: 2cqw;
  margin: 0;
}
.forest-map-stage .scene-feedback,
.forest-map-stage .forest-feedback {
  display: none;
}
.forest-map-dialog {
  box-sizing: border-box;
  width: min(84cqw, 900px);
  max-width: 94vw;
  max-height: min(46cqw, 88vh);
  padding: 0;
  border: 0.2cqw solid #dbc599;
  border-radius: 2cqw;
  background: #fff9e9;
  color: #3c4e37;
  box-shadow: 0 2cqw 8cqw #10281b88;
  overflow: hidden;
  font-family: inherit;
}
.forest-map-dialog::backdrop {
  background: #102d286b;
  backdrop-filter: blur(5px);
}
.map-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1cqw;
  padding: 1.5cqw 2.2cqw 1cqw;
  background: linear-gradient(110deg, #f6edce, #fff9e9);
  border-bottom: 1px solid #ddcfab;
}
.map-eyebrow {
  margin: 0 0 0.35cqw;
  color: #8e875e;
  font-size: 1cqw;
  letter-spacing: 0.15em;
}
.map-panel-head h2 {
  font-size: 2.55cqw;
  margin: 0;
  color: #375e3e;
}
.map-panel-subtitle {
  font-size: 1.2cqw;
  margin: 0.5cqw 0 0;
  line-height: 1.5;
}
.map-close {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #d8cfb6;
  border-radius: 50%;
  background: #fffdf5;
  font-size: 1.8cqw;
  color: #4f6248;
  cursor: pointer;
}
.map-panel-body {
  padding: 1.2cqw 2.2cqw 1.8cqw;
  max-height: calc(min(46cqw, 88vh) - 10cqw);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.map-courses {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6cqw;
}
.map-course {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  min-height: 5cqw;
  padding: 0.65cqw 1.2cqw;
  text-align: left;
  border: 1px solid #ded2b3;
  background: #fffef6;
  border-radius: 1cqw;
  font: inherit;
  color: #3d5139;
  cursor: pointer;
}
.map-course:hover:not(:disabled) {
  background: #edf1d5;
  border-color: #819a5e;
}
.map-course:disabled {
  cursor: default;
  background: #edeada;
  color: #808276;
}
.map-course-number {
  width: 3cqw;
  height: 3cqw;
  flex: none;
  display: grid;
  place-items: center;
  background: #668256;
  color: white;
  border-radius: 50%;
  font-size: 1.6cqw;
  font-weight: bold;
}
.map-course:disabled .map-course-number {
  background: #babba8;
}
.map-course-copy {
  flex: 1;
  min-width: 0;
}
.map-course-copy strong {
  display: block;
  font-size: 1.65cqw;
}
.map-course-copy small {
  display: block;
  font-size: 1.08cqw;
  margin-top: 0.2cqw;
  line-height: 1.4;
}
.map-course-action {
  font-size: 1.15cqw;
  white-space: nowrap;
}
.map-record-summary {
  display: flex;
  gap: 1cqw;
  align-items: center;
  margin-bottom: 1cqw;
  font-size: 1.2cqw;
}
.map-record-summary strong {
  font-size: 2.2cqw;
}
.map-records h3 {
  margin: 1cqw 0 0.4cqw;
  font-size: 1.6cqw;
  color: #59704a;
}
.map-record {
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  border-bottom: 1px solid #e7dfc8;
  padding: 0.6cqw 0;
  font-size: 1.15cqw;
  line-height: 1.5;
}
.map-record span + span {
  text-align: right;
  color: #6b765b;
}
.map-storage-note {
  font-size: 1.1cqw;
  line-height: 1.5;
}
.map-reset-link {
  border: 0;
  background: none;
  text-decoration: underline;
  color: #94523f;
  cursor: pointer;
  min-height: 44px;
  font: inherit;
  font-size: 1.15cqw;
}
.map-reset-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: 1cqw;
}
.map-reset-confirm p {
  width: 100%;
  font-size: 1.4cqw;
}
.map-primary,
.map-danger {
  min-height: 44px;
  font: inherit;
  font-size: 1.4cqw;
  border: 1px solid #ccb88f;
  padding: 1cqw 1.5cqw;
  border-radius: 0.8cqw;
  cursor: pointer;
}
.map-primary {
  background: #54784a;
  color: white;
}
.map-danger {
  background: #fff5e8;
  color: #a14a35;
}
.map-playgrounds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1cqw;
  padding: 1cqw 0;
}
.map-playground {
  border: 1px solid #d5c7a0;
  background: linear-gradient(#f7f2db, #fffef7);
  border-radius: 1cqw;
  padding: 1.5cqw 0.8cqw;
  display: flex;
  flex-direction: column;
  gap: 1.1cqw;
  align-items: center;
  font: inherit;
  cursor: pointer;
  color: #43563a;
}
.map-playground-icon {
  font-size: 4cqw;
  color: #78895a;
}
.map-playground strong {
  font-size: 1.6cqw;
}
.map-playground small,
.map-playground > span:last-child {
  font-size: 1.1cqw;
}
.forest-map-dialog button:focus-visible,
.map-bottom-menu button:focus-visible {
  outline: 3px solid #d49834;
  outline-offset: 2px;
}
@container (max-width:700px) {
  .map-sign-face strong {
    font-size: 2.15cqw;
  }
  .map-sign-face {
    padding: 0.8cqw 1cqw;
  }
  .map-signpost small {
    font-size: 1.35cqw;
  }
  .map-menu-button {
    font-size: 1.8cqw;
    padding: 0.4cqw 1.4cqw;
  }
  .map-invitation {
    font-size: 1.7cqw;
  }
  .map-continue {
    min-height: 40px;
  }
  .map-continue span {
    font-size: 1.4cqw;
  }
  .map-continue strong {
    font-size: 1.7cqw;
  }
  .forest-map-dialog {
    width: 89cqw;
    max-height: 49cqw;
  }
  .map-panel-head {
    padding: 1.2cqw 2cqw 0.8cqw;
  }
  .map-panel-head h2 {
    font-size: 2.8cqw;
  }
  .map-eyebrow {
    font-size: 1.2cqw;
  }
  .map-panel-subtitle {
    font-size: 1.5cqw;
  }
  .map-panel-body {
    max-height: calc(49cqw - 12cqw);
    padding: 1cqw 2cqw 1.4cqw;
  }
  .map-course {
    min-height: 44px;
  }
  .map-course-copy strong {
    font-size: 2cqw;
  }
  .map-course-copy small,
  .map-course-action {
    font-size: 1.45cqw;
  }
  .map-course-number {
    width: 4cqw;
    height: 4cqw;
    font-size: 2cqw;
  }
  .map-record {
    font-size: 1.6cqw;
  }
  .map-records h3 {
    font-size: 2cqw;
  }
  .map-storage-note,
  .map-reset-link {
    font-size: 1.5cqw;
  }
  .map-record-summary {
    font-size: 1.6cqw;
  }
  .map-playground strong {
    font-size: 2cqw;
  }
  .map-playground small,
  .map-playground > span:last-child {
    font-size: 1.4cqw;
  }
  .map-primary,
  .map-danger,
  .map-reset-confirm p {
    font-size: 1.8cqw;
  }
}
@container (max-width:700px) {
  .forest-map-dialog {
    max-height: calc(100dvh - 16px);
  }
  .map-panel-head {
    padding: 0.6cqw 2cqw;
  }
  .map-eyebrow {
    display: none;
  }
  .map-panel-body {
    box-sizing: border-box;
    max-height: calc(100dvh - 80px);
    padding: 1cqw 2cqw;
  }
  .map-courses {
    gap: 2px;
  }
  .map-panel-subtitle {
    margin-top: 0.25cqw;
  }
}