/* SPDX-License-Identifier: GPL-3.0-or-later */
/*
 * 登入頁、取名頁（任務 207 B4 實物頁「A 牌匾」，owner 2026-09-18 定案；Game 任務資料夾 `附件-登入頁實物.html`）。
 * 🚫 公開頁：不准放任何遊戲素材；也載不到 /assets 底下的網頁本體檔 ⇒ 代幣在這裡另抄一份。
 * 🔑 代幣值必須跟 `web/app/src/styles/tokens.css` 一模一樣（`web/test/auth-tokens.test.ts` 會比對）；顏色只准寫在 :root。
 * 牌局固定深色（夜湖），不跟系統主題切換（D26）。
 */
:root {
  --fk-font-title: "LXGW WenKai TC", "Noto Serif TC", serif;
  --fk-font-board: "Noto Serif TC", serif;
  --fk-font-paper: "Noto Sans TC", system-ui, sans-serif;
  --fk-board-bg: #0a1416;
  --fk-board-ink: #ede6d3;
  --fk-board-muted: #aba591;
  --fk-panel: rgba(10, 24, 26, 0.82);
  --fk-panel-soft: rgba(10, 24, 26, 0.6);
  --fk-line: rgba(205, 170, 98, 0.45);
  --fk-line-strong: rgba(205, 170, 98, 0.5);
  --fk-gold: #ead7a8;
  --fk-gold-strong: #f0cf7a;
  --fk-gold-dim: rgba(240, 207, 122, 0.6);
  --fk-gold-wash: rgba(205, 170, 98, 0.12);
  --fk-lord-bg: #d6b46c;
  --fk-lord-ink: #1b1508;
  --fk-board-red: #e27a68;
  --fk-on-dark: #ffffff;
  --fk-radius: 4px;
  --fk-radius-sm: 2px;
  --fk-discord: #5865f2;
  --fk-discord-hover: #4752c4;
  --fk-board-red-wash: rgba(226, 122, 104, 0.12);
  --fk-moon-glow: rgba(240, 207, 122, 0.16);
  --fk-shadow-dark: rgba(0, 0, 0, 0.35);
  --fk-skin-gold-lo: #a8802f;
  --fk-skin-sheen: rgba(255, 240, 200, 0.16);
  --fk-skin-sheen-strong: rgba(255, 250, 230, 0.7);
  --fk-skin-edge-fade: rgba(232, 200, 120, 0.7);
  --fk-skin-veil: rgba(5, 14, 16, 0.42);
  --fk-skin-veil-strong: rgba(5, 14, 16, 0.7);
  --fk-skin-line-faint: rgba(205, 170, 98, 0.18);
  --fk-skin-inset: rgba(6, 15, 17, 0.9);
  --fk-skin-corner: rgba(205, 170, 98, 0.9);
  --fk-skin-page-shadow: rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--fk-board-bg); }
/* 221 批次 2：iPhone 直放主畫面模式 100dvh 會少上方 59（WebKit 254868，批次 0 真機量到）⇒ 改 100vh；
 * 擋掉回彈／下拉重新整理，按鈕免雙擊縮放延遲。
 * 221 批次 2.5：兩頁直橫都一屏（手機橫放見檔尾兩欄）；擋兩指縮放＝no-zoom.js＋根元素 pan-x pan-y（只准捲、不准捏合與雙擊放大） */
html, body { overscroll-behavior: none; }
html { touch-action: pan-x pan-y; }
a, button, input, summary { touch-action: manipulation; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--fk-board-ink);
  font: 400 15px/1.6 var(--fk-font-board);
  background:
    radial-gradient(90% 38% at 78% 4%, var(--fk-moon-glow), transparent 70%),
    var(--fk-board-bg);
  background-repeat: no-repeat;
}
p { margin: 0; }

/* 實物頁的「手機畫面」＝整頁；桌機上置中一欄 */
.sbody { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 420px; min-height: 100vh; margin: 0 auto; padding: 26px 22px 20px; }
.sbody > *, .stack > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 18px; }

/* 吉祥物「啾啾」（C0 比較頁 B 主視覺）：縮圖由 web/brand/產生網頁圖.py 產生，下緣已淡出；名字往上壓一點蓋住淡出處 */
.mascot { display: block; flex: none; width: 200px; height: 200px; margin-bottom: -22px; object-fit: contain; }
.ico-sm { display: block; flex: none; width: 24px; height: 24px; }

.hero { display: grid; justify-items: center; gap: 6px; padding-top: 6px; text-align: center; }
.brand { margin: 6px 0 0; font: 700 46px/1.05 var(--fk-font-title); letter-spacing: 0.12em; color: var(--fk-gold); }
.sub { color: var(--fk-board-muted); font-size: 14px; }

.acts { display: grid; gap: 10px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--fk-radius); font: 500 16px/1.2 var(--fk-font-paper); text-decoration: none; cursor: pointer; }
.btn:focus-visible { outline: 2px solid var(--fk-gold-strong); outline-offset: 2px; }
.btn-dc { color: var(--fk-on-dark); background: var(--fk-discord); border: 0; }
.btn-dc:hover { background: var(--fk-discord-hover); }
.btn-dc svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.intro-link { justify-self: center; min-height: 36px; display: inline-flex; align-items: center; font: 500 14px var(--fk-font-paper); color: var(--fk-gold); text-decoration: underline; text-underline-offset: 3px; }
.intro-link:focus-visible { outline: 2px solid var(--fk-gold-strong); outline-offset: 2px; }
.btn-gold { color: var(--fk-lord-ink); background: var(--fk-lord-bg); border: 0; font-weight: 700; }
.btn-gold:disabled { opacity: 0.38; cursor: not-allowed; }

.rule { display: flex; align-items: center; gap: 12px; color: var(--fk-gold-dim); font: 400 13px var(--fk-font-title); letter-spacing: 0.3em; }
.rule::before, .rule::after { content: ""; flex: 1; border-top: 1px solid var(--fk-line); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; }
.num { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--fk-line-strong); display: grid; place-items: center; font: 700 14px/1 var(--fk-font-title); color: var(--fk-gold); }
.st { font-weight: 700; color: var(--fk-board-ink); }
.sd { display: block; font-size: 13px; color: var(--fk-board-muted); }

.fine { font: 400 12.5px/1.65 var(--fk-font-paper); color: var(--fk-board-muted); }
.foot { margin-top: auto !important; padding-top: 8px; text-align: center; font: 400 12px var(--fk-font-title); letter-spacing: 0.2em; color: var(--fk-gold-dim); }

.alert { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--fk-radius); font: 400 14px/1.6 var(--fk-font-paper); }
.alert p { color: var(--fk-board-ink); }
/* 不算錯誤（按了取消、逾時）：金色 */
.alert.calm { border: 1px solid var(--fk-line-strong); background: var(--fk-gold-wash); }
.alert.calm b { color: var(--fk-gold-strong); }
/* 真的出錯（實物頁沒畫，照取名頁的紅色錯誤元件補） */
.alert.bad { border: 1px solid var(--fk-board-red); background: var(--fk-board-red-wash); }
.alert.bad b { color: var(--fk-board-red); }

.ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden; font: 500 15px/1 var(--fk-font-paper); color: var(--fk-on-dark); background: var(--fk-discord); }
.ava.lg { width: 52px; height: 52px; font-size: 21px; }
.ava img { width: 100%; height: 100%; object-fit: cover; }

/* 取名頁 */
.top { display: flex; align-items: center; gap: 8px; font: 700 18px/1 var(--fk-font-title); letter-spacing: 0.12em; color: var(--fk-gold); }
.me { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--fk-line); border-radius: var(--fk-radius); background: var(--fk-panel-soft); font-family: var(--fk-font-paper); }
.me .k { display: block; font-size: 12px; color: var(--fk-board-muted); }
.me .v { display: block; font-size: 14.5px; color: var(--fk-board-ink); overflow-wrap: anywhere; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.field label { font: 400 13px var(--fk-font-paper); color: var(--fk-board-muted); }
.inp { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px; border: 1px solid var(--fk-line-strong); border-radius: var(--fk-radius); background: var(--fk-panel); }
.inp:focus-within { border-color: var(--fk-gold-strong); }
.inp.bad { border-color: var(--fk-board-red); }
.inp input { flex: 1; width: 0; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--fk-board-ink); font: 500 19px/1.4 var(--fk-font-paper); }
.cnt { flex: none; font: 400 12.5px var(--fk-font-paper); font-variant-numeric: tabular-nums; color: var(--fk-board-muted); }
.cnt.over { color: var(--fk-board-red); font-weight: 700; }
.err { font: 500 13.5px/1.6 var(--fk-font-paper); color: var(--fk-board-red); }
.strip { font: 400 15px/1.9 var(--fk-font-paper); color: var(--fk-board-ink); overflow-wrap: anywhere; }
.cut { margin: 0 1px; padding: 0 4px; border-radius: var(--fk-radius-sm); font-size: 12.5px; color: var(--fk-board-red); background: var(--fk-board-red-wash); text-decoration: line-through; }
.strip.mark .cut { text-decoration: none; outline: 1px solid var(--fk-board-red); }
.hint { display: grid; gap: 2px; font: 400 13px/1.6 var(--fk-font-paper); color: var(--fk-board-muted); }
.rules { margin: 0; padding-left: 18px; font: 400 13px/1.75 var(--fk-font-paper); color: var(--fk-board-muted); }
.rules b, .rules code { color: var(--fk-board-ink); font-family: inherit; }
.forever { padding: 10px 12px; border: 1px solid var(--fk-line-strong); border-radius: var(--fk-radius); font: 400 13.5px/1.6 var(--fk-font-paper); color: var(--fk-board-ink); background: var(--fk-gold-wash); }
.forever b { color: var(--fk-gold-strong); }
.done { min-height: 1.6em; font: 400 12.5px/1.6 var(--fk-font-paper); color: var(--fk-gold); }
.link { color: var(--fk-gold-strong); }

/* 216：固定迎賓場景。背景來自素材庫「軍營夕照」的網頁尺寸版本。 */
body {
  background:
    linear-gradient(90deg, var(--fk-panel-soft), var(--fk-panel) 78%),
    url('/auth/assets/scene-camp.webp') center / cover fixed,
    var(--fk-board-bg);
}
.sbody {
  position: relative;
  width: min(480px, 100%);
  max-width: none;
  margin: 0 clamp(20px, 6vw, 110px) 0 auto;
  padding: clamp(24px, 4vw, 48px);
  border-left: 1px solid var(--fk-line);
  border-right: 1px solid var(--fk-line);
  background: linear-gradient(145deg, var(--fk-panel), var(--fk-board-bg));
  box-shadow: 0 18px 48px var(--fk-shadow-dark, var(--fk-board-bg));
  backdrop-filter: blur(12px);
}
.sbody::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--fk-gold-wash);
  pointer-events: none;
}
.auth-login { justify-content: center; }
.entry-eyebrow { color: var(--fk-gold-strong); font: 700 13px/1.3 var(--fk-font-title); letter-spacing: .2em; }
.auth-login .hero { justify-items: start; text-align: left; }
.auth-login .brand { font-size: clamp(42px, 5vw, 60px); }
.auth-login .sub { color: var(--fk-board-ink); font-size: 17px; }
.auth-login .steps { gap: 8px; }
.auth-login .foot { margin-top: 0 !important; }
.sbody .btn { box-shadow: inset 0 1px var(--fk-moon-glow), 0 6px 18px var(--fk-board-bg); transition: transform .15s ease, filter .15s ease; }
.sbody .btn:hover:not(:disabled) { filter: brightness(1.1); }
.sbody .btn:active:not(:disabled) { transform: translateY(2px); }
.auth-name .top { padding-bottom: 14px; border-bottom: 1px solid var(--fk-line); }
.auth-name .stack { padding-top: 4px; }
@media (max-width: 700px) {
  body { background-position: center, 34% center, center; }
  .sbody { width: 100%; max-width: 500px; margin: 0 auto; padding: 25px 22px; border: 0; min-height: 100vh; }
  .auth-login { background: linear-gradient(145deg, var(--fk-panel), var(--fk-panel-soft)); }
}
@media (pointer: coarse) {
  body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  input,textarea { -webkit-user-select: text; user-select: text; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .auth-login {
    justify-content: flex-start;
    padding-top: 145px;
    background:
      linear-gradient(180deg, transparent, var(--fk-panel) 205px),
      url('/auth/assets/scene-camp.webp') 22% top / auto 235px no-repeat,
      var(--fk-board-bg);
  }
}
/* ── 221 批次 2.5：兩頁一屏（owner 2026-09-25「登入跟取名都改為一屏」）──
 * 骨架：body 直向 flex、主卡 flex 撐滿，安裝教學（pwa-guide.js 掛在 body 最後）排到最上面 ⇒ 不再多出一截要捲。
 * 手機橫放（矮橫螢幕，跟 App 大廳 lobby.css 同一條 query）：主卡改兩欄，左＝主要動作、右＝說明；
 * 其他尺寸 .col 是 display:contents，照原本一欄。驗法：Game 任務 221 的量測腳本（每種尺寸 scrollHeight ≤ innerHeight）。 */
body { display: flex; flex-direction: column; min-height: 100vh; }
.sbody { flex: 1 0 auto; min-height: 0; }
.col { display: contents; }

/* 直放但不高（Safari 有網址列 393×659、iPhone SE 375×548）：收間距、主視覺場景變矮 */
@media (orientation: portrait) and (max-height: 760px) {
  .sbody, .stack { gap: 12px; }
  .sbody { padding-top: 18px; padding-bottom: 14px; }
  .auth-name .top { padding-bottom: 10px; }
  .auth-name .stack { padding-top: 0; }
  .ava.lg { width: 44px; height: 44px; font-size: 18px; }
  .rules { line-height: 1.6; }
}
@media (max-width: 700px) and (orientation: portrait) and (max-height: 760px) {
  .auth-login {
    padding-top: clamp(64px, 100vh - 560px, 145px);
    background:
      linear-gradient(180deg, transparent, var(--fk-panel) clamp(110px, 100vh - 500px, 205px)),
      url('/auth/assets/scene-camp.webp') 22% top / auto clamp(130px, 100vh - 470px, 235px) no-repeat,
      var(--fk-board-bg);
  }
  /* 有錯誤提示時多一個框：場景再讓一點，按鈕不被擠出畫面 */
  .auth-login:has(.alert:not([hidden])) { padding-top: clamp(40px, 100vh - 620px, 145px); }
}

@media (orientation: landscape) and (max-height: 500px) {
  /* 整頁鎖在一屏高，放不下時只有取名頁左欄自己捲（svh：Safari 網址列展開時的可見高度；主畫面模式橫放 vh＝svh，批次 0 實測） */
  body { height: 100vh; height: 100svh; }
  /* 主卡靠右、左邊露出場景（啾啾）；讓位：右邊動態島、下面主畫面橫條只在主卡裡扣一次 */
  .sbody {
    width: clamp(470px, 70vw, 660px);
    max-width: none;
    margin: 0 0 0 auto;
    padding: max(14px, env(safe-area-inset-top)) calc(env(safe-area-inset-right) + 22px) max(12px, env(safe-area-inset-bottom)) 24px;
    flex: 1 1 0;
    border-right: 0;
    gap: 10px;
  }
  .sbody::before { right: calc(env(safe-area-inset-right) + 8px); }
  .col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; gap: 10px; }
  .col > * { flex-shrink: 0; }
  .sbody .btn { min-height: 46px; }

  /* 登入：左＝品牌、Discord 按鈕（錯誤提示跟著按鈕）；右＝怎麼上桌三步、隱私說明 */
  .auth-login { flex-direction: row; justify-content: normal; gap: 24px; }
  .auth-login .col { justify-content: center; }
  .auth-login .brand { font-size: 44px; }
  .auth-login .sub { font-size: 15px; }
  .auth-login .col-main { gap: 14px; }
  .auth-login .alert { padding: 8px 12px; font-size: 13px; line-height: 1.5; }

  /* 取名：頂端一條品牌；左＝你是誰、取名、輸入框與提示；右＝規則、不能改、確定 */
  .auth-name .top { padding-bottom: 8px; font-size: 16px; }
  .auth-name .stack { flex: 1 1 0; min-height: 0; flex-direction: row; gap: 24px; padding-top: 0; }
  .auth-name .col-main { overflow-y: auto; overscroll-behavior: contain; }
  .auth-name .forever { margin-top: auto; }
  .me { padding: 8px 10px; }
  .ava.lg { width: 40px; height: 40px; font-size: 17px; }
  .inp { min-height: 46px; }
  .rules { line-height: 1.6; }
  .forever { padding: 8px 10px; }
  .done { min-height: 1.3em; }

}
@media (prefers-reduced-motion: reduce) {
  .sbody .btn { transition: none; }
}

/* ── 216 批次 3 後半：登入／取名頁換上牌局同一套材質（owner 2026-09-25 看比較頁 https://claude.ai/artifact/TxxWVbPB3J3JfJiGAVYjcL 同意）──
 * 圖在 assets/skin/（由 web/app/scripts/產生介面材質.py 從 app 那份複製，別手改）。織錦底＝brocade.webp；
 * 「確定」＝金牌匾（兩端雲紋 ⇒ 左右內距＝端飾寬）；資訊小框＝細金線＋織錦底；步驟圓圈＝金邊。
 * Discord 登入鈕維持官方藍：一眼認得是 Discord，比統一材質重要。
 * 2026-10-08 owner 抓到：主卡還用 216 的青銅回紋大框，該跟 254（D150 描金雙線）一起退場 ⇒ 主卡改一級頁面框：
 * 兩條金細線＋四角 14px 小折角、沒有雕花（寫法同 app 的 skin.css `.lo-pan`）；手機橫放不畫折角（角標會壓到標題字）。
 * 青銅框 frame.webp 已不用（檔留著，整包可退回）。 */
:root { --skin-bg: linear-gradient(180deg, var(--fk-skin-veil), var(--fk-skin-veil-strong)), url('/auth/assets/skin/brocade.webp') 0 0 / 180px; }
:root .sbody {
  --pc: linear-gradient(var(--fk-skin-corner), var(--fk-skin-corner));
  border: 1px solid var(--fk-line-strong); border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--fk-skin-inset), inset 0 0 0 4px var(--fk-skin-line-faint), 0 10px 28px var(--fk-skin-page-shadow);
  background:
    var(--pc) 6px 6px / 14px 2px no-repeat, var(--pc) 6px 6px / 2px 14px no-repeat,
    var(--pc) right 6px top 6px / 14px 2px no-repeat, var(--pc) right 6px top 6px / 2px 14px no-repeat,
    var(--pc) left 6px bottom 6px / 14px 2px no-repeat, var(--pc) left 6px bottom 6px / 2px 14px no-repeat,
    var(--pc) right 6px bottom 6px / 14px 2px no-repeat, var(--pc) right 6px bottom 6px / 2px 14px no-repeat,
    var(--skin-bg);
  backdrop-filter: blur(6px);
}
@media (max-height: 500px) { :root .sbody { background: var(--skin-bg); } }
:root .sbody::before { display: none; }
:root .btn-gold {
  --cap: 30px; padding-inline: calc(var(--cap) + 1px); background: none; border: 1px solid transparent; border-radius: 0; box-shadow: none;
  border-image: url('/auth/assets/skin/btn-gold.webp') 18 80 20 fill / 14% var(--cap) 15% / 0 stretch; text-shadow: 0 1px 0 var(--fk-skin-sheen-strong);
}
:root .btn-gold:disabled { opacity: 1; filter: grayscale(0.7) brightness(0.8); }
:root :is(.me, .inp, .forever) { border: 1px solid var(--fk-skin-gold-lo); border-radius: 2px; background: var(--skin-bg); box-shadow: inset 0 1px 0 var(--fk-skin-sheen); }
:root .inp:focus-within { border-color: var(--fk-gold-strong); }
:root .num { border: 1.5px solid var(--fk-gold-strong); background: var(--skin-bg); box-shadow: 0 0 0 2px var(--fk-shadow-dark), inset 0 1px 0 var(--fk-skin-sheen); }
:root .rule::before, :root .rule::after { height: 1px; border-top: 0; background: linear-gradient(90deg, transparent, var(--fk-skin-edge-fade) 30%, var(--fk-skin-edge-fade) 70%, transparent); }
:root .auth-name .top { border-bottom: 0; background: linear-gradient(90deg, transparent, var(--fk-skin-edge-fade) 18%, var(--fk-skin-edge-fade) 82%, transparent) 50% 100% / 100% 1px no-repeat; }