:root {
  --fs-safe-top: env(safe-area-inset-top, 0px);
  --fs-safe-right: env(safe-area-inset-right, 0px);
  --fs-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fs-safe-left: env(safe-area-inset-left, 0px);
}

#map.free-schedule-map-active {
  inset: 0;
  padding: 0;
  background: #06070a;
  backdrop-filter: none;
  overflow: hidden;
}

#map.free-schedule-map-active::before,
#map.free-schedule-map-active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#map.free-schedule-map-active::before {
  background: url("immersive/map/assets/studio-city-map-v1.png") center / cover no-repeat;
  filter: brightness(.56) saturate(.62) contrast(1.08);
  transform: scale(1.01);
}

#map.free-schedule-map-active[data-schedule-mode="night"]::before {
  filter: brightness(.38) saturate(.58) contrast(1.12) hue-rotate(8deg);
}

#map.free-schedule-map-active::after {
  background:
    linear-gradient(90deg, rgba(3,4,7,.78), transparent 26%, transparent 72%, rgba(3,4,7,.48)),
    linear-gradient(180deg, rgba(3,4,7,.52), transparent 28%, transparent 68%, rgba(3,4,7,.72));
}

#map.free-schedule-map-active > .ov-body {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  animation: none;
}

#map.free-schedule-map-active .mp-k,
#map.free-schedule-map-active .mp-t {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.free-schedule-heading,
.free-schedule-objective {
  position: absolute;
  z-index: 3;
  left: max(20px, calc(var(--fs-safe-left) + 14px));
}

#map:not(.free-schedule-map-active) .free-schedule-heading,
#map:not(.free-schedule-map-active) .free-schedule-objective {
  display: none;
}

.free-schedule-heading {
  top: max(58px, calc(var(--fs-safe-top) + 50px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.free-schedule-heading strong {
  font: 500 28px/1.2 "Noto Serif SC", "Songti SC", serif;
  letter-spacing: 4px;
  text-shadow: 0 2px 16px rgba(0,0,0,.82);
}

.free-schedule-heading i {
  width: 88px;
  height: 1px;
  background: linear-gradient(90deg, #ffd479, rgba(255,255,255,.22), transparent);
}

#map[data-schedule-mode="night"] .free-schedule-heading i {
  background: linear-gradient(90deg, #ff4d8f, rgba(255,255,255,.22), transparent);
}

.free-schedule-objective {
  top: max(122px, calc(var(--fs-safe-top) + 116px));
  width: min(292px, 34vw);
  min-height: 58px;
  padding: 10px 13px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.16);
  border-left: 3px solid #ffd479;
  border-radius: 6px;
  background: rgba(5,6,10,.82);
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

#map[data-schedule-mode="night"] .free-schedule-objective {
  border-left-color: #ff4d8f;
}

.free-schedule-objective strong {
  font: 500 12px/1.5 "Noto Serif SC", "Songti SC", serif;
  color: rgba(255,255,255,.92);
}

.free-schedule-objective small {
  font: 9px/1.35 "DM Mono", monospace;
  color: rgba(255,255,255,.42);
}

#map.free-schedule-map-active .mp-grid {
  position: relative;
  z-index: 3;
  inset: auto;
  flex: 1;
  width: min(860px, 76vw);
  max-width: 860px;
  min-height: 0;
  height: auto;
  margin: clamp(12px, 3vh, 28px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(68px, auto));
  gap: clamp(10px, 1.4vw, 18px);
  align-content: center;
  counter-reset: schedule-location;
}

#map.free-schedule-map-active .mp-loc {
  position: relative;
  z-index: 4;
  inset: auto;
  width: auto;
  min-width: 0;
  min-height: 68px;
  padding: 10px 38px 9px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  counter-increment: schedule-location;
  transform: none;
  border: 1px solid rgba(238,233,223,.48);
  border-radius: 6px;
  background: rgba(5,6,10,.78);
  box-shadow: 0 16px 40px rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
  transition: border-color 160ms, background 160ms, transform 160ms, opacity 160ms;
}

#map.free-schedule-map-active .mp-loc::before {
  content: counter(schedule-location, decimal-leading-zero);
  position: absolute;
  left: 12px;
  top: 50%;
  width: 38px;
  height: 46px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(238,233,223,.5);
  border-radius: 6px;
  background: rgba(238,233,223,.08);
  color: #eee9df;
  font: 600 10px/1 "DM Mono", monospace;
}

#map.free-schedule-map-active .mp-loc::after {
  content: "›";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.58);
  font: 24px/1 "DM Mono", monospace;
}

#map.free-schedule-map-active .mp-loc:not(.lock):hover,
#map.free-schedule-map-active .mp-loc:not(.lock):focus-visible {
  border-color: rgba(255,212,121,.82);
  background: rgba(14,13,16,.98);
  transform: translateY(-2px);
  outline: 2px solid transparent;
}

#map.free-schedule-map-active .mp-loc.is-relation {
  border-color: rgba(255,77,143,.6);
  border-left-color: #ff4d8f;
  box-shadow: 0 0 0 1px rgba(0,0,0,.72), 0 0 24px rgba(255,77,143,.14), 0 14px 38px rgba(0,0,0,.48);
}

#map.free-schedule-map-active .mp-loc.is-opportunity {
  border-color: rgba(255,212,121,.68);
  border-left-color: #ffd479;
  box-shadow: 0 0 0 1px rgba(0,0,0,.72), 0 0 22px rgba(255,212,121,.1), 0 14px 38px rgba(0,0,0,.48);
}

#map.free-schedule-map-active .mp-loc.is-selected {
  z-index: 6;
  border-color: rgba(255,212,121,.92);
  background: rgba(14,13,16,.98);
  transform: translateY(-2px);
}

#map.free-schedule-map-active .mp-loc.is-dimmed {
  opacity: .48;
}

#map.free-schedule-map-active .mp-loc.lock {
  opacity: .72;
  border-color: rgba(94,234,212,.42);
  background: rgba(8,20,20,.78);
}

#map.free-schedule-map-active .mp-loc.is-unavailable {
  opacity: .78;
  border-color: rgba(255,142,156,.44);
  background: rgba(28,8,12,.78);
}

#map.free-schedule-map-active .mp-loc.is-unavailable::before,
#map.free-schedule-map-active .mp-loc.is-unavailable .mp-w {
  color: #ff8e9c;
  border-color: rgba(255,142,156,.44);
}

#map.free-schedule-map-active .mp-loc.lock::before,
#map.free-schedule-map-active .mp-loc.lock .mp-w {
  color: #5eead4;
  border-color: rgba(94,234,212,.48);
}

#map.free-schedule-map-active .mp-h { display: block; }
#map.free-schedule-map-active .mp-i { display: none; }
#map.free-schedule-map-active .mp-n {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#map.free-schedule-map-active .mp-s,
#map.free-schedule-map-active .mp-ef,
#map.free-schedule-map-active .mp-w {
  margin: 0;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#map.free-schedule-map-active .mp-s { color: rgba(255,255,255,.66); }
#map.free-schedule-map-active .mp-ef { color: #ffd479; }
#map.free-schedule-map-active .mp-w { color: #ff9ac0; }
#map.free-schedule-map-active .mp-w.none { color: rgba(255,255,255,.46); font-style: normal; }

@media (max-width: 900px), (max-height: 430px) {
  .free-schedule-heading { top: max(48px, calc(var(--fs-safe-top) + 44px)); gap: 4px; }
  .free-schedule-heading strong { font-size: 19px; letter-spacing: 2px; }
  .free-schedule-heading i { width: 56px; }
  .free-schedule-objective {
    top: max(84px, calc(var(--fs-safe-top) + 80px));
    width: min(240px, 31vw);
    min-height: 48px;
    padding: 7px 10px;
  }
  .free-schedule-objective strong { font-size: 10px; line-height: 1.4; }
  #map.free-schedule-map-active .mp-grid {
    inset: auto;
    width: min(680px, 78vw);
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(44px, auto));
    gap: 7px 10px;
    margin: 5px auto 0;
  }
  #map.free-schedule-map-active .mp-loc {
    width: auto;
    min-height: 56px;
    padding: 6px 22px 6px 50px;
  }
  #map.free-schedule-map-active .mp-loc::before {
    left: 6px;
    width: 38px;
    height: 40px;
  }
  #map.free-schedule-map-active .mp-loc::after { right: 7px; font-size: 17px; }
  #map.free-schedule-map-active .mp-n { font-size: 12px; }
  #map.free-schedule-map-active .mp-s,
  #map.free-schedule-map-active .mp-ef,
  #map.free-schedule-map-active .mp-w { font-size: 8px; }
}

@media (max-width: 760px), (max-height: 365px) {
  .free-schedule-objective small { display: none; }
  #map.free-schedule-map-active .mp-loc { width: auto; min-height: 52px; }
  #map.free-schedule-map-active .mp-w { display: none; }
}