/* interactive-map v1 — base map styles */

/* SVG base */
svg {
   cursor: default;
   user-select: none;
   -webkit-user-select: none;
}

/* Section polygons: default fill.
   stroke-width is read from a CSS custom property so dev-config can
   override it at runtime via `--im-poly-stroke-width` on the map root. */
polygon:not([data-dyn='1']) {
   fill: #F5F5F5;
   stroke: #CCC;
   stroke-width: var(--im-poly-stroke-width, 0.5);
   cursor: pointer;
}

/* Section text labels */
text:not([data-dyn]) {
   pointer-events: none;
}

/* Dynamic text labels (stage / fighting-ring / floor-tbd-placeholder /
   bench labels etc.). Match ti.2's `text.is-d` parity — bold + no
   pointer events so hovering doesn't intercept gestures. The API
   supplies fill / font-size via attributes; this rule only adds weight. */
text[data-dyn] {
   pointer-events: none;
   font-weight: bold;
}

/* Stage / ring polygons */
polygon[data-id='static_stage'],
polygon[data-id='b_stage'],
polygon[data-id='fighting_ring'] {
   fill: #151515;
}

/* Overlay image */
.nopointereventsmap {
   pointer-events: none;
}

/* Loading skeleton */
.im-loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   gap: 12px;
   color: #999;
   font-size: 13px;
}

@keyframes im-loading-pulse {
   0%, 100% { transform: scale(0.85); opacity: 0.4; }
   50%      { transform: scale(1);    opacity: 0.8; }
}

.im-loading-pulse {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: #ddd;
   animation: im-loading-pulse 1.2s ease-in-out infinite;
}

.im-loading-text {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Working indicator (animated dots) */
.im-working {
   position: absolute;
   top: 32px;
   left: 50%;
   transform: translateX(-50%);
   background: white;
   border-radius: 20px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   padding: 12px 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   pointer-events: none;
}

.im-working-dots {
   display: flex;
   gap: 4px;
}

.im-working-dots div {
   width: 8px;
   height: 8px;
   background: #0067CE;
   border-radius: 50%;
   animation: im-working-blink 1.4s infinite both;
}

.im-working-dots div:nth-child(1) { animation-delay: 0s; }
.im-working-dots div:nth-child(2) { animation-delay: 0.2s; }
.im-working-dots div:nth-child(3) { animation-delay: 0.4s; }

@keyframes im-working-blink {
   0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
   40% { opacity: 1; transform: scale(1.3); }
}