/* Oslíkovo – patch 2026-10-29 v2 */
:root {
  --osli-footer-space: clamp(84px, 10vh, 112px);
  --osli-map-gap: clamp(8px, 1.4vw, 16px);
}
html, body { min-height: 100%; }
body.osli-map-page {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 18%, #163759 0%, #0b2036 48%, #07101d 100%);
  color: #fff9e8;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
.osli-map-page .map-page {
  min-height: calc(100vh - var(--osli-footer-space));
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  padding: var(--osli-map-gap) clamp(8px, 1vw, 14px) 0;
}
.osli-map-page .map-frame {
  position: relative;
  margin: 0 auto;
  width: min(100%, calc((100vh - var(--osli-footer-space) - (var(--osli-map-gap) * 2)) * 1.5));
  max-width: 1536px;
  overflow: visible;
  isolation: isolate;
}
.osli-map-page .map-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - var(--osli-footer-space) - (var(--osli-map-gap) * 2));
  margin-inline: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.osli-map-page .map-hotspot,
.osli-map-page .map-character-trigger {
  position: absolute;
  z-index: 2;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 16%;
  background: transparent;
  outline-offset: -3px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(253,204,91,.25);
}
.osli-map-page .map-hotspot:hover,
.osli-map-page .map-character-trigger:hover { background: rgba(255, 208, 78, .045); }
.osli-map-page .map-hotspot:focus-visible,
.osli-map-page .map-character-trigger:focus-visible { outline: 3px dashed #ffe184; background:rgba(246,184,67,.1); }
.osli-map-page .hotspot-castle  { left: 38.8%; top: 0.4%; width: 30%; height: 34.5%; }
.osli-map-page .hotspot-tree    { left: 7.7%; top: 12.6%; width: 32.8%; height: 40%; }
.osli-map-page .hotspot-navy    { left: 0%; top: 68.8%; width: 34.5%; height: 30.5%; }
.osli-map-page .hotspot-market  { left: 15%; top: 56.5%; width: 24%; height: 17.5%; }
.osli-map-page .hotspot-wanted  { left: 39%; top: 54.5%; width: 15.2%; height: 22%; }
.osli-map-page .hotspot-camp    { left: 52.2%; top: 54.5%; width: 25.2%; height: 27%; }
.osli-map-page .hotspot-dungeon { left: 67.8%; top: 22.2%; width: 31%; height: 34.5%; }
.osli-map-page .hotspot-mystery { left: 83.8%; top: 73.7%; width: 16.2%; height: 26.3%; z-index: 4; }
.osli-map-page .map-hotspot .map-label {
  position: absolute !important;
  width: 1px !important; height: 1px !important; padding: 0 !important;
  overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important; margin: -1px !important;
}
.osli-map-page .map-hotspot::before,
.osli-map-page .map-hotspot::after { content: none !important; }
.osli-map-page .osli-dialogue-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: visible;
}
.osli-map-page .osli-dialogue {
  --speech-x: 50%; --speech-y: 35%;
  position: absolute; left: var(--speech-x); top: var(--speech-y);
  display: flex; flex-direction: column; gap: 6px;
  box-sizing: border-box; width: max-content; min-width: 188px; max-width: min(355px, 34vw);
  padding: 14px 18px 12px;
  border: 2px solid #ad6c30; border-radius: 18px;
  background: linear-gradient(155deg, rgba(255,252,224,.99),rgba(249,226,169,.98));
  box-shadow: 0 7px 0 rgba(73,34,10,.45), 0 12px 24px rgba(0,0,0,.45);
  color: #42230c; font-size: clamp(13px, 1vw, 16px); line-height: 1.35;
  text-align: center;
  transform: translate(-50%, calc(-100% - 12px)) scale(.97); transform-origin: center bottom;
  opacity: 0; visibility: hidden; transition: transform .19s ease, opacity .19s ease, visibility .19s;
  pointer-events: none;
}
.osli-map-page .osli-dialogue.is-visible {
  opacity: 1; visibility: visible;
  transform: translate(-50%, calc(-100% - 12px)) scale(1);
}
.osli-map-page .osli-dialogue::after {
  content: ""; position: absolute; bottom: -13px; left: calc(50% - 12px);
  width: 20px; height: 20px; background: #f9e2a9; border-right: 2px solid #ad6c30;
  border-bottom: 2px solid #ad6c30; transform: rotate(45deg);
}
.osli-map-page .osli-dialogue.is-below {
  border-color: #8558b2;
  background: linear-gradient(145deg, #382056, #1e1537); color: #f7e8ff;
  transform: translate(-50%, 14px) scale(.97); transform-origin: center top;
}
.osli-map-page .osli-dialogue.is-visible.is-below { transform: translate(-50%, 14px) scale(1); }
.osli-map-page .osli-dialogue.is-below::after {
  top: -12px; bottom: auto; background: #382056;
  border: 0; border-left: 2px solid #8558b2; border-top: 2px solid #8558b2;
}
.osli-map-page .osli-dialogue-text { font-weight: 750; overflow-wrap: break-word; }
.osli-map-page .osli-dialogue-hint { opacity: .8; font-size: .78em; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .osli-map-page .osli-dialogue { transition: none; }
}
@media (max-width: 900px) {
  :root { --osli-footer-space: 126px; }
  .osli-map-page .map-page {
    min-height: auto;
    align-items: start;
    padding-top: 6px;
  }
  .osli-map-page .map-frame {
    width: min(100%, calc((100vh - var(--osli-footer-space) - 12px) * 1.5));
  }
}
@media (max-width: 700px) {
  :root { --osli-footer-space: 146px; }
  .osli-map-page .map-page { padding-inline: 3px; }
  .osli-map-page .osli-dialogue,
  .osli-map-page .osli-dialogue.is-below,
  .osli-map-page .osli-dialogue.is-visible,
  .osli-map-page .osli-dialogue.is-visible.is-below {
    left: 4% !important; top: calc(100% + 10px) !important;
    width: 92%; min-width: 0; max-width: 92%; padding: 10px 12px;
    font-size: 13px; transform: none; text-align: center;
  }
  .osli-map-page .osli-dialogue::after { display: none; }
}