:root {
  color: #17372f;
  background: #071f32;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-width: 1024px; min-height: 100%; margin: 0; }

body {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #194d70 0, #071f32 66%);
}

.map-shell {
  display: grid;
  position: relative;
  place-items: center;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

.world-controls {
  position: fixed;
  inset: 0;
  z-index: 160;
  pointer-events: none;
}

.world-controls__logo {
  position: absolute;
  top: clamp(14px, 2.2vh, 26px);
  left: clamp(20px, 2.2vw, 40px);
  width: clamp(134.4px, 11.4vw, 211.2px);
  height: auto;
  filter: drop-shadow(0 7px 7px rgba(3, 28, 43, .3));
}

.world-language-switcher {
  position: absolute;
  top: clamp(18px, 3vh, 34px);
  right: clamp(18px, 2.6vw, 50px);
  display: flex;
  gap: clamp(6px, .65vw, 12px);
  pointer-events: auto;
}

.world-language-button {
  min-width: clamp(54px, 4.5vw, 78px);
  min-height: clamp(44px, 4.2vw, 68px);
  padding: 8px 10px;
  border: 3px solid #a95e24;
  border-radius: 18px;
  color: #4b2c1d;
  background: linear-gradient(180deg, #ffd981, #eca94c);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), 0 5px 0 #824419, 0 8px 12px rgba(61,36,20,.22);
  font-size: clamp(15px, 1.25vw, 22px);
  font-weight: 900;
  cursor: pointer;
}

.world-language-button.is-active {
  color: #fff;
  border-color: #285d30;
  background: linear-gradient(180deg, #78c85a, #409645);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.32), 0 5px 0 #285d30, 0 8px 12px rgba(61,36,20,.22);
}

.world-navigation {
  position: absolute;
  bottom: calc(clamp(10px, 1.8vh, 20px) + 15px);
  left: 50%;
  display: flex;
  gap: clamp(8px, .8vw, 12px);
  align-items: flex-end;
  transform: translateX(-50%);
  pointer-events: auto;
}

.world-bubble-button {
  position: relative;
  display: grid;
  width: clamp(48px, 4.3vw, 66px);
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #f79562, #df654d);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.38), 0 5px 0 #a84539, 0 8px 14px rgba(62,36,22,.22);
  cursor: pointer;
  text-decoration: none;
}

.world-bubble-button svg {
  width: 54%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.world-sound-button {
  background: linear-gradient(180deg, #69b7d6, #3d87af);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 #28627f, 0 8px 14px rgba(62,36,22,.22);
}

.world-sound-button svg { fill: currentColor; }
.world-fullscreen-button {
  background: linear-gradient(180deg, #8bca62, #579c44);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 #3e7636, 0 8px 14px rgba(62,36,22,.22);
}

.world-bubble-button::after {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  max-width: min(70vw, 240px);
  padding: 7px 11px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 12px;
  color: #fff;
  content: attr(data-tooltip);
  background: rgba(62,36,22,.9);
  box-shadow: 0 4px 10px rgba(62,36,22,.22);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
  visibility: hidden;
  white-space: nowrap;
}

.world-bubble-button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
@media (hover: hover) { .world-bubble-button:hover::after { opacity: 1; transform: translate(-50%, 0); visibility: visible; } }
.world-bubble-button:focus-visible, .world-language-button:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.world-fullscreen-button__exit { display: none; }
.world-fullscreen-button.is-active .world-fullscreen-button__enter { display: none; }
.world-fullscreen-button.is-active .world-fullscreen-button__exit { display: block; }
.world-sound-button:not(.is-playing) .world-sound-button__wave { opacity: .35; }
.world-sound-button.is-playing .world-sound-button__muted { display: none; }

.world-control-feedback {
  position: absolute;
  bottom: calc(clamp(10px, 1.8vh, 20px) + 88px);
  left: 50%;
  margin: 0;
  padding: 8px 14px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: #fff;
  background: rgba(62,36,22,.82);
  box-shadow: 0 4px 10px rgba(62,36,22,.22);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  transform: translateX(-50%);
}

.map-heading {
  position: absolute;
  top: calc(clamp(14px, 2.2vh, 26px) + clamp(134.4px, 11.4vw, 211.2px) + 8px);
  left: calc(clamp(78px, 7.2vw, 116px) + (clamp(134.4px, 11.4vw, 211.2px) / 2));
  z-index: 100;
  max-width: min(42vw, 420px);
  margin: 0;
  padding: 6px 10px;
  border-radius: 7px;
  color: #fff;
  background: rgba(12, 48, 78, .48);
  box-shadow: 0 4px 12px rgba(3, 28, 43, .2);
  filter: drop-shadow(0 2px 4px rgba(3, 28, 43, .68));
  pointer-events: none;
  transform: translateX(-50%);
}

.map-heading strong {
  display: block;
  overflow: hidden;
  font-size: clamp(16px, 1.45vw, 24px);
  font-weight: 780;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-switch {
  position: fixed;
  top: 50%;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 47, 70, .48);
  box-shadow: 0 5px 16px rgba(2, 27, 42, .2);
  font: inherit;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.map-switch[hidden] { display: none; }
.map-switch--previous { left: clamp(10px, 1.5vw, 24px); }
.map-switch--next { right: clamp(10px, 1.5vw, 24px); }
.map-switch span { font-size: 28px; line-height: .8; }
.map-switch strong { font-size: clamp(12px, 1vw, 15px); white-space: nowrap; }
.map-switch:hover { border-color: rgba(255, 255, 255, .82); background: rgba(8, 47, 70, .78); }
.map-switch:focus-visible { outline: 3px solid #ffd979; outline-offset: 3px; }
.map-switch:active { transform: translateY(-50%) scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .map-switch { transition: none; }
}

.learning-map {
  --map-pan-x: 0px;
  --map-pan-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  width: max(100vw, calc(100vh * 2565 / 1440));
  height: max(100vh, calc(100vw * 1440 / 2565));
  border-radius: 22px;
  background: #0b5484;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  touch-action: none;
  transform: translate(calc(-50% + var(--map-pan-x)), calc(-50% + var(--map-pan-y)));
  visibility: hidden;
}

.learning-map.is-ready { visibility: visible; }

.learning-map__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.learning-map__regions { position: absolute; inset: 0; width: 100%; height: 100%; }

.map-region {
  --slot-scale: 1;
  --locator-scale: 1;
  --locator-top: 36%;
  --locator-inline: 20%;
  --locator-bottom: 0%;
  position: absolute;
  left: var(--slot-x);
  top: var(--slot-y);
  z-index: var(--slot-z);
  width: calc(var(--slot-width, 18%) * var(--slot-scale));
  height: calc(var(--slot-height, 12%) * var(--slot-scale));
  padding: 0;
  border: 0;
  color: #17372f;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: none;
  /* 运行态：整框不接收事件，只有内部“定位圈”是激活区，避免相邻框互相遮挡下半部 */
  pointer-events: none;
}

/* 编辑态下整框可拖拽，保留原交互 */
.is-editor-preview .map-region { pointer-events: auto; }

.map-region__visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: scaleX(var(--slot-direction, 1));
  transform-origin: center bottom;
  transition: transform 120ms ease;
  pointer-events: none;
}
.map-region__visual img { width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }

/* 运行时与编辑器一致：有图的建筑按原始比例展示，不做 cover 裁切（避免被压成横条） */
.map-region.has-image .map-region__visual {
  inset: auto;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
}
.map-region.has-image .map-region__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;
}

.map-region:hover .map-region__visual img,
.map-region:focus-visible .map-region__visual img {
  animation: subee-building-breathe 1.664s ease-in-out 1;
  transform-origin: 50% 82%;
}

@keyframes subee-building-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  18.75% { transform: translateY(-2.2%) scale(1.012); }
  37.5% { transform: translateY(0) scale(.996); }
  56.25% { transform: translateY(-.8%) scale(1.004); }
  71.875% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .map-region:hover .map-region__visual img,
  .map-region:focus-visible .map-region__visual img { animation: none; }
}

html[data-idle-effect="gold"] .map-region.is-idle-highlight .map-region__visual img {
  position: relative;
  z-index: 4;
  animation: subee-idle-building-gold 1.6s ease-in-out 1;
}

@keyframes subee-idle-building-gold {
  0%, 100% { filter: brightness(1) saturate(1) sepia(0) drop-shadow(0 0 0 transparent); }
  24%, 68% { filter: brightness(1.16) saturate(1.22) sepia(.18) drop-shadow(0 0 5px rgba(255, 244, 163, .62)) drop-shadow(0 0 12px rgba(255, 200, 61, .58)) drop-shadow(0 0 20px rgba(255, 155, 18, .45)); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-idle-effect="gold"] .map-region.is-idle-highlight .map-region__visual img { animation: none; }
}

.map-region__star-ring {
  position: absolute;
  inset: var(--locator-top) var(--locator-inline) var(--locator-bottom);
  border-radius: 50%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: scale(calc(.96 * var(--locator-scale, 1)));
  visibility: hidden;
}

.map-region__locator-ring {
  position: absolute;
  left: var(--locator-left, 15%);
  top: var(--locator-top, 35%);
  width: 70%;
  height: 50%;
  border-radius: 50%;
  z-index: 20;
  /* 定位圈是运行态唯一可点击/悬停的命中区；opacity:0 但仍是有效命中目标 */
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform-origin: center;
  transform: scale(calc(.96 * var(--locator-scale, 1)));
  transition: opacity 160ms ease;
}

/* 仅编辑器内悬停显示淡黄环提示激活区；前台地图页隐藏（用户要求前台也不显示光圈） */
.is-editor-preview .map-region:hover .map-region__locator-ring,
.is-editor-preview .map-region:focus-visible .map-region__locator-ring {
  opacity: .42;
  box-shadow: 0 0 0 3px rgba(255, 220, 80, .7), 0 0 18px rgba(255, 220, 80, .55);
}

html[data-idle-effect="stars"] .map-region.is-idle-highlight .map-region__star-ring {
  animation: subee-idle-star-ring-envelope 2.5s ease-in-out 1;
  visibility: visible;
}

.map-region__star {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  color: #fff1a0;
  font-size: clamp(16px, 1.9vw, 28px);
  line-height: 1;
  opacity: 0;
  text-shadow: 0 0 3px #fff, 0 0 8px rgba(255, 218, 83, .9), 0 0 14px rgba(255, 164, 28, .58);
  transform: translate(-50%, -50%) scale(.45);
}

html[data-idle-effect="stars"] .map-region.is-idle-highlight .map-region__star {
  animation: subee-idle-building-star-twinkle var(--star-duration) ease-in-out var(--star-delay) infinite;
}

@keyframes subee-idle-building-star-twinkle {
  0%, 100% { opacity: .52; transform: translate(-50%, -50%) scale(.68) rotate(0deg); }
  48% { opacity: .95; transform: translate(-50%, -50%) scale(1.08) rotate(20deg); }
}

@keyframes subee-idle-star-ring-envelope {
  0% { opacity: 0; transform: scale(.96); }
  20% { opacity: 1; transform: scale(1); }
  68% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-idle-effect="stars"] .map-region.is-idle-highlight .map-region__star-ring { display: none; }
  html[data-idle-effect="stars"] .map-region.is-idle-highlight .map-region__star { animation: none; }
}

.map-region[data-mask="ellipse"] .map-region__visual,
.map-region[data-mask="feathered_ellipse"] .map-region__visual {
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.map-region__placeholder {
  width: 82%;
  height: 74%;
  border: 2px dashed rgba(255, 255, 255, .62);
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 0 26px rgba(255,255,255,.15);
}

.map-region__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 36px);
  bottom: auto;
  min-width: max-content;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 43, 54, .78);
  box-shadow: 0 5px 16px rgba(0,0,0,.25);
  font-size: clamp(11px, 1.35vw, 16px);
  font-weight: 800;
  pointer-events: none;
  transform: translateX(-50%);
  backdrop-filter: blur(7px);
}

/* 有图片的区域：标签跟着图片底部走，不再停在 slot 容器底部 */
.map-region.has-image .map-region__label {
  top: calc(var(--image-bottom, 100%) + 10px);
}

.is-editor-preview .map-heading, .is-editor-preview .map-switch-navigation, .is-editor-preview .candidate-note, .is-editor-preview .world-controls { display: none; }
.is-editor-preview { min-width: 0; }
.is-editor-preview .map-shell {
  display: grid;
  width: 100%;
  height: 100vh;
  min-height: 0;
  padding: 0;
  place-items: center;
}
.is-editor-preview .learning-map {
  width: min(100vw, calc(100vh * 2565 / 1440));
  height: min(100vh, calc(100vw * 1440 / 2565));
  max-height: none;
  transition: transform 260ms ease;
}
.is-editor-preview .learning-map { border-radius: 0; box-shadow: none; }
.is-editor-preview .map-region__visual {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.is-editor-preview .map-region.has-image .map-region__visual {
  inset: auto;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
}
.is-editor-preview .map-region.has-image .map-region__visual img {
  display: block;
  width: 100%;
  height: auto;
}
.is-editor-preview .map-region__placeholder {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.is-editor-preview .map-region.is-selected .map-region__visual {
  filter: brightness(1.08);
}
.is-editor-preview .map-region.is-selected .map-region__star-ring {
  display: none;
}
.is-editor-preview .map-region.is-selected .map-region__locator-ring,
.is-editor-preview .map-region.is-locator-active .map-region__locator-ring {
  border: 3px dashed rgba(255, 255, 255, .98);
  outline: 2px solid rgba(7, 31, 50, .78);
  box-shadow: 0 0 0 4px rgba(255, 220, 80, .55), 0 0 18px rgba(255, 220, 80, .78);
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  animation: none;
}

.candidate-note {
  position: absolute;
  left: 24px;
  bottom: 16px;
  z-index: 100;
  margin: 0;
  color: #e4f1f6;
  font-size: 12px;
  text-shadow: 0 2px 5px rgba(3, 28, 43, .82);
}