/* ============================================================
   司辰 · 沉浸入口＋觀星台 v2 樣式（sichen-entry.js 專用）
   轉譯自 Claude Design「司辰 Design System」ui_kits/tianshu/app.jsx（v2 六步觀星台）
   與 review-observatory-v2.html／review-hands-removal.html 驗收規格。
   全部作用域鎖在 #sichen-entry 與 html.se-active，不污染原版介面變數。
   觀星台規則：無主宰人像、無 Hands 光暈、無白閃光柱；主宰只在入口影片
   與「再次覲見主宰」出現。
   ============================================================ */

@font-face {
  font-family: 'The Peak Font';
  src: url('assets/fonts/ThePeakFontBeta_V0.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html.se-active { overflow: hidden; }
html.se-active body > .stage,
html.se-active body > .ts-deco { visibility: hidden; }

/* ---------- tokens ---------- */
#sichen-entry {
  --se-void-0: #030408;
  --se-void-1: #05070d;
  --se-nebula-2: #101624;
  --se-nebula-3: #161d2e;
  --se-silver-0: #f2f4f8;
  --se-silver-1: #dfe3ec;
  --se-silver-2: #b9c0cf;
  --se-silver-3: #8c93a6;
  --se-silver-4: #5d6376;
  --se-gold-1: #d8c08a;
  --se-gold-2: #b89d63;
  --se-surface-panel: rgba(16, 22, 36, 0.62);
  --se-surface-input: rgba(8, 11, 20, 0.55);
  --se-text-oracle: var(--se-silver-0);
  --se-text-title: var(--se-silver-1);
  --se-text-body: var(--se-silver-2);
  --se-text-dim: var(--se-silver-3);
  --se-text-faint: var(--se-silver-4);
  --se-line-hair: rgba(196, 205, 224, 0.16);
  --se-line-hair-strong: rgba(214, 221, 238, 0.32);
  --se-line-gold: rgba(216, 192, 138, 0.38);
  --se-state-hover: rgba(223, 227, 236, 0.06);
  --se-state-press: rgba(3, 4, 8, 0.5);
  --se-halo-silver: 0 0 0 1px rgba(223, 227, 236, 0.28), 0 0 28px -10px rgba(170, 191, 223, 0.35);
  --se-halo-gold: 0 0 0 1px rgba(216, 192, 138, 0.3), 0 0 32px -12px rgba(216, 192, 138, 0.3);
  --se-danger: #b0655c;
  --se-font-oracle: 'The Peak Font', 'Noto Serif TC', serif;
  --se-font-body: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --se-font-reading: 'Noto Serif TC', 'Songti TC', serif;
  --se-ease-ritual: cubic-bezier(0.22, 0.61, 0.2, 1);
  --se-ease-drift: cubic-bezier(0.4, 0, 0.2, 1);
  --se-dur-hover: 240ms;
  --se-dur-enter: 700ms;
  --se-dur-breath: 5.5s;
  --se-radius-sm: 3px;
  --se-radius-lg: 14px;
  --se-radius-pill: 999px;
  --se-shadow-panel: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

/* ---------- 動態 ---------- */
@keyframes se-emerge {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes se-breath {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
/* 觀星台（轉譯自 app.jsx OBS_CSS，se- 前綴隔離） */
@keyframes se-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes se-spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes se-twinkle { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.85; } }
@keyframes se-warp-in {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(-58vmax) scaleY(1.2); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-3vmax) scaleY(0.15); }
}
@keyframes se-core-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
@keyframes se-obs-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes se-ring-bloom { 0% { opacity: 0; transform: scale(0.22); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes se-layer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes se-node-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.6); } 100% { transform: scale(1); opacity: 1; } }
@keyframes se-ripple { 0% { opacity: 0.55; transform: scale(0.12); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes se-ring-expand { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }

/* ---------- 外殼 ---------- */
#sichen-entry {
  position: fixed;
  inset: 0;
  z-index: 99999;
  height: 100vh;
  height: 100dvh;
  background: var(--se-void-0);
  color: var(--se-text-body);
  font-family: var(--se-font-body);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  overflow: hidden;
}
#sichen-entry.se-fade {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--se-dur-enter) var(--se-ease-ritual);
}
#sichen-entry *, #sichen-entry *::before, #sichen-entry *::after { box-sizing: border-box; }
#sichen-entry :focus-visible {
  outline: none;
  box-shadow: var(--se-halo-silver);
  border-radius: var(--se-radius-sm);
}

/* ---------- 影片舞台（入口／儀式；traverse 期間 1.3s 淡出） ---------- */
.se-stage { position: absolute; inset: 0; z-index: 2; background: var(--se-void-0); overflow: hidden; transition: opacity 1.3s var(--se-ease-drift); }
.se-stage.se-stage-fade { opacity: 0; pointer-events: none; }
.se-stage video,
.se-stage .se-endimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}
.se-buff {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 27vh;
  pointer-events: none;
}
.se-buff[hidden] { display: none; }
.se-buff-star { color: var(--se-silver-3); font-size: 20px; animation: se-breath 1.8s var(--se-ease-drift) infinite; }
.se-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(3,4,8,1) 0%, rgba(3,4,8,.98) 8%, rgba(3,4,8,.9) 16%, rgba(3,4,8,.72) 26%, rgba(3,4,8,.45) 36%, rgba(3,4,8,.2) 46%, rgba(3,4,8,.06) 55%, rgba(3,4,8,0) 64%),
    radial-gradient(ellipse 120% 100% at 50% 34%, transparent 52%, rgba(3,4,8,.62) 100%);
}

/* ---------- 觀星台（影片結束後的常駐環境；無人像） ---------- */
.se-obs {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  animation: se-obs-in 1.4s var(--se-ease-drift) both;
  background: radial-gradient(ellipse 120% 90% at 50% 26%, #0b0e1a 0%, #060810 48%, #030408 100%);
}
.se-obs[hidden] { display: none; }
.se-obs-nebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 30% at 72% 30%, rgba(90, 110, 180, 0.10), transparent 70%),
    radial-gradient(ellipse 36% 26% at 24% 60%, rgba(216, 192, 138, 0.05), transparent 70%);
}
.se-obs-star { position: absolute; border-radius: 50%; background: rgba(220, 228, 248, 0.9); pointer-events: none; }

/* 星環定位：桌機非對話＝中央 42%；對話＝左欄 27.5%/50%。1.2s 漂移。 */
.se-ringpos {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(58vh, 36vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left 1.2s var(--se-ease-drift), top 1.2s var(--se-ease-drift), width 1.2s var(--se-ease-drift);
  pointer-events: none;
}
.se-obs.se-obs-dialog .se-ringpos { left: 27.5%; top: 50%; width: min(62vh, 40vw); }
.se-ring-bloomwrap { position: absolute; inset: 0; animation: se-ring-bloom 1.15s var(--se-ease-ritual) both; transition: filter 1.2s var(--se-ease-drift); }
.se-obs.se-obs-aligned .se-ring-bloomwrap { filter: brightness(1.3); }
.se-obs.se-obs-reveal .se-ring-bloomwrap { animation: se-ring-expand 1.4s var(--se-ease-drift) both; }

/* 命運星環內部 */
.se-ring { position: absolute; inset: 0; }
.se-ring-glow { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(216,192,138,.08) 0%, rgba(90,110,180,.05) 45%, transparent 70%); }
.se-ring-layer { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); animation: se-layer-in 0.9s var(--se-ease-ritual) both; }
.se-ring-tilt { position: absolute; inset: 0; transition: transform 1.6s var(--se-ease-drift); }
.se-ring-spin { position: absolute; inset: 0; }
.se-ring-circle { position: absolute; inset: 0; border-radius: 50%; }
.se-ring-dothold { position: absolute; inset: 0; }
.se-ring-dot { position: absolute; left: 50%; top: -2px; width: 3.5px; height: 3.5px; margin-left: -1.75px; border-radius: 50%; background: #e8d8b6; box-shadow: 0 0 7px 2px rgba(216,192,138,.45); }
.se-ring-chars { position: absolute; inset: 13%; border-radius: 50%; opacity: 0.38; animation: se-spin-rev 240s linear infinite; }
.se-ring-charhold { position: absolute; inset: 0; }
.se-ring-char { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-family: var(--se-font-oracle); font-size: 10px; color: var(--se-gold-2); }
.se-ring-nodes { position: absolute; inset: 26%; border-radius: 50%; border: 1px dashed rgba(216,192,138,.14); }
.se-ring-node {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgba(216,192,138,.08);
  border: 1px solid rgba(216,192,138,.35);
}
.se-ring-node.se-lit { background: #e8d8b6; border: none; box-shadow: 0 0 10px 3px rgba(216,192,138,.5); }
.se-ring-node.se-lit-pop { animation: se-node-pop 0.7s var(--se-ease-ritual) both; }
.se-ring-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff4d6 0%, rgba(216,192,138,.55) 45%, transparent 72%);
  animation: se-breath 3.6s var(--se-ease-drift) infinite;
}
.se-ring-ripple { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(216,192,138,.45); opacity: 0.3; animation: se-ripple 2.6s var(--se-ease-drift) infinite; }

/* ---------- 穿越星河（影片 → 觀星台，約 2.3s；錨定於星環誕生點） ---------- */
.se-warp { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.se-warp-anchor { position: absolute; left: 27.5%; top: 50%; }
.se-warp-streak {
  position: absolute;
  width: 1.5px;
  height: 15vmax;
  transform-origin: top center;
  background: linear-gradient(to bottom, transparent, rgba(205, 215, 245, 0.9), transparent);
  animation: se-warp-in 1.15s cubic-bezier(0.4, 0, 0.7, 1) both;
}
.se-warp-core {
  position: absolute;
  width: 12vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4d6 0%, rgba(216, 192, 138, 0.7) 40%, transparent 70%);
  animation: se-core-flash 1.1s var(--se-ease-drift) 0.85s both;
}

/* ---------- UI 層 ---------- */
.se-ui { position: absolute; inset: 0; z-index: 4; }
.se-col {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 32px 5vh;
}
.se-col-inner {
  width: 620px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

/* 入口畫面 */
.se-entry-col { gap: min(26px, 3.2vh); padding-bottom: min(7vh, 56px); }
.se-entry-col .se-col-inner { width: auto; max-width: 100%; }
.se-brand { text-align: center; animation: se-emerge var(--se-dur-enter) var(--se-ease-ritual) both; }
.se-brand-name {
  font-family: var(--se-font-oracle);
  color: var(--se-text-oracle);
  font-size: clamp(48px, 12vh, 96px);
  line-height: 1.15;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-shadow: 0 4px 40px rgba(3, 4, 8, 0.9);
}
.se-brand-sub {
  font-family: var(--se-font-oracle);
  color: var(--se-text-dim);
  font-size: 15px;
  letter-spacing: 0.54em;
  padding-left: 0.54em;
  margin-top: min(10px, 1.2vh);
}

/* 神諭句 */
.se-oracle {
  font-family: var(--se-font-oracle);
  color: var(--se-text-oracle);
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 2px 24px rgba(3, 4, 8, 0.8);
  animation: se-emerge var(--se-dur-enter) var(--se-ease-ritual) both;
  outline: none;
  max-width: 100%;
}
#sichen-entry .se-oracle:focus, #sichen-entry .se-oracle:focus-visible { box-shadow: none; }
.se-entry-col .se-oracle { padding: 0 24px; }
.se-oracle-xl { font-size: 44px; }
.se-oracle-md { font-size: 24px; }
.se-d500 { animation-delay: 500ms; }

/* 星分隔／進度星 */
.se-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--se-silver-3);
  font-size: 10px;
  user-select: none;
  animation: se-breath var(--se-dur-breath) var(--se-ease-drift) infinite;
}
.se-divider .se-dot-side { font-size: 9px; }
.se-divider-gold { color: var(--se-gold-2); }
.se-dots { display: flex; align-items: center; justify-content: center; gap: 16px; }
.se-dots span {
  font-size: 9px;
  line-height: 1;
  color: var(--se-silver-4);
  transition: color var(--se-dur-enter) var(--se-ease-ritual), font-size var(--se-dur-enter) var(--se-ease-ritual);
}
.se-dots .se-dot-past { color: var(--se-gold-2); }
.se-dots .se-dot-now {
  font-size: 12px;
  color: var(--se-silver-0);
  animation: se-breath var(--se-dur-breath) var(--se-ease-drift) infinite;
}

/* 按鈕 */
.se-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--se-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  padding: 13px 30px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--se-text-body);
  background: transparent;
  border: 1px solid var(--se-line-hair);
  border-radius: var(--se-radius-sm);
  transition: all var(--se-dur-hover) var(--se-ease-drift);
}
.se-btn:hover { color: var(--se-text-title); background: var(--se-state-hover); border-color: var(--se-line-hair-strong); }
.se-btn:active { background: var(--se-state-press); }
.se-btn[disabled] { opacity: 0.55; cursor: not-allowed; color: var(--se-text-faint); }
.se-btn-primary {
  color: var(--se-gold-1);
  border: 1px solid var(--se-line-gold);
  border-radius: var(--se-radius-pill);
}
.se-btn-primary:hover { color: var(--se-gold-1); border-color: var(--se-gold-1); box-shadow: var(--se-halo-gold); background: var(--se-state-hover); }
.se-btn-lg { font-size: 16px; padding: 16px 44px; }
.se-btn-ritual { letter-spacing: 0.3em; text-indent: 0.3em; }
.se-btn-ghost { border-color: transparent; }
.se-btn-ghost:hover { border-color: transparent; }

/* 面板 */
.se-panel {
  width: 100%;
  background: var(--se-surface-panel);
  border: 1px solid var(--se-line-hair);
  border-radius: var(--se-radius-lg);
  box-shadow: var(--se-shadow-panel);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  padding: min(24px, 2.8vh) 28px;
  animation: se-emerge var(--se-dur-enter) var(--se-ease-ritual) 150ms both;
}
.se-panel-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: min(12px, 1.4vh);
}

/* 欄位 */
.se-field { display: flex; flex-direction: column; gap: 8px; }
.se-label {
  font-family: var(--se-font-body);
  font-size: 14px;
  color: var(--se-text-dim);
  letter-spacing: 0.22em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.se-optional { letter-spacing: 0.08em; color: var(--se-text-faint); font-size: 13px; }
.se-hint { font-size: 14px; color: var(--se-text-faint); letter-spacing: 0.04em; }
.se-error { font-size: 14px; color: var(--se-danger); letter-spacing: 0.04em; }
.se-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.se-grid-lunar { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 12px; }
.se-vstack { display: flex; flex-direction: column; gap: 14px; }

.se-input {
  font-family: var(--se-font-body);
  font-size: 16px;
  color: var(--se-text-title);
  letter-spacing: 0.04em;
  background: var(--se-surface-input);
  border: 1px solid var(--se-line-hair);
  border-radius: var(--se-radius-sm);
  padding: 12px 14px;
  width: 100%;
  outline: none;
  caret-color: var(--se-gold-1);
  transition: border-color var(--se-dur-hover) var(--se-ease-drift), box-shadow var(--se-dur-hover) var(--se-ease-drift);
}
.se-input:focus { border-color: var(--se-line-hair-strong); box-shadow: var(--se-halo-silver); }
.se-input.se-invalid { border-color: var(--se-danger); }
.se-input::placeholder { color: var(--se-silver-4); }

.se-selwrap { position: relative; width: 100%; }
.se-selwrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--se-text-dim);
  font-size: 10px;
}
.se-select {
  font-family: var(--se-font-body);
  font-size: 16px;
  color: var(--se-text-title);
  letter-spacing: 0.04em;
  background: var(--se-surface-input);
  width: 100%;
  border: 1px solid var(--se-line-hair);
  border-radius: var(--se-radius-sm);
  padding: 12px 38px 12px 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--se-dur-hover) var(--se-ease-drift), box-shadow var(--se-dur-hover) var(--se-ease-drift);
}
.se-select:focus { border-color: var(--se-line-hair-strong); box-shadow: var(--se-halo-silver); }
.se-select[disabled] { opacity: 0.72; cursor: not-allowed; }
.se-select option { background: #101624; color: #dfe3ec; }

.se-seg { display: flex; gap: 8px; }
.se-seg button {
  flex: 1;
  font-family: var(--se-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 12px 14px;
  min-height: 44px;
  cursor: pointer;
  color: var(--se-text-dim);
  background: transparent;
  border: 1px solid var(--se-line-hair);
  border-radius: var(--se-radius-sm);
  transition: all var(--se-dur-hover) var(--se-ease-drift);
}
.se-seg button:hover { color: var(--se-text-body); background: rgba(223, 227, 236, 0.03); }
.se-seg button[aria-checked="true"] {
  font-weight: 500;
  color: var(--se-text-oracle);
  background: var(--se-state-hover);
  border-color: var(--se-line-hair-strong);
}

/* 出生地五態容器（blank／selected 不渲染候選框，絕無空框） */
.se-loc-box {
  border: 1px solid var(--se-line-hair);
  border-radius: 8px;
  background: rgba(3, 4, 8, 0.5);
  overflow: hidden;
}
.se-loc-state { padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: var(--se-text-dim); font-size: 14px; letter-spacing: 0.05em; }
.se-loc-state .se-loc-spin { color: var(--se-silver-3); font-size: 13px; animation: se-breath 1.6s var(--se-ease-drift) infinite; }
.se-loc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--se-line-hair);
  color: var(--se-text-body);
  font-family: var(--se-font-body);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: background var(--se-dur-hover) var(--se-ease-drift);
}
.se-loc-item:last-child { border-bottom: none; }
.se-loc-item:hover { background: rgba(216, 192, 138, 0.07); }
.se-loc-item .se-loc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-loc-item .se-loc-name .se-loc-en { color: var(--se-text-faint); font-size: 13px; }
.se-loc-item .se-loc-coord { color: var(--se-text-faint); font-size: 12.5px; white-space: nowrap; flex: none; }
.se-loc-sel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}
.se-loc-sel .se-loc-selname {
  color: var(--se-text-title);
  font-size: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.se-loc-sel .se-loc-selname .se-chk { color: var(--se-gold-2); margin-right: 8px; }
.se-loc-sel .se-loc-selcoord { color: var(--se-text-faint); font-size: 13px; white-space: nowrap; }
.se-loc-selcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* 進階手動經緯度（v2：文字切換鈕） */
.se-adv-toggle {
  background: none;
  border: none;
  padding: 6px 0;
  min-height: 44px;
  cursor: pointer;
  color: var(--se-text-faint);
  font-size: 13px;
  letter-spacing: 0.08em;
  font-family: var(--se-font-body);
  text-align: left;
}
.se-adv-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-top: 10px; align-items: end; }

/* 確認清單 */
.se-confirm-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--se-line-hair);
}
.se-confirm-key {
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--se-text-dim);
  width: 96px;
  flex: none;
}
.se-confirm-val {
  font-family: var(--se-font-reading);
  font-size: 16px;
  color: var(--se-text-title);
  letter-spacing: 0.04em;
}
.se-ack {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--se-line-gold);
  border-radius: var(--se-radius-sm);
  font-size: 14.5px;
  color: var(--se-text-body);
  cursor: pointer;
}
.se-ack input { margin-top: 5px; accent-color: #b89d63; width: 16px; height: 16px; flex: none; cursor: pointer; }

/* 導航列 */
.se-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  animation: se-emerge var(--se-dur-enter) var(--se-ease-ritual) 260ms both;
}
.se-nav-right { display: flex; gap: 10px; align-items: center; }
.se-cast-error {
  width: 100%;
  font-size: 14.5px;
  color: var(--se-danger);
  letter-spacing: 0.04em;
  text-align: center;
  animation: se-emerge var(--se-dur-enter) var(--se-ease-ritual) both;
}

/* 儀式（略過鈕 1200ms 後現身） */
.se-skip {
  position: absolute;
  right: 28px;
  bottom: 28px;
  animation: se-emerge var(--se-dur-enter) var(--se-ease-ritual) 1200ms both;
}

/* 再次覲見主宰（觀星台左上，低調次要入口） */
.se-audience {
  position: absolute;
  top: 18px;
  left: 24px;
  z-index: 3;
  animation: se-emerge var(--se-dur-enter) var(--se-ease-ritual) 600ms both;
}
.se-audience .se-btn { font-size: 12.5px; opacity: 0.8; padding: 8px 14px; }

/* ---------- 觀星台對話：桌機左 55% 星環、右 45% 問句＋面板 ---------- */
.se-obs-steps { position: absolute; inset: 0; display: flex; z-index: 2; }
.se-obs-left { width: 55%; flex: none; }
.se-obs-right {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 4vw, 64px) 0 0;
  min-height: 0;
}
.se-obs-colinner {
  display: flex;
  flex-direction: column;
  gap: min(16px, 1.9vh);
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: 0;
}
.se-obs-right .se-oracle { font-size: min(32px, 4vh); }
.se-obs-right .se-panel {
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--se-nebula-3) transparent;
}
.se-obs-right .se-panel::-webkit-scrollbar { width: 8px; }
.se-obs-right .se-panel::-webkit-scrollbar-thumb { background: var(--se-nebula-3); border-radius: 999px; }
.se-obs-right .se-panel::-webkit-scrollbar-track { background: transparent; }

/* 起盤／顯化列 */
.se-cast-col { gap: 20px; padding-bottom: 7vh; z-index: 2; }
.se-breath-star { color: var(--se-gold-1); font-size: 18px; animation: se-breath 2.2s var(--se-ease-drift) infinite; }
.se-done-actions { display: flex; gap: 14px; align-items: center; animation: se-emerge var(--se-dur-enter) var(--se-ease-ritual) 700ms both; }

/* ---------- 手機（Design v2：上 35% 固定星環、下 65% 資料簾＝唯一捲動容器） ---------- */
@media (max-width: 640px) {
  .se-stage video,
  .se-stage .se-endimg { object-position: center 18%; }
  .se-shade {
    background:
      linear-gradient(to top, rgba(3,4,8,1) 0%, rgba(3,4,8,.985) 10%, rgba(3,4,8,.93) 20%, rgba(3,4,8,.8) 32%, rgba(3,4,8,.55) 44%, rgba(3,4,8,.3) 56%, rgba(3,4,8,.1) 66%, rgba(3,4,8,0) 76%),
      radial-gradient(ellipse 150% 100% at 50% 30%, transparent 58%, rgba(3,4,8,.5) 100%);
  }
  .se-ringpos { left: 50%; top: 38%; width: 66%; }
  .se-obs.se-obs-dialog .se-ringpos { left: 50%; top: 17.5%; width: 52%; }
  .se-warp-anchor { left: 50%; top: 17.5%; }
  .se-col { padding: 0 18px 26px; }
  .se-col-inner { width: 100%; gap: 14px; }
  .se-entry-col { gap: min(22px, 2.6vh); padding-bottom: min(64px, 7dvh); }
  .se-brand-name { font-size: min(64px, 9vh); }
  .se-brand-sub { font-size: 13px; }
  .se-oracle { font-size: min(24px, 3vh); }
  .se-oracle-xl { font-size: 32px; }
  .se-panel { padding: 16px 14px; }
  .se-grid2 { grid-template-columns: 1fr; }
  .se-grid-lunar { grid-template-columns: 1fr 1fr; }
  .se-adv-grid { grid-template-columns: 1fr 1fr; }
  .se-adv-grid .se-btn { grid-column: 1 / -1; }
  .se-skip { right: 16px; bottom: 24px; }
  .se-audience { top: 10px; left: 8px; }
  .se-cast-col { padding-bottom: 64px; }

  /* 資料簾：唯一可捲動容器；星環／背景固定 */
  .se-obs-steps { flex-direction: column; justify-content: flex-end; }
  .se-obs-left { display: none; }
  .se-obs-right { width: 100%; padding: 0; justify-content: flex-end; }
  .se-drape {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: 65%;
    max-height: 65dvh;
    scrollbar-width: thin;
    scrollbar-color: var(--se-nebula-3) transparent;
  }
  .se-drape::-webkit-scrollbar { width: 6px; }
  .se-drape::-webkit-scrollbar-thumb { background: var(--se-nebula-3); border-radius: 999px; }
  .se-drape-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 14px 16px 0; }
  .se-obs-right .se-panel { max-height: none; overflow: visible; }
  .se-obs-right .se-oracle { font-size: 24px; }
  .se-drape-bar {
    position: sticky;
    bottom: 0;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: rgba(4, 5, 10, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .se-drape-bar .se-dots { justify-content: center; }
}

/* 桌機資料簾容器不捲動（.se-drape 僅手機生效）；桌機由面板內部捲動 */
.se-drape { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  #sichen-entry *, #sichen-entry *::before, #sichen-entry *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}