/* ============ title.css — 開場：載入中、點一下開始、第一次的告示（2026-10-16 開場重做） ============
 * 三個畫面共用一張畫 #title-art（民國十七年，北邙山無名冢底下炸開的直井；assets/title/），標題字也在畫上
 * （描金漆字＋「北邙九幽」朱印，tools/art/title_logo.py 產生的 SVG，繁簡各一張）。三層只換下半部的東西：
 *   #boot       載入中：一朵燈火
 *   #tap-start  點一下開始：燈籠似地慢慢亮暗（每次開遊戲幾乎都會看到這一頁）
 *   #scr-login  第一次來：貼在井口的告示（內容說明）＋進入鬼市
 * #title-art 排在這三層後面，用 ~ 選擇器照「現在開著哪一層」挪標題。
 * 動的只用 transform／opacity：霧往右飄、燈光微微晃、紙錢飄、井裡冒磷火；不閃。
 * 量過（headless Edge）：沒有 GPU、軟體合成時，整張畫推近、混色模式、遮罩最花 CPU，所以都拿掉了（燈光用一般的透明度疊）。
 * prefers-reduced-motion、設定裡「減少晃動與閃光」（html.ta-calm）都整個停住；分頁在背景時暫停（html.ta-paused，login.js）。
 * 主選單左邊的標題也換成同一張描金字（只改樣式，不動主選單的結構）。
 */

/* ---------- 畫：畫還沒載到時是一樣色調的漸層（不跳版） ---------- */
#title-art {
  position: fixed; inset: 0; z-index: 19; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% 70%, rgba(110, 78, 40, .45), transparent 70%),
    radial-gradient(18% 12% at 83% 9%, rgba(190, 205, 215, .22), transparent 70%),
    linear-gradient(180deg, #1c2a35 0%, #22303a 28%, #222a2f 52%, #1e1b19 70%, #0f0d0c 100%);
  transition: opacity .8s ease;
}
/* 標題、按鈕的位置（各種畫面大小在下面調；#boot、#tap-start 也要用，所以放在 :root） */
:root {
  --lk-top: 12vh;            /* 標題那一塊的上緣 */
  --lk-w: clamp(300px, 46vw, 820px);
  --cta-b: 11vh;             /* 點一下開始、載入中離下緣 */
  --gx: 50.5%; --gy: 70%;    /* 畫裡燈籠光的中心（%：畫的寬、高） */
  --mx: 48.5%; --my: 72%;    /* 井口 */
}
#title-art.out { opacity: 0; }
.ta-scene {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 177.78vh); height: max(100vh, 56.25vw);
  width: max(100vw, 177.78dvh); height: max(100dvh, 56.25vw);
  transform: translate(-50%, -50%);
}
.ta-scene picture, .ta-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ta-img { object-fit: cover; animation: ta-imgin 1.1s ease-out both; }
/* 畫還在下載（login.js 加的）：先別淡入，載好了再淡進來 */
html.ta-wait .ta-img { opacity: 0; animation: none; }
html.ta-wait.ta-loaded .ta-img { opacity: 1; transition: opacity 1s ease-out; }
@keyframes ta-imgin { from { opacity: 0; } to { opacity: 1; } }
}
@media (orientation: portrait) {
  :root { --lk-top: 13vh; --lk-w: min(86vw, 520px); --cta-b: 14vh; --gx: 51%; --gy: 64%; --mx: 48%; --my: 66%; }
  #title-art {
    background:
      radial-gradient(70% 30% at 50% 64%, rgba(110, 78, 40, .4), transparent 70%),
      radial-gradient(22% 10% at 84% 8%, rgba(190, 205, 215, .22), transparent 70%),
      linear-gradient(180deg, #1a2934 0%, #202d38 30%, #232a30 52%, #201a16 70%, #070707 100%);
  }
  .ta-scene {
    width: max(100vw, 56.25vh); height: max(100vh, 177.78vw);
    width: max(100vw, 56.25dvh); height: max(100dvh, 177.78vw);
  }
}

/* 燈籠的光：微微晃（4 秒多一輪，亮暗只差兩成，不閃） */
.ta-glow {
  position: absolute; left: var(--gx); top: var(--gy); width: 44%; height: 34%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 178, 88, .34), rgba(255, 150, 60, .13) 45%, transparent 76%);
  animation: ta-flicker 4.3s ease-in-out infinite;
}
@keyframes ta-flicker {
  0%, 100% { opacity: .82; } 18% { opacity: 1; } 31% { opacity: .88; } 47% { opacity: .97; } 63% { opacity: .8; } 79% { opacity: .94; }
}
/* 井裡冒上來的磷火 */
.ta-motes { position: absolute; left: var(--mx); top: var(--my); width: 9%; height: 1px; transform: translateX(-50%); }
.ta-motes b {
  position: absolute; left: 50%; top: 0; width: 4px; height: 4px; margin: -2px; border-radius: 50%;
  background: #c9f7d6; box-shadow: 0 0 6px 2px rgba(120, 230, 160, .55); opacity: 0;
  animation: ta-mote 9s linear infinite;
}
.ta-motes b:nth-child(1) { left: 18%; animation-duration: 8.5s; animation-delay: -1s; }
.ta-motes b:nth-child(2) { left: 46%; animation-duration: 11s; animation-delay: -6s; }
.ta-motes b:nth-child(3) { left: 70%; animation-duration: 9.5s; animation-delay: -3.5s; }
.ta-motes b:nth-child(4) { left: 32%; animation-duration: 12s; animation-delay: -9s; width: 3px; height: 3px; }
.ta-motes b:nth-child(5) { left: 86%; animation-duration: 10s; animation-delay: -7.5s; width: 3px; height: 3px; }
.ta-motes b:nth-child(6) { left: 58%; animation-duration: 13s; animation-delay: -11s; }
@keyframes ta-mote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: .85; }
  55% { transform: translate3d(1.2vmin, -14vmin, 0); opacity: .55; }
  100% { transform: translate3d(-.8vmin, -26vmin, 0); opacity: 0; }
}

/* 霧：兩層，往右飄（風往右吹，紙錢也往右） */
.ta-fog { position: absolute; left: 0; right: 0; bottom: -3%; height: 64%; overflow: hidden; }
.ta-fog i {
  position: absolute; left: -100%; bottom: 0; width: 200%; height: 100%;
  background: url(../assets/title/fog.webp?v=1) repeat-x 0 100% / 50% 100%;
  opacity: .3; animation: ta-drift 95s linear infinite; will-change: transform;
}
/* 上面那層是一條飄在半空的霧（fog-mid.webp 上下都淡掉了，不然下緣是一條直線） */
.ta-fog i + i {
  bottom: 24%; height: 60%; opacity: .3; animation-duration: 150s;
  background-image: url(../assets/title/fog-mid.webp?v=1);
}
@keyframes ta-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }

/* 紙錢：七張，從左飄到右，邊飄邊翻 */
.ta-money i {
  position: absolute; left: -4vmin; top: 30%; width: 2.2vmin; height: 2.2vmin; min-width: 10px; min-height: 10px;
  opacity: 0; animation: ta-fly 19s linear infinite;
}
.ta-money i::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e9dec6' fill-rule='evenodd' d='M50 3a47 47 0 1 0 .1 0zM39 39h22v22H39z'/%3E%3Cpath fill='none' stroke='%23a8987a' stroke-width='3' opacity='.55' d='M50 13a37 37 0 1 0 .1 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: ta-flutter 3.2s ease-in-out infinite alternate;
}
.ta-money i:nth-child(1) { top: 18%; animation-duration: 21s; animation-delay: -3s; }
.ta-money i:nth-child(2) { top: 42%; animation-duration: 17s; animation-delay: -11s; width: 1.6vmin; height: 1.6vmin; }
.ta-money i:nth-child(3) { top: 58%; animation-duration: 24s; animation-delay: -7s; }
.ta-money i:nth-child(4) { top: 30%; animation-duration: 19s; animation-delay: -16s; width: 1.3vmin; height: 1.3vmin; }
.ta-money i:nth-child(5) { top: 66%; animation-duration: 15s; animation-delay: -1.5s; width: 2.8vmin; height: 2.8vmin; }
.ta-money i:nth-child(6) { top: 8%; animation-duration: 27s; animation-delay: -20s; width: 1.4vmin; height: 1.4vmin; }
.ta-money i:nth-child(7) { top: 50%; animation-duration: 22s; animation-delay: -13s; width: 1.9vmin; height: 1.9vmin; }
.ta-money i:nth-child(2)::before { animation-duration: 2.4s; }
.ta-money i:nth-child(3)::before { animation-duration: 3.9s; animation-direction: alternate-reverse; }
.ta-money i:nth-child(5)::before { animation-duration: 2.8s; }
.ta-money i:nth-child(6)::before { animation-duration: 4.4s; animation-direction: alternate-reverse; }
@keyframes ta-fly {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  7% { opacity: .75; }
  50% { transform: translate3d(56vw, 9vh, 0); }
  88% { opacity: .65; }
  100% { transform: translate3d(112vw, 24vh, 0); opacity: 0; }
}
@keyframes ta-flutter {
  from { transform: rotate(-25deg) rotateX(10deg) rotateY(0deg); }
  to { transform: rotate(160deg) rotateX(60deg) rotateY(150deg); }
}

/* 四周壓暗，上下各一層淡淡的黑：標題、小字放在畫上也看得清楚 */
.ta-vig {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 46%, transparent 42%, rgba(3, 4, 6, .5) 78%, rgba(2, 3, 4, .86) 100%),
    linear-gradient(180deg, rgba(4, 6, 9, .5) 0%, rgba(4, 6, 9, 0) 34%, rgba(4, 4, 5, 0) 60%, rgba(3, 3, 4, .55) 84%, rgba(2, 2, 3, .8) 100%);
}

/* ---------- 標題：年代一行、描金字＋朱印、一句話 ---------- */
.ta-lockup {
  position: absolute; left: 50%; top: var(--lk-top); width: var(--lk-w);
  transform: translateX(-50%); transform-origin: 50% 0; text-align: center;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.ta-era {
  display: flex; align-items: center; justify-content: center; gap: .9em; margin: 0 0 .85em; white-space: nowrap;
  font: 600 clamp(12px, .55vw + 9px, 19px)/1.2 var(--serif); letter-spacing: .5em; text-indent: .5em; color: #dcc897;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .95);
}
.ta-era::before, .ta-era::after { content: ''; flex: 0 1 4.5em; height: 1px; background: linear-gradient(90deg, transparent, rgba(220, 200, 151, .75)); }
.ta-era::after { background: linear-gradient(270deg, transparent, rgba(220, 200, 151, .75)); }
.ta-logo { position: relative; margin: 0; line-height: 0; filter: drop-shadow(0 .6vmin 1.6vmin rgba(0, 0, 0, .55)); }
.ta-logo::before {         /* 底下燈光照上來的一點暖色 */
  content: ''; position: absolute; left: 6%; right: 6%; top: 20%; bottom: -30%;
  background: radial-gradient(closest-side, rgba(255, 170, 80, .16), transparent 80%);
}
.ta-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ta-name { position: relative; display: block; width: 100%; height: auto; transition: opacity .5s ease; }
.ta-name.sc { position: absolute; left: 0; top: 0; opacity: 0; }
.ta-name.tc:lang(zh-Hans) { opacity: 0; }
.ta-name.sc:lang(zh-Hans) { opacity: 1; }
.ta-seal { position: absolute; right: -7.2%; bottom: -15%; width: 9.6%; height: auto; transform: rotate(-7deg); }
.ta-tag {
  margin: 1.1em 0 0; font: 600 clamp(14px, .7vw + 9px, 23px)/1.5 var(--serif); letter-spacing: .32em; text-indent: .32em; color: #ece0c4;
  text-shadow: 0 1px 2px #000, 0 0 12px rgba(0, 0, 0, .95), 0 0 26px rgba(0, 0, 0, .6);
  transition: opacity .5s ease;
}
/* 出品：左下角一個小小的 X1X.tw */
.ta-brand {
  position: absolute; left: calc(18px + env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin: 0;
  display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--font); letter-spacing: .14em; color: #e2d0a6;
  text-shadow: 0 1px 2px #000; opacity: .86;
}
.ta-brand span { font: 600 11px/1 var(--serif); letter-spacing: .3em; padding-left: 8px; border-left: 1px solid rgba(226, 208, 166, .45); color: #cdbb92; }

/* ---------- 載入中、點一下開始（透明的兩層，字放在下面燈光那一帶） ---------- */
#boot.boot, #tap-start.tapstart { background: none; align-items: flex-end; }
#boot.boot { font-size: 15px; color: #dccca8; text-shadow: 0 1px 2px #000; }
#boot .boot-in, #tap-start .boot-in { padding: 0 16px calc(var(--cta-b) + env(safe-area-inset-bottom, 0px)); max-width: none; }
#boot .boot-in h1, #tap-start .boot-in h1 { display: none; }   /* 維護中的說明（main.js）自帶標題；畫上已經有了 */
#boot .boot-in p { margin: 6px 0; color: #dccca8; }
#boot .boot-in .btn { margin-top: 12px; }
.boot-ld {
  display: inline-flex; align-items: center; gap: .7em; margin: 0 !important;
  font: 600 15px/1 var(--serif); letter-spacing: .42em; color: #dccca8 !important;
}
.ld-flame {
  display: inline-block; width: 9px; height: 13px; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(60% 45% at 50% 72%, #fff3c4, #ffb54a 45%, #d9581d 80%, transparent 82%);
  box-shadow: 0 0 10px 3px rgba(255, 160, 60, .45); transform-origin: 50% 90%;
  animation: ld-flame 1.7s ease-in-out infinite alternate;
}
@keyframes ld-flame { from { transform: scale(.92, .9) rotate(-3deg); opacity: .85; } to { transform: scale(1.05, 1.08) rotate(3deg); opacity: 1; } }
#tap-start .boot-in { display: flex; flex-direction: column; align-items: center; }
#tap-start .tap-blink {
  position: relative; z-index: 0; margin: 0 !important; padding: .85em 1.3em .85em 1.8em;
  font: 700 clamp(17px, .9vw + 11px, 27px)/1 var(--serif); letter-spacing: .5em; color: #fff4da !important;
  text-shadow: 0 0 10px rgba(255, 196, 112, .9), 0 0 2px #000, 0 2px 3px #000;
  animation: none;
}
/* 燈籠似地慢慢亮暗（光暈變，字不變：不會一閃一閃） */
#tap-start .tap-blink::before {
  content: ''; position: absolute; z-index: -1; inset: -55% -22%;
  background: radial-gradient(closest-side, rgba(255, 166, 62, .4), rgba(255, 136, 40, .14) 55%, transparent);
  animation: ta-breathe 2.8s ease-in-out infinite alternate;
}
#tap-start .tap-blink::after {     /* 左右兩道細線 */
  content: ''; position: absolute; z-index: -1; left: -3.4em; right: -2.9em; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 150, .7) 22%, transparent 34%, transparent 66%, rgba(255, 214, 150, .7) 78%, transparent);
}
@keyframes ta-breathe { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: scale(1.06); } }
#tap-start .tap-keys {
  margin: .9em 0 0; font: 600 12px/1 var(--serif); letter-spacing: .3em; text-indent: .3em; color: #cbb990; text-shadow: 0 1px 2px #000;
  display: none;
}
@media (hover: hover) and (pointer: fine) { #tap-start .tap-keys { display: block; } }

/* ---------- 第一次來：告示＋進入鬼市 ---------- */
#scr-login { align-items: flex-end; padding: 16px 16px calc(5vh + env(safe-area-inset-bottom, 0px)); background: none; }
/* 標題往上收一點、縮小，騰出下半部 */
#scr-login:not(.hidden) ~ #title-art .ta-lockup { transform: translateX(-50%) translateY(-5vh) scale(.78); }
.ln-card {
  position: relative; width: min(468px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ln-card::before {        /* 後面一大片淡淡的暗，下面的小字才看得清楚 */
  content: ''; position: absolute; z-index: -1; left: -18%; right: -18%; top: -8%; bottom: -10%;
  background: radial-gradient(closest-side, rgba(4, 4, 6, .62), rgba(4, 4, 6, .3) 60%, transparent);
}
/* 告示：一張泛黃、邊有點破的紙，微微歪著貼 */
.ln-paper { width: 100%; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); transform: rotate(-.7deg); }
#scr-login .ln-notice {
  margin: 0; padding: 14px 22px 13px; border: 0; border-radius: 0; text-align: left; font-size: 15px;
  color: #2c2014; text-shadow: none;
  background:
    radial-gradient(ellipse at 12% 10%, rgba(120, 80, 30, .2), transparent 42%),
    radial-gradient(ellipse at 92% 90%, rgba(100, 60, 20, .26), transparent 46%),
    radial-gradient(ellipse at 70% 20%, rgba(255, 248, 225, .4), transparent 50%),
    repeating-linear-gradient(0deg, rgba(70, 45, 20, .035) 0 1px, transparent 1px 3px),
    linear-gradient(178deg, #e6d8b6, #d3bf91);
  clip-path: polygon(0 3%, 6% 0, 19% 2%, 33% .5%, 47% 2.5%, 61% .4%, 76% 2.2%, 90% .3%, 100% 2.5%, 99.4% 22%, 100% 46%, 99.2% 71%, 100% 97%,
    88% 99.6%, 73% 98%, 58% 100%, 43% 98.4%, 28% 100%, 13% 98.2%, 0 99.5%, .7% 74%, 0 50%, .8% 26%);
}
#scr-login .ln-h {
  display: flex; align-items: center; gap: .6em; margin: 0 0 6px;
  font: 900 15px/1 var(--serif); letter-spacing: .9em; color: #7d1b10;
}
#scr-login .ln-h::after { content: ''; flex: 1; height: 0; border-top: 3px double rgba(125, 27, 16, .55); }
#scr-login .ln-notice p { margin: 0; font: 15px/1.72 var(--serif); color: #2c2014; text-align: justify; text-wrap: pretty; }
#scr-login .ln-notice::after {       /* 告示右下角的朱印 */
  content: ''; position: absolute; right: 12px; bottom: 9px; width: 34px; height: 34px;
  background: url(../assets/title/seal.svg?v=1) center / contain no-repeat; transform: rotate(-9deg); opacity: .9;
}
#scr-login .ln-notice p { padding-right: 30px; }
#scr-login .err { margin: 10px 0 0; min-height: 0; font-size: 14px; color: #ffc0b0; text-shadow: 0 1px 2px #000; }
#scr-login .err:empty { display: none; }
#scr-login .row { width: 100%; justify-content: center; margin-top: 18px; }
/* 進入鬼市：朱漆、描金邊，整頁最顯眼的東西 */
#scr-login #btn-enter {
  flex: 0 1 auto; width: min(340px, 100%); padding: 15px 0 15px .5em;
  font: 900 21px/1 var(--serif); letter-spacing: .5em; color: #fbe8c8;
  border: 2px solid #d6ae63; border-radius: 3px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 160, .22), transparent 55%),
    linear-gradient(180deg, #a01f15, #6a1009 60%, #4a0905);
  box-shadow: 0 0 0 2px #1b0805, inset 0 1px 0 rgba(255, 224, 180, .35), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .55), 0 0 30px rgba(190, 40, 20, .28);
  text-shadow: 0 1px 0 #2a0402, 0 0 10px rgba(255, 170, 110, .35);
}
#scr-login #btn-enter:hover { filter: brightness(1.12); }
#scr-login #btn-enter:focus-visible { outline: 2px solid #f3d38c; outline-offset: 4px; }
#scr-login .ln-notes { margin: 14px 0 0; font: 13px/1.6 var(--serif); color: #d6c6a2; text-shadow: 0 1px 2px #000; }
#scr-login .ln-notes span { white-space: nowrap; }
#scr-login .legal-link { color: #e6d3a4; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(230, 211, 164, .5); margin-left: .9em; white-space: nowrap; }
#scr-login .legal-link:hover { color: #fff3d6; }

/* ---------- 畫面大小 ---------- */
/* 很寬的螢幕：標題別太大 */
@media (min-width: 1600px) { :root { --lk-w: min(43vw, 820px); } }
/* 平板（4:3 一類）：標題可以稍微大一點 */
@media (max-aspect-ratio: 3/2) and (orientation: landscape) { :root { --lk-w: clamp(300px, 54vw, 760px); --lk-top: 13vh; } }
/* 手機橫拿（矮）：標題靠上、小一點；告示那一頁改成左邊標題、右邊告示 */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --lk-top: 9vh; --lk-w: clamp(260px, 44vw, 460px); --cta-b: 8vh; }
  .ta-era { margin-bottom: .6em; letter-spacing: .32em; text-indent: .32em; font-size: 12px; }
  .ta-era::before, .ta-era::after { flex-basis: 3em; }
  .ta-tag { margin-top: .7em; }
  .ta-brand { left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(9px + env(safe-area-inset-bottom, 0px)); }
  #scr-login { justify-content: flex-end; align-items: center; padding: 10px calc(18px + env(safe-area-inset-right, 0px)) 10px 10px; }
  /* 標題的中心挪到左半邊的正中間（base：中心在 50vw、上緣在 --lk-top） */
  #scr-login:not(.hidden) ~ #title-art .ta-lockup { transform: translate(calc(-50% - 25vw), calc(50vh - var(--lk-top) - 50%)) scale(.86); transform-origin: 50% 50%; }
  .ln-card { width: min(400px, 49vw); }
  #scr-login .ln-notice { padding: 10px 16px 9px; }
  #scr-login .ln-h { font-size: 13px; margin-bottom: 3px; }
  #scr-login .ln-notice p { font-size: 13px; line-height: 1.6; padding-right: 22px; }
  #scr-login .ln-notice::after { width: 26px; height: 26px; right: 9px; bottom: 7px; }
  #scr-login .row { margin-top: 12px; }
  #scr-login #btn-enter { padding: 12px 0 12px .5em; font-size: 18px; }
  #scr-login .ln-notes { margin-top: 9px; font-size: 12px; line-height: 1.5; }
}
/* 手機直拿：標題在上面三成，告示和按鈕在下面 */
@media (orientation: portrait) {
  .ta-era { letter-spacing: .38em; text-indent: .38em; margin-bottom: .7em; }
  .ta-era::before, .ta-era::after { flex-basis: 2.4em; }
  .ta-tag { letter-spacing: .22em; text-indent: .22em; margin-top: .9em; }
  .ta-seal { right: -2.5%; bottom: -24%; width: 11%; }
  #scr-login { padding: 16px 18px calc(4.5vh + env(safe-area-inset-bottom, 0px)); }
  #scr-login:not(.hidden) ~ #title-art .ta-lockup { transform: translateX(-50%) translateY(-5vh) scale(.92); }
  #scr-login .ln-notice { padding: 13px 18px 12px; }
  #scr-login .ln-notice p { font-size: 14.5px; line-height: 1.7; }
  .ta-brand { left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media (orientation: portrait) and (max-height: 700px) {
  :root { --lk-top: 9vh; --cta-b: 11vh; }
  #scr-login .ln-notice p { font-size: 13.5px; line-height: 1.6; }
}

/* ---------- 不要動 ---------- */
html.ta-paused #title-art *, html.ta-paused #title-art, html.ta-paused #tap-start *, html.ta-paused #tap-start *::before, html.ta-paused #boot * {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  #title-art *, #title-art *::before, #tap-start *, #tap-start *::before, #boot * { animation: none !important; }
  .ta-lockup, .ta-name, .ta-tag { transition: none !important; }
  .ta-money, .ta-motes { display: none; }
}
html.ta-calm #title-art *, html.ta-calm #title-art *::before, html.ta-calm #tap-start *, html.ta-calm #tap-start *::before, html.ta-calm #boot * { animation: none !important; }
html.ta-calm .ta-money, html.ta-calm .ta-motes { display: none; }

/* ---------- 主選單左邊的標題：同一張描金字（大小照原本 .t1 的字級，style.css／daomu.css 各種畫面的設定都沿用） ---------- */
#scr-menu .logo .t1 {
  display: block; width: 4.9em; height: 1.02em; margin: 0 auto; overflow: hidden; white-space: nowrap;
  color: transparent; text-shadow: none; letter-spacing: 0; line-height: 1.02em;
  background: url(../assets/title/logo-tc.svg?v=1) center / contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
}
#scr-menu .logo .t1:lang(zh-Hans) { background-image: url(../assets/title/logo-sc.svg?v=1); }
#scr-menu .logo .t2 { color: #cdb98d; letter-spacing: .42em; text-indent: .42em; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .9); margin-top: .5em; }