/* ============================================================
   屿与星 · 十间房 rooms.css
   增强层样式。全部颜色引用 index.html 已有的 :root 变量,
   命名空间 yx- ,与旧样式零冲突。
   ============================================================ */

/* ---------- 门牌导航 ---------- */
.yx-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 860px;
  margin: 18px auto 26px;
  padding: 0 20px;
}
.yx-door {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: color .25s, border-color .25s, box-shadow .25s;
  text-decoration: none;
}
.yx-door:hover {
  color: var(--text);
  border-color: var(--border-hover);
}
.yx-door.yx-lit {
  color: var(--gold);
  border-color: var(--gold-dim);
  box-shadow: 0 0 14px var(--gold-dim), inset 0 0 8px var(--gold-dim);
}

/* ---------- 房间容器 ---------- */
.yx-room {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 80px;
}
.yx-room-title {
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--text-muted);
  text-align: center;
  margin: 6px 0 4px;
}
.yx-room-sub {
  font-size: 12px;
  color: var(--text-muted);
  opacity: .7;
  text-align: center;
  margin: 0 0 26px;
}

/* ---------- 空房间的灯 ---------- */
.yx-empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--text-muted);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 2;
}
.yx-empty::before {
  content: "";
  display: block;
  width: 6px; height: 6px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px 4px var(--gold-dim);
  opacity: .8;
}

/* ---------- 通用卡片(与旧首页同魂) ---------- */
.yx-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, opacity .4s;
  position: relative;
}
.yx-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
}
.yx-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.yx-card-title {
  font-size: 15px;
  color: var(--text-bright);
}
.yx-badge {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 10px;
  padding: 2px 9px;
  white-space: nowrap;
}
.yx-card-body {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text);
}
.yx-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ---------- 记忆的沉浮 ---------- */
.yx-card.yx-pinned {
  border-color: rgba(168, 198, 134, 0.35);
}
.yx-card.yx-pinned .yx-card-title::before {
  content: "◈ ";
  color: var(--accent);
  font-size: 12px;
}
.yx-card.yx-sinking { opacity: .55; }
.yx-card.yx-deep    { opacity: .38; }
.yx-card.yx-resolved .yx-card-title { text-decoration: line-through; text-decoration-color: var(--border-hover); text-decoration-thickness: 1px; }

/* 左侧主题色条：按 domain 上色(rooms.js 设 --cat-color)，默认淡；高权重/固化的更亮更粗 */
.yx-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--cat-color, var(--accent));
  opacity: .4;
  transition: opacity .25s, width .25s;
}
.yx-card:hover::before { opacity: .7; }
.yx-card.yx-strong { border-color: var(--border-hover); }
.yx-card.yx-strong::before,
.yx-card.yx-pinned::before { opacity: .92; width: 4px; }
.yx-card.yx-deep::before, .yx-card.yx-sinking::before { opacity: .22; }

/* 情感色点:V 定色,A 定光 */
.yx-mood {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ---------- 检索 ---------- */
.yx-search {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 24px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-bright);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 9px 18px;
  outline: none;
  transition: border-color .25s;
}
.yx-search::placeholder { color: var(--text-muted); }
.yx-search:focus { border-color: var(--border-hover); }

/* ---------- 信件阅览室:水更深的地方 ---------- */
.yx-letters { max-width: 640px; }
.yx-letter {
  background: rgba(5, 16, 12, 0.72);
  border: 1px solid var(--gold-dim);
  border-radius: 14px;
  padding: 30px 34px;
  margin-bottom: 26px;
}
.yx-letter-body {
  font-size: 14.5px;
  line-height: 2.15;
  color: var(--text);
  white-space: pre-wrap;
}
.yx-letter-sign {
  margin-top: 22px;
  text-align: right;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 2px;
}
.yx-letter-date {
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------- 约定墙 ---------- */
.yx-wall-section {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin: 30px 4px 14px;
  border-left: 2px solid var(--accent-dim);
  padding-left: 10px;
}
.yx-plan-weight {
  color: var(--gold);
  letter-spacing: 1px;
}

/* ---------- 时间线 ---------- */
.yx-day {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold);
  margin: 32px 4px 12px;
  opacity: .85;
}
.yx-day::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
}

/* ---------- 旧居 ---------- */
.yx-oldhome-banner {
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 2px;
  color: var(--text-muted);
  border: 1px dashed var(--border-hover);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 26px;
  line-height: 2;
}

/* ---------- 情感地图 ---------- */
.yx-map {
  position: relative;
  height: 420px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  margin-bottom: 12px;
}
.yx-map-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  cursor: pointer;
  transition: box-shadow .2s;
}
.yx-map-dot:hover { box-shadow: 0 0 12px 2px var(--accent-dim); z-index: 2; }
.yx-map-dot .yx-map-tip {
  display: none;
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-bright);
  background: rgba(5, 16, 12, 0.92);
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  padding: 4px 10px;
}
.yx-map-dot:hover .yx-map-tip { display: block; }
.yx-map-axis {
  position: absolute;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--text-muted);
  opacity: .6;
}

/* ---------- 纪念日 ---------- */
.yx-days-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.yx-dayscard {
  text-align: center;
  padding: 26px 16px;
}
.yx-dayscard .yx-num {
  font-size: 30px;
  color: var(--gold);
  letter-spacing: 1px;
}
.yx-dayscard .yx-lbl {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 8px;
  letter-spacing: 1px;
  line-height: 1.8;
}

/* ---------- 时间胶囊 ---------- */
.yx-capsule-seal {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--gold-dim);
  border-radius: 14px;
  padding: 40px 26px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 2.2;
  letter-spacing: 1px;
}

/* ---------- 页脚脉搏 ---------- */
.yx-pulse {
  position: relative;
  max-width: 860px;
  margin: 30px auto 26px;
  padding: 14px 20px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.yx-pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: yx-breathe 4s ease-in-out infinite;
}
@keyframes yx-breathe {
  0%, 100% { opacity: .35; box-shadow: 0 0 2px var(--accent-dim); }
  50%      { opacity: 1;   box-shadow: 0 0 10px 2px var(--accent-dim); }
}
@media (prefers-reduced-motion: reduce) {
  .yx-pulse-dot { animation: none; opacity: .8; }
}

@media (max-width: 560px) {
  .yx-door { font-size: 12px; padding: 4px 10px; letter-spacing: 1px; }
  .yx-letter { padding: 22px 20px; }
  .yx-map { height: 340px; }
}