/* Maruva Bay runtime UI overrides.
 * This file is loaded directly by index.html because game/template SCSS is not
 * compiled into the exported WebGAL runtime. Keep these rules after the engine CSS.
 */

:root {
  --maruva-dialog-bg: rgba(0, 0, 0, 0.58);
  --maruva-dialog-border: rgba(255, 255, 255, 0.42);
  --maruva-white: #fff;
}

/* Dialogue panel: one flat translucent black surface behind all dialogue text. */
._TextBox_main_p1zxt_18,
._TextBox_main_miniavatarOff_p1zxt_39 {
  left: 7% !important;
  right: 7% !important;
  bottom: 68px !important;
  min-height: 176px !important;
  max-height: 238px !important;
  padding: 29px 46px 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--maruva-white) !important;
  font-size: clamp(20px, 1.55vw, 31px) !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  letter-spacing: 0.035em !important;
}

._TextBox_Background_p1zxt_43 {
  background: var(--maruva-dialog-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(1px);
}

._text_p1zxt_174 {
  width: 100% !important;
  max-height: 176px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}

/* WebGAL draws every glyph twice. Remove the outline layer and force the visible
 * layer to solid white so text never inherits the stock navy gradient/stroke. */
._outer_p1zxt_64,
._readTextOuter_p1zxt_178 {
  color: var(--maruva-white) !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: var(--maruva-white) !important;
  -webkit-text-stroke: 0 transparent !important;
  text-shadow: none !important;
}

._inner_p1zxt_78 {
  display: none !important;
  -webkit-text-stroke: 0 transparent !important;
  text-shadow: none !important;
}

/* Character name: restore the Figma-like plain label and divider, enlarged and
 * aligned with the dialogue copy instead of using the small blue pill. */
._TextBox_showName_p1zxt_104,
._TextBox_ShowName_Background_p1zxt_117 {
  left: 0 !important;
  top: -66px !important;
  width: min(420px, 42vw) !important;
  height: 58px !important;
  box-sizing: border-box !important;
  padding: 0 0 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--maruva-white) !important;
  font-size: clamp(25px, 2vw, 36px) !important;
  font-weight: 500 !important;
  line-height: 50px !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

._nameContainer_p1zxt_150 {
  left: 0 !important;
  top: -66px !important;
  width: min(420px, 42vw) !important;
  height: 58px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.58) !important;
  color: var(--maruva-white) !important;
  font-size: clamp(25px, 2vw, 36px) !important;
  line-height: 50px !important;
}

._outerName_p1zxt_156,
._innerName_p1zxt_167 {
  color: var(--maruva-white) !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: var(--maruva-white) !important;
  -webkit-text-stroke: 0 transparent !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Ordinary choices keep the requested translucent black style. */
._Choose_item_1kza1_13,
._Choose_item_disabled_1kza1_34 {
  min-width: min(680px, 66vw) !important;
  margin: 8px 0 !important;
  padding: 15px 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.58) !important;
  box-shadow: none !important;
  color: var(--maruva-white) !important;
  font-size: clamp(21px, 1.9vw, 34px) !important;
  font-weight: 400 !important;
}

._Choose_item_1kza1_13:hover {
  border-color: #fff !important;
  background: rgba(0, 0, 0, 0.76) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.22) !important;
}

._Choose_item_outer_1kza1_50 {
  color: inherit !important;
}

/* Hotspot mode is activated by an invisible mini-avatar marker set by the
 * scene script. The actual clickable choices become pulsing points. */
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._miniAvatarContainer_p1zxt_132 {
  width: 1px !important;
  height: 1px !important;
  left: -9999px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_Main_1kza1_1 {
  display: block !important;
  background: transparent !important;
  pointer-events: none !important;
}

body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_item_1kza1_13,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_item_disabled_1kza1_34 {
  position: absolute !important;
  z-index: 25 !important;
  display: block !important;
  min-width: 0 !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
}

body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_item_1kza1_13::after,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_item_disabled_1kza1_34::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.95);
  transform: translate(-50%, -50%);
  animation: maruva-hotspot-pulse 1.45s ease-out infinite;
}

body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_item_disabled_1kza1_34::after {
  background: transparent;
  opacity: 0.58;
  animation: none;
}

body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_item_1kza1_13::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_item_disabled_1kza1_34::before {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  min-width: max-content;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_item_1kza1_13:hover::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_"]) ._Choose_item_disabled_1kza1_34:hover::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes maruva-hotspot-pulse {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.75), 0 0 12px rgba(255,255,255,.95); }
  70% { opacity: .92; box-shadow: 0 0 0 15px rgba(255,255,255,0), 0 0 19px rgba(255,255,255,.85); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 12px rgba(255,255,255,.95); }
}

/* Main village map. */
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_1kza1_13:nth-child(1),
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(1) { left: 29.5% !important; top: 22.5% !important; }
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_1kza1_13:nth-child(2),
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(2) { left: 48.2% !important; top: 55.5% !important; }
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_1kza1_13:nth-child(3),
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(3) { left: 49.2% !important; top: 24.2% !important; }
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_1kza1_13:nth-child(1)::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(1)::before { content: "Church"; }
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_1kza1_13:nth-child(2)::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(2)::before { content: "Chief’s House"; }
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_1kza1_13:nth-child(3)::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_map_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(3)::before { content: "Landlord’s House"; }

/* Interior investigation hotspots used by both church and village-chief routes. */
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_chief_marker"]) ._Choose_item_1kza1_13:nth-child(1),
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_chief_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(1) { left: 72.8% !important; top: 20.5% !important; }
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_chief_marker"]) ._Choose_item_1kza1_13:nth-child(2),
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_chief_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(2) { left: 39.5% !important; top: 81.5% !important; }
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_church_marker"]) ._Choose_item_1kza1_13:nth-child(1),
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_church_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(1) { left: 34.5% !important; top: 24% !important; }
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_church_marker"]) ._Choose_item_1kza1_13:nth-child(2),
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_church_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(2) { left: 54% !important; top: 81.5% !important; }

body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_chief_marker"]) ._Choose_item_1kza1_13:nth-child(1)::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_chief_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(1)::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_church_marker"]) ._Choose_item_1kza1_13:nth-child(1)::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_church_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(1)::before { content: "Mold on the Walls"; }
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_chief_marker"]) ._Choose_item_1kza1_13:nth-child(2)::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_chief_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(2)::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_church_marker"]) ._Choose_item_1kza1_13:nth-child(2)::before,
body:has(._miniAvatarImg_p1zxt_142[src*="hotspot_church_marker"]) ._Choose_item_disabled_1kza1_34:nth-child(2)::before { content: "Water on the Floor"; }

@media (max-width: 900px) {
  ._TextBox_main_p1zxt_18,
  ._TextBox_main_miniavatarOff_p1zxt_39 {
    left: 3.5% !important;
    right: 3.5% !important;
    bottom: 54px !important;
    min-height: 148px !important;
    max-height: 205px !important;
    padding: 25px 28px 24px !important;
  }
  ._TextBox_showName_p1zxt_104,
  ._TextBox_ShowName_Background_p1zxt_117,
  ._nameContainer_p1zxt_150 {
    top: -55px !important;
    height: 49px !important;
    line-height: 42px !important;
  }
}