/* extras.css —— 扩展轮样式：楼宇名片 / 今日蜃楼 / 观礼 letterbox */

/* —— 楼宇名片：敲一栋楼，读它的小传 —— */
.lore-card {
  position: absolute; top: 0; left: 0;
  width: 236px;
  background: var(--panel-bg);
  border: 1px solid rgba(255, 184, 104, 0.35);
  box-shadow: var(--shadow-float);
  padding: var(--s2) var(--s3) var(--s2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
  pointer-events: none;
  z-index: 8;
}
.lore-card::before {
  content: '';
  position: absolute; top: -1px; left: -1px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--amber);
  border-left: 1px solid var(--amber);
  opacity: 0.8;
}
.lore-card.show { opacity: 1; }

.lore-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s1);
}
.lore-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255, 184, 104, 0.35);
}
.lore-no {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--faint);
  white-space: nowrap;
}
.lore-line {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--paper);
  letter-spacing: 0.03em;
}
.lore-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--faint);
  padding-top: var(--s1);
}

/* —— 今日蜃楼：城市晚报 —— */
.daily {
  border: 1px solid var(--line-dim);
  padding: var(--s2) var(--s3) var(--s3);
  margin-bottom: var(--s4);
}
.daily-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--amber);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-dim);
  margin-bottom: var(--s2);
}
.daily-list { list-style: none; }
.daily-list li {
  position: relative;
  padding: 4px 0 4px 16px;
  font-size: 13.5px;
  color: var(--dim);
  line-height: 1.8;
}
.daily-list li::before {
  content: '◦';
  position: absolute; left: 2px;
  color: var(--neon);
  font-family: var(--font-mono);
}

/* —— 观礼模式：letterbox + UI 退场 —— */
#bar-top, #bar-bottom {
  position: fixed; left: 0; right: 0; height: 9vh;
  background: #000;
  z-index: 15;
  transition: transform 700ms var(--ease);
  pointer-events: none;
}
#bar-top { top: 0; transform: translateY(-101%); }
#bar-bottom { bottom: 0; transform: translateY(101%); }
body.cinema #bar-top { transform: translateY(0); }
body.cinema #bar-bottom { transform: translateY(0); }

body.cinema #hud-tl,
body.cinema #hud-tr,
body.cinema #deck,
body.cinema #hint { opacity: 0 !important; pointer-events: none !important; }
body.cinema .pin { opacity: 0 !important; pointer-events: none !important; }
body.cinema #stage { cursor: none; }

/* 观礼按钮常态低调 */
#cinema-btn, #guide-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(232, 241, 255, 0.82);
  border: 1px solid var(--line-dim);
  padding: 5px 10px;
  border-radius: var(--r1);
  min-height: 28px;
  white-space: nowrap;
}
#cinema-btn:hover, #guide-btn:hover { color: var(--cyan); border-color: var(--line); }
#cinema-btn.on {
  color: var(--amber);
  border-color: rgba(255, 184, 104, 0.5);
  text-shadow: 0 0 10px rgba(255, 184, 104, 0.4);
}


@media (max-width: 760px) {
  .lore-card { width: 200px; }
}

/* —— 签云观：摇签与签文 —— */
.oracle-note {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--dim);
  padding-bottom: var(--s2);
}
.oracle-btn {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  padding: 12px var(--s5);
}
.oracle-btn.shaking { animation: shake 120ms linear infinite; }
.oracle-btn:disabled { opacity: 0.75; cursor: default; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-1deg); }
  75% { transform: translateX(3px) rotate(1deg); }
}
.oracle-slip-wrap { display: flex; justify-content: center; padding: var(--s3) 0 var(--s2); min-height: 150px; }
.fortune-slip {
  width: min(360px, 100%);
  border: 1px solid rgba(255, 184, 104, 0.45);
  background: rgba(255, 184, 104, 0.05);
  padding: var(--s3) var(--s4);
  text-align: center;
  position: relative;
}
.fortune-slip::before, .fortune-slip::after {
  content: '';
  position: absolute; top: -1px; width: 12px; height: 12px;
  border-top: 1px solid var(--amber);
}
.fortune-slip::before { left: -1px; border-left: 1px solid var(--amber); }
.fortune-slip::after { right: -1px; border-right: 1px solid var(--amber); }
.fortune-no {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.3em;
  color: var(--faint);
}
.fortune-rank {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--neon);
  text-shadow: 0 0 16px rgba(255, 94, 158, 0.35);
  padding: var(--s1) 0;
}
.fortune-text {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 2;
  color: var(--paper);
  letter-spacing: 0.05em;
}
.fortune-src {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--faint);
  padding-top: var(--s2);
}

/* —— 猫巷：猫卡 —— */
.cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
  padding-bottom: var(--s2);
}
.cat-card {
  border: 1px solid var(--line-dim);
  padding: var(--s2);
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cat-card:hover { border-color: rgba(255, 184, 104, 0.4); transform: translateY(-2px); }
.cat-face { width: 100%; height: auto; aspect-ratio: 96 / 66; }
.cat-namerow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); }
.cat-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--amber);
}
.cat-job {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-align: right;
}
.cat-look { font-size: 11.5px; color: var(--faint); line-height: 1.6; }
.cat-quote {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--dim);
  line-height: 1.8;
}

/* —— 观潮台：潮位计 —— */
.tide-meter {
  position: relative;
  height: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(111, 224, 255, 0.04), rgba(111, 224, 255, 0.14), rgba(111, 224, 255, 0.04));
  margin: var(--s2) 0 var(--s1);
}
.tide-marker {
  position: absolute; top: -3px; bottom: -3px;
  width: 3px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(111, 224, 255, 0.9);
  transition: left 300ms linear;
}
.tide-levels {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.tide-now {
  font-size: var(--fs-label);
  color: var(--cyan);
}
.tide-next {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--paper);
  padding-top: var(--s2);
}

/* —— 楼宇名片：住户 —— */
.lore-res { list-style: none; padding-top: var(--s1); }
.lore-res li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
  padding: 1px 0;
}
.lore-res li::before { content: '· '; color: var(--amber); }

@media (max-width: 760px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* —— 降临者档案 —— */
.footprint { padding-top: var(--s3); }
.foot-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
  padding-bottom: var(--s2);
}
.foot-cell {
  border: 1px solid var(--line-dim);
  padding: var(--s2);
  display: flex; flex-direction: column; gap: 2px;
}
.foot-cell .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--faint);
}
.foot-cell .v {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--paper);
}

/* —— 悬停楼名 tooltip（网页式） —— */
.hover-tip {
  position: fixed; z-index: 25;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
  background: rgba(6, 10, 19, 0.9);
  border: 1px solid var(--line);
  padding: 3px 9px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms var(--ease);
  white-space: nowrap;
}
.hover-tip.show { opacity: 1; }

/* —— 漂流瓶：浮标与邮局 —— */
.pin.bottle-pin .pin-dot { color: var(--neon); text-shadow: 0 0 12px rgba(255, 94, 158, 0.9); animation: bottleBob 3.2s ease-in-out infinite; }
.pin.bottle-pin .pin-label { color: var(--neon); border-color: rgba(255, 94, 158, 0.4); }
@keyframes bottleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.bottle-list { list-style: none; padding-bottom: var(--s2); }
.bottle-list li {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--paper);
  line-height: 2;
  border-left: 2px solid rgba(255, 94, 158, 0.5);
  padding: var(--s1) 0 var(--s1) var(--s2);
  margin-bottom: var(--s1);
}
.bottle-empty {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--dim);
  padding: var(--s1) 0 var(--s2);
}
.bottle-form { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; padding-top: var(--s2); }
.bottle-form input[type="text"] {
  flex: 1; min-width: 12em;
  font: inherit; font-size: 14px;
  color: var(--paper);
  background: rgba(3, 6, 12, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: 9px var(--s2);
  caret-color: var(--neon);
}
.bottle-form select {
  font: inherit; font-size: 13px;
  color: var(--paper);
  background: rgba(3, 6, 12, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: 9px var(--s2);
}
.star-tip { white-space: pre-line; }
.tide-bottle-title { padding-top: var(--s2); }