/* Lifetors 殼的共用樣式（第一段：門口、Lifetors 有什麼）
   數值照主畫布 v416 的畫板（Gate、GateSent、Pricing）。手機一欄置中，最寬 430。 */

:root {
  --bg-gate: #0B0E18;      /* 門口那條路 */
  --bg: #0E121C;           /* 殼底 */
  --card: #1C2131;
  --field: #131827;
  --slot: #101524;
  --ink: #F0EDE4;          /* 象牙白 */
  --ink2: #E8E4DA;
  --mute: #9DABC8;         /* 說明灰藍 */
  --mute2: #6F7E9C;
  --mute3: #4E5768;
  --line: #262D3F;
  --gold: #C4A56E;
  --serif: 'Noto Serif TC', 'Noto Serif CJK TC', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* 不准整頁左右滑（2026-10-16，Sharon 手機上「有什麼」頁可以左右偏移）：
   整頁與主要捲動區只准上下捲；要左右滑的（價值卡輪播 .car）自己另開。 */
html, body { overflow-x: hidden; overscroll-behavior-x: none; }
.page > .scroll { overflow-x: hidden; overscroll-behavior-x: none; }
body {
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ink2); text-decoration: none; }
a:hover { color: #FFFFFF; }
button { font-family: inherit; }

.page {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

.scroll { scrollbar-width: none; -ms-overflow-style: none; }
.scroll::-webkit-scrollbar { display: none; }

.lbl { font-size: 12px; letter-spacing: 1px; color: var(--mute); font-weight: 600; }

/* 主按鈕（白） */
.btn-primary {
  min-height: 52px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  color: #0B3B6B;
  background: linear-gradient(180deg, #FFFFFF, #F1EEE7);
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  border: none; border-radius: 999px; cursor: pointer; /* 圓角三級：按鈕全圓（決策紀錄第三十三節） */
  -webkit-tap-highlight-color: transparent;
}
.btn-primary[disabled] { opacity: .55; cursor: default; }

.field {
  width: 100%; min-height: 52px; padding: 0 16px;
  font-size: 16px; /* 16 以下 iPhone 會自動放大頁面 */
  font-family: inherit; color: var(--ink);
  background: var(--field);
  border: 1px solid var(--ink2); border-radius: 8px; outline: none;
}
.field::placeholder { color: var(--mute3); }

.err { margin: 0; font-size: 12px; line-height: 1.8; color: var(--ink); } /* 殼沒有紅色：錯誤靠文字講清楚（決策紀錄 v350、換信箱「已有帳號」同一種） */
.err:empty { display: none; }

/* 背景氛圍光（只在門口那條路與空狀態） */
.glow {
  position: absolute; left: -12%; width: 124%; pointer-events: none;
  background: radial-gradient(ellipse 50% 44% at 50% 50%, rgba(222, 196, 146, 0.20), rgba(222, 196, 146, 0.06) 45%, rgba(11, 17, 24, 0) 72%);
}

/* 25 格 */
.grid25 { display: flex; flex-direction: column; gap: 8px; width: 72%; align-self: center; }
.grid25 .row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.slot { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 8px; background: var(--slot); overflow: hidden; display: block; }
.slot > i { position: absolute; inset: 0; display: block; opacity: .55; animation: breathe 8s ease-in-out infinite; }
.slot > b { position: absolute; left: 24%; top: 15%; width: 52%; bottom: 12%; border: 1px dashed #2E3548; border-radius: 4px; display: block; }
.slot::after { content: ""; position: absolute; inset: 0; border-radius: 8px; border: 1px solid rgba(228, 207, 166, 0); animation: scan 30s ease-in-out infinite; animation-delay: inherit; }
@keyframes breathe { 0%, 100% { opacity: .45 } 50% { opacity: .75 } }
@keyframes scan {
  0% { border-color: rgba(228, 207, 166, 0); box-shadow: none }
  2%, 3.5% { border-color: rgba(228, 207, 166, .7); box-shadow: 0 0 14px rgba(228, 207, 166, .3) }
  7%, 100% { border-color: rgba(228, 207, 166, 0); box-shadow: none }
}

@media (prefers-reduced-motion: reduce) {
  .slot > i, .slot::after { animation: none; }
}