/* =====================================================================
   starmap.css — 祝福星图连线小游戏
   ===================================================================== */

/* ── 原页面虚化 */
#page-content.smap-blurred {
  filter: blur(8px) brightness(0.35) saturate(0.6);
  transition: filter .45s ease;
  pointer-events: none;
  user-select: none;
}

/* ── 全屏遮罩 */
#smapOverlay {
  position: fixed; inset: 0; z-index: 900;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
#smapOverlay.smap-visible {
  opacity: 1; pointer-events: auto;
}

/* 半透明深色底 */
.smap-blur-bg {
  position: absolute; inset: 0;
  background: rgba(14, 8, 5, 0.82);
}

/* Canvas 全屏 */
#smapCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ── 底部信息条 */
.smap-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: rgba(20, 12, 8, 0.72);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(200, 160, 106, 0.18);
  z-index: 10;
}

.smap-bottom-left {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; flex: 1;
}
.smap-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.smap-my-tag {
  font-family: 'Noto Serif SC', serif;
  font-size: .82rem; color: rgba(255,255,255,.85);
  letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.smap-bottom-center {
  font-family: 'Noto Serif SC', serif;
  font-size: .78rem; font-style: italic;
  color: rgba(200, 160, 106, .75);
  letter-spacing: .12em;
  white-space: nowrap;
  flex-shrink: 0; padding: 0 16px;
}
.smap-count-num {
  font-style: normal; font-weight: 600;
  color: #C8A06A;
}

.smap-close {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.65);
  font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.smap-close:hover {
  background: rgba(255,255,255,.18); color: #fff;
  transform: rotate(90deg);
}

/* ── 提示文字（第一人 / 人数少） */
.smap-hint {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Noto Serif SC', serif;
  font-style: italic; font-size: 1.05rem;
  color: rgba(200, 160, 106, .65);
  letter-spacing: .18em;
  pointer-events: none;
  text-align: center;
  animation: smapHintFade 3s ease 2.5s forwards;
  opacity: 1;
}
@keyframes smapHintFade {
  0%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 节点 tooltip 气泡 */
.smap-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  background: rgba(20, 12, 8, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200,160,106,.3);
  border-radius: 20px;
  padding: 5px 12px 5px 8px;
  display: flex; align-items: center; gap: 7px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 950;
  animation: smapTipIn .18s ease both;
}
@keyframes smapTipIn {
  from { opacity: 0; transform: translate(-50%, -90%); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}
/* 小三角 */
.smap-tooltip::after {
  content: '';
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(200,160,106,.3);
}
.smap-tip-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.smap-tip-name {
  font-family: 'Noto Serif SC', serif;
  font-size: .76rem; color: rgba(255,255,255,.88);
  letter-spacing: .05em;
}

/* ── 响应式 */
@media (max-width: 480px) {
  .smap-bottom { padding: 0 14px; height: 52px; }
  .smap-bottom-center { font-size: .68rem; padding: 0 8px; }
  .smap-my-tag { font-size: .74rem; }
  .smap-close { width: 32px; height: 32px; font-size: 11px; }
  .smap-hint { font-size: .88rem; letter-spacing: .1em; padding: 0 20px; }
}